/* Fonts */
@font-face{
    src: url("../fonts/Rubik-Light.ttf");
    font-weight: 200;
    font-family: Rubik;
    font-display: swap;
}
@font-face{
    src: url("../fonts/Rubik-Regular.ttf");
    font-weight: 400;
    font-family: Rubik;
    font-display: swap;
}
@font-face{
    src: url("../fonts/Rubik-SemiBold.ttf");
    font-weight: 600;
    font-family: Rubik;
    font-display: swap;
}
@font-face{
    src: url("../fonts/Rubik-Bold.ttf");
    font-weight: 700;
    font-family: Rubik;
    font-display: swap;
}
@font-face{
    src: url("../fonts/Rubik-Black.ttf");
    font-weight: 900;
    font-family: Rubik;
    font-display: swap;
}

/* CSS Reset */
*{
    padding: 0;
    margin: 0;
    font-family: Rubik, serif;
    font-size: var(--defaultFont);
    box-sizing: border-box;
    color: var(--colorWhite);
}
/* Global */
:root{
    --colorMain: #9333EC;
    --colorWhite: #FFFFFF;
    --colorGrey: #DEDEDE;
    --colorGreyDark: #939393;
    --colorBlack: #030303;
    --colorBlackLight: #131313;
    --borderRadiusSmall: 10px;
    --borderRadius: 20px;
    --borderRadiusBig: 30px;
    --h1: 64px;
    --h2: 48px;
    --h3: 36px;
    --h4: 28px;
    --h5: 24px;
    --h6: 20px;
    --h7: 16px;
    --defaultFont: 18px;
}
html{
    scroll-behavior: smooth;
}
html::-webkit-scrollbar{
    width: 3px;
    background-color: var(--colorBlackLight);
}
html::-webkit-scrollbar-thumb{
    background-color: var(--colorMain);
    border-radius: 1px;
}
body{
    background-color: var(--colorBlack);
    background-image: url("../img/bg/bg.png");
    background-size: 100%;
    background-position: center 100vh;
}
header{
    position: fixed;
    z-index: 9;
    width: 100%;
    left: 0;
    top: 0;
}
.section{
    width: 100%;
    display: grid;
    padding: 100px 0;
    grid-auto-flow: row;
    justify-items: center;
    align-content: center;
    z-index: 2;
    position: relative;
}
.container{
    width: 100%;
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    align-content: start;
    padding: 0 7%;
}
.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(--colorWhite);
    text-decoration: none;
    cursor: pointer;
}
.btn{
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: var(--borderRadiusSmall);
    text-decoration: none;
    transition: all .4s ease;
    text-align: center;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
}
.btn-main{
    color: var(--colorWhite);
    background-color: var(--colorMain);
}
.btn-main:hover, .btn-main:focus-visible{
    background-color: var(--colorWhite);
    color: var(--colorBlack);
}
.btn-white{
    color: var(--colorBlack);
    background-color: var(--colorWhite);
    border: 1px solid var(--colorWhite);
}
.btn-white:hover, .btn-white:focus-visible{
    color: var(--colorWhite);
    background-color: transparent;
}
.btn-transparent{
    color: var(--colorWhite);
    background-color: transparent;
    border: 1px solid var(--colorWhite);
}
.btn-transparent:hover, .btn-transparent:focus-visible{
    color: var(--colorBlack);
    background-color: var(--colorWhite);
}
.w-100{
    font-weight: 100;
}
.w-200{
    font-weight: 200;
}
.w-300{
    font-weight: 300;
}
.w-400{
    font-weight: 400;
}
.w-500{
    font-weight: 500;
}
.w-600{
    font-weight: 600;
}
.w-700{
    font-weight: 700;
}
.w-800{
    font-weight: 800;
}
.w-900{
    font-weight: 900;
}
.w-1000{
    font-weight: 1000;
}
.color-main{
    color: var(--colorMain);
}
.color-black{
    color: var(--colorBlack);
}
.color-black-light{
    color: var(--colorBlackLight);
}
.color-grey{
    color: var(--colorGrey);
}
.color-grey-dark{
    color: var(--colorGreyDark);
}
.color-red{
    color: #aa4747;
}
.color-green{
    color: #447e43;
}
.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-e{
    text-align: end;
}
.ta-s{
    text-align: start;
}
.ta-c{
    text-align: center;
}
.jc-s{
    justify-content: start;
}
.jc-c{
    justify-content: center;
}
.jc-e{
    justify-content: end;
}
.jc-sb{
    justify-content: space-between;
}
.ac-s{
    align-content: start;
}
.ac-c{
    align-content: center;
}
.ac-e{
    align-content: end;
}
.ac-sb{
    align-content: space-between;
}
.ai-s{
    align-items: start;
}
.ai-c{
    align-items: center;
}
.ai-e{
    align-items: end;
}
.ji-s{
    justify-items: start;
}
.ji-c{
    justify-items: center;
}
.ji-e{
    justify-items: end;
}
.js-s{
    justify-self: start;
}
.js-c{
    justify-self: center;
}
.js-e{
    justify-self: end;
}
.as-s{
    align-self: start;
}
.as-c{
    align-self: center;
}
.as-e{
    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;
}
.text-gradient-grey{
    -webkit-background-clip: text;
    background-image: linear-gradient(to right, var(--colorGreyDark), var(--colorWhite), var(--colorGreyDark));
    -webkit-text-fill-color: transparent;
}
.width-100{
    width: 100%;
}
.input{
    border: 1px solid rgba(147, 51, 236, 0.4);
    padding: 10px;
    background-color: transparent;
    outline: none;
    width: 100%;
    color: var(--colorWhite);
    border-radius: var(--borderRadiusBig);
}
.input:focus{
    border: 1px solid rgba(147, 51, 236, 0.6);
}
.form{
    display: grid;
    grid-auto-flow: row;
    gap: 25px;
    justify-items: center;
    align-content: start;
    width: 100%;
}
/* Menu */
.menu-logo__img{
    width: 60px;
    height: 60px;
}
.menu_adaptive{
    display: none;
}
.burger__btn{
    display: none;
}
.menu__container{
    grid-template-columns: 20% auto 20%;
}
.menu__section{
    padding: 35px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.menu__section_filled{
    backdrop-filter: blur(20px);
}
/* Banner */
.banner__section{
    background-image: url("../img/ban/bg.jpg");
    background-position: center bottom;
    background-size: cover;
    min-height: 100vh;
}
.banner__span{
    padding: 3px;
    background-color: rgba(188, 157, 218, 0.15);
    border-radius: var(--borderRadiusBig);
}
.banner-span__title{
    padding: 7px 15px;
    border-radius: var(--borderRadiusBig);
    background-color: var(--colorMain);
}
.banner-span__text img{
    width: 15px;
    height: 15px;
}
.banner-span__text{
    padding: 7px;
}
.banner__text{
    width: 60%;
}
.banner-btn__img{
    width: 24px;
    height: 24px;
}
.btn-transparent.banner__btn{
    gap: 5px;
}
.banner-btn__img path, .banner-btn__img circle{
    transition:  all .4s ease;
}
.banner__btn:hover .banner-btn__img circle, .banner__btn:focus-visible .banner-btn__img circle{
    stroke: var(--colorBlack);
}
.banner__btn:hover .banner-btn__img path, .banner__btn:focus-visible .banner-btn__img path{
    fill: var(--colorBlack);
}
.banner__numbers{
    position: absolute;
    bottom: 100px;
    left: 7%;
}
.banner-window__img{
    border-radius: var(--borderRadiusSmall);
    padding: 10px;
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.05);
}
.banner__window{
    padding: 30px;
    border-radius: var(--borderRadius);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(197, 197, 197, 0.1);
    backdrop-filter: blur(3px);
    position: absolute;
    bottom: 100px;
    right: 7%;
}
/* AI */
.ai__btn{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: 1px solid var(--colorMain);
}
.ai__btn:hover, .ai__btn:focus-visible{
    border: 1px solid var(--colorWhite);
}
.ai__btn .ai-btn__img{
    width: 20px;
    height: 20px;
}
.ai__btn .ai-btn__img path{
    transition: stroke .4s ease;
}
.ai__btn:hover .ai-btn__img path, .ai__btn:focus-visible .ai-btn__img path{
    stroke: var(--colorBlack);
}
.ai__btn[disabled]{
    cursor: not-allowed;
    background-color: transparent;
}
.ai__btn[disabled]:hover, .ai__btn[disabled]:focus-visible{
    border: 1px solid var(--colorMain);
}
.ai__btn[disabled]:hover .ai-btn__img path, .ai__btn[disabled]:focus-visible .ai-btn__img path{
    stroke: var(--colorWhite);
}
.ai__card{
    background-image: url("../img/ai/border.png");
    min-height: 250px;
    position: relative;
    padding: 20px;
    background-position: center center;
    background-size: 100% 100%;
}
.ai__users{
    position: absolute;
    top: 20px;
    left: 20px;
}
/* Possibilities */
.possibilities__inner{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.possibilities__card{
    width: 100%;
    min-height: 350px;
    padding: 50px;
    border-radius: var(--borderRadius);
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(197, 197, 197, 0.07);
}
.possibilities__card_none{
    background-color: rgba(255, 255, 255, 0);
    border: 1px solid rgba(197, 197, 197, 0);
    padding: 0;
}
.possibilities__card_bg{
    background-image: url("../img/bg/card-bg.png");
    background-size: cover;
    background-position: right bottom;
}
.possibilities-card__img{
    width: 80px;
    height: 80px;
    border-radius: var(--borderRadiusSmall);
    background-color: rgba(255, 255, 255, 0.05);
    background-image: url("../img/bg/icon-bg.png");
    background-position: center center;
    background-size: cover;
    padding: 15px;
}
.possibilities__card_blank{
    background-color: transparent;
}
#gsap__card-1{
    transform: rotate(-2deg) translate(-75px, -75px);
}
#gsap__card-2{
    transform: translate(0, -75px);
}
#gsap__card-3{
    transform: rotate(2deg) translate(75px, -75px);
}
#gsap__card-4{
    transform: translate(-75px, 0);
}
#gsap__card-5{
    transform: scale(1.05);
}
#gsap__card-6{
    transform: rotate(2deg) translate(75px, 0);
}
#gsap__card-7{
    transform: rotate(1deg) translate(-25px, 25px);
}
#gsap__card-8{
    transform: translate(0, 25px);
}
#gsap__card-9{
    transform: rotate(-1deg) rotate(2deg) translate(25px, 25px);
}
/* Examples */
.examples__wrap{
    width: 120vw;
    position: relative;
    left: -10vw;
    transform: translate(65vw, 0);
}
.examples__wrap:nth-child(2){
    transform: translate(-65vw, 0);
}
.examples__wrap:nth-child(4){
    transform: translate(-65vw, 0);
}
.examples__inner_adaptive{
    display: none;
}
.examples__inner_adaptive .examples__wrap{
    width: 110vw;
    left: -5vw;
}
.examples__wrap_2-1-2{
    grid-template-columns: 3fr 2fr 3fr;
}
.examples__wrap_1-2-1{
    grid-template-columns: 2fr 3fr 2fr;
}
.examples__wrap_2-1{
    grid-template-columns: 3fr 2fr;
}
.examples__wrap_1-2{
    grid-template-columns: 2fr 3fr;
}
.examples__card{
    width: 100%;
    min-height: 400px;
    border-radius: var(--borderRadiusBig);
    padding: 20px;
    position: relative;
    z-index: 2;
    background-position: center center;
    background-size: cover;
}
.examples__card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--borderRadiusBig);
    background-size: 100% 100%;
    background-position: center bottom;
    background-image: linear-gradient(transparent, rgba(3, 3, 3, 0.75));
    z-index: -1;
}
.examples__inner{
    overflow: hidden;
}
.examples-card__title_60{
    width: 60%;
}
.examples-card__title_80{
    width: 80%;
}
/* Tutorial */
.tutorial__card{
    grid-template-columns: 2fr 2fr 3fr;
    padding: 75px 0;
    border-bottom: 1px solid rgba(172, 172, 172, 0.2);
}
.tutorial__card:last-child{
    border-bottom: none;
}
.tutorial-card__box{
    grid-template-columns: 1fr 4fr;
}
.tutorial__title{
    width: 60%;
}
.tutorial__number{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(197, 197, 197, 0.5);
    padding: 7px;
}
.tutorial-card__img{
    width: 75px;
    height: 75px;
}
.tutorial-card__item_img{
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(197, 197, 197, 0.07);
    padding: 30px;
    border-radius: var(--borderRadius);
}
.tutorial-card__btn_adaptive{
    display: none;
}
/* Faq */
.faq__container{
    grid-template-columns: 2fr 3fr;
}
.faq-accordion__head{
    padding: 30px;
    cursor: pointer;
}
.faq__accordion{
    overflow: hidden;
    position: relative;
    border-radius: var(--borderRadiusSmall);
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(197, 197, 197, 0.07);
    transition: all .3s ease;
    background-image: linear-gradient(transparent, rgba(175, 121, 227, 0.2));
    background-position: center -150px;
    background-repeat: no-repeat;
}
.faq-accordion__content{
    position: absolute;
    left: 0;
    padding: 0 30px 30px;
}
.faq-accordion__icon{
    width: 50px;
    height: 50px;
    background-image: url("../img/icons/plus.svg");
    background-size: cover;
    background-position: center center;
    transition: transform .3s ease, background-image .1s ease;
}
.faq-accordion__title{
    user-select: none;
}
.faq__inner_accordion{
    gap: 15px;
}
.faq__accordion_active .faq-accordion__icon{
    background-image: url("../img/icons/minus-accordion.svg");
    transform: rotate(-90deg);
}
.faq__btn{
    gap: 5px;
}
.faq__btn svg{
    width: 15px;
    height: 15px;
}
.faq__btn svg path{
    transition: stroke .3s ease;
}
.faq__btn:hover svg path, .faq__btn:focus-visible svg path{
    stroke: var(--colorBlack);
}
/* GPT Window */
.gpt__section{
    position: fixed;
    z-index: 15;
    width: 100%;
    max-width: 768px;
    background-color: var(--colorBlackLight);
    top: 0;
    right: -768px;
    transition: all .5s;
    height: 100vh;
    align-content: stretch;
}
.gpt__section_active{
    right: 0;
}
.gpt__section::before{
    content: '';
    position: fixed;
    top: 0;
    right: -100vw;
    height: 100vh;
    width: 100%;
    z-index: -1;
    background-color: rgba(3, 3, 3, 0.5);
    transition: opacity .4s ease, right .1s ease;
    opacity: 0;
}
.gpt__section_active::before{
    right: 0;
    opacity: 1;
}
.gpt__section{
    padding: 50px;
}
.gpt__close{
    position: absolute;
    left: 50px;
    top: 50px;
    padding: 10px;
    cursor: pointer;
}
.gpt__close img{
    width: 25px;
    height: 25px;
}
.gpt__form{
    border-radius: var(--borderRadiusBig);
    border: 1px solid rgba(147, 51, 236, 0.4);
    padding: 3px;
    grid-template-columns: 3fr 1fr;
}
.gpt__send{
    border-radius: var(--borderRadiusBig);
    padding: 15px 30px;
}
.gpt__input{
    border: none !important;
    padding: 0 15px;
}
.gpt__message img{
    width: 50px;
    height: 50px;
}
.gpt__message_aos-animate{
    opacity: 1 !important;
    transform: translateZ(0) !important;
}
.gpt__message{
    gap: 10px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: var(--borderRadius);
    max-width: 80%;
}
.gpt__chat{
    padding: 20px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 60vh;
    overflow-y: overlay;
    width: 100%;
    overflow-x: hidden;
}
.gpt__chat::-webkit-scrollbar{
    width: 3px;
    background-color: var(--colorBlackLight);
}
.gpt__chat::-webkit-scrollbar-thumb{
    background-color: var(--colorMain);
    border-radius: 1px;
}
.gpt__error{
    display: none;
}
.gpt__error_active{
    display: block;
}
/* Footer */
.footer__text{
    width: 70%;
}
.footer__title{
    width: 85%;
}
.footer__inner{
    padding: 125px 100px;
    border-radius: var(--borderRadius);
    background-image: url("../img/footer/bg.png");
    background-position: center top;
    background-size: 100% 100%;
    background-color: rgba(255, 255, 255, 0.03);
}
/* Media */
@media(max-width: 1480px){
    :root{
        --h1: 54px;
        --h2: 40px;
        --h3: 30px;
        --h4: 22px;
        --h5: 20px;
        --h6: 18px;
        --h7: 14px;
        --defaultFont: 16px;
    }
    .possibilities__card{
        width: 100%;
        padding: 25px;
        min-height: 300px;
    }
    .possibilities__card_none{
        padding: 0;
    }
    .possibilities-card__img{
        width: 70px;
        height: 70px;
    }
    .ai__card{
        font-size: var(--h1);
    }
}
@media(max-width: 1280px){
    .possibilities__inner{
        grid-template-columns: 1fr 1fr;
    }
    #gsap__card-9{
        display: none;
    }
    #gsap__card-2{
        order: -2;
        transform: rotate(-1deg) translate(-10px, -10px);
    }
    #gsap__card-3{
        order: -1;
        transform: rotate(1deg) translate(10px, -10px);
    }
    #gsap__card-1{
        transform: translate(-10px, 0);
    }
    #gsap__card-4{
        transform: translate(10px, 0);
    }
    #gsap__card-5{
        transform: translate(-10px, 0);
    }
    #gsap__card-6{
        transform: translate(10px, 0);
    }
    #gsap__card-7{
        transform: translate(-10px, 0);
    }
    #gsap__card-8{
        transform: translate(10px, 0);
    }
    .menu_adaptive{
        display: grid;
        padding: 30px;
        max-width: 320px;

    }
}
@media (max-width: 1024px) {
    :root{
        --h1: 48px;
        --h2: 34px;
        --h3: 28px;
        --h4: 20px;
        --h5: 18px;
        --h6: 16px;
        --h7: 16px;
        --defaultFont: 16px;
    }
    .tutorial__card{
        grid-template-columns: 1fr;
    }
    .tutorial__head{
        grid-auto-flow: row;
    }
    .tutorial-card__item_img{
        max-width: 375px;
    }
    .tutorial-card__btn{
        display: none;
    }
    .tutorial-card__btn_adaptive{
        display: grid !important;
        justify-self: start;
    }
    .tutorial__title_2{
        display: none;
    }
    .footer__title{
        width: 100%;
    }
    .footer__text{
        width: 90%;
    }
    .footer__inner{
        padding: 80px;
    }
    .ai__card{
        font-size: var(--h2);
        min-height: 200px;
    }
    .banner__window{
        display: none;
    }
    .banner__numbers{
        right: 7%;
        left: 7%;
        justify-content: space-between;
    }
    .examples__card{
        min-height: 300px;
    }
    .faq__container{
        grid-template-columns: 1fr;
    }
    .menu__gpt_main{
        display: none;
    }
    .menu__nav_main{
        display: none;
    }
    .burger__btn{
        display: block;
        background-color: transparent;
        padding: 0;
    }
    .burger__btn svg{
        width: 50px;
        height: 50px;
    }
    .burger__btn svg path{
        transition: stroke .3s ease;
    }
    .burger__btn:hover svg path, .burger__btn:focus-visible svg path{
        stroke: var(--colorMain);
    }
    .menu__container{
        justify-content: space-between;
        grid-template-columns: unset;
    }
    .menu_adaptive{
        position: fixed;
        z-index: 10;
        width: 100%;
        max-width: 320px;
        background-color: var(--colorBlackLight);
        top: 0;
        right: -320px;
        transition: all .5s ease;
        height: 100vh;
        padding: 50px;
    }
    .menu_adaptive_active{
        right: 0;
    }
    .menu_adaptive::before{
        content: '';
        position: fixed;
        top: 0;
        right: -100vw;
        height: 100vh;
        width: 100%;
        z-index: -1;
        background-color: rgba(3, 3, 3, 0.5);
        transition: opacity .4s ease, right .1s ease;
        opacity: 0;
    }
    .menu_adaptive_active::before{
        right: 0;
        opacity: 1;
    }
    .burger__close svg{
        width: 35px;
        height: 35px;
    }
    .burger__close{
        background-color: transparent;
        padding: 0;
    }
}
@media(max-width: 768px){
    :root{
        --h1: 40px;
        --h2: 34px;
        --h3: 28px;
        --h4: 20px;
        --h5: 18px;
        --h6: 16px;
        --h7: 16px;
        --defaultFont: 16px;
    }
    .ai__card{
        font-size: var(--h1);
        min-height: 300px;
    }
    .section{
        padding: 75px 0;
    }
    .possibilities__card{
        min-height: 200px;
    }
    .possibilities__card_none{
        min-height: unset;
    }
    .possibilities__inner{
        grid-template-columns: 1fr;
    }
    #gsap__card-9{
        display: none;
    }
    #gsap__card-7{
        display: none;
    }
    #gsap__card-2{
        order: -2;
        transform: none;
    }
    #gsap__card-3{
        order: -1;
        transform: none;
    }
    #gsap__card-1{
        transform: none;
    }
    #gsap__card-4{
        transform: none;
    }
    #gsap__card-5{
        transform: none;
    }
    #gsap__card-6{
        transform: none;
    }
    #gsap__card-7{
        transform: none;
    }
    #gsap__card-8{
        transform: none;
    }
    .examples__inner{
        display: none;
    }
    .examples__inner_adaptive{
        display: grid;
    }
    .menu__section{
        padding: 25px 0;
    }
    body{
        background-image: url("../img/bg/bg_adaptive.png");
    }
    .footer__inner{
        padding: 30px;
    }
    .tutorial__card{
        padding: 25px 0;
    }
    .tutorial__title{
        width: 100%;
    }
}
@media(max-width: 576px){
    :root{
        --h1: 36px;
        --h2: 30px;
        --h3: 24px;
        --h4: 20px;
        --h5: 18px;
        --h6: 16px;
        --h7: 15px;
        --defaultFont: 15px;
    }
    .ai__card{
        min-height: 200px;
    }
    .footer__buttons{
        grid-auto-flow: row;
    }
    .banner__text{
        width: 100%;
    }
    .banner__buttons{
        grid-auto-flow: row;
        gap: 10px;
    }
    .ai__btn{
        width: 40px;
        height: 40px;
    }
    .ai__btn .ai-btn__img{
        width: 20px;
        height: 20px;
    }
    .ai__head{
        gap: 10px;
    }
    .footer__title{
        font-size: var(--h3);
    }
    .footer__text{
        font-size: var(--h7);
    }
    .menu-logo__img{
        width: 50px;
        height: 50px;
    }
    .banner-span__text{
        font-size: 14px;
    }
    .banner__numbers{
        bottom: 5px;
        opacity: 1 !important;
        transform: translateZ(0) !important;
    }
}
@media(max-width: 375px){
    :root{
        --h1: 32px;
        --h2: 24px;
        --h3: 22px;
        --h4: 18px;
        --h5: 16px;
        --h6: 15px;
        --h7: 14px;
        --defaultFont: 14px;
    }
    .section{
        padding: 50px 0;
    }
    .container{
        padding: 0 3%;
    }
    .banner-span__text{
        font-size: 12px;
    }
    .ai__title{
        font-size: calc(var(--h1) - 2px);
    }
    .menu__section{
        padding: 25px 0;
    }
    .examples-card__title_60{
        width: 70%;
    }
    .banner__numbers{
        bottom: 5px;
        opacity: 1 !important;
        transform: translateZ(0) !important;
    }
    .examples-card__title_80{
        width: 90%;
    }
    .examples-card__title{
        font-size: var(--defaultFont);
    }
}
@media(min-width: calc(1920px + 384px)){
    .container{
        max-width: 1920px;
        padding: 0;
    }
}