 {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', system-ui, sans-serif;
     background: black;
 }

 /* ====================== LEARNING FORMAT SECTION ====================== */
 .learning-format-section {
     background: radial-gradient(circle, rgba(51, 74, 204, 1) 0%, rgba(0, 0, 0, 1) 56%);
     padding: 70px 0;
 }

 .section-title {
     font-size: 38px;
     font-weight: 700;
     color: white;
     margin-bottom: 10px;
     text-align: center;
 }

 .section-subtitle {
     font-size: 17px;
     color: #cbd5e1;
     font-weight: 500;
     text-align: center;
     margin-bottom: 50px;
 }

 /* Custom Grid for Side by Side */
 .learning-format-row {
     display: flex;
     gap: 24px;
     flex-wrap: wrap;
     justify-content: center;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .learning-format-col {
     flex: 1;
     min-width: 300px;
     max-width: 520px;
 }

 @media (min-width: 992px) {
     .learning-format-row {
         flex-wrap: nowrap;
     }
 }

 /* Card Styles */
 .learning-format-card {
     background: white;
     border-radius: 16px;
     overflow: hidden;
     height: 100%;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
 }

 .learning-format-card:hover {
     transform: translateY(-8px);
 }

 .card-img-container {
     padding: 12px 12px 0 12px;
     /* Space around image */
     background: white;
 }

 .card-img {
     width: 100%;
     height: 300px;
     object-fit: cover;
     border-radius: 35px;
     padding: 20px;

 }

 .card-content {
     padding: 26px 28px;
     background: white;
     color: #1e2937;
 }

 .card-title {
     color: #fbbf24;
     /* Yellow for "Digital Marketing Diploma" */
     font-size: 28.5px;
     font-weight: 700;
     margin-bottom: 12px;
 }

 .card-title span {
     font-size: 17px;
     font-weight: 600;
     color: #233042;
     /* Dark for (Offline / Online) */
 }

 .meta-info {
     display: flex;
     gap: 16px;
     margin-bottom: 18px;
     color: #3c516f;
     font-size: 14.8px;
     flex-wrap: wrap;
 }

 .meta-info i {
     color: #fbbf24;
     /* Yellow icons */
 }

 .description {
     color: #1e2937;
     line-height: 1.62;
     margin-bottom: 22px;
     font-size: 15px;
 }

 .features-list {
     list-style: none;
     padding: 0;
     margin-bottom: 26px;
     color: #334155;
 }

 .features-list li {
     padding: 6px 0;
     font-size: 14.8px;
     position: relative;
     padding-left: 22px;
 }

 .features-list li::before {
     content: "✓";
     color: #fbbf24;
     /* Yellow checkmarks */
     position: absolute;
     left: 0;
     font-weight: bold;
 }

 .view-more-btn {
     background: #fbbf24;
     color: #1e2937;
     padding: 12px 32px;
     border-radius: 50px;
     font-weight: 600;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 15px;
     transition: all 0.3s ease;
 }

 .view-more-btn:hover {
     background: #f59e0b;
     transform: translateY(-2px);
 }

 /* Mobile Responsive */
 @media (max-width: 768px) {
     .learning-format-section {
         padding: 55px 0;
     }

     .section-title {
         font-size: 32px;
     }

     .learning-format-col {
         max-width: 100%;
     }

     .card-img {
         height: 200px;
     }
 }

 /* Annimation */
/* SCROLL ANIMATION */
.learning-format-col {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.learning-format-col:nth-child(1) {
    transform: translateX(-60px);
}

.learning-format-col:nth-child(2) {
    transform: translateX(60px);
    transition-delay: 0.15s;
}

.learning-format-col.is-visible {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .learning-format-col {
        transition: none;
        opacity: 1;
        transform: none;
    }
}


 /* broucher css */
 .brochure-container {
     max-width: 1450px;
     margin: 63px auto;
     padding: 30px;
     /* background: #0e264a; */
         background: radial-gradient(circle, rgba(51, 74, 204, 1) 0%, rgb(10, 18, 60) 56%);
     border-radius: 12px;

     display: flex;
     align-items: center;
     gap: 30px;
 }

 .brochure-text,
 .brochure-btn {
     flex: 1;
     /* Equal width */
 }

 .program-heading {
     font-size: 32px;
     font-weight: 700;
     color: white;
     margin-bottom: 15px;
 }

 .brochure-text p {
     font-size: 18px;
     line-height: 1.6;
     color: white;
 }

 .brochure-btn {
     display: flex;
     flex-direction: column;
     gap: 20px;
     justify-content: center;
     align-items: center;
 }

 .brochure-btn button {
     padding: 15px 26px;
     border: none;
     border-radius: 30px;
     background: var(--gold) ;
     color: black;
     font-size: 25px;
     font-weight: 400;
     cursor: pointer;
 }

@media (max-width: 768px) {
    .brochure-container {
        flex-direction: column;
        text-align: center;
        margin: 62px 15px 35px 15px;
        padding: 25px;
        gap: 20px;
    }

    .brochure-text,
    .brochure-btn {
        width: 100%;
    }

    .brochure-btn button {
        font-size: 22px;
        padding: 15px 25px;
    }
}

@media (max-width: 360px) {
    .brochure-container {
        flex-direction: column;
        text-align: center;
        margin: 10px 10px;
        padding: 15px;
        gap: 20px;
    }

    .brochure-text,
    .brochure-btn {
        width: 100%;
    }

    .brochure-btn button {
        font-size: 15px;
        padding: 15px 25px;
    }
}

 /* Course Flow */
 .slider {
     overflow: hidden;
     white-space: nowrap;
     width: 100%;
     padding: px 0 20px 0;
 }

 .slide-track {
     display: flex;
     width: max-content;
     animation: scroll 20s linear infinite;
     margin-top: 26px;
 }

 .slide-item {
     background: #fff;
     color: #050e1e;
     padding: 10px 20px;
     margin: 0 10px;
     border-radius: 10px;
     font-weight: 700;
     font-size: 17px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     transition: 0.3s;
 }

 .slide-item:hover {
     color: #fff;
 }

 /* Smooth infinite animation */
 @keyframes scroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }



 /* Highlight Section */
 :root {
     --navy: #0b1a4d;
     --gold: #f5c518;
     --cream-icon-bg: #fdf2da;
     --white: #ffffff;
     --text-dark: #0b1a4d;
     --text-muted: #3a4a78;
 }

 * {
     box-sizing: border-box;
 }

 /* Highligh Section  */

 .highlights-section {
     background: #000;
     background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
     background-size: 14px 14px;
     background-position: -7px -7px;
     padding: 60px 5% 80px;
     position: relative;
     overflow: hidden;
     font-family: 'Segoe UI', Arial, sans-serif;
 }

 .highlights-header {
     text-align: center;
     max-width: 900px;
     margin: 0 auto 50px;
 }

 .highlights-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--gold);
     color: var(--navy);
     font-weight: 800;
     font-size: 13px;
     letter-spacing: 0.5px;
     padding: 9px 22px;
     border-radius: 30px;
     margin-bottom: 22px;
 }

 .highlights-badge svg {
     width: 16px;
     height: 16px;
 }

 .highlights-title {
     color: var(--white);
     font-size: 42px;
     font-weight: 800;
     line-height: 1.2;
     margin: 0 0 8px;
 }

 .highlights-title .accent {
     color: var(--gold);
 }

 .highlights-subtitle {
     color: #d7dcf0;
     font-size: 16px;
     line-height: 1.6;
     margin: 18px auto 0;
     max-width: 760px;
 }

 .highlights-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 22px;
     max-width: 1400px;
     margin: 0 auto;
     position: relative;
     z-index: 2;
 }

 .highlight-card {
     background: var(--white);
     border-radius: 14px;
     padding: 30px 22px 26px;
     text-align: center;
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
 }

 .icon-wrap {
     width: 72px;
     height: 72px;
     background: var(--cream-icon-bg);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 18px;
 }

 .icon-wrap svg {
     width: 34px;
     height: 34px;
     stroke: var(--navy);
 }

 .icon-wrap.social-icons {
     gap: 4px;
 }

 .icon-wrap.social-icons img {
     width: 24px;
     height: 24px;
     border-radius: 6px;
 }

 .card-title {
     color: var(--text-dark);
     font-size: 17px;
     font-weight: 800;
     line-height: 1.3;
     margin: 0 0 10px;
 }

 .card-divider {
     width: 36px;
     height: 3px;
     background: var(--gold);
     border-radius: 2px;
     margin: 0 auto 14px;
 }

 .card-text {
     color: var(--text-muted);
     font-size: 13.5px;
     line-height: 1.6;
     margin: 0;
 }

 @media (max-width: 1100px) {
     .highlights-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .highlights-title {
         font-size: 34px;
     }
 }

 @media (max-width: 700px) {
     .highlights-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
     }

     .highlights-title {
         font-size: 26px;
     }

     .highlights-subtitle {
         font-size: 14px;
     }
 }

 @media (max-width: 460px) {
     .highlights-grid {
         grid-template-columns: 1fr;
     }
 }



 /* Certification SECTION */
 .certificate-gallery-section {
     background: #000;
     padding: 0px 20px;
     text-align: center;
 }
 

 /* TITLE */
 .certificate-gallery-title {
     color: white;
     font-size: 40px;
     font-weight: 700;
     margin-bottom: 50px;
 }

 .certificate-gallery-title span {
     color: #FBCC49;
 }

 /* GRID */
 .certificate-gallery-grid {
     max-width: 1200px;
     margin: 0 auto;

     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
 }

 /* CARD */
