@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/*variables css*/
:root{
    --header-height: 3rem;
    /*colors*/
    --first-color: #26A69A;
    --first-color-lighter: #ECF3f2;
    --title-color: #11443F;
    --text-color: #5B7B78;
    --body-color: #F5FFFE;

    /*font and typografi*/
    --body-font: 'Poppins', sans-serif;
    --biggest-font-size: 3rem;
    --big-font-size: 1.25rem;
    --normal-font-size: .938rem;

    /*font weith*/
    --font-medium: 500;
    --font-semi-bold: 600;

    /*z index*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

@media screen and (min-width: 1024px){
    :root{
        --biggest-font-size: 5.5rem;
        --big-font-size: 2rem;
        --normal-font-size: 1rem;
    }
}

/*base*/
*,::before,::after{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

h1,h2,ul,p{
    margin: 0;
}

ul{
    padding: 0;
    list-style: none;
}

a{
    text-decoration: none;

}

img{
    max-width: 100%;
    height: auto;
}

/*layout*/
.main{
    /* position: relative; */
    position: static;
}

.bd-container{
    max-width: 968px;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/*header*/
.header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
}

/*nav*/
.nav{
    max-width: 968px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 769px){
    .nav_menu{
        position: fixed;
        top: -100rem;
        left: 0;
        right: 0;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        padding-top: 1.5rem;
        background-color: var(--first-color-lighter);
        border-radius: 1rem;
        transition: .4s;
    }
}

.nav_logo,
.nav_toogle{
    color: var(--first-color-lighter);
}

.nav_link{
    color: var(--title-color);
    font-weight: var(--font-medium);
}

.nav_item{
    margin-bottom: 1.5rem;
}

.nav_toogle{
    font-size: 1.3rem;
    cursor: pointer;
}

.show-menu{
    top: calc(var(--header-height) + 1rem);
}

/*islands*/

.islands{
    height: 100vh;
    position: relative;
}

.islands_bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

.islands_container{
    position: relative;
    height: 100%;
    display: grid;
    grid-template-columns: 2fr .25fr;
    align-content: center;
    padding-top: 50px;
}

.islands_subtitle,
.islands_title,
.islands_description{
    color: var(--first-color-lighter);
}

.islands_subtitle{
    font-size: var(--big-font-size);
    font-weight: var(--font-medium);
}

.islands_title{
    font-size: var(--biggest-font-size);
}

.islands_description{
    margin-bottom: 1rem;
}

.islands_button{
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: var(--first-color-lighter);
    color: var(--first-color);
    border-radius: .5rem;
    font-weight: var(--font-medium);
}

.islands_button:hover{
    background-color: var(--body-color);
}

.islands_button-ico{
    font-size: 1.5rem;
    margin-left: .5rem;
}

.islands_video{
    display: flex;
    align-items: flex-end;
    padding-bottom: .75rem;
}

.islands_video-content{
    display: inline-flex;
    padding: .15rem;
    background-color: var(--first-color-lighter);
    border-radius: 50%;
    cursor: pointer;
}

.islands_video-icon{
    font-size: 1.8rem;
    color: var(--first-color);
}

.islands_popup{
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--first-color-lighter);
    padding: 1rem .75rem;
    border-radius: 1rem;
}

.islands_popup-close{
    position: absolute;
    top: -.75rem;
    right: -.75rem;
    display: inline-flex;
    padding: .35rem;
    background-color: var(--first-color);
    color: var(--first-color-lighter);
    font-size: 1.2rem;
    border-radius: 50%;
    cursor: pointer;
}

/*show popup*/
.show-popup{
    display: block;
}
/*controls*/
.controls_img{
    width: 35px;
    height: 35px;
    border-radius: .35rem;
    cursor:pointer;
}

.controls{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateY(-50%);
    padding: .25rem .25rem;
    background-color: var(--first-color-lighter);
    border-radius: .75rem;
    z-index: var(--z-tooltip);
    overflow: hidden;
}

.controls_container{
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.swiper-container{
    overflow: visible!important;
}

/*active controls*/
.swiper-slide-thumb-active{
    width: 45px!important;
    height: 45px!important;
}

/*media querys*/
@media screen and (max-width: 320px){
    .bd-container{
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .controls_container{
        column-gap: .25rem;
    }

    .islands_popup-video{
        width: 320px;
        height: 100px;
    }
}

@media screen and (min-width: 768px){
    .nav{
        height: calc(var(--header-height) + 1.5rem);
    }

    .nav_list{
        display: flex;
    }

    .nav_item{
        margin-right: 2rem;
        margin-bottom: 0;
    }

    .nav_link{
        color: var(--first-color-lighter);
    }

    .nav_toogle{
        display: none;
    }

    .islands_container{
        grid-template-columns: repeat(2, 1fr);
    }

    .islands_description{
        padding-right: 5rem;
        margin-bottom: 2rem;
    }

    .islands_video{
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .islands_video-icon{
        font-size: 3rem;
    }

    .islands_popup-video{
        width: 500px;
        height: 250px;
    }

    .islands_popup-close{
        font-size: 1.5rem;
    }

    .controls{
        padding: .5rem;
        border-radius: 1.25rem;
    }

    .controls_container{
        column-gap: 1.5rem;
    }

    .controls_img{
        width: 45px!important;
        height: 45px!important;
        border-radius: .75rem;
    }

    .swiper-slide-thumb-active{
        width: 55px!important;
        height: 55px!important;
    }
}

@media screen and (min-width: 1024px){
    .bd-container{
        margin-left: auto;
        margin-right: auto;
    }

    .islands_description{
        padding-right: 11rem;
    }
}

/*for tall screend on mobile an desktop*/
@media screen and (min-height: 721px){
    .islands{
        height: 640px;
    }
}