/* ==========================================================
   BerHijab Premium Ecommerce
   responsive.css
   ========================================================== */

/* ===========================================
   Large Desktop (1400px+)
=========================================== */

@media (min-width:1400px){

.container{

    max-width:1320px;

}

.carousel-caption{

    max-width:700px;

}

.carousel-caption h1{

    font-size:72px;

}

}


/* ===========================================
   Desktop
=========================================== */

@media (max-width:1200px){

.carousel-caption h1{

    font-size:58px;

}

.product-title{

    font-size:18px;

}

.banner h2{

    font-size:46px;

}

}


/* ===========================================
   Tablet Landscape
=========================================== */

@media (max-width:992px){

.navbar{

    padding:12px 0;

}

.navbar-collapse{

    margin-top:20px;

    background:#fff;

    padding:20px;

    border-radius:18px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.nav-link{

    margin:8px 0;

}

.carousel-item{

    height:70vh;

}

.carousel-item img{

    height:70vh;

}

.carousel-caption{

    bottom:15%;

    max-width:500px;

}

.carousel-caption h1{

    font-size:48px;

}

.carousel-caption p{

    font-size:18px;

}

.banner{

    padding:70px 30px;

}

.banner h2{

    font-size:40px;

}

.section-title{

    font-size:36px;

}

.category-card{

    margin-bottom:25px;

}

.product-card{

    margin-bottom:30px;

}

.newsletter{

    padding:60px 20px;

}

footer{

    text-align:center;

}

footer .col-md{

    margin-top:30px;

}

}


/* ===========================================
   Tablet Portrait
=========================================== */

@media (max-width:768px){

.announcement{

    font-size:13px;

}

.navbar-brand img{

    height:42px;

}

.form-control{

    margin-bottom:15px;

}

.carousel-item{

    height:60vh;

}

.carousel-item img{

    height:60vh;

}

.carousel-caption{

    left:8%;

    right:8%;

    bottom:12%;

    text-align:center;

}

.carousel-caption h1{

    font-size:36px;

    line-height:1.25;

}

.carousel-caption p{

    font-size:16px;

    margin-bottom:20px;

}

.carousel-caption .btn{

    width:100%;

}

.section-title{

    font-size:30px;

    text-align:center;

}

.banner{

    margin:60px 0;

    border-radius:20px;

}

.banner h2{

    font-size:34px;

}

.banner p{

    font-size:17px;

}

.newsletter .input-group{

    display:block;

}

.newsletter input{

    width:100%;

    margin-bottom:15px;

}

.newsletter button{

    width:100%;

}

footer{

    padding:50px 0;

}

footer h4{

    margin-top:15px;

}

#backToTop{

    width:48px;

    height:48px;

    right:20px;

    bottom:20px;

}

}


/* ===========================================
   Mobile
=========================================== */

@media (max-width:576px){

body{

    font-size:15px;

}

.container{

    padding-left:18px;

    padding-right:18px;

}

.navbar{

    padding:10px 0;

}

.navbar-brand img{

    height:38px;

}

.carousel-item{

    height:55vh;

}

.carousel-item img{

    height:55vh;

}

.carousel-caption{

    bottom:8%;

}

.carousel-caption h1{

    font-size:28px;

}

.carousel-caption p{

    display:none;

}

.carousel-caption .btn{

    padding:12px;

}

.section-title{

    font-size:26px;

}

.section-subtitle{

    font-size:14px;

}

.category-card{

    padding:25px;

}

.category-card i{

    font-size:40px;

}

.product-body{

    padding:18px;

}

.product-title{

    font-size:17px;

}

.product-price{

    font-size:22px;

}

.product-action{

    opacity:1;

    right:10px;

    top:10px;

}

.product-action button{

    width:36px;

    height:36px;

}

.badge-sale{

    padding:6px 12px;

    font-size:11px;

}

.banner{

    padding:50px 25px;

}

.banner h2{

    font-size:28px;

}

.banner p{

    font-size:15px;

}

.newsletter{

    padding:50px 20px;

}

.newsletter h2{

    font-size:28px;

}

footer{

    padding:40px 0;

}

footer i{

    font-size:20px;

}

}


/* ===========================================
   Small Mobile
=========================================== */

@media (max-width:420px){

.carousel-caption h1{

    font-size:24px;

}

.section-title{

    font-size:24px;

}

.product-title{

    font-size:16px;

}

.product-price{

    font-size:20px;

}

.btn-primary{

    width:100%;

}

.navbar .btn{

    margin-top:10px;

}

}


/* ===========================================
   Smooth Animation
=========================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.7s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.fade-left{

    opacity:0;

    transform:translateX(-40px);

    transition:.7s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

.fade-right{

    opacity:0;

    transform:translateX(40px);

    transition:.7s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

.zoom{

    opacity:0;

    transform:scale(.9);

    transition:.6s ease;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}


/* ===========================================
   Glass Effect
=========================================== */

.glass{

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.4);

}


/* ===========================================
   Hover Premium
=========================================== */

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.hover-scale img{

    transition:.45s;

}

.hover-scale:hover img{

    transform:scale(1.08);

}


/* ===========================================
   Loading Skeleton
=========================================== */

.skeleton{

    position:relative;

    overflow:hidden;

    background:#ececec;

}

.skeleton::after{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );

    animation:skeleton 1.2s infinite;

}

@keyframes skeleton{

100%{

left:100%;

}

}


/* ===========================================
   Dark Mode (Future Ready)
=========================================== */

body.dark{

    background:#111;

    color:#eee;

}

body.dark .navbar{

    background:#1b1b1b !important;

}

body.dark .product-card{

    background:#202020;

}

body.dark footer{

    background:#000;

}