/* Custom Global Resets */
body {
    font-family: 'Nunito Sans';
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ==========================================================================
   1. Clean Top Header & Smooth Infinite Marquee Styling
   ========================================================================== */
.top-header {
    background-color: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500;
    /* Makes the text slightly bolder, matching your image */
}

.top-header-wrapper {
    height: 45px;
}

/* Restricts the width of the scrolling segment to 50% max */
.top-header-left-wrapper {
    background-color: #00005a;
/*    background-color: #0061ff;*/
    height: 45px;
    width: 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.addmission-text {
    font-size: 20px;
    /* Increased font-size for better readability */
    color: #ffffff;
    font-weight: 500;
    margin: 0;
    display: inline-block;
    padding-left: 100%;
    animation: linearMarquee 28s linear infinite;
}


.wat-is-web-dev.p
/*  Additional for Footer Dropdown  */
.dropdown-menu-mobile {
    display: none;
    list-style: none;
    padding-left: 20px;
    margin-top: 10px;
}

    .dropdown-menu-mobile.show {
        display: block;
    }

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 12px 0;
}

    .dropdown-header i {
        transition: 0.3s;
    }

.mobile-dropdown.active i {
    transform: rotate(180deg);
}

.menu-grid-icon {
    color: black; /* Green */
}


@keyframes linearMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.diagonal-divider {
    position: absolute;
    right: -1px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 45px solid #ffffff;
    border-left: 25px solid transparent;
    z-index: 5;
}

/* Contact Area Right-side elements tracking */
.top-header-right-wrapper {
    width: 50%;
    justify-content: flex-end;
    padding-right: 30px;
    gap: 25px;
}

.header-time,
.header-mobile {
    font-size: 14px;
    font-weight: 600;
}

.header-watch {
    color: #0c4b75;
    font-size: 16px;
    margin-right: 6px;
}

.header-mobile i {
    color: #dc3545;
    font-size: 15px;
    margin-right: 6px;
}

.header-mobile span {
    color: #dc3545;
    font-size: 16px;
    font-weight: 500;
}

/* Attracts user focus to the primary call number info element */
.header-mobile span {
    font-weight: 400 !important;
}

.animate-pulse {
    animation: phonePulse 2s infinite alternate;
}

.animate-pulse {
    animation: phonePulse 2s infinite alternate;
}

@keyframes phonePulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

/* Social Network Icon Circles */
.social-icon {
    width: 28px;
    height: 28px;
    background-color: #0c4b75;
    color: #ffffff !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

    .social-icon:hover {
        background-color: #1a7119;
    }

/* ==========================================================================
   2. Main Navigation Bar Styles (Typography and Spacing Matches)
   ========================================================================== */
.main-header {
    padding: 15px 30px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.custom-brand-logo.custom-brand-logo {
    display: flex;
    align-items: center;
}

.custom-brand-logo img {
    height: 55px; /* Adjust as needed */
    width: auto;
    display: block;
}

/* Desktop Links Alignment */
.header-menu ul {
    gap: 30px;
}

    .header-menu ul li a {
        text-decoration: none;
        color: #00005a;
        font-size: 18px;
        /* Larger readable navigation text size */
        font-weight: 500;
        transition: color 0.15s ease;
    }

        .header-menu ul li a:hover,
        .header-menu ul li a.active {
            color:#ff0f7b;
        }

/* Buttons Group Controls */
.header-right-wrapper {
    gap: 12px;
}

.green-blue-btn button {
    background-color: #81c312;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14.5px;
    font-weight: 600;
}

.blue-green-btn button {
    background-color: #0c4b75;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 10px 24px;
    font-size: 14.5px;
    font-weight: 600;
}

/* Mobile Menu Burger Trigger styles */
.menu-icon i {
    font-size: 32px;
    color: #0c4b75;
    cursor: pointer;
}

/* ==========================================================================
   3. Right Side Panel Offcanvas Layout Settings
   ========================================================================== */
.menu-list-container li {
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}

    .menu-list-container li a {
        text-decoration: none;
        color: #1e293b;
        font-size: 16px;
        font-weight: 600;
    }

        .menu-list-container li a.active {
            color: #0c4b75;
        }

/* ==========================================================================
   Mobile Menu Specific Overrides
   ========================================================================== */
.mobile-social-icon {
    width: 32px;
    height: 32px;
    background-color: #0c4b75;
    color: #ffffff !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none;
}

.mobile-btn-green {
    background-color: #81c312;
    border: none;
    font-size: 13px;
    padding: 8px 5px;
}

    .mobile-btn-green:hover {
        background-color: #6da310;
        color: white;
    }

.mobile-btn-blue {
    background-color: #0c4b75;
    border: none;
    font-size: 13px;
    padding: 8px 5px;
}

    .mobile-btn-blue:hover {
        background-color: #062b45;
        color: white;
    }

.menu-list-container li {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .menu-list-container li a {
        text-decoration: none;
        color: #2b3d4c;
        font-size: 16px;
        font-weight: 500;
    }

/* --- Sticky Header Styles --- */
/* --- Sticky Header Styles --- */

/* 1. This prevents the page content from jumping up and hiding behind the header */
.header-height {
    min-height: 135px;
    /* This holds the space open. Adjust if your header is taller/shorter */
}

/* 2. Main Header Styling */
.header {
    width: 100%;
    background-color: #ffffff;
    position: relative;
    /* Added so z-index works BEFORE scrolling */
    z-index: 9999;
    /* Forces the header to always stay on top of Images/text */
    transition: all 0.3s ease-in-out;
}

    /* 3. This activates when you scroll down */
    .header.scrolled {
        position: fixed;
        top: 0;
        left: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

        /* 4. This completely hides the top bar when scrolling */
        .header.scrolled .top-header {
            display: none !important;
        }


/* ==========================================================================  
   Footer Styling  
   ========================================================================== */

.custom-footer {
    background: linear-gradient(135deg, #0c4b75 0%, #198754 50%, #81c312 100%);
    color: #ffffff;
    padding-top: 60px;
    font-family: 'Nunito Sans', sans-serif;
    position: relative;
    z-index: 10;
}

    .custom-footer h6 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 20px;
        letter-spacing: 0.5px;
    }

    .custom-footer p,
    .custom-footer span {
        font-size: 15px;
        line-height: 1.6;
        color: #e2e8f0;
    }

/* ========================================= */
/* Parallax Reveal Footer Effect             */
/* ========================================= */

/* The 'curtain' that slides over the footer */
.site-wrapper {
    position: relative;
    z-index: 10;
    background-color: #ffffff;
    /* Ensures it is solid and hides the footer */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    /* Creates the dark shadow seen in your image */
}

/* The footer stuck behind the curtain */
.custom-footer {
    background: linear-gradient(135deg, #0c4b75 0%, #198754 50%, #81c312 100%);
    color: #ffffff;
    padding-top: 60px;
    font-family: 'Nunito Sans', sans-serif;
    /* THE MAGIC REVEAL PROPERTIES */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    /* Forces the footer behind the site-wrapper */
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

    .footer-links a i {
        font-size: 12px;
        margin-right: 8px;
        transition: transform 0.3s ease;
    }

    .footer-links a:hover {
        color: #ffffff;
        text-decoration: underline;
    }

        .footer-links a:hover i {
            transform: translateX(4px);
        }

/* ========================================= */
/* 3D Flip Social Network Icons Styling      */
/* ========================================= */

.social-icon-wrapper {
    perspective: 1000px;
    display: flex;
    gap: 15px;
    /* Ensures even spacing between all icons */
    margin: 0;
    padding: 0;
}

    .social-icon-wrapper li {
        list-style: none;
    }

/* 1. Base Container: Enforcing Perfect Squares */
.footer-social {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    /* Locks the exact width */
    height: 40px;
    /* Locks the exact height so it is a perfect square */
    text-decoration: none;
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}

    /* 2. The Icon Itself: Locked on Top and Crystal Clear */
    .footer-social i {
        position: relative;
        z-index: 5;
        font-size: 20px;
        color: #ffffff !important;
        /* REMOVED: -webkit-text-stroke which was making them blurry */
        /* ADDED: A tiny text-shadow to make them look crisp and solid */
        text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
        transition: all 0.5s ease;
    }

    /* 3. The Front Face (Transparent with White Border) */
    .footer-social::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        border: 1px solid #ffffff;
        box-sizing: border-box;
        /* Stops the border from changing the 40x40 size */
        transform-origin: top;
        transform: rotateX(0deg) translateY(0);
        transition: transform 0.5s ease, opacity 0.5s ease;
        z-index: 2;
    }

    /* 4. The Bottom Face (Solid color that hides below initially) */
    .footer-social::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        box-sizing: border-box;
        transform-origin: bottom;
        transform: rotateX(-90deg) translateY(100%);
        transition: transform 0.5s ease;
        z-index: 1;
    }

    /* 5. The Hover Animation (Front face flips up, bottom face flips in) */
    .footer-social:hover::before {
        transform: rotateX(90deg) translateY(-100%);
        opacity: 0;
    }

    .footer-social:hover::after {
        transform: rotateX(0deg) translateY(0);
    }

    /* ========================================= */
    /* Dynamic Brand Colors for the Flipping Box */
    /* ========================================= */
    .footer-social.hover-facebook:hover::after {
        background-color: #1877f2;
    }

    .footer-social.hover-instagram:hover::after {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    }

    .footer-social.hover-linkedin:hover::after {
        background-color: #0077b5;
    }

    .footer-social.hover-pinterest:hover::after {
        background-color: #E60023;
    }

    .footer-social.hover-youtube:hover::after {
        background-color: #ff0000;
    }

/* ========================================= */
/* COURSES SECTION                           */
/* ========================================= */

.courses-section {
    background: #0c3c55;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
/*    min-height: 1900px;*/
    min-height: auto;
}



.course-image,
.course-image1,
.course-image2,
.course-image3 {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

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


/* Left Decorative Images */



.course-image {
    top: 0;
}

.course-image1 {
    top: 450px;
}

.course-image2 {
    top: 900px;
}

.course-image3 {
    top: 1350px;
}

    .course-image img,
    .course-image1 img,
    .course-image2 img,
    .course-image3 img {
        width: 260px;
        height: 450px;
        object-fit: cover;
    }

.courses-section {
    min-height: auto;
}

    .courses-section .container {
        padding-left: 120px;
    }

.row.g-4 {
    --bs-gutter-y: 1rem !important;
}




.course-image,
.course-image1,
.course-image2,
.course-image3 {
    position: absolute;
    left: 0;
    width: 260px;
    overflow: hidden;
    z-index: 1;
}

.course-image {
    top: 0;
}

.course-image1 {
    top: 450px;
}

.course-image2 {
    top: 900px;
}

.course-image3 {
    top: 1350px;
}

    .course-image img,
    .course-image1 img,
    .course-image2 img,
    .course-image3 img {
        width: 260px;
        height: 550px;
        object-fit: cover;
        display: block;
    }

/* Content Above Decorative Images */

.courses-section .container {
    position: relative;
    z-index: 2;
}

/* Title Section */

.course-title-text h2 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
}

.course-title-text p {
    color: #fff;
}

/* Course Cards */

.course-card {
    border: none;
    border-radius: 0;
    height: 100%;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    transition: all .3s ease;
}

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

    .course-card .card-body {
        padding: 20px;
        min-height: 220px;
    }

.course-card-title {
    color: #0c3c55;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.course-card-text {
    color: #555;
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 10px;
    line-height: 1.5;
}

.row.g-4 {
    --bs-gutter-y: 1rem !important;
}


.read-more {
    color: #dd1717;
    text-decoration: none;
    font-weight: 500;
}

    .read-more:hover {
        color: #c20f0f;
    }

/* IMPORTANT */
/* Use this class for card Images */

.course-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* Mobile */

@media (max-width: 991px) {

    .course-image,
    .course-image1,
    .course-image2,
    .course-image3 {
        display: none;
    }

    .courses-section {
        padding: 50px 0;
    }

    .course-card-image {
        height: 220px;
    }
}

@media (max-width: 767px) {

    .course-title-text {
        text-align: center;
    }

    .course-card-title {
        font-size: 1.4rem;
    }

    .course-card-image {
        height: 200px;
    }
}

/* Brand Colors */
.bg-brand-blue {
    background-color: #174a6b !important;
    /* Deep blue from your screenshot */
}

.text-brand-blue {
    color: #174a6b !important;
}

/* Customizing the Syllabus Tabs */
.brand-tabs .nav-link {
    color: #333;
    border-radius: 0;
    padding: 10px 25px;
    font-weight: 500;
}

    .brand-tabs .nav-link.active {
        background: linear-gradient(to bottom, #8bc34a, #174a6b);
        color: white;
        border: none;
    }

/* Accordion Customization */
.accordion-button:not(.collapsed) {
    color: #00005a;
    background-color: #f8f9fa;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, .125);
}

/* 1. Brick Background for Top Section */
/* 1. Brick Background with Dark Overlay */
.wat-is-web-dev-wrapper {
    /* The linear-gradient adds a dark, semi-transparent overlay to make text readable */
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../Images/Assests/WebDevelopment/Webdevelopment.jpg');
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
}

/* 2. Dark Blue Color for the Split Section */
.bg-dark-blue {
    background-color: #002347;
    /* This matches CodeHub's brand blue */
}

/* 3. Utility class to make the right-side image fill its space perfectly */
.object-fit-cover {
    object-fit: cover;
}

/* 4. Syllabus Horizontal Lines Styling */
.webdev-hr-top,
.webdev-hr-bottom {
    border: 0;
    border-top: 2px solid #e0e0e0;
    opacity: 1;
}

/* --- CodeHub Custom Colors --- */
.text-dark-blue {
    color: #00476b !important;
    /* Adjust if your blue is slightly darker */
}

.bg-dark-blue {
    background-color: #00476b !important;
}

/* --- Section 1: Hero Split Screen --- */
.object-fit-cover {
    object-fit: cover;
}

/* --- Section 2: Green Number Boxes --- */
.green-number-box {
    background-color: #7bc043;
    /* CodeHub's signature green */
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Section 3: Giant Outline Numbers --- */
.giant-outline-number {
    font-size: 100px;
    font-weight: 900;
    color: transparent;
    /* Makes the inside of the number invisible */
    -webkit-text-stroke: 1px #7bc043;
    /* Creates the green outline */
    opacity: 0.3;
    /* Makes it faint in the background */
    margin: 0;
    line-height: 1;
}

/* Pull the text up slightly to overlap the giant number */
.mt-n4 {
    margin-top: -1.5rem !important;
}

/* --- Fix Top Header Overlap --- */
.top-header-wrapper {
    width: 100%;
}

.top-header-left-wrapper {
    flex: 1;
    /* Tells the left side to take up available space */
    min-width: 0;
    /* Critical: prevents the long text from breaking the layout */
    overflow: hidden;
    /* Keeps the marquee strictly inside its box */
}

.top-header-right-wrapper {
    flex-shrink: 0;
    /* Tells the right side (contact info) to NEVER shrink or squish */
    padding-left: 20px;
    /* Adds a nice breathing room between the marquee and the clock */
}

/* --- Section 1: Hero Full Width Background --- */
.what-full-stack-section {
    /* Make sure you update this path to point to your image of the man */
    background-image: url('../Images/Assests/WebDevelopment/FullStackDeveloper.jpg');
    background-size: cover;
    /* This keeps the man pinned to the right side of the screen */
    background-position: center right;
    background-repeat: no-repeat;
    /* Adds some nice vertical spacing */
    min-height: 500px;
    display: flex;
    align-items: center;
}

.what-full-stack-inner-box {
    background-color: #00476b !important;
    /* CodeHub brand blue */
    border-radius: 4px;
    /* Gives the overlay box slightly clean corners */
}

/* ========================================= */
/* DIGITAL MARKETING             */
/* ========================================= */
/* Section 1 Styles */
.best-dm-section {
    background-color: #fff;
}

/* Section 2 Styles - Matches your dark blue background */
.bg-dark-blue {
    background-color: #0c4b75 !important;
}

.DMCourseListSection h3 {
    font-weight: 700;
}

.DMCourseListSection ul li {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Ensure Images don't overflow */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Apply Poppins Font Globally */
* {
    font-family: 'Poppins', sans-serif !important;
    box-sizing: border-box;
    letter-spacing: 0.2px;
}

/* Section Styling */
.whatIsDmSection {
    background-color: #fff;
    padding: 60px 0;
    position: relative;
    z-index: 10;
}

.whatIsDmText h3 {
    color: #00005a;
    /* CodeHub Primary Blue */
    font-size: 2rem;
}

.whatIsDmText p {
    font-size: 16px;
    line-height: 1.7;
    color: #475569;
    /* Professional dark gray */
}

/* Image Styling */
.whatIsDmImage img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

    .whatIsDmImage img:hover {
        transform: scale(1.02);
    }

/* Global Reset and Settings */
* {
    letter-spacing: .2px;
    font-family: 'Nunito Sans', sans-serif;
    padding: 0;
    box-sizing: border-box;
}

section {
    display: block;
    unicode-bidi: isolate;
}

/* Section container */
.digitalMarketing {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url('../Images/Assests/Digitalmarketing/background.jpg');
    /* Verify your image path */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    position: relative;
    z-index: 10;
}

/* Card Styling */
.digitalMarketing-cards {
/*    transition: transform 0.3s ease;*/
    border-left: 5px solid #0c4b75;
    /* CodeHub brand color */
}

/*    .digitalMarketing-cards:hover {
        transform: translateY(-5px);
    }*/

.whyDm-img {
    width: 120px;
    height: auto;
    border-radius: 8px;
}

/* Global Font/Spacing */
* {
    letter-spacing: .2px;
    font-family: 'Nunito Sans', sans-serif;
    padding: 0;
    box-sizing: border-box;
}

/* Ensure sections are blocks */
section {
    display: block;
}

.whyDm-img {
    width: 100px;
    height: auto;
}

.digitalMarketing-cards {
    margin-bottom: 30px;
}

/* Scope of Digital Marketing Section */
.ScopeInDm {
    background-color: #e6ecf0;
    padding: 50px 0;
    position: relative;
    z-index: 10;
}

.scopeOfDMPoints {
    padding: 20px;
    background: #fff;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

    .scopeOfDMPoints:hover {
        transform: translateY(-10px);
    }

.scopeOfDM-Heading {
    margin-bottom: 10px;
    font-weight: 600;
}

.scopeOfDM-text {
    font-size: 14px;
    color: #555;
}


/* Scope Section */
.ScopeInDm {
    background-color: #e6ecf0;
    padding: 80px 0;
}

/* Scope Card Animation */
.scopeOfDMPoints {
    background: white;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

    .scopeOfDMPoints:hover {
        border-bottom: 3px solid #0c4b75;
        /* Brand blue underline on hover */
        transform: translateY(-10px);
    }

.digitalMarketing {
    padding: 50px 0px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/Assests/Digital marketing/backgrounddigitalmarketing.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 10;
}

.digitalMarketing-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.digitalMarketingHeading h3 {
    color: #fff;
    padding-bottom: 20px;
    font-size: 35px;
}

.digitalMarketing-top-Text p {
    color: #fff;
}

.DMWrapper,
.DMPointsSubtitile {
    position: relative;
}

    .DMWrapper .DMPointsSubtitile {
        display: flex;
    }

.DMIcon {
    color: #ffd300;
}

.DMWrapper .DMPointsSubtitile h5 {
    padding-left: 10px;
    color: #ff0f7b;
    font-weight: 700;
}

.digitalMarketing-cards {
    background-color: #0e476b;
    margin: 20px 0px;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

    .digitalMarketing-cards p {
        /* color: #676767; */
        color: #fff;
        opacity: 0.9;
    }

.sub-digitalMarketing-cards {
    width: 55.55%;
}

.whyDm-img {
    width: 400px;
    height: 250px;
    opacity: 0;
    border-radius: 5px;
    position: absolute;
    top: 50px;
    transform: translateY(-50%) rotate(19deg) scale(0);
    right: -10px;
    z-index: 9;
    transition: all 1s ease-in-out;
}

.digitalMarketing-cards:hover .whyDm-img {
    opacity: 1;
    transform: translateY(-50%) rotate(19deg) scale(1);
}



/* Media Query */

/* Media Queries */
@media (max-width: 576px) {
    .sub-digitalMarketing-cards {
        width: 100%;
    }

    .digitalMarketing-cards {
        margin: 10px 0;
    }
}

@media (max-width: 768px) {
    .sub-digitalMarketing-cards {
        width: 100%;
    }
}


.ScopeInDm {
    background-color: #e6ecf0;
    padding: 50px 0px;
    position: relative;
    z-index: 10;
}

.ScopeInDmTitle h3 {
    color: #00005a;
    font-size: 35px;
}

.scope-cards-outer {
    padding: 10px !important;
}

.scopeOfDMPoints {
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 9, 128, 0.035), 0 0px 0px rgba(0, 9, 128, 0.05);
    background: #fff;
    height: 270px;
}

    .scopeOfDMPoints h5 {
        color: #00005a;
        font-weight: 700;
        text-align: center;
    }

.scopeOfDM-text {
    padding: 10px 25px;
    color: #3c3c3c;
}

.scopOfDm-top-text,
.scopeOfDm-bottom-text {
    color: #3c3c3c;
    padding: 30px 0px;
}

/* 49 */
.overlay-one {
    position: relative;
    transition: all 0.5s ease;
    /* overflow: hidden; */
    cursor: pointer;
}

    .overlay-one::-webkit-scrollbar {
        display: none;
    }

    /* 69 */
    .overlay-one:before {
        bottom: 0;
        right: -10%;
        background: linear-gradient(270deg, transparent, #ff0f7b);
        z-index: 1;
    }

    /* 67 */
    .overlay-one .overlay-two:before,
    .overlay-one:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        transition: all 0.5s ease;
        opacity: 0;
    }

    /* 144 */
    .overlay-one:hover:before {
        right: 30px;
        opacity: 1;
    }

    /* 89 */
    .overlay-one .overlay-two:before {
        top: 0;
        left: -100%;
        background: linear-gradient(90deg, transparent, #ff0f7b);
    }

    /* 148 */
    .overlay-one:hover .overlay-two:before {
        left: 30px;
        opacity: 1;
    }

    /* 108 */
    .overlay-one .overlay-two:after {
        top: -100%;
        right: 0;
        background: linear-gradient(180deg, transparent, #ff0f7b);
    }

    /* 106 */
    .overlay-one .overlay-two:after,
    .overlay-one:after {
        content: "";
        position: absolute;
        width: 2px;
        height: 100%;
        transition: all 0.5s ease;
        opacity: 0;
    }

    /* 152 */
    .overlay-one:hover .overlay-two:after {
        top: 30px;
        opacity: 1;
    }

    /* 156 */
    .overlay-one:hover:after {
        bottom: 30px;
        opacity: 1;
    }

    /* 127 */
    .overlay-one:after {
        bottom: -100%;
        left: 0;
        background: linear-gradient(0deg, transparent, #ff0f7b);
    }




/* Media Queries */
@media (max-width: 576px) {
    .overlay-one:before {
        right: 0;
    }

    .scopeOfDMPoints {
        height: unset;
    }
}

.name {
    color: blue;
/*    font-weight: bold;*/
}
.moduleSection {
    padding: 50px 0px;
    background: url("../Images/Assests/Digital marketing/modulesection.png");
    background-repeat: repeat;
    background-position: right -68px top 35%;
    /* background-color: #010325; */
    background-color: #041520;
    position: relative;
    z-index: 10;
}

.ModulesTitle h3 {
    color: #fff;
    font-size: 35px;
    padding-top: 10px;
    margin-bottom: 115px;
}

.module {
    position: relative;
    height: 280px;
    padding: 0px 10px;
}

.moduleImage {
    height: 160px;
    width: 160px;
    border-radius: 50%;
    margin-bottom: 0;
    overflow: hidden;
    position: absolute;
    top: -69px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

    .moduleImage img {
        width: 100%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        transition: all 300ms ease;
    }

.moduleIcon {
    background-color: #0e476b;
    padding: 10px;
    border-radius: 50%;
    border: 5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 105px;
    width: 105px;
    position: absolute;
    top: -42px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

    .moduleIcon img {
        position: absolute;
        left: 50%;
        top: 52%;
        transition: all 300ms ease;
        padding: 10px;
        height: 70px;
        width: 70px;
        transform: translate(-50px, -50px);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        font-weight: 700;
        font-size: 34px;
    }

.module:hover .moduleIcon img {
    transform: translate(-50%, -50%) rotate(360deg);
}

.moduleDescription {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
}

    .moduleDescription p {
        color: #00005a;
        text-align: center;
        margin-top: 95px;
        padding: 0px 25px;
    }



.dmSyllabussection {
    padding: 50px 0px;
    background: url("../Images/Digitalmarketing/syllabus/syllabus_bg.jpg");
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 10;
}

.syllabus-details {
    box-shadow: 0 5px 10px rgba(0, 9, 128, 0.035), 0 7px 18px rgba(0, 9, 128, 0.05);
    margin: 20px;
    background-color: #fff;
}

.SyllabusTitle h3 {
    color: #00005a;
    font-size: 35px;
}

/*  */
.syllabus-details .chapterName h5 {
    background-color: #efefef;
    padding: 20px;
    color: #00005a;
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 20px;
}

.dmSyllabusContent {
    position: relative;
}

.chapterDetails-list {
    padding: 5px 15px 10px 15px;
}

.chapterDetailsWrapper {
    padding: 20px;
}

.chapterDetails-list li {
    list-style: none;
    border-bottom: 1px solid #efefef;
    padding: 7px 0px;
    box-shadow: 0 5px 10px rgba(0, 9, 128, 0.035), 0 7px 18px rgba(0, 9, 128, 0.05);
}

    .chapterDetails-list li p {
        font-size: 15px;
    }

.syllabus-details .chapterName ul {
    padding: 20px;
}

.bullets {
    display: flex;
    align-items: start;
}

.badgeIcon {
    color: #dd1717;
}



.eligibilityWrapper {
    padding: 50px 0px;
    background: #E6ECF0;
    position: relative;
    z-index: 10;
}

.eligibilitySection {
    margin-right: 20px;
}

    .eligibilitySection p {
        /* color: #3c3c3c; */
        padding: 10px 0px;
    }

.eligibilityTitle h3 {
    color: #00005a;
}

.eligibility-hr-line {
    color: #ff0f7b;
}

.eligibilitylist li {
    list-style: none;
    display: flex;
    align-items: center;
}

.eligibilitylist p {
    /* color: #3c3c3c; */
    padding-left: 10px;
}

.row-job-opp {
    display: flex;
    align-items: center;
}

.eligibilitylist .checkIcon {
    /* margin-top: 6px; */
    color: #00005a;
}

.downloadSyllabusBtn {
    display: flex;
    justify-content: center;
}

    .downloadSyllabusBtn p {
        color: #3c3c3c;
        font-size: 25px;
    }

.btnDownloadWrapper {
    display: flex;
    justify-content: center;
}

.btnDwn {
    padding: 10px 20px;
    text-transform: uppercase;
    background: #ff0f7b;
    color: #fff;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    margin: 10px 0px;
}

.certificateSection {
    background-color: #041520;
    padding: 50px 0px;
    position: relative;
    z-index: 10;
}

.certificateWrapper {
    box-shadow: 0 5px 10px rgba(0, 9, 128, 0.035), 0 7px 18px rgba(0, 9, 128, 0.05);
    margin: 10px;
    padding: 20px 10px;
    display: flex;
    justify-content: center;
}

.certificateHeading h3 {
    color: #fff;
    text-align: center;
}

.certificate {
    width: 250px;
    height: 200px;
}

.toolsSection {
    /* background-color: #00005a; */
    padding: 50px 0px;
    background: #f1f8e7;
    z-index: 10;
    position: relative;
}

.toolsWrapper {
    box-shadow: 0 5px 10px rgba(0, 9, 128, 0.035), 0 7px 18px rgba(0, 9, 128, 0.05);
    margin: 10px;
    padding: 20px 10px;
    display: flex;
    justify-content: center;
    background: #E4F1CF;
}

.toolsTitle h3 {
    color: #00005a;
}

.testimonials {
    padding: 50px 0px;
    position: relative;
    z-index: 10;
    background-color: #fff;
}

.test-heading h3,
.test-heading h5 {
    color: #00005a;
    text-align: center;
}

/* .testimonial-section {
  padding-top: 70px;
} */

.testimonial-outer-wrapper {
    padding: 0px 10px;
    margin-top: 60px;
}

.test-heading {
    padding-bottom: 25px;
}

.testimonial-inner-wrapper {
    position: relative;
    text-align: center;
    justify-content: center;
    justify-items: center;
    padding: 15px;
    background-color: #ffffff;
    box-shadow: 0px 0px 12.61px 0.39px rgba(0, 0, 0, 0.14);
}

.testimonial-profile img {
    width: 110px;
    height: 130px;
    position: absolute;
    top: -10%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.testimonial-profile-name {
    margin-top: 100px;
}

    .testimonial-profile-name h4 {
        color: #00005a;
        font-weight: 500;
        margin-bottom: 0px !important;
        font-size: 20px;
    }

    .testimonial-profile-name p {
        margin: 0;
    }

    .testimonial-profile-name span {
        background-color: #dd1717;
        display: inline-block;
        height: 2px;
        vertical-align: top;
        width: 80px;
        margin: 20px 0;
    }

.testimonial-company-name {
    font-size: 16px;
    font-weight: 600;
    color: #ff0f7b;
}

.testimonial-desc {
    padding-top: 20px;
}

.faqs {
    padding: 25px 0;
    position: relative;
    z-index: 10;
    background-color: #fff;
}

.faq-outer-wrapper {
    padding: 0 15px;
}

.faq-heading h3 {
    color: #00005a;
    text-align: center;
}

.faq-heading h5 {
    color: #6e6e6e;
    text-align: center;
}

.faqs-section {
    padding-top: 50px;
}

.faq-img-wrapper {
    display: flex;
    justify-content: center;
}

    .faq-img-wrapper img {
        width: 100%;
    }

.main-que {
    border-bottom: 0.5px solid #b8b9b9;
    transition: 0.5s ease-in-out;
}

.que-icon {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 0;
    transition: 0.5s ease-in-out;
}

.main-que h5 {
    font-size: 19px;
}

.main-que p {
    font-size: 18px;
    color: #00005a;
    font-weight: 400 !important;
    border-top: 0.5px solid #b8b9b9;
    padding: 10px 0 10px 20px;
}

.sub-menu {
    display: none;
}

    .sub-menu.is-open {
        display: block;
    }

.faq-minus-plus-icon {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #cecece;
}

/*****************/

.slide-by-one-in-group .carousel-control {
    background-image: none !important;
}

.slide-by-one-in-group .cloneditem-1,
.slide-by-one-in-group .cloneditem-2,
.slide-by-one-in-group .cloneditem-3 {
    display: none;
}

@media (min-width: 768px) {

    .slide-by-one-in-group .carousel-inner > .active.left,
    .slide-by-one-in-group .carousel-inner > .prev {
        left: -50%;
    }

    .slide-by-one-in-group .carousel-inner > .active.right,
    .slide-by-one-in-group .carousel-inner > .next {
        left: 50%;
    }

    .slide-by-one-in-group .carousel-inner > .left,
    .slide-by-one-in-group .carousel-inner > .prev.right,
    .slide-by-one-in-group .carousel-inner > .active {
        left: 0;
    }

    .slide-by-one-in-group .carousel-inner .cloneditem-1 {
        display: block;
    }
}

@media (min-width: 768px) and (transform-3d), (min-width: 768px) and (-webkit-transform-3d) {

    .slide-by-one-in-group .carousel-inner > .item.active.right,
    .slide-by-one-in-group .carousel-inner > .item.next {
        -webkit-transform: translate3d(50%, 0, 0);
        transform: translate3d(50%, 0, 0);
        left: 0;
    }

    .slide-by-one-in-group .carousel-inner > .item.active.left,
    .slide-by-one-in-group .carousel-inner > .item.prev {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        left: 0;
    }

        .slide-by-one-in-group .carousel-inner > .item.left,
        .slide-by-one-in-group .carousel-inner > .item.prev.right,
        .slide-by-one-in-group .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
        }
}

@media (min-width: 992px) {

    .slide-by-one-in-group .carousel-inner > .active.left,
    .slide-by-one-in-group .carousel-inner > .prev {
        left: -33.33333333%;
    }

    .slide-by-one-in-group .carousel-inner > .active.right,
    .slide-by-one-in-group .carousel-inner > .next {
        left: 33.33333333%;
    }

    .slide-by-one-in-group .carousel-inner > .left,
    .slide-by-one-in-group .carousel-inner > .prev.right,
    .slide-by-one-in-group .carousel-inner > .active {
        left: 0;
    }

    .slide-by-one-in-group .carousel-inner .cloneditem-2 {
        display: block;
    }
}

@media (min-width: 992px) and (transform-3d), (min-width: 992px) and (-webkit-transform-3d) {

    .slide-by-one-in-group .carousel-inner > .item.active.right,
    .slide-by-one-in-group .carousel-inner > .item.next {
        -webkit-transform: translate3d(33.33333333%, 0, 0);
        transform: translate3d(33.33333333%, 0, 0);
        left: 0;
    }

    .slide-by-one-in-group .carousel-inner > .item.active.left,
    .slide-by-one-in-group .carousel-inner > .item.prev {
        -webkit-transform: translate3d(-33.33333333%, 0, 0);
        transform: translate3d(-33.33333333%, 0, 0);
        left: 0;
    }

        .slide-by-one-in-group .carousel-inner > .item.left,
        .slide-by-one-in-group .carousel-inner > .item.prev.right,
        .slide-by-one-in-group .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
        }
}

@media (min-width: 1200px) {

    .slide-by-one-in-group .carousel-inner > .active.left,
    .slide-by-one-in-group .carousel-inner > .prev {
        left: -25%;
    }

    .slide-by-one-in-group .carousel-inner > .active.right,
    .slide-by-one-in-group .carousel-inner > .next {
        left: 25%;
    }

    .slide-by-one-in-group .carousel-inner > .left,
    .slide-by-one-in-group .carousel-inner > .prev.right,
    .slide-by-one-in-group .carousel-inner > .active {
        left: 0;
    }

    .slide-by-one-in-group .carousel-inner .cloneditem-3 {
        display: block;
    }
}

@media (min-width: 1200px) and (transform-3d), (min-width: 1200px) and (-webkit-transform-3d) {

    .slide-by-one-in-group .carousel-inner > .item.active.right,
    .slide-by-one-in-group .carousel-inner > .item.next {
        -webkit-transform: translate3d(25%, 0, 0);
        transform: translate3d(25%, 0, 0);
        left: 0;
    }

    .slide-by-one-in-group .carousel-inner > .item.active.left,
    .slide-by-one-in-group .carousel-inner > .item.prev {
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
        left: 0;
    }

        .slide-by-one-in-group .carousel-inner > .item.left,
        .slide-by-one-in-group .carousel-inner > .item.prev.right,
        .slide-by-one-in-group .carousel-inner > .item.active {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            left: 0;
        }
}

/* Make the Images wide and responsive */
.carousel-inner img {
    height: auto;
    width: 100%;
}

@media (max-width: 768px) {
    .faqs-section-flex {
        display: flex;
        flex-direction: column-reverse;
    }

    .main-que h5 {
        font-size: 16px;
    }
}

.sectionBestGd {
    padding-top: 50px;
    padding-bottom: 25px;
    background-color: #fff;
    position: relative;
    z-index: 10;
}

.BestGdImage {
    display: flex;
    /* justify-content: end; */
    position: relative;
}

    .BestGdImage img {
        height: auto;
        max-width: 100%;
    }

.GdImg2 {
    position: absolute;
    top: 50px;
    left: 62%;
}

.BestGdDescription {
    padding: 0px 20px;
}

.BestGdTitle h3 {
    font-size: 35px !important;
    color: #00005a;
}

.BestGdTitle p {
    padding: 10px 0px;
    color: #3c3c3c;
}

.CourseDescription p {
    font-size: 16px !important;
    color: #3c3c3c;
    padding: 0px 10px;
}

.GdIcon {
    display: flex;
    align-items: center;
    padding: 2px 0px;
}

.gdCheckIcon {
    color: #ff0f7b;
}

.CourseDescription-bottom {
    padding-top: 10px;
}

.BestGdImage .GdImg2 {
    animation-name: UpDown;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes UpDown {
    50% {
        transform: translateY(20px);
    }
}

@media (max-width: 768px) {
    .sectionBestGd {
        padding-bottom: 0px !important;
    }

    .BestGdImage {
        padding-top: 50px;
    }

    .GdImg2 {
        position: absolute;
        top: 95px;
        left: 62%;
    }

    .BestGdDescription {
        padding: 30px 10px 0px 10px;
    }
}

/* Media Queries */
@media (max-width: 576px) {
    .GdImg2 {
        display: none;
    }

    .BestGdImage {
        padding-top: 10px;
    }

    .sectionBestGd {
        padding-top: 25px;
    }
}


.scetionWhatIsDm {
    padding-top: 25px;
    padding-bottom: 50px;
    position: relative;
    z-index: 10;
    background-color: #fff;
}

.whatIsDm {
    padding: 10px;
}

    .whatIsDm h3 {
        color: #00005a;
    }

    .whatIsDm p {
        padding: 10px 0px;
        color: #3c3c3c;
    }

.whatIsGdImgWrapper {
    padding: 10px;
    position: relative;
}

.whatIsGdImg {
    width: 100%;
}

.whatIsGdImg-absolute-bg {
    position: absolute;
    background: #cedae1;
    width: 300px;
    height: 300px;
    z-index: -1;
    left: -30%;
    top: 170px;
    border-radius: 20px;
}


@media (max-width: 576px) {
    .whatIsDm h3 {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .BestGdImage img {
        height: auto;
        max-width: 100%;
        /* width: 100%; */
    }

    .whatIsGdImg-absolute-bg {
        position: absolute;
        background: #ffeded;
        width: 300px;
        height: 300px;
        z-index: -1;
        right: 0 !important;
        left: unset !important;
        top: 60% !important;
        border-radius: 20px;
    }

    .GdMgview {
        display: flex;
        flex-direction: column-reverse;
    }
}


.sectionWhyGd {
    position: relative;
    z-index: 10;
}

.whyGdWrapper {
    position: relative;
    display: flex;
}

.whyGdTitle h3 {
    font-size: 35px !important;
    color: #fff;
}

.whyGdTitle p {
    color: #676767;
}

.whyGdImgWrapper {
    width: 30%;
}

.whyGdImg {
    width: 100%;
    /* height: 100vh; */
    height: 700px;
    position: sticky;
    top: 0;
    left: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.whyGdcontent {
    background: #182503;
    padding: 30px;
    width: 70%;
}

.gdcontent-list .srNo {
    display: flex;
}

    .gdcontent-list .srNo .srNoIcon {
        color: #fdc305;
        padding: 5px;
        font-weight: bolder;
        transition: 1s;
    }

.gdcontent {
    cursor: pointer;
}

.gdcontent-list li div:hover .srNo .srNoIcon {
    transform: scale(1.3);
}

.gdcontent-list li {
    padding: 10px 0px;
    list-style-type: none;
}

.gdcontent-list h5 {
    color: #fff;
}

.gdcontent-list p {
    color: #fff;
}

.gdHr {
    color: #fff;
}


/* Media Queries */
@media (max-width: 576px) {
    .whyGdImgWrapper {
        display: none;
    }

    .whyGdcontent {
        width: 100%;
    }

    .gdcontent-list {
        padding-left: 0;
    }
}



@media (max-width: 768px) {
    .gdcontent-list {
        padding-left: 0;
    }
}


.sectionService {
    position: relative;
    z-index: 10;
    /* background: #00005a; */
}

.serviceWrapper {
    background: linear-gradient(to bottom left, rgba(14, 71, 107), rgba(0, 0, 0));
    padding: 30px 0px;
}

.serviceTitle h3 {
    font-size: 35px !important;
    color: #fff;
}

.servicesContentBody {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 40px;
    display: flex;
}

    .servicesContentBody h5 {
        color: #fff;
        padding-right: 15px;
    }

.serviceHover-photo,
.serviceHover-adob,
.serviceHover-adobPro,
.serviceHover-coral {
    display: flex;
}

.serviceHover-photo-img img,
.serviceHover-adob-img img,
.serviceHover-adobPro-img img,
.serviceHover-coral-img img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    z-index: 9999;
    opacity: 0;
    margin-top: -200px;
    margin-left: 50px;
    transform: translateX(100%) scale(0);
    transform-origin: 50% 50%;
    transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.servicesContentBody:hover .serviceHover-photo-img img,
.servicesContentBody:hover .serviceHover-adob-img img,
.servicesContentBody:hover .serviceHover-adobPro-img img,
.servicesContentBody:hover .serviceHover-coral-img img {
    opacity: 1;
    transform: translateX(100%) scale(01);
}



@media (max-width: 576px) {
    .servicesContentBody {
        padding: 40px 20px;
    }
}


.sectionCareerPath {
    padding: 50px;
    position: relative;
    z-index: 10;
    background: #fff;
}

.eligibility-gd h3,
.carrerPath h3,
.skillGain h3 {
    font-size: 25px;
    color: #00005a;
}

.eligibilitylist-gd {
    padding-left: 0px !important;
}

    .eligibilitylist-gd li {
        list-style: none;
        display: flex;
        align-items: center;
    }

    .eligibilitylist-gd p {
        padding: 0px 10px;
        color: #3c3c3c;
    }

    .eligibilitylist-gd .checkIcon-gd,
    .carrerPath .checkIcon-gd,
    .skillGain .checkIcon-gd {
        color: #ff0f7b;
    }

.carrerPath,
.skillGain,
.eligibility-gd {
    box-shadow: 0px 0px 10px 0px #e6e4e4;
    padding: 20px;
    margin: 0px 20px;
}




/* Media Queries */
@media (max-width: 576px) {
    .sectionCareerPath {
        padding: 0;
    }

    .carrerPath,
    .skillGain,
    .eligibility-gd {
        margin: 10px 0;
    }
}

@media (max-width: 768px) {

    .carrerPath,
    .skillGain,
    .eligibility-gd {
        margin: 10px 0;
    }
}


.testimonials {
    padding: 50px 0px;
    position: relative;
    z-index: 10;
    background-color: #fff;
}

.test-heading h3,
.test-heading h5 {
    color: #00005a;
    text-align: center;
}

/* .testimonial-section {
  padding-top: 70px;
} */

.testimonial-outer-wrapper {
    padding: 0px 10px;
    margin-top: 60px;
}

.test-heading {
    padding-bottom: 25px;
}

.testimonial-inner-wrapper {
    position: relative;
    text-align: center;
    justify-content: center;
    justify-items: center;
    padding: 15px;
    background-color: #ffffff;
    box-shadow: 0px 0px 12.61px 0.39px rgba(0, 0, 0, 0.14);
}

.testimonial-profile img {
    width: 110px;
    height: 130px;
    position: absolute;
    top: -10%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.testimonial-profile-name {
    margin-top: 100px;
}

    .testimonial-profile-name h4 {
        color: #00005a;
        font-weight: 500;
        margin-bottom: 0px !important;
        font-size: 20px;
    }

    .testimonial-profile-name p {
        margin: 0;
    }

    .testimonial-profile-name span {
        background-color: #dd1717;
        display: inline-block;
        height: 2px;
        vertical-align: top;
        width: 80px;
        margin: 20px 0;
    }

.testimonial-company-name {
    font-size: 16px;
    font-weight: 600;
    color: #ff0f7b;
}

.testimonial-desc {
    padding-top: 20px;
}



.faqSection {
    background: #e6ecf0;
    padding: 50px 0px;
    position: relative;
    z-index: 10;
}

.fqaGdTitle h3 {
    color: #00005a;
    padding-bottom: 20px;
}

.faq-text h5 {
    color: black;
}

.faq-text p {
    font-size: 18px;
}

.faq-text {
    padding: 40px;
}

.main-faq-bg p {
    color: #3c3c3c;
}

.faqImgWrapper {
    display: flex;
    justify-content: center;
}

.faqQueInGd {
    width: 300px;
    height: 365px;
}

.faqsection .accordion-button:focus {
    z-index: unset !important;
    border-color: none !important;
    outline: 0;
    box-shadow: unset !important;
}

.faqsection .accordion-body p {
    font-size: 16px;
}

.faqDm-img {
    width: 100%;
    margin-left: 20px;
}

.faqsection .accordion-button {
    padding: 5px;
}



.custom-footer1 {
    background: linear-gradient(135deg, #0c4b75 0%, #198754 50%, #81c312 100%);
    color: #ffffff;
    padding-top: 60px;
    font-family: 'Nunito Sans', sans-serif;
    position: relative;
    z-index: 10;
}

    .custom-footer1 h6 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 20px;
        letter-spacing: 0.5px;
    }

    .custom-footer1 p,
    .custom-footer1 span {
        font-size: 15px;
        line-height: 1.6;
        color: #e2e8f0;
    }

/* Additional Css  */


body {
    font-family: 'Nunito Sans';
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.header-time span,
.header-time i {
    color: #00005a !important;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 500; /* Normal */
}

.header-mobile {
    font-size: 14px;
    font-weight: 600;
}

    .header-mobile a {
        color: #00005a;
        text-decoration: none;
    }

.animate-pulse {
    animation: phonePulse 2s infinite alternate ease-in-out;
}

@keyframes phonePulse {
    0% {
        transform: scale(1);
        color: #00005a;
    }

    100% {
        transform: scale(1.08);
        color: #ef4444;
    }
}

/* Apply animated color to icon and text */
.animate-pulse a,
.animate-pulse i,
.animate-pulse span {
    animation: phoneColor 2s infinite alternate ease-in-out;
}

@keyframes phoneColor {
    0% {
        color: #b91c1c;
    }

    100% {
        color: #00005a;
    }
}

.custom-footer {
    background-image: url("../Images/Assests/Gemini_Generated_Image_msz89kmsz89kmsz8.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 60px;
    color: #fff;
}


/* courses mega menu */
/* Parent */
/* Parent */
/* ==========================
   COURSES MEGA MENU
========================== */

/* Parent */
.mega-menu-parent {
    position: relative;
}

/* Dropdown */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 1150px;
    column-gap: 70px;
    margin-top: 29px;
    padding: 30px 40px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-bottom: 3px solid #ff0f7b;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all .35s ease;
    z-index: 999;
}

/* Show Menu */
.mega-menu-parent:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Columns */
.mega-column {
    display: flex;
    flex-direction: column;
}

/* Course Row */
.course-item {
    position: relative;
    padding: 18px 0 18px 28px;
    border-bottom: 1px solid #e5e7eb;
    transition: .3s ease;
}

    /* Arrow */
    .course-item::before {
        content: ">>";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #ff0f7b;
        font-size: 18px;
        letter-spacing: -3px;
    }

    /* Links */
    .course-item a {
        display: block;
        text-decoration: none;
        color: #00005a;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.4;
        transition: all .3s ease;
    }

    /* Hover */
    .course-item:hover a {
        color: #00005a;
        transform: translateX(8px);
    }
/* Move Arrow Smoothly */
    .course-item:hover::before {
        transform: translateY(-50%) translateX(4px);
        color: #00005a;
    }

/* Border Animation */
    .course-item:hover {
        border-bottom-color: #ff0f7b;
    }


/* Remove last border */
.mega-column .course-item:last-child {
    border-bottom: none;
}

/* Arrow Rotation */
.nav-arrow {
    font-size: 15px;
    margin-left: 5px;
    display: inline-block;
    transition: .3s ease;
    color: #00005a;
}

.mega-menu-parent:hover .nav-arrow {
    transform: rotate(180deg);
}

/* Mobile */
@media (max-width: 991px) {

    .mega-menu {
        position: static;
        width: 100%;
        margin-top: 0;
        grid-template-columns: 1fr;
        padding: 15px;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
    }

    .course-item {
        padding: 15px 0 15px 25px;
    }

        .course-item a {
            font-size: 16px;
        }
}






.service-mega-parent {
    position: relative;
}

/* Mega Menu */
.service-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 800px;
    background: #fff;
    margin-top: 29px;
    padding: 25px 35px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    border-bottom: 3px solid #ff0f7b;
    box-shadow: 0 15px 40px rgba(0,0,0,.10);
    /* Smooth Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    z-index: 9999;
}

/* Show Menu */
.service-mega-parent:hover .service-mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Service Item */
.service-item {
    position: relative;
    padding: 18px 0 18px 25px;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

    /* Arrow */
    .service-item::before {
        content: ">>";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #ff0f7b;
        font-size: 18px;
        letter-spacing: -3px;
        transition: all 0.3s ease;
    }

    /* Links */
    .service-item a {
        text-decoration: none;
        color: #333;
        font-size: 18px;
        font-weight: 500;
        display: block;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    /* Hover Effect */
    .service-item:hover a {
        color: #00005a;
        transform: translateX(8px);
    }

    /* Move Arrow Smoothly */
    .service-item:hover::before {
        transform: translateY(-50%) translateX(4px);
        color: #00005a;
    }

    /* Border Animation */
    .service-item:hover {
        border-bottom-color: #ff0f7b;
    }






/*Digital marketing syllabus section */
.dmSyllabussection {
    padding: 50px 0px;
    background: url("../Images/Digitalmarketing/syllabus/syllabus_bg.jpg");
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 10;
}

.syllabus-details {
    box-shadow: 0 5px 10px rgba(0, 9, 128, 0.035), 0 7px 18px rgba(0, 9, 128, 0.05);
    margin: 20px;
    background-color: #fff;
}

.SyllabusTitle h3 {
    color: #00005a;
    font-size: 35px;
}

/*  */
.syllabus-details .chapterName h5 {
    background-color: #efefef;
    padding: 20px;
    color: #00005a;
    margin-bottom: 0px;
    font-weight: 700;
    font-size: 20px;
}

.dmSyllabusContent {
    position: relative;
}

.chapterDetails-list {
    padding: 5px 15px 10px 15px;
}

.chapterDetailsWrapper {
    padding: 20px;
}

.chapterDetails-list li {
    border-bottom: 1px solid #efefef;
    box-shadow: 0 5px 10px rgba(0, 9, 128, .035), 0 7px 18px rgba(0, 9, 128, .05);
    list-style: none;
    padding: 7px 0;
}

    .chapterDetails-list li p {
        font-size: 15px;
        font-weight: 400;
        margin: 0;
    }

.syllabus-details .chapterName ul {
    padding: 20px;
}

.bullets {
    display: flex;
    align-items: start;
}

.badgeIcon {
    color: #dd1717;
}


/* request call back css*/
.requestCallBack-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1.5)), url("../Images/Assests/Home/bgRequestcallBack.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    padding-top: 20px;
}

.requestCallBackLeft {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0px 0px 60px 10px rgba(8, 8, 8, 0.2);
    padding: 20px;
    margin: 20px;
}

.requestCallBack h3 {
    color: #fff;
    margin-top: 20px;
    text-align: center;
}

.req-inputWrapper {
    padding: 10px;
}

    .req-inputWrapper .req-form-control,
    .req-inputWrapper .req-form-select {
        background-color: transparent;
        color: #fff;
    }

        .req-inputWrapper .req-form-select option {
            background-color: transparent;
            color: black;
        }

        .req-inputWrapper .req-form-control:focus,
        .req-inputWrapper .req-form-select:focus {
            outline: 0;
            box-shadow: none;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

    .req-inputWrapper .req-form-control,
    .req-inputWrapper .req-form-select {
        border-radius: 0px !important;
        padding: 10px 20px !important;
        border: 1px solid rgba(231, 214, 214, 0.5);
        border-radius: 0;
        outline: none;
        transition: all 0.3s ease;
        font-size: 15px;
        color: #fff;
        width: 100%;
    }

        .req-inputWrapper .req-form-control::placeholder {
            color: #fff;
            opacity: 0.8;
        }

.requestCallBackRight {
    padding: 20px;
}

.courseDescription-top h3,
.courseDescription-top p {
    color: #fff;
}

.req-courseDescription-bottom {
    padding: 20px 0px;
}

    .req-courseDescription-bottom .req-lowFees {
        line-height: 2.1em;
        background-color: #0e476d;
        border-radius: 24px 24px 0 0;
        overflow: hidden;
        padding-top: 20px !important;
        padding-right: 30px !important;
        padding-bottom: 10px !important;
        padding-left: 30px !important;
        margin-bottom: 0px !important;
        display: flex;
        align-items: center;
    }

    .req-courseDescription-bottom .req-studyMaterial {
        line-height: 2.1em;
        background-color: #C2002F !important;
        padding-top: 20px !important;
        padding-right: 30px !important;
        padding-bottom: 10px !important;
        padding-left: 30px !important;
        margin-bottom: 0px !important;
        display: flex;
        align-items: center;
    }

    .req-courseDescription-bottom .req-placement {
        line-height: 2.1em;
        background-color: #0e476d;
        border-radius: 0 0 24px 24px;
        overflow: hidden;
        padding-top: 20px !important;
        padding-right: 30px !important;
        padding-bottom: 10px !important;
        padding-left: 30px !important;
        margin-bottom: 0px !important;
        display: flex;
        align-items: center;
    }

        .req-courseDescription-bottom .req-lowFees p,
        .req-courseDescription-bottom .req-studyMaterial p,
        .req-courseDescription-bottom .req-placement p {
            padding-left: 10px;
            color: #fff;
            font-size: 18px;
        }

.req-checkIcon {
    color: #fff;
}

.req-btn {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 10px;
}

.req-errors {
    font-size: 13px;
    color: #dd1717;
    padding-left: 10px;
    margin-bottom: 0px;
}

.courseDescription-top {
    text-transform: capitalize;
}

    .courseDescription-top span {
        color: #C2002F;
        text-transform: uppercase;
    }


#courseDropdown {
    display: none;
}

@media (max-width: 768px) {
    .courseDescription-top h3 {
        font-size: 25px;
    }

    .requestCallBackLeft {
        padding: 0;
        margin: 0;
    }
}



/* ==========================================
   MOBILE RESPONSIVE HEADER
========================================== */

@media (max-width: 768px) {

    /* Header Container */
    .navbar,
    .header,
    .main-header {
        padding: 10px 15px;
        height: auto;
    }

    /* Logo */
    .logo img,
    .navbar-brand img {
        max-width: 180px;
        height: auto;
    }

    /* Hide Desktop Menu */
    .nav-menu,
    .navbar-nav,
    .menu,
    .main-menu {
        display: none !important;
    }

    /* Hide Header Buttons */
    .btn-guidance,
    .btn-enroll,
    .header-buttons {
        display: none !important;
    }

    /* Show Mobile Toggle */
    .navbar-toggler,
    .menu-toggle,
    .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Mobile Header Layout */
    .header-inner,
    .navbar .container,
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* =====================================
   MOBILE OFFCANVAS MENU
===================================== */

@media (max-width: 991px) {

    .offcanvas {
        width: 320px !important;
        max-width: 85vw;
    }

    .offcanvas-body {
        padding: 20px;
        overflow-y: auto;
    }

    .menu-list-container {
        margin: 0;
        padding: 0;
    }

        .menu-list-container > li {
            border-bottom: 1px solid #e5e5e5;
        }

            .menu-list-container > li > a,
            .dropdown-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 18px 0;
                font-size: 18px;
                font-weight: 500;
                color: #22304a;
                text-decoration: none;
                cursor: pointer;
            }

    /* SUB MENU */

    .dropdown-menu-mobile {
        display: none;
        list-style: none;
        padding: 0 0 10px 15px;
        margin: 0;
        background: #f8f9fa;
        border-radius: 10px;
    }

        .dropdown-menu-mobile li {
            margin: 0;
        }

            .dropdown-menu-mobile li a {
                display: block;
                padding: 10px 15px;
                font-size: 15px;
                color: #555;
                text-decoration: none;
                border-bottom: 1px solid #ececec;
            }

            .dropdown-menu-mobile li:last-child a {
                border-bottom: none;
            }

            .dropdown-menu-mobile li a:hover {
                color: #0d6efd;
                background: #fff;
            }

    /* OPEN STATE */

    .mobile-dropdown.active .dropdown-menu-mobile {
        display: block;
    }

    .mobile-dropdown.active .bi-chevron-down {
        transform: rotate(180deg);
    }

    .bi-chevron-down {
        transition: 0.3s ease;
    }

    /* BUTTONS */

    .mobile-btn-green,
    .mobile-btn-blue {
        height: 54px;
        font-size: 15px;
        border-radius: 10px;
    }

    /* LOGO */

    .offcanvas-header .custom-brand-logo img {
        max-width: 180px;
        height: auto;
    }
}
@media (max-width: 991px) {

    .site-wrapper {
        padding-top: 80px;
    }

    .hero-section,
    .banner-section {
        margin-top: 15px;
    }
}

@media (max-width:991px) {

    .header-height {
        height: auto !important;
    }

    .header {
        position: relative !important;
    }

    .main-header {
        padding: 10px 15px !important;
        min-height: auto !important;
    }

    .custom-brand-logo img {
        max-width: 220px;
        height: auto;
    }
}




/* ==========================================
   MOBILE HEADER & OFFCANVAS
========================================== */
@media (max-width: 991.98px) {

    /* Header */
    .top-header {
        display: none !important;
    }

    .header-height {
        height: auto !important;
    }

    .header {
        position: relative !important;
        width: 100%;
    }

    .main-header {
        padding: 12px 15px !important;
        min-height: auto !important;
        background: #fff;
    }

    .header-logo-wrapper {
        flex: 1;
    }

    .custom-brand-logo img {
        max-width: 220px;
        width: 100%;
        height: auto;
        display: block;
    }

    .menu-icon {
        margin-left: 10px;
    }

        .menu-icon i {
            font-size: 28px !important;
        }

    /* ==========================================
       OFFCANVAS
    ========================================== */

    .offcanvas {
        width: 320px !important;
        max-width: 90vw;
        background: #fff;
    }

    .offcanvas-header {
        padding: 15px;
        border-bottom: 1px solid #e5e5e5;
    }

    .offcanvas-body {
        padding: 15px !important;
        overflow-y: auto;
    }

    /* Social Icons */

    .mobile-social-icon {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #0d4f7c;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }

    /* Buttons */

    .mobile-btn-green,
    .mobile-btn-blue {
        height: 52px;
        border-radius: 10px;
        font-size: 15px;
    }

    /* Menu */

    .menu-list-container {
        margin: 0;
        padding: 0;
    }

        .menu-list-container > li {
            border-bottom: 1px solid #ececec;
        }

            .menu-list-container > li > a,
            .dropdown-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 18px 0;
                font-size: 17px;
                font-weight: 500;
                color: #24344d;
                text-decoration: none;
            }

                .dropdown-header a {
                    text-decoration: none;
                    color: inherit;
                    flex: 1;
                }

                .dropdown-header i {
                    transition: 0.3s ease;
                }

    /* Submenu */

    .dropdown-menu-mobile {
        display: none;
        list-style: none;
        margin: 0 0 10px 0;
        padding: 0;
        background: #f8f9fa;
        border-radius: 8px;
        overflow: hidden;
    }

        .dropdown-menu-mobile li {
            border-bottom: 1px solid #ececec;
        }

            .dropdown-menu-mobile li:last-child {
                border-bottom: none;
            }

        .dropdown-menu-mobile a {
            display: block;
            padding: 12px 18px;
            color: #555;
            text-decoration: none;
            font-size: 14px;
        }

            .dropdown-menu-mobile a:hover {
                background: #fff;
                color: #0d6efd;
            }

    /* Active Dropdown */

    .mobile-dropdown.active .dropdown-menu-mobile {
        display: block;
    }

    .mobile-dropdown.active .bi-chevron-down {
        transform: rotate(180deg);
    }

    /* Sticky Register Button */

    .sticky-reg-btn-wrapper {
        z-index: 1040;
    }

    .offcanvas.show {
        z-index: 1060;
    }

    /* Prevent White Gap */

    body,
    .site-wrapper {
        margin: 0;
        padding: 0;
    }

    .header-height,
    .header,
    .main-header {
        margin-bottom: 0 !important;
    }
}





.headingcourse {
    color: white;
    text-align: center;
    font-weight: 500;
    /* This forces the heading to be a full-width block row */
    display: block;
    width: 100%;
    clear: both;
    margin-bottom: 20px; /* Optional: adds some breathing room above the cards */
}


/* 1. Parent Container: Stack the title and cards vertically, then center them */
.courses-dark-section {
    display: flex;
    flex-direction: column; /* Stacks heading on top of the cards */
    align-items: center; /* Centers everything horizontally */
    justify-content: center; /* Centers everything vertically if there's extra height */
    width: 100%;
    padding: 60px 20px; /* Gives the section some breathing room top/bottom */
    box-sizing: border-box;
}

/* 2. Heading: Make sure the text itself centers */
.headingcourse {
    text-align: center;
    width: 100%;
    margin-bottom: 40px; /* Creates a nice gap between the title and the cards */
/*    font-size: 36px;
    font-weight: 700;
    color: #1a365d;
    margin: 0 0 10px 0;*/
}

/* 3. Card Container: Center the individual cards inside the grid wrapper */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the cards horizontally within their wrapper */
    gap: 30px; /* Keeps a clean spacing between each card */
    width: 100%;
    max-width: 1200px; /* Stops the cards from stretching too far on huge screens */
}


/* <!-- Lead Generation Popup -->*/

/* Overlay */
/* Overlay */

.lead-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(4px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    padding: 20px;
}

/* Popup Box */

.lead-popup-box {
    width: 100%;
    max-width: 1050px;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25), 0 10px 25px rgba(0,0,0,0.12);
    animation: popupScale .4s ease;
}

@@keyframes popupScale {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Close Button */

.lead-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #f2f2f2;
    cursor: pointer;
    font-size: 28px;
    font-weight: 700;
    z-index: 10;
    transition: .3s;
}

    .lead-close-btn:hover {
        transform: rotate(90deg);
    }

/* Layout */

.lead-popup-content {
    display: flex;
    min-height: 600px;
}

/* Left Side */

.lead-left {
    width: 50%;
    background: linear-gradient(135deg,#0f172a,#1e293b);
    color: #fff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lead-badge {
    display: inline-block;
    background: #22c55e;
    color: #fff;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 25px;
    width: fit-content;
}

.lead-left h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.lead-left p {
    font-size: 16px;
    line-height: 1.8;
    color: #dbe4f0;
    margin-bottom: 30px;
}

.lead-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .lead-benefits li {
        margin-bottom: 15px;
        font-size: 16px;
    }

/* Right Side */

.lead-right {
    width: 50%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .lead-right h3 {
        text-align: center;
        font-size: 32px;
        margin-bottom: 30px;
        color: #111827;
    }

/* Inputs */

.popup-input-group {
    margin-bottom: 18px;
}

    .popup-input-group input,
    .popup-input-group select {
        width: 100%;
        height: 55px;
        border: 1px solid #dcdcdc;
        border-radius: 12px;
        padding: 0 16px;
        font-size: 15px;
        outline: none;
        transition: .3s;
    }

        .popup-input-group input:focus,
        .popup-input-group select:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 4px rgba(37,99,235,.15);
        }

/* Button */

.lead-submit-btn {
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

    .lead-submit-btn:hover {
        transform: translateY(-2px);
    }

/* Responsive */

@media(max-width:992px) {

    .lead-popup-content {
        flex-direction: column;
    }

    .lead-left,
    .lead-right {
        width: 100%;
    }

    .lead-left {
        padding: 40px 30px;
    }

    .lead-right {
        padding: 40px 25px;
    }

    .lead-left h2 {
        font-size: 30px;
    }
}

@media(max-width:576px) {

    .lead-popup-overlay {
        padding: 10px;
    }

    .lead-left h2 {
        font-size: 26px;
    }

    .lead-right h3 {
        font-size: 24px;
    }

    .popup-input-group input,
    .popup-input-group select {
        height: 50px;
    }
}



/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}




/* -- The Navbar Wrapper -- */
.floating-nav-wrapper {
    position: fixed;
    /* FIX 1: Push it down below your main header! 
           If 85px is too high or low, just change this number. */
    top: 85px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9999 !important; /* Forces it to sit on top of the dark background */
    /* Animation starts hidden above */
    transform: translateY(-150%);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    pointer-events: none;
    margin-top: 10px;
}

    /* When scrolled */
    .floating-nav-wrapper.visible {
        transform: translateY(0); /* Drops exactly to the 85px mark */
        opacity: 1;
        pointer-events: auto;
    }

/* -- The Dark Nav Design -- */
.custom-pill-nav {
    /* 1. NEW: Forces the bar to stretch */
    width: 100%;
    /* 2. NEW: Change this number until the edges perfectly match your logo and button */
    max-width: 1150px;
    /* 3. NEW: Keeps all the links neatly grouped in the center of the wide bar */
    justify-content: center;
    /* Keep your existing styles: */
    background-color: #4a4a4a;
    border: 1px solid #666666;
    border-radius: 30px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 15px; /* I slightly increased this gap so the links don't look too crowded on the wide bar */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Also, add this quick fix to the wrapper so it doesn't touch the screen edges on mobile devices */
.floating-nav-wrapper {
    /* ... keep your existing properties ... */
    padding: 0 20px;
}

    /* FIX 2: Added !important and white-space to force the correct design */
    .custom-pill-nav .nav-link {
        color: #ffffff !important;
        text-decoration: none !important;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 600;
        font-size: 15px;
        padding: 10px 24px;
        border-radius: 50px;
        white-space: nowrap !important; /* Stops the text from squishing */
        transition: all 0.3s ease;
    }

        /* Hover effect */
        .custom-pill-nav .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* ACTIVE HIGHLIGHT STATE */
        .custom-pill-nav .nav-link.active {
            background-color: #f97316 !important; /* Bright Orange */
            color: #ffffff !important;
            box-shadow: 0 4px 10px rgba(249, 115, 22, 0.4);
        }

/* Mobile adjustments */
@media (max-width: 900px) {
    .custom-pill-nav {
        max-width: 95%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

        .custom-pill-nav::-webkit-scrollbar {
            display: none;
        }
}
/* Target the <a> tags directly */
.custom-pill-nav a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 10px 24px !important;
    margin: 0 2px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
}

    /* The Hover Effect */
    .custom-pill-nav a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* The Active (Orange) Effect */
    .custom-pill-nav a.active {
        background-color: #f97316 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 10px rgba(249, 115, 22, 0.4) !important;
    }


/* =========================
   HERO SECTION
========================= */

.hero-slider {
    position: relative;
    min-height: 550px;
    height: 70vh;
    overflow: hidden;
}

/* Fixed Blue Shadow */
.hero-fixed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: rgba(0, 18, 90, 0.82);
    border-top-right-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
    z-index: 10;
    pointer-events: none;
}

/* Swiper */
.heroSwiper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Background Image */
.slider-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Content */
.slider-content {
    position: absolute;
    top: 50%;
    left: 90px;
    transform: translateY(-50%);
    z-index: 20;
    max-width: 650px;
}

/* Subtitle */
.hero-subtitle {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #00d9ff;
    margin-bottom: 20px;
}

/* Title */
.hero-title {
    font-size: 60px;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
}

    .hero-title span {
        color: #ffffff;
        display: block;
    }

/* Navigation Arrows */
.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev {
    color: #0d6efd;
}

/* Responsive */
@media (max-width: 991px) {

    .hero-slider {
        height: 600px;
    }

    .hero-fixed-overlay {
        width: 80%;
    }

    .slider-content {
        left: 40px;
        right: 20px;
        max-width: 100%;
    }

    .hero-title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {

    .hero-fixed-overlay {
        width: 100%;
        border-radius: 0;
        background: rgba(0, 18, 90, 0.75);
    }

    .slider-content {
        left: 20px;
        right: 20px;
    }

    .hero-title {
        font-size: 32px;
        line-height: 1.25;
    }

    .hero-subtitle {
        font-size: 14px;
    }
}






.hero-fixed-overlay {
    z-index: 5;
}






.slider-content {
    position: absolute;
    top: 50%;
    left: 90px;
    transform: translateY(-50%);
    z-index: 9999;
}

.hero-title,
.hero-title span {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-subtitle {
    color: #00d9ff !important;
    opacity: 1 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}




.hero-fixed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: rgba(0,18,90,0.55); /* was .82 */

    border-top-right-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
    z-index: 5;
    pointer-events: none;
}




.hero-title,
.hero-title span {
    color: #fff !important;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 20px rgba(255,255,255,.15);
}


.hero-fixed-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient( 120deg, rgba(160, 32, 240, 0.70) 0%, rgba(123, 97, 255, 0.68) 30%, rgba(44, 130, 255, 0.65) 70%, rgba(0, 212, 255, 0.55) 100% );
    border-top-right-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
}