/* ==========================================================
   JANMASHTAMI FESTIVAL THEME
   Devghar Store
   Version : 1.0
========================================================== */

/* ==========================================
   COLOR PALETTE
========================================== */

:root{

    --krishna-blue:#0B3C8A;

    --royal-blue:#1565C0;

    --peacock:#00897B;

    --gold:#D4AF37;

    --light-gold:#FFD54F;

    --cream:#FFFDF7;

    --vrindavan:#4CAF50;

    --dark:#1D2A44;

    --white:#ffffff;

}

/* ==========================================
   BODY
========================================== */

body{

    background:

    radial-gradient(

        circle at 15% 20%,

        rgba(11,60,138,.025),

        transparent 25%

    ),

    radial-gradient(

        circle at 85% 70%,

        rgba(0,137,123,.03),

        transparent 25%

    ),

    radial-gradient(

        circle at 45% 45%,

        rgba(212,175,55,.02),

        transparent 20%

    ),

    var(--cream);

    color:#36454F;

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

}

body a{

    text-decoration:none;

}

body a:hover{

    text-decoration:none;

}

/* ==========================================
   HEADER
========================================== */

.devghar-header{

    background:

    linear-gradient(

        135deg,

        var(--krishna-blue),

        var(--royal-blue),

        var(--peacock)

    ) !important;

    border-bottom:

    3px solid var(--gold);

    box-shadow:

    0 8px 25px rgba(0,0,0,.15);

}

.devghar-header::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--gold),

        var(--light-gold),

        var(--gold),

        transparent

    );

}

.dev-icon{

    background:white;

    border:

    2px solid var(--gold);

    border-radius:14px;

    padding:8px;

    box-shadow:

    0 8px 20px rgba(0,0,0,.12);

}

.dev-icon img{

    filter:

    drop-shadow(

        0 5px 8px rgba(0,0,0,.15)

    );

}

.devghar-menu a,

.devghar-menu-left a{

    color:white !important;

    font-weight:500;

    transition:.35s;

    position:relative;

}

.devghar-menu a:hover,

.devghar-menu-left a:hover{

    color:var(--light-gold)!important;

}

.devghar-menu a::after,

.devghar-menu-left a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-5px;

    width:0;

    height:2px;

    background:var(--light-gold);

    transition:.35s;

    transform:translateX(-50%);

}

.devghar-menu a:hover::after,

.devghar-menu-left a:hover::after{

    width:75%;

}

.dev-search-box{

    background:white;

    border:

    2px solid var(--gold);

    border-radius:50px;

    overflow:hidden;

}

.dev-search-box input{

    border:none;

    background:transparent;

}

.dev-search-box button{

    background:

    linear-gradient(

        135deg,

        var(--royal-blue),

        var(--krishna-blue)

    );

    color:white;

    border:none;

}

.dev-search-box button:hover{

    background:

    linear-gradient(

        135deg,

        var(--gold),

        var(--light-gold)

    );

    color:#222;

}

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

.btn-primary,
.btn-success,
.btn-info,
.shop-btn,
.banner-btn,
.dg-view-btn,
.dg-why-btn,
.dg-festival-btn,
.festival-view-btn,
.dg-enquiry-form-box button,
.dg-review-btn,
.dg-auth-btn,
.dg-checkout-btn,
.dg-place-order-btn,
.continue-btn,
.orders-btn,
.dg-cart-btn,
.dg-cart-qty button,
.dg-shop-btn,
.dg-buy-btn,
.dg-sin-cart-btn,
.dg-wa-btn,
.dg-enquiry-btn,
.dg-inquiry-btn{

    background:linear-gradient(
        135deg,
        var(--royal-blue),
        var(--krishna-blue)
    ) !important;

    border:2px solid var(--gold) !important;

    color:#fff !important;

    font-weight:600;

    border-radius:10px;

    transition:.35s;

    box-shadow:
    0 8px 20px rgba(21,101,192,.18);

}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.shop-btn:hover,
.banner-btn:hover,
.dg-view-btn:hover,
.dg-why-btn:hover,
.dg-festival-btn:hover,
.festival-view-btn:hover,
.dg-enquiry-form-box button:hover,
.dg-review-btn:hover,
.dg-auth-btn:hover,
.dg-checkout-btn:hover,
.dg-place-order-btn:hover,
.continue-btn:hover,
.orders-btn:hover,
.dg-cart-btn:hover,
.dg-cart-qty button:hover,
.dg-shop-btn:hover,
.dg-buy-btn:hover,
.dg-sin-cart-btn:hover,
.dg-wa-btn:hover,
.dg-enquiry-btn:hover,
.dg-inquiry-btn:hover{

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--light-gold)
    ) !important;

    color:#1D2A44 !important;

    transform:translateY(-3px);

    box-shadow:
    0 12px 25px rgba(212,175,55,.30);

}

