/* ==========================
   🌍 Global Responsive Styles
========================== */
@media (max-width: 1440px) {
  .ol-container {
    max-width: 1100px;
  }
}

@media (max-width: 1280px) {
  .ol-hero {
 
    min-height: 850px;
   
}
  .ol-contact .ol-container {
    max-width: 90%;
}
  .ol-blog-section-inner {

    justify-content: center;
}
  .ol-form-input, .ol-input-box , form input, form select , form textarea {
      font-size: 18px;
  }

  .ol-form-subtitle {
      height: 45px;
  }
  .ol-scheduled-payments-section {        
      min-height: auto;
  }
  .ol-affiliation-card {
      width: 30%;
  }
  .ol-container {
    max-width: 900px;
  }
  .ol-main-form-wrap {
      width: 100%;
      height: auto;

  }
}

/* ==============================
   📱 Tablet and Mobile (991px and below)
============================== */
@media (max-width: 992px) {

  .ol-nav-menu {
    width: 100%;
    max-width: 100%;
}
  .popup-content {
    width: 90%;
    height: auto;

}
  .ol-hero-inner {
    width: 451px;

}
  .ol-hero {
    min-height: 830px;
}
  .ol-compny-img-txt .ol-image-text-inner {      
    align-items: flex-start;
}
  .ol-table-container {
    overflow: scroll;
    padding: 10% 5%;
  }
  /*.ol-table th {*/
  /*  font-size: 12px;*/
  /*  !*width: 707px;*!*/
  /*  text-align: center;*/
  /*}*/
  .th-pay-method , .ol-input-box-method{
    display: none;
  }
  .ol-form-input , form input, form select , form textarea{
      font-size: 16px;
  }
  /*.ol-input-box {*/
  /*  padding: 13px ;*/
  /*  font-size: 12px;*/
  /*  text-align: center;*/
  /*}*/
  .ol-form-consent input {
     
      margin-top: 4px;
  }
  .ol-form-consent {
     
      align-items: flex-start;
     
  }
  .ol-scheduled-payments-section {

      padding: 60px 0px;
  }
  .ol-image-text-inner {
      gap: 30px;
    }
  
    .ol-image-text-content {
      width: 48%;
    }
  
    .ol-image-text-media {
      width: 48%;
    }
    .ol-blog-card {
      width: 351px;
  }

  .ol-blog-section-inner {
    gap: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

  h1 {
    font-size: 50px;
    line-height: 56px;
  }

  h2, .ol-h2-primary, .ol-h2-white, .ol-h2-primary-center, .ol-h2-white-left {
    font-size: 40px;
    line-height: 44px;
  }

  .ol-container {
    max-width: 800px;
    padding: 0 20px;
  }

  .ol-subtext, .ol-subtext-light, .ol-subtext-dark {
    font-size: 16px;
    line-height: 1.5;
  }

  .ol-btn-large, .ol-btn ,  form button{
    height: 50px;
    font-size: 16px;
  }
  button.ol-menu-toggle {
      display: flex;
  }
  .ol-nav-menu {
      position: absolute;
      top: 80px;
      right: 2%;
      width: 96%;
      background: #fff;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      flex-direction: column;
      display: none;
  }
  
    .ol-nav {
      flex-direction: column;
    }
  
    .ol-nav-item {
      margin: 10px 0;
      text-align: center;
    }
  
    .ol-nav-link {
      display: block;
      padding: 12px;
      font-size: 18px;
      color: #14358A;
      transition: 0.3s;
    }
  
    .ol-nav-link:hover {
      background: #00707b;
      color: white;
    }
  
    /* Hamburger Menu */
    .ol-menu-toggle {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 35px;
      height: 25px;
      background: transparent;
      border: none;
      cursor: pointer;
      order: 1;
    }
  
    .ol-menu-toggle span {
      display: block;
      height: 4px;
      width: 100%;
      background: white;
      border-radius: 3px;
      transition: 0.3s ease;
    }
  
    /* Active Menu State */
    .ol-menu-toggle.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
  
    .ol-menu-toggle.active span:nth-child(2) {
      opacity: 0;
    }
  
    .ol-menu-toggle.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }
  
    /* Show Menu when Active */
    .ol-nav-menu.active {
      display: flex;
    }

  .ol-contact-details {
    margin-bottom: 0px;
    flex-wrap: wrap;
  }
  .ol-info-box {
    width: 100%;
    margin-bottom: 20px;
  }
}


