:root{
    --header-background: #0C70AC;
    --hero-background: #0C70AC;
    --destination-background: #FFFFFF;
    --footer-background: #001C2D;
    --gallery-background: #001C2D;
    --blog-background: #E6E6E6;
    --title-color: #000000;
    --text-color: #7C7C7C;
    --link-color: #fff;
    --hover-color: #F4DE1F;
    --section-borders: #fff;
    --second-title: #fff;
    --transparent-text: rgba(255, 255, 255, 0.5);
}
/* header */
.header{
    background-color: var(--header-background);
    padding-top: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--section-borders);
}
.container{
    width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}
.header-nav-list{
    display: flex;
    justify-content: center;
    gap: 71px;
}
.header-nav-link{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--link-color);
    text-transform: uppercase;
    transition-duration: 250ms;
}
.header-nav-link:hover,
.header-nav-link:focus{
    color: var(--hover-color);
}
/* hero */
.hero{
    background-color: var(--hero-background);
}
.hero-positioning-list{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hero-title{
    width: 500px;
    color: var(--link-color);
    font-weight: 700;
    font-size: 64px;
}
.hero-text{
    width: 500px;
    color: var(--transparent-text);
    font-weight: 700;
    font-size: 24px;
}
.hero-diver-img{
    width: 382px;
    height: 450px;
}
/* destinations */
.destinations{
    background-color: var(--destination-background);
    padding-top: 60px;
    padding-bottom: 60px;
}
.section-title{
    margin-bottom: 37px;
    text-align: center;
    color: var(--title-color);
    font-weight: 600;
    font-size: 30px;
}
.destinations-list{
    display: flex;
    justify-content: space-around;
}
.destinations-card{
    width: 358px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.destinations-card-img{
    width: 358px;
    height: 256px;
    margin-bottom: 22px;
}
.destinations-card-title{
    font-weight: 500;
    font-size: 27px;
    color: var(--title-color);
    margin-bottom: 12px;
}
.destinations-card-text{
    font-weight: 500;
    font-size: 18px;
    color: var(--title-color);
    margin-bottom: 22px;
}
.destinations-card-link{
    text-transform: uppercase;
    font-weight: 500;
    font-size: 18px;
    text-decoration: underline;
    color: var(--text-color);
}
/* blog */
.blog{
    background-color: var(--blog-background);
    padding-bottom: 60px;
    padding-top: 60px;
}
.blog-card-list{
    display: flex;
    justify-content: space-around;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.blog-card-img{
    width: 358px;
    height: 235px;
    margin-bottom: -3px;
}
.blog-card-wrap{
    width: 300px;
    padding-top: 18px;
    background-color: var(--destination-background);
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 37px;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}
.blog-card-date{
    font-weight: 600;
    font-size: 12px;
    color: var(--text-color);
}
/* gallery */
.gallery{
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: var(--gallery-background);
}
.gallery-split{
    display: flex;
    justify-content: space-between;
}
.second-section-title{
    margin-bottom: 37px;
    font-weight: 600;
    font-size: 30px;
    color: var(--second-title);
}
.gallery-img-list{
    flex-wrap: wrap;
    width: 382px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
}
.gallery-img{
    width: 112px;
    height: 112px;
}
.quick-link-list{
    width: 405px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 296px;
}
.quick-link-item{
    margin-bottom: 52px;
}
.quick-link{
    color: var(--link-color);
    font-weight: 600;
    font-size: 18px;
    transition-duration: 250ms;
}
.quick-link:hover,
.quick-link:focus{
    color: var(--hover-color);
}
.footer{
    border-top: 1px solid var(--section-borders);
    padding-top: 47px;
    padding-bottom: 47px;
    background-color: var(--footer-background);
}
.copyrights{
    color: var(--transparent-text);
    font-weight: 400;
    font-size: 15px;
    font-family: "Inter", sans-serif;
    text-align: center;
}