/*{
    outline:1px solid red;
}*/
html{
    box-sizing: border-box;
    font-size:62.5%;
    scroll-behavior: smooth;
}
body{
    margin:0;
    padding:0;
    font-size:1.6rem;
    font-family: 'Open Sans', sans-serif;
}


/*///////////////////////////////////////HEADER SECTION /////////////////////////////////////////////////////////////////////*/
/*nav{
    display:flex;
    justify-content: space-between;
    background-color: #FFFFFF;
    align-items: center;
    margin-left:2%;
    
}
.nav-links-1{
    display:flex;
    width:40%;
    justify-content: space-around;
    margin-right:20%;
    padding:2% 0
}
.nav-links-2{
    display:flex;
    width:20%;
    justify-content: space-around;
}
nav a{
    text-decoration: none;
    color:#272D4E;
}
.search{
    align-self: center;
}
.get-started-btn{
    color:#ffffff;
    background-color: #7854F7;
    padding:2% 4%;
    border-radius:5px;
    font-family: 'Open Sans', sans-serif;
    
}
.get-started-btn:hover{
    background-color: #25a244;
    border-color:#25a244;
}
*/
.link-2{
    width:200%;
}
/*////////////////////////////////////////////////////////HERO SECTION//////////////////////////////////////////////////*/
#hero{
    background-image: linear-gradient(#E5EFFF,#fafafa);
    display:flex;
    justify-content: space-around;
    padding:12% 8%;
}
.hero-1{
    margin-right:20%;
    color:#272D4E;
}
.hero-1 h1{
    font-size:5.5rem;
}
.hero-1 p{
    color:#94A2B3;
}
.hero-1 button{
    color:white;
    background-color: #7854F7;
    padding:2% 3%;
    border-color:#7854F7;
    border-radius:30px;
    outline:none;
    font-family: 'Open Sans', sans-serif;
    font-size:1.6rem;
}

.hero-1 button:hover{
    background-color: #25a244;
    border-color:#25a244;
    cursor:pointer;
}
.hero-1-link{
    font-weight:bold;
    color:#299EF3;
    text-decoration: none;
}
.hero-1-link:hover{
    color:#70C217;
}
.snicker{
    position:relative;
    z-index: 1;
    width:350px;
}
.happy-girls{
    position:absolute;
    z-index: 5;
    right:23%;
    top:20%;
}
.cart{
    position:absolute;
    z-index: 5;
    top:72%;
    right:32%;
}
.sale{
    position:absolute;
    z-index: 5;
    color:white;
    background-color: #70C217;
    border-radius:30px;
    padding:1% 2.5%;
    top:30%;
    right:15%;
}
.dot{
    position:absolute;
    z-index: 0;
}
.brands-grid{
    font-size:1.2rem;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    background-color:#ffffff;
    width:20%;
    padding:2% 4%;
    border-radius:20px;
    position:absolute;
    top:80%;
    right:1%;
    z-index:5;
}
.brands-grid p{
    color:#94A2B3;
}
.toggle-1{
    width:60px;
    height:25px;
    background-color: #70C217;
    border-radius: 30px;
}
.toggle-inner{
    margin-top:5%;
    margin-left:63%;
    width:20px;
    height:20px;
    border-radius: 50%;
    background-color: #FFFFFF;
}
.toggle-2{
    width:60px;
    height:25px;
    background-color: #DAE5F6;
    border-radius: 30px;
}
.toggle-2-inner{
    margin-top:5%;
    margin-left:5%;
    width:20px;
    height:20px;
    border-radius: 50%;
    background-color: #8161F7;
}
.brand{
    width:50px;
}

