html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
    font-family: inherit;
}


.titles-b-new {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-size: 35px;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 0.01em;
  text-align: center;
  
}
 .sp4-title {
      color:red;
        font-size: 25px;
        /*text-align: center;*/

    }
.banner-title-new
{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-size: 25px;
  font-weight: 700;
  line-height: 64px;
  letter-spacing: 0.01em;

  
}

/* Section */

#sp4-learning-section {

    position: relative;
      padding: 50px 15px;
    background: #fff;
    overflow: hidden;

}

/* Container must be above circles */

.sp4-container {

    position: relative;
    z-index: 2;

}


/* Center container */
.sp4-header-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Course Title */
.sp4-course-title {
    color: red;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 5px;
    font-family: Inter, sans-serif;
    text-align: center;
}

/* Breadcrumb */
.sp4-breadcrumb {
    font-size: 15px;
    margin-bottom: 25px;
    color: #666;
    text-align: center;
}

/* Breadcrumb links */
.sp4-breadcrumb a {
    color: #666;
    text-decoration: none;
}

/* Active breadcrumb */
.sp4-active {
    color: #000;
    font-weight: 600;
}





/* Video */

.sp4-video iframe {

    width: 100%;
    height: 260px;
    border-radius: 12px;
    border: none;

}


/* Floating circles */

.sp4-circle {

    position: absolute;
    border-radius: 50%;
    opacity: 0.2;
    z-index: 1;
    animation: sp4-float 6s infinite ease-in-out;

}

.sp4-circle-1 {

    width: 140px;
    height: 140px;
    background: #6366f1;
    top: 20px;
    right: 3%;

}

.sp4-circle-2 {

    width: 80px;
    height: 80px;
    background: #ec4899;
    bottom: 30px;
    left: 3%;

}

.sp4-circle-3 {

    width: 50px;
    height: 50px;
    background: #06b6d4;
    top: 60%;
    right: 18%;

}

/* Animation */

@keyframes sp4-float {

    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }

}


/* Tablet */

@media (max-width: 991px) {

    .sp4-video {

        margin-top: 20px;

    }
    
     #sp4-learning-section {

        padding: 25px 15px;

    }

    .sp4-course-title {
        color:red;
        font-size: 28px;
        text-align: center;

    }

    .sp4-breadcrumb {

        text-align: center;
        font-size: 13px;

    }

    .sp4-title {

        font-size: 20px;
        text-align: center;

    }

    .sp4-video iframe {

        height: 190px;

    }

    /* Hide circles on mobile */

    .sp4-circle {

        display: none;

    }


}

 


/* Mobile */

@media (max-width: 576px) {

    #sp4-learning-section {

        padding: 25px 15px;

    }

    .sp4-course-title {
        color:red;
        font-size: 28px;
        text-align: center;

    }

    .sp4-breadcrumb {

        text-align: center;
        font-size: 13px;

    }

    .sp4-title {

        font-size: 22px;
        text-align: center;
        color:red;

    }

    .sp4-video iframe {

        height: 190px;

    }

    /* Hide circles on mobile */

    .sp4-circle {

        /*display: none;*/

    }

}


/* ===== HEADER SECTION ===== */
.cf-header-section {
background: linear-gradient(50deg, #d8d1d1 0%, #fbadad 40%, #c4001d 100%);
    padding: 10px 10px;
    text-align: center;
    color: #fff;
    position: relative;
}

/* subtle pattern overlay */
.cf-header-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 40%);
    pointer-events: none;
}

.cf-header-container {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: auto;
}

/* Title */
.cf-title {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Divider Line */
.cf-divider {
    width: 70px;
    height: 4px;
    background: #ffd700;
    margin: 15px auto 25px auto;
    border-radius: 5px;
}

/* Breadcrumb */
.cf-breadcrumb {
    font-size: 16px;
}

.cf-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.85;
    transition: 0.3s;
}

.cf-breadcrumb a:hover {
    color: #ffd700;
    opacity: 1;
}

.cf-breadcrumb span {
    margin: 0 8px;
    opacity: 0.6;
}