/* ==========================================
   PRODUCT CARDS
========================================== */

.product-card,
.card,
.dg-product-card,
.dg-cart-item,
.dg-wishlist-card,
.dg-review-card,
.dg-similar-card,
.dg-feature-box,
.dg-spec-card,
.dg-contact-info-box,
.dg-contact-form-box,
.dg-order-summary,
.dg-checkout-card,
.dg-orders-card,
.dg-category-card{

    background:#fff;

    border:

    2px solid rgba(0,137,123,.18);

    border-radius:18px;

    transition:.35s;

    overflow:hidden;

    box-shadow:

    0 10px 25px rgba(0,0,0,.05);

}

.product-card:hover,
.card:hover,
.dg-product-card:hover,
.dg-cart-item:hover,
.dg-wishlist-card:hover,
.dg-review-card:hover,
.dg-similar-card:hover,
.dg-feature-box:hover,
.dg-spec-card:hover,
.dg-contact-info-box:hover,
.dg-contact-form-box:hover,
.dg-order-summary:hover,
.dg-checkout-card:hover,
.dg-orders-card:hover,
.dg-category-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:

    0 18px 40px rgba(11,60,138,.15);

}

/* ==========================================
   PRODUCT IMAGES
========================================== */

.dg-product-image,
.dg-main-image img,
.dg-thumb img,
.dg-cart-image img,
.dg-wishlist-image img,
.dg-similar-card img{

    border-radius:14px;

    transition:.4s;

    background:#fff;

}

.dg-product-image:hover,
.dg-main-image img:hover,
.dg-thumb img:hover,
.dg-cart-image img:hover,
.dg-wishlist-image img:hover,
.dg-similar-card img:hover{

    transform:scale(1.04);

}

/* ==========================================
   PRODUCT PRICE
========================================== */

.dg-price,
.dg-new-price,
.dg-cart-price,
.dg-total,
.dg-order-total,
.dg-similar-price{

    color:var(--krishna-blue);

    font-weight:700;

    font-size:22px;

}

.dg-old-price,
.dg-mrp{

    color:#888;

    text-decoration:line-through;

}

.dg-offer-badge,
.dg-offer-tag,
.dg-card-badge,
.section-tag,
.cta-tag,
.policy-tag{

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--light-gold)
    ) !important;

    color:#1D2A44 !important;

    border-radius:50px;

    font-weight:700;

}

.dg-rating,
.dg-rating i,
.dg-review-rating i{

    color:var(--gold);

}

/* ==========================================
   HEADINGS & TEXT
========================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.hero-content h1,
.banner-content h2,
.section-heading h2,
.dg-shop-heading h1,
.dg-product-title,
.dg-section-title h2,
.dg-contact-section h2,
.dg-auth-section h1{

    color:var(--krishna-blue);

    font-weight:700;

    position:relative;

    padding-bottom:10px;

}

h1::after,
h2::after,
h3::after,
.dg-section-title h2::after{

    content:"" !important;

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(
        90deg,
        var(--gold),
        transparent
    );

    border-radius:20px;

}

.section-heading h2::before{
    content:"" !important;
}

p{

    color:#555;

    line-height:1.9;

}

/* ==========================================
   FORMS
========================================== */

input,
textarea,
select,
.form-control{

    background:#fff;

    border:2px solid rgba(0,137,123,.25);

    border-radius:12px;

    padding:12px 15px;

    transition:.35s;

    color:#333;

}

input:focus,
textarea:focus,
select:focus,
.form-control:focus{

    border-color:var(--gold);

    box-shadow:

    0 0 12px rgba(212,175,55,.25);

    outline:none;

}

/* ==========================================
   TABLES
========================================== */

table{

    border-radius:14px;

    overflow:hidden;

    border:2px solid rgba(0,137,123,.2);

}

table th{

    background:

    linear-gradient(
        135deg,
        var(--royal-blue),
        var(--krishna-blue)
    );

    color:#fff;

    font-weight:600;

}

table td{

    background:#fff;

    border-color:#eee;

}

/* ==========================================
   ALERTS
========================================== */

.alert-success{

    background:

    linear-gradient(
        135deg,
        #43A047,
        #2E7D32
    );

    color:#fff;

}

.alert-info{

    background:

    linear-gradient(
        135deg,
        var(--royal-blue),
        var(--krishna-blue)
    );

    color:#fff;

}

.alert-warning{

    background:

    linear-gradient(
        135deg,
        var(--gold),
        var(--light-gold)
    );

    color:#222;

}

.alert-danger{

    background:

    linear-gradient(
        135deg,
        #E53935,
        #C62828
    );

    color:#fff;

}

/* ==========================================
   BREADCRUMB
========================================== */

