:root {
    --primary: #0b2a4a;
    --primary-dark: #071a30;
    --primary-soft: #eaf2fb;
    --accent: #f26a21;
    --accent-hover: #d8570d;
    --text: #203040;
    --text-light: #60717d;
    --surface: #ffffff;
    --surface-soft: #f7f9fb;
    --border: #dce5ee;
    --success: #0d7c4d;
    --danger: #b42318;
}

/* common css */

/* ====================== */

body{

    margin: 0;

    font-family: 'Roboto', sans-serif;

    background-color: var(--surface-soft);

    color: var(--text);

    overflow-x: hidden;

}

h1,h2,h3,h4,h5,h6{

    margin: 0;

}



a,

a:hover,

a:focus{

    text-decoration: none;

    outline: none;

    color: var(--primary);

}

.btn,
.btn:hover,
.btn:focus,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus{
    border: none;
    outline: none;
}

.btn:focus{

    outline: none;

}



ul{

    padding: 0;

    margin: 0;

    list-style: none;

}



/* logo css */

/* =================== */



.logo{

    color: var(--primary);

    font-size: 35px;

    font-weight: 700;

    text-transform: capitalize;

    text-align: center;

    display: inline-block;

    margin: 0 0 20px;

}





/* admin login form css */

/* ==================================== */



.login-form{

    background: linear-gradient(30deg,#e9e9e9 49%, #e4e4e4 50%);

    box-shadow: 0 0 20px -10px rgba(0,0,0,0.5);

    border-radius: 50px;

    padding: 50px 40px;

    margin: 100px 0 0;

    text-align: center;

}



.login-form .form-group{

    text-align: left;

}

.login-form label{

    width: 25%;

    display: inline-block;

}

.login-form .form-control{

    width: 74%;

    display: inline-block;

    border: none;

    padding: 15px 15px;

    height: 50px;

    border-radius: 20px;

}

.login-form .form-control:focus{

    border: none;

    box-shadow: 3px 3px 5px #999;

}

.login-form .form-control::placeholder{

    color: #999;

    text-transform: capitalize;

}



.login-form .btn{

    padding: 7px 15px;

    font-size: 20px;

    font-weight: 600;

    text-transform: capitalize;

    color: #fff;

    background-color: var(--accent);

    transition: all 0.3s;

}



.login-form .btn:hover,

.login-form .btn:focus{

    background-color: var(--accent-hover);

}



/* admin header css */

/* ========================= */



#admin-header{

    background: linear-gradient(to bottom, #e7e7e7, #f5f5f5);

    padding: 15px 0 12px;

    box-shadow: 0 0 30px rgba(0,0,0,0.15);

    position: relative;

    z-index: 1;

}
#admin-content .back-new{
    color: #fff;
    background-color: #f7c049;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 15px;
    border-radius: 15px;
    transition: all 0.3s;
}

#admin-content .back-new:hover{
    background-color: #333;
    box-shadow: 0 0 5px #333;
}


#admin-header .logo{

    margin: 0;

}



#admin-header .logo-img{

    display: block;

}

#admin-header .logo-img img{

    width: 100%;

}



#admin-header .dropdown{

    text-align: right;

}



#admin-header .logout{

    color: #fff;

    background-color: #e93700;

    font-size: 18px;

    font-weight: 600;

    text-transform: capitalize;

    padding: 4px 15px;

    margin: 5px 0;

    border-radius: 10px;

    display: inline-block;

    transition: all 0.3s;

}



#admin-header .logout:hover{

    background-color: #333;

    box-shadow: 0 0 5px #333;

}



/* admin wrapper css */

/* ===================== */



#admin-wrapper{

    /* border: 1px solid #000; */

    min-height: 700px;

}





/* admin menu css */

/* ===================== */



#admin-menu{

    background-color: #e93700;

    padding: 20px 10px;

    min-height: 700px;

}

#admin-menu .menu-list li a{

    color: #fff;

    font-size: 15px;

    font-weight: 600;

    text-transform: uppercase;

    padding: 10px 10px;

    border-radius: 10px;

    display: block;

    transition: all 0.3s;

}



#admin-menu .menu-list li.active a,

#admin-menu .menu-list li a:hover{

    background-color: rgba(255,255,255,0.2);

}



/* admin content css */

/* ====================== */



#admin-content{

    padding: 25px 20px 0;

    min-height: 650px;

}

#admin-content .admin-content-container{

    min-height: 645px;

}



#admin-content .admin-heading{

    color: #333;

    font-size: 30px;

    margin: 0 0 20px;

    text-transform: capitalize;

    display: inline-block;

}



#admin-content .add-new{

    color: #fff;

    background-color: #e93700;

    font-size: 16px;

    font-weight: 600;

    text-transform: uppercase;

    padding: 5px 15px;

    border-radius: 15px;

    transition: all 0.3s;

}



#admin-content .add-new:hover{

    background-color: #333;

    box-shadow: 0 0 5px #333;

}



#admin-content .detail-box{

    color: #fff;

    background-color: #E93700;

    width: 220px;

    padding: 40px 20px;

    border-radius: 5px;

    text-align: center;

    margin: 0 auto 50px;

    border: 5px solid #fff;

    box-shadow: 5px 5px 0 rgba(0,0,0,0.1);

}

