/* Base styles (for large screens) */
html {
    font-size: 16px;
    overflow-x: hidden;
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    :root {
        --h1-font-size: 48px;
        --h2-font-size: 32px;
        --h3-font-size: 24px;
        --h4-font-size: 20px;
        --h5-font-size: 16px;
        --h6-font-size: 14px;
        --BODY-font-size: 16px;
        --small-font-size: 12px;
        --tiny-font-size: 10px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {
    :root {
        --h1-font-size: 40px;
        --h2-font-size: 28px;
        --h3-font-size: 22px;
        --h4-font-size: 18px;
        --h5-font-size: 15px;
        --h6-font-size: 13px;
        --BODY-font-size: 15px;
        --small-font-size: 11px;
        --tiny-font-size: 9px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 991px) {
    :root {
        --h1-font-size: 34px;
        --h2-font-size: 26px;
        --h3-font-size: 20px;
        --h4-font-size: 18px;
        --h5-font-size: 15px;
        --h6-font-size: 12px;
        --BODY-font-size: 14px;
        --small-font-size: 10px;
        --tiny-font-size: 8px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {
    :root {
        --h1-font-size: 28px;
        --h2-font-size: 24px;
        --h3-font-size: 18px;
        --h4-font-size: 16px;
        --h5-font-size: 14px;
        --h6-font-size: 12px;
        --BODY-font-size: 13px;
        --small-font-size: 10px;
        --tiny-font-size: 8px;
    }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
    :root {
        --h1-font-size: 24px;
        --h2-font-size: 20px;
        --h3-font-size: 16px;
        --h4-font-size: 14px;
        --h5-font-size: 12px;
        --h6-font-size: 10px;
        --BODY-font-size: 12px;
        --small-font-size: 10px;
        --tiny-font-size: 8px;
    }
}
/* Mobile Devices (Small Screens) */
@media screen and (max-width: 480px) {
  .container-1 .batch-info {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
    
      gap: 1rem;
      animation: scroll 20s linear infinite;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      scrollbar-width: none; /* Hide scrollbar for Firefox */
      -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .container-1 .batch-info::-webkit-scrollbar {
      display: none;
  }

  .batch-info .batch_desc {
      flex: 0 0 auto;
      font-size: 0.9rem;
  }
  .interviewbanner_section{
    height: 70vh;
  }
}

/* Tablets and Medium Devices */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .container-1 .batch-info {
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
    
      animation: scroll 15s linear infinite;
  }

  .batch-info .batch_desc {
      font-size: 1rem;
  }
}

/* Large Tablets and Small Desktops */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .container-1 .batch-info {
      gap: 2.5rem;
      animation: scroll 18s linear infinite;
  }
}

/* Large Desktops and High-Resolution Screens */
@media screen and (min-width: 1025px) {
  .container-1 .batch-info {
      gap: 3rem;
      animation: scroll 20s linear infinite;
  }
}

/* Ensure Hover Effects Work on Touch Devices */
@media (hover: hover) {
  .batch_desc:hover {
      transform: scale(1.05);
  }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  .batch-info {
      animation: none;
  }
}
/* Extra small devices (phones, 0px and up) */
@media (max-width: 575.98px) {
    nav {
        padding-left: 20px;
        padding-right: 20px;
    }
    .nav_items ul {
        gap: 1rem;
    }
    .btn_start button {
        padding: 6px 20px;
        font-size: 14px;
    }
   
    .banner-section {
        flex-direction: column;
        padding: 2rem 1.5rem;
        gap:2.2rem;
    }
    .course_headerSection h1 {
        font-size: 32px;
        line-height: 36px;
    }
    .banner-section .course_headerSection p {
        width: 100%;
    }
    .program_highlights_container {
        flex-direction: column;
        gap: 2rem;
    }
    .program_highlights_container .program_highlight {
        width: 100%;
        gap: 0.5rem;
    }
    .why_innercontainer {
        padding: 2rem 1.5rem;
    }
    .flex.flex-col-reverse.lg\:flex-row{
      flex-direction: column-reverse;
      gap: 1rem;
      align-items: flex-start;
    }
}

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    nav {
        padding-left: 40px;
        padding-right: 40px;
    }
    .btn_start button {
        padding: 8px 24px;
        font-size: 15px;
    }
    .banner-section {
        padding: 3rem 2rem;
    }
    .program_highlights_container {
        flex-direction: row;
        gap: 2rem;
    }
    .program_highlights_container .program_highlight {
        width: 180px;
    }
    .why_innercontainer {
        padding: 2.5rem 2rem;
    }
    .flex.flex-col-reverse.lg\:flex-row{
      flex-direction: column-reverse;
      gap: 1rem;
      align-items: flex-start;
    }
}

/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    nav {
        padding-left: 50px;
        padding-right: 50px;
    }
    .banner-section {
        padding: 4rem 3rem;
    }
    .program_highlights_container {
        gap: 3rem;
    }
    .program_highlights_container .program_highlight {
        width: 200px;
    }
    .why_innercontainer {
        padding: 3rem 2.5rem;
    }
}

/* Large devices (large desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    nav {
        padding-left: 60px;
        padding-right: 60px;
    }
    .program_highlights_container {
        gap: 4rem;
    }
    .program_highlights_container .program_highlight {
        width: 220px;
    }
    .why_innercontainer {
        padding: 3rem 3rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    nav {
        padding-left: 60px;
        padding-right: 60px;
    }
    .banner-section {
        padding: 3.2rem 3.75rem;
    }
    .program_highlights_container {
        gap: 5rem;
    }
    .program_highlights_container .program_highlight {
        width: 230px;
    }
    .why_innercontainer {
        padding: 3.5rem 3.75rem;
    }
}

/*-------------next-responive part----------*/
/*----------------------- Responsive for Why AWS Avinash -----------------------*/
@media (max-width: 1024px) {
    .why_innercontainer {
        padding: 2rem;
        flex-direction: column;
        gap: 2rem;
    }
    .desc_achievements .mentor_achievements {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        gap: 1rem;
    }
    .mentorimg_Container, .mentorimg_Container_2 {
        width: 100%;
    }
    .youtube_iframe iframe{
       width: 100%;
       height: 100%;
       border-radius: 12px;
    }
    .mentor-infoAbout {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        gap: 1rem;
        flex-direction: column-reverse;
    }
    .mentor_aboutContainer .contact_btn {
        padding: 8px 20px;
    }
}

/*----------------------- Responsive for Course Enrollment -----------------------*/
@media (max-width: 1024px) {
    .course_enrollementSection .course_enrollementInnerContainer {
        padding: 2rem;
    }
    .enrolling_sectionContainer .details_container {
        width: 100%;
        display: none;
    }
    .enrolling_informationContainer {
        flex-direction: column;
        gap: 2rem;
        left: 0;
        bottom: 0;
        background-color: #fff;
        border-radius: 12px;
        padding: 2rem;
    }
   
    .enrolling_informationContainer .course_headerContainer{
      align-items: center;
    }
    .enrolling_informationContainer .course_infoDetails{
       align-items: center;
    }
    .enrolling_informationContainer .course_duration{
      align-items: center;
   }
    .enrolling_sectionContainer .enroll_btn {
        width: 30%;
        padding: 8px 20px;
        display: none;
    }
}

/*----------------------- Responsive for How It Works -----------------------*/
@media (max-width: 1024px) {
    .howitworks_section .howitworks_sectionInnercontainer {
        padding: 2rem;
    }
}

/*----------------------- Responsive for Testimonials -----------------------*/
@media (max-width: 1024px) {
    .testimonals_innerContainer {
        padding: 2rem;
    }
}

/*----------------------- Responsive for FAQs -----------------------*/
@media (max-width: 1024px) {
    .faqs_innerContainer {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem;
    }
    .accordion {
        max-width: 100%;
    }
    .faq-container {
        max-width: 90%;
        padding: 1rem;
    }
}

/*----------------------- Responsive for Bootcamp Contact Form -----------------------*/
@media (max-width: 1024px) {
    .innerContainer_Bootcamp {
        padding: 2rem;
    }
    .section-8 {
        flex-direction: column;
        margin: 1.5rem auto;
    }
    .form {
        padding: 20px;
    }
}

/*----------------------- Responsive for Footer -----------------------*/
@media (max-width: 768px) {
    .footer-section {
        padding: 20px;
    }
    footer .footer_mainContainer {
        flex-direction: column;
        gap: 1.5rem;
    }
    .social_links {
        justify-content: center;
    }
    .info1 {
        align-items: center;
        text-align: center;
    }
    .info_details{
        flex-direction: column;
    }
}


/*responive for testimonals and course preview--------*/
/* Base styles remain the same as provided */

/* Large Devices (Desktops & Laptops) */
@media screen and (max-width: 1200px) {
    .testimonalslist_mainContainer {
        max-width: 85vw;
    }

    .courseinfo_mainContainer {
        flex-direction: column;
        align-items: center;
    }

    .testimonals_innerContainer {
        padding: 2rem 2rem 3rem 2rem;
    }
}

/* Medium Devices (Tablets & Smaller Laptops) */
@media screen and (max-width: 992px) {
    .aws_courseInnercontainer {
        padding-bottom: 3rem;
        padding-top: 2rem;
    }

    .coursemodules_container {
        max-width: 90%;
        padding: 15px;
    }

    .pricedetails_maincontainer {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .testimonalslist_mainContainer {
        max-width: 90vw;
        min-height: 40vh;
        padding: 0;
    }

    .testimonial.active {
        transform: scale(1.1);
    }

    .content {
        width: 250px;
    }
}

/* Small Devices (Tablets & Large Phones) */
@media screen and (max-width: 768px) {
    .aws_courseInnercontainer {
        gap: 24px;
    }
    .program_mainHeaderContainer span.decor{
        left: 20%;
    }
    .coursename_headercontainer {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .sup_img img{
        width: 100%;
        height: 100%;
       }
    .mentor_imgContainer img{
        width: 100%;
        height: 100%;
    }   
    .coursedetails_mainContainer {
        padding: 0.75rem;
    }

    .courseenrolldetails-container {
        padding: 0.75rem;
    }

    .testimonals_innerContainer {
        padding: 1.5rem 1rem 2rem 1rem;
    }

    .testimonals_innerContainer .program_mainHeaderContainer {
        padding-bottom: 2rem;
    }

    .testimonial.active {
        transform: scale(1);
    }

    .avatar {
        width: 80px;
        height: 80px;
    }

    .content {
        width: 220px;
    }
}

/* Extra Small Devices (Mobile Phones) */
@media screen and (max-width: 576px) {
    .aws_courseInnercontainer {
        padding-bottom: 2rem;
        padding-top: 1.5rem;
        gap: 16px;
    }

    .enroll_btn {
        padding: 6px 24px;
    }

    .coursemodules_container {
        padding: 10px;
    }

    .module-header {
        padding: 12px;
    }

    .module-content.active {
        padding: 12px;
    }

    .testimonalslist_mainContainer {
        max-width: 95vw;
        min-height: 30vh;
        padding-bottom: 2rem;
        padding: 0;
    }

    .testimonials-wrapper {
        padding: 0 10px;
    }

    .content {
        width: 200px;
    }

    .name {
        font-size: 1.1rem;
    }

    .text {
        font-size: 0.8rem;
    }
}

/* Very Small Devices (Small Mobile Phones) */
@media screen and (max-width: 375px) {
    .aws_courseInnercontainer {
        padding-bottom: 1.5rem;
        padding-top: 1rem;
    }

    .enroll_btn {
        padding: 5px 20px;
    }

    .coursedetails_mainContainer {
        padding: 0.5rem;
    }

    .testimonalslist_mainContainer {
        border-radius: 16px;
    }

    .avatar {
        width: 60px;
        height: 60px;
    }

    .content {
        width: 180px;
    }
}

/*-------Interview prep responive part---------------------------*/
/* Base styles remain the same as provided */

/* Large Screens (Desktops) - Above 1200px */
@media screen and (max-width: 1200px) {
    .youtubeframes_innerContainer {
      grid-template-columns: 400px 400px;
      gap: 1.5rem;
      padding: 20px;
    }
  
    .multipe_qsContainer .question,
    .multipe_qsContainer #quiz-header {
      margin-left: 8rem;
      margin-right: 8rem;
    }
  
    .multipe_qsContainer button {
      margin-left: 40rem;
    }
  }
  
  /* Medium Screens (Tablets/Smaller Desktops) - 768px to 1199px */
  @media screen and (max-width: 992px) {
    .interview_innerContainer {
      padding: 4rem 2rem;
    }
  
    .youtubeframes_innerContainer {
      grid-template-columns: 1fr;
      max-width: 600px;
      margin: 0 auto;
    }
  
    .interview_youtubeframes {
      padding: 20px 30px;
    }
  
    .multipe_qsContainer .question,
    .multipe_qsContainer #quiz-header {
      margin-left: 4rem;
      margin-right: 4rem;
    }
  
    .multipe_qsContainer button {
      margin-left: 20rem;
    }
  
    .multipe_qsContainer .quiz-container {
      margin: 1rem;
      height: 500px;
    }
  
    .multipe_qsContainer #container-pie {
      margin-left: 30%;
    }
  }
  
  /* Small Screens (Tablets/Large Phones) - 576px to 767px */
  @media screen and (max-width: 768px) {
    .interview_innerContainer {
      padding: 3rem 1rem;
      gap: 1rem;
    }
  
    .interviewheader_section {
      padding-top: 2rem;
    }
  
    .youtubeframes_innerContainer {
      max-width: 100%;
      padding: 0 1rem;
    }
  
    .interview_youtubeframes {
      padding: 20px 15px;
    }
  
    .multipe_qsContainer .question,
    .multipe_qsContainer #quiz-header {
      margin-left: 2rem;
      margin-right: 2rem;
    }
  
    .multipe_qsContainer button {
      margin-left: 10rem;
    }
  
    .multipe_qsContainer #scoreChart {
      width: 250px !important;
      height: 250px !important;
    }
  
    .multipe_qsContainer #container-pie {
      margin-left: 20%;
    }
  
    .multiple_qsinnerContainer .sm-btn {
      padding: 8px 24px;
    }
    .next-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .frm_container iframe {
        width: 350px;
        height: 200px;
    }
  }
  
  /* Extra Small Screens (Mobile Phones) - Below 576px */
  @media screen and (max-width: 576px) {
    .interview_innerContainer {
      padding: 2rem 0.5rem;
    }
  
    .interviewheader_section h1 {
      font-size: 1.5rem;
    }
  
    .youtubeframes_innerContainer {
      padding: 0 0.5rem;
    }
  
    .interview_youtubeframes {
      padding: 15px 10px;
    }
  
    .multipe_qsContainer .question,
    .multipe_qsContainer #quiz-header {
      margin-left: 1rem;
      margin-right: 1rem;
    }
  
    .multipe_qsContainer button {
      margin-left: 5rem;
      padding: 8px 24px;
    }
  
    .multipe_qsContainer .quiz-container {
      margin: 0.5rem;
      height: 450px;
    }
  
    .multipe_qsContainer #scoreChart {
      width: 200px !important;
      height: 200px !important;
    }
  
    .multipe_qsContainer #container-pie {
      margin-left: 10%;
    }
  
    .multipe_qsContainer #result {
      left: 35%;
    }
  
    .multiple_qsinnerContainer .sm-btn {
      padding: 6px 20px;
      font-size: 0.9em;
    }
  
    .multipe_qsContainer #quiz-header {
      /* flex-direction: column; */
      gap: 0.5rem;
      text-align: center;
    }
    .multipe_qsContainer button#next-button {
        margin-left: 52% !important;                     /*changed*/
    }
    .next-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .retake-test {
      float: left;
      margin-left: -58%;
  }
    .frm_container iframe {
        width: 350px;
        height: 200px;
    }
  }
  
  /* Ensure minimum width for very small devices */
  @media screen and (max-width: 320px) {
    .interview_innerContainer {
      min-width: 320px;
    }
  
    .multipe_qsContainer button {
      margin-left: 2rem;
      padding: 6px 16px;
    }
  
    .multipe_qsContainer #result {
      left: 30%;
    }
    .next-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .frm_container iframe {
        width: 350px;
        height: 200px;
    }
    .retake-test {
      float: left;
      margin-left: -58%;
  }
  }

  /*----------course responive page-----------*/
  /* Base styles remain the same as provided */

