body,html {
    -webkit-text-size-adjust:100%;
    margin:0;
    padding:0;
    background-color:#000;
    font-size:18px;
    --widthA: 100vw;
    --grey:#F1F1F1;
    --black:#000;
    --blue:#41A1D4;
    --ocher:#EBC814;
    --accent: #DEFF1D;
    --accent-sec: #7980FC;
    }


@media (max-width: 768px) {
    .wrapper{
        color: var(--grey);
        background-color: black;
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        box-sizing: border-box;
        overflow: hidden;
    }
    .divider{
        width: 100%;
        display: flex;
        height: 1px;
        background-color: var(--grey);
        margin: 0;
        display: none;
    }


    .hero-section{
        margin: 2rem 1rem ;
        
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        height: fit-content;
        margin-top: 0rem;
        border: none;
        border-radius: 40px;
    
    
    }

    .hero-title{
        margin-top: 10vh;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 70dvh;
        height: fit-content;
        padding: 1rem;
    }
    .hero-title h1{
        font-size: 1rem;
        color: var(--grey);
    }
    
    .hero-title h2{
        font-size: 1.25rem;
    }
    
    .hero-heading{
        text-align: center;
        hyphens: none;
    }
    
    .hero-title-tags{
        display: flex;
        gap: .5rem;
        margin-top: 1rem;
        align-items: center;
        justify-content: center;
    }
    
    .tag{
        display: inline-flex;
        font-feature-settings: "tnum";
        height: fit-content;
        border: solid 1px var(--grey);
        padding: .5rem;
        border-radius: 15px;
    }
    
    .hero-title-tags p{
        display: inline-flex;
        align-content: center;
        width: fit-content;
    }
    
    .hero-content{
        width: 100%;
        height: 70vh;
        overflow: hidden;
        border-radius: 40px;
    }

    iframe{
        top: -20%;
        height: 120%;
    }
    
    .cta-button{
        font-size: 1.5rem;
        width: 100%;
    }

    .heading{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        margin-top: 2rem;
        margin-bottom: 0rem;
        padding: 0;
    }
    
    .features{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        justify-content: space-between;
        width: 100%;	
        padding: 0;
        padding: 0rem 1rem;
        
    }
    
    .features-wanna{
        display: flex;
        gap: .5rem;
        justify-content: space-between;
        width: 100%;	
        padding: 0rem 0rem;
                    
    }

    .features-wanna h2.heading{
        padding: 3rem 1rem 1rem 1rem;
        font-size: 2rem;
    }
    
    .features-wanna h3{
        font-size: 1.5rem;
        margin-bottom: 0rem;
    }
    .features-wanna p{
        font-size: 1rem;
        line-height: 13 0%;
        hyphens: none;
    }
    
    .features-highlight{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-content: flex-start;
        gap: 1.5rem;
        color: var(--grey);
        padding: 0 1rem;
        background-color: transparent;
        background-image: none;
        background-size: cover;
        background-position: center -60px;
        width: 100%;
        
        height: 500px;
        z-index: 1;            
    }		
    
    .features-highlight:after {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 1.5rem;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        background-image: url('https://static.tildacdn.com/tild3333-3431-4365-b839-666162663737/reza-delkhosh-Ms5iR0.png');
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
        z-index: -1;
      }
    
    .features-highlight .tag{
        border: solid 1px var(--grey);
    }
    
    .feature, .feature2{
        width: 100%;
        color: var(--black);
        background-color: var(--grey);
        padding: 2rem 1rem;
        border-radius: 27px;
    }
    
    .features-heading, .features-text{
        display: flex;
        flex-direction: row;
        width: 50%;
    }
    
    .features-heading{
        display: flex;
        width: 100%;
        gap: 1rem;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
        border-top: 1px solid var(--grey);
    }
    .features-text{
        display: flex;
        width: 100%;
        gap: .5rem;
        padding-left: 1rem;
    }			
    
    
    .features-heading h3{
        width: 80%;
        font-size: 1.25rem;
        line-height: 100%;

    }
    
    .features-statistics{
        display: flex;
        align-content: baseline;
        width: 100%;
        gap: 1rem;
    
    }
    
    .statistic-line{
        font: 'Suisse Intl';
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: fit-content;
        padding-bottom: 1rem;
        border-bottom: solid 1px #9b9b9b;
        transform: translateY(70px);
        opacity: 0;
        
    }
    
    .statistic-line{
        padding-left: 1rem;
    }

    .statistic-line.awake{
        opacity: 1;
        transform: translateY(0px);
        transition: all 600ms ease-in-out;
        padding-left: 1rem;
    }
    
    .statistic-line p{
        display: inline-flex;
        width: fit-content;
    }
    .statistic-number{
        display: flex;
    }
    .number{
        font-size: 2rem;
        font-feature-settings: "tnum";
    }
    .statistic-number p{
        font-size: 2rem;
    }
    .partners{
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 1rem;
    }
    
    .partner-logo{
        width: 8rem;
        height: 8rem;
        border-radius: 15px;
        background-color: var(--accent);
    }
    h2.heading{
        display: inline-flex;
        width: 100%;
        text-align: left;
        font-size: 2rem;
        padding: 0 1rem;
    }
    .heading-message{
        margin-top: 0;
    }
    h2.heading-message{
        width: 100%;
        font-size: 1.5rem;
    }
    p{
        line-height: 130%;
        font-size: 1rem;
    }

    .call{
        height: 80vh;
    }
    .call h2.heading{
        width: 100%;
    }
    .bag1{
        width: 170%;
    }
    .bag2{
        display: none;
        top: 60%;
        left: -30%;
        width: 90%;
    }
}