:root {
    --primary-color: #F47920;
    /* We2India Orange */
    --secondary-color: #2E1A47;
    /* We2India Violet */
    --accent-color: #2E1A47;
    --dark-color: #1a1a1a;
    --light-color: #f8f9fa;
    --text-color: #333;
    --bg-color: #fff;
    --gradient-primary: linear-gradient(135deg, #F47920 0%, #ff9f43 100%);
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-secondary);
    color: var(--text-color);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--dark-color);
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Helper Classes */
.text-gradient {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Calendar wrapper styling */
.calendar-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
}
    .calendar-brand {
        position: absolute;
        top: 6px;
        right: 12px;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary-color);
        pointer-events: none;
        user-select: none;
    }

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

.btn-primary-custom {
    background: var(--gradient-primary);
    border: none;
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary-custom:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(244, 121, 32, 0.4);
    /* adjusted shadow color */
    color: white;
}

/* Bootstrap Overrides */
.bg-primary {
    background-color: var(--primary-color) !important;
}

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

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #d66415;
    /* Darker orange */
    border-color: #d66415;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.section-padding {
    padding: 80px 0;
}

.section-subtitle {
    color: #f58220;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    display: inline-block;
}

.section-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 2.4rem;
    font-weight: 800;
    color: #1c1d21;
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.section-title.text-white {
    color: #ffffff;
}

/* Navbar Redesign - Floating Glassmorphism Pill */
.navbar {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin: 20px auto;
    border-radius: 50px;
    width: 95%;
    max-width: 1400px;
    padding: 12px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    left: 0;
    right: 0;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    margin-top: 10px;
    padding: 10px 25px;
    width: 92%;
}

