*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}


/*pop up*/
.popup-container{ 
    width: 100%;
    height: 400px;
    position: absolute;
    z-index: 999;
    top: 17%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:auto;
}
.popup{
    background-color:#F29CB7;
    text-align: center; 
    max-width: 500px;
    width: 100%; 
    height: auto;
    font-size: 1.5em;
    margin: auto;
    margin-bottom: 50px;
}
.btn-main{
    margin: auto;
    margin-bottom: 50px;
}

#popup-close{
  text-align: right; 
  font-size: 1.5em; 
  padding:15px;
}

.popup h2{
    font-size:2em;
    margin-top: 30px;
}  

.popup p{
    width: 80%;
    margin: auto;
    padding: 5px;
    margin-bottom: 10px;
}


.overlayment{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    z-index:777;
    background-color: rgba(0,0,0,0.698);
}
/*end of pop up*/

/* milestone 4*/
/*hero slides*/  
.slide {
    width: 100%;
    height:500px;
    max-width:1400px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.slider-container {
    display: flex;
   align-items: center;
   justify-content: center;

}

.slide1 {
    background-image:url(images/6616324.jpg);
    background-position:right;
}
.slide2 {
    background-image: url(images/cheetahSlide.png);
    background-position:75%;
}

.teal{
    color:#DDAAFF;
}
.white{
    color:#333;
}

.black-back{
    background-color:#000  ;
    padding:5px;
}
.cta-wrapper{
    max-width: 1400px;
    width: 100%;
    height:500px;
    justify-content:center;
    align-items:center;
    display: flex;
 }

.inner-cta-wrapper{
    width:350px;
    background-color: #fff;
    padding:20px;
    text-align:center;
    font-size:1.2em;
    border:solid 2px  #DDAAFF;
}
.inner-cta-wrapper hr{
   color: #DDAAFF;
    margin:20px;
    height:3px;
}
.fa-circle-chevron-right, .fa-circle-chevron-left{
    font-size:2em;
    margin-right:3px;
    color:#f0e6f9;
}

.btn-main{
    background-color:#DDAAFF;
    color: #fff;
    padding:10px 50px;
    border-radius:20px;
}

.container{
    background-color:rgba(82,42,111,1.0);
    text-align: center;
    margin:auto;
    padding:20px;
    width:100%;
    color: #fff;
}


.outerWrap{
    max-width: 1400px;
    width:100%;
    height:500px;
    display:flex;
    align-items: center;
    justify-content: center ;
    background: #DDAAFF;
     background-blend-mode: soft-light;

}

.slide .inner-cta-wrapper .black-back{
    background-color:#000;
    color:#fff;
    padding:10px 50px ;

}

.btn-main{
    background-color:#000;
    color:#fff;
    padding:10px 50px;
    border-radius: 20px;
    border-style:none;

}

.dot-container{
    max-width:1400px;
    position: relative;
    bottom:25px;
    margin:0 auto;
}

.inner-dot-container{
    display:flex;
    justify-content: center;
    align-items:center;
}

.dot{
    cursor:pointer;
    height: 15px;
    width: 15px;
    margin: 0px;
    border-radius: 100%;
    background-color:rgba(128,128,128,0.54);
    display: inline-block;
    transition:background-color 0.6s ease;


}

.active .dot:hover{
    background-color: #fff ;

}

.fade{
    -webkit-animation-name:fade ;
    -webkit-animation-duration: 2.5s;
    animation-name:fade;
    animation-duration:2.5s;
}

@-webkit-keyframes fade{
    from{opacity:.6;}
    to{opacity:1;}

}

@keyframes fade{
    from{opacity:.6;}
    to{opacity:1;}
}
/* end hero css*/


/*owl-carousal*/

.newSellers{
    width:80%;
    margin:20px auto;
    padding:15px;
    height:auto;
    background-color: #ddaaff68;
    background-blend-mode: soft-light;
    border-color: rgb(115, 65, 151);
    border:solid 2px;
    box-shadow: #ffffff 0px 3px 10px;
}

.newSellers p{
    color: #FAEADD;
}

.price{
    color: #F29CB7;
}
.product-box img{
    max-width:200px;
    height:auto;
}
.product-1{
    width:80%;
    height:auto;
    padding: 5px;
    margin:20px auto;
}
.product-container{
    max-width:1400px;
    width:80%;
    margin:auto;
}
.product-box{
    width:350px;
    box-shadow: 2px #333 5px;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    margin:20px auto;

}

.newestItem{
    background-color: #F29CB7;
    margin:auto;
    padding:20px;
    width:100%;
}

.BengalItem{
    background-color:#FAEADD;
    padding:10px;
    width:90%;
    margin:auto;
    padding:10px;
    
}
.description{
    margin: auto;
    padding: 5px;
    width: 70%;
}

.imgOne{
    margin:auto;
    padding:5px;
    width:80%;  
    height:auto;
}
.imgOne img{
    width:100%;
    height:auto;
}
.imgThree{
    margin:auto;
    padding:5px;
    width:80%;  
    height:auto;
}
.imgThree img{
    width:100%;
    height:auto;
}
.aboutUs{
    background-color: rgba(250,234,221,.5);
    margin:auto;
    padding:20px;
    width:100%;
    
}

.about_row{
    background-color: rgba(250,234,221,.75);
    padding:10px;
    width:90%;
    margin:auto;
} 
.aboutImg{
    width:100%;
    height:auto;
    margin:auto;

}
.aboutImg img{
    width:100%;
    height:auto;
    margin:auto;
}
 
h1{
    text-align: center;
}
.testimonials{
    background-color: rgba(251,207,79,.5);
    margin:auto;
    padding:20px;
    width:100%;

}
.testimonialCarousal{
    background-color: rgba(251,207,79,1);
    padding:10px;
    width:90%;
    margin:auto;
}

@media(min-width:900px){
    
    .about_row, .quickLinks{
        display: flex;
        flex-direction: row;
        width:85%;
        align-content: center;
    }
    .link1{
        height:75px;
        padding:10px;
        margin:20px auto;
        width:30%;
    }
    .aboutImg{
        width:40%;
        padding:10px;
        margin:10px auto;
    }

    .aboutUs p{
        width:60%;
        padding:10px;
        margin:10px auto;
        margin-top: 150px;
    }
    .BengalItem{
        display: flex;
        flex-direction: column;
    }

    .bengalImg{
        display: flex;
        flex-direction: row;
        width:70%;
        margin: auto;
        padding: 5px;
    }
    .imgRow{
        display: flex;
        flex-direction: column;
    }

    .imgOne{
        Width:50%;
        height:auto;
    }
    .imgThree{
        width:50%;
        height:auto;
    }
    .imgThree{
        width:100%;
    } 
}