.cf-active {
    color: #ffd700;
    font-weight: 600;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 992px) {
    .cf-title {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .cf-header-section {
        padding: 15px 15px;
    }

    .cf-title {
        font-size: 30px;
    }

    .cf-breadcrumb {
        font-size: 12px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .cf-title {
        font-size: 24px;
    }

    .cf-divider {
        width: 50px;
    }
}

/* Layout */
.course-layout {
    display: flex;
    gap: 30px;
}

/* Sidebar */
.course-filter {
    width: 280px;
    background: #f5f6f8;
    border-radius: 12px;
    padding: 20px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* Products */
.course-products {
    flex: 1;
}




.product-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    transition: 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.product-card img {
    width: 100%;
    border-radius: 10px;
}

.enroll-btn {
    background: #c4001d;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.enroll-btn:hover {
    background: #a00018;
}


/* Hide mobile filter bar on desktop */
.mobile-filter-bar {
    display: none;
}

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

    .course-layout {
        flex-direction: column;
    }

 
    .mobile-filter-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    /* Slide filter */
    .course-filter {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        height: 100%;
        z-index: 999;
        overflow-y: auto;
        transition: 0.3s ease;
        border-radius: 0;
    }

    .course-filter.active {
        left: 0;
    }

   .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.filter-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}


}




/* Card */
.product-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Image */
.product-image {
    position: relative;
}

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

/* Badge */
.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #23b59c;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Content */
.product-content {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Title */
.product-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    min-height: 60px;
}

/* Price */
.product-price {
    margin-bottom: 15px;
}



.sale-price {
    font-size: 20px;
    font-weight: 700;
    color: #c4001d;
}

/* Button */
.enroll-btn {
    margin-top: auto;
    background: #c4001d;
    color: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.enroll-btn:hover {
    background: #a00018;
}

.product-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr; /* Mobile default */
}

/* Tablet */
@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 993px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


.filter-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f1f3f6;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

/* Left Section */
.filter-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.close-filter {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #555;
}

/* Right Button */
#openFilter {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease;
}

#openFilter:hover {
    background: #e9ecef;
}




#closeFilter {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    display: none; /* hidden by default */
}

/* Show only on mobile */
@media (max-width: 992px) {
    #closeFilter {
        display: block;
    }
}
/* CARD */
.course-card {
    background: #f5f6f8;
    padding: 22px;
    border-radius: 30px;
    transition: 0.3s ease;
    
    
      display: flex;
    flex-direction: column;
    height: auto;        /* important */
}

.course-card:hover {
    transform: translateY(-5px);
}
.course-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
 font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    height: 75px;            /* fixed height for 3 lines */
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 3;    /* maximum 3 lines */
    -webkit-box-orient: vertical;
}


/* TITLE */
/*.course-title {*/
/*    font-size: 18px;*/
/*    font-weight: 600;*/
/*    margin-bottom: 18px;*/
/*}*/

/* TAG SECTION */
.course-tags {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.tag-box {
    /*background: #e9edf3;*/
    background: #ecbaba;
   
    padding: 12px;
    border-radius: 12px;
}

.tag-box span {
    font-size: 14px;
    color: black;
    display: block;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.tag-box strong {
    font-size: 14px;
    color:black;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        
         display: -webkit-box;
    -webkit-line-clamp: 3;  
    -webkit-box-orient: vertical;
    overflow: hidden;

    min-height: 48px;   /* 22px × 3 lines = 66px */
}
/* FACULTY + PRICE */
.faculty-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.faculty-images img {
    width: 92px;
    height: 80px;
    border-radius: 50%;
    margin-right: -10px;
    border: 2px solid #fff;
}

.starting-price span {
    font-size: 13px;
    color: #777;
}

.starting-price strong {
    font-size: 20px;
    font-weight: 700;
}
.starting-price .price1 {
       font-size: 18px;
       font-family:bold;
    color: #000 !important;
}
.starting-price .mrp1 {
       font-size: 18px;
       font-family:bold;
    color: #000 !important;
}

/* BUTTONS */
.button-group {
    display: flex;
    gap: 10px;
}

/*.buy-btn {*/
/*    flex: 1;*/
/*    background: red;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    padding: 12px;*/
/*    border-radius: 10px;*/
/*    font-weight: 600;*/
/*    text-decoration: none;*/
/*}*/
.buy-btn {
    background: #e60000;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    flex: 1;
}

.whatsapp-btn1 {
    background: #000000;
   /*//  background: #4CAF50;*/
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    flex: 1;
}

.buy-btn:hover {
    background: black;
}

/*.whatsapp-btn1:hover {*/
/*    background: #e60000;*/
/*      color: #fff;*/
/*}*/
.whatsapp-btn {
    flex: 1;
    border: 1px solid #25D366;
    color: #25D366;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
}

.whatsapp-btn:hover {
    background: #25D366;
    color: #fff;
}

.faculty-slider {
    width: 90px;            /* show only 2 images */
    overflow: hidden;
    display: flex;
    position: relative;
}

.faculty-slider img {
    width: 130px;
    height: 110px;
    border-radius: 10%;
    margin-right: 10px;
    flex-shrink: 0;
    transition: transform 0.5s ease;
}
.price-enroll-row {
    text-align: right;
}
.starting-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.mrp1 {
    font-size: 13px;
    color: #000;
    text-decoration: line-through;
    margin-bottom: 3px;
}

.price1 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
}
.close-btn {
    background: none;
    border: none;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}

.close-btn:hover {
    color: red;
}
@media (min-width: 992px) {
    #closeFilter {
        display: none;
    }
}
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 12px;
    }
}
@media (max-width: 768px) {
    .course-card {
        width: 90%;       /* Reduce width */
        margin: 0 auto;   /* Center it */
        padding: 15px;    /* Optional: reduce padding */
        border-radius: 20px; /* Optional: smaller radius */
    }
}

