html,body {    max-width: 100%;    overflow-x: hidden;    position: relative;}/* HEADER SECTION CUSTOMIZATIONS */#header {    border-bottom: 1px solid rgba(255, 255, 255, 0.2);    position: fixed;    width: 100%;    z-index: 50;    /* IMPORTANT: Keep the main header transparent with NO blur to avoid breaking the fixed menu */    background-color: transparent !important;    backdrop-filter: none !important;    -webkit-backdrop-filter: none !important;}/* Create a background layer using ::before for the blur effect */#header::before {    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: -1;    /* Keep it behind the header's icons and menus */    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;    pointer-events: none;    /* Let clicks pass through */}/* Class applied by JS when at the TOP of the page (Targeting the ::before element) */#header.header-solid-black::before {    background-color: #000000 !important;    backdrop-filter: none !important;    -webkit-backdrop-filter: none !important;}/* Class applied by JS when SCROLLING (Targeting the ::before element) */#header.header-glass-blur::before {    background-color: rgba(0, 0, 0, 0.6) !important;    /* Semi-transparent black */    backdrop-filter: blur(12px) saturate(180%) !important;    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;}/* IMPORTANT: Completely delete the old header#header::before block! */.header-wrapper i.bi {    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));}.bi-chevron-right {    color: #818181;}header a,footer a {    color: #b88f44;}/* This ensures the gold color wins over the 'inquire-header-wrapper' default */.header-wrapper.text-\[\#D4AF37\] {    color: #D4AF37 !important;}/* This forces the inner container and icons to inherit that gold color */.header-wrapper.text-\[\#D4AF37\] .relative.flex,.header-wrapper.text-\[\#D4AF37\] i,.header-wrapper.text-\[\#D4AF37\] svg {    color: inherit !important;    fill: currentColor;}/* Adds a subtle metallic depth to the gold icons */.header-wrapper i {    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2),        /* Subtle highlight on top */        0px -1px 0px rgba(0, 0, 0, 0.3);    /* Subtle shadow underneath */}/* If not using Tailwind, add this to your stylesheet */#vid-top {    width: 100%;    height: auto;    /* Overrides the height="650" attribute */    aspect-ratio: 16 / 9;    /* Ensures standard video proportions */    object-fit: cover;    /* Ensures the video fills the area without stretching */}@media (max-width: 768px) {    #vid-top {        aspect-ratio: 4 / 3;        /* Better for mobile viewing */        max-height: 50vh;        /* Prevents the video from taking up the whole screen */    }}/* ===================================================================================== * //*Abount Section Home Page*/.about-section {    position: relative;    overflow: hidden;    background: #fff;    padding: 90px 20px;}.about-container {    position: relative;    z-index: 2;    max-width: 1280px;    margin: auto;}.about-bg-text {    position: absolute;    top: 0;    left: 50%;    transform: translateX(-50%);    width: 100%;    text-align: center;    pointer-events: none;    user-select: none;    z-index: 1;}.about-bg-text h2 {    margin: 0;    font-size: 220px;    font-weight: 900;    line-height: .8;    color: #f5f5f5;    text-transform: uppercase;    white-space: nowrap;}.about-title {    text-align: center;    font-size: 54px;    color: #203b84;    font-weight: 700;    text-transform: uppercase;    margin-bottom: 35px;}.about-description {    max-width: 920px;    margin: auto;    text-align: center;    font-size: 20px;    line-height: 1.8;    color: #444;}/*Large Desktop*/@media(min-width:1600px) {    .about-bg-text h2 {        font-size: 250px;    }}/*Tablet*/@media(max-width:991px) {    .about-section {        padding: 70px 25px;    }    .about-bg-text h2 {        font-size: 140px;    }    .about-title {        font-size: 40px;        margin-bottom: 30px;    }    .about-description {        font-size: 18px;        line-height: 1.8;    }}/*Mobile*/@media(max-width:768px) {    .about-section {        padding: 60px 20px;    }    .about-bg-text h2 {        font-size: 80px;    }    .about-title {        font-size: 28px;        line-height: 1.4;        margin-bottom: 25px;    }    .about-description {        font-size: 16px;        line-height: 1.8;    }}/*Home Page Why Section */.why-section {    position: relative;    overflow: hidden;    background: #fff;    padding: 90px 20px;}.why-container {    max-width: 1280px;    margin: auto;    position: relative;    z-index: 2;}.why-bg-text {    position: absolute;    top: 0;    left: 50%;    transform: translateX(-50%);    width: 100%;    text-align: center;    pointer-events: none;    z-index: 1;}.why-bg-text h2 {    margin: 0;    font-size: 220px;    font-weight: 900;    color: #f5f5f5;    line-height: .8;    text-transform: uppercase;    white-space: nowrap;}.why-title {    text-align: center;    font-size: 54px;    color: #203b84;    font-weight: 700;    margin-bottom: 35px;    text-transform: uppercase;}.why-description {    max-width: 920px;    margin: 0 auto 80px;    text-align: center;    font-size: 20px;    line-height: 1.8;    color: #444;}.why-grid {    display: flex;    justify-content: space-between;    gap: 40px;}.why-item {    flex: 1;    text-align: center;    padding: 0 35px;}.why-item:not(:last-child) {    border-right: 1px solid #cfa74d;}.why-icon {    font-size: 40px;    color: #111;    margin-bottom: 15px;}@keyframes drawIcon {    0% { stroke-dashoffset: 150; }    50% { stroke-dashoffset: 0; }    100% { stroke-dashoffset: 150; }}.why-icon svg {    width: 40px;    height: 40px;    stroke: #111;    overflow: visible;    display: block;    margin: 0 auto;}.why-icon svg path {    stroke-dasharray: 150;    stroke-dashoffset: 150;    animation: drawIcon 4s ease-in-out infinite;}.why-item h3 {    font-size: 24px;    font-weight: 700;    margin-bottom: 15px;    letter-spacing: 1px;}.why-item p {    font-size: 16px;    line-height: 1.6;    color: #444;}/* Custom Add to Inquiry Button Hover */.custom-hover-gold:hover {    background-color: #b88f44 !important;    color: #ffffff !important;}.custom-hover-gold:hover .custom-hover-gold-icon {    background-color: #a07a38 !important; /* Slightly darker for the plus icon area */    color: #ffffff !important;}.custom-hover-gold:hover .button-label {    color: #ffffff !important;}/* Tablet */@media(max-width:991px) {    .why-bg-text h2 {        font-size: 140px;    }    .why-title {        font-size: 40px;    }    .why-description {        font-size: 18px;        margin-bottom: 60px;    }    .why-grid {        gap: 20px;    }    .why-item {        padding: 0 20px;    }    .why-item h3 {        font-size: 26px;    }    .why-item p {        font-size: 16px;    }}/* mobile */@media(max-width:768px) {    .why-section {        padding: 60px 20px;    }    .why-bg-text h2 {        font-size: 80px;    }    .why-title {        font-size: 28px;        line-height: 1.4;    }    .why-description {        font-size: 16px;        margin-bottom: 40px;    }    .why-grid {        display: block;    }    .why-item {        padding: 35px 0;        border-right: none !important;        border-bottom: 1px solid #cfa74d;    }    .why-item:last-child {        border-bottom: none;    }    .why-icon {        font-size: 44px;    }    .why-item h3 {        font-size: 22px;    }    .why-item p {        font-size: 15px;    }}/* ============================================= FOOTER SECTION CUSTOMIZATIONS ============================================= */footer#footer {    background-color: #27408B;}h4.text-heading.text-sm.md\:text-base.xl\:text-lg.font-semibold.mb-5.\32 xl\:mb-6.\33 xl\:mb-7 {    color: white;}ul.text-xs.lg\:text-sm.text-gray-500.flex.flex-col.space-y-3.lg\:space-y-3\.5 {    color: white;}a.transition-colors.duration-200.hover\:text-black {    color: white;}.copyright {    color: white;}.powered-by.md\:ml-auto {    color: white;}.powered-by.md\:ml-auto {    color: white;}.hover\:text-black:hover {    color: #d4af37 !important;}li.flex.items-center:hover span.mr-3 svg,li.flex.items-center:hover a {    color: #d4af37 !important;    fill: #d4af37 !important;}li.flex.items-center span.mr-3 svg {    transition: color 0.2s, fill 0.2s;}.modern-saas-card {    position: relative;    overflow: hidden;    background: #ffffff;    border-radius: 1rem;    border: 1px solid rgba(0, 0, 0, 0.05);    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.modern-saas-card:hover {    transform: translateY(-4px);    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);    border-color: rgba(0, 0, 0, 0.1);}/* Modern Shine Effect */.modern-saas-card::after {    content: '';    position: absolute;    top: 0;    left: -150%;    width: 100%;    height: 100%;    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);    transform: skewX(-25deg);    transition: left 0.75s ease-in-out;    z-index: 10;    pointer-events: none;}.modern-saas-card:hover::after {    left: 150%;}.modern-image-wrapper {    aspect-ratio: 4 / 3;    overflow: hidden;    position: relative;    border-top-left-radius: 1rem;    border-top-right-radius: 1rem;}.modern-image-wrapper img {    width: 100%;    height: 100%;    object-fit: cover;    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);}.modern-saas-card:hover .modern-image-wrapper img {    transform: scale(1.05);}.custom-hover-d4af37:hover {    background-color: #d4af37 !important;    border-color: #d4af37 !important;    color: #ffffff !important;}