body {
          font-family: Montserrat;
      }

      .cs-title-banner {
          position: relative;
          height: 300px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
      }

      /* Banner image */
      .cs-banner-img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: 1;
      }

      /* Overlay */
      .cs-title-banner::before {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0.3);
          z-index: 2;
      }

      /* Title */
      .cs-title-banner h1 {
          position: relative;
          z-index: 3;
          font-size: 50px;
          line-height: 54px;
          color: #fff;
          padding: 20px;
          font-weight: 800;
          margin: 0;
          text-align: center;
      }


      /* Wrapper */
      .c-data-course-wrapper {
          max-width: 1200px;
          margin: 40px auto;
          padding: 0 20px;
          font-family: Montserrat;
          color: #3e3e3e;
      }

      /* Layout */
      .c-data-course-layout {
          display: flex;
          gap: 30px;
          padding: 60px 0px;
      }

      /* Main Content */
      .c-data-course-content {
          width: calc(100% - 350px);
      }

      /* Sidebar */
      aside.c-data-course-sidebar {
          width: 350px;
      }

      .c-data-course-widget {
          background: #f9f9f9;
          padding: 20px 20px 20px;
          margin-bottom: 25px;
          border-radius: 6px;
      }

      .c-data-course-widget img {
          width: 100%;
      }

      .c-data-course-widget-title {
          font-size: 22px;
          font-weight: 700;
          line-height: 24px;
          color: #000;
          text-align: center;
      }

		.c-data-course-slider-wrap h2 {
			font-weight: 700;
		}

      a.btn.btn-large.btn-icon-left.btn-red {
          width: 150px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(to bottom, #d32a3b, #d32a3b);
          border-radius: 5px;
          color: #fff;
          padding: 15px;
          margin: auto;
          text-decoration: none;
          margin: 10px auto;
      }

      a.btn.btn-large.btn-icon-left.btn-red:hover {
          background: linear-gradient(to bottom, #c72232, #c72232);
          text-decoration: none;
      }

      .c-data-course-post h4,
      .c-data-course-post h5,
      .c-data-course-post h6 {
          margin: 10px 0 18px;
          font-weight: 700;
      }

      .c-data-course-post p {
          font-family: Montserrat !important;
          font-size: 16px;
          line-height: 1.7;
          color: #3e3e3e;
          margin-bottom: 18px;
          margin-top: 0px;
      }

      .c-data-course-post .ui--space {
          display: block;
          height: 30px;
      }

      .c-data-course-post h3 {
          font-size: 34px;
          font-weight: 700;
          line-height: 38px;
          margin: 10px 0 18px;
      }

      .c-data-course-post h2 {
          font-weight: 700;
          font-size: 38px;
          line-height: 48px;
          margin: 10px 0 18px;
      }

      .video-container {
          position: relative;
          width: 100%;
          padding-bottom: 56.25%;
          /* 16:9 */
          height: 0;
          margin-top: 20px;
      }

      .video-container iframe {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          border: 0;
      }

      .cs-youtube-video-box {
          padding-top: 20px;
      }

      .cs-youtube-video-box h2 {
          font-weight: 700;
          font-size: 38px;
          line-height: 48px;
          margin: 10px 0 18px;
      }

      aside.c-data-course-sidebar .c-data-course-widget {
          position: sticky;
          top: 120px;
          /* distance from top while sticking */
      }

      .c-data-course-slider-wrap {
          padding-top: 40px;

          position: relative;
      }

      .c-data-course-card {
          background: #fff;
          border-radius: 4px;
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		  min-height: 320px;
      }

		.c-data-course .swiper-button-prev {
			position: inherit;
		}

		.c-data-course .swiper-button-next {
			position: inherit;
		}

      .c-data-course-card img {
          width: 100%;
          height: 220px;
          object-fit: cover;
      }

      .c-data-course-card h3 {
          font-size: 18px;
          font-weight: 600;
          padding: 15px;
          margin: 0;
          color: #222;
          min-height: 66px;
      }

      .c-data-course-nav {
          display: flex;
          justify-content: center;
          gap: 30px;
          margin-top: 25px;
      }

		.c-data-course-nav div:after {
			    font-size: 12px !important;
		}
		
		.c-data-course-nav div {
			width: 38px !important;
			height: 38px !important;
		}

      .c-data-course-prev,
      .c-data-course-next {
          position: static;
          width: 38px;
          height: 38px;
          border-radius: 7px;
          background: #fff;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      }

      .c-data-course-prev::after,
      .c-data-course-next::after {
          font-size: 11px;
          color: #000;
          font-weight: 700;
      }

      .swiper.c-data-course-swiper {
          padding: 0px 0px 40px;
      }

      .c-data-course-slide:hover .c-data-course-card h3 {
          color: #00548f;
      }

      .c-data-course-prev:hover,
      .c-data-course-next:hover {
          background: #00548f;
          color: #fff !important;
      }

      .c-data-course-prev:hover:after,
      .c-data-course-next:hover:after {
          color: #fff !important;
      }

      /* ------------ */
      .info-section {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 30px;
          padding: 10px 0px 40px;

      }

      .info-card {
          background: #ffffff;
          border-radius: 14px;
          padding: 35px 30px;
          text-align: center;
          box-shadow: 0 20px 30px rgba(0, 0, 0, 0.08);
          transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .info-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 25px 40px rgba(0, 0, 0, 0.12);
      }

      .icon {
          width: 60px;
          height: 60px;
          margin: 0 auto 20px;
          border: 3px solid #f5a623;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26px;
          color: #f5a623;
      }

      .info-card h3 {
          font-size: 22px;
          margin-bottom: 6px;
      }

      .subtitle {
          font-weight: 600;
          color: #000;
          margin-bottom: 14px;
      }

      .info-card p {
          font-size: 15px;
          color: #555;
          line-height: 1.6;
      }


      @media (max-width: 991px) {
          .c-data-course-content {
              width: 100%;
          }

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

          aside.c-data-course-sidebar {
              width: 100%;
          }

          .c-data-course-featured-image img,
          .c-data-course-text img {
              height: 300px;
              width: 100%;
              object-fit: cover;
              object-position: top;
          }

          .c-data-course-title {
              color: #00548f !important;
              font-size: 42px;
              font-weight: 700;
              line-height: 1.3em;
          }

          .info-section {

              padding: 10px 0px 0px;
          }

          .cs-title-banner h1 {

              font-size: 42px;

          }
      }

      @media(max-width:450px) {
          .cs-title-banner h1 {

              font-size: 38px;
              line-height: 1.2;

          }
      }