/*/////////////////////////////////////////////////////////FEATURES //////////////////////////////////////////////////////////////////////////*/
#features{
    background-image:linear-gradient(#fafafa, white);
    margin-top:0;
    position:relative;
}
#features h1{
    text-align:center;
    margin-top:0;
    color:#272D4E;
    font-size:4.0rem;
}
.features-flex{
    display:flex;
    justify-content: center;
    height:700px;
}
.flex-img-1{
    width:400px;
    
}
.flex-img-2{
    width:400px;
}
.flex-img-3{
    width:400px;
}
.features-flex-box-1{
    display:flex;
    flex-direction: column;
}
.features-flex-box-2{
    display:flex;
    flex-direction: column;
    align-self: center;
}
.features-flex-box-3{
    align-self: flex-end;
    display:flex;
    flex-direction: column;
}
.features-flex-box-2a{
    align-self:center;
}
.features-flex-box-2a h3{
    color:#272D4E;
}
.features-flex-box-2a p{
    color:#94A2B3;
}
.features-flex-box-2a a{
    font-weight:bold;
    text-decoration: none;
    color:#299EF3;
}
/*.stray-image{
    position:absolute;
}*/
.one{
    position:absolute;
    left:2%;
    top:20%;
    width:180px;

}
.two{
    width:50px;
    position:absolute;
    top:18.5%;
    left:4.5%;
}
.three{
    position:absolute;
    top:23%;
    left:37%;
    width:150px;
}
.four{
    position:absolute;
    top:18.5%;
    width:150px;
    left:37%;
    top:35%;
}
.five{
    position:absolute;
    top:42%;
    left:44%;
    width:150px;
}
.six{
    position:absolute;
    top:28%;
    left:55%;
    width:150px;
}
.seven{
    position:absolute;
    top:35%;
    left:50%;
    width:150px;
}
.eight{
    position:absolute;
    top:45%;
    right:23%;
    width:120px;
}
.nine{
    position:absolute;
    top:35%;
    right:5%;
}
.ten{
    position:absolute;
    top:65%;
    right:4%;
    width:120px;
}

/*/////////////////////////////////FEATURES TWO///////////////////////////////////////////////////////////////////////*/
#features-two{
    background-color:#7854F7;
    color:black;
    position:relative;
    margin-top:0;
    
}


.custom-shape-divider-top-1652452232 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.custom-shape-divider-top-1652452232 svg {
    position: relative;
    display: block;
    width: calc(268% + 1.3px);
    height: 255px;
}

.custom-shape-divider-top-1652452232 .shape-fill {
    fill: #FFFFFF;
}
.custom-shape-divider-bottom-1652450878 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1652450878 svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 255px;
}

.custom-shape-divider-bottom-1652450878 .shape-fill {
    fill: #FFFFFF;
}
/*might use position absolute on the image*/
.first img{
    position:relative;
    z-index: 5;
    width:400px;
    
}
.first{
    display:flex;
    justify-content: center;

}
.second{
    display:flex;
    justify-content: center;
}
.second img{
    width:400px;
    position:relative;
    z-index:5;
}
.first-text{
    align-self: center;
    margin-top:5%;
}
#features-two h3 {
    color:#ffffff;
    font-size:2.5rem;
}
#features-two p{
    color:white;
    line-height:1.5;
}
#first-btn{
    padding:2% 4%;
    color:#ffffff;
    background-color: #70C217;
    border-color:#7854F7;
    border-radius:30px;
    outline:none;
    font-family: 'Open Sans', sans-serif;
    font-size:1.6rem;
}
#first-btn:hover{
    background-color: #054a29;
    cursor:pointer;
}
#second-btn{
    padding:2% 4%;
    color:#ffffff;
    background-color: #70C217;
    border-color:#7854F7;
    border-radius:30px;
    outline:none;
    text-decoration: none;
}
#second-btn:hover{
    background-color: #054a29;
    cursor:pointer; 
}

