* {
    box-sizing: border-box;
}

html,
body {
    padding: 0;
    margin: 0;
    /* background: linear-gradient(156.3deg, #141414 6.5%, #1C2430 119.21%); */
}

.flex {
    display: flex;
}

.wrapper {
    max-width: 1440px;
    margin: 0 auto;
}

.wrapper__header {
    min-width: 100%;
    background: radial-gradient(35.14% 59.97% at 49.13% 2.12%, #1070D5 0%, #DFECFF 100%);
    padding: 0 10% 40px;
}

.wrapper__headerContainer {
    background: #E9F2FF;
    padding: 40px 75px;
    margin: 0 auto;
    border-radius: 64px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    background: #E0E7F0;
    padding: 14px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    /* Шрифт */
}

.phones {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: clamp(0.5rem, 0.2917rem + 0.9259vw, 1.125rem);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(0.5625rem, 0.3542rem + 0.9259vw, 1.1875rem);
}

.contacts {
    gap: 20px;
}

.logo img,
.contact-links img {
    width: clamp(1.0625rem, 0.625rem + 1.9444vw, 2.375rem);
}

.btn__contact {
    padding: 12px 20px;
    background: radial-gradient(29.95% 89.28% at 98.39% 94.32%, #2DA8FF 0%, #0075FF 100%);
    box-shadow: 0px 9.99px 24.98px 0px rgba(0, 133, 255, 0.3);
    border-radius: 15px;
    text-transform: uppercase;
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(0.5rem, 0.2917rem + 0.9259vw, 1.125rem);
}

.main {
    margin-top: 30px;
}

.title {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    /* Шрифт */
    font-size: clamp(1.25rem, 0.6667rem + 2.5926vw, 3rem);
}

.main__info {
    justify-content: space-between;
    margin: 20px 0;
}

.info {
    flex-direction: column;
}

.info__text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    /* Шрифт */
    font-size: clamp(0.75rem, 0.5833rem + 0.7407vw, 1.25rem);
    line-height: 25px;
}

.info__btn {
    max-width: 310px;
    background: radial-gradient(29.95% 89.28% at 98.39% 94.32%, #2DA8FF 0%, #0075FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    box-shadow: 0px 14.85px 37.11px 0px #0085FF4D;
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    padding: 20px 10px;
    border-radius: 20px;
    margin-top: 38px;
    align-self: flex-start;
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
}

.cardBlock {
    justify-content: space-between;
    gap: 5px;
}

.cardBlock img {
    max-width: 100%;
    box-shadow: 0px 14px 37px 0px #0085FF4D;
}

.footer {
    margin: 0 auto;
    margin-top: 40px;
}

.footerContainer {
    gap: 40px;
}

.footerAdvert {
    flex-direction: column;
    align-items: flex-start;
}

.footerAdvert__title {
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: 28px;
    font-weight: 800;
    line-height: 36px;
}

.footerAdvert__resorses {
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: 23.23px;
    font-weight: 700;
    line-height: 28.34px;
    color: #FFF;
    margin-top: 15px;
    gap: 7px;
}

.resorsesBlock {
    padding: 20px 30px;
    background: radial-gradient(29.95% 89.28% at 98.39% 94.32%, #2DA8FF 0%, #0075FF 100%);
    box-shadow: 0px 17.25px 43.11px 0px #0085FF4D;
    border-radius: 25px;
}

.footerAdvert__description {
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
    font-weight: 500;
    line-height: 18px;
    margin-top: 30px;
}

.footer__btn {
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    padding: 18px 20px;
    background: radial-gradient(29.95% 89.28% at 98.39% 94.32%, #2DA8FF 0%, #0075FF 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    box-shadow: 0px 14.85px 37.11px 0px #0085FF4D;
    border-radius: 20px;
    text-transform: uppercase;
    color: #FFF;
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
    font-weight: 700;
    line-height: 24.4px;
    cursor: pointer;
}

.wrapper__main {
    padding: 0 10% 60px;
    background: linear-gradient(156.3deg, #141414 6.5%, #1C2430 119.21%);
}

.adTechSolutions {
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}

.advert {
    background: radial-gradient(92% 92% at 4% 8%, #2C99FF 0%, #005EC9 100%);
    padding: 40px;
    border-radius: 50px;
    /* ИЗМЕНИТЬ */
    width: 900px;
}

.advert__title {
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: clamp(1.25rem, 0.6667rem + 2.5926vw, 3rem);
    font-weight: 800;
    line-height: 60px;
    color: #FFF;
}

.advertForm {
    flex-direction: column;
    align-items: flex-start;
}


.advertFormImg {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.advertForm__description {
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: clamp(0.625rem, 0.3333rem + 1.2963vw, 1.5rem);
    font-weight: 500;
    line-height: 30px;
    color: #FFF;
}

.labelEmail {
    margin-top: clamp(1.25rem, 0.4167rem + 3.7037vw, 3.75rem);
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: clamp(0.875rem, 0.75rem + 0.5556vw, 1.25rem);
    font-weight: 700;
    line-height: 25px;
    color: #FFF;
}

.advertForm input {
    margin-top: 10px;
    border: none;
    padding: 18px 0 18px 18px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: clamp(0.875rem, 0.75rem + 0.5556vw, 1.25rem);
    font-weight: 400;
    line-height: 25px;
    background: #E0E7F0;
}

.btn__sub {
    border-radius: 20px;
    color: #000;
    text-transform: capitalize;
    padding: 8px 90px;
    background: #E0E7F0;
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: clamp(0.875rem, 0.75rem + 0.5556vw, 1.25rem);
    font-weight: 700;
    line-height: 25px;
    cursor: pointer;
}

.side__imgAds img{
    max-width: 100%;
}

.reasons {
    margin-top: 30px;
    color: #DFECFF;
}

.resaons__title {
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
}

.resaons__title_special {
    color: #FFF;
    background: radial-gradient(29.95% 89.28% at 98.39% 94.32%, #2DA8FF 0%, #0075FF 100%);
    box-shadow: 0px 14.85px 37.11px 0px #0085FF4D;
    border-radius: 15px;
    padding: 0 5px;
}

.reasons__count {
    margin-top: 40px;
    gap: 50px;
}

.reason {
    margin-top: 20px;
}

.reason__title {
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: 28px;
    font-weight: 800;
    line-height: 36px;
}

.reason__description {
    font-family: 'Inter', sans-serif;
    /* Шрифт */
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    margin-top: 16px;
}

.wrapper__footer {
    text-align: center;
}

.sliderSection {
    padding: 40px 10% 0;
}

.sliderSection__title {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 20px;
}

.sliderSection__title_light {
    background: radial-gradient(29.95% 89.28% at 98.39% 94.32%, #2DA8FF 0%, #0075FF 100%);
    box-shadow: 0px 14.85px 37.11px 0px #0085FF4D;
    border-radius: 15px;
    padding: 0 5px;
}

.slick-list {
    overflow: hidden;
    max-width: 260px;
    margin: 0 auto;
}

.slick-track {
    display: flex;
}

.slider__item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
}

.slider__item img {
    max-width: 100%;
    object-fit: contain;
}

.slider {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
    max-width: 260px;
    margin: 0 auto;
}

.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 100px;
    height: 100px;
    background-color: #007bff;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: 1s;
}

.arrowRight {
    width: 40px;
    height: 40px;
    border-right: 7px solid white;
    border-top: 7px solid white;
    transform: rotate(-135deg);
    position: relative;
    right: -5px; 
    border-radius: 5px;
}

.arrowLeft {
    width: 40px;
    height: 40px;
    border-right: 7px solid white;
    border-top: 7px solid white;
    transform: rotate(45deg);
    position: relative;
    left: -5px; 
    border-radius: 5px;
}

.slick-prev {
    left: -120px;
}

.slick-next {
    right: -120px;
}

.slick-prev:hover, .slick-next:hover {
    background-color: #0056b3; 
}

.footerContacts {
    background: linear-gradient(156.3deg, #141414 6.5%, #1C2430 119.21%);
    padding-top: clamp(1.875rem, 0.4167rem + 6.4815vw, 6.25rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btnContactUs {
    padding-top: clamp(1.25rem, 0.9375rem + 1.3889vw, 2.1875rem);
    padding-bottom: clamp(1.25rem, 0.9375rem + 1.3889vw, 2.1875rem);
    padding-left: clamp(5.1875rem, 4.3542rem + 3.7037vw, 7.6875rem);
    padding-right: clamp(5.1875rem, 4.3542rem + 3.7037vw, 7.6875rem);
    border-radius: 35px;
    background: radial-gradient(29.95% 89.28% at 98.39% 94.32%, #2DA8FF 0%, #0075FF 100%);
    box-shadow: 0px 25.66px 64.14px 0px #0085FF4D;
    text-transform: uppercase;
    color: #FFF;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.5625rem, 1.3542rem + 0.9259vw, 2.1875rem);
    font-weight: 700;
    line-height: 10px;
}

.privacy {
    margin-top: clamp(2.5rem, 0.2083rem + 10.1852vw, 9.375rem);
    gap: clamp(2.5rem, 0.8333rem + 7.4074vw, 7.5rem);
    padding-top: clamp(1.25rem, 0.8333rem + 1.8519vw, 2.5rem);
    padding-bottom: clamp(1.25rem, 0.8333rem + 1.8519vw, 2.5rem);
    padding-left: clamp(1.25rem, -0.2083rem + 6.4815vw, 5.625rem);
    padding-right: clamp(1.25rem, -0.2083rem + 6.4815vw, 5.625rem);
    background: #E9F2FF;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    color: #202021;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.3125rem, 0.1042rem + 0.9259vw, 0.9375rem);
    font-weight: 500;
    line-height: 6px;
}

.btn__contact, .info__btn, .learnMore, .btnContactUs {
    cursor: pointer;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Всплывающее сообщение */
.popup {
    position: fixed;
    width: clamp(18.75rem, 14.9038rem + 15.3846vw, 28.75rem);
    padding: 24px 0 0 24px;
    background: radial-gradient(92% 92% at 4% 8%, #DFECFF 0%, #C7DEFA 100%);
    color: black;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.9375rem, 0.5288rem + 1.6346vw, 2rem);
    font-weight: 800;
    line-height: 40px;
}

.popupContent {
    display: flex;
    text-align: left;
    justify-content: space-between;
}

@media (max-width: 900px) {  
    .btn__sub {
        padding: 8px 10px;
        text-align: center;
    }

    .advert {
        padding: 20px;
        width: 100%;
    }

    .advertForm {
        align-items: center;
    }

    .btn__sub {
        width: 220px;
    }
}

@media (max-width: 870px) {
    .footerContainer {
        flex-direction: column;
        gap: 25px;
    }

    .footerAdvert {
        align-items: center;
    }

    .cardBlock {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 792px) {
    .reasons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .resaons__title_special {
        display: block;
    }

    .popupContent img{
        width: 50%;
    }
}

@media (max-width: 770px) {
    .main__info {
        flex-direction: column;
        align-items: center;
    }

    .side__imgMac {
        margin-top: 50px;
    }

    .info__text {
        margin-bottom: 25px;
    }

    .info__btn {
        margin: 0 auto;
    }

    .reasons__count {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 700px) {
    .wrapper__header {
        padding: 0 5% 40px;
    }

    .wrapper__headerContainer {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: clamp(1.875rem, 1.4583rem + 1.8519vw, 3.125rem); 
        padding-right: clamp(1.875rem, 1.4583rem + 1.8519vw, 3.125rem); 
    }

    .wrapper__main {
        padding: 0 5% 10px;
    }

    .logo,
    .contacts {
        gap: 5px;
        align-items: center;
    }

    .sliderSection {
        padding: 40px 5% 0;
    }

    .slick-prev {
        left: -80px;
    }
    
    .slick-next {
        right: -80px;
    }
}

@media (max-width: 500px) {
    .side__imgAds {
        display: none;
    }

    .advertFormImg  {
        display: block;
        text-align: center;
    }

    .advert__title {
        text-align: center;
        line-height: 30px;
    }

    .labelEmail {
        margin-top: 0;
    }

    .slick-prev {
        left: -30px;
    }
    
    .slick-next {
        right: -30px;
    }

    .slick-prev, .slick-next {
        width: 70px;
        height: 70px;
    }
    
    .arrowRight {
        width: 20px;
        height: 20px;
        border-right: 3px solid white;
        border-top: 3px solid white;
        transform: rotate(-135deg);
        position: relative;
        right: -5px; 
        border-radius: 1px;
    }
    
    .arrowLeft {
        width: 20px;
        height: 20px;
        border-right: 3px solid white;
        border-top: 3px solid white;
        transform: rotate(45deg);
        position: relative;
        left: -5px; 
        border-radius: 1px;
    }
}

@media (max-width: 430px) {
    .header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .logo,
    .phones,
    .btn__contact  {
        font-size: 12px;
    }

    .btn__contact {
        flex: 1 1 100%;
        text-align: center;
      }
}