/* Large Screens (Desktops) - 1200px and above */
@media screen and (max-width: 1200px) {
    .course_bannerinnerContainer {
      padding: 40px 40px;
    }
  
    .course_modulesinnerContainer {
      padding: 30px 40px;
    }
  
    .course_descrpContainer {
      width: 600px;
    }
  
    .enroll_stcikytopedge {
      width: 350px;
      
    }
  
    .btn_cont button {
      padding: 16px 120px;
    }
  }
  
  /* Medium Screens (Tablets/Smaller Desktops) - 992px to 1199px */
  @media screen and (max-width: 992px) {
    .course_bannerinnerContainer {
      padding: 30px;
      flex-direction: column;
      
    }
  
   
    .course_modulesinnerContainer {
      padding: 25px 30px;
      flex-direction: column;
      gap: 2rem;
    }
  
    .course_descrpContainer {
      width: 100%;
      height: auto;
      min-height: 300px;
      max-width: 500px;
    }
  
    .enroll_stcikytopedge {
      width: 100%;
      position: relative;
      margin-top: 2rem;
      display: none;
    }
  
    .btn_cont {
      display: flex;
      justify-content: center;
    }
  
    .btn_cont button {
      padding: 16px 100px;
    }
  
    .what-you-will-learn--objectives-list-two-column-layout--ED4as {
      flex-direction: column;
      gap: 1rem;
    }
    .course_vdContainer iframe{
        width: 300px;
    }
  }
  
  /* Small Screens (Tablets/Large Phones) - 768px to 991px */
  @media screen and (max-width: 768px) {
    .course_bannerinnerContainer {
      padding: 25px 20px;
    }
  
    .course_modulesinnerContainer {
      padding: 20px;
    }
  
    .hurry_upCourse {
      padding: 12px 24px;
      font-size: 0.9rem;
    }
  
    .btn_cont button {
      padding: 14px 80px;
      font-size: 16px;
    }
  
    .modules_mainContainer {
      gap: 1.5rem;
    }
    .course_vdContainer iframe{
        width: 100%;
    }
  }
  
  /* Extra Small Screens (Mobile Phones) - 576px to 767px */
  @media screen and (max-width: 576px) {
    .course_bannerinnerContainer {
      padding: 20px 15px;
      gap: 1.5rem;
              padding: 20px !important;
    }
  
    .course_modulesinnerContainer {
      padding: 15px;
    }
  
    .hurry_upCourse {
      padding: 10px 20px;
      font-size: 0.85rem;
    }
  
    .btn_cont button {
      padding: 12px 40px;
      font-size: 15px;
      width: 100%;
    }
  
    .modules_mainContainer {
      gap: 1rem;
    }
  
    .course_descrpContainer {
      min-height: 250px;
      max-width: 350px;
    }
  
    .enroll_stcikytopedge {
      height: 250px;
      display: none;
    }
    .course_vdContainer iframe{
        width: 100%;
    }
  }
  
  /* Very Small Screens - Below 576px */
  @media screen and (max-width: 375px) {
    .course_bannerinnerContainer {
      padding: 2rem 2rem !important;
      gap: 1rem;
    }
  
    .course_modulesinnerContainer {
      padding: 10px;
    }
  
    .hurry_upCourse {
      padding: 8px 16px;
      font-size: 0.8rem;
    }
  
    .btn_cont button {
      padding: 10px 30px;
      font-size: 14px;
    }
  
    .course_descrpContainer {
      min-height: 200px;
      max-width: 300px;
    }
  
    .enroll_stcikytopedge {
      height: 200px;
      display: none;
    }
    .course_vdContainer iframe{
        width: 100%;
    }
  }
  
  /* Additional Utility Classes for Better Responsiveness */
  .hide-on-mobile {
    display: none !important;
  }
  
  @media screen and (min-width: 768px) {
    .hide-on-mobile {
      display: block !important;
    }
  }
  
  .text-center-mobile {
    text-align: center;
  }
  
  @media screen and (min-width: 768px) {
    .text-center-mobile {
      text-align: left;
    }
    .course_vdContainer iframe{
        width: 100%;
    }
  }
  /* Large Desktop (1440px and above) */
