:root {
    /* SCI Logo Based Color Palette */
    --sci-primary: #c0333d;      /* Main Red from Logo */
    --sci-dark: #8e242c;         /* Darker Red for gradient */
    --sci-light: #fdecee;        /* Very Light Red Background */
    --sci-accent: #f39200;       /* Orange Accent from Logo */
    --sci-dark-gray: #2b2b2b;    /* Text Support */
}

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

/* Background Colors */
.bg-sci-primary {
    background-color: var(--sci-primary);
}

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

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

/* Text Colors */
.text-sci-primary {
    color: var(--sci-primary);
}

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

/* Border */
.border-sci-primary {
    border-color: var(--sci-primary);
}

/* Hero Gradient */
.hero-gradient {
    background: linear-gradient(135deg, var(--sci-primary) 0%, var(--sci-dark) 100%);
    /* background: linear-gradient(135deg, #e64248 100%, #e64248 100%); */

}

/* Cards Hover */
.info-card:hover {
    transform: translateY(-6px);
    transition: all 0.3s ease;
}

/* Logo */
.logo {
    width: 160px;
    height: auto;
}

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

    div#appointment-form {
        padding-left: 0px;
    }
}

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

/* Buttons Hover Effect */
.btn-primary-hover:hover {
    background-color: var(--sci-dark);
}

p.text-sm.text-white-600 {
    color: #fff;
}

.w-16.h-16.bg-blue-100.rounded-full.flex.items-center.justify-center.mx-auto.mb-4.group-hover\:bg-sci-blue.group-hover\:text-white.transition {
    background: #f39200;
    color: #ffff;
}

p.text-xl.text-black-100.mb-8 {
    color: #000;
}
p.text-sm.text-black-100 {
    color: #000;
}

.w-12.h-12.rounded-full.border-2.border-sci-blue.bg-white.flex.items-center.justify-center.text-sci-blue.font-bold {
    background: #004a99;
}

h2.text-3xl.font-bold.text-sci-white {
    color: #fff;
}


span.text-4xl.font-extrabold.mr-4.text-white-800 {
    color: #fff;
}

span.ml-4.text-white-500 {
    color: #ffd;
}

img.h-10.mx-auto.md\:mx-0.mb-4.brightness-0.invert {
    width: 147px;
    height: 93px;
}



.hover\:bg-blue-800:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(243 146 0) !important;
}