#admin-content .detail-box .count{

    display: block;

    font-size: 45px;

    font-weight: 600;

    line-height: 40px;

    margin: 0 0 7px;

}



#admin-content .detail-box .count-tag{

    font-size: 16px;

    text-transform: uppercase;

    font-weight: 600;

}



/* ============================== */



#admin-content .add-post-form{

    /* border: 1px solid #000; */

    margin: 0;

}

#admin-content .add-post-form .form-group.category,

#admin-content .add-post-form .form-group.sub_category,

#admin-content .add-post-form .form-group.brand{

    display: inline-block;

    width: 30%;

    margin-right: 30px;

}



#admin-content .add-post-form .form-group.brand{

    margin-right: 0;

}



#admin-content .add-post-form .form-control:focus{

    box-shadow: 0 0 1px #333;

    border-color: #999;

}

#admin-content .not-found{

    padding: 10px 25px;

    background-color: rgba(0,0,0,0.1);

    border-radius: 20px;

    text-align: center;

    font-size: 22px;

    font-weight: 600;

}



#admin-footer{

    padding: 5px;

    text-align: center;

    margin: 0 -20px;

    color: #fff;

    background-color: #E93700;

}



.modal-body table{

    background-color: #fff;

    padding: 10px;

    box-shadow: 0 0 5px rgba(0,0,0,0.1);

}



.modal-body table h3{

    text-align: center;

}





/*===================*/

/*PUBLIC VIEW CSS START*/



/*----------------------------*\

	Logo

\*----------------------------*/



#header {

    padding-top: 15px;

    padding-bottom: 15px;

}



#header .logo{

    font-size: 30px;

    margin: 0;

}



#header .logo-img{

    display: block;

}



#header .logo-img img{

    width: 100%;

}



#header .search{

    margin: 0 auto;

}



#header .search .form-control{

    border: none;

    background-color: #f5f5f5;

    padding: 22px 10px;

    border-radius: 20px 0 0 20px;

}

#header .search .form-control:focus{

    box-shadow: none;

    border: none;

}

#header .search .btn{

    color: #fff;

    background-color: var(--accent);

    font-size: 20px;

    padding: 8px 12px 7.5px;

    border: none;

    border-radius: 0 20px 20px 0;

    transition: all 0.3s ease;

}

#header .search .btn:hover,
#header .search .btn:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-danger:hover,
.btn-danger:focus{
    background-color: var(--accent-hover);
}

#header .search .btn:hover{

    box-shadow: 0 0 3px #333 inset;

}



#header .header-info{

    padding:10px 0;

    text-align: right;

}



#header .header-info li{

    display:inline-block;

    margin-right:15px;

}

#header .header-info li:last-child{

    margin:0;

}

#header .header-info li a{

    font-size:16px;

    color:#666;

    text-transform: capitalize;

    border-radius: 10px;

    position: relative;

    transition: all 0.3s;

}

#header .header-info li a i{

    font-size: 20px;

}

#header .header-info li a:hover{

    color: #df3500;

}



#header .header-info li a span{

    color: #fff;

    background-color: #DF3500;

    font-size: 13px;

    font-weight: 600;

    text-align: center;

    line-height: 18px;

    height: 18px;

    width: 18px;

    border-radius: 50%;

    position: absolute;

    top: -12px;

    right: 0;

}



#header .header-info li i.fa{

    margin:0 5px;

}



/*header menu CSS*/

/*=============================*/



#header-menu .menu-list{

    background: linear-gradient(135deg, var(--primary) 0%, #102f52 100%);

    padding: 8px 15px;

    margin: 0 -15px;

    /* text-align: center; */

}

#header-menu .menu-list li {

    display: inline-block;

}

#header-menu .menu-list li a{

    color: #fff;

    background-color: rgba(255,255,255,0.1);

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    padding: 8px 15px;

    margin: 0 15px 0 0;

    border-radius: 10px;

    display: block;

    transition: all 0.3s;

}



#header-menu .menu-list li a:hover{

    box-shadow: 0 0 5px rgba(0,0,0,0.3);

}

#header-menu .mega-dropdown .dropdown-menu{
    width: 720px;
    padding: 20px;
    left: 0;
    right: auto;
    background: #fff;
    border-radius: 0;
    border: 1px solid #d9e8f2;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

#header-menu .mega-menu-column{
    display: inline-block;
    width: 220px;
    vertical-align: top;
    padding: 0 10px 0 0;
    margin-right: 10px;
}

#header-menu .mega-menu-column h4{
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

#header-menu .mega-menu-links li{
    display: block;
}

#header-menu .mega-menu-links li a{
    background: none;
    color: #555;
    margin: 0;
    padding: 6px 0;
    border-radius: 0;
    text-transform: none;
    font-weight: 500;
}

#header-menu .mega-menu-links li a:hover{
    color: var(--primary);
    background: none;
    box-shadow: none;
}

#header-menu .no-items{
    color: #666;
    padding: 10px 15px;
}