/*/////////////////////////////////////////////////////////TESTIMONIALSSSSSSSSSSSSSSSSSSS/////////////////////////////*/
#testimonials{
    background-image:linear-gradient(white,#ccdbfd);
    background-repeat:no-repeat;
}
.testimonials-flex{
    display:flex;
    justify-content: center;
    align-items: center;
}
.testimonial-header1{
    margin:0 10%;
}
.testimonial-header{
    font-size:4.0rem;
    color:#272D4E;
    
}
.testimonials-flex1{
    display:flex;
    justify-content: space-between;
}
/*.para{
    
    display:flex;
    justify-content: center;
    align-items: center;
}*/
.para-2{
    text-align: center;
    padding:5% 5%;
    background-color: white;
    border-radius: 20px;
    box-shadow:2px 5px 5px #e9ecef;
    line-height: 2;
}
.para-2:hover{
    transform: scale(1.1);
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.4);
    border-color:#7854F7;
}
.chinese-lady{
    width:150px;
    height:150px;
    margin-left:2%;
}
.testimonials-flex2{
    display:flex;
    justify-content: space-evenly;
}
.arrows{
    color:#8161F7;
}
.txt-h1{
    margin-top:5%;
    font-size:5.0rem;
    color:#272D4E;
    text-align:center;
}
.txt-para{
    color:#94A2B3;
    text-align:center;
    line-height: 2;
}

/*=========================================================CTA SECTION=--------------==============================================*/
#cta-section{
    
    display:flex;
    background-color: #5F37EF;
    color:white;
    padding:5% 0;
    justify-content: space-evenly;
}
.cta-txt{
    line-height:2.0;
    font-size:2.2rem;
}
#cta-section a{
    align-self: center;
    text-decoration: none;
    padding:1% 2%;
    color:white;
    background-color: #5F37EF;
    border-radius: 50px;
    border:1px solid white;
}
/*.cta-btn:hover{
    background-color: red;
    color:black;
}*/

/*////////////////////////////////////////////FOOTER//////////////////////////////////////////////////////////////////////////////////*/
#footer{
    background-color: #9A7DFF;
    padding-top:5%;
    padding-bottom:10%;
   
}
.guarantees{
    display:flex;
    justify-content: space-around;
    color:white;
}
.logo-footer{
    margin-top:5%;
    margin-left:43%;
    
}
hr{
   margin:0 10%;
   height: 0.5px;
   background-color:#fafafa;
   border: none;
}
.footer-2{
    margin-top:5%;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    color:white;
    margin-left:5%;
    line-height: 2;
}
.heading{
    margin-bottom:10%;
}

/*///////////////////////////////////////CONTACT SECTION////////////////////////////////////////////////////////*/
#contact{
    display:flex;
    justify-content: space-around;
    color:#272D4E;
    padding:2% 0;
}
.social-contacts{
    display: flex;
    width:20%;
    justify-content: space-around;
}