@media (max-width: 991px) {
    .navbar {
        border-radius: 20px;
        padding: 10px 15px;
        width: 95%;
        margin-top: 10px;
    }
    .navbar-collapse {
        background-color: #ffffff;
        border-radius: 15px;
        padding: 20px;
        margin-top: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
}

.nav-link {
    font-weight: 600;
    color: #1e293b !important;
    position: relative;
    padding: 8px 18px !important;
    margin: 0 5px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.nav-link:hover, .nav-link:focus {
    color: #0088cc !important;
    background-color: rgba(0, 136, 204, 0.05);
}

.btn-lets-talk {
    background: linear-gradient(135deg, #0088cc 0%, #005f99 100%);
    border: none;
    border-radius: 50px;
    padding: 12px 28px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
    transition: all 0.3s ease;
    color: white !important;
}
.btn-lets-talk:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 136, 204, 0.4);
}

/* Mega Menu */
@media all and (min-width: 992px) {
    .navbar .dropdown-mega {
        position: static;
    }
    .navbar .dropdown-mega .dropdown-menu {
        width: 100%;
        left: 0;
        right: 0;
        top: 100%;
        border: none;
        border-radius: 0 0 10px 10px;
        margin-top: 0;
        padding: 20px 0; /* Reduced from 40px */
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeIn 0.3s;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mega-menu-bg-text {
    position: absolute;
    top: -30px;
    left: -20px;
    font-size: 10rem;
    font-weight: 900;
    color: rgba(245, 130, 32, 0.03); /* Faint orange */
    z-index: 0;
    user-select: none;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.mega-menu-content {
    position: relative;
    z-index: 1;
}

/* Sidebar Nav */
.mega-sidebar-nav .nav-link {
    color: #475569 !important;
    padding: 12px 20px; /* Reduced padding */
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid transparent;
    margin-bottom: 5px; /* Reduced margin */
}
.mega-sidebar-nav .nav-link:hover {
    background-color: rgba(0, 136, 204, 0.03);
    color: #00234b !important;
    transform: translateX(5px);
}
.mega-sidebar-nav .nav-link.active {
    background: linear-gradient(90deg, rgba(245, 130, 32, 0.08) 0%, rgba(245, 130, 32, 0) 100%);
    color: #f58220 !important;
    border-left: 4px solid #f58220;
    transform: translateX(5px);
}
.mega-sidebar-nav .nav-link::after {
    display: none;
}
.mega-sidebar-nav .nav-link i.arrow-icon {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: #f58220;
}
.mega-sidebar-nav .nav-link.active i.arrow-icon,
.mega-sidebar-nav .nav-link:hover i.arrow-icon {
    opacity: 1;
    transform: translateX(0);
}

/* Service Item */
.mega-service-item {
    margin-bottom: 0; /* Removed because row g-3/g-4 handles it */
    padding: 15px 15px; /* Reduced padding */
    border-radius: 12px;
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    height: 100%;
}
.mega-service-item:hover {
    transform: translateY(-5px); /* Slightly less lift */
    border-color: rgba(245, 130, 32, 0.3);
    box-shadow: 0 15px 30px rgba(245, 130, 32, 0.08);
}
.mega-service-item h6 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}
.mega-service-item:hover h6 {
    color: #0088cc;
}
.mega-service-item p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #64748b !important;
}
.mega-service-item i {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.mega-service-item:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* Insights Mega Menu */
.insight-link-block {
    display: block;
    margin-bottom: 20px;
}
.insight-link-block h6 {
    font-weight: 600;
    color: #222;
    margin-bottom: 5px;
    transition: color 0.3s;
}
.insight-link-block:hover h6 {
    color: #007bff;
}
.insight-link-block p {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0;
    line-height: 1.4;
}

.mega-middle-bg {
    background: #f4f8fb;
    border-radius: 12px;
    padding: 30px;
    height: 100%;
}

.mega-office-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background: #fff;
    display: flex;
    align-items: center;
}
.mega-office-card img.flag {
    width: 24px;
    margin-right: 12px;
}
.mega-office-card h6 {
    margin: 0 0 2px 0;
    font-size: 0.9rem;
    font-weight: 600;
}
.mega-office-card p {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
}

.mega-social-icons a {
    color: #333;
    font-size: 1.2rem;
    margin-right: 15px;
    transition: color 0.3s;
}
.mega-social-icons a:hover {
    color: #007bff;
}

.mega-illustration {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}

.text-blue {
    color: #007bff !important;
}

/* Hero Section */
.hero-section {
    position: relative;
    padding: 150px 0 180px 0;
    /* Increased bottom padding for curve */
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* Multi-color gradient starting bottom-left (45deg) */
    background: linear-gradient(45deg, #E0C3FC 0%, #8EC5FC 30%, #FF9A9E 60%, #FAD0C4 100%);
    border-radius: 0 0 50% 50% / 0 0 100px 100px;
    margin-bottom: 50px;
    overflow: hidden;
}

.hero-section.full-width-hero {
    padding: 0;
    border-radius: 0;
    margin-bottom: 0;
    height: 100vh;
    display: block;
}

.page-header-curved {
    position: relative;
    padding: 150px 0 100px 0;
    background: linear-gradient(45deg, #E0C3FC 0%, #8EC5FC 30%, #FF9A9E 60%, #FAD0C4 100%);
    border-radius: 0 0 50% 50% / 0 0 80px 80px;
    /* Slightly smaller curve for headers */
    margin-bottom: 50px;
    overflow: hidden;
    text-align: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

/* Services Card */
.service-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    border-bottom: 3px solid transparent;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid var(--primary-color);
}

.service-icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Products Section */
.product-card {
    border-radius: 15px;
    overflow: hidden;
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.product-body {
    padding: 20px;
}

/* Animations */
.animate-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.animate-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
footer {
    background: #1a1e21;
    color: white;
    padding: 60px 0 20px 0;
}

footer a {
    color: #adb5bd;
}

footer a:hover {
    color: white;
}

/* Parallax Section */
/* Parallax Section */
/* Parallax Section */
.parallax-section {
    position: relative;
    overflow: hidden;
    background-color: var(--light-color);
    /* Base color */
    color: var(--text-color) !important;
}

.parallax-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* High quality business abstract image */
    background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.15;
    /* Low opacity for watermark effect */
    z-index: 0;
}

.parallax-section>.container {
    position: relative;
    z-index: 1;
}

/* Ensure headings/text inside parallax sections are visible */
.parallax-section h1,
.parallax-section h2,
.parallax-section h3,
.parallax-section h4,
.parallax-section h5,
.parallax-section h6,
.parallax-section p,
.parallax-section li,
.parallax-section i {
    color: var(--dark-color) !important;
}

.parallax-section .text-muted {
    color: #6c757d !important;
}

/* Override card backgrounds if needed within parallax */
.parallax-section .card,
.parallax-section .service-card,
.parallax-section .product-card {
    /* Keep cards white or make transparent? Usually keep white for contrast, but let's see. 
      If cards are white, text inside them should be dark. 
      The above generic rules might override card internal text. We need to scope it properly. */
    background: rgba(255, 255, 255, 0.95);
}

.parallax-section .card *,
.parallax-section .service-card *,
.parallax-section .product-card * {
    color: initial;
    /* Reset color for inside bright cards */
}

.parallax-section .service-card p.text-muted,
.parallax-section .product-body p.text-muted {
    color: #6c757d !important;
}

/* Fix for .bg-white elements inside parallax (like in About Us -> Values) */
.parallax-section .bg-white,
.parallax-section .bg-white h1,
.parallax-section .bg-white h2,
.parallax-section .bg-white h3,
.parallax-section .bg-white h4,
.parallax-section .bg-white h5,
.parallax-section .bg-white h6,
.parallax-section .bg-white p,
.parallax-section .bg-white li,
.parallax-section .bg-white i,
.parallax-section .bg-white span {
    color: var(--dark-color);
}

.parallax-section .bg-white .text-muted {
    color: #6c757d !important;
}

/* Marquee Styles */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    padding: 20px 0;
    position: relative;
    width: 100%;
}

.marquee-content {
    display: inline-flex;
    animation: marquee-scroll 30s linear infinite;
    width: max-content;
}

.marquee-content:hover {
    animation-play-state: paused;
}

.product-card-marquee {
    flex: 0 0 350px;
    margin: 0 15px;
    white-space: normal;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* WhatsApp Floating Button */
.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-decoration: none;
}

.whatsapp-btn:hover {
    background-color: #128c7e;
    color: white;
    transform: scale(1.1);
}

/* Hover Lift Effect */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

/* Floating Bubbles Animation */
.circles {
    position: fixed;
    /* Fixed to cover whole screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: -1;
    /* Behind everything */
    pointer-events: none;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    animation: animate 25s linear infinite;
    bottom: -150px;
    border-radius: 50%;
    /* Make them circles */
}

/* Multi-color bubbles */
.circles li:nth-child(odd) {
    background: rgba(244, 121, 32, 0.4);
    /* Orange */
}

.circles li:nth-child(even) {
    background: rgba(46, 26, 71, 0.4);
    /* Violet */
}

.circles li:nth-child(3n) {
    background: rgba(142, 197, 252, 0.4);
    /* Blue */
}

.circles li:nth-child(4n) {
    background: rgba(255, 154, 158, 0.4);
    /* Pink */
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 50%;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

/* Balloon Text Effect */
.balloon-text {
    font-weight: 900;
    text-transform: uppercase;
    background: linear-gradient(135deg, #FF9A9E 0%, #F47920 50%, #2E1A47 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.1));
    position: relative;
    animation: balloon-float 3s ease-in-out infinite;
    line-height: 1.2;
    padding-bottom: 10px;
    /* Space for animation */
}

@keyframes balloon-float {

    0%,
    100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.1));
    }

    50% {
        transform: translateY(-10px) scale(1.02);
        filter: drop-shadow(0px 15px 5px rgba(0, 0, 0, 0.1));
    }
}

/* Trusted Clients Marquee */
.clients-marquee-section {
    padding: 50px 0;
    background-color: #f6fbfe;
    overflow: hidden;
    border-bottom: 1px solid #eef3f8;
}
.marquee-wrapper {
    display: flex;
    overflow: hidden;
}
.marquee-container {
    display: flex;
    width: fit-content;
    animation: marquee-scroll 35s linear infinite;
    padding: 10px 0;
}
.marquee-container:hover {
    animation-play-state: paused;
}
.marquee-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 100px;
    margin: 0 15px;
    padding: 15px;
    background-color: #ffffff;
    border: 1px solid #eef3f8;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    flex-shrink: 0;
}
.marquee-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,136,204,0.15);
    border-color: #0088cc;
}
.marquee-item img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}
.marquee-item:hover img {
    transform: scale(1.05);
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* New Animated Service Slider */
.service-slider-section {
    padding: 80px 0;
    overflow: hidden;
    background-color: #ffffff;
}
.service-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}
.service-slider-header-left h6 {
    color: #f58220;
    font-size: 0.95rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.service-slider-header-left h6::before,
.service-slider-header-left h6::after {
    content: '→';
    font-size: 1.1rem;
}
.service-slider-header-left h6::before {
    content: '←';
}
.service-slider-header-left h2 {
    font-weight: 700;
    color: #1a1b2e;
    font-size: 2.8rem;
    line-height: 1.2;
    max-width: 600px;
}
.service-slider-nav button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #eaeaea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.service-slider-nav .btn-prev {
    background-color: #ffffff;
    color: #1a1b2e;
}
.service-slider-nav .btn-next {
    background-color: #f58220;
    color: #ffffff;
    border-color: #f58220;
}
.service-slider-nav button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.service-slider-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}
.service-slider-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: slide-left-to-right 25s linear infinite;
}
.service-slider-track:hover {
    animation-play-state: paused;
}