@media (max-width: 991px){
    #header-menu .navbar-header {
        float: none;
    }

    #header-menu .navbar-toggle {
        display: block;
    }

    #header-menu .navbar-collapse {
        border-top: 1px solid rgba(255,255,255,0.18);
        box-shadow: none;
        background: #31708f;
        padding: 0;
    }

    #header-menu .navbar-collapse.collapse {
        display: none !important;
    }

    #header-menu .navbar-collapse.collapse.in {
        display: block !important;
    }

    #header-menu .navbar-nav {
        float: none;
        margin: 0;
    }

    #header-menu .menu-list {
        padding: 0;
        margin: 0;
    }

    #header-menu .menu-list > li {
        display: block;
        width: 100%;
    }

    #header-menu .menu-list > li > a {
        margin: 0;
        border-radius: 0;
    }

    #header-menu .mega-dropdown .dropdown-menu {
        width: 100%;
        position: static;
        float: none;
        max-width: none;
        padding: 0 15px 15px;
        border: none;
        box-shadow: none;
        background: rgba(255,255,255,0.95);
    }

    #header-menu .mega-menu-column {
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #e7e7e7;
    }

    #header-menu .mega-menu-column h4 {
        padding: 12px 0 8px;
    }

    #header-menu .mega-menu-links li a {
        padding: 8px 0;
    }
}

@media (max-width: 767px){
    #header-menu .navbar-brand {
        color: #fff;
    }

    #header-menu .navbar-toggle {
        border-color: #fff;
    }

    #header-menu .navbar-toggle .icon-bar {
        background: #fff;
    }

    #header-menu .menu-list > li > a {
        padding: 12px 15px;
        font-size: 13px;
    }

    #header-menu .mega-menu-column h4 {
        font-size: 13px;
    }
}

/* Customer-login form css */

/* ==================================== */



.modal-body{

    padding:50px 50px;

    background: linear-gradient(30deg,#e9e9e9 49%, #e4e4e4 50%);

    box-shadow: 0 0 20px -10px rgba(0,0,0,0.5);

}



.customer_login{

    text-align: center;

}

.customer_login h2{

    font-size: 35px;

    font-weight:700;

    color:#444;

    text-transform: uppercase;

    margin: 0 0 30px 0;

}



.customer_login label{

    width: 25%;

    display: inline-block;

}

.customer_login .form-control{

    width: 74%;

    display: inline-block;

    border: none;

    padding: 15px 15px;

    height: 50px;

    border-radius: 20px;

}

.customer_login .form-control:focus{

    border: none;

    box-shadow: 3px 3px 5px #999;

}

.customer_login .form-control::placeholder{

    color: #999;

    text-transform: capitalize;

}



.customer_login .btn{

    width:50%;

    padding: 7px 15px;

    font-size: 20px;

    font-weight: 600;

    text-transform: capitalize;

    color: #fff;

    background-color: var(--accent);

    border-radius:20px;

    margin: 0 0 20px;

    transition:all 0.3s;

}



.customer_login .btn:hover,

.customer_login .btn:focus{

    background-color: var(--accent-hover);

}



.customer_login span{

    display: block;

    color: #000;

}

.customer_login span a{

    color: #e93700;

    transition: all 0.3s ease 0s;

}

.customer_login span a:hover{

    color: #000;

}

/*----------------------------*\

	/Customer-login form css

\*----------------------------*/







/* Register form css */

/* ==================================== */



.signup_form{

    text-align:center;

    padding:30px 30px;

    background: linear-gradient(30deg,#e9e9e9 49%, #e4e4e4 50%);

    box-shadow: 0 0 20px -10px rgba(0,0,0,0.5);

}



.signup_form h2{

    font-size: 35px;

    font-weight:700;

    color:#444;

    text-transform: uppercase;

    margin: 0 0 30px 0;

}



.signup_form label{

    width: 25%;

    text-align: left;

    display: inline-block;

}

.signup_form .form-control{

    width: 74%;

    display: inline-block;

    border: none;

    padding: 15px 15px;

    height: 50px;

    border-radius: 20px;

}

.signup_form .form-control:focus{

    border: none;

    box-shadow: 3px 3px 5px #999;

}

.signup_form .form-control::placeholder{

    color: #999;

    text-transform: capitalize;

}



.signup_form .btn{

    width:50%;

    padding: 7px 15px;

    font-size: 20px;

    font-weight: 600;

    text-transform: capitalize;

    color: #fff;

    background-color: #e93700;

    border-radius:20px;

    transition:all 0.3s;

}



.signup_form .btn:hover,

.signup_form .btn:focus{

    background-color: #333;

}



/*----------------------------*\

	/Register form css

\*----------------------------*/



/*----------------------------*\

	Banner

\*----------------------------*/



#banner{

    color: #fff;

}

#banner .banner-content{

    margin: 0;

    overflow: hidden;

}

.banner-carousel .item{
    position: relative;
}

.banner-carousel .banner-slide{
    position: relative;
    overflow: hidden;
    height: clamp(320px, 46vw, 520px);
    background: linear-gradient(135deg, #0b2a4a, #173c63 60%, #f26a21);
}

.banner-carousel .banner-slide img{
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.9;
}

.banner-carousel .banner-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7,26,48,0.74) 0%, rgba(7,26,48,0.52) 38%, rgba(7,26,48,0.25) 100%);
    z-index: 1;
}

.banner-carousel .banner-caption{
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 12%;
    z-index: 2;
    max-width: 540px;
}

