:root {
    /* NEW COLOR PALETTE */
    --sci-primary: #0088a5;      /* Main Teal Blue */
    --sci-dark: #03407f;         /* Deep Blue */
    --sci-light: #e6f6fa;        /* Light Teal Background */
    --sci-accent: #00bcd4;       /* Accent Cyan */
    --sci-dark-gray: #2b2b2b;

    --sci-white: #ffffff;
}

/* Global */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* ===========================
   BACKGROUNDS
=========================== */

.bg-sci-primary {
    background-color: var(--sci-primary) !important;
}

.bg-sci-dark {
    background-color: var(--sci-dark) !important;
}

.bg-sci-light {
    background-color: var(--sci-light) !important;
}

.bg-sci-accent {
    background-color: var(--sci-accent) !important;
}

/* Override Tailwind blue */
.bg-sci-blue {
    background-color: var(--sci-dark) !important;
}

.bg-sci-light-blue {
    background-color: var(--sci-light) !important;
}


/* ===========================
   TEXT COLORS
=========================== */

.text-sci-primary {
    color: var(--sci-primary) !important;
}

.text-sci-dark {
    color: var(--sci-dark) !important;
}

.text-sci-accent {
    color: var(--sci-accent) !important;
}

.text-sci-blue {
    color: var(--sci-dark) !important;
}

.text-sci-white {
    color: #ffffff !important;
}


/* ===========================
   BORDER COLORS
=========================== */

.border-sci-primary {
    border-color: var(--sci-primary) !important;
}

.border-sci-blue {
    border-color: var(--sci-dark) !important;
}


/* ===========================
   HERO GRADIENT
=========================== */

.hero-gradient {
    background: linear-gradient(
        135deg,
        var(--sci-primary) 0%,
        var(--sci-dark) 100%
    );
}


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

.btn-sci-primary {
    background-color: var(--sci-primary);
    color: #fff;
}

.btn-sci-primary:hover {
    background-color: var(--sci-dark);
}

button.bg-sci-primary:hover {
    background-color: var(--sci-dark) !important;
}


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

.info-card {
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-6px);
}


/* ===========================
   ICON CIRCLES
=========================== */

.icon-circle-primary {
    background-color: var(--sci-primary);
    color: white;
}

.icon-circle-accent {
    background-color: var(--sci-accent);
    color: white;
}


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

.logo {
    width: 160px;
    height: auto;
}

@media (max-width:768px) {
    .logo {
        width: 120px;
    }
}


/* ===========================
   FORM
=========================== */

#appointment-form {
    padding-left: 30px;
}

@media (max-width:768px) {
    #appointment-form {
        padding-left: 0;
    }
}


/* ===========================
   CALCULATOR BUTTON ACTIVE
=========================== */

.calc-btn.border-sci-primary {
    border-color: var(--sci-primary) !important;
}

.calc-btn.bg-sci-primary {
    background-color: var(--sci-primary) !important;
    color: #fff;
}


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

footer {
    background: linear-gradient(
        135deg,
        var(--sci-primary),
        var(--sci-dark)
    );
}


/* ===========================
   MOBILE CTA
=========================== */

.mobile-call {
    background-color: var(--sci-primary);
}

.mobile-call:hover {
    background-color: var(--sci-dark);
}


/* ===========================
   HOVER EFFECTS
=========================== */

.hover-sci:hover {
    background-color: var(--sci-primary);
    color: white;
}

.hover-sci-dark:hover {
    background-color: var(--sci-dark);
    color: white;
}


/* ===========================
   STAT BOX
=========================== */

.stat-box {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(6px);
}


/* ===========================
   REVIEW SECTION
=========================== */

.review-rating {
    color: var(--sci-accent);
}


/* ===========================
   FAQ
=========================== */

details summary:hover {
    color: var(--sci-primary);
}


/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--sci-primary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sci-dark);
}