@font-face {
      font-family: 'Clario';
      src: url('../fonts/Clario-Regular.woff') format('opentype');
      font-weight: normal;
      font-style: normal;
  }

  @font-face {
      font-family: 'Clario';
      src: url('../fonts/Clario-Bold.woff') format('opentype');
      font-weight: bold;
      font-style: normal;
  }

  @font-face {
      font-family: 'Clario';
      src: url('../fonts/Clario-Light.woff') format('opentype');
      font-weight: light;
      font-style: normal;
  }

  body {
      font-family: 'Clario', sans-serif !important;
      overflow-x: hidden;
  }

  .h5,
  h5 {
      font-size: 1.5rem;
  }

  .bg-orange {
      background-color: #D64000;
      /* Adjusted to match your screenshot */
  }

  p {
      color: #212223;
  }

  .color-orange {
      color: #D64000;
  }

  .anchor-class {
      text-decoration: underline;
  }

  .border-top-black {
      border-top: 1px solid #212223;
  }

  .navbar-brand img {
      height: 53px;
      width: 100%;
  }

  .container.navigation-cont {
      padding: 0px !important;
  }

  .button-border {
      border: 1.5px solid #212223;
  }

  .bg-blue {
      background-color: #E3F1FD;
      overflow: auto;
  }

  .bg-white {
      background-color: white;
  }

  .nav-link {
      border-radius: 4px 4px 0 0;
      height: 60px;
      justify-content: center;
      outline-offset: -1px;
      padding: 16px 16px 16px 16px !important;
      width: auto;
      font-weight: bold;
      /* margin: 0px 7px; */
  }

  li.nav-item a {
      color: #212223;
  }

  /* ul.navbar-nav.me-auto.mb-2.mb-lg-0.flex-wrap li {
      margin-right: 15px;
  } */

  .tackle-heading {
      margin-bottom: 1.5rem;
      margin-top: -0.5rem;
  }


  nav.navbar.navbar-expand-lg.bg-white {
      padding-bottom: 0px;
      padding-top: 0px;
  }

  .home-banner-info-left {
      display: none;
  }

  li.nav-item a:hover {
      background-color: #f8eadd;
      border-color: #d64000;
      outline: 3px solid #d64000;
      box-shadow: inset 0 -5px 0 #d64000;
  }

  .dropdown-menu li a:hover {
      border-color: none;
      outline: none;
      box-shadow: none;

  }

  li.nav-item.active {
      box-shadow: inset 0 -5px 0 #d64000;
      border-color: #d64000;
      border-bottom: 2px solid #d64000;
  }

  .btn-orange {

      display: inline-flex;
      justify-content: center;
      align-items: center;
      height: auto;
      padding: 8px 16px;
      text-decoration: none;
      text-align: center;
      color: #fff;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      font-style: normal;
      border-radius: 4px;
      background-color: #d64000;
  }

  .footer-dark {
      background-color: #123021;
  }

  .custom-left-padding {
      padding-left: 7rem;
  }

  .footer-dark p {
      color: white;
  }

  .py-2 {
      padding: 0.8rem 0px !important;
  }

  .btn-orange:hover {
      outline: 2px solid #d64000;
      outline-offset: -2px;
      color: #1f1f1f;
      background-color: #f8eadd;
  }

  small.co-authors {
      display: block;
      font-size: 12px;
  }

  ul.list-unstyled {
      list-style-type: disc;
      padding-left: 20px;
      font-weight: bold;
      margin-top: 1.5rem;
  }

  footer ul.list-unstyled {
      list-style-type: none;
      font-weight: normal;
      padding-left: 0px;
  }



  footer.bg-dark.text-white p {
      color: white;
  }

  .newsletter.d-none.d-md-block.mb-4 .subscribe-text {

      font-size: 14px;
      margin-left: 4px;
      padding-bottom: 4px;
  }

  ul.list-unstyled li::marker {
      color: #D64000;
  }

  .btn-dark-green {
      background-color: #112c1f;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      height: auto;
      padding: 8px 16px;
      text-decoration: none;
      text-align: center;
      color: #fff;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      font-style: normal;
      border-radius: 4px;
  }

  .subscribe-text {
      font-size: 14px;
      margin-right: 6px;
  }

  .top-header {
      padding: 20px 0 10px 0;
  }

  .navbar-toggler {
      border: none;
  }

  .navbar-toggler:focus {
      box-shadow: none;
  }


  /* Force same static height for all slides */
  #latestProgramsCarousel .carousel-inner {
      min-height: 650px;
      /* adjust as needed */
  }

  p.small.program-desc {
      margin-top: 1.5rem;
  }

  /* Ensure each carousel-item takes full height */
  #latestProgramsCarousel .carousel-item {
      min-height: 806px;
      /* match above */
  }

  .carousel-item .position-relative {
      background-size: cover;
      height: 380px;
  }

  .equal-height {
      display: flex;
      flex-wrap: wrap;
  }

  .equal-height>[class*='col-'] {
      display: flex;
  }

  .equal-height>[class*='col-']>.card {
      flex: 1 1 auto;
      /* stretch cards equally */
  }







  /* banner */

  /* Custom Section */

  .banner-section-mobile {
      background-image: url("../image/rutter_banner_414x662.png");
      background-size: cover;
      height: 600px;
  }

  .banner-section-mobile .banner-heading {
      margin-left: 6px;
      margin-top: 288px;
      color: white;
  }

  .banner-section-mobile .banner-heading h2 {
      font-size: 28px;
  }

  .banner-section-mobile .button-container {
      padding-left: 0px;
  }

  .banner-section-mobile .btn-orange {
      padding: 8px 16px;

  }

  .banner-section-mobile .btn-light-custom {

      font-size: 13px;
      margin-left: 10px;
  }

  .myrow {
      margin-top: 13px;
  }

  .banner-heading h2 {
      font-size: 61px;
  }

  .button-container {
      padding-left: 230px;
  }

  .custom-right {
      padding-right: 9.5px;
      /* move left by reducing right space */
  }

  .custom-right img {
      width: 40px;
      height: 40px;
      cursor: pointer;
      position: relative;
      left: 9px;
  }

  .custom-right-phone img {
      width: 40px;
      height: 40px;
      cursor: pointer;
      position: relative;
      left: -12px;
      top: 5px;
  }

  .btn-whitebg:hover {
    background-color: white !important;
}


  .banner-heading {
      margin-left: 191px;
      margin-top: 50px;
  }

  .custom-heading {
      font-size: 3rem;
      font-weight: 600;
      line-height: 1.4;
  }

  .col-md-4.banner-heading h2 {
      width: 71%;
      margin: 40px 0px 40px 0px;
  }

  .custom-text {
      font-size: 1.5rem;
      line-height: 1.5;
      margin-left: 63px;
      font-weight: bold;
  }

  h2.fw-bold.mx-auto.px-4 {
      font-size: 26px;
      line-height: 40px;
  }

  .btn-light-custom {
      background-color: #fafafa;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      height: auto;
      padding: 8px 16px;
      text-decoration: none;
      text-align: center;
      color: #1f1f1f;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      font-style: normal;
      border-radius: 4px;
      margin-left: 20px;
  }

  .btn-light-custom:hover,
  .btn-dark-green:hover {
      outline: 2px solid #d64000;
      outline-offset: -2px;
      color: #1f1f1f;
      background-color: #f8eadd;
  }

  /* .btn-warning-custom:hover,
  .btn-light-custom:hover {
      opacity: 0.9;
  } */

  .img-fluid {
      max-height: 450px;
      object-fit: cover;
  }

  .row.align-items-center {
      display: flex;
      justify-content: center;
  }

  /* Make sure buttons appear inline */
  .button-container a {
      display: inline-block;
  }

  .bg-orange.text-white.px-4.py-2 {
      font-size: 24px;
      font-weight: 600;
      text-align: center;
  }

  .bg-double {
      background: linear-gradient(to right, #d64000 80%, #123021 20%);
      /* orange then green */
      color: white;
      font-size: 24px;
      padding-left: 2rem !important;
      font-weight: bold;
  }

  .on-demand {
      background-size: cover;
      background-position: top;
      height: 380px;
  }

  @media (max-width: 768px) {

      html,
      body {
          max-width: 100%;
          overflow-x: hidden;
      }

      .container,
      .row {
          margin: 0;
          padding: 0 15px;
      }

      .custom-heading {
          font-size: 2rem;
      }

      .custom-text {
          font-size: 1rem;
      }

      .button-container {
          text-align: center;
      }

      footer.bg-dark.text-white .px-5 {
          padding: 25px 0px !important;
      }

      .bg-double {
          font-size: 21px;

      }

      .carousel-item .position-relative {
          background-size: cover;
          height: 228px;
      }

      .on-demand {
          background-size: cover;
          height: 203px;
      }

      a.navbar-brand.d-md-none {
          width: 60%;
          margin-left: 10px;
          float: left;
          padding: 15px 20px;
      }

      .mobile-button {
          margin: 5px 12px;
      }

      .navbar-brand img {
          height: 37px;
          width: auto;
      }

      .about-view-sample {
          margin-left: 0px;
          margin-bottom: 30px;
          margin-top: 10px;
      }

      .no-padding-mobile {
          padding-right: 0px !important;
          padding-left: 0px !important;
      }

      .default-padding-mobile {
          padding-right: 15px !important;
          padding-left: 15px !important;
      }

      .default-margin-mobile {
          margin-right: 0px !important;
          margin-left: 0px !important;
      }

      .col-lg-8.py-4.px-5.mx-5.d-flex.align-items-center.pe-0.default-padding-mobile.default-margin-mobile {
          margin-right: 0px !important;
          padding-right: 0px !important;
      }

      /* .california-book {
          width: 93%;
      } */

      /* .california-book-2 {
          width: 92%;
      } */
      .california-book {
          width: 100% !important;
          padding: 27px !important;
      }

      .california-book-2 img {
          width: 100%;
      }

      .california-book-rutter-group {
          padding-left: 0px !important;
      }

      .product-titles section {
          width: 86%;
          margin: 0px auto;
      }

      .bg-white .container,
      .bg-white .container .row {

          padding: 0px;
          margin: 0px;
      }

      .pt-5,
      .py-4 {
          padding-top: 0rem !important;
      }

      .mb-3 small br {
          display: none;
      }

      .bg-blue {
          width: 100% !important;
          padding: 0px 16px;
      }

      .california-book-rutter-group.px-5.py-5.no-padding-mobile {
          padding-top: 0px !important;
      }

      .program-card .thumb {
    position: static !important;
    padding-top: 0 !important;
    aspect-ratio: auto !important;
    height: auto !important;
}

.program-card .thumb img,
.program-card .thumb picture {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
}


  }



  .card.graphite-border {
      border: 1px solid #4B4B4B;
      border-top: none;
      border-radius: 0 0 1rem 1rem;
      box-shadow: 0 3px 5px grey !important;
      /* min-height: 600px; */
  }

  .card {
      min-height: -webkit-fill-available;
  }

  .carousel-indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
      margin: 0 6px;
      background-color: #6c757d;
      /* secondary by default */
      transition: background-color 0.3s ease;
  }

  #latestProgramsCarousel .carousel-indicators {
      position: absolute;
      display: flex;
      justify-content: center;
      gap: .5rem;
      margin-top: .5rem;
      margin-bottom: 1rem;
  }

  /* Square look */
  #latestProgramsCarousel .carousel-indicators [data-bs-target] {
      width: 12px;
      /* square size */
      height: 12px;
      border-radius: 0;
      /* no rounding */
      border: 2px solid #D64000;
      /* orange border */
      background: transparent;
      opacity: 1;
      /* always fully visible */
      transition: background 0.3s ease;
  }

  /* Active square filled */
  #latestProgramsCarousel .carousel-indicators .active {
      background: #D64000;
  }



  .carousel-indicator.active,
  .carousel-indicator:focus,
  .carousel-indicator:hover {
      background-color: #D64000;
      /* Bootstrap red / orange */
  }

  img.books-img {
      width: 100%;
  }

  .about .border-top {
      border-top: 5px solid #D64000 !important;
  }

  .about-rutter img {
      height: auto;
      width: 50%;
  }

  .color-white {
      color: #FFFFFF;
  }

  footer h4 {
      color: #D64000;
      font-size: 20px;
  }

  footer ul.list-unstyled.small {
      margin-top: 0px;
  }

  .custom-footer {
      background-color: #e6e6e6;
      padding: 22px 0;
      font-size: 14px;
  }

  .footer-link {
      color: #0066cc;
      text-decoration: underline;
      white-space: nowrap;
  }

  .footer-logo {
      width: 180px;
  }

  .footer-container {
      padding-top: 3rem !important;
      padding-bottom: 2rem !important;
  }

  .footer-left,
  .footer-right {
      line-height: 1.5;
  }

  @media (max-width: 767.98px) {
      .footer-right {
          justify-content: center !important;
          margin-top: 15px;
      }

      .footer-left {
          text-align: center;
      }

      .topics-container h3 {
          /* font-size: 23px; */
          width: 100%;
          display: !important;
          display: inline !important;
      }

      footer.footer-dark.text-white .col-md-4 {
          margin: 0px 0px;
      }

      ul.list-unstyled {
          margin-top: 1rem;
      }

      button.navbar-toggler.ms-auto {
          position: relative;

      }

      footer p.subscribe-text.mb-1 {
          margin-left: 4px;
          padding-bottom: 4px;
      }

      .col-md-4.column-3.small h4 {
          margin-bottom: 1rem;
      }
  }


  /* Apply only for tablet and above (≥768px) */
  @media (min-width: 768px) {
      .column-2 {
          padding-left: 6.5rem
      }

      .column-3 {
          padding-left: 4rem;
      }




  }

  @media (max-width: 992px) {


      .text-end {
          text-align: right !important;
          display: none;
      }

      a.navbar-brand.d-lg-none {
          width: 60%;
          margin-left: 10px;
          float: left;
          padding: 15px 20px;
      }

      .navbar-brand img {
          height: 37px;
          width: auto;
      }

      li.nav-item.active {
          box-shadow: none;
          border-color: #d64000;
          border-bottom: none;
          /* width: 95px; */
      }
  }


  /* Home Banner Start */

  .home-banner-info-wrapper {
      position: relative;
      padding-left: 0 !important;
      padding-right: 0 !important;
  }

  .home-banner-image {
      width: 100%;
      height: auto;
  }

  .home-banner-info-left {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10%;
      box-sizing: border-box;
      /* background: rgba(14, 45, 30, 0.8); */
      background: #113021;
  }

  .home-banner-info-right {
      position: absolute;
      bottom: 10%;
      /*4.5*/
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 20px;
      box-sizing: border-box;
  }

  .home-banner-info-left h2 {
      color: #fff;
      font-size: 24px;
      line-height: 1.4;
      white-space: normal;
      padding: 20px;
  }

  .home-banner-info-right .btn {
      font-size: 16px;
      /* padding: 12px 30px;
            min-width: 200px; */
  }

  @media screen and (max-width: 1600px) {
      .home-banner-info-right {
          bottom: 9%;
      }
  }

  @media screen and (max-width: 1400px) {
      .home-banner-info-right {
          bottom: 7%;
      }
  }

  @media screen and (max-width: 1100px) {
      .home-banner-info-right {
          bottom: 6%;
      }

      .home-banner-info-left h2 {
          font-size: 16px;
          line-height: 1.2;
          padding: 20px;
      }

      .home-banner-info-right .btn {
          font-size: 14px;
          padding: 6px 12px;
          min-width: 160px;
      }
  }

  @media screen and (min-width: 1400px) and (max-width: 1599px) {
      .col-lg-8.py-4.px-5.mx-5.d-flex.align-items-center.pe-0.default-padding-mobile.default-margin-mobile {
          margin-left: 100px !important;
          margin-right: 0px !important;
          padding-right: 80px !important;
      }
  }

  @media screen and (min-width: 1600px) {
      .col-lg-8.py-4.px-5.mx-5.d-flex.align-items-center.pe-0.default-padding-mobile.default-margin-mobile {
          margin-left: 100px !important;
          margin-right: 0px !important;
          padding-right: 130px !important;
      }
  }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
      .col-lg-8.py-4.px-5.mx-5.d-flex.align-items-center.pe-0.default-padding-mobile.default-margin-mobile {
          margin-left: 100px !important;
          margin-right: 0px !important;
          padding-right: 80px !important;
      }
  }



  /* drop down menu */

  /* Show dropdown on hover */
  .nav-item.dropdown:hover .dropdown-menu {
      display: block;
  }

  /* Dropdown box styling */
  .navbar-nav .dropdown-menu {
      margin-top: 0.5px;
      border-radius: 0;
      background-color: #f2f2f2;
      min-width: 220px;
      margin-left: -2px;
  }

  ul.dropdown-menu {
      padding: 0px 0px;
  }

  /* Dropdown item style */
  .dropdown-menu .dropdown-item {
      font-weight: 600;
      color: #000;
      padding: 12px 20px;
      background-color: #E5E5E5;
  }

  /* Hover effect - dark grey background */
  .dropdown-menu .dropdown-item:hover {
      background-color: #123021;
      /* dark grey */
      color: #fff;
      /* white text on hover */
  }

  /* Remove default Bootstrap arrow */
  .nav-link::after {
      display: none !important;
  }


  /* Keep hover styles when hovering over parent or its dropdown */
  li.nav-item.dropdown:hover>a.nav-link {
      background-color: #f8eadd;
      border-color: #d64000;
      outline: 3px solid #d64000;
      box-shadow: inset 0 -5px 0 #d64000;
  }

  /* Optional: keep submenu visible on hover if needed (Bootstrap already handles this) */
  li.nav-item.dropdown:hover .dropdown-menu {
      display: block;
  }
  
  
 @media only screen 
