:root {
    /* Font Families */
    --font-primary: "Figtree", sans-serif !important;
    --font-secondary: 'Calibri', sans-serif !important;

    /* Headings Font Sizes */
    --h1-size: 55px;
    --h2-size: 38px;
    --h3-size: 32px;
    --h4-size: 26px;
   

    /* Subheading */
    --subheading-size: 24px;
    --subheading-font-weight: 600 ;

    /* Description / Paragraphs */
    --description-size: 20px;
    --description-line-height: 24px;
    --inner-cards-description-size:18px;
    --inner-cards-description-line-height:24px;

   /* subtitles */
     
     --subtitle-size:24px;
     --subtitle-line-height:28px;

    /* Button Text */
    --button-font-size: 20px;
    --button-font-weight: 500;
    --button-line-height: 22px;


   /* Headings Font Weight */
   
    --h1-weight: 600;
    --h2-weight: 600;
    --h3-weight: 500;
    --h4-weight: 600;
   

    /* Headings line Height */

    --h1-line-height: 1.1;
    --h2-line-height: 1.2;
    --h3-line-height: 34px;
    --h4-line-height: 28px;

}


      /* training US HERO SECTION */
      .contact-hero-section {
        position: relative;
        width: 100%;
        /* height: 100vh;  */
        /* min-height: 320px; */
        /* display: flex; */
        /* align-items: center; */
        /* justify-content: center; */
        overflow: hidden;
      }

      .contact-hero-section img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .contact-hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.163);
        /* darker overlay for better contrast */
        z-index: 1;
      }


      .contact-hero-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 100px 60px;
        position: relative;
        z-index: 2;
        padding-top: 220px;
        max-width: 1600px;
        width: 100%;
        margin: 0 auto;
        gap: 15px;
      }

      .left-content {
        color: white;
        margin: auto 0;
      }

      .left-content h1 {
        font-size: 48px;
        font-weight: 600;
        margin-bottom: 30px;
        /* letter-spacing: -1px; */
        font-family: var(--font-primary);

font-weight: var(--h2-weight);

      }

      .left-content p {
       
        /* line-height: 1.6; */
        margin-bottom: 30px;
        max-width: 700px;
font-family: var(--font-secondary);
font-size: var(--description-size);
line-height: var(--description-line-height);
      }

      .contact-info {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .contact-item {
        display: flex;
        align-items: center;
        gap: 12px;
        color: white;
        font-size: 20px;
font-family: var(--font-secondary);
font-size: var(--description-size);
line-height: var(--description-line-height);
      }
      .contact-item span a {
        text-decoration: none;
        color: #fff;
      }

      .contact-item svg {
        width: 18px;
        height: 18px;
        opacity: 0.8;
      }

      .form-container {
        background: #f6f6f6;
        padding: 30px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        width: 600px;
        padding-top: 80px;
      }

      .form-row {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
      }

      .form-group {
        flex: 1;
      }

      .form-group.full-width {
        width: 100%;
        margin-bottom: 20px;
      }

      .form-group label {
        display: block;
        font-size: 16px;
        font-weight: 700;
        color: #091d3e;
        margin-bottom: 8px;
font-family: var(--font-secondary);
      }

      .form-group input,
      .form-group textarea {
        width: 100%;
        padding: 15px;
        border: 2px solid #091d3e;
        border-radius: 8px;
        font-size: 14px;
        font-family: var(--font-secondary);
        transition: border-color 0.3s ease;

      }

      .form-group input:focus,
      .form-group textarea:focus {
        outline: none;
        border-color: #4c1d95;
      }

      .form-group textarea {
        height: 100px;
        resize: vertical;
      }

      .submit-btn {
        background: #f96e46;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-transform: uppercase;
        margin-top: 30px;
font-family: var(--font-secondary);
font-size: var(--button-font-size);
line-height: var(--button-line-height);
font-weight: var(--button-font-weight);
max-width: fit-content;

      }

      .submit-btn:hover {
        background: #222;
      }

      /* Responsive design */
      @media (max-width: 768px) {
        .container {
          flex-direction: column;
          padding: 40px 20px;
          gap: 40px;
        }

        .form-container {
          width: 100%;
          max-width: 400px;
        }

        .left-content h1 {
          font-size: 36px;
        }

        .form-row {
          flex-direction: column;
          gap: 0;
        }

        .form-row .form-group {
          margin-bottom: 20px;
        }
      }


      /* office locations css  */

      .office-locations {
        padding: 60px;
        margin: 0 auto;
        max-width: 1600px;
        width: 100%;
        margin: 0 auto;
      }

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

      .title {
        font-size: 38px;
        font-weight: 600;
        color: #1c0d45;
        margin-bottom: 15px;
font-family: var(--font-primary);
font-size: var(--h2-size);
font-weight: var(--h2-weight);
line-height: var(--h2-line-height); 
      }

      .subtitle {
        font-size: 18px;
        color: #000;
        max-width: 600px;
        margin: 0 auto;
font-family: var(--font-secondary);
font-size: var(--description-size);
line-height: var(--description-line-height);
      }

      .offices-grid {
        display: flex;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
        margin-top: 40px;
        justify-content: center;
      }

      .office-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: calc((100% - (40px * 2)) / 3);
      }


      .office-image {
        width: 100%;
        height: 280px;
        object-fit: cover;
        border-radius: 12px;
      }

      .office-content {
        padding: 25px 0;
      }

      .office-title {
        font-size: 28px;
        font-weight: 600;
        color: #1c0d45;
        margin-bottom: 20px;
font-family: var(--font-primary);
font-size: 28px;
line-height: 34px;
font-weight:600; 
      }

      .office-address {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        color: #000;
        /* line-height: 1.6; */
        font-size: 18px;
      }

      .location-icon {
        width: 30px;
        height: 30px;
        margin-top: 2px;
        flex-shrink: 0;
      }

      .address-text a {
        font-size: 18px;
        text-decoration: none;
        color: #000;
font-family: var(--font-secondary);
font-size: var(--description-size);
line-height: var(--description-line-height);
      }

      @media (max-width: 768px) {
        .title {
          font-size: 2.5rem;
        }

        .offices-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .office-content {
          padding: 24px;
        }

        .office-title {
          font-size: 1.5rem;
        }
      }


      .schedule-section {
        padding: 60px 60px;
        position: relative;
        overflow: hidden;
      }

      .schedule-container {
        display: flex;
        gap: 120px;
        max-width: 1600px;
        width: 100%;
        margin: 0 auto;
      }

      .schedule-header {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 6px;
        margin-bottom: 10px;
      }

      .schedule-header img {
        width: 85px;
        margin-left: -15px;
      }

      .calendar-icon {
        width: 40px;
        height: 40px;
        stroke: white;
        stroke-width: 1.5;
      }

      .schedule-title {
        color: white;
        font-size: 38px;
        font-weight: 500;
font-family: var(--font-primary);
font-size: var(--h2-size);
font-weight: var(--h2-weight);
line-height: var(--h2-line-height);
      }

      .schedule-description {
        color: rgba(255, 255, 255, 0.9);
        font-size: 18px;
        margin-bottom: 40px;
        /* max-width: 950px; */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
font-family: var(--font-secondary);
font-size: var(--description-size);
line-height: var(--description-line-height);
      }

      .schedule-button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background-color: white;
        color: #0a1a2e;
        padding: 15px 30px;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 5px;
        transition: all 0.3s ease;