.hero-breadcrumb a,
.dg-breadcrumb a{

    color:var(--royal-blue);

    transition:.3s;

}

.hero-breadcrumb a:hover,
.dg-breadcrumb a:hover{

    color:var(--gold);

}

/* ==========================================
   CART & WISHLIST
========================================== */

.dg-cart-item,
.dg-wishlist-card{

    border-left:

    4px solid var(--gold);

}

.dg-cart-icon{

    background:

    linear-gradient(
        135deg,
        var(--royal-blue),
        var(--krishna-blue)
    );

    color:#fff;

    border-radius:50%;

}

/* ==========================================
   CHECKOUT
========================================== */

.dg-order-summary,
.dg-checkout-card{

    background:#fff;

    border:

    2px solid rgba(0,137,123,.2);

    border-radius:18px;

}

/* ==========================================
   AUTH
========================================== */

.dg-auth-card{

    background:#fff;

    border:

    2px solid rgba(0,137,123,.18);

    border-radius:18px;

    box-shadow:

    0 12px 30px rgba(0,0,0,.06);

}

/* ==========================================
   JANMASHTAMI FOOTER
========================================== */

.dg-footer{

    background:

    linear-gradient(
        180deg,
        #FDFEFF,
        #EEF7FF
    ) !important;

    border-top:

    4px solid var(--gold);

    position:relative;

    overflow:hidden;

}

.dg-footer::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:

    linear-gradient(
        90deg,
        transparent,
        var(--gold),
        transparent
    );

}

.dg-footer h4{

    color:var(--krishna-blue);

    border:none;

}

.dg-footer-links li a{

    color:#444;

    transition:.3s;

}

.dg-footer-links li a:hover{

    color:var(--royal-blue);

    padding-left:8px;

}

.dg-footer-bottom{

    background:#ffffff;

    border-top:

    1px solid rgba(0,0,0,.08);

}

/* ==========================================
   DIVINE GLOW
========================================== */

body::before{

    content:"";

    position:fixed;

    left:-250px;

    top:-250px;

    width:500px;

    height:500px;

    background:

    radial-gradient(

        circle,

        rgba(21,101,192,.08),

        transparent 70%

    );

    pointer-events:none;

    z-index:-1;

}

body::after{

    content:"";

    position:fixed;

    right:-220px;

    bottom:-220px;

    width:450px;

    height:450px;

    background:

    radial-gradient(

        circle,

        rgba(0,137,123,.06),

        transparent 70%

    );

    pointer-events:none;

    z-index:-1;

}

/* ==========================================
   SECTION BACKGROUND
========================================== */

.dg-shop-section,
.dg-feature-section,
.dg-category-section,
.dg-review-section,
.dg-contact-section{

    position:relative;

}

.dg-shop-section::before,
.dg-feature-section::before,
.dg-category-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.75),

        rgba(255,253,247,.95)

    );

    pointer-events:none;

}

/* ==========================================
   GOLD DIVIDER
========================================== */

.section-heading{

    position:relative;

    margin-bottom:50px;

}

.section-heading::after{

    content:"";

    display:block;

    width:120px;

    height:4px;

    margin:18px auto 0;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--gold),

        transparent

    );

    border-radius:30px;

}

/* ==========================================
   PREMIUM HOVER
========================================== */

.product-card,
.dg-product-card{

    overflow:hidden;

}

.product-card::before,
.dg-product-card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transform:skewX(-20deg);

    transition:.7s;

}

.product-card:hover::before,
.dg-product-card:hover::before{

    left:150%;

}

/* ==========================================
   DIVINE GLOW
========================================== */

@keyframes krishnaGlow{

    0%{

        box-shadow:

        0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:

        0 0 18px rgba(212,175,55,.30);

    }

    100%{

        box-shadow:

        0 0 0 rgba(212,175,55,0);

    }

}

.dg-buy-btn,
.shop-btn,
.banner-btn{

    animation:

    krishnaGlow

    3s infinite;

}

.header-action-icon{
    background:#154b9a !important;
}

.header-action-icon:hover{
    background:#fff !important;
    color:#154b9a !important;
}

/* ==========================================
   KRISHNA FLUTE DIVIDER
========================================== */

/*.devghar-header{

    position:relative;

}*/
@media (min-width: 768px) {
    .devghar-header::after{
    
        content:"";
    
        position:absolute;
    
        left:0;
    
        bottom:-2px;
    
        width:100%;
    
        height:18px;
    
        background:
    
        url("flute-divider.png")
    
        center center
    
        repeat-x;
    
        background-size:auto 18px;
    
        pointer-events:none;
    
    }
}

/* ==========================================
   PEACOCK CORNERS
========================================== */

.dg-shop-section{

    position:relative;

}