/* Service Card Design */
.service-slide-card {
    background-color: #f8f9fc;
    border-radius: 20px;
    padding: 40px 30px;
    width: 320px;
    min-width: 320px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 1px solid transparent;
}
.service-slide-icon {
    width: 65px;
    height: 65px;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
    color: #0088cc;
    transition: all 0.5s ease;
}
.service-slide-card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1b2e;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.service-slide-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

/* Hover effects */
.service-slide-card:hover {
    transform: scale(0.95);
    background-color: #0088cc;
    box-shadow: 0 15px 30px rgba(0, 136, 204, 0.2);
}
.service-slide-card:hover .service-slide-icon {
    transform: rotateY(360deg);
    border-color: transparent;
    color: #0088cc;
}
.service-slide-card:hover h4,
.service-slide-card:hover p {
    color: #ffffff;
}

@keyframes slide-left-to-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* CTA Contact Section */
.cta-contact-section {
    background: linear-gradient(135deg, #f58220 0%, #ff9800 100%);
    padding: 80px 0;
    color: #ffffff;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}
.cta-contact-content h2 {
    font-family: 'Georgia', serif;
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}
.cta-contact-content p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 35px;
    opacity: 0.95;
}
.cta-btn {
    background-color: #ffffff;
    color: #f58220 !important;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 10px;
    border: none;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.cta-btn:hover {
    background-color: #1a1b2e;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.cta-info-bar {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 30px;
}
.cta-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 500;
}
.cta-image-wrapper {
    position: relative;
    z-index: 2;
    padding: 20px;
    border-radius: 30px;
    animation: bg-color-shift 8s infinite alternate;
}
.cta-image-wrapper img {
    border: 8px solid rgba(255,255,255,0.4);
    animation: balloon-float 6s ease-in-out infinite;
    max-width: 100%;
}

@keyframes bg-color-shift {
    0% { background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); }
    33% { background-color: rgba(0, 136, 204, 0.4); box-shadow: 0 0 40px rgba(0, 136, 204, 0.4); }
    66% { background-color: rgba(255, 152, 0, 0.4); box-shadow: 0 0 40px rgba(255, 152, 0, 0.4); }
    100% { background-color: rgba(255, 255, 255, 0.15); box-shadow: 0 0 30px rgba(255, 255, 255, 0.15); }
}

