/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* Fonts */
@font-face{
    src: url("/assets/fonts/Montserrat-Light.ttf");
    font-weight: 200;
    font-family: Montserrat;
    font-display: swap;
}
@font-face{
    src: url("/assets/fonts/Montserrat-Regular.ttf");
    font-weight: 400;
    font-family: Montserrat;
    font-display: swap;
}
@font-face{
    src: url("/assets/fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;
    font-family: Montserrat;
    font-display: swap;
}
@font-face{
    src: url("/assets/fonts/Montserrat-Bold.ttf");
    font-weight: 700;
    font-family: Montserrat;
    font-display: swap;
}
/* CSS Reset */
*{
    padding: 0;
    margin: 0;
    font-family: Montserrat, serif;
    font-size: var(--defaultFont);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: var(--colorGrey);
}
/* Global */
:root{
    --colorMain: #3E5C76;
    --colorSecond: #1D2D44;
    --colorWhite: #FFFFFF;
    --colorGrey: #F0EBD8;
    --colorMainLight: #748CAB;
    --colorBlack: #0D1321;
    --borderRadiusSmall: 10px;
    --borderRadius: 20px;
    --borderRadiusBig: 30px;
    --h1: 72px;
    --h2: 68px;
    --h3: 48px;
    --h4: 36px;
    --h5: 28px;
    --h6: 24px;
    --h7: 16px;
    --defaultFont: 18px;
}
body{
    background-image: url("/assets/img/bg/bg.jpg");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
html{
    scroll-behavior: smooth;
}
.header_relative header{
    position: relative;
}
header{
    position: absolute;
    z-index: 9;
    width: 100%;
}
.section{
    width: 100%;
    display: -ms-grid;
    display: grid;
    padding: 75px 0;
    grid-auto-flow: row;
    justify-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    z-index: 2;
    position: relative;
    overflow: hidden;
}
.container{
    width: 100%;
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    -ms-flex-line-pack: start;
        align-content: start;
    padding: 0 10%;
}
.h1{
    font-size: var(--h1);
}
.h2{
    font-size: var(--h2);
}
.h3{
    font-size: var(--h3);
}
.h4{
    font-size: var(--h4);
}
.h5{
    font-size: var(--h5);
}
.h6{
    font-size: var(--h6);
}
.h7{
    font-size: var(--h7);
}
.default-font{
    font-size: var(--defaultFont);
}
.link{
    color: var(--colorGrey);
    text-decoration: none;
    cursor: pointer;
}
.btn-main, .btn-white{
    padding: 10px 25px;
    cursor: pointer;
    text-decoration: none;
    color: var(--colorWhite);
    background-color: var(--colorMain);
    outline: none;
    border-radius: var(--borderRadiusSmall);
    -webkit-transition: background-color .3s ease, color .3s ease, color .3s ease;
    -o-transition: background-color .3s ease, color .3s ease, color .3s ease;
    transition: background-color .3s ease, color .3s ease, color .3s ease;
    text-align: center;
    display: -ms-grid;
    display: grid;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 1px solid var(--colorMain);
}
.btn-white{
    background-color: var(--colorWhite);
    color: var(--colorBlack);
    border: 1px solid var(--colorBlack);
}
.btn-long{
    padding: 10px 75px;
}
.btn-main:hover, .btn-main:focus-visible{
    background-color: transparent;
    color: var(--colorMain);
}
.btn-white:hover, .btn-white:focus-visible{
    background-color: var(--colorBlack);
    color: var(--colorWhite);
}
.w-200{
    font-weight: 200;
}
.w-400{
    font-weight: 400;
}
.w-600{
    font-weight: 600;
}
.w-700{
    font-weight: 700;
}
.txt-gradient{
    background: -o-linear-gradient(330deg, var(--colorMainLight) 20%, var(--colorMain));
    background: linear-gradient(120deg, var(--colorMainLight) 20%, var(--colorMain));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.border-2{
    border-width: 2px;
}
.color-main{
    color: var(--colorMain);
}
.color-main-light{
    color: var(--colorMainLight);
}
.color-white{
    color: var(--colorWhite);
}
.color-grey{
    color: var(--colorGrey);
}
.color-black{
    color: var(--colorBlack);
}
.color-second{
    color: var(--colorSecond);
}
.color-red{
    color: red;
}
.color-green{
    color: #447e43;
}
.grid{
    display: -ms-grid;
    display: grid;
}
.gap-10{
    gap: 10px;
}
.gap-25{
    gap: 25px;
}
.gap-50{
    gap: 50px;
}
.gap-75{
    gap: 75px;
}
.gap-100{
    gap: 100px;
}
.grid-row{
    grid-auto-flow: column;
}
.grid-column{
    grid-auto-flow: row;
}
.ta-c{
    text-align: center;
}
.jc-s{
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}
.jc-c{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.jc-e{
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}
.jc-sb{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.jc-se{
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}
.jc-sa{
    -ms-flex-pack: distribute;
        justify-content: space-around;
}
.ac-s{
    -ms-flex-line-pack: start;
        align-content: start;
}
.ac-c{
    -ms-flex-line-pack: center;
        align-content: center;
}
.ac-e{
    -ms-flex-line-pack: end;
        align-content: end;
}
.ac-sb{
    -ms-flex-line-pack: justify;
        align-content: space-between;
}
.ac-se{
    -ms-flex-line-pack: space-evenly;
        align-content: space-evenly;
}
.ai-s{
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
}
.ai-c{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.ai-e{
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}
.ji-s{
    justify-items: start;
}
.ji-c{
    justify-items: center;
}
.ji-e{
    justify-items: end;
}
.js-s{
    -ms-grid-column-align: start;
        justify-self: start;
}
.js-c{
    -ms-grid-column-align: center;
        justify-self: center;
}
.js-e{
    -ms-grid-column-align: end;
        justify-self: end;
}
.as-s{
    -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start;
}
.as-c{
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}
.as-e{
    -ms-flex-item-align: end;
        -ms-grid-row-align: end;
        align-self: end;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-25{
    margin-bottom: 25px;
}
.mb-50{
    margin-bottom: 50px;
}
.mb-75{
    margin-bottom: 75px;
}
.mb-100{
    margin-bottom: 100px;
}
.w-inherit{
    font-weight: inherit;
}
.font-inherit{
    font-size: inherit;
}
.family-inherit{
    font-family: inherit;
}
.txt-inherit{
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
}
.width-100{
    width: 100%;
}
.input{
    border: none;
    border-radius: var(--borderRadiusSmall);
    padding: 15px 20px;
    background-color: var(--colorSecond);
    width: 100%;
    color: var(--colorWhite);
}
.label{
    position: relative;
    width: 100%;
}
.input:focus{
    outline: 1px solid var(--colorSecond);
}
.form{
    display: -ms-grid;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    -ms-flex-line-pack: start;
        align-content: start;
    width: 100%;
}
/* Menu */
.menu__section{
    padding: 10px 10%;
}
.menu__container{
    padding: 10px 25px;
    border-radius: var(--borderRadiusBig);
    background-color: var(--colorSecond);
}
.menu__socials_img{
    width: 30px;
    height: 30px;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
}
.menu__link_socials:hover .menu__socials_img{
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
}
.menu__logo_img{
    width: 90px;
}
#burger__open{
    display: none;
}
.menu__container_burger{
    display: none;
}
/* Main */
.main__inner_header{
    -ms-grid-columns: 1fr 3fr;
    grid-template-columns: 1fr 3fr;
}
.main__img_header{
    max-height: 300px;
}
.main__text{
    padding: 30px;
    background-color: rgba(240, 235, 216, 0.05);
    border-radius: var(--borderRadius);
}
.main-text__p{
    word-break: break-word;
}
.main-text__img{
    width: 100%;
    cursor: pointer;
}
.main-text__imgs{
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.main-text__imgs_large{
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
/* Modal */
.modal__section{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(245, 245, 245, 0.4);
    z-index: 10;
}
.modal__section_active{
    display: -ms-grid;
    display: grid;
}
.modal__container{
    padding: 50px !important;
}
.modal__cross{
    position: absolute;
    top: 50px;
    right: 50px;
    cursor: pointer;
    text-shadow: black 1px 0 4px, black -1px 0 4px;
}
.modal__img{
    max-height: 90vh;
    width: 100%;
    -o-object-position: center center;
       object-position: center center;
    -o-object-fit: contain;
       object-fit: contain;
}
/* Review */
textarea.input{
    resize: vertical;
}
.review__textarea{
    height: 200px;
}
.reviews-card__img{
    width: 75px;
}
.reviews__section{
    padding-top: 0 !important;
}
.reviews-inner__card p, .reviews-inner__card span{
    word-break: break-word;
}
/* Auth */
.auth__section{
    min-height: 100vh;
}
/* Admin */
.admin__section{
    min-height: 100vh;
}
.admin__card{
    background-color: var(--colorMain);
    padding: 20px;
    border-radius: var(--borderRadius);
}
.admin__card div span, .admin__card div p{
    word-break: break-word;
}
/* Media */
@media(max-width: 1480px){
    :root{
        --h1: 54px;
        --h2: 48px;
        --h3: 36px;
        --h4: 28px;
        --h5: 24px;
        --h6: 22px;
        --h7: 16px;
        --defaultFont: 18px;
    }
    .section{
        padding: 70px 0;
    }
    .container{
        padding: 0 7%;
    }
    .menu__section{
        padding: 10px 7%;
    }
    .menu__container{
        padding: 10px 25px;
    }
}
@media(max-width: 1024px){
    :root{
        --h1: 48px;
        --h2: 36px;
        --h3: 28px;
        --h4: 24px;
        --h5: 20px;
        --h6: 18px;
        --h7: 14px;
        --defaultFont: 16px;
    }
    .section{
        padding: 70px 0;
    }
    .container{
        padding: 0 7%;
    }
    .menu__section{
        padding: 10px 7%;
    }
    .menu__container{
        padding: 10px 25px;
    }
    .main__inner_header{
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}
@media(max-width: 768px){
    :root{
        --h1: 40px;
        --h2: 32px;
        --h3: 24px;
        --h4: 20px;
        --h5: 18px;
        --h6: 15px;
        --h7: 14px;
        --defaultFont: 14px;
    }
    .modal__cross{
        font-size: var(--h3);
    }
    .menu__logo_img{
        width: 70px;
    }
}
@media(max-width: 576px){
    .section{
        padding: 50px 0;
    }
    .container{
        padding: 0 5%;
    }
    .menu__section{
        padding: 10px 5%;
    }
    .menu__container{
        padding: 10px 25px;
    }
    :root{
        --h1: 36px;
        --h2: 28px;
        --h3: 20px;
        --h4: 18px;
        --h5: 16px;
        --h6: 14px;
        --h7: 12px;
        --defaultFont: 14px;
    }
    .modal__container{
        padding: 10px !important;
    }
    .modal__img{
        max-height: 90vh;
        width: 100%;
        -o-object-position: center center;
           object-position: center center;
        -o-object-fit: contain;
           object-fit: contain;
    }
    .modal__cross{
        font-size: var(--h1);
        top: 30px;
        right: 20px;
    }
    .main__img_header{
        width: 200px;
    }
    .main-text__imgs{
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .main-text__imgs_large{
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .menu__container{
        gap: 5px;
    }
    .main__title{
        display: -ms-grid;
        display: grid;
        grid-auto-flow: row;
        -ms-flex-line-pack: start;
            align-content: start;
        justify-items: center;
    }
    .main__title br{
        display: none;
    }
    .reviews-inner__card{
        grid-auto-flow: row;
        gap: 10px;
    }
    .reviews__inner{
        gap: 30px;
    }
}