.category-card::before,
.dg-cart-summary::before,
.dg-shop-section::before{

    content:"";

    position:absolute;

    top:20px;

    left:20px;

    width:90px;

    height:90px;

    background:

    url("peacock-feather.png")

    center/contain

    no-repeat;

    opacity:.12;

    pointer-events:none;

}

.category-card::after,
.dg-cart-summary::after,
.dg-shop-section::after,
.dg-filter-box ul::after{

    content:"";

    position:absolute;

    bottom:20px;

    right:20px;

    width:90px;

    height:90px;

    background:

    url("peacock-feather.png")

    center/contain

    no-repeat;

    transform:rotate(180deg);

    opacity:.12;

    pointer-events:none;

}

/* ==========================================
   DIVINE LIGHT
========================================== */

.hero-banner{

    position:relative;

    overflow:hidden;

}

.hero-banner::before{

    content:"";

    position:absolute;

    left:50%;

    top:-180px;

    transform:translateX(-50%);

    width:700px;

    height:700px;

    background:

    radial-gradient(

        circle,

        rgba(255,215,0,.18),

        rgba(255,215,0,.06),

        transparent 70%

    );

    pointer-events:none;

}

/* ==========================================
   DIVINE SPARKLES
========================================== */

@keyframes sparkle{

    0%{

        opacity:.25;

        transform:translateY(0);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.25;

        transform:translateY(-15px);

    }

}

.dg-golden-star{

    animation:sparkle 2.8s infinite ease-in-out;

}

/* ==========================================
   PEACOCK BORDER
========================================== */

.dg-category-card{

    position:relative;

}

.dg-category-card::after{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid transparent;

    border-image:

    linear-gradient(

        135deg,

        #1565C0,

        #00897B,

        #D4AF37

    ) 1;

    opacity:.35;

    pointer-events:none;

}

/* ==========================================
   TEMPLE HOVER
========================================== */

.product-card:hover,

.dg-product-card:hover{

    transform:

    translateY(-8px)

    scale(1.02);

}

.contact-info span,
.mobile-bottom-nav a,
.mobile-menu-btn, 
.mobile-search-btn,
.mobile-contact-btn a,
.con-txt,
.contact-icon{
    color: white;
}

.dg-festival-hero{
    background: linear-gradient(54deg, rgb(129 255 220), rgb(0 103 255)) !important;
}

.dg-festival-arch-card:hover{
    box-shadow: 0 20px 45px rgb(0 116 255 / 83%) !important;
}

.deity-card img{
    box-shadow: 0 8px 25px rgb(0 77 255 / 25%) !important;
}

.dg-festival-arch-card:hover .dg-festival-arrow,
.contact-btn, .story-btn, .dg-wish-cart-btn,
.account-sidebar ul li.active a, .account-sidebar ul li a:hover,
.profile-image-edit,
.mega-category:hover, .mega-category.active{
    background:linear-gradient(
        54deg,
        rgb(0,255,224),
        rgb(0,39,255)
    ) !important;
}

.contact-btn:hover, .story-btn:hover, 
.dg-wish-cart-btn:hover{
    background:linear-gradient(
        54deg,
        rgb(0,39,255),
        rgb(0,255,224)
    ) !important;
}

.dg-festival-arch-card:hover h3,
.mega-heading,
.dg-mega-menu a,
.hero-breadcrumb span,
.dg-user-dropdown a{
    color:#005aff !important;
}

.festival-date,
.mobile-bottom-nav,
.devghar-marquee,
.dg-contact-hero,
.contact-pag-icon,
.dg-contact-cta,
.choose-icon,
.journey-icon,
.mission-icon,
.dg-about-cta,
.dg-policy-hero,
.dg-floating-share button{
    background: linear-gradient(135deg, #004dff, #00ff91) !important;
}

.choose-icon,
.journey-icon,
.mission-icon,
.contact-icon:hover{
    color:#ffed00; /* yellow */
}

.experience-box h2,
.story-features i,
.policy-card h2{
    color:#0e00ff; /* blue */
}

.hero-breadcrumb{
    background: rgba(255, 255, 255, 1) !important;
}



@media (max-width: 480px) {
    .dev-icon img {
        width: 120px;
    }
}


.upcoming-card::after,
.dg-card-inner::after{
    position: absolute;
    content: "";
    top: 240px;
    right: -6px;
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url(matki.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.dg-footer::after{
    position: absolute;
    content: "";
    bottom: 0px;
    right: 39px;
    display: inline-block;
    width: 200px;
    height: 200px;
    background-image: url(matki.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}
.devghar-marquee{
    border-top: 3px solid #1565c0;
}

.mobile-bottom-nav span{
    background: white;
    border-radius: 50%;
    padding: 9px;
    width: auto;
    height: auto;
}