font-family: var(--font-secondary);
font-size: var(--button-font-size);
line-height: var(--button-line-height);
font-weight: var(--button-font-weight);
max-width: fit-content;
      }

      .schedule-button:hover {
        background-color: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      }

      .arrow-icon {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2;
      }

      .schedule-right img {
        border-radius: 100%;
        width: 100%;
      }

      /* @media (max-width: 768px) {
            .schedule-section {
                padding: 60px 20px;
            }

            .schedule-title {
                font-size: 2.5rem;
            }

            .schedule-header {
                flex-direction: column;
                gap: 10px;
            }

            .schedule-description {
                font-size: 1rem;
            }
        } */

      /* =======================
   RESPONSIVE FIXES (CLEANED & OPTIMIZED)
======================= */

      /* ---------- TABLET VIEW (max-width: 992px) ---------- */
      @media (max-width: 992px) {

        /* Contact Hero */
        .contact-hero-content {
          flex-direction: column;
          align-items: center;
          padding: 160px 30px 30px;
          gap: 20px;
        }

        .left-content {
          text-align: left;
        }

        .left-content h1 {
          font-size: 32px;
        }

        .left-content p {
          font-size: 15px;
          max-width: 600px;
          margin: 0 0 30px;
        }

        .contact-info {
          gap: 10px;
          margin-bottom: 20px;
          text-align: left;
        }

        /* Form */
        .form-container {
          width: 100%;
          max-width: 650px;
          padding: 40px 25px;
        }

        .form-row {
          flex-direction: column;
          gap: 10px;
          margin-bottom: 15px;
        }

        .form-group {
          margin-bottom: 12px;
        }

        /* Office Locations */
        .office-locations {
          padding: 40px 20px;
        }

        .offices-grid {
          display: flex; 
          flex-wrap: wrap; 
          justify-content: center; /* Center the cards */
          gap: 25px !important;
          margin-top: 15px !important;
        }

        .office-card {
          width: 100%;
          margin: 0 auto !important;
          padding: 0 !important;
        }

        .office-image {
          height: 220px !important;
          margin: 0 !important;
          display: block !important;
        }

        .office-content {
          padding: 20px 0 25px !important;
        }

        /* Schedule Section */
        .schedule-section {
          padding: 50px 20px;
        }

        .schedule-container {
          display: flex;
          flex-direction: column !important;
          /* Image first */
          align-items: flex-start !important;
          text-align: left !important;
          gap: 40px !important;
        }

        .schedule-right {
          order: -1 !important;
          /* Image first */
          width: 100%;
        }

        .schedule-right img {
          width: 280px !important;
          height: 280px !important;
          border-radius: 10px !important;
          object-fit: cover !important;
          display: block !important;
          margin: 0 !important;
        }

        .schedule-left {
          width: 100%;
          text-align: left !important;
        }

        .schedule-header {
          justify-content: flex-start !important;
          align-items: center !important;
          text-align: left !important;
          gap: 10px !important;
        }
      }

      /* ---------- MOBILE VIEW (max-width: 576px) ---------- */
      @media (max-width: 576px) {

        /* Contact Hero */
        .contact-hero-content {
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          padding: 150px 20px 60px;
          gap: 30px;
        }

        .left-content h1 {
          font-size: 32px;
          margin-bottom: 15px;
        }

        .left-content p {
          font-size: 16px;
          line-height: 1.5;
          margin-bottom: 25px;
        }

        .contact-item {
          font-size: 16px;
        }

        /* Form */
        .form-container {
          width: 100%;
          padding: 25px 20px 40px;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        }

        .form-group {
          margin-bottom: 8px !important;
        }

        .form-group label {
          font-size: 15px;
        }

        .form-group input,
        .form-group textarea {
          padding: 12px;
          font-size: 13px;
        }

        .submit-btn {
          font-size: 14px;
          padding: 10px 22px;
        }

        /* Office Locations */
        .office-locations {
          padding: 30px 15px;
        }

        .title {
          font-size: 32px;
          text-align: left;
          margin-bottom: 18px;
        }

        .subtitle {
          font-size: 24px;
          text-align: left;
        }

        .offices-grid {
          gap: 15px !important;
          margin-top: 10px !important;
        }

        .office-image {
          height: 200px !important;
          margin: 0 !important;
        }

        .office-content {
          padding: 18px 0 20px !important;
        }

        .office-title {
          font-size: 20px;
        }

        /* Schedule Section */
        .schedule-section {
          padding: 50px 15px;
        }

        .schedule-header img {
          width: 50px;
          margin-left: -10px;
        }

        .schedule-container {
          flex-direction: column !important;
          align-items: flex-start !important;
          text-align: left !important;
          gap: 30px !important;
        }

        .schedule-right {
          order: -1 !important;
          width: 100%;
        }

        .schedule-right img {
          width: 220px !important;
          height: 220px !important;
          border-radius: 10px !important;
          object-fit: cover !important;
          margin: 0 !important;
        }

        .schedule-left {
          width: 100%;
          text-align: left !important;
        }

        .schedule-title {
          font-size: 32px !important;
        }

        .schedule-description {
          font-size: 16px !important;
          margin-bottom: 20px !important;
        }
        

        .schedule-button {
          font-size: 14px;
          padding: 12px 20px;
        }
      }


      @media (max-width:768px) {
        .office-title {
          margin-bottom: 5px;
        }

        .office-content {
          padding-top: 8px !important;
        }

        .schedule-right img {
          width: 100% !important;
        }

        .schedule-section .container-fluid {
          padding: 0px;
        }

        .schedule-header {
          margin-bottom: 0px;
        }

        .schedule-container {
          gap: 15px !important;
        }

        .schedule-section {
          padding: 50px 20px;
        }

        .contact-hero-content {
          margin-top: 60px;
        }
        .container-fluid{
          padding:0px;
        }
        .office-locations{
          padding: 30px 20px;
        }
        .subtitle{
          font-size: 16px;
        }
        .office-title{
          font-size: 24px;
        }
        .address-text a{
          font-size: 16px;
        }
        .schedule-right img{
          object-position: 0px -20px;
        }
        .schedule-title{
          font-size: 24px;
          margin: 15px 0;
        }
      }


@media (min-width:1700px){

.contact-hero-content{
padding:220px 40px 100px 40px;
}
.office-locations{
padding:60px 40px;
}
.office-locations .container-fluid{
padding:0px;
}
.schedule-container{
padding: 0 40px;
}
.schedule-section .container-fluid{
padding: 0px;
}

}