.banner-carousel .banner-caption .slide-title{
    color: #fff;
    font-size: clamp(28px, 4vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.banner-carousel .banner-caption .slide-text{
    color: rgba(255,255,255,0.95);
    font-size: 16px;
    margin: 0 0 18px;
}

@media (max-width: 767px){
    .banner-carousel .banner-slide{
        height: 280px;
    }

    .banner-carousel .banner-caption{
        left: 6%;
        right: 6%;
        bottom: 15%;
    }

    .banner-carousel .banner-caption .slide-title{
        font-size: 28px;
    }

    .banner-carousel .banner-caption .slide-text{
        font-size: 14px;
        margin-bottom: 14px;
    }

    .banner-carousel .banner-caption .btn{
        padding: 10px 18px;
    }

    .banner-carousel .owl-nav button{
        width: 34px;
        height: 34px;
        font-size: 18px !important;
    }
}

.banner-carousel .banner-caption .btn{
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 999px;
}

.banner-carousel .banner-caption .btn:hover,
.banner-carousel .banner-caption .btn:focus{
    background: var(--accent-hover);
}

.banner-carousel .owl-nav{
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -20px;
    pointer-events: none;
}

.banner-carousel .owl-nav button{
    pointer-events: auto;
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.94) !important;
    color: var(--primary) !important;
    font-size: 26px !important;
    line-height: 42px !important;
}

.banner-carousel .owl-nav .owl-prev{ margin-left: 15px; }
.banner-carousel .owl-nav .owl-next{ margin-right: 15px; float: right; }

.banner-carousel .owl-dots,
.category-slider .owl-dots,
.popular-carousel .owl-dots,
.latest-carousel .owl-dots{
    display: none !important;
}





/*----------------------------*\

	/Banner

\*----------------------------*/





/*----------------------------*\

	Products Section

\*----------------------------*/

.mini-service-strip{
    padding: 10px 0 0;
}

.mini-service-card{
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    margin-bottom: 10px;
    box-shadow: 0 8px 22px rgba(11,42,74,0.06);
}

.mini-service-icon{
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.mini-service-card p{
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

@media (max-width: 767px){
    .mini-service-strip{
        padding-top: 5px;
    }

    .mini-service-strip .row{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0;
        margin-left: 0;
        margin-right: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .mini-service-strip .row::-webkit-scrollbar {
        display: none;
    }

    .mini-service-strip .col-sm-6,
    .mini-service-strip .col-md-3{
        width: 132px;
        flex: 0 0 132px;
        max-width: 132px;
        padding-left: 0;
        padding-right: 0;
    }

    .mini-service-card{
        min-height: 48px;
        padding: 7px 8px;
        margin-bottom: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .mini-service-icon{
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        font-size: 12px;
    }

    .mini-service-card p{
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
    }
}

.deal-section{
    padding-top: 5px;
}

.deal-card{
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(11,42,74,0.08);
    padding: 20px 18px;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.deal-title{
    color: #1a1a1a;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.deal-hero{
    background: linear-gradient(180deg, #fbfbfb 0%, #f4f7fb 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
}

.deal-hero img{
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.deal-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
    align-items: stretch;
}

.deal-tile{
    background: linear-gradient(135deg, #fdfdfd 0%, #f4f7fb 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-height: 92px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.deal-tile:hover{
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 18px rgba(11,42,74,0.08);
}

.deal-tile.is-active{
    border-color: var(--primary);
    box-shadow: inset 0 0 0 2px rgba(242,106,33,0.18);
}

.deal-tile img{
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
}

.deal-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

.deal-price{
    color: #1b1b1b;
    font-size: 20px;
    font-weight: 800;
}

.deal-price small{
    font-size: 13px;
}

.deal-meta,
.deal-deal,
.deal-link{
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
}

.deal-link{
    color: var(--primary);
}

@media (max-width: 767px){
    .deal-section .col-md-3,
    .deal-section .col-sm-6{
        margin-bottom: 16px;
    }

    .deal-card{
        padding: 18px 14px;
    }

    .deal-title{
        font-size: 18px;
        margin-bottom: 14px;
    }

    .deal-hero{
        min-height: 130px;
    }

    .deal-hero img{
        height: 130px;
    }

    .deal-tile{
        min-height: 84px;
    }

    .deal-tile img{
        height: 84px;
    }
}

.promo-layout{
    margin: 0 0 24px;
}

.promo-layout .promo-left,
.promo-layout .promo-right{
    padding: 0 10px;
}

.promo-card,
.ad-card{
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: #fff;
    border-radius: 22px;
    padding: 24px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 30px rgba(11,42,74,0.16);
}

.promo-card::before,
.ad-card::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11,42,74,0.84), rgba(242,106,33,0.65));
}

.promo-card .promo-inner,
.ad-card .ad-inner{
    position: relative;
    z-index: 1;
    max-width: 360px;
}

.promo-card h3,
.ad-card h3{
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.promo-card p,
.ad-card p{
    font-size: 15px;
    margin: 0 0 16px;
    color: rgba(255,255,255,0.92);
}

.promo-card .btn,
.ad-card .btn{
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 18px;
}

.promo-card .btn:hover,
.ad-card .btn:hover{
    background: var(--primary-soft);
}

.ad-card{
    background: linear-gradient(135deg, #102f52 0%, #1d4d7a 50%, #f26a21 100%);
    min-height: 160px;
    margin-top: 16px;
}

@media (max-width: 767px){
    .promo-layout .promo-left,
    .promo-layout .promo-right{
        padding: 0 0 16px;
    }

    .promo-card,
    .ad-card{
        min-height: 180px;
        padding: 18px;
    }

    .promo-card h3,
    .ad-card h3{
        font-size: 22px;
    }
}

.product-section.content{

    min-height: 700px;

}



.product-section.popular-products{

    background-color: rgba(0,0,0,0.02);

}



.section-head{

    text-align: center;

    color: #444;

    font-size: 28px;

    font-weight: 400;

    text-transform: capitalize;

    margin: 0 0 30px;

}



.section-head:after{

    content: '';

    display: block;

    clear: both;

    width: 150px;

    height: 2px;

    border-top: 2px dashed #e7e7e7;

    margin: 10px auto 0;

}

.category-section{
    padding: 10px 0 30px;
}

.category-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.category-item{
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    border: 1px solid rgba(24, 74, 137, 0.12);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 8px 18px rgba(11,42,74,0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    display: block;
}

.category-item:hover{
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(11,42,74,0.12);
}

.category-media{
    background: linear-gradient(180deg, #f2f7ff 0%, #dbe8ff 100%);
    border-radius: 12px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
}

.category-media img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 4px;
}

.category-name{
    color: #1d1d1d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-item-empty .category-name{
    color: var(--primary);
}

.section-heading-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.category-spotlight-title{
    text-align: left !important;
    margin: 0 !important;
}

.category-spotlight-title:after{
    margin-left: 0 !important;
}

.section-see-all{
    color: #2a9f45;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    text-decoration: none;
}

.section-see-all:hover{
    color: #228436;
    text-decoration: none;
}

.category-product-grid{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.category-product-card{
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(11, 42, 74, 0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.category-product-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(11, 42, 74, 0.12);
}

.category-product-media{
    background: #f8fbff;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-product-media img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 10px;
}

.category-product-body{
    padding: 12px 14px 16px;
}

.category-product-chip{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #6d6d6d;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.category-product-title{
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.45;
    min-height: 44px;
}

.category-product-title a{
    color: #2f2f2f;
    text-decoration: none;
}

.category-product-title a:hover{
    color: var(--accent);
    text-decoration: none;
}

.category-product-meta{
    font-size: 12px;
    color: #7a7a7a;
    margin-bottom: 12px;
}

.category-product-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.category-product-price{
    color: #1f1f1f;
    font-size: 18px;
    font-weight: 800;
}

.category-product-button{
    background: #fff;
    border: 1px solid #2d9f43;
    color: #2d9f43;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
}

.category-product-button:hover{
    background: #2d9f43;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 1200px){
    .category-product-grid{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px){
    .category-grid{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .category-product-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px){
    .category-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .category-media{
        height: 88px;
        margin-bottom: 6px;
    }

    .category-name{
        font-size: 11px;
    }

    .section-heading-row{
        flex-direction: column;
        align-items: flex-start;
    }

    .category-spotlight-title{
        width: 100%;
        text-align: left !important;
    }

    .category-product-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px){
    .category-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-product-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px){
    .category-grid{
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 991px){
    .category-grid{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px){
    .category-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .category-media{
        height: 88px;
        margin-bottom: 6px;
    }

    .category-name{
        font-size: 11px;
    }
}

@media (max-width: 480px){
    .category-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.category-slider .owl-dots .owl-dot span{
    background: #c7d4e3;
}

.category-slider .owl-dots .owl-dot.active span,
.category-slider .owl-dots .owl-dot:hover span{
    background: var(--accent);
}

.promo-layout{
    margin: 0 0 24px;
}

.promo-layout .promo-left,
.promo-layout .promo-right{
    padding: 0 10px;
}

.promo-card,
.ad-card{
    background: linear-gradient(135deg, #0b2a4a 0%, #143a62 60%, #f26a21 100%);
    color: #fff;
    border-radius: 22px;
    padding: 24px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 30px rgba(11,42,74,0.16);
}

.promo-card .promo-inner,
.ad-card .ad-inner{
    max-width: 360px;
}

.promo-card h3,
.ad-card h3{
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.promo-card p,
.ad-card p{
    font-size: 15px;
    margin: 0 0 16px;
    color: rgba(255,255,255,0.92);
}

.promo-card .btn,
.ad-card .btn{
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    border-radius: 999px;
    padding: 10px 18px;
}

.promo-card .btn:hover,
.ad-card .btn:hover{
    background: var(--primary-soft);
}

.ad-card{
    background: linear-gradient(135deg, #102f52 0%, #1d4d7a 50%, #f26a21 100%);
    min-height: 160px;
    margin-top: 16px;
}

@media (max-width: 767px){
    .promo-layout .promo-left,
    .promo-layout .promo-right{
        padding: 0 0 16px;
    }

    .promo-card,
    .ad-card{
        min-height: 180px;
        padding: 18px;
    }

    .promo-card h3,
    .ad-card h3{
        font-size: 22px;
    }
}

.product-section .product-grid{

    text-align: center;

    margin: 0 15px 30px;

}

.product-section .product-grid.popular{

    margin: 0;

}



.product-grid .product-image{

    background-color: #fff;

    position: relative;

    overflow: hidden;

    border-radius: 10px;

    height: 260px;

}

.product-grid .product-image.latest{

    height: 330px;

}

.product-grid .product-image.popular{

    height: 250px;

}



.product-grid .product-image a.image{ display: block; }



.product-grid .product-image img{

    width: 100%;

    height: 100%;

    transform: translateX(-50%) translateY(-50%);

    position: absolute;

    left: 50%;

    top: 50%;

}



.owl-carousel .owl-theme img{

    width: 100% !important;

}



.product-grid .product-button-group{

    font-size: 0;

    width: 140px;

    transform: translateX(-50%) translateY(-50%);

    position: absolute;

    left: 50%;

    top: 50%;

}

.product-grid .product-button-group a{

    display: inline-block;

    width: 35px;

    height: 35px;

    line-height: 35px;

    font-size: 16px;

    font-weight: 500;

    text-transform: capitalize;

    margin: 0 4px;

    border-radius: 50%;

    color: var(--accent);

    background-color: #fff;

    box-shadow: 0 0 5px rgba(0,0,0,0.5);

    transform: scale(0);

    transition: all 0.3s;

}

.product-grid .product-button-group a:hover{

    color: #fff;

    background-color: var(--accent);

    text-shadow: 0 0 2px #333;

    box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;

}

.product-grid:hover .product-button-group a{

    transform: scale(1);

}



.product-grid .product-content {

    padding: 12px;

}



.product-grid .title{

    font-size: 14px;

    font-weight: 600;

    display: block;

    margin: 0 0 5px;

    text-transform: capitalize;

}



.product-grid .title a {

    color: #555;

}

.product-grid .title a:hover {

    color:#df3500;

}



.product-grid .price {

    font-size:16px;

    color: #555;

    font-weight: 500;

    margin: 0 2px;

}





/*----------------------------*\

	/Products

\*----------------------------*/



/*----------------------------*\

	Product Page

\*----------------------------*/







.product-details{

    font-family: 'Montserrat', sans-serif;

}



.product-details h3{

    font-size: 25px;

    color: #2B2D42;

    font-weight: 700;

    text-transform: uppercase;

    margin: 0 0 10px;

}



.product-details .product-price {

    display:block;

    font-size: 24px;

    font-weight: 700;

    color: #D10024;

    display: inline-block;

    margin:0 15px 10px 0;

}



.product-details .product-price span{

    color: #8e8e8e;

    margin-right: 5px;

    font-size: 20px;

    font-weight:400;

    text-decoration: line-through;

}



.product-details .product-available {

    font-size: 12px;

    text-transform: uppercase;

    font-weight: 700;

    color: #D10024;

}



.product-details .description{

    font-size: 15px;

    font-weight:400;

    color: #333;

    margin:0 0 20px 0;

}



.product-details .qut-label{

    display:inline-block;

    margin-right: 30px;

}



.product-details .qut-label span{

    display: inline-block;

    font-weight: 700;

    font-size: 12px;

    text-transform: uppercase;

    margin-right: 15px;

    margin-bottom: 0px;

}



.product-details .product-btn{

    border:2px solid transparent;

    padding:12px 30px;

    color:#fff;

    background:var(--accent);

    text-transform: uppercase;

    font-weight: 700;

    border-radius: 40px;

    position: relative;

    transition: 0.2s all;

}



.product-details .product-btn:hover{

    background-color: #fff;

    color: #D10024;

    border-color: #D10024;

}

.product-details .product-link li a{

    color:#D10024;

}



/*----------------------------*\

   /Product Page

\*----------------------------*/



/*----------------------------*\

   /Single Product Page Start

\*----------------------------*/



.single-product-container{

    padding: 25px 0;

    min-height: 700px;

}

.single-product-container .product-image{

    text-align: center;



}

.single-product-container .product-image img{

    width: 100%;

}

.single-product-container .product-content{

}

.single-product-container .product-content .title{

    font-size: 25px;

    margin: 0 0 10px;

}

.single-product-container .product-content .price{

    font-size: 23px;

    margin: 0 0 5px;

}

.single-product-container .product-content .description{

    font-size: 15px;

    margin: 0 0 20px;

    letter-spacing: 0.5px;

}

.single-product-container .product-content a{

    font-size: 15px;

    font-weight: 600;

    margin: 0 10px 0 0;

    text-transform: uppercase;

    color: #fff;

    background-color: #df3500;

    padding: 7px 15px;

    display: inline-block;

    border: 3px solid #df3500;

    border-radius: 20px;

    transition: all 0.3s;

}



.single-product-container .product-content a:hover{

    background-color: #fff;

    color: #df3500;

}



/*----------------------------*/

   /*Single Product Page End*/

/*----------------------------*/



/*----------------------------*/

   /* Cart And Wishlist Page CSS Start */

/*----------------------------*/



.product-cart-container,

.product-wishlist-container{

    padding: 20px 0;

    min-height: 750px;

}





.empty-result{

    font-size: 16px;

    padding: 20px;

    text-align: center;

    background-color: rgba(0,0,0,0.05);

    border-radius: 20px;

}



/*----------------------------*/

/* Cart And Wishlist Page CSS Start */

/*----------------------------*/





/*----------------------------*/

/* Left Sidebar CSS Start */

/*----------------------------*/



.left-sidebar{

    border: 1px solid rgba(0,0,0,0.1);

    padding: 15px;

}



.left-sidebar h3{

    font-size: 18px;

    padding: 0 0 7px;

    margin: 0 0 10px;

    border-bottom: 1px solid rgba(0,0,0,0.1);

}



.left-sidebar ul li a{

    color: #999;

    font-size: 15px;

    margin: 0 0 5px;

    display: inline-block;

    transition: all 0.3s;

}



.left-sidebar ul li a:hover{

    color: #555;

}



/*----------------------------*/

/* Left Sidebar CSS End */

/*----------------------------*/





/* user-profile form css */

/* ==================================== */



#user_profile-content {

    padding: 40px 0;

    min-height: 700px;

}





#user_profile-content table{

    width:100%;

    background:#f3f3f3;

    padding:20px 20px;

    border-radius:10px 10px;

    margin:0 0 30px;

}



#user_profile-content .modify-btn{

    color: #fff;

    background-color: #DF3500;

    display: inline-block;

}







/*----------------------------*\

   /user-profile Page End

\*----------------------------*/



/*----------------------------*\

	Pagination CSS Start

\*----------------------------*/

.pagination-outer{ text-align: center; }

.pagination{

    display: inline-flex;

}

.pagination li a.page-link{

    color: #fff;

    background-color: #2C3A47;

    font-size: 18px;

    font-weight: 500;

    margin: 0 5px;

    border-radius: 0;

    border: none;

    display: block;

    overflow: hidden;

    position: relative;

    z-index: 1;

    transition: all 0.3s ease;

}

.pagination li.active a.page-link,

.pagination li a.page-link:hover,

.pagination li.active a.page-link:hover{

    color: #fff;

    background-color: #2C3A47;

    text-shadow: 0 0 3px #2C3A47;

}

.pagination li a.page-link:before{

    content: '';

    background-color: #DF3500;

    height: 150%;

    width: 120%;

    position: absolute;

    left: -10%;

    top: -150%;

    z-index: -1;

    transition: all 0.3s ease 0s;

    clip-path: polygon(0 0, 50% 100%, 100% 0);

}

.pagination li.active a.page-link:before,

.pagination li a.page-link:hover:before{

    top: 0;

}

/*----------------------------*\

	Pagination CSS End

\*----------------------------*/



/*----------------------------*\

    Breadcrumb CSS 

\*----------------------------*/

.breadcrumb{

    background-color: transparent;

    padding: 0;

}



.breadcrumb li{

    font-size: 16px;

}



.breadcrumb li a{

    color: #000;

    transition: all 0.3s ease;

}



.breadcrumb li a:hover{

    color: #DF3500;

}



/*----------------------------*\

	Footer

\*----------------------------*/

#footer{

    color: #fff;

    background-color: #31708f;

    padding: 30px 0 0;

}



#footer h3{

    color: #fff;

    font-size: 15px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin: 0 0 10px;

}

#footer h3:after{

    content: '';

    display: block;

    clear: both;

    background-color: #fff;

    height: 2px;

    width: 100px;

    margin: 10px 0 0;

}



#footer p{

    font-size: 14px;

    letter-spacing: 0.5px;

}

#footer a{

    color: #fff;

}

#footer .menu-list{

    margin: 0 0 20px;

}

#footer .menu-list li{

    margin: 0 0 5px;

}



#footer .menu-list li a{

    color: #fff;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    border-bottom: 1px solid #fff;

    display: inline-block;

    transition: all 0.3s;

}



#footer .menu-list li i{

    display: inline-block;

    width: 15px;

    font-size: 18px;

    margin: 0 10px 0 0;

    vertical-align: top;

}

#footer .menu-list li span{

    display: inline-block;

    text-transform: capitalize;

    letter-spacing: 0.5px;

    text-align: left;

    padding: 0;

    width: calc(100% - 30px);

    margin: 0 0 5px;

}



#footer .menu-list li a:hover{

    text-shadow: 0 0 5px #000;

}



#footer span{

    text-align: center;

    display: block;

    padding: 10px 0;

}





/*----------------------------*\

	/Footer

\*----------------------------*/

input.toggle-checkbox{

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    background-color: transparent;

    border-radius: 10px;

    height: 14px;

    width: 25px;

    border: 1px solid #999;

    vertical-align: -2px;

    margin: 0 3px 0 0;

    cursor: pointer;

    position: relative;

    transition: all 0.3s ease;

            

}



input.toggle-checkbox:focus{

    outline: none;

}



input.toggle-checkbox:checked{

    background-color: green;

}





input.toggle-checkbox:before{

    content: '';

    transform: rotate(-45deg);

    position: absolute;

    left: 0;

    top: 0;

    transition: all 0.3s ease;

    opacity: 1;

    border: none;

    background-color: green;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    top: 1px;

    left: 1px;

    transform: translateX(0) translateY(0) rotate(0);

}



input.toggle-checkbox:checked:before{

    background-color: #fff;

    left: 11px;

}





/*payment success page css*/



.payment-response{

    padding: 50px 0;

    text-align: center;

}

.payment-response .panel i{

    font-size: 100px;

    display: block;

    margin: 0 0 20px;

}
/* ====================================
   Festival Offer Images
   Rakshabandhan + 15 August
   ==================================== */
.festival-offer-section{
    padding: 18px 0 28px;
    background: #fff;
}

.festival-offer-heading{
    text-align: center;
    margin-bottom: 18px;
}

.festival-offer-heading h2{
    margin: 0;
    color: #1d1d1d;
    font-size: 28px;
    font-weight: 700;
    text-transform: capitalize;
}

.festival-offer-heading h2:after{
    content: '';
    display: block;
    width: 55px;
    height: 3px;
    margin: 9px auto 0;
    background: var(--accent, #f26a21);
    border-radius: 10px;
}

.festival-offer-heading p{
    margin: 8px 0 0;
    color: #777;
    font-size: 14px;
}

.festival-offer-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.festival-offer-card{
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    background: #f7f7f7;
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.festival-offer-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.14);
    text-decoration: none;
}

.festival-offer-card img{
    width: 100%;
    aspect-ratio: 2 / 1;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (max-width: 767px){
    .festival-offer-section{
        padding: 14px 0 22px;
    }

    .festival-offer-heading{
        margin-bottom: 14px;
    }

    .festival-offer-heading h2{
        font-size: 22px;
        line-height: 1.25;
    }

    .festival-offer-heading p{
        font-size: 13px;
        padding: 0 12px;
    }

    .festival-offer-grid{
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .festival-offer-card{
        border-radius: 13px;
    }
}

/* =========================================================
   POPULAR PRODUCTS
   ========================================================= */

.popular-products {
    padding: 40px 0;
}

.popular-products .section-head {
    margin-bottom: 28px;
}


/* Product Row */

.popular-product-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}


/* Product Column */

.popular-product-col {
    width: 25%;
    padding: 0 8px;
    margin-bottom: 25px;
}


/* Product Card */

.popular-product-card {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.popular-product-card:hover {
    transform: translateY(-4px);
}


/* Product Image */

.popular-product-card .product-image {
    width: 100%;
    height: 330px;
    overflow: hidden;
    border-radius: 10px;
    background: #f7f7f7;
}

.popular-product-card .product-image .pic-1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.popular-product-card:hover .product-image .pic-1 {
    transform: scale(1.04);
}


/* Product Content */

.popular-product-card .product-content {
    padding: 12px 8px 5px;
    text-align: center;
}


/* Product Title */

.popular-product-card .product-content .title {
    margin: 0;
    min-height: 42px;
    line-height: 20px;
    font-size: 15px;
    font-weight: 500;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.popular-product-card .product-content .title a {
    color: #222;
    text-decoration: none;
}

.popular-product-card .product-content .title a:hover {
    text-decoration: none;
}


/* Price */

.popular-product-card .price {
    margin-top: 5px;
}

.popular-product-card .price h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}


/* Product Buttons */

.popular-product-card .product-button-group {
    opacity: 0;
    transition: all 0.3s ease;
}

.popular-product-card:hover .product-button-group {
    opacity: 1;
}


/* No Product */

.no-products-message {
    width: 100%;
    text-align: center;
    padding: 30px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .popular-product-col {
        width: 25%;
    }

    .popular-product-card .product-image {
        height: 250px;
    }

}


/* =========================================================
   MOBILE
   2 PRODUCTS IN ONE ROW
   ========================================================= */

@media (max-width: 767px) {

    .popular-products {
        padding: 30px 0;
    }

    .popular-product-row {
        margin: 0 -5px;
    }

    .popular-product-col {
        width: 50%;
        padding: 0 5px;
        margin-bottom: 18px;
    }

    .popular-product-card .product-image {
        height: 210px;
        border-radius: 8px;
    }

    .popular-product-card .product-content {
        padding: 8px 4px 5px;
    }

    .popular-product-card .product-content .title {
        font-size: 13px;
        line-height: 18px;
        min-height: 36px;
    }

    .popular-product-card .price h3 {
        font-size: 16px;
    }

    /* Mobile पर buttons हमेशा usable रहें */
    .popular-product-card .product-button-group {
        opacity: 1;
    }

}
/* =========================================================
   POPULAR PRODUCTS - FINAL IMAGE HOVER FIX
   ========================================================= */

/* Product image wrapper */
.popular-product-card .product-image {
    position: relative;
    overflow: hidden;
    background: #fff;
}

/* Normal image position */
.popular-product-card .product-image .pic-1 {
    position: absolute !important;

    width: 100% !important;
    height: 100% !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    object-fit: cover !important;

    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;

    transition: transform 0.3s ease;
}

/* Hover image */
.popular-product-card:hover .product-image .pic-1 {
    opacity: 1 !important;
    visibility: visible !important;

    transform: translate(-50%, -50%) scale(1.04) !important;
}


/* =========================================================
   PRODUCT BUTTONS
   ========================================================= */

.popular-product-card .product-button-group {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    z-index: 20 !important;
}


/* Buttons visible on hover */
.popular-product-card:hover .product-button-group {
    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   PREVENT IMAGE FROM BEING AFFECTED BY OTHER PRODUCT CSS
   ========================================================= */

.popular-product-card .product-image img.pic-1 {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
}

.popular-product-card:hover .product-image img.pic-1 {
    transform: translate(-50%, -50%) scale(1.04) !important;
}