/* FAQ Section */
.faq-section {
    padding: 60px 0 80px;
}
.faq-container-box {
    background-color: #e5f1f4;
    border-radius: 20px;
    padding: 50px 40px;
}

.faq-accordion .accordion-item {
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 8px !important;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-accordion .accordion-button {
    background-color: #ffffff;
    color: #00234b;
    font-weight: 600;
    font-size: 1rem;
    padding: 20px 25px;
    box-shadow: none !important;
}
.faq-accordion .accordion-button:not(.collapsed) {
    background-color: #ffffff;
    color: #00234b;
    border-bottom: 1px solid #f0f0f0;
}
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border: 2px solid #00234b;
}
/* Override accordion button icon */
.faq-accordion .accordion-button::after {
    background-image: none;
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: #0088cc;
    margin-left: auto;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
    content: '-';
    transform: rotate(180deg);
}
.faq-accordion .accordion-body {
    padding: 20px 25px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Modern Products Section */
.modern-product-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    border: 1px solid #f0f0f0;
    position: relative;
    overflow: hidden;
}
.modern-product-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0088cc, #f58220);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.modern-product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.modern-product-card:hover::before {
    transform: scaleX(1);
}
.product-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.bg-gradient-blue { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); }
.bg-gradient-orange { background: linear-gradient(135deg, #ff9a44 0%, #fc6076 100%); }
.bg-gradient-purple { background: linear-gradient(135deg, #c33764 0%, #1d2671 100%); }
.bg-gradient-green { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.bg-gradient-red { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); }
.bg-gradient-teal { background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%); }

.modern-product-card h4 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1b2e;
    margin-bottom: 15px;
}
.modern-product-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}
.product-btn {
    background: transparent;
    color: #0088cc;
    font-weight: 600;
    padding: 0;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.product-btn span {
    transition: transform 0.3s ease;
}
.modern-product-card:hover .product-btn span {
    transform: translateX(5px);
}

/* Why Choose Us Dark Mode Section */
.why-choose-section {
    background-color: #0a0f1c; 
    overflow: hidden;
}
.feature-glass-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}
.feature-glass-box:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    border-color: rgba(255, 152, 0, 0.3);
}
.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245,130,32,0.2) 0%, rgba(245,130,32,0) 100%);
    color: #f58220;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.why-choose-graphics {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.graphic-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}