@media screen and (min-width: 1440px) {
  .feature_blog, .blog_allArticles {
      padding-left: 120px;
      padding-right: 120px;
  }
  
  .blog-grid {
      grid-template-columns: repeat(4, 1fr);
  }
}

/* Desktop (1024px to 1439px) */
@media screen and (max-width: 1439px) {
  .feature_blog, .blog_allArticles, .blogview_innerContainer {
      padding-left: 40px;
      padding-right: 40px;
  }
  
  .blog-grid {
      grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet Landscape (768px to 1023px) */
@media screen and (max-width: 1023px) {
  .featured-article.module.h-c-grid {
      flex-direction: column;
  }
  
  .blog-grid {
      grid-template-columns: repeat(2, 1fr);
  }
  
  .blogview_innerContainer {
      flex-direction: column;
  }
  
  .blog_contentContainer {
      max-width: 100%;
  }
  
  .blogcourse_detailsrealted {
      position: static;
      width: 100%;
      margin-top: 2rem;
  }
  
  a.featured-article__content.featured-article__content-horizontal {
      max-width: 100%;
  }
}

/* Tablet Portrait (481px to 767px) */
@media screen and (max-width: 767px) {
  .feature_blog, .blog_allArticles, .blogview_innerContainer {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;
  }
  
  .blog-grid {
      grid-template-columns: repeat(1, 1fr);
      gap: 1.5rem;
  }
  
  .filter-container {
      gap: 0.5rem;
  }
  
  .filter-btn {
      padding: 0.4rem 1rem;
      font-size: 0.8rem;
  }
  
  .card-content {
      padding: 1rem;
  }
  
  .card-title {
      font-size: 1.2rem;
  }
}

/* Mobile (480px and below) */
@media screen and (max-width: 480px) {
  .feature_blog, .blog_allArticles, .blogview_innerContainer {
      padding: 16px;
  }
  
  .blog_headerContainer {
      margin-bottom: 1.5rem;
  }
  
  .card-image {
      height: 160px;
  }
  
  .card-icon {
      width: 40px;
      height: 40px;
  }
  
  .blog_contentContainer .blog-title {
      font-size: 1.8rem;
  }
  
  .blogcourse_detailsrealted {
      padding: 1rem;
      gap: 2rem;
  }
  
  .related_topicsContainer li {
      font-size: 16px;
  }
  
  .bullet_points {
      margin-left: 1rem;
  }
}

/*-----------demo session responive-------*/
/* Base Responsive Styles */
@media screen and (max-width: 1200px) {
  .course-sectionDemo {
      padding: 30px 40px;
  }
}

/* Tablet Styles */
@media screen and (max-width: 992px) {
  .Course_contentdaily{
   width: 90%;
  }
  .course-sectionDemo {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 25px;
  }

  .course-sectionDemo .content-header h2 {
      font-size: 2rem;
  }

  .course-sectionDemo .video-container {
      min-height: 200px;
      
  }
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
  .course-sectionDemo {
      padding: 20px;
  }

  .course-sectionDemo .content-header h2 {
      font-size: 1.75rem;
  }

  .course-sectionDemo .video-container .placeholder-icon {
      width: 80px;
      height: 80px;
  }
}

/* Small Mobile Styles */
@media screen and (max-width: 480px) {
  .Course_contentdaily{
    width: 100%;
  }
  .course-sectionDemo {
      padding: 15px;
      width: 90%;
  }

  .course-sectionDemo .content-header h2 {
      font-size: 1.5rem;
  }

  .course-sectionDemo .content-description {
      font-size: 0.9rem;
  }

  .course-sectionDemo .video-container {
     min-height: 160px;
     max-width: 100%;
  }

  .course-sectionDemo .video-container .placeholder-icon {
      width: 60px;
      height: 60px;
  }
}

/* Extra Small Devices */
@media screen and (max-width: 320px) {
  .course-sectionDemo {
      padding: 10px;
  }

  .course-sectionDemo .content-header h2 {
      font-size: 1.25rem;
  }

  .course-sectionDemo .content-description {
      font-size: 0.8rem;
      margin-bottom: 15px;
  }
}

/* Landscape Orientation */
@media screen and (max-width: 992px) and (orientation: landscape) {
  .course-sectionDemo {
      grid-template-columns: 1fr 1fr;
      gap: 20px;
  }

  .course-sectionDemo .video-container {
      min-height: 180px;
  }
}
@media screen and (max-width: 480px) {
    .play-button {
        width: 40px !important;
        height: 40px !important;
    }
}