.certificate-gallery-card {
    background: #111;
    border-radius: 12px;
    padding: 15px;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;
    transition: all 0.8s ease;
}

/* Left cards */
.certificate-gallery-card:nth-child(1),
.certificate-gallery-card:nth-child(3) {
    transform: translateX(-100px);
}

/* Right cards */
.certificate-gallery-card:nth-child(2),
.certificate-gallery-card:nth-child(4) {
    transform: translateX(100px);
}

/* Visible state */
.certificate-gallery-card.show {
    opacity: 1;
    transform: translateX(0);
}

/* Delay for smooth effect */
.certificate-gallery-card:nth-child(1) {
    transition-delay: 0s;
}

.certificate-gallery-card:nth-child(2) {
    transition-delay: 0.2s;
}

.certificate-gallery-card:nth-child(3) {
    transition-delay: 0.4s;
}

.certificate-gallery-card:nth-child(4) {
    transition-delay: 0.6s;
}

 /* F&Q Section */
 /* FAQ Section Background */
 .faq-section {
     background: #000;
     padding: 0px 20px;
 }

 /* White FAQ Container */
 .faq-container {
     max-width: 1400px;
     margin: 35px auto;
     background: #fff;
     padding: 40px;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
 }

 /* Heading */
 .faq-container h2 {
     text-align: center;
     font-size: 36px;
     font-weight: 700;
     color: #000;
     margin-bottom: 30px;
 }

 /* FAQ Items */
 .faq-container details {
     border: 1px solid #ddd;
     border-radius: 8px;
     margin-bottom: 15px;
     padding: 18px 20px;
     background: #fff;
 }

 /* Question */
 .faq-container summary {
     cursor: pointer;
     color: #000;
     font-size: 18px;
     font-weight: 600;
     list-style: none;
     position: relative;
     padding-right: 30px;
 }

 /* Hide default arrow */
 .faq-container summary::-webkit-details-marker {
     display: none;
 }

 /* Plus Icon */
 .faq-container summary::after {
     content: "+";
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     font-size: 24px;
     font-weight: bold;
 }

 /* Minus Icon when open */
 .faq-container details[open] summary::after {
     content: "−";
 }

 /* Answer */
 .faq-container p {
     margin-top: 15px;
     color: #333;
     font-size: 16px;
     line-height: 1.7;
 }

 /* Mobile Responsive */
 @media (max-width: 768px) {
     .faq-section {
         padding: 60px 15px;
     }

     .faq-container {
         padding: 25px;
     }

     .faq-container h2 {
         font-size: 28px;
     }

     .faq-container summary {
         font-size: 16px;
     }

     .faq-container p {
         font-size: 15px;
     }
 }

 /* Company images */
 .partner-section {
     background: #000;
     padding: 0px 20px;
     overflow: hidden;
 }

 .partner-wrapper {
     max-width: 1200px;
     margin: 0 auto;
 }

 .partner-heading {
     text-align: center;
     color: #fff;
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 40px;
     line-height: 1.4;
 }

 .partner-slider-container {
     width: 100%;
     overflow: hidden;
 }

 .partner-slider {
     display: flex;
     align-items: center;
     gap: 40px;
     width: max-content;
     animation: partnerScroll 25s linear infinite;
 }

 .partner-slider img {
     width: 160px;
     height: 90px;
     object-fit: contain;
     background: #fff;
     padding: 12px;
     border-radius: 10px;
     flex-shrink: 0;
 }

 @keyframes partnerScroll {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 /* Mobile */
 @media (max-width: 768px) {
     .partner-heading {
         font-size: 1.5rem;
     }

     .partner-slider img {
         width: 120px;
         height: 70px;
     }

     .partner-slider {
         gap: 20px;
     }
 }