@import url(style-global.css);

.header-bg{
    background-image: url("../images/header/header_bg.jpg");
    background-position: -0.5vw center;
    background-repeat: no-repeat;
    background-size: cover;
}

.header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 36px;
}

.header-inner__logo{
    width: clamp(9rem, 18.6vw + 2rem, 14.75rem);
    height: clamp(4.313rem, 9vw + 0.95rem, 7.125rem);
}

.header-inner__menu{
    color: var(--white);
}

.header-inner__connection{
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 24px;
}

.header-inner__phone-numbers{
    font-size: clamp(1.125rem, 2.5vw - 0.14rem, 1.5rem);
}

.header-inner__list{
    display: flex;
    align-items: center;
}

.header-inner__item{
    border-right: 3px solid var(--orange);
    padding: 0 10px;
}

.header-inner__item:nth-child(3){
    position: relative;
}

.header-inner__link{
    font-weight: 600;
    font-size: clamp(0.75rem, 1.7vw - 0.11rem, 1rem);
    text-transform: uppercase;
    text-align: center;
    transition: .3s;
}

.header-inner__menu-block {
    display: none;
    position: absolute;
    /*top: auto;*/
    padding-top: 17px;
    left: 0;
    box-shadow: 12px 12px 12px 0 rgba(0, 0, 0, 0.45);
    width: 274px;
    z-index: 2;
    transition: display 0.1s;
    transition-behavior: allow-discrete;;
}

.menu-block__item{
    background: var(--dark-blue);
    padding: 11px 24px 10px 24px;
    opacity: 0.8;
    border-bottom: 1px solid var(--orange);
}

.menu-block__item:nth-child(1){
    border-top: 1px solid var(--orange);
}

.menu-block__link{
    font-weight: 500;
    font-size: 16px;
    line-height: 130%;
    color: var(--white);
    transition: .3s;
}

.header-inner__item:first-child
{
    padding-left: 0;
}

.header-inner__item:last-child{
    padding-right: 0;
    border-right: none;
}

.menu-button{
    display: none;
    background-image: url("../images/header/menu-button.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 36px;
    height: 32px;
    background-color: transparent;
    border: none;
}

.banner{
    display: flex;
    padding-bottom: 53px;
}

.banner__inner-text{
    max-width: clamp(28.125rem, 50vw + 3rem, 35.625rem);
}

.banner__title{
    font-weight: 500;
    font-size: clamp(2.125rem, 4vw + 1rem, 3.75rem);
    line-height: 120%;
    text-transform: uppercase;
    color: var(--orange);
    margin-top: 92px;
    margin-bottom: 28px;
}

.banner__description{
    max-width: clamp(28.125rem, 15.5vw + 23rem, 33.375rem);
    font-weight: 500;
    font-size: clamp(1.25rem, 0.74vw + 1rem, 1.5rem);
    line-height: 130%;
    color: var(--white);
    margin-bottom: 24px;
}

.banner__caption{
    font-weight: 500;
    font-size: clamp(1.25rem, 0.74vw + 1rem, 1.5rem);
    line-height: 130%;
    color: var(--orange);
    margin-bottom: 58px;
}

.banner__inner-image{
    width: clamp(26.875rem, 43vw + 5rem, 33.188rem);
    height: clamp(33.125rem, 30vw + 17.8rem, 37.313rem);
    background-size: contain;
    margin-bottom: 54px;
    position: relative;
}

.banner__inner-image::after{
    content: '';
    display: block;
    position: absolute;
    width: 546px;
    height: 442px;
    background: rgba(244, 122, 55, 0.3);
    border-radius: 100%;
    filter: blur(137px);
}

.banner__image{
    position: absolute;
    display: block;
    width: 531px;
    height: 597px;
    top: 54px;
    z-index: 1;
}

.header-inner__logo--mobi,
.social--mobi,
.header-inner__menu-mobi
{
    display: none;
}

.form-call-a-master{
    position: absolute;
    max-width: 454px;
    top: -1000px;
    right: 0;
    left: 0;
    margin: 0 auto;
    transition: .5s;
    z-index: 2;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);
    background: var(--very-light-grey);
    padding: 36px 40px 48px 40px;
}

.form-call-a-master__title{
    font-weight: 500;
    font-size: 24px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 34px;
}

.btn-close-form{
    position: absolute;
    width: 31px;
    height: 31px;
    background-color: transparent;
    background-image: url(../images/pop-up-windows/close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    padding: 0;
    top: 37px;
    right: 40px;
    cursor: pointer;
    transition: .3s;
}

.form-call-a-master__label{
    display: block;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--dark-blue);
    margin-bottom: 11px;
}