/* ==============================
   📱 Small Tablets (768px and below)
============================== */
@media (max-width: 768px) {

  .ol-table th {
    font-size: 14px;
    /*width: 707px;*/
    text-align: center;
  }

  .ol-input-box {
    padding: 14px ;
    font-size: 14px;
    text-align: center;
  }

  .popup-text {
    font-size: 14px;
    margin-bottom: 15px;
}
  .popup-contact {
    
    font-size: 10px;
   
    line-height: 24px;
    
}
  .popup-content {
 
    padding: 30px 25px 30px 25px;
 
}
  .popup-buttons {

    flex-direction: column;
}
  .popup-title {
  
    font-size: 28px;
    line-height: 36px;

}
  .ol-hero {
    min-height: 810px;
}
  .ol-sub-header-2 {

    min-height: auto;

}
  .ol-sub-header-2 {

    padding-bottom: 20px;
}
  .ol-sub-header-2-inner {
    width: 100%;
    padding-top: 40px;
}
  .ol-h2-white {

    margin-bottom: 40px;
}
  .ol-promise {
    
    padding: 60px 0;

}
  .ol-cust-order-1 {
    order: 1;
}

  .ol-compny-img-txt .ol-image-text-content {
    width: 100%;
}
.ol-compny-img-txt .ol-image-text-media {
  width: 100%;
}
.ol-compny-img-txt .ol-image-text-inner {
flex-direction: column;
text-align: left;
}
.ol-compny-img-txt .ol-media-box {
max-width: 100%;
margin-bottom: 24px;
}
.ol-compny-img-txt .ol-container {

gap: 24px;
}

  .ol-payment-plan-form .ol-form-action {
    margin-bottom: 0;
    margin: 0px;
}
  .ol-cta-buttons {
      margin-top: 30px;
  
  }
  .ol-nav-menu {
 
      box-shadow: 0 5px 16px 2px rgb(0 0 0 / 22%);

  }
  .ol-cta-description {
     
      width: 80%;
  }
  .ol-form-subtitle {
 
      height: auto;
      
  }
  .ol-payment-plan-form {
    gap: 0;
      flex-direction: column;
  }
  .ol-form-one-time-payment {
      gap: 0px;
      display: flex;
      width: 100% !important;
      flex-direction: column;
      align-items: center;
  }
  .ol-form-heading {
   
      font-size: 28px;
      line-height: 36px;
    
  }
  .ol-h2-white-left, ol-h2-white-center {

      margin-bottom: 20px;
  }

.ol-image-text {
  padding: 60px 0;
}

.ol-image-text-inner {
  flex-direction: column;
  text-align: center;
}

.ol-image-text-content {
  width: 100%;
}

.ol-image-text-media {
  width: 100%;
  margin-top: 20px;
}

.ol-media-box {
  max-width: 85%;
}
  .ol-sub-header {
      background-color: #1849b5;       
      background-position: top left;
      min-height: 340px;    
  }
  .ol-sub-header-inner {
      padding-top: 50px;
  }
  .ol-form-input , form input, form select , form textarea{
          padding: 8px 15px;
      font-size: 14px;
   }
  .ol-sub-header .ol-subtext-light {
      width: 80%;
  }
  p.ol-main-form-text {
      width: 100%;

  }
  .ol-affiliations {
    background-position: top right;
    padding-bottom: 0;
}
  .ol-affiliation-card {
      width: 100%;
  }
  .ol-brand-item {
      max-width: 150px;
    
  }
  .ol-brand {
      padding: 0px 0px 0px 0px;
   
  }
  .ol-trusted-agents-video {
      width: 100%;

  }
  .ol-trusted-agents-inner {

      flex-direction: column;
  }
  .ol-trusted-agents-content {
      width: 100%;
      text-align: center;
  }
  .ol-footer {
    background-position: top left;
    padding-top: 60px;        margin: 0;
    background-color: #1b3caa;
}
  .ol-footer-content {
      padding-bottom: 30px;
  }
  .ol-footer-left {
      width: 100%;
      margin-bottom: 50px;
  }
  h1 {
    font-size: 42px;
    line-height: 48px;
    letter-spacing: 0px;
  }

  h2, .ol-h2-primary, .ol-h2-white, .ol-h2-primary-center, .ol-h2-white-left {
    font-size: 36px;
    line-height: 40px;
  }

  .ol-container {
    max-width: 600px;
  }

  .ol-subtext, .ol-subtext-light, .ol-subtext-dark {
    font-size: 15px;
  }

  .ol-btn-large, .ol-btn,  form button {
    height: 48px;
    font-size: 15px;
    padding: 0 30px;
  }

  .ol-btn-login {
    width: 80px;
    height: 40px;
    font-size: 13px;
  }
  .ol-contact-details {
    margin-bottom: 0px;
    flex-wrap: wrap;
  }
.ol-info-box {
  width: 100%;
  margin-bottom: 20px;
}


.ol-contact-form {
padding: 30px 20px;
margin-bottom: 20px;

}
.ol-contact {
padding: 50px 0;
}
.ol-contact-info {
padding: 50px 0;
}
}

