@media screen and (min-width: 1201px) {
    
    .hero-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* ensures it covers the entire hero area */
        z-index: -1; /* sends it behind text */
    }

    #hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        height: 100vh; /* full screen height */
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
#hero-content-container{
    display: flex;
    justify-content: spa;
    height: 40%;
    width: 90%;
}
    .hero-title1{
        font-size: 6rem;
    }
    .hero-title2{
        font-size: 4rem;
    }

    .hero-description{
        font-size: 1.5rem;
    }
    .explore-btn{
        margin-right: 40px;
        height: 5rem;
        width: 20rem;
        font-size: 1.3rem;
        
    }
    .btn{
        height: 5rem;
        width: 10rem;
        font-size: 1.3rem;
    }

#mobile-hero{
    display: none;
}

/* STORY-------------- */
#ourstory{
    height: 128vh;
    margin-top: 8rem;
    justify-content: center;
    align-items: center;
}
.experience-details-container{
    margin-top: 4rem;
    height: 100%;
    width: 90%;
}
.about-containers{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* align-items: center; */
    /* height: 100%; */
    width: 100%;
}
.details-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    border: 1px solid;
    border-color: hsl(220 13% 91%);
    padding: 0.5rem;
    height: 15rem;
    width: 19rem;
    margin-left: 10px;
    margin-right: 10px;
}
.details-container:hover{
    transition: all 300ms ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.thevision{
    align-self: center;
    width: 90%;
    margin-left: 4rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* #ourstory{
    margin-top: 8rem;
    justify-content: center;
    align-items: center;
    
} */
.section__text__p1{
    width: 50%;
    align-self: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.about-containers{
    height: 80%;
}

/* PRODUCT---------- */
#ourproduct{
    align-items: center;
    height: 200vh;
}
.outer-product-container{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 87%;
    height: 100%;
    
}
.product-container{
    height: 27rem;
    width: 33rem;
    /* padding-left: 20px; */
    /* padding-right: 20px; */
    padding-bottom: 20px;
}
.avatar{
    height: 150px;
    width: 150px;
    border-radius: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    align-self: center;
}



#ourteam{
    height:115vh ;
    justify-content: center;
    align-items: center;
}
.outer-team-container{
    flex-direction: row;
    justify-content: space-between;
    align-items:center;
    flex-wrap: wrap;
    width: 90%;
    height: 100%;
}
.team-container{
    width: 15rem;
    height: 18rem;
}

.headshot{
    height: 120px;
}


#contact{
    height: 100vh;
}

.contact-articles-container{
    height: 100%;
    flex-direction: row;
    justify-content: space-between;
}
.email-article-container{
    width: 40%;
    height: 10rem;
}
.inquiry-article-container{
    width: 40%;
    height: 15rem;
}
.email-inquiry-container{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 90%;
}
.outer-email-container{
    width: 50%;
    justify-content: center;
}
.mail-form{
    height: 60%;
    width: 70%;
    padding: 20px;
    justify-content: space-around;
}
#footer{
    height: 40vh;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.outer-footer-container{
    width: 90%;
}

}


@media screen and (max-width: 1200px){
    #hero{
        display: none;
    }
    .section__text__p1{
        width: 80%;
        align-self: center;
    }
    #mobile-hero{
    display: flex;
    flex-direction: column;
    background-image: url('assets/Mobile-hero-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    }
    #hamburger-nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 5rem;
    }
    .details-container{
        width: 80%;
    }

    /* HERO SECTION */
    
.logo{
    font-size: 2rem;
    color: white;
}

#hero-content-container{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    color: white;
    height: 50%;
    
}

.hero-title1{
    display: flex;
    height: fit-content;
    padding: 0;
    font-size: 3rem;
}
.hero-title2{
    display: flex;
    font-size: 3rem;
    height: fit-content;
}
.hero-description-container{
    display: flex;
    justify-content:center;
    align-items:center;
    
}
.hero-description{
    display: flex;
    width: 80%;
    text-align: center;
}

#hero-btns{
    display: flex;
    height: 50%;
    justify-content: center;
    align-items: center;
}
.hero-btn-container{
    display: flex;
}
.explore-btn{
    margin-right: 25px;
}

/* OUR STORY SECTION */

#ourstory{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 160vh;

}


.experience-details-container{
    display: flex;
    justify-content: center;
    height: 80%;
    /* background-color: bisque; */
}

.about-containers{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 95%;
}
.details-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    border: 1px solid;
    border-color: hsl(220 13% 91%);
    padding: 0.5rem;
}

.experience-sub-title{
    display: flex;
    /* background-color: rgb(218, 75, 75); */
}

.article-container{
    display: flex;
    width: 80%;
    text-align: center;
    /* background-color: rgb(169, 180, 51); */
}

/* ------------our product----------- */
.avatar{
    height: 100px;
    width: 100px;
    align-self: center;
    border-radius: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    
}
#ourproduct{
    justify-content: center;
    height: 395vh;
}
.outer-product-container{
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;

}
.product-container{
    width: 90%;
    height: 52vh;
}
.product-article-container{
    display: flex;
    flex-direction: column;
    width: 90%;
}
.product-key-outcomes{
    display: flex;
    flex-direction: column;
    width: 90%;
}
/* --------OUR TEAM--------- */
#ourteam{
    height: 360vh;
}
.headshot{
    height: 120px;
}
.outer-team-container{
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}
.team-container{
    width: 90%;
    padding-top: 10px;
}
/* ---------CONTACT-------- */
#contact{
    height: 160vh;
}
.contact-articles-container{
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    align-items: center;
    
}
.email-inquiry-container{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;
}
.email-article-container{
    width: 90%;
    margin-top: 20px;
}
.inquiry-article-container{
    width: 90%;
    margin-top: 20px;
}

.outer-email-container{
    width: 100%;
    /* height:100%; */
}
.contact-lookingfor-container{
    width: 80%;
}
.mail-form{
    display: flex;
    justify-content: space-around;
    height: 55vh;
    width: 85%;
}



input{
    width: 21rem;
    margin-top: 5px;
    margin-bottom: 5px;
}
textarea{
    width: 95%;
}
/* FOOTER */

#footer{
    height: 50vh;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.outer-footer-container{
    width: 90%;
}
.qucik-links-container{
    height: 15vh;
}
}

@media screen and (max-width: 395px){
#ourproduct{
    justify-content: center;
    height: 490vh;
}
.product-container{
    width: 90%;
    height: 72vh;
}

#ourteam{
    height: 400vh;
}

#contact{
    height: 180vh;
}
input{
    width: 95%;
}
#footer{
    height: 60vh;
}
}