/* ==============================
   Visual Enhancements
   Glossy gradient backgrounds + card glow effects
   ============================== */

/* --- 1. GLOSSY GRADIENT MESH BACKGROUNDS --- */

/* Hero gradient sections */
section[style*="#1D3557"],
.page-section[style*="#1D3557"],
.home-section[style*="#1D3557"] {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(76,175,80,0.10) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 15%, rgba(23,162,184,0.08) 0%, transparent 40%),
        linear-gradient(180deg, #1D3557 0%, #31587a 100%) !important;
}

/* Dark sections - #31587a */
section[style*="background: #31587a"],
section[style*="background:#31587a"],
.page-section[style*="background: #31587a"] {
    background:
        radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 15% 60%, rgba(76,175,80,0.09) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 25%, rgba(23,162,184,0.07) 0%, transparent 45%),
        #31587a !important;
}

/* Mid-dark sections - #457b9d */
section[style*="background: #457b9d"],
section[style*="background:#457b9d"],
.page-section[style*="background: #457b9d"] {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 70%, rgba(255,193,7,0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 90% 30%, rgba(102,187,106,0.07) 0%, transparent 45%),
        #457b9d !important;
}

/* #31587a sections (formerly #1a2332) */
section[style*="background: #31587a"],
section[style*="background:#31587a"] {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 25% 70%, rgba(76,175,80,0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 20%, rgba(255,193,7,0.05) 0%, transparent 40%),
        #31587a !important;
}

/* Nav bar - glossy top edge + accent underline */
nav[style*="#1D3557"],
nav[style*="background-color: #1D3557"] {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(102,187,106,0.06) 0%, transparent 60%),
        #1D3557 !important;
    border-bottom: 1px solid rgba(102,187,106,0.12) !important;
}

/* Light sections - #f1faee */
section[style*="#f1faee"],
.page-section[style*="#f1faee"] {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(76,175,80,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(23,162,184,0.03) 0%, transparent 50%),
        #f1faee !important;
}

/* Pale mint sections - #cdeae5 */
section[style*="#cdeae5"],
.page-section[style*="#cdeae5"] {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(76,175,80,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(23,162,184,0.03) 0%, transparent 50%),
        #cdeae5 !important;
}

/* Soft blue accent sections (borders etc) */
section[style*="rgba(119,171,189,0.3)"] {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 60%, rgba(76,175,80,0.07) 0%, transparent 45%),
        #457b9d !important;
}


/* --- 2. GLOSSY CARD EFFECTS --- */

/* Cards with #31587a bg and 12px radius */
div[style*="background: #31587a"][style*="border-radius: 12px"],
div[style*="background:#31587a"][style*="border-radius: 12px"] {
    transition: all 0.3s ease !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%),
        #31587a !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}
div[style*="background: #31587a"][style*="border-radius: 12px"]:hover,
div[style*="background:#31587a"][style*="border-radius: 12px"]:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 40%),
        #457b9d !important;
    border-color: rgba(102,187,106,0.3) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 20px rgba(102,187,106,0.1) !important;
}

/* Product cards - glossy sheen */
.product-card {
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 35%),
        #31587a !important;
}
.product-card:hover {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 35%),
        #457b9d !important;
}

/* Green product card - green glow */
.product-card-green:hover {
    border-color: rgba(76,175,80,0.35) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3), 0 0 30px rgba(76,175,80,0.12) !important;
}

/* Gold product card - gold glow */
.product-card-gold:hover {
    border-color: rgba(255,193,7,0.35) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3), 0 0 30px rgba(255,193,7,0.10) !important;
}

/* Blue product card - teal glow */
.product-card-blue:hover {
    border-color: rgba(23,162,184,0.35) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3), 0 0 30px rgba(23,162,184,0.12) !important;
}

/* Cards with rgba(119,171,189,0.3) border */
div[style*="border: 1px solid rgba(119,171,189,0.3)"][style*="border-radius: 12px"] {
    transition: all 0.3s ease !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 35%),
        #31587a !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
div[style*="border: 1px solid rgba(119,171,189,0.3)"][style*="border-radius: 12px"]:hover {
    border-color: rgba(102,187,106,0.25) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25), 0 0 18px rgba(102,187,106,0.08) !important;
}

/* Blog/portfolio cards with semi-transparent bg */
div[style*="rgba(255,255,255,0.03)"][style*="border-radius: 12px"] {
    transition: all 0.3s ease !important;
}
div[style*="rgba(255,255,255,0.03)"][style*="border-radius: 12px"]:hover {
    border-color: rgba(102,187,106,0.25) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 0 18px rgba(102,187,106,0.08) !important;
}

/* Back to top button */
.link-to-top {
    background: #1D3557 !important;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 12px rgba(29,53,87,0.4) !important;
}
.link-to-top::before {
    background: #1D3557 !important;
    box-shadow: none !important;
}
.link-to-top i,
.link-to-top .mi-arrow-up {
    color: #fff !important;
    position: relative;
    z-index: 2;
}

/* Testimonial / glass cards */
div[style*="backdrop-filter"][style*="border-radius: 12px"] {
    transition: all 0.3s ease !important;
}
div[style*="backdrop-filter"][style*="border-radius: 12px"]:hover {
    border-color: rgba(102,187,106,0.25) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25), 0 0 15px rgba(102,187,106,0.07) !important;
}