/* ==============================
   📱 Mobile Screens (576px and below)
============================== */
@media (max-width: 600px) {

  /*.ol-form-input , form input, form select , form textarea  {*/
  /*  padding: 8px 15px;*/
  /*  font-size: 12px;*/
  /*}*/

  .ol-table th {
    font-size: 10px;
    /*width: 707px;*/
    text-align: center;
  }

  .ol-input-box {
    padding: 10px ;
    font-size: 10px;
    text-align: center;
  }

  .ol-hero-inner {
    width: 82%;
}
  .ol-form-row {
    flex-direction: column;
  }
  
  .ol-form-action {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .ol-h2-primary {
   
    margin-bottom: 30px;
    
}
  .ol-hero-inner {
      width: 80%;

  }
  
  h1 {
    font-size: 36px;
    line-height: 42px;
  }

  h2, .ol-h2-primary, .ol-h2-white, .ol-h2-primary-center, .ol-h2-white-left {
    font-size: 32px;
    line-height: 36px;
  }

  .ol-container {
    max-width: 100%;
    padding: 0 15px;
  }

  .ol-subtext, .ol-subtext-light, .ol-subtext-dark {
    font-size: 14px;
  }

  .ol-btn-large, .ol-btn ,  form button{
    height: 45px;
    font-size: 14px;
    padding: 0 20px;
  }

  .ol-btn-outline {
      /*width: fit-content;*/
    height: 45px;
    font-size: 14px;
  }
}

/* ==============================
   📱 Extra Small Screens (480px and below)
============================== */
@media (max-width: 480px) {

  .form-input-wrapper button {
    margin-left : 20px;
    margin-right : 20px;
  }

  .ol-single-post {
    padding: 50px 0;
}
  .ol-single-post img {

    margin-bottom: 20px;
}
  .ol-single-post p {

    font-size: 16px;
    line-height: 22px;
}
  .ol-form-consent input[type="checkbox"] {
   
    margin-right: 10px;
   
}
  .ol-logo a {
    display: flex;
    align-content: center;
}
  .ol-logo {
    width: 140px;
}
.ol-btn-login {

  height: 35px;
  font-size: 12px;
}
  .ol-logo
  .ol-promise-item {
   
    padding: 24px 24px;

}
  .ol-payment-options {

    flex-direction: column;
}
  .ol-contact-info p {

    font-size: 16px;
   
}
  .ol-job-list li {
    font-size: 16px;
  
}
  .ol-contact-info h2 {
  
    font-size: 28px;
    line-height: 32px;
}
  .ol-hero-inner {

    padding-top: 40px;
 
}
  .ol-hero {

    min-height: 750px;

}
  .ol-subtext-light {

    margin-bottom: 24px;
}
  .ol-graph-inner img {
    width: 100%;
    scale: 116%;
} 
  .ol-blog-section {
    padding: 50px 0;
    text-align: center;
}
  .ol-sub-header-2-inner {

    padding-top: 40px;
}
  .ol-text-heading-payment-ins h2 {
      margin-bottom: 20px;
  }
  .ol-text-heading-payment-ins {
      padding: 30px 0px 20px 0px;
  }
  .ol-cta-payment-ins {
    
      margin-bottom: 40px;
  }
  .ol-payment-options-chart {
    
      padding: 30px 20px;

  }
  .ol-form-note {

      margin-top: 20px;
  }
  .ol-form-consent {

      margin-bottom: 20px;
  }
  .ol-policy-links {
     
      margin-bottom: 20px;
  }

  .ol-scheduled-payments-section {

      padding: 40px 0px;
  }
  .ol-sub-header {

      padding-bottom: 40px;
  }
  .ol-image-text {
      padding: 50px 0;
    }
  .ol-main-form-wrap-inner {
      padding: 30px 20px;

  }
  .ol-form-group {
 
      min-width: 100%;
  }
  .ol-footer-bottom p {
      font-size: 12px;
  }
  .ol-footer {
    background-color: #1b40ae;
}
  h1 {
    font-size: 30px;
    line-height: 36px;
  }

  h2, .ol-h2-primary, .ol-h2-white, .ol-h2-primary-center, .ol-h2-white-left {
    font-size: 28px;
    line-height: 32px;
  }

  .ol-subtext, .ol-subtext-light, .ol-subtext-dark {
    font-size: 13px;
  }

  .ol-btn-large, .ol-btn,  form button {
    height: 42px;
    font-size: 13px;
  }

  .ol-btn-outline {
      padding: 0px 20px;
    height: 42px;
    font-size: 13px;
  }
}

@media (max-width: 392px) {
  .ol-footer-nav {
      margin-bottom: 31px;
  }
  .ol-footer-left {    
      margin-bottom: 31px;
  }
}

/* ==============================
   📱 Ultra Small Screens (375px and below)
============================== */
@media (max-width: 375px) {
  h1 {
    font-size: 26px;
    line-height: 32px;
  }

  h2, .ol-h2-primary, .ol-h2-white, .ol-h2-primary-center, .ol-h2-white-left {
    font-size: 24px;
    line-height: 28px;
  }

  .ol-btn-large, .ol-btn ,  form button{
    height: 40px;
    font-size: 12px;
    padding: 0 15px;
  }

  .ol-btn-outline {
    /*width: 110px;*/
    height: 40px;
    font-size: 12px;
  }
}