.form-call-a-master__input{
    box-sizing: border-box;
    border: 1px solid var(--grey);
    border-radius: 6px;
    padding: 15px 0 13px 19px;
    width: 100%;
    outline: none;
}

.form-call-a-master__input-item{
    position: relative;
    margin-bottom: 20px;
}

.form-call-a-master__input::placeholder{
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    color: var(--grey);
}

.form-call-a-master__input-button{
    display: block;
    position: absolute;
    transition: .3s;
    width: 49px;
    height: 48px;
    background-image: url(../images/pop-up-windows/Arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: transparent;
    top: 0;    
    right: 0;
    border: none;
    cursor: pointer;
}

.form-call-a-master__list{
    display: none;
    position: absolute;
    padding-top: 15px;
    min-height: 110px;
    width: 100%;
    z-index: 2;
    background-color: var(--light-grey);
}

.form-call-a-master__list > li{
    padding: 5px 5px 5px 5px;
    transition: .2s;
    cursor: pointer;
}

.form-call-a-master__input-name{
    margin-bottom: 21px;
}

.form-call-a-master__input-tel{
    margin-bottom: 20px;
}

.form-call-a-master__textarea{
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    resize: none;
    border: 1px solid var(--grey);
    border-radius: 6px;
    height: 204px;
    padding: 11px 19px;
    margin-bottom: 16px;
    outline: none;
}

.form-call-a-master__textarea::placeholder{
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    color: var(--grey);
}

.form-call-a-master__errors{
    color: var(--red);
}

.form-call-a-master__textarea:focus,
.form-call-a-master__input:focus{
    border: 1px solid rgb(231, 116, 46);
}

.error{
    border: 1px solid var(--red);
}

.agreement{
    margin-bottom: 32px;
}

.agreement__label{
    display: flex;
    gap: 19px;
}

.agreement__label::before{
    content: '';
    display: block;
    min-width: 24px;
    height: 24px;
    border: 1px solid var(--grey);
    border-radius: 4px;
    cursor: pointer;
}

.agreement__checkbox{
    display: none;
}

.agreement__checkbox:checked + .agreement__label::before{
    background-image: url(../images/call-a-master/checkbox.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

}

.agreement__checkbox:not(:checked) + .agreement__label::before{
    background-color: transparent;
}

.agreement__description{
    font-size: 14px;
    line-height: 130%;
    color: var(--dark-blue);
}

.agreement__description a{
    font-weight: 600;
    color: var(--dark-blue);
}

.form-call-a-master__button{
    display: block;
    border-radius: 10px;
    padding: 14px 32px;
    background: radial-gradient(50% 50% at 50% 50%, #f6a70c 0%, #e7742e 100%);
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    text-transform: uppercase;
    text-align: center;
    color: var(--dark-blue);
    border: 1px solid transparent;
    margin: 0 auto;
    transition: .3s;
    /*pointer-events: none;*/
    cursor: pointer;
}

.form-get-a-consultation{
    position: absolute;
    max-width: 454px;
    margin: 0 auto;
    top: -1000px;
    left: 0;
    right: 0;
    padding: 36px 40px 48px 40px;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.15);
    background: var(--very-light-grey);
    z-index: 2;
    transition: .5s;
}

.form-get-a-consultation__title{
    font-weight: 500;
    font-size: 24px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 17px;
}

.form-get-a-consultation__label{
    display: block;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    color: var(--dark-blue);
    margin-bottom: 11px;
}

.form-get-a-consultation__input{
    box-sizing: border-box;
    border: 1px solid var(--grey);
    border-radius: 6px;
    padding: 15px 0 13px 19px;
    width: 100%;
    outline: none;
}

.form-get-a-consultation__input-item{
    position: relative;
    margin-bottom: 20px;
}

.form-get-a-consultation__input::placeholder{
    font-weight: 500;
    font-size: 18px;
    line-height: 140%;
    color: var(--grey);
}

.form-get-a-consultation__input-name{
    margin-bottom: 21px;
}

.form-get-a-consultation__input-tel{
    margin-bottom: 18px;
}

.form-get-a-consultation__errors{
    color: var(--red);
}

.form-get-a-consultation__input:focus{
    border: 1px solid rgb(231, 116, 46);
}

.error{
    border: 1px solid var(--red);
}

.agreement{
    margin-bottom: 32px;
}

.agreement__label{
    display: flex;
    gap: 19px;
}

.agreement__label::before{
    content: '';
    display: block;
    min-width: 24px;
    height: 24px;
    border: 1px solid var(--grey);
    border-radius: 4px;
    cursor: pointer;
}

.agreement__checkbox{
    display: none;
}

.agreement__checkbox:checked + .agreement__label::before{
    background-image: url(../images/call-a-master/checkbox.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

}

.agreement__checkbox:not(:checked) + .agreement__label::before{
    background-color: transparent;
}

.agreement__description{
    font-size: 14px;
    line-height: 130%;
    color: var(--dark-blue);
}

.agreement__description a{
    font-weight: 600;
    color: var(--dark-blue);
}

.form-get-a-consultation__button{
    display: block;
    border-radius: 10px;
    padding: 15px 32px;
    background: radial-gradient(50% 50% at 50% 50%, #f6a70c 0%, #e7742e 100%);
    font-weight: 600;
    font-size: 18px;
    line-height: 120%;
    text-transform: uppercase;
    text-align: center;
    color: var(--dark-blue);
    border: 1px solid transparent;
    margin: 0 auto;
    transition: .3s;
    /*pointer-events: none;*/
    cursor: pointer;
}

.menu-modal{
    position: absolute;
    right: 0;
    left: -4000px;
    padding-top: 28px;
    padding-bottom: 42px;
    margin: 0 auto;
    background: var(--dark-blue);
    transition: .3s;
}

.menu-modal__link{
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--white);
}

.menu-modal__content-flex{
    display: flex;
    align-items: center;
    gap: 11px;
}

.menu-modal__img{
    cursor: pointer;
    transition: .3s;
}

.menu-modal__list-drop{
    max-height: 0px;
    overflow-y: hidden;
    /*padding-top: 18px;*/
    padding-left: 38px;
    transition: .3s;
}

.list-drop__link{
    font-weight: 500;
    font-size: 18px;
    line-height: 1.3;
    color: var(--white);
}

.menu-modal__item{
    padding: 18px 0 12px;
    border-top: 1px solid var(--orange);
}

.menu-modal__item:last-child{
    border-bottom: 1px solid var(--orange);
}

.list-drop__item{
    border-top: 1px solid var(--orange);
    padding: 17px 0 13.6px;
}


@media(hover:hover){
    .header-inner__link:hover{
        opacity: .5;
    }

    .menu-block__link:hover{
        opacity: 0.7;
    }

    .header-inner__list > .header-inner__item.header-inner__item-services:hover > .header-inner__menu-block{
        display: block;
    }

    .btn-close-form:hover{
        opacity: 0.7;
    }

    .form-call-a-master__list > li:hover {
        background-color: var(--white);
    }

    .form-call-a-master__button:hover{
        border: 1px solid var(--orange);
        background: var(--white);
        color: var(--orange);
    }

    .form-call-a-master__input-button:hover{
        opacity: 0.7;
    }

    .form-get-a-consultation__button:hover{
        border: 1px solid var(--orange);
        background: var(--white);
        color: var(--orange);
    }
}

@media(max-width:1150px){
    .header-bg{
        overflow-x: hidden;
    }
}

@media(max-width:780px){
    .header-bg {
        background-position: 50% center;
    }

    .header-inner__logo{
        display: none;
    }
    .header-inner__phone-numbers .phone-numbers__item:first-child{
        display: none;
    }
    .social{
        display: none;
    }

    .header-inner{
        flex-direction: column;
        padding-top: 26px;
    }

    .header-inner__connection{
        margin-bottom: 15px;
    }

    .header-inner__menu{
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .menu-button{
        display: block;
    }

    .header-inner__nav{
        display: none;
    }

    .banner {
        padding-bottom: 45px;
    }

    .banner__title {
        margin-top: 34px;
        margin-bottom: 20px;
    }

    .banner__description {
        margin-bottom: 12px;
    }

    .banner__caption {
        margin-bottom: 32px;
    }

    .banner__inner-image{
        display: none;
    }

    .header-inner__logo--mobi
    {
        width: 144px;
        height: 69px;
        display: block;
    }

    .social--mobi{
        display: flex;
        gap: 26px;
        padding-top: 20px;
    }

    .social--mobi .social__link{
        width: 34px;
        height: 34px;
    }

    .header-inner__menu-mobi{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .header-inner__phone-numbers{
        font-size: 24px;
    }
}