and (min-width: 992px) 
and (max-width: 1399px)
and (min-height: 1366px) { 
  .btn-dark-green {
    font-size: 15px;
}
}

  /* Home Banner End */
  
  
  /* Popup Css Started*/
  
/* OVERLAY */
.account-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* OUTER DARK GREEN BORDER */
.account-popup-box {
    background: #0c3b2e;
    padding: 25px;
    max-width: 600px;
    width: 95%;
}

/* INNER WHITE BOX */
.account-inner {
    background: #f4f4f4;
    padding: 35px 40px;
    position: relative;
}

/* LOGO */
.popup-logo {
    height: 40px;
    margin-bottom: 10px;
}

/* TITLE */
.popup-title {
    font-weight: 700;
    font-size: 28px;
}

/* LABEL */
.popup-label {
    color: #444;
}

/* INPUT */
.popup-input {
    width: 100%;
    height: 42px;
    border-radius: 8px;
    border: 2px solid #bbb;
    padding: 8px 12px;
    background: #e9e9e9;
}

/* LINKS */
.forgot-link {
    color: #1a73e8;
   
    text-decoration: underline;
}


/* NOTE TEXT */
.popup-note {
    
    color: #333;
}

/* CLOSE BUTTON */
.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    border: none;
    background: none;
    cursor: pointer;
}
/*Popup Css Ended*/