.graphic-circle-1 {
    width: 300px; height: 300px;
    background: rgba(0, 136, 204, 0.4);
    top: 10%; right: 10%;
    animation: balloon-float 8s infinite alternate;
}
.graphic-circle-2 {
    width: 250px; height: 250px;
    background: rgba(245, 130, 32, 0.3);
    bottom: 10%; left: 10%;
    animation: balloon-float 6s infinite alternate-reverse;
}
.graphic-glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    z-index: 1;
}
.graphic-glass-card.main-card {
    width: 80%;
    padding: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.graphic-glass-card.float-card {
    position: absolute;
    bottom: 15%;
    right: 5%;
    padding: 20px 30px;
    animation: balloon-float 5s infinite;
}

/* Premium Footer */
.premium-footer {
    background-color: #030b18;
    color: #e2e8f0;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}
.footer-desc {
    color: #94a3b8;
    line-height: 1.8;
    font-size: 0.95rem;
}
.footer-heading {
    color: #ffffff;
    font-family: 'Playfair Display', 'Georgia', serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
}
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #f58220, #ffb199);
    border-radius: 2px;
}

/* Footer Links */
.footer-links li {
    margin-bottom: 12px;
}
.footer-links a {
    color: #94a3b8;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.footer-links a::before {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
    font-size: 0.8rem;
    color: #f58220;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}
.footer-links a:hover {
    color: #ffffff;
    transform: translateX(5px);
}
.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* Contact Info */
.footer-contact li {
    display: flex;
    margin-bottom: 20px;
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
}
.footer-contact i {
    color: #f58220;
    font-size: 1.2rem;
    margin-top: 3px;
    margin-right: 15px;
}
.footer-contact a {
    color: #94a3b8;
    transition: color 0.3s ease;
}
.footer-contact a:hover {
    color: #f58220;
}

/* Glowing Social Icons */
.social-links-glowing {
    display: flex;
    gap: 12px;
}
.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icon:hover {
    background: #f58220;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(245, 130, 32, 0.3);
    border-color: #f58220;
}

/* Bottom Bar */
.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}
.copyright-text {
    color: #64748b;
    font-size: 0.9rem;
}
.footer-legal li {
    margin-left: 15px;
}
.footer-legal a {
    color: #64748b;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}
.footer-legal a:hover {
    color: #ffffff;
}

/* Footer Decorations */
.footer-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.footer-decoration.shape-1 {
    width: 300px;
    height: 300px;
    background: rgba(0, 136, 204, 0.15);
    top: -100px;
    left: -100px;
}
.footer-decoration.shape-2 {
    width: 250px;
    height: 250px;
    background: rgba(245, 130, 32, 0.1);
    bottom: -50px;
    right: -50px;
}