/*==============================================MEDIA QUERIES===================================================/*/
@media only screen and (max-width: 480px) and (min-width: 300px){
    body{
        overflow-x: hidden;
    }
    #hero{
        padding:3% 3%;
        flex-direction: column;
    }
    .snicker{
        width:250px;
    }
    .hero-1{
        width:100%;
    }
    .hero-1 h1{
        font-size:3.0rem;
    }
    .hero-1 p{
        font-size:1.2rem;
    }
    .hero-1 button{
        font-size:1.3rem;
    }
    .hero-2{
        display:none; 
    }
    #features{
        padding:3%;
    }
    #features h1{
        font-size:3.0rem;
        margin-top:20%;
    }
    .features-flex{
        flex-direction: column;
        height:1000px;
        padding:0 3%;
    }
    .features-flex-box-3{
        text-align: start;
        padding:0;
    }#features-two{
        padding:0 3%;
    }
    .features-flex-box-2a{
        padding:0 3%;
    }
    .stray-image{
        display:none;
    }
    .first{

        flex-direction: column;
    }
    .second{
        flex-direction: column;
        margin-top:3%;
    }
    #first-btn{
        font-size:1.3rem;
    }
    #second-btn{
        font-size:1.3rem;
    }
    .first{
        width:90%;
        font-size:1.2rem;
    }
    .first-text{
        margin-left:10%;
        padding:0 2%;
        width:110%;
    }
    .second{
        width:90%;
        font-size:1.2rem;
    }
    .second-text{
        margin-left:10%;
        padding:0 2%;
        width:120%;
    }
    .first img{
        align-self:center;
        width:200px;
    }
    .second img{
        width:200px;
        align-self: center;
    }
    .flex-img-1{
        width:250px;
    }
    .flex-img-2{
        width:250px;
    }
    .flex-img-3{
        width:250px;
    }
    #testimonials{
        padding:0 3%;
    }
    .testimonial-header1{
        width:100%;
    }
    .testimonial-header{
        width:180%;
        font-size:1.7rem;
    }
    .bald{
        width:70px;
    }
    .afro{
        width:100px;
    }
    .para-2{
        margin:0 auto;
        font-size:1.0rem;
    }
    .chinese-lady{
       display:none;
    }
    .afro-guy{
        display:none
    }
    .chinese-guy{
        width:80px;
    }
    .indian-guy{
        width:80px;
    }
    .chinese-guy-first{
        margin-top:5%;
    }
    .indian-guy-first{
        margin-top:5%;
    }
    .txt-h1{
        font-size:1.7rem;
    }
    .txt-para{
        font-size:1.3rem;
    }
    .people{
        width:100%;
    }
    #cta-section{
        flex-direction: column;
        padding:3% 3%;
        font-size:1.2rem;
    }
    .cta-txt{
        font-size:1.2rem;
    }
    #footer{
        font-size:1.1rem;
        padding:3% 3%;
    }
    .logo-footer{
        margin-top:5%;
        margin-left:35%;
        width:100px;
    }
    .footer-2{
        grid-template-columns: repeat(2,1fr);
    }
    #contact{
        flex-direction: column;
        padding:2% 3%;
        font-size:1.2rem;
    }    
}
@media only screen and (max-width: 768px) and (min-width: 481px) {
    body{
        overflow-x: hidden;
    }
    #hero{
        padding:3% 3%;
        flex-direction: column;
    }
    .snicker{
        width:250px;
    }
    .hero-1{
        width:100%;
    }
    .hero-1 h1{
        font-size:3.0rem;
    }
    .hero-1 p{
        font-size:1.2rem;
    }
    .hero-1 button{
        font-size:1.3rem;
    }
    .hero-2{
        display:none; 
    }
    #features{
        padding:3%;
    }
    #features h1{
        font-size:3.0rem;
        margin-top:5%;
    }
    .features-flex{
        flex-direction: column;
        height:1000px;
        padding:0 3%;
    }
    .features-flex-box-1{
        padding:0;
    }
    .features-flex-box-3{
        padding:0;
    }#features-two{
        padding:0 3%;
    }
    .features-flex-box-2a{
        align-self: flex-start;
        padding:0 3%;
    }
    .stray-image{
        display:none;
    }
    .first{

        flex-direction: column;
    }
    .second{
        flex-direction: column;
        margin-top:3%;
    }
    #first-btn{
        font-size:1.3rem;
    }
    #second-btn{
        font-size:1.3rem;
    }
    .first{
        width:90%;
        font-size:1.2rem;
    }
    .first-text{
        margin-left:10%;
        padding:0 2%;
        width:110%;
    }
    .second{
        width:90%;
        font-size:1.2rem;
    }
    .second-text{
        margin-left:10%;
        padding:0 2%;
        width:120%;
    }
    .first img{
        align-self:center;
        width:200px;
    }
    .second img{
        width:200px;
        align-self: center;
    }
    .flex-img-1{
        width:250px;
    }
    .flex-img-2{
        width:250px;
    }
    .flex-img-3{
        width:250px;
    }
    #testimonials{
        padding:0 3%;
    }
    .testimonial-header1{
        width:100%;
    }
    .testimonial-header{
        width:120%;
        font-size:1.7rem;
        text-align: center;
    }
    .bald{
        width:70px;
    }
    .afro{
        width:100px;
    }
    .para-2{
        margin:0 auto;
        font-size:1.0rem;
    }
    .chinese-lady{
       display:none;
    }
    .afro-guy{
        display:none
    }
    .chinese-guy{
        width:80px;
    }
    .indian-guy{
        width:80px;
    }
    .chinese-guy-first{
        margin-top:5%;
    }
    .indian-guy-first{
        margin-top:5%;
    }
    .txt-h1{
        font-size:1.7rem;
    }
    .txt-para{
        font-size:1.3rem;
    }
    .people{
        width:100%;
    }
    #cta-section{
        
        padding:3% 3%;
        font-size:1.2rem;
    }
    .cta-txt{
        font-size:1.4rem;
    }
    #footer{
        font-size:1.4rem;
        padding:3% 3%;
    }
    .logo-footer{
        margin-top:5%;
        margin-left:35%;
        width:100px;
    }
    .footer-2{
        grid-template-columns: repeat(2,1fr);
    }
    #contact{
        
        padding:2% 3%;
        font-size:1.2rem;
    }    
}
@media only screen and (max-width: 1024px) and (min-width: 769px){
    body{
        overflow-x: hidden;
    }
    #hero{
        padding:3% 3%;
        flex-direction: column;
    }
    .snicker{
        width:250px;
    }
    .hero-1{
        width:100%;
    }
    .hero-1 h1{
        font-size:3.0rem;
    }
    .hero-1 p{
        font-size:1.2rem;
    }
    .hero-1 button{
        font-size:1.3rem;
    }
    .hero-2{
        display:none; 
    }
    #features{
        padding:3%;
    }
    #features h1{
        font-size:3.0rem;
        margin-top:5%;
    }
    .features-flex{
        flex-direction: column;
        height:1000px;
        padding:0 3%;
    }
    .features-flex-box-3{
        padding:0;
    }#features-two{
        padding:0% 3%;
    }
    .features-flex-box-2a{
        padding:0 3%;
        align-self: flex-start;
    }
    .stray-image{
        display:none;
    }
    .first{
        flex-direction: column;
        width:90%;
        font-size:1.2rem;
    }
    .second{
        width:90%;
        font-size:1.2rem;
        flex-direction: column;
        margin-top:3%;
    }
    #first-btn{
        font-size:1.3rem;
    }
    #second-btn{
        font-size:1.3rem;
    }
    .first-text{
        margin-left:10%;
        padding:0 2%;
        width:110%;
    }
    .second-text{
        margin-left:10%;
        padding:0 2%;
        width:120%;
    }
    .first img{
        align-self:center;
        width:200px;
    }
    .second img{
        width:200px;
        align-self: center;
    }
    .flex-img-1{
        width:250px;
    }
    .flex-img-2{
        width:250px;
    }
    .flex-img-3{
        width:250px;
    }
    #testimonials{
        padding:0 3%;
    }
    .testimonial-header1{
        width:100%;
        text-align: center;
    }
    .testimonial-header{
        width:110%;
        font-size:1.7rem;
    }
    .bald{
        width:70px;
    }
    .afro{
        width:100px;
    }
    .para-2{
        margin:0 auto;
        font-size:1.6rem;
        
    }
    .chinese-lady{
       display:none;
    }
    .afro-guy{
        display:none
    }
    .chinese-guy{
        width:80px;
    }
    .indian-guy{
        width:80px;
    }
    .chinese-guy-first{
        margin-top:5%;
    }
    .indian-guy-first{
        margin-top:5%;
    }
    .txt-h1{
        font-size:1.7rem;
    }
    .txt-para{
        font-size:1.3rem;
    }
    .people{
        width:100%;
    }
    #cta-section{
        padding:3% 3%;
        font-size:1.7rem;
    }
    .cta-txt{
        font-size:1.2rem;
    }
    #footer{
        font-size:1.7rem;
        padding:3% 3%;
    }
    .logo-footer{
        margin-top:5%;
        margin-left:35%;
        width:100px;
    }
    .footer-2{
        grid-template-columns: repeat(2,1fr);
    }
    #contact{
        padding:2% 3%;
        font-size:1.5rem;
    }    
}