/* ----------HOMEPAGE STYLING----------------- */

  .hero-blue-outer{
    background-color: #00adcf;
    background-image: url(/images/global-images/generic-hero-bg-blue.svg);
  }
  
  .hero-black-outer{
    background-color: #191911;
    background-image: url(/images/global-images/generic-hero-bg-black.svg);
  }
  
  .hero-blue-outer, .hero-black-outer{
    -webkit-mask-image: url(/images/global-images/header-mask.svg);
    mask-image: url(/images/global-images/header-mask.svg);
    mask-repeat: no-repeat;
    mask-position: bottom;
    mask-size: 100%;
    margin: -3rem;
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: top left;
    background-attachment: fixed;
    z-index: -100;
  }
  
  
  .hero-generic-inner{
    display: block;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15rem;
  }
  
  .hero-generic-textbox{
    width: 40%;
    margin-right: auto;
  }
  
  
  .generic-h1{
    padding-top: 13rem;
  }
  
  
    /* ----------HERO----------------- */
  .navbar-toggler{
    color: #191919;
  }
  
  .hero-btn-1{
    background-color: #191919;
    color:  #DDDED9;
    border-color: #191919;
    margin-left: 0rem !important;
  }
  
  
  .hero-btn-1:hover{
    background-color: #DDDED9;
    color:  #191919;
    border-color: #191919;
  
  }
  
  
  
    .home-hero-outer{
      width: 100%;
      height: fit-content;
      background-color: #DDDED9;
      background-image: url(/includes/images/home/home-hero-bg.jpg);
      background-size: cover;
      background-position: top center;
    }


      
    .home-hero-v2{
      background-image: url(/includes/images/home/home-hero-bg-v2.jpg);
    }

    .home-hero-v3{
      background-image: url(/includes/images/home/home-hero-bg-v3.jpg);
    }
  

    .home-hero-v4{
      background-image: url(/includes/images/home/home-hero-bg-v4.jpg);
    }

    .home-hero-v5{
      background-image: url(/includes/images/home/home-hero-bg-v5.jpg);
    }
  
    .home-hero-inner{
      display: block;
      width: 90%;
      margin-left: auto;
      margin-right: auto;
    }
  
  .hero-text-wrapper{
    padding-top: 13rem;
    padding-bottom: 10rem;
  }
    
  
  .h1-home{
    color: #191919;
    font-size: 3.75rem;
    line-height: 1.25;
  }
  
  
    .hero-textbox{
      width: 90%;
      padding-top: 1rem;
    }
  
  .hero-textbox-mobile{
    display: none;
  }
  @media (min-width: 1200px) and (max-width: 1399.98px) {
  
    .h1-home{
      color: #191919;
      font-size: 3.2rem;
    }
    
    .hero-btn-2, .hero-btn-3{
      padding-left: 2rem;
      padding-right: 2rem;
      font-size: 1.2rem;
      margin-left: .5rem;
      margin-right: .5rem;
    }
  

  }
    

  @media (min-width: 992px) and (max-width: 1200px) {
    .hero-btn-2, .hero-btn-3{
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      font-size: 1.2rem;
      margin-left: .5rem;
      margin-right: .5rem;
    }
  
    .h1-home{
      font-size: 2.8rem;
    }

  }


  @media (min-width: 768px) and (max-width: 992px) {
    .hero-btn-2, .hero-btn-3{
      padding-left: 1.2rem;
      padding-right: 1.2rem;
      font-size: 1rem;
      margin-left: .5rem;
      margin-right: .5rem;
    }
  

    .h1-home{
      font-size: 2.4rem;
    }

  }



  @media (min-width: 576px) and (max-width: 767.98px) {
    .hero-btn-2, .hero-btn-3{
      padding-left: 1rem;
      padding-right: 1rem;
      font-size: 1rem;
      margin-left: .5rem;
      margin-right: .5rem;
    }

    .h1-home{
      font-size: 2rem;
    }

  }

    @media (min-width: 0px) and (max-width: 575.98px) {
  
      .hero-btn-1{
        width: 100%;
        background-color: #ffffff00;
        color:  #DDDED9;
        border-color: #DDDED9;
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      
      
      
      .hero-btn-1:hover{
        background-color: #DDDED9;
        color:  #00adcf;
        border-color: #DDDED9;
      }
      
  
  
      .home-hero-outer{
        width: 100%;
        height: fit-content;
        background-color: #DDDED9;
        background-image: url(/includes/images/home/hero-mobile.webp);
        background-size:contain;
        background-repeat:  no-repeat;
        background-position: top center;
        aspect-ratio: 288 / 415;
      }

            
    .home-hero-v2{
      background-image: url(/includes/images/home/hero-mobile-v2.webp);
    }

    .home-hero-v3{
      background-image: url(/includes/images/home/hero-mobile-v3.webp);
    }
  
    
      .home-hero-inner{
        display: block;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
      }
    
    .hero-text-wrapper{
      padding-top: 4rem;
      padding-bottom: 10rem;
    }
      
      .hero-textbox{
        width: 100%;
        padding-top: 1rem;
      }
  
      .h1-home{
        color: #191919;
        font-size: 2.5rem;
        line-height: 1.25;
      }
  
  
      .hero-textbox{
        display: none;
      }
  
      .hero-textbox-mobile-outer{
        background-color: #191919;
        background-image: url(/includes/images/mobile-hero-bottom-bg.webp);
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 2rem;
        background-position: top right;
      }
  
  
      .hero-textbox-mobile-inner{
        display: block;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
  
  
      }
  
  
      .hero-textbox-mobile-text{
        color: #DDDED9
      }

      .h1-home{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
        padding-top: 1.75rem;
      }
  
      @media (min-width: 0px) and (max-width: 388.98px) {
      .h1-home{
        font-size: 2rem;
      }
    }
  }
  
      /* ----------HERO - BOTTOM----------------- */
  
    .home-hero-sub-outer{
      background-color: #191919;
      height: fit-content;

      background-repeat: no-repeat;
      background-position: top right;
      background-size: 30%;
    }
  
    .home-hero-sub-inner{
      display: block;
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      padding-top: 3rem;
      padding-bottom: 3rem;
  
    }
  
    .sub-hero-img {
      width: 90%;
      height: 40rem;
      background: 
          linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(0, 173, 207, 1) 100%),
          url('/includes/images/home/sub-hero-img.webp') center no-repeat;
      background-size: cover;
      border-radius: 1rem;
      box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 1.5rem 2rem 0 rgba(0, 0, 0, 0.19);
      transform: translateY(-7rem);
      margin-bottom: -6rem
  }
  
  
      .sub-hero-text-wrapper{
        padding-top: 1rem;
  
      }
  
  
    .btn-arrow-emphasis{
      font-weight: bolder;
    }
  
  
    
    .hero-btn-2{
      background-color: #DDDED9;
      color:#191919;
      border-color: #DDDED9;
      margin-left: 0rem !important;
    }
  
    .hero-btn-2:hover{
      background-color: #191919;
      color:#DDDED9;
  
    }
  
  
    .hero-btn-3{
      background-color: #191919;
      color:  #DDDED9;
      border-color: #DDDED9;
    }
    
  
    .hero-btn-3:hover{
      background-color: #DDDED9;
      color:  #191919;
  
    }
  
  
    .home-container{
      max-width: 1440px;
      width: 90%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      z-index: 1;
  
    }
  
  
    @media (min-width: 0px) and (max-width: 575.98px) {
  
    .sub-hero-img {
      width: 100%;
      height: 20rem;
      background: 
          linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%),
          url('/includes/images/home/sub-hero-img.webp') center no-repeat;
      background-size: cover;
      border-radius: 1rem;
      box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 1.5rem 2rem 0 rgba(0, 0, 0, 0.19);
      transform: translateY(0rem);
      margin-bottom: 0%
  }
  
  .hero-btn-2{
    background-color: #DDDED9;
    color:#191919;
    border-color: #DDDED9;
    margin-left: auto !important;
  }
  
  .hero-btn-2:hover{
    background-color: #191919;
    color:#DDDED9;
  
  }
  
  
  .hero-btn-3{
    background-color: #191919;
    color:  #DDDED9;
    border-color: #DDDED9;
  }
  
  
  .hero-btn-3:hover{
    background-color: #DDDED9;
    color:  #191919;
  
  }
  
    }
  
  .merit-header{
    font-size: 1.5rem;
    text-align: left;
    padding-top: 2rem;
    padding-bottom: 0rem;
    line-height: 1;
    color: #00adcf;
  }

  .merit-img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .merit-img{
    width: 70%;
    border-radius: 1rem;
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 1.5rem 2rem 0 rgba(0, 0, 0, 0.19);
  }

  @media (min-width: 0px) and (max-width: 575.98px) {
  
    .merit-img{
      width: 100%;
      border-radius: 1rem;
    }
  }
    /* ----------SERVICES----------------- */
  
  
  .services-div{
    background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 10%, rgba(252,252,252,1) 90%, rgba(255,255,255,1) 100%);
  }
  
  .service-card-row{
    width: 85%;
    display: block;
    margin-left: auto;
    margin-right: auto
  
  }
  
  
    .service-card-1, .service-card-2{
  
      display: block;
      margin-left: auto;
      margin-right: auto;
      border-radius: 1rem;
      height: fit-content;
      z-index: 1;
    }
  
  .service-text{
    font-size: 1rem;
    width: fit-content;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  
  .service-text-2{
    color: #f6f6f6 !important;
  }
  
    .service-card-1{
      width: 30%;
      background-color: #fff;
      margin-top: 3rem;
      border-radius: 1rem;
      overflow-x: hidden;
      overflow-y: hidden;
      padding: 1.25rem;
  
    }
  
    .service-card-1-img{
      width: 100%;
      border-radius: 1.2rem;
     
    }
  
    .service-card-2{
      background-color: #00adcf;
      width: 32.5%;
      margin-bottom: 3rem;
      background-image: url(/includes/images/home/card-2-decoration.svg);
      background-repeat: no-repeat;
      background-position: bottom right;
      padding: 1.25rem;
    }
  
  
    .service-card-text-wrapper{
      width: 95%;
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 1rem;
      margin-top: -1rem;
    }
  
  .service-btn-wrapper{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-bottom: 1rem;
  
  }

  .service-h3{
    font-size: 1.5rem;
  }
  
  .service-btn-1, .service-btn-2, .service-btn-3{
    padding-left: 2rem;
    padding-right: 2rem;
    margin-left: .5rem;
    margin-right: .5rem;
  }
  
    .service-btn-1{
      background-color:#ffffff00;
      color:#191919;
      border-color:#191919;
    }
  
    .service-btn-1:hover{
      color: #fff;
      background-color: #191919;
    }
  
  
    .service-btn-2{
      background-color:#ffffff00;
      color:#fff;
      border-color:#fff;
    }
  
    .service-btn-2:hover{
      background-color:#fff;
      color:#00adcf;
      border-color:#fff;
    }
  
    .service-btn-3{
      background-color:#fff;
      color:#00adcf;
      border-color:#fff;
    }
  
    .service-btn-3:hover{
      background-color:#ffffff95;
      border-color:#fff;
      color:#00adcf;
    }
    @media (min-width: 1200px) and (max-width: 1475px) {
      .service-card-row{
        width: 95%;
        display: block;
        margin-left: auto;
        margin-right: auto
      
      }
      .service-card-1, .service-card-2{
        
        margin-top: 3rem;
        border-radius: 1rem;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: .5rem;
    
      }
      @media (min-width: 1200px) and (max-width: 1475px) {
      .service-text{
        font-size: .8rem;
      
      }
    }
      .service-btn-1, .service-btn-2, .service-btn-3{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin: .3rem;
        margin-left: .25rem;
        margin-right: .25rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

    }

    @media (min-width: 768px) and (max-width: 992px) {
      .service-card-row{
        width: 95%;
        display: block;
        margin-left: auto;
        margin-right: auto
      }

      .service-h3{
        font-size: 1.2rem;
      }
      

      .service-card-1, .service-card-2{
        width: 30%;
        margin-top: 3rem;
        border-radius: 1rem;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: .75rem;
    
      }
  

      .service-text{
        font-size: .8rem;
      
      }


      .service-btn-1, .service-btn-2, .service-btn-3{
        padding-left: 2rem;
        padding-right: 2rem;
        margin: .3rem;
        margin-left: .5rem;
        margin-right: .5rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
    }


    @media (min-width: 992px) and (max-width: 1200px) {
      .service-card-row{
        width: 97.5%;
        display: block;
        margin-left: auto;
        margin-right: auto
      
      }
      
      .service-h3{
        font-size: 1.5rem;
      }



      .service-card-1, .service-card-2{
        padding: .5rem;
        width: 33%;

      }

      .service-btn-1, .service-btn-2, .service-btn-3{
        padding-left: 2rem;
        padding-right: 2rem;
        margin: .3rem;
        margin-left: .5rem;
        margin-right: .5rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      .service-text{
        font-size: .9rem;
      }
      
      @media (min-width: 992px) and (max-width: 1100px) {

      .service-text{
        font-size: .8rem;
      }
      }

    }


    @media (min-width: 768px) and (max-width: 991px) {
      .service-card-row{
        width: 98%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: fit-content;
        position: relative;
      
      }
      


      .service-text{
        font-size: .75rem;
      }

      @media (min-width: 768px) and (max-width: 832px) {  

      .service-text{
        font-size: .65rem;
      }
       }
      .service-card-1, .service-card-2{
        width: 32%;
        margin-top: 3rem;
        border-radius: 1rem;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: .5rem;
         height: 100%;
      }
  
    }
  
    @media (min-width: 576px) and (max-width: 768px) {
      .service-card-row{
        width: 99%;
        display: block;
        margin-left: auto;
        margin-right: auto
    
      }

      .service-card-1, .service-card-2{
        padding: .5rem;
        width: 32%;

      }
      .service-btn-1, .service-btn-2, .service-btn-3{
        padding-left: 2rem;
        padding-right: 2rem;
        margin: .3rem;
        margin-left: .5rem;
        margin-right: .5rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }


        .service-text{
          font-size: .8rem;
    }

    @media (min-width: 576px) and (max-width: 623px) {
        .service-text{
          font-size: .7rem;
    }
    }

  }


  @media (min-width: 0px) and (max-width: 576px) {
    .service-card-title {
      font-size: 1.5rem;
    }
  
    .service-card-1,
    .service-card-2 {
      width: 100%;
      margin-top: 2rem;
      margin-bottom: 2rem;
      height: auto; /* Allow JavaScript to control height */
      padding: .75rem;
    }
  
    .service-btn-1,
    .service-btn-2,
    .service-btn-3 {
      padding-left: 2rem;
      padding-right: 2rem;
      margin: 0.3rem;
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: fit-content;
    }
    .service-text{
      font-size: 1rem
      ;
    }
    .nav-arrows-wrapper {
      padding-bottom: 2rem; /* Adds 2rem of space below the buttons */
    }

    @media (min-width: 0px) and (max-width: 394.9px) {
    .service-text{
      font-size: .8rem
      ;
    }
  }
  
}
  
  
   /* ----------CALL TO ACTION----------------- */
  
  .call-to-action-outer{
      background-color: #00adcf;
      width: 100%;
      aspect-ratio: 3/ 1;
      background-image: url(/includes/images/home/cta-bg-decoration.svg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 100% 100%;
      background-position: top left;    
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      margin-top: -2rem;
      margin-bottom: -2rem;
      z-index: 0;
   

      mask-image: url("/includes/images/home/mask-upper.svg"),
      linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
      url("/includes/images/home/mask-lower.svg");
      mask-size:
      100% auto,
      100% 70%,
      100% auto;
    mask-position: top, center, bottom;
    mask-repeat: no-repeat;
  }

  .cta-inner{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  
  .cta-h2{
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 600;
    text-align: center;
    line-height: 1;
    padding-bottom: 1rem;
  }
  
  .cta-h3{
    line-height: 1.5!important;
    color: #f6f6f6;
    padding-bottom: 1rem;
    font-size: 1.75rem;
    max-width: 75%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .cta-btn{
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color:#ffffff00;
    color:#fff;
    border-color:#fff;
    font-size: 1.5rem;
  
  }
  
  .cta-btn:hover{
    background-color:#fff;
    color:#00adcf;
  }
  
  @media (min-width: 576px) and (max-width: 991.98px) {
 .cta-inner{
  margin-top: 2rem;
  margin-bottom: 2rem;
 }
  }


  @media (min-width: 0px) and (max-width: 575.98px) {

.cta-h2{
  font-size: 2rem;
}
.cta-h3{
  font-size: 1.25rem;
  max-width: 90%;
}


    .call-to-action-outer{
      background-color: #00adcf;
      width: 100%;
      aspect-ratio: 1/ 1;
      background-image: url(/includes/images/home/cta-bg-decoration.svg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 150% 150%;
      background-position: top left;    
      -webkit-mask-image: none;
      mask-image: none;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      margin-top: -3rem;
      margin-bottom: -3rem;
      z-index: -10;
   

      mask-image: url("/includes/images/home/mask-upper.svg"),
      linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)),
      url("/includes/images/home/mask-lower.svg");
    mask-size:
      100% auto,
      100% 70%,
      100% auto;
    mask-position: top, center, bottom;
    mask-repeat: no-repeat;

  }

    
  .cta-btn{
margin-left: 0rem;
margin-right: 0;
font-size: 1rem;

  }

  .cta-inner{
    padding-top:0rem;
    padding-bottom: 0rem;
  }
  
  }
  
  /* --------------------CASE STUDY--------------------------*/
  .success-story-row{
    height: fit-content;
  display: flex;
  align-items: center; /* Vertically centers the item */
  justify-content: center; /* Horizontally centers the item (optional) */
  }

  .success-container{
    margin-bottom: 2rem;

  }

  .success-h2{
    font-size: 2rem;
  }

  .success-story{
    position: relative;
    display: block;
    z-index: 1;

  }

  .success-pictures-col{
    display: flex;
    align-items: center; /* Vertically centers the item */
    justify-content: center; /* Horizontally centers the item (optional) */
    height: 100%;
  }

  .case-study-emphasis{
    color:#00adcf;
    font-size: 1.5rem;
    padding: .5rem;
    border-radius: 0.5rem;
    border-width: 0.1875rem;
    font-weight: bold;
    border-style: solid;
    width: fit-content;
    height: fit-content;
    margin-left: auto;
    margin-right: 1rem;
    line-height: 1;
  
  }
  
  .btn-case-study{
    background-color:#ffffff00;
    color:#191919;
    border-color:#191919;
    margin-left: 0;
  }
  
  .btn-case-study:hover{
    color: #fff;
    background-color: #191919;
  }

  .success-images-row{
    position: relative;
    z-index: 3;
  }

  .success-image{
    width: 100%;
    height: auto;
    border-radius: 1rem;
  }

  .learn-with-fun{
    width: 100%;
    height: fit-content;
    border-radius: 1rem;
    background-color: #FE8101;
    display: flex;
    position: relative;
    margin-top: 1.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .success-3{
    justify-content: middle center;
    width: 90%;
    padding: 1.5rem;

  }

  @media (min-width: 0px) and (max-width: 575.98px) {
    .success-container{
     margin-top: 2rem;
  
    }
  }

  /* --------------------FAQ ACCORDION--------------------------*/

/* Accordion Styles */
.accordion {
  padding-bottom: 1rem;
  margin-bottom: 5rem;
  font-family: "M PLUS 1p", sans-serif;
}

.accordion-item {
  border: none !important;
  background-color: transparent;
  border-radius: 1rem !important;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
  background-color: #fcfcfc;
}

.accordion-item:not(.collapsed) {
  background-color: #ffffff; /* White background when expanded */
  border-radius: 2rem; /* Rounded edges when expanded */
  filter: none;
}

/* Accordion Button Styles */
.accordion-button {
  font-family: "Noto Sans JP", sans-serif;
  color: #191919;
  background-color: transparent;
  font-family: "M PLUS 1p", sans-serif;
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 1rem !important;
  box-shadow: none !important;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: #ffffff3b;
  display: flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center content */
}

/* Highlight expanded button */
.accordion-button:not(.collapsed) {
  background-color: #ffffff00; /* Highlight color */
  color: #00adcf;
  background-color: rgba(255, 255, 255, 0) !important;
  border-bottom: none;
}

/* Fix styles for collapsed buttons */
.accordion-button.collapsed {
  background-color: #fcfcfc;
  color: #191919;
  border-radius: 0rem !important;
  border-bottom: solid #d0d0d0;
}

/* Remove default icon */
.accordion-button::after {
  display: none;
}

/* Focus and Active States */
.accordion-button:focus,
.accordion-button:active {
  outline: none;
  box-shadow: none !important; /* Remove focus outline */
}

/* Icon Base Styles */
.accordion-btn-icon {
  transition: transform 0.3s ease-in-out, stroke 0.3s ease-in-out;
  width: 2.5rem; /* Start with a smaller, more reasonable size */
  height: auto;
  margin-right: 1rem; /* Adjust as needed */
  flex-shrink: 0; /* Prevent icon from shrinking */
  display: inline-flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center the icon */
  justify-content: center; /* Horizontally center the icon */
  margin: .2rem;
  margin-right: 1rem;

}

/* SVG Styles (inside the icon) */
.accordion-btn-icon svg { /* Target the SVG inside the icon container */
  width: 100%; /* Make SVG fill the icon container */
  height: 100%;
}


/* SVG Base State */
.accordion-icon-circle {
  fill: none;
  stroke: #191919; /* Default stroke color */
  stroke-miterlimit: 10;
  transition: transform 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

.accordion-icon-horizontal {
  fill: none;
  stroke: #191919; /* Default stroke color */
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

.accordion-icon-vertical {
  fill: none;
  stroke: #191919; /* Default stroke color */
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

/* Expanded State */
.accordion-button:not(.collapsed) .accordion-icon-circle {
  stroke: #00adcf; /* Circle stroke color in expanded state */
}

.accordion-button:not(.collapsed) .accordion-icon-horizontal {
  stroke: #00adcf; /* Horizontal stroke color in expanded state */
}

.accordion-button:not(.collapsed) .accordion-icon-vertical {
  stroke: #ffffff00; /* Vertical stroke color in expanded state */
}

/* Accordion Body Styles */
.accordion-body {
  font-family: "M PLUS 1p", sans-serif;
  color: #63574a;
  text-align: left;
  font-weight: 400;
  padding: 1rem;
  padding-top: 0rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Text Styles */
.accordion-text {
  font-family: "M PLUS 1p", sans-serif;
}

/* Bottom Section (if relevant) */
.bottom-section {
  background-color: transparent;
  padding-bottom: 0;
}

@media (max-width: 575.98px) {
  .accordion-header{
    font-size: 3rem;
  }
  .accordion-button {
    font-size: 1rem; /* Adjust font size if needed */
    padding: 0.75rem 1rem; /* Adjust padding as needed */
  }

  .accordion-btn-icon {
    width: 2.75rem; /* Slightly larger icon on mobile */
height: auto;
  margin: .2rem;
  margin-right: 1rem;
  }

  .accordion-body {
    font-size: 0.9rem; /* Smaller font in the body on mobile */
  }
  html:lang(en) .accordion-header {
    line-height: 1.2;
  
  }
}

.video-wrapper{
  display: flex;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.videobox{
  margin: auto;
  aspect-ratio: 16 / 9;
  height: auto;
  width: 60%;
}