.discount {
     color: #fff !important;
    background: #f80000 !important;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 600;
}

.whatsapp-btn10 {
      display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
    margin-top: 10px;
    color: #25D366;
    font-size: 22px;
    text-decoration: none;
}

.whatsapp-btn10:hover {
    color: #1ebe5d;
}

.contact-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.contact-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    background: transparent;
}

/* WhatsApp Outline */
.whatsapp-btn {
    border: 2px solid #25D366;
    color: #25D366;
}

.whatsapp-btn:hover {
    background: #25D366;
    color: #fff;
}

/* Call Outline */
.call-btn {
    border: 2px solid #c71f2d;
    color: #c71f2d;
}

.call-btn:hover {
    background: #c71f2d;
    color: #fff;
}

/* Popup */
.call-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
}

.call-popup-content {
    background: #fff;
    width: 320px;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.call-now-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background: #c71f2d;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

.close-btn {
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 20px;
    cursor: pointer;
}

.call-popup-content form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.call-popup-content input {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.call-now-btn {
    background: #c71f2d;
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.success-msg {
    background: #d4edda;
    color: #155724;
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    border: 1px solid #c3e6cb;
    font-weight: 500;
}


.text-emerald-900 {
    background: #fdecec;
  
    
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 768px) {

    /* Buttons full width on mobile */
    .contact-btn {
        font-size: 13px;
        padding: 10px;
    }

    .button-group {
        flex-direction: column;
        gap: 10px;
    }

    /* Popup full responsive */
    .call-popup-content {
        width: 90%;              /* instead of fixed 320px */
        max-width: 350px;
        padding: 15px;
        border-radius: 8px;
    }

    .call-popup-content input {
        font-size: 14px;
        padding: 10px;
    }

    .call-now-btn {
        width: 100%;
        padding: 10px;
        font-size: 14px;
    }

    .close-btn {
        font-size: 22px;
    }
}

/* ===== OVERVIEW SECTION ===== */
.spc-overview-section {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

/* ===== EACH ROW ===== */
.spc-overview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: 0.3s ease;
}

.spc-overview-item:last-child {
    border-bottom: none;
}

.spc-overview-item:hover {
    background: #fafafa;
}

/* LEFT SIDE */
.spc-overview-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spc-icon {
    font-size: 18px;
}

.spc-title {
    font-weight: 600;
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #222;
     font-size: 16px;
}

/* RIGHT SIDE */
.spc-overview-right {
    font-weight: 400;
    /*color: #666;*/
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #222;
     font-size: 16px;
    text-align: right;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .spc-overview-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .spc-overview-right {
        text-align: left;
    }
}
/* ===== WRAPPER ===== */
.spc-system-wrapper {
    background: #f1c4c4;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

/* HEADER */
.spc-system-header h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 10px;
}

.spc-system-header p {
    color: #666;
    margin-bottom: 30px;
}

/* GRID */
.spc-system-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

/* CARD */
.spc-system-card {
    background: #fafafa;
    padding: 25px;
    border-radius: 14px;
    border: 1px solid #eee;
    transition: 0.3s ease;
}

.spc-system-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

/* TITLE */
.spc-system-title {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #c71f2d; /* Your red theme */
}

/* LIST */
.spc-system-card ul {
    padding-left: 18px;
    color: #555;
}

.spc-system-card li {
    margin-bottom: 8px;
}

/* MOBILE */
@media (max-width: 768px) {
    .spc-system-wrapper {
        padding: 20px;
    }
    
    .discount {
     color: #fff !important;
    background: #f80000 !important;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 600;
}

}

.new-ul
{
 font-size: var(--font-size-b2);
 color: #2e2929;
}

.li-t{
    color: black; 
}

/* ===== HERO SECTION ===== */
.hero{
  background:#cccccc;
    color:#5e4747;
    padding:80px 0;
}

.hero-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:40px;
}

.hero-text{
    flex:1;
    min-width:300px;
}

.hero-text h1,h2{
    font-size:25px;
}
 .li-c{
     font-size:15px;
     color:red;
     
}

 .li-cc{
     font-size:25px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     
 }
 .li-cc22{
     font-size:15px;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color:black;
     
 }
.hero-text p{
    font-size:18px;
    margin-bottom:20px;
}

.hero-text ul{
    list-style:none;
    padding:0;
}

.hero-text ul li{
    margin-bottom:8px;
}

.form-box{
    background:#fff;
    padding:30px;
    border-radius:10px;
    width:350px;
    color:#000;
}

.form-box h3{
    text-align:center;
}

.form-box input,
.form-box select{
    width:100%;
    padding:12px;
    margin:8px 0;
    border-radius:6px;
    border:1px solid #ccc;
}

.form-box button{
    width:100%;
    padding:14px;
    background:#ff6a00;
    border:none;
    color:#fff;
    font-weight:bold;
    border-radius:6px;
    cursor:pointer;
}

.form-box button:hover{
    background:#e65c00;
}

.tagline{
    margin-top:15px;
    font-weight:600;
    font-size:14px;
    color:#ffd700;
}

/* ===== CONTENT SECTIONS ===== */
.white-section{
    background:#fff;
}

.highlight-box {
    background: #c9d1e3;
    color: #000;          /* Black text */
    font-weight: bold;    /* Bold text */
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

ul.checklist{
    list-style:none;
    padding:0;
}

ul.checklist li{
    margin-bottom:8px;
}

/* ===== FAQ ===== */
.faq-item{
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin-bottom:15px;
    background:#d0d6e3;
    padding:15px;
    border-radius:6px;
}
.faq-item strong {
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #000;   /* Ensure heading is also black */
}
.faq-item p {
     font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     font-size:14px;   /* Ensure heading is also black */
      color: #000;   /* Ensure heading is also black */
}
/* ===== FOOTER CTA ===== */
.footer-cta{
    background:#cccccc;
    color:#5e4747;
    text-align:center;
    padding:50px 20px;
}

.footer-cta h2{
    margin-bottom:10px;
}

.footer{
    text-align:center;
    padding:20px;
    background:#000;
    color:#fff;
    font-size:14px;
}

/* ===== MOBILE ===== */
@media(max-width:768px){
    .hero-flex{
        flex-direction:column;
        text-align:center;
    }
    .hero-text h1{
        font-size:28px;
    }
    .form-box{
        width:100%;
    }
}
/* ===== WHY SPC SECTION ===== */

.why-spc {
    background: #f7f9fc;
    padding: 70px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.section-header p {
    color: #555;
    font-size: 16px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
}

.why-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: 0.3s ease;
}

.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.why-card .icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.why-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.why-card p {
    font-size: 14px;
    color: #555;
}

@media (max-width: 768px) {
    .why-grid {
        grid-template-columns: 1fr;  /* Single column on mobile */
    }

    .why-card {
        padding: 20px;
    }

    .why-card h3 {
        font-size: 16px;
    }

    .why-card p {
        font-size: 13px;
    }
}
/* TRUST BOX */

.trust-box {
    margin-top: 50px;
    /*background: linear-gradient(135deg, #0f2027, #203a43);*/
    /*color: #fff;*/
     background:#dacece;
    color:#5e4747;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
}

.trust-box h3 {
    margin-bottom: 15px;
}

.trust-box ul {
    list-style: none;
    padding: 0;
}

.trust-box ul li {
    margin: 8px 0;
    font-weight: 500;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

    .section-header h2 {
        font-size: 24px;
    }

    .why-card {
        padding: 20px;
    }

}

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

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

.hero-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #eef2f7, #f9fbfd);
}

.hero-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* ===== LEFT IMAGE ===== */

.hero-left {
    flex: 1;
}

.hero-left img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

/* ===== RIGHT FORM ===== */

.hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-form {
    background: #0f3c4c;
    padding: 40px;
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    color: #fff;
}

.hero-form h3 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 22px;
    font-weight: 600;
}

/* ===== INPUTS ===== */

.hero-form input {
    width: 90%;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
}

.hero-form input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

/* ===== BUTTON ===== */

.hero-form .btn {
    background: #c71f2d;
    color: #fff;
    font-weight: 600;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}
@media (max-width: 576px) {
    .hero-form .btn {
        width: 100%;          /* Full width */
        padding: 14px;        /* Bigger height */
        font-size: 15px;
        border-radius: 8px;
    }
}
.hero-form .btn:hover {
    background: #a81622;
    transform: translateY(-2px);
}

/* ===== TABLET RESPONSIVE ===== */

@media (max-width: 992px) {

    .hero-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

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

}

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

@media (max-width: 576px) {

    .hero-section {
        padding: 50px 15px;
    }

    .hero-form {
        padding: 30px 20px;
        border-radius: 15px;
    }

    .hero-form h3 {
        font-size: 18px;
    }

    .hero-left img {
        border-radius: 15px;
    }

}

.hero-section1 {
    width: 100%;
    display: flex;
    justify-content: space-between;  /* pushes extreme sides */
    align-items: center;
    padding: 15px 60px;  /* more side spacing */
    background: #0b3f50;
}

.hero1-right {
    display: flex;
    gap: 15px;
}

.hero-logo {
    height: 90px;
}

/* Enquire Button */
.enquire-btn {
    background: #d72638;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
}

/* WhatsApp Button */
.whatsapp-btn {
    background: #2e944b;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
}
.whatsapp-btn:hover {
    background: #1ebe5d;
}

.career-section {
    background: linear-gradient(135deg, #f5f7fa, #e4ecf7);
    padding: 60px 20px;
}

.section-title {
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #111;
}

.career-box {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.career-left {
    flex: 1;
}

.checklist {
    list-style: none;
    padding: 0;
}

.checklist li {
    font-size: 18px;
    margin-bottom: 15px;
    padding-left: 30px;
    position: relative;
    font-weight: 500;
}

.checklist li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #00a859;
    font-weight: bold;
}

.career-right {
    flex: 1;
    background: #f9fbff;
    padding: 25px;
    border-radius: 15px;
}

.career-right h3 {
    margin-bottom: 15px;
    font-size: 22px;
    color: #000;
}

.salary {
    font-size: 18px;
    margin-bottom: 15px;
}

.global-text {
    font-size: 16px;
    color: #555;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .career-box {
        flex-direction: column;
    }
}

/* FULL WIDTH DARK BAR */
.top-header {
    width: 100%;
    background: #0c4a5b;
    padding: 15px 0;
}

/* INNER FLEX */
.top-header-inner {
    width: 100%;
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LOGO */
.logo-box img {
    height: 50px;
}

/* BUTTON GROUP */
.button-group {
    display: flex;
    gap: 20px;
}

/* COMMON BUTTON STYLE */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    transition: 0.3s ease;
}

/* RED BUTTON */
.enquire-btn {
    background: #d8232a;
}

.enquire-btn:hover {
    background: #b71c22;
}

/* GREEN BUTTON */
/*.whatsapp-btn {*/
/*    background: #2e944b;*/
/*}*/

/*.whatsapp-btn:hover {*/
/*    background: #247a3d;*/
/*}*/


@media (max-width: 768px) {

    .top-header-inner {
    width: 70%;
    flex-direction: column;*/
        /*gap: 15px;*/
        /*padding: 0 20px;*/
        text-align: center;
}


    .button-group {
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 10px;
    }

    .btn {
        width: 80% !important;
        justify-content: center !important;
    }
}


.acca-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 40px 0;
}

.acca-box {
    flex: 0 1 30%;
    background: #e2c4c4;;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.acca-box h3 {
    margin-bottom: 15px;
    font-size: 22px;
}

.acca-box p {
    font-size: 14px;
    color: #555;
}

.acca-box:hover {
    transform: translateY(-5px);
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
    .acca-box {
        flex: 1 1 100%;
    }
}




@media (max-width: 768px) {
    .acca-container {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .acca-box {
        flex: 0 0 100%;
        max-width: 100%;
    }
}