/* Basic Reset (Optional) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Body Defaults */
  body {
    font-family: "Montserrat", serif;
    background-color: #fafafa;
  }
  
  html {
    scroll-behavior: smooth;/* This will set font-size between 14px and 18px, scaling fluidly with viewport width */
    /* font-size: clamp(14px, 2vw, 24px); */
  }
  
   /* Initially disable scrolling on body if desired */
   body.no-scroll {
    overflow: hidden;
  }
  /* Landing button starts disabled */
  .landing-button.disabled {
    pointer-events: none;
    opacity: 0.5;
    /* Optionally, you can add a cursor: not-allowed; */
    cursor: not-allowed;
  }
  
  
  /* Landing Section: Full viewport height, horizontal layout */
  .landing-section {
    display: flex;
    align-items: center;
    justify-content:space-around;
    height: 100vh;
    background-color: #f8f7dc;
    padding: 0 1rem;
    
  }
  .outer-box {
    position: relative; /* ensure relative positioning for children */
  }
  
  .logo {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20; /* higher than other content */
  }
  
  .logo img {
    max-height: 5vw; /* adjust size as needed */
    width: auto;
  }
  .landing-button.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }
  
  /* Outer Box: wraps all landing content */
  .outer-box {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
    height: 90%; /* Adjust as needed */
    /* background-color: #fff; */
    background-image: linear-gradient(to bottom, #FFFFF9, #F7F5D9);
    border: 2px solid #ccc;
    border-radius: 22px;
    padding: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  }
  
  
  
  /* Side Boxes: These contain the inner boxes */
  .side-box {
    width: 40%;
    /*height: 300px;*/
    /* background-color: #e1e1e1; */
    /* border: 2px solid #ccc; */
    border-radius: 4px;
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: space-evenly;
    padding: 0.5rem;
  }
  
  /* Center Content (Title & Button) */
  .center-content {
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    text-align: center;
  }
  
  .landing-title {
    font-size: 4vw;
    margin-bottom: 4rem;
    color: #333;
    font-weight: 200;
  }
  
  .landing-button {
    display: inline-block;
    text-decoration: none;
    color: #333;
    border: 2px solid #333;
    padding: 1.5rem 1.5rem;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .landing-button:hover {
    background-color: #333;
    color: #fff;
  }
  
  
  
  /* Styles for the nested inner boxes inside each side-box */
  .inner-box {
    background-color: #fafafa;
    border: 1px solid #999;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .inner-box {
    overflow: hidden;
  }
  
  .inner-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Adjust as needed: cover or contain */
    display: block;
  }
  
  /* Smaller inner box */
  .inner-box-small {
    width: 12vw;
    height: 15vw;
  }
  
  /* Larger inner box */
  .inner-box-large {
    width: 10vw;
    height: 30vw;
  }
  
  
  @media (max-width: 768px) {

    .logo img {
      max-height: 13vw; /* adjust size as needed */
      width: auto;
    }
    .logo {
      position: absolute;
      top: 10px;
      left: 7rem;
      z-index: 20; /* higher than other content */
    }
  }
  
  
  
  /* ---------- Down Box Styles ---------- */
  
  /* Hide the down-box by default */
  .down-box {
    display: none;
  }
  /**********************/
  /*video section*/
  /**********************/
 /* Video Section Container */
.video-section {
  display: flex;
    align-items: center;
    justify-content:space-around;
    height: 100vh;
    background-color: #161616;
    padding: 0 1rem;      /* Fallback background color */
}

/* Outer Box for the Video */
.video-outer-box {
  position: relative;
  width: 90%;
  height: 90%;
  border-radius: 20px;
}

/* Video element styling */
#heroVideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Overlay that covers the video when active */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(42 5 5);
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  z-index: 10;
}
.video-overlay.active {
  display: flex;
}

/* Mute icon styling */
.mute-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Overlay text styling */
.overlay-content p {
  margin: 0.5rem 0;
  font-size: 1.5rem;
}

/* Replay button styling */
#replayBtn {
  margin-top: 1rem;
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #fff;
  color: #000;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
  /***********************/
  /* test Section Styles */
  /***********************/
  /* About Section: Allow the content to take full viewport height */
  .test-section {
    background: #F8F7DC;
    overflow: hidden;
    /* We'll let ScrollTrigger pin this section */
  }
  
  /* Outer Box: Two columns layout */
  .test-outer-box {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    height: 100vh;
  }
  
  /* Left Column: Static Content */
  .test-left-box {
    
    position: absolute;
    /* top: 0; */
    left: 5%;
    height: 100vh;
    width: 26.8vw;
    background: #F8F7DC;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: #004B5E;
    border: #000;
    background-color: #F8F7DC;
    z-index: 100;
  }
  
  .test-left-box h1 {
    font-size: clamp(2.5rem, calc(2.5rem + 0.5vw), 3.125rem);
    margin-bottom: 1rem;
    ;
    
  }
  .test-left-box h2 {
    font-size: clamp(1.875rem, calc(1.875rem + 0.5vw), 2.5rem);
    margin-bottom: 1rem;
    
  }
  .static-box {
    width: 100%;
    /* text-align: center; */
  }
  
  /* Right Column: This column will not scroll on its own */
  .test-right-box {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 100vh;
  }
  
  /* Scroll Container: Contains all pairs and will be animated vertically */
  .test-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Its height must equal the total height of all pairs.
       In this example, each pair fills 100vh, so for 3 pairs, height = 300vh */
    height: 300vh;
    
    display: flex;
    flex-direction: column;
    
  }
  
  /* Each Pair: Full viewport height */
  .test-pair {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    box-sizing: border-box;
    background: #F8F7DC;
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    /* (Optional) You can add scroll-snap-align here if needed,
       but the animation below controls the translation */
       /* opacity: 0;
       transition: opacity 0.1s ease-out; */
     
       
  }
  
  /* Base styling for boxes in pairs */
  
  
  /* Left pair box: larger */
  .test-left-pair-box {
    width: 20vw;
    /* height: 20vw; */
    margin-right: 5%;
    
    
  }
  .test-left-pair-box img {
    width: 20vw;
    height: 100%;
    object-fit: contain;
    /* display: block; */
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
  }
  .image-container {
    position: relative;
    display: inline-block;
  }
  
  .image-container img {
    display: block;
    /* width: 100%;  */
    /* Adjust if necessary */
    height: auto;
  }

  .image-container .tombstone {
    
    position: absolute;
   width: 20vw;
  
    text-align: center;
    /* background: rgba(0, 0, 0, 0.6); */
    color: #000000;
    padding: 15px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.675rem, 1rem + 0.1vw, 0.713rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* border: 2px solid  */
  }

  
  
  /* Right pair box: smaller */
  .test-right-pair-box {
    display: flex;
    width: 40vw;
    height: 40vw;
    align-items: center;
    padding-right: 2rem;
   
    
   
  }
  .test-right-pair-box1{
    display: flex;
    width: 40vw;
    height: 40vw;
    align-items: center;
    padding-right: 2rem;

  }

  .test-right-pair-box1 p{
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #313131;
    font-style: normal;
  }
  
  .test-right-pair-box p{
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #313131;
    font-style: normal;
  }
  
  /* For devices narrower than 768px, you may want to fix the size for better readability */
  @media (max-width: 768px) ,only screen and (orientation: portrait){
    .test-right-pair-box p {
      
      padding: 1rem;
    }
  }
  /* Responsive Adjustments */
  @media (max-width: 768px),only screen and (orientation: portrait) {
    .test-outer-box {
      flex-direction: column;
      gap: 0;
    }
    .image-container .tombstone{
      display: none;
      font-size: 0.575rem;
    }
    static-box {
      margin-bottom: 2rem;
    }
    .test-left-box{
      /* width: 100%; */
     width: 100%;
      display: flex;
      height: 13vh;
      left: 0;
      /* flex: 0 0 20%; */
      align-items: flex-end;
      justify-content: center;
      padding: 0%;
    }
    .test-right-box {
      width: 100%;
      height: auto;
      position: relative;
    }
    .test-scroll-container{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .test-pair {
      display: flex
;
        height: 100%;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .test-left-pair-box{
      width: 30vh;
      height: 30vh;
      margin-right: 0;
    }
    .test-right-pair-box {
      display: flex;
      width: 100%;
      margin-bottom: 1rem;
      height: auto;
      padding-right: 0;
    }

    .test-right-pair-box1{
      display: flex;
      width: 100%;
      margin-top: 2rem;
      height: auto;
      padding-right: 0;
    }
    .test-right-pair-box1 p{
      font-size: 0.8rem;
      text-align: left;
      padding: 1rem;
    }

    
    .test-right-pair-box p{
      font-size: 0.8rem;
      text-align: left;
    }
    .static-box {
       text-align: center; 
    }
    .test-left-box h1 {
      font-size: 2rem;
      margin-bottom: 0rem;
      ;
      
    }
    .test-right-last-pair{
      margin-top: 1.5rem;
    }
    .test-left-box h2 {
      font-size: 1.5rem;
     margin-bottom: 0;
      
    }
    .Fs-image11{
      width: 90% !important;
    }
  }
   /*****************************/
  /* What Section Base Styles */
  /*****************************/
  /* .what-section {
    
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 70vh;
    background-color: #004B5E;
    padding: 0 1rem;
  } */
   .what-section{
    width: 100%;
    height: auto;
    min-height: auto;
    background-color: #004b5e;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: 15vh 0; */
    display: flex
;
    overflow: hidden;

   }
  
  
  /* Outer Box: wraps all landing content */
  .what-outer-box {
    display: flex;
        /* background-color: #004B5E; */
        /* border-radius: 22px; */
        padding: 2rem;
        /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
        flex-wrap: wrap;
        align-content: center;
  }
  
  /* Styles for the top and bottom boxes */
  .what-top-box{
  
    width: auto;
    height: auto;
    max-height: none;
    max-width: 75vw;
    min-height: auto;
    min-width: 900px;
    flex-direction: row;
    flex: 0 auto;
    order: 1;
    justify-content: space-between;
    align-self: auto;
    align-items: stretch;
    padding: 20px 0;
    display: flex;
    overflow: hidden;
   
    
    
  }
  .what-bottom-text-box h1 {
  
      font-size: clamp(2.5rem, calc(2.5rem + 0.5vw), 3.125rem);
    color: #F8E5C2;
    margin-bottom: 3vh;
  
    text-align: left;
  }
  /* .what-bottom-text-box h2{
    font-size: 4.3vw;
    
  } */

  @media (max-width: 768px),only screen and (orientation: portrait) {
    .what-bottom-text-box h1 {
      font-size: 1.5rem;  /* Override to a fixed value if needed */
    }
   
  }
  
  
  
  
  
  
  .what-bottom-box {
    width: 100%;
    height: 100%;
    display: flex
;
    margin: 1rem 0;
    padding: 1.5rem;
    background-color: #004B5E;
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    transition: transform 0.3sease;
    /* height: 70%; */
    justify-content: space-around;
    align-items: center;
  }
  
  
  .what-bottom-text-box{
    width: 30%;
    max-height: none;
    cursor: pointer;
    flex-direction: column;
    flex: 0 auto;
    align-self: center;
    padding-top: 0;
    padding-right: 0;
    display: flex;
    overflow: hidden;
    
  }
  .what-bottom-text-box p{
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    /* text-align: left; */
    color: #F8E5C2;
    font-style: normal;
    max-width: 1200px;
  }
  
  /* For devices narrower than 768px, you may want to fix the size for better readability */
  @media (max-width: 768px),only screen and (orientation: portrait) {
    .what-bottom-text-box p {
      font-size: 0.8rem; /* Fixed size on small screens */
      text-align: left;
      padding: 0.5rem;
    }
  }
  
  

  .what-image-box {
    height: auto;
   
  }
  
    

  
  .carousel-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px; /* Optional padding for spacing */
  }
  
  .carousel-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    height: 80vh;
  }
  
  .carousel-image-wrapper {
    width: 550px;
    height: auto;
    min-height: auto;
    min-width: auto;
    justify-content: flex-end;
    align-self: auto;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    display: flex
;
    overflow: hidden;
    /* overflow: visible;  /* Center the container if needed */
  }
  
  .carousel-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the container without distortion */
  }
  
  .carousel-arrow {
    background: #f8e5c2;
    color: #000000;
    border: none;
    padding: 10px;
    /* font-size: 1.5rem; */
    /* cursor: pointer; */
    /* border-radius: 50%;
    /* Ensure arrows are not overlapping the image by placing them outside */
    /* They are in their own grid cells so they won't cover the image */
  }
  
  .carousel-indicators {
    text-align: center;
    margin-top: 10px;
  }
  
  .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .dot.active {
    background: #007acc;
  }
  
  
  
  
  
  @media (max-width: 768px),only screen and (orientation: portrait) {
    .what-section {
      flex-direction: column;
      justify-content: center;
    }
    
    /* Optional: Adjust the outer box to stack content vertically */
    .what-outer-box {
      flex-direction: column;
      justify-content: center;
      padding: 0%;
      border: 0;
    }
    .carousel-grid {
      min-height: 50vh;
      height: 50vh;
    }
    
    .what-top-box{
      align-items: center;
      justify-content: center;
      width: 100%;
      text-align: center;
    }  
    .what-top-box h1{
      font-size: 1.37rem;
    }
    .what-top-box h2{
      font-size: 3.5rem;
  
    }
  
    .what-bottom-box {
      display: flex;
      
      flex-direction: column;
      justify-content: flex-start;
      padding: 0%;
    }
  
    .what-bottom-text-box{
      width: 90% !important;
      display: flex;
      text-align: center;
      font-size: 1rem;
      position: relative;
      align-items: center;
      
    }
    .what-image-box{
  
      height: 50%;
    }
  
    
    .what-image-box img{
      object-fit: contain;
      width: 100%;
      height: 100%;
  
      
  
    }
    .carousel-image-wrapper{
      width:auto;

    }
  
    .carousel-image {
     
      height: 100%;
      width: auto;
      
      transition: opacity 1s ease;
      opacity: 1;
    }
  }
  @media only screen and (orientation: portrait){
    .carousel-image-wrapper {
      width: 250px;}

      .what-bottom-text-box {
         width: auto;}
  }
  
  
  /*****************************/
  /* Break Section Base Styles */
  /*****************************/
  
  .break-1-section {
    background-color: #f9f9f9;
    /* padding: 4rem 1rem; */
    text-align: center;
    height: 25vh;
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
  
    
  }
  .B1-outer-box{
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    width: 100%;
    
  }
  
  .break-1-container {
    max-width: 100%;
    width: 60%;
    margin: 0 auto;
  }
  
  .break-1-text {
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  /* text-align: left; */
  color: #791D27;
  font-style: normal;
}

/* For devices narrower than 768px, you may want to fix the size for better readability */
@media (max-width: 768px) {
    .break-1-text {
    font-size: 0.8rem; /* Fixed size on small screens */
    text-align: left;

  }
}
  
  @media (max-width: 768px) {
  
  .break-1-section {
    width: 100%;
    height: auto;
    margin: 2rem 0;
  }
  .break-1-section {
    padding: 1rem;
  }
  .break-1-container {
    width: 100%;
    margin: 0 auto;
  }
  
  .break-1-text {
    font-size: 0.87rem;
    color: #791D27;
    line-height: 1.6;
    width: 100%;
  }
  
  }

 
  /***********************/
  /* FS Section Styles */
  /***********************/
  
  .Fs-section {
    background: #F8F7DC;
    overflow: hidden;
    /* We'll let ScrollTrigger pin this section */
    
  }
  
  /* Outer Box: Two columns layout */
  .Fs-outer-box {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    height: 100vh;
  }
  
  /* Left Column: Static Content */
  .Fs-left-box {
    
    position: absolute;
    /* top: 0; */
    right: 1%;
    left: 6.5vw;
    height: 27vh;
    /* width: 26.8vw; */
    /* background: #e4dd07; */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* padding: 1rem; */
    color: #791d27;
    border: #000;
    /* background-color: #000; */
    z-index: 100;
  }

  .Fs-border-box {
    
    position: absolute;
    /* top: 0; */
    right: 1%;
    left: 6.5vw;
    height: 15vh;
    /* width: 26.8vw; */
    background: #f9f7dc;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    /* padding: 1rem; */
    color: #791d27;
    border: #000;
    /* background-color: #000; */
    z-index: 100;
  }

  
  /* .Fs-left-box h1 {
    font-size: 4.3vw;

    margin-bottom: 1rem;
    font-weight: 600;
    
  }
  .Fs-left-box h2 {
    font-size: 3vw;
    font-weight: 600;
   
    
  } */
   /* Fluid base using clamp() */
.Fs-left-box h1 {
    font-size: clamp(4rem, 2.5vw, 8.3vw);
  }
  
  .Fs-left-box h2 {
    font-size: clamp(3rem, 2vw, 6vw);
  }
  
  /* Media query override for very small screens */
  @media (max-width: 768px) ,only screen and (orientation: portrait){
    .Fs-left-box h1 {
      font-size: 2rem;  /* Override to a fixed value if needed */
    }
    .Fs-left-box h2 {
      font-size: 1.5rem;
      text-align: center;
    }
  }
  
  
  /* Right Column: This column will not scroll on its own */
  .Fs-right-box {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 100vh;
  }
  
  /* Scroll Container: Contains all pairs and will be animated vertically */
  .Fs-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Its height must equal the total height of all pairs.
       In this example, each pair fills 100vh, so for 3 pairs, height = 300vh */
    height: 300vh;
    
    display: flex;
    flex-direction: column;
    
  }
  
  /* Each Pair: Full viewport height */
  .Fs-pair {
    height: 100vh;
      display: flex;
      padding: 1rem;
      box-sizing: border-box;
      background: #F8F7DC;
      /* border: 1px solid #ddd; */
      border-radius: 8px;
      align-items: center;
      justify-content: space-between;
    /* (Optional) You can add scroll-snap-align here if needed,
       but the animation below controls the translation */
       /* opacity: 0;
       transition: opacity 0.1s ease-out; */
     
       
  }
  
  
  
  /* Base styling for boxes in pairs */
  .Fs-box {
    /* background: #ba3b3b; */
    padding: 1rem;
    /* border: 2px solid #aaa; */
    border-radius: 8px;
    text-align: center;
    /* font-weight: bold; */
    
  }
  
  /* Left pair box: larger */
  .Fs-left-pair-box {
    
    display: flex;
        width: 35%;
        height: 67vh;
        align-items: center;
        margin-left: 5.5vw;

    flex-direction: column;
    justify-content: center;

    
    
    
  }
  .Fs-left-pair-box p {
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #313131;
    font-style: normal;
  }

  .fs-image-figure {
    margin: 0;
    padding: 0;
    text-align: center; /* center the image and caption */
    cursor: pointer;
  }
  
  .fs-image-figure img {
    max-width: 70%;
    height: auto;
    /* display: block;
    margin: 0 auto; */
  }

  .fs-image-figure1 {
    margin: 0;
    padding: 0;
    text-align: center; /* center the image and caption */
    cursor: pointer;
  }
  
  .fs-image-figure1 img {
    max-width: 50%;
    height: auto;
    /* display: block;
    margin: 0 auto; */
  }
  .tombstone-text1 {
    /* font-size: 0.9rem; */
    color: #ffffff;
    margin-top: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.675rem, 1rem + 0.1vw, 0.713rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .tombstone-text {
    /* font-size: 0.9rem; */
    color: #333;
    margin-top: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.675rem, 1rem + 0.1vw, 0.713rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  /* Hide tombstone text on mobile devices */
  @media (max-width: 768px),only screen and (orientation: portrait) {
    .tombstone-text {
      display: none;
    }
    .tombstone-text1 {
      display: none;
    }
  }
  
  /* For devices narrower than 768px, you may want to fix the size for better readability */
  @media (max-width: 768px),only screen and (orientation: portrait) {
    .Fs-left-pair-box p {
      font-size: 1rem; /* Fixed size on small screens */
    }
  }
  
  /* Right pair box: smaller */
  .Fs-right-pair-box {
    width: 50vw;
    /* height: 20vw; */
    
    /* background-color: #000; */
    height: 67vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }
  .Fs-right-pair-box img{
  
    
    /* height: 70%; */
    object-fit: contain;
    /* display: block; */
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
    /* font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.6;
    text-align: left;
    color: #313131;
    font-style: normal; */
  }

  
  .Fs-image2{
   margin-top: 20%;
  }

  .Fs-left-pair-box li {
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #313131;
    font-style: normal;
    margin-left: 1.5rem;}
  
  
  /* Responsive Adjustments */
  @media (max-width: 768px) ,only screen and (orientation: portrait){
    .Fs-outer-box {
      flex-direction: column;
      gap: 0;
      width: 100%;
    }
    static-box {
      margin-bottom: 2rem;
    }
    .Fs-left-box{
      /* width: 100%; */
     width: 100%;
      display: flex;
      height: 13vh;
        left: 0;
        /* flex: 0 0 20%; */
        align-items: flex-end;
        justify-content: center;
    }

    .Fs-border-box{
      /* width: 100%; */
     width: 100%;
      display: flex;
      height: 13vh;
        left: 0;
        /* flex: 0 0 20%; */
        align-items: flex-end;
        justify-content: center;
    }
    .Fs-right-box {
      width: 100%;
      height: auto;
      position: relative;
    }
    .Fs-scroll-container{
      display: flex
  ;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .Fs-pair {
      display: flex;
      height: 100%;
      flex-direction: column-reverse;
      flex-wrap: nowrap;
      width: 100%;
      justify-content: center;
    }
    .fs-image-figure img{
      max-width: none;
    }
  
    .Fs-last{
      width: 100vw;
  
    }
  
    .Fs-last img{
      width:70vw;
    }
    .Fs-left-pair-box{
      width: 90%;
      /* height: 100%; */
      align-items: flex-start;
      height: auto;

      margin-left: 0;
    }
    .Fs-right-pair-box {
      display: flex;
      width: 100%;
      margin-bottom: 1rem;
      height: auto;
      align-items: center;
    }
   
    
    
  
    .Fs-image1{
      margin-top: 10%;
    }
  
  .Fs-image3 {
    width: 80% !important;
  }
    .Fs-right-pair-box img {
      width:90%;
      /* height: 45vh; */
      box-shadow: 0 0 0;
  }
    .Fs-left-pair-box p{
      font-size: 0.8rem;
      text-align: left;
    }

    .Fs-left-pair-box li{
      font-size: 0.8rem;
      text-align: left;
    }
    .static-box {
       text-align: center; 
    }
    .Fs-left-box h1 {
      font-size: 2rem;
      margin-bottom: 0rem;
      
      
    }
  
    
    .Fs-left-box h2 {
      font-size: 1.5rem;
      
      
    }
  }
  
  
  
  
  
  /*****************************/
  /* Break 2 Section Base Styles */
  /*****************************/
  
  .break-2-section {
    background-color: #f9f9f9;
    /* padding: 4rem 1rem; */
    text-align: center;
    height: auto;
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
  
    
  }
  .B2-outer-box{
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    width: 100%;
    
  }
  
  .break-2-container {
    max-width: 100%;
    width: 60%;
    margin: 0 auto;
  }
  
  .break-2-text {
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  /* text-align: left; */
  color: #791D27;
  font-style: normal;
  margin: 2rem;
}

/* For devices narrower than 768px, you may want to fix the size for better readability */
@media (max-width: 768px) {
    .break-2-text {
    text-align: left;
    margin: 0;
  }
}
  
  
  @media (max-width: 768px) {
  
  .break-2-section {
    width: 100%;
    margin: 2rem 0;
  }
  .break-2-section {
    padding: 1rem;
    height: auto;
  }
  .break-2-container {
    width: 100%;
    margin: 0 auto;
  }
  
  .break-2-text {
    font-size: 0.87rem;
    color: #791D27;
    line-height: 1.6;
    width: 100%;
  }
  
  }
  
  /*****************************/
  /* Mica Section Base */
  /*****************************/
  .mica-section {
    background-color: #f8f7dc; /* A soft background */
    padding: 4rem 1rem;       /* Spacing around the section */
    height: auto;
  }
  
  /* Container centers content & sets max width */
  .mica-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    text-align: center; /* Center text and images */
    border: #000;
    /* background-color: #f09e9e; */
    /* border: 2px solid #aaa; */
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
      flex-direction: column;
      align-items: center;
  }

  
  
  /* Section Title */
  .mica-title {
    font-size: clamp(2rem, 2.5vw, 4.3vw);
    color: #333;
    margin-bottom: 1rem;
    font-weight: 700;
    display: flex;
    height: 10vh;
      align-items: center;
      justify-content: center;
  }
  @media (max-width: 768px) {
    .mica-title {
      font-size: 2rem;  /* Override to a fixed value if needed */
    }
    
  }


  
  
  
  /* Main Description */
  .mica-description {
    
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    color: #555;
    line-height: 1.6;
    padding-top: 4%;
    margin-bottom: 2rem;
    /* display: flex; */
    height: 20vh;
    width: 50vw;
    align-items: center;
      justify-content: center;
  }

  /* For devices narrower than 768px, you may want to fix the size for better readability */
  @media (max-width: 768px) {
    .mica-description{
      font-size: 1rem; /* Fixed size on small screens */
    }
  }
  
  /* Images Row */
  .mica-images-row {
    display: flex
    ;
        gap: 1rem;
        margin-bottom: 2rem;
        width: 100vw;
        height: 30vh;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        min-width: 0;
        min-height: 0;
        align-content: center;
  }
  
  .mica-images-row img {
    width: 120px;         /* Adjust as needed */
    height: auto;
    border-radius: 4px;   /* optional rounding */
    border: 2px solid #ccc; /* optional border */
    object-fit: cover;
    min-width: 0;
    min-height: 0;
  }

  
  
  /* Subtext Paragraph */
  .mica-subtext {
    display: flex;
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    color: #555;
    line-height: 1.6;
    margin-bottom: 2rem;
    width: 50vw;
    height: 15vh;
  }
  @media (max-width: 768px) {
    .mica-subtext {
      font-size: 1rem; /* Fixed size on small screens */
    }
  }
  @media (max-width: 380px) {
    .mica-subtext {
      font-size: 0.8rem; /* Fixed size on small screens */
    }
    .mica-subtext{
      margin-bottom: 0;
    }
    .mica-description{
      font-size: 0.8rem;
    }
    .mica-title {
      font-size: 1.5rem; 

     margin-bottom: 0rem;
  }
  .mica-images-row {
         gap: 0.5rem;
  }
  
  }
  
  /* Button */
  .mica-button {
    display: inline-block;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-weight: 400;
    cursor:pointer;
  }
  
  .mica-button:hover {
    background-color: #555;
  }
  
  /* Responsive Adjustments */
  
  @media (max-width: 768px) {
    
    .mica-images-row {
      flex-wrap: wrap;
    }
    .mica-images-row img {
      width: 35%;
    }

    .mica-button {
      margin-top: 1rem;
    }

    .mica-images-row {
      display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
        width: 62%;
        height: 30%;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
  }
  .mica-description {
    width: 100%;
  }
  .mica-subtext {
    width: 100%;
    margin-bottom: 1rem;
  }
  .mica-section {
    height: 100vh;

    padding: 1.5rem 1rem;
 

}}

  /************************/
  /* Map Section Base */
    /*********************************/
  /* =========================
   Slide Section Styles
   ========================= */
.slide-section {
    padding: 10px;
    background-color: #004b5e;  /* Light background for contrast */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    
  }
  
  .slide-container {
   /* max-width: 800px;  */
   position:absolute;
   display: flex;
   top: 5%;
   /* right: 90; */
   /* left: 35%; */
   width: 100%;
    margin: 0 auto;
    z-index: 10000;
    /* background-color: #000; */
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
  }
  .map-container {
    position: relative;
    width: 100%;
    /* Set height or use an aspect-ratio for consistency */
    /* For example, using aspect-ratio (supported in modern browsers): */
    aspect-ratio: 16/9;
    overflow: hidden;
  }

  .map-image {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  .slide-container h2 {
    font-size: 1.5vw;
    /* margin-bottom: 20px; */
    color: #F8E5C2;
    font-weight: 400;
  }
  
  .slide-container p {
    font-size: 2vw;
    line-height: 1.6;
    color: #F8E5C2;
  }
  
  /* =========================
     Marker Styles
     ========================= */
  .slide-marker {
    
    position: absolute;
    width: 20px;
    height: 20px;
    background: #f8e5c2;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  
  .slide-marker:hover {
    background: #F8E5C2;
  }

  .map-marker {
    position: absolute;
    
    /* Adjust these percentages to place the marker exactly where you want it relative to the container */
    top: 45%;
    left: 89%;
    transform: translate(-50%, -50%); /* centers the marker at that point */
    /* Additional styling for marker */
    background-color: #f8e5c2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    
  }
  .marker-label {
    margin-left: -850%;
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    color: #f8e5c2;
    /* background: rgba(0, 0, 0, 0.6); */
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    /* Optionally, position absolutely relative to the marker */
    /* position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(0, -50%); */
  }

  .marker-label1 {
    margin-left: -500%;
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    color: #f8e5c2;
    /* background: rgba(0, 0, 0, 0.6); */
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
    /* Optionally, position absolutely relative to the marker */
    /* position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(0, -50%); */
  }

  .map-marker2 {
    position: absolute;
    /* Adjust these percentages to place the marker exactly where you want it relative to the container */
    top: 35%;
    left: 89%;
    transform: translate(-50%, -50%); /* centers the marker at that point */
    /* Additional styling for marker */
    background-color: #f8e5c2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  .map-marker3 {
    position: absolute;
    /* Adjust these percentages to place the marker exactly where you want it relative to the container */
    top: 75%;
    left: 89%;
    transform: translate(-50%, -50%); /* centers the marker at that point */
    /* Additional styling for marker */
    background-color: #f8e5c2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
  
  /* Position each marker */
  .marker-1 {
    top: 49vh;
    right: 6vw;
  }
  .marker-2 {
    top: 38vh;
    right: 6vw;
  }
  .marker-3 {
    top: 81vh;
    right: 6vw;
    /* transform: translateX(-50%); */
  }
  
  /* =========================
     Revealed Section Styles
     ========================= */
  /* Wrapper to contain slide-section & revealed sections */
/* Wrapper for slide and revealed sections */
.slide-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  /* Slide Section (remains absolute) */
  .slide-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    z-index: 10;
  }
  
  /* Revealed Section (initially offscreen to the right) */
  .revealed-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #004b5e;
    z-index: 20;
    transform: translateX(100%);
    padding-top: 40px;
    padding-bottom: 20px;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  /* Navigation Bar */
  .revealed-nav {
    display: flex;
    justify-content: space-evenly;
    gap: 10px;
    margin-bottom: 20px;
    height: 5vh;
    flex-wrap: nowrap;
  }
  
  .nav-btn {
    font-family: "Montserrat", serif;
    padding: 8px 16px;
    background-color: #004b5e;
    color: #fff;
    width: 20vw;
   font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    border: 2px solid #F8E5C2;
    border-radius: 10px;
  }

  .close-btn {
    /* padding: 8px 16px;  */
    background-color: #004b5e;
    color: #fff;
    /* height: 5%; */
    /* width: 5%; */
    cursor: pointer;
    transition: background 0.3sease;
    /* border: 2px solid #F8E5C2; */
    /* border-radius: 50%; */
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    border: none;         /* Remove border if not needed */
    box-shadow: none;      /* Remove any box shadow */
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    outline: none;  
    }

    .close-btn svg {
      width: 2rem;
      height: 2rem;
      stroke: #fff; /* Set the icon color */
    }
    
    .close-btn:hover svg {
      stroke: #ccc; /* Change color on hover if desired */
    }
  
  .nav-btn:hover, .nav-btn.active {
    background-color: #01313E;
    border: 2px solid #F8E5C2
  }
  
  /* Bottom Content Area that contains sub-sections */
  .revealed-content {
    display: flex;
    width: 300vw;
    transition: transform 0.5sease;
    justify-content: space-around;
  }
  
  /* Each Sub-section */
  .sub-section {
    width: 31%;
    height: 80vh;
    /* padding: 20px; */
    box-sizing: border-box;
    overflow-y: auto;
    background-color: aqua;
    border: 2px solid #007acc;
    border-radius: 20px;
  }
  .revealed-section.inactive {
    pointer-events: none;
    opacity: 0;
  }
  @media (max-width: 768px),only screen and (orientation: portrait) {
    .slide-section{
      display: none;
    }
    .slide-wrapper{
      display: none;
    }
  }
  
  
    /***********************/
  /* Ms Section Styles */
  /***********************/
  
  .Ms-section {
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
     url('images/background/first\ slide\ murshidabad\ bg\ \(1\).png'); /* Replace with your image path */
    background-size: cover;       /* Make the image cover the entire section */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat;
    overflow: hidden;
    object-fit: contain;
    /* We'll let ScrollTrigger pin this section */
    
    
  }
  
  
  /* Outer Box: Two columns layout */
  .Ms-outer-box {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    /* height: 100vh; */
    overscroll-behavior: contain;
    background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('images/background/first\ slide\ murshidabad\ bg\ \(1\).png'); /* Replace with your image path */
   background-size: cover;       /* Make the image cover the entire section */
   background-position: center;  /* Center the image */
   background-repeat: no-repeat;
   overflow: hidden;
   object-fit: contain;
  }
  
  /* Left Column: Static Content */
  .Ms-left-box {
    
    position: absolute;
    /* top: 0; */
    right: 1%;
    left: 3.5%;
    height: 60%;
    width: 26.8vw;
    /* background: #F8F7DC; */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    /* padding: 1rem; */
    color: #e3e1e2;
    /* border: #000; */
   /* background-color: #000;  */
    z-index: 0;
  }
  
  /* .Ms-left-box h1 {
    font-size: 4.3vw;
    margin-bottom: 1rem;
    font-weight: 600;
    
  }
  .Ms-left-box h2 {
    font-size: 3vw;
    font-weight: 600;
  } */

  .Ms-left-box h1 {
    font-size: clamp(2rem, 2.5vw, 4.3vw);
    margin-bottom: 1rem;
    font-weight: 600;
  }
  
  .Ms-left-box h2 {
    font-size: clamp(1.5rem, 2vw, 3vw);
    font-weight: 600;
  }
  
  /* Media query override for very small screens */
  @media (max-width: 768px) {
    .Ms-left-box h1 {
      font-size: 2rem;  /* Override to a fixed value if needed */
    }
    .Ms-left-box h2 {
      font-size: 1.5rem;
    }
  }
  
  
  /* Right Column: This column will not scroll on its own */
  .Ms-right-box {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* height: 100vh; */
    height: 100%;
    overflow-y: auto;
    /* scroll-snap-type: y mandatory; */
    /* overscroll-behavior: contain; */
    scroll-snap-stop: always; /* helps enforce snapping without ‘slippage’ */
    scroll-behavior: smooth;
  }

  /* For WebKit browsers */
.Ms-right-box::-webkit-scrollbar {
  width: 12px;  /* Set the width of the scrollbar */
}

.Ms-right-box::-webkit-scrollbar-track {
  background: #004b5e;  /* Color of the track */
  border-radius: 6px;
}

.Ms-right-box::-webkit-scrollbar-thumb {
  background: #004b5e;  /* Color of the thumb */
  border-radius: 6px;
  border: 2px solid #004b5e; /* Optional: add border for a nicer look */
}

.Ms-right-box::-webkit-scrollbar-thumb:hover {
  background: #005fa3;  /* Darker on hover */
}

/* For Firefox */
.Ms-right-box {
  scrollbar-width: thin;  /* Options: auto, thin, none */
  scrollbar-color: #F8E5C2 #004b5e;  /* thumb color then track color */
}
  
  

  /* Scroll Container: Contains all pairs and will be animated vertically */
  .Ms-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Its height must equal the total height of all pairs.
       In this example, each pair fills 100vh, so for 3 pairs, height = 300vh */
    height: 298%;
    
    display: flex;
    flex-direction: column;
    /* overflow-y: auto; */
  overscroll-behavior: contain; /* Contain the scroll until boundaries are reached */

    
  }
  
  /* Each Pair: Full viewport height */
  .Ms-pair {
    height: 100%;
      display: flex;
      padding: 1rem;
      box-sizing: border-box;
      /* background: #F8F7DC; */
      /* border: 1px solid #ddd; */
      border-radius: 8px;
      align-items: center;
      justify-content: space-around;
    /* (Optional) You can add scroll-snap-align here if needed,
       but the animation below controls the translation */
       /* opacity: 0;
       transition: opacity 0.1s ease-out; */
       scroll-snap-align: start;
       
       
  }
  
  
  
  /* Base styling for boxes in pairs */
  .Ms-box {
    /* background: #ba3b3b; */
    padding: 1rem;
    /* border: 2px solid #aaa; */
    border-radius: 8px;
    text-align: center;
    /* font-weight: bold; */
    
  }
  
  /* Left pair box: larger */
  .Ms-left-pair-box {
    
    display: flex;
    width: 35%;
    height: 67%;
    align-items: center;
    
    
  }

  .Ms-left-pair-box p {
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #e3e1e2;
    font-style: normal;
  }
  
  /* For devices narrower than 768px, you may want to fix the size for better readability */
  @media (max-width: 768px) {
    .Ms-left-pair-box p {
      font-size: 1rem; /* Fixed size on small screens */
    }
  }
  
  
  
  /* Right pair box: smaller */
  .Ms-right-pair-box {
    width: 40%;
    /* height: 20vw; */
    
    /* background-color: #000; */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }

  .Ms-title{
    height: auto !important;
  }
  .Ms-right-pair-box img{
  
    
    height: 50%;    
      width: 80%;
    object-fit: contain;
    /* display: block; */
    /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
    /* font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.6;
    text-align: left;
    color: #313131;
    font-style: normal; */
  }
  .Ms-image2{
   margin-top: 20%;
  }
  
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {


    .Ms-outer-box {
      flex-direction: column;
      gap: 0;
      width: 100%;
    }
    static-box {
      margin-bottom: 2rem;
    }
    .Ms-left-box{
      /* width: 100%; */
     width: 100%;
      display: flex;
      height: 18vh;
      left: 0;
      /* flex: 0 0 20%; */
      align-items: flex-end;
      justify-content: center;
    }
    .Ms-right-box {
      width: 100%;
      height: auto;
      position: relative;
    }
    .Ms-scroll-container{
      display: flex
  ;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .Ms-pair {
      display: flex;
      height: 100%;
      flex-direction: column-reverse;
      flex-wrap: nowrap;
      width: 100%;
    }
  
    .Ms-last{
      width: 100vw;
  
    }
  
    .Ms-last img{
      width:70vw;
    }
    .Ms-left-pair-box{
      width: 100%;
      height: 100%;
      align-items: flex-start;
    }
    .Ms-right-pair-box {
      display: flex;
      width: 100%;
      margin-bottom: 1rem;
      /* height: auto; */
      align-items: center;
    }
   
    
    
  
    .Ms-image1{
      margin-top: 10%;
    }
  
  
    .Ms-right-pair-box img {
      width:70%;
      height: auto;
      box-shadow: 0 0 0;
  }
    .Ms-left-pair-box p{
      font-size: 0.8rem;
      text-align: center;
    }
    .static-box {
       text-align: center; 
    }
    .Ms-left-box h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
      
      
    }
  
    
    .Ms-left-box h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      
    }
  }
  
  
  /***********************/
  /* Pt Section Styles */
  /***********************/
  
  .Pt-section {
    background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
     url('images/background/FRONT\ PATNA\ \(1\).png'); /* Replace with your image path */
    background-size: cover;       /* Make the image cover the entire section */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat;
    overflow: hidden;
    object-fit: contain;
    /* We'll let ScrollTrigger pin this section */
    
  }
  
  /* Outer Box: Two columns layout */
  .Pt-outer-box {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    /* height: 100vh; */
    overscroll-behavior: contain;
    background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('images/background/FRONT\ PATNA\ \(1\).png'); /* Replace with your image path */
   background-size: cover;       /* Make the image cover the entire section */
   background-position: center;  /* Center the image */
   background-repeat: no-repeat;
   overflow: hidden;
   object-fit: contain;

  }
  
    
  /* Left Column: Static Content */
  .Pt-left-box {
    
    position: absolute;
    /* top: 0; */
    right: 1%;
    left: 37%;
    height: 50%;
    width: 50vw;
    /* background: #F8F7DC; */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    /* padding: 1rem; */
    color: #e3e1e2;
    /* border: #000; */
   /* background-color: #000;  */
    z-index: 0;
  }
  
  .Pt-left-box h1 {
    font-size: clamp(2rem, 2.5vw, 4.3vw);
    margin-bottom: 1rem;
    font-weight: 600;
  }
  
  .Pt-left-box h2 {
    font-size: clamp(1.5rem, 2vw, 3vw);
    font-weight: 600;
  }
  
  /* Media query override for very small screens */
  @media (max-width: 768px) {
    .Pt-left-box h1 {
      font-size: 2rem;  /* Override to a fixed value if needed */
    }
    .Pt-left-box h2 {
      font-size: 1.5rem;
    }
  }
  
  
  /* Right Column: This column will not scroll on its own */
  .Pt-right-box {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* height: 100vh; */
    height: 100%;
    overflow-y: auto;
    /* scroll-snap-type: y mandatory; */
    /* overscroll-behavior: contain; */
    scroll-snap-stop: always; /* helps enforce snapping without ‘slippage’ */
    scroll-behavior: smooth;
    
    
  }
  
  /* .Pt-right-box::-webkit-scrollbar {
    /* For Chrome, Safari, and newer Edge */
    /* width: 0px; */
    /* background: transparent;  */
    /* background-color: #D8CEC5; */
  
    /* For WebKit browsers */
.Pt-right-box::-webkit-scrollbar {
  width: 12px;  /* Set the width of the scrollbar */
}

.Pt-right-box::-webkit-scrollbar-track {
  background: #004b5e;  /* Color of the track */
  border-radius: 6px;
}

.Pt-right-box::-webkit-scrollbar-thumb {
  background: #004b5e;  /* Color of the thumb */
  border-radius: 6px;
  border: 2px solid #004b5e; /* Optional: add border for a nicer look */
}

.Pt-right-box::-webkit-scrollbar-thumb:hover {
  background: #005fa3;  /* Darker on hover */
}

/* For Firefox */
.Pt-right-box {
  scrollbar-width: thin;  /* Options: auto, thin, none */
  scrollbar-color: #F8E5C2 #004b5e;  /* thumb color then track color */
}

  /* Scroll Container: Contains all pairs and will be animated vertically */
  .Pt-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Its height must equal the total height of all pairs.
       In this example, each pair fills 100vh, so for 3 pairs, height = 300vh */
    height: 399%;
    
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
    
  }
  
  /* Each Pair: Full viewport height */
  .Pt-pair {
    height: 100%;
      display: flex;
      padding: 1rem;
      box-sizing: border-box;
      /* background: #F8F7DC; */
      /* border: 1px solid #ddd; */
      border-radius: 8px;
      align-items: center;
      justify-content: space-around;
    /* (Optional) You can add scroll-snap-align here if needed,
       but the animation below controls the translation */
       /* opacity: 0;
       transition: opacity 0.1s ease-out; */
       scroll-snap-align: start;
       
       
  }
  
  
  
  /* Base styling for boxes in pairs */
  .Pt-box {
    /* background: #ba3b3b; */
    padding: 1rem;
    /* border: 2px solid #aaa; */
    border-radius: 8px;
    text-align: center;
    /* font-weight: bold; */
    
  }
  
  /* Left pair box: larger */
  .Pt-left-pair-box {
    
    display: flex;
    width: 35%;
    height: 67%;
    align-items: center;
    
    
  }
  .Pt-left-pair-box p {
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #e3e1e2;
    font-style: normal;
  }
  
  /* For devices narrower than 768px, you may want to fix the size for better readability */
  @media (max-width: 768px) {
    .Pt-left-pair-box p {
      font-size: 1rem; /* Fixed size on small screens */
    }
  }
  
  /* Right pair box: smaller */
  .Pt-right-pair-box {
    width: 40%;
    /* height: 20vw; */
    
    /* background-color: #000; */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  .Pt-right-pair-box img{
  
    
    height: 50%;    
      width: 80%;
    object-fit: contain;
    /* display: block; */
    /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
    /* font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.6;
    text-align: left;
    color: #313131;
    font-style: normal; */
  }
  .Pt-image2{
   margin-top: 20%;
  }
  .Pt-right-pair-box4 {
    width: 40%;
    /* height: 20vw; */
    /* background-color: #000; */
    height: 67vh;
    display: flex
;
    align-items: center;
    justify-content: center;}
  
  .Pt-right-pair-box4 img {
    height: 50%;
    width: 80%;
    object-fit: contain;}
  
  
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .Pt-outer-box {
      flex-direction: column;
      gap: 0;
      width: 100%;
    }
    static-box {
      margin-bottom: 2rem;
    }
    .Pt-left-box{
      /* width: 100%; */
     width: 100%;
      display: flex;
      height: 18vh;
      left: 0;
      /* flex: 0 0 20%; */
      align-items: flex-end;
      justify-content: center;
    }
    .Pt-right-box {
      width: 100%;
      height: auto;
      position: relative;
    }
    .Pt-scroll-container{
      display: flex
  ;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .Pt-pair {
      display: flex;
      height: 100%;
      flex-direction: column-reverse;
      flex-wrap: nowrap;
      width: 100%;
    }
  
    .Pt-last{
      width: 100vw;
  
    }
  
    .Pt-last img{
      width:70vw;
    }
    .Pt-left-pair-box{
      width: 100%;
      height: 100%;
      align-items: flex-start;
    }
    .Pt-right-pair-box {
      display: flex;
      width: 100%;
      margin-bottom: 1rem;
      /* height: auto; */
      align-items: center;
    }
   
    
    
  
    .Pt-image1{
      margin-top: 10%;
    }
  
  
    .Pt-right-pair-box img {
      width:40vw;
      height: 45vh;
      box-shadow: 0 0 0;
  }
    .Pt-left-pair-box p{
      font-size: 0.8rem;
      text-align: center;
    }
    .static-box {
       text-align: center; 
    }
    .Pt-left-box h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
      
      
    }
  
    
    .Pt-left-box h2 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      
    }
  }
  
  
  /***********************/
  /* St Section Styles */
  /***********************/
  
  .St-section {
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
     url('images/background/TRICHY\ FRONT\ \(1\).png'); /* Replace with your image path */
    background-size: cover;       /* Make the image cover the entire section */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat;
    overflow: hidden;
    object-fit: contain;
    /* We'll let ScrollTrigger pin this section */
    
    
  }
  
  
  /* Outer Box: Two columns layout */
  .St-outer-box {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    /* height: 100vh; */
    overscroll-behavior: contain;
    background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url('images/background/TRICHY\ FRONT\ \(1\).png'); /* Replace with your image path */
   background-size: cover;       /* Make the image cover the entire section */
   background-position: center;  /* Center the image */
   background-repeat: no-repeat;
   overflow: hidden;
   object-fit: contain;
  }
  
  /* Left Column: Static Content */
  .St-left-box {
    
    position: absolute;
    /* top: 0; */
    right: 1%;
    left: 70.2%;
    height: 50% ;
    width: 50vw;
    /* background: #F8F7DC; */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    /* padding: 1rem; */
    color: #e3e1e2;
    /* border: #000; */
   /* background-color: #000;  */
    z-index: 0;
  }
  
  .St-left-box h1 {
    font-size: clamp(2rem, 2.5vw, 4.3vw);
    margin-bottom: 1rem;
    font-weight: 600;
  }
  
  .St-left-box h2 {
    font-size: clamp(1.5rem, 2vw, 3vw);
    font-weight: 600;
  }
  
  /* Media query override for very small screens */
  @media (max-width: 768px) {
    .St-left-box h1 {
      font-size: 2rem;  /* Override to a fixed value if needed */
    }
    .St-left-box h2 {
      font-size: 1.5rem;
    }
  }
  
  
  /* Right Column: This column will not scroll on its own */
  .St-right-box {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* height: 100vh; */
    height: 100%;
    overflow-y: auto;
    /* scroll-snap-type: y mandatory; */
    /* overscroll-behavior: contain; */
    scroll-snap-stop: always; 
    /* helps enforce snapping without ‘slippage’ */
    scroll-behavior: smooth;
    
  }
  /* For WebKit browsers */
.St-right-box::-webkit-scrollbar {
  width: 12px;  /* Set the width of the scrollbar */
}

.St-right-box::-webkit-scrollbar-track {
  background: #004b5e;  /* Color of the track */
  border-radius: 6px;
}

.St-right-box::-webkit-scrollbar-thumb {
  background: #004b5e;  /* Color of the thumb */
  border-radius: 6px;
  border: 2px solid #004b5e; /* Optional: add border for a nicer look */
}

.St-right-box::-webkit-scrollbar-thumb:hover {
  background: #005fa3;  /* Darker on hover */
}

/* For Firefox */
.St-right-box {
  scrollbar-width: thin;  /* Options: auto, thin, none */
  scrollbar-color: #F8E5C2 #004b5e;  /* thumb color then track color */
}
  
  /* .St-right-box::-webkit-scrollbar { */
    /* For Chrome, Safari, and newer Edge */
    /* width: 0px;
    background: transparent; 
  } */

  /* Scroll Container: Contains all pairs and will be animated vertically */
  .St-scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Its height must equal the total height of all pairs.
       In this example, each pair fills 100vh, so for 3 pairs, height = 300vh */
    height: 499%;
    
    display: flex;
    flex-direction: column;
    /* overscroll-behavior: contain; */
    overscroll-behavior: auto; /* Allows events to bubble up once boundaries are reached */

  }
  
  /* Each Pair: Full viewport height */
  .St-pair {
    height: 100%;
      display: flex;
      padding: 1rem;
      box-sizing: border-box;
      /* background: #F8F7DC; */
      /* border: 1px solid #ddd; */
      border-radius: 8px;
      align-items: center;
      justify-content: space-around;
    /* (Optional) You can add scroll-snap-align here if needed,
       but the animation below controls the translation */
       /* opacity: 0;
       transition: opacity 0.1s ease-out; */
       scroll-snap-align: start;
       
       
       
       
  }
  
  
  
  /* Base styling for boxes in pairs */
  .St-box {
    /* background: #ba3b3b; */
    padding: 1rem;
    /* border: 2px solid #aaa; */
    border-radius: 8px;
    text-align: center;
    /* font-weight: bold; */
    
  }
  
  /* Left pair box: larger */
  .St-left-pair-box {
    
    display: flex;
    width: 35%;
    height: 67%;
    align-items: center;
    
    
  }
  .St-left-pair-box p {
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #e3e1e2;
    font-style: normal;
  }
  
  /* For devices narrower than 768px, you may want to fix the size for better readability */
  @media (max-width: 768px) {
    .St-left-pair-box p {
      font-size: 1rem; /* Fixed size on small screens */
    }
  }
  
  /* Right pair box: smaller */
  .St-right-pair-box {
    width: 40%;
    /* height: 20vw; */
    
    /* background-color: #000; */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
  .St-right-pair-box img{
  
    
    height: 50%;    
      width: 80%;
    object-fit: contain;
    /* display: block; */
    /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
    /* font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.6;
    text-align: left;
    color: #313131;
    font-style: normal; */
  }
  .St-image2{
   margin-top: 20%;
  }
  .St-right-pair-box4 {
    width: 40vw;
    /* height: 20vw; */
    /* background-color: #000; */
    height: 67vh;
    display: flex
;
    align-items: center;
    justify-content: center;}
  
  .St-right-pair-box4 img {
    height: 40vh;
    width: 100vw;
    object-fit: contain;}
  
  

  
  .St-right-pair-box2 {
    width: 40vw;
    /* height: 20vw; */
    
    /* background-color: #000; */
    height: 67vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
  }
  .St-right-pair-box2 img{
  
      width: 20vw;
    object-fit: contain;
    margin-right: 1rem;
    /* display: block; */
    /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
    /* font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.6;
    text-align: left;
    color: #313131;
    font-style: normal; */
  }
  .St-image2{
   margin-top: 20%;
   height: 40vh;
   
  }
  .St-image1{
    
   height: 40vh;
  }
  
  
  /* Responsive Adjustments */
   /* Responsive Adjustments */
  @media (max-width: 768px) {
    .St-outer-box {
      flex-direction: column;
      gap: 0;
      width: 100%;
    }
    static-box {
      margin-bottom: 2rem;
    }
    .St-left-box{
      /* width: 100%; */
     width: 100%;
      display: flex;
      height: 18vh;
      left: 0;
      /* flex: 0 0 20%; */
      align-items: flex-end;
      justify-content: center;
    }
    .St-right-box {
      width: 100%;
      height: auto;
      position: relative;
    }
    .St-scroll-container{
      display: flex
  ;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .St-pair {
      display: flex;
      height: 100%;
      flex-direction: column-reverse;
      flex-wrap: nowrap;
      width: 100%;
    }
  
    .St-last{
      width: 100vw;
  
    }
  
    .St-last img{
      width:70vw;
    }
    .St-left-pair-box{
      width: 100%;
      height: 100%;
      align-items: flex-start;
    }
    .St-right-pair-box {
      display: flex;
      width: 100%;
      margin-bottom: 1rem;
      /* height: auto; */
      align-items: center;
    }
   
    
    
  
    .St-image1{
      margin-top: 10%;
    }
  
  
    .St-right-pair-box img {
      width:40vw;
      height: 45vh;
      box-shadow: 0 0 0;
  }
    .St-left-pair-box p{
      font-size: 0.8rem;
      text-align: center;
    }
    .static-box {
       text-align: center; 
    }
    .St-left-box h1 {
      font-size: 2vw;
      margin-bottom: 1rem;
      
      
    }
  
    
    .St-left-box h2 {
      font-size: 1.5vw;
      margin-bottom: 1rem;
      
    }
  }
   
   
  
  
  
  
  
  /*****************************************/
  /* Mgame Section fills screen (optional) */
  /*****************************************/
  .mgame-section {
    display: flex;
    align-items: center;
    justify-content:space-around;
    height: 100vh;
    /* background-color: #f8f7dc; */
    padding: 0 1rem;
    background-image:linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
     url('images/game/Frame\ 1400002929-2.jpg'); /* Replace with your image path */
    background-size: cover;       /* Make the image cover the entire section */
    background-position: center;  /* Center the image */
    background-repeat: no-repeat;
    /* overflow: hidden;
    object-fit: contain; */
  }
  
  /* Outer box to center and constrain width */
  .mgame-outer-box {
   display: flex;
   flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: auto; /* Adjust as needed */
    /* background-color: #fff; */
    /* background-image: linear-gradient(to bottom, #FFFFF9, #F7F5D9);
    border: 2px solid #eb3a3a; */
    border-radius: 22px;
    padding: 2rem;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  }
  
  /* Top box for heading & instructions */
  .mgame-top-box {
    display: flex
;
    text-align: center;
    /* border: 2px solid #ccc; */
    height: 8vh;
    color: #791D27;
    width: 100%;
    justify-content: space-around;
  }
  .mgame-top-box h3 {
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    margin-bottom: 0.5rem;
    color: #791D27;
    
  }
  .mgame-top-box p {
    font-size: 1.125rem;
    color: #791D27;
  }
  
  /* Bottom box splits horizontally: left (sets) & right (images) */
  .mgame-bottom-box {
    display: flex;
    gap: 0.5rem;
    height: auto;
    /* border: 2px solid #2a3dd2; */
    width: 95vw;
    justify-content: center;
  }
  
  /* Left side: 5 small boxes stacked vertically */
  .mgame-left-box {
    display: flex;
        width: 55vw;
        flex-wrap: wrap;
        flex-direction: row;
        /* border: 2px solid #ccc; */
        gap: 1rem;
        justify-content: flex-start;
        align-content: flex-start;
        background-color: #d9d0cb;
  }
  .Top-small-box{
   display: flex;
    width: 55vw;
    gap: 1rem;
    
  }
  .Bottom-small-box{
    display: flex;
    
    width: 55vw;
    gap: 1rem;
  
  }
  
  /* Each small-box with a title and 4 slots */
  .small-box {
    /* background-color: #fff; */
    /* border: 2px solid #ccc; */
    border-radius: 8px;
    /* padding: 1rem; */
    display: flex;
    align-items: center;
      flex-direction: column;
      width: 40%;
      height: 40%;
  }
  .small-text {
    /* background-color: #fff; */
    /* border: 2px solid #ccc; */
    border-radius: 8px;
    /* padding: 1rem; */
    display: flex
;
    align-items: center;
    flex-direction: column;
    width: 40%;
    height: 100%;
    display: flex;
}

.top-text{
  display: flex
;
    width: 100%;
    height: 50%;
    /* background-color: #ffffff; */
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
}
.bottom-logo{
  height:50%;
  width: 100%;
  background-color: #ffffff;
}
  .small-box h3 {
    margin-bottom: 0.5rem;
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
    color: #333;
  }
  .top-slot{
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .Bottom-logo{
    display: flex;
    width: 50%;
    justify-content: center;
  }

  
  /* Slots for dropping images */
  .slot {
    min-width: 5vw;
    min-height: 14vh;
    height: 14vh;
    margin: 0.5rem;
    background-color: #eee;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: inline-block;
    
  }
  
  /* Right side: instructions + 20 image slots */
  .mgame-right-box {
    display: flex;
    /* background-color: #fff;
    border: 2px solid #ccc; */
    border-radius: 8px;
    /* padding: 1rem; */
    width: 30%;
    height: auto;
    /* border: 2px solid #0a0505; */
    flex-direction: column;
    align-items: flex-end;
    min-width: 30%;
    
  }
  .mgame-right-box img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  
  .mgame-left-box h2{
    color: #791D27;
    font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);;
  }
  
  .instructions-title {
    color: #000000;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  .instructions-text {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #000000;text-align: center;
  }
  
  #resetBtn {
    background-color: #dbd1cb;
    color: #000000;
    border: none;
    /* padding: 0.5rem 1rem; */
    cursor: pointer;    /* Makes it clear the button is clickable */
  }

  #resetBtn:hover {
    background-color: green; /* Darker shade on hover */
  }

  /* Grid of images (20 slots) */
  .images-grid {
    
   
    display: grid;
  grid-template-columns: repeat(4, 0.3fr);
  gap: 1rem;
  padding: 1rem;
  background-color: #f7f7f7;
  border-radius: 8px;
  min-width: 100%; /* Sometimes helps in Safari */

  }
  .image-slot {
    position: relative;
    width: 4pvw;
    height: auto;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
  }
  .image-slot img {
    max-width: 80%;
    max-height: 80%;
    object-fit: cover;
  }
  
  /* Ensure the image in the image slot fills the slot */
  /* .image-slot {
    position: relative;
    width: 80px;
    height: 80px;
    border: 2px dashed #ccc;
    border-radius: 4px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .image-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  } */
  /* Placeholder plus icon in empty slot */
  .slot .placeholder-icon {
    font-size: 2rem;
    color: #000000;
    position: absolute;
    /* top: 5px;
    right: 5px; */
  }
  
  /* Tick overlay for image slot (when image is taken) */
  .tick-overlay {
    position: absolute;
    /* top: 5px;
    right: 5px; */
    font-size: 1.5rem;
    color: green;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    padding: 2px;
    align-items: center;
  }
  
  /* Style reset button with an icon */
  .reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-bottom: 1rem;
  }
  
  .reset-btn:hover {
    background-color: #555;
  }
  
  
  
  /* Basic responsiveness for smaller screens */
  @media (max-width: 768px) {
    .mgame-bottom-box {
      flex-direction: column;
    }
    .mgame-left-box, .mgame-right-box {
      width: 100%;
    }
  }

  /* Hide game-section for tablets and smaller devices */
@media (max-width: 1024px) {
  .mgame-section {
    display: none;
  }
}
  

  /*******************************/
    /* Footer Section Base Styles */
    /********************************/
    .exhibition-footer {
        background-color: #f9f7e0;            /* Adjust as needed */
        font-family: 'Montserrat', sans-serif;
        color: #333;
        padding: 40px;
        line-height: 1.5;
        height: 80vh;
        /* width: 100vw; */
        display: flex;
    flex-direction: column;
    justify-content: flex-end;
      }
     

      .bottom-foot-box{
        height: 20vh;
        display: flex;
        align-items: center;

    justify-content: center;
    /* width: 100vw; */
    /* border: 2px solid #000000; */
      }
      
      .footer-top {
        display: flex;
        flex-wrap: wrap; /* Allows wrapping on smaller screens */
        gap: 20px;
        margin-bottom: 20px;
        /* border: 2px solid #000000; */
        justify-content: space-between;
      }
      
      .footer-left {
        display: flex
        ;
            align-items: flex-start;
            gap: 20px;
            /* flex: 1; */
            width: 30vw;
            /* border: 2px solid #66d898; */
            flex-direction: column-reverse;
      }
      .footer-text-top{
        display: flex
;
    /* height: 50%; */
    flex-direction: column;
    justify-content: space-around;
    line-height: 4.444vh;
           
      }

      .footer-text-bottom{
        display: flex
        ;
            height: 50%;
            flex-direction: column;
            justify-content: flex-start;
            color: #791D27;
            line-height: 4.444vh;
            
      }      
      .footer-art {
        max-width: 100%;
        height: auto;
        display: block;
      }
      
      .footer-logos {
        display: flex;
        gap: 15px;
    align-items: center;
    /* width: 15vw; */
    width: 100%;
    justify-content: space-between;
    
      }
      
      .footer-logo {
        /* max-height: 50px; */
        /* Adjust logo size as needed */
        display: block;
        width: 40%;
      }
      
      
      .footer-right {
       /* flex: 1; */
    display: flex
;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    /* justify-content: space-between; */
    max-width: 55vw;
    /* border: 2px solid #000000;*/
    max-height: 100%;
      }

      
      
     
      .footer-right p{
        font-size:clamp(1rem, 1rem + 0.1vw, 1.125rem);
      }

       /* For devices narrower than 768px, you may want to fix the size for better readability */
       @media (max-width: 768px) ,only screen and (orientation: portrait) {
        .footer-right p{
          font-size: 1rem; /* Fixed size on small screens */

        }
        .footer-text-bottom{
          line-height: normal;
        }
        .footer-text-top{
          height: 50%;
          line-height:normal;
        }
        .footer-right {
          width: 100%;
          max-width: 100vw;
        }
        .bottom-foot-box p{
          font-size: 0.6rem;
          
        }
        .exhibition-footer {
            /* font-family: 'Montserrat', sans-serif;
          color: #333; */
          padding: 10px;
          /* line-height: 1.5;
          height: 80vh;
          width: 100vw;
          display: flex;
      flex-direction: column;
      justify-content: flex-end; */
        }
        .footer-left {
          display: flex;
          flex-direction: column;
          width: 100%;
        }


        .exhibition-footer {
          background-color: #f9f7e0;            /* Adjust as needed */
          font-family: 'Montserrat', sans-serif;
          color: #333;
          padding: 40px;
          line-height: 1.5;
          height: auto;
          /* width: 100vw; */
          display: flex;
      flex-direction: column;
      justify-content: flex-end;
        }
      }


      
      
      .footer-bottom {
        border-top: 1px solid #ccc;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    align-items: center;
      }
      
      .footer-bottom p {
        margin: 0;
      }

  
  /******************************/
  /* RESPONSIVE EXAMPLE */
  /******************************/
  @media (max-width: 768px) {
    .landing-section {
      flex-direction: column;
      justify-content: center;
    }
    /* Remove side boxes entirely */
    .side-box {
      display: none;
    }
    
    /* Optional: Adjust the outer box to stack content vertically */
    .outer-box {
      flex-direction: column;
      justify-content: center;
    }
    
    /* Ensure the center content is spaced properly */
    .center-content {
      margin-top: 2rem;
     
    }
    .landing-title {
      font-size: 10vw;
      margin-bottom: 2rem;
    }
  
    /* Show the down-box only in portrait/mobile */
    .down-box {
      display: flex;
      flex-direction: row; /* Or column, depending on your design */
      align-items: center;
      justify-content: center;
      gap: 1rem;
      width: 100%;
      margin-top: 2rem;
      /* background-color: #e1e1e1;
      border: 2px solid #ccc; */
      border-radius: 4px;
      padding: 1rem;
      height: 40%;
    }
  
    /* You can also adjust sizes for inner boxes if needed */
    .inner-box-small {
      width: 20vw;
      height: 20vh;}
    .inner-box-large {
      width: 35vw;
      height: 35vh;
    }
  
    /* Optionally, adjust inner box sizes for smaller screens 
    .inner-box-small {
      width: 60px;
      height: 60px;
    }
    .inner-box-large {
      width: 90px;
      height: 110px;
    }*/
    /**********************/
  /*video section*/
  /**********************/
  .video-title {
    font-size: 2rem;
  }
  .video-subtitle {
    font-size: 1rem;
  }
  }


  /*trail 
  /* Ensure Fs-section has a fixed maximum height when open */
/*tombstone*/
/* Ensure the image is positioned relatively so the pseudo-element can be positioned over it */
/*overlay 
/* === POPUP OVERLAY === */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Dark overlay */
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999; /* Ensure it appears above other elements */
}

.popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* === POPUP CONTENT BOX === */
.popup-content {
  display: flex
;
    position: relative;
    background: #fff;
    max-width: 90%;
    max-height: 90%;
    padding: 1rem;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    align-items: center;}

/* === CLOSE BUTTON === */
.popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.8rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* === POPUP IMAGE === */
#popupImage {
  display: block;
  max-width: 50%;
  max-width: 40%;
  height: auto;
  margin: 0 auto;
}

/* === TOMBSTONE TEXT === */
.popup-tombstone {
  margin-top: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.5rem); /* 8px to 12px in rem */
  line-height: 1.3;
  color: #333;
  text-align: center;
  width: 50%;
}


/************************************/
/* Feedback Section Base Styles     */
/************************************/
.feedback-section {
  position: relative;      /* So we can absolutely position images inside */
  width: 100%;
  min-height: 30vh;        /* Adjust based on your design */
  background-color: #f9f7e0;  /* Or any background you prefer */
  overflow: hidden;        /* Ensures positioned elements don’t overflow */
  text-align: center;      /* Center text by default */
  padding-top: 3rem;       /* Spacing at the top for headings */
  padding-bottom: 6rem;    /* Extra space so bottom image doesn’t cover text */
}

.feedback-content {
  max-width: 1800px;        /* Constrain the content width */
  margin: 0 auto;          /* Center the content horizontally */
}

.feedback-subtitle {
  font-size: clamp(1rem, 1.5vw, 2rem); /* Responsive sizing */
  color: #791D27;                         /* Slightly darker shade */
  margin-bottom: 0.5rem;
}

.feedback-title {
  font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
  font-weight: 400;
    color: #791D27;
    margin-bottom: 2rem;
    /* margin-bottom: 0.5rem; */
    margin-top: 2rem;
}

.feedback-button {
  background-color: #791D27; /* Example color (maroon/red) */
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 1vw, 1.25rem);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  margin-top: 1vh;

}

.feedback-button:hover {
  background-color: #791D27; /* Slightly lighter/darker on hover */
}

/* Character image: position it on the left or right side. */
.feedback-character {
  position: absolute;
  bottom: 6%;
  left: 2%;                /* Adjust to move it left/right */
  width: auto;             /* Keep aspect ratio */
  height: 70%;             /* Scale the height as needed */
  max-height: 400px;       /* Prevent it from getting too big on large screens */
}

/* Bottom decorative image: stretches across the width */
.feedback-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;            /* Maintain aspect ratio */
  max-height: 100px;       /* Adjust as needed */
  object-fit: cover;
         /* Ensure it covers horizontally if needed */
}

/* Responsive adjustments */
@media (max-width: 768px) {

  .feedback-title {
    padding: 1rem;

  }
  .feedback-section {
    padding-top: 2rem;
    padding-bottom: 8rem;  /* Extra bottom space if needed */
  }

  .feedback-character {
    width: 10vh;            /* Scale down on mobile */
    height: auto;          /* Maintain aspect ratio */
  }
  
  .feedback-bottom {
    max-height: 60px;      /* Make the bottom border shorter */
  }
}


/* === Coll-Section Styles === */
.coll-section {
  display: flex
;
    padding: 2rem;
    text-align: center;
    background-color: #fff;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: space-around;}

.coll-title {
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: #791D27;        /* Match your site’s color scheme */
  margin-bottom: 1.5rem;
}

/* Scrollable grid container */
.coll-grid {
  display: grid
  ;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
      max-height: 80vh;
      overflow-y: auto;
      padding: 1rem;
      background-color: #f7f7f7;
      border: 2px solid #ccc;
      border-radius: 8px;
      align-items: stretch;
      width: 50%;
      height: 65%;
      cursor: pointer;
          /* Optional rounding */
}

/* Image styling */
.coll-grid img {
  width: 100%;       /* Each cell’s width */
  height: auto;      /* Preserve aspect ratio */
  object-fit: cover; /* Crop if needed to fill cell */
  border-radius: 4px;/* Optional rounding */
}

/* === Responsive: 3 columns on mobile === */
@media (max-width: 768px) {
  .coll-grid {
    grid-template-columns: repeat(3, 1fr);
    max-height: 60vh;  /* You can reduce the height on mobile if desired */
    width: 100%;
  }
}

/* === video overlay === */
.image-container {
  position: relative;
  cursor: pointer;
}

/* Underlying image remains as is */
.image-container img.Fs-image1 {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay GIF styles */
.overlay-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  width:20%   !important;   /* Adjust this percentage to control the size */
  height: 20% !important;    /* Maintain aspect ratio */
  transform: translate(-50%, -50%);
  object-fit: contain;  /* Or use cover depending on your preference */
  opacity: 0;       /* Hidden by default */
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Dull effect on the image while overlay is active */
.image-container.dull img.Fs-image1 {
  filter: brightness(50%);
  transition: filter 0.5s ease;
}


/*map lines*/
.mobile-section {
  background-color: #004B5E; /* Teal background */
  color: #F8E5C2;            /* Light text */
  /* padding: 2rem 1rem; */
  font-family: "Montserrat", sans-serif;
  min-height: 100vh;
  background-image:
  url('images/map/iPhone\ 16\ Pro\ -map\ bg.png'); /* Replace with your image path */
 background-size: cover;       /* Make the image cover the entire section */
 background-position: center;  /* Center the image */
 background-repeat: no-repeat;
 overflow: hidden;
 object-fit: contain;
}

/* Title and subtitle at the top */
.mobile-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  padding-top: 1rem;
}

.mobile-subtitle {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Accordion container */
.accordion {
  /* max-width: 600px; */
  margin: 0 auto; /* center horizontally */
}

/* Each item has a header that’s clickable */
.accordion-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 1rem;
}


/* Header styling: a row with text + plus icon */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 1rem;
  user-select: none;
}

/* The plus icon */
.accordion-icon {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

/* Content area is hidden by default via max-height: 0 */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* The actual tall content container */
.accordion-inner {
  padding: 1rem 0;
  /* If you want a specific height, or to demonstrate 300vh:
     height: 300vh;  */
}

/* Active item styling: flips the plus icon, expands the content */
.accordion-item.active .accordion-icon {
  transform: rotate(45deg); /* plus becomes an 'x' or angled plus */
}

/* When active, let the content expand to a large height
   For truly large content, you can set max-height to something very large or
   use JS to measure the content’s scrollHeight (see JS snippet).
*/
.accordion-item.active .accordion-content {
  max-height: 1000px; /* Increase if you have 300vh content */
  /* or max-height: 9999px; as a quick trick */
}

.accordion-content .sub-section {
  width: 100%;
  height: 100vh;
  /* padding: 20px; */
  box-sizing: border-box;
  overflow-y: auto;
  background-color: aqua;
  border: 2px solid #007acc;
  border-radius: 20px;
}
/* Outer Box: Two columns layout */
.mo-Ms-outer-box {
  display: flex;
  gap: 2rem;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  /* height: 100vh; */
  overscroll-behavior: contain;
  background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
  url('images/background/first\ slide\ murshidabad\ bg\ \(1\).png'); /* Replace with your image path */
 background-size: cover;       /* Make the image cover the entire section */
 background-position: center;  /* Center the image */
 background-repeat: no-repeat;
 overflow: hidden;
 object-fit: contain;
}

/* Left Column: Static Content */
.mo-Ms-left-box {
  
  position: absolute;
  /* top: 0; */
  right: 1%;
  left: 3.5%;
  height: 60%;
  width: 26.8vw;
  /* background: #F8F7DC; */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  /* padding: 1rem; */
  color: #e3e1e2;
  /* border: #000; */
 /* background-color: #000;  */
  z-index: 0;
}

/* .mo-Ms-left-box h1 {
  font-size: 4.3vw;
  margin-bottom: 1rem;
  font-weight: 600;
  
}
.mo-Ms-left-box h2 {
  font-size: 3vw;
  font-weight: 600;
} */

.mo-Ms-left-box h1 {
  font-size: clamp(2rem, 2.5vw, 4.3vw);
  margin-bottom: 1rem;
  font-weight: 600;
}

.mo-Ms-left-box h2 {
  font-size: clamp(1.5rem, 2vw, 3vw);
  font-weight: 600;
}

/* Media query override for very small screens */
@media (max-width: 768px),only screen and (orientation: portrait) {
  .mo-Ms-left-box h1 {
    font-size: 2rem;  /* Override to a fixed value if needed */
  }
  .mo-Ms-left-box h2 {
    font-size: 1.5rem;
  }
}


/* Right Column: This column will not scroll on its own */
.mo-Ms-right-box {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* height: 100vh; */
  height: 100%;
  overflow-y: auto;
  /* scroll-snap-type: y mandatory; */
  /* overscroll-behavior: contain; */
  scroll-snap-stop: always; /* helps enforce snapping without ‘slippage’ */
  scroll-behavior: smooth;
}

/* For WebKit browsers */
.mo-Ms-right-box::-webkit-scrollbar {
  width: 12px;  /* Set the width of the scrollbar */
  }
  
  .mo-Ms-right-box::-webkit-scrollbar-track {
  background: #004b5e;  /* Color of the track */
  border-radius: 6px;
  }
  
  .mo-Ms-right-box::-webkit-scrollbar-thumb {
  background: #004b5e;  /* Color of the thumb */
  border-radius: 6px;
  border: 2px solid #004b5e; /* Optional: add border for a nicer look */
  }
  
  .mo-Ms-right-box::-webkit-scrollbar-thumb:hover {
  background: #005fa3;  /* Darker on hover */
  }
  
  /* For Firefox */
  .mo-Ms-right-box {
  scrollbar-width: thin;  /* Options: auto, thin, none */
  scrollbar-color: #F8E5C2 #004b5e;  /* thumb color then track color */
  }
  

/* Scroll Container: Contains all pairs and will be animated vertically */
.mo-Ms-scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Its height must equal the total height of all pairs.
     In this example, each pair fills 100vh, so for 3 pairs, height = 300vh */
  height: 299%;
  
  display: flex;
  flex-direction: column;
  /* overflow-y: auto; */
overscroll-behavior: contain; /* Contain the scroll until boundaries are reached */

  
}

/* Each Pair: Full viewport height */
.mo-Ms-pair {
  height: 100%;
    display: flex;
    padding: 1rem;
    box-sizing: border-box;
    /* background: #F8F7DC; */
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    align-items: center;
    justify-content: space-around;
  /* (Optional) You can add scroll-snap-align here if needed,
     but the animation below controls the translation */
     /* opacity: 0;
     transition: opacity 0.1s ease-out; */
     scroll-snap-align: start;
     
     
}



/* Base styling for boxes in pairs */
.mo-Ms-box {
  /* background: #ba3b3b; */
  padding: 1rem;
  /* border: 2px solid #aaa; */
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  
}

/* Left pair box: larger */
.mo-Ms-left-pair-box {
  
  display: flex;
  width: 35%;
  height: 67%;
  align-items: center;
  
  
}

.mo-Ms-left-pair-box p {
  font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #e3e1e2;
  font-style: normal;
}

/* For devices narrower than 768px, you may want to fix the size for better readability */
@media (max-width: 768px),only screen and (orientation: portrait) {
  .mo-Ms-left-pair-box p {
    font-size: 1rem; /* Fixed size on small screens */
  }
}



/* Right pair box: smaller */
.mo-Ms-right-pair-box {
  width: 40%;
  /* height: 20vw; */
  
  /* background-color: #000; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.mo-Ms-title{
  height: auto !important;
}
.mo-Ms-right-pair-box img{

  
  height: 50%;    
    width: 80%;
  object-fit: contain;
  /* display: block; */
  /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
  /* font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.6;
  text-align: left;
  color: #313131;
  font-style: normal; */
}
.mo-Ms-image2{
 margin-top: 20%;
}


/* Responsive Adjustments */
@media (max-width: 768px),only screen and (orientation: portrait) {
  .mo-Ms-outer-box {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  static-box {
    margin-bottom: 2rem;
  }
  .mo-Ms-left-box{
    /* width: 100%; */
   width: 100%;
    display: flex;
    height: 18vh;
    left: 0;
    /* flex: 0 0 20%; */
    align-items: flex-end;
    justify-content: center;
  }
  .mo-Ms-right-box {
    width: 100%;
    height: auto;
    position: relative;
  }
  .mo-Ms-scroll-container{
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .mo-Ms-pair {
    display: flex;
    height: 100%;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    width: 100%;
  }

  .mo-Ms-last{
    width: 100vw;

  }

  .mo-Ms-last img{
    width:70vw;
  }
  .mo-Ms-left-pair-box{
    width: 100%;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
  }
  .mo-Ms-right-pair-box {
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
    /* height: auto; */
    align-items: center;
  }
 
  
  

  .mo-Ms-image1{
    margin-top: 0;
  }


  .mo-Ms-right-pair-box img {
    width:65%;
    height: auto;
    box-shadow: 0 0 0;
}
  .mo-Ms-left-pair-box p{
    font-size: 0.8rem;
    text-align: center;
  }
  .static-box {
     text-align: center; 
  }
  .mo-Ms-left-box h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    
    
  }

  
  .mo-Ms-left-box h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    
  }
}

/*mo-pt*/

/* Outer Box: Two columns layout */

.mo-Pt-outer-box {
  display: flex;
  gap: 2rem;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  /* height: 100vh; */
  overscroll-behavior: contain;
  background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
  url('images/background/FRONT\ PATNA\ \(1\).png'); /* Replace with your image path */
 background-size: cover;       /* Make the image cover the entire section */
 background-position: center;  /* Center the image */
 background-repeat: no-repeat;
 overflow: hidden;
 object-fit: contain;

}

  
/* Left Column: Static Content */
.mo-Pt-left-box {
  
  position: absolute;
  /* top: 0; */
  right: 1%;
  left: 37%;
  height: 50%;
  width: 50vw;
  /* background: #F8F7DC; */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  /* padding: 1rem; */
  color: #e3e1e2;
  /* border: #000; */
 /* background-color: #000;  */
  z-index: 0;
}

.mo-Pt-left-box h1 {
  font-size: clamp(2rem, 2.5vw, 4.3vw);
  margin-bottom: 1rem;
  font-weight: 600;
}

.mo-Pt-left-box h2 {
  font-size: clamp(1.5rem, 2vw, 3vw);
  font-weight: 600;
}

/* Media query override for very small screens */
@media (max-width: 768px),only screen and (orientation: portrait) {
  .mo-Pt-left-box h1 {
    font-size: 2rem;  /* Override to a fixed value if needed */
  }
  .mo-Pt-left-box h2 {
    font-size: 1.5rem;
  }
}


/* Right Column: This column will not scroll on its own */
.mo-Pt-right-box {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* height: 100vh; */
  height: 100%;
  overflow-y: auto;
  /* scroll-snap-type: y mandatory; */
  /* overscroll-behavior: contain; */
  scroll-snap-stop: always; /* helps enforce snapping without ‘slippage’ */
  scroll-behavior: smooth;
}

/* .mo-Pt-right-box::-webkit-scrollbar {
  /* For Chrome, Safari, and newer Edge */
  /* width: 0px; */
  /* background: transparent;  */
  /* background-color: #D8CEC5; */

  /* For WebKit browsers */
.mo-Pt-right-box::-webkit-scrollbar {
width: 12px;  /* Set the width of the scrollbar */
}

.mo-Pt-right-box::-webkit-scrollbar-track {
background: #004b5e;  /* Color of the track */
border-radius: 6px;
}

.mo-Pt-right-box::-webkit-scrollbar-thumb {
background: #004b5e;  /* Color of the thumb */
border-radius: 6px;
border: 2px solid #004b5e; /* Optional: add border for a nicer look */
}

.mo-Pt-right-box::-webkit-scrollbar-thumb:hover {
background: #005fa3;  /* Darker on hover */
}

/* For Firefox */
.mo-Pt-right-box {
scrollbar-width: thin;  /* Options: auto, thin, none */
scrollbar-color: #F8E5C2 #004b5e;  /* thumb color then track color */
}

/* Scroll Container: Contains all pairs and will be animated vertically */
.mo-Pt-scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Its height must equal the total height of all pairs.
     In this example, each pair fills 100vh, so for 3 pairs, height = 300vh */
  height: 399%;
  
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  
}

/* Each Pair: Full viewport height */
.mo-Pt-pair {
  height: 100%;
    display: flex;
    padding: 1rem;
    box-sizing: border-box;
    /* background: #F8F7DC; */
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    align-items: center;
    justify-content: space-around;
  /* (Optional) You can add scroll-snap-align here if needed,
     but the animation below controls the translation */
     /* opacity: 0;
     transition: opacity 0.1s ease-out; */
     scroll-snap-align: start;
     
     
}



/* Base styling for boxes in pairs */
.mo-Pt-box {
  /* background: #ba3b3b; */
  padding: 1rem;
  /* border: 2px solid #aaa; */
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  
}

/* Left pair box: larger */
.mo-Pt-left-pair-box {
  
  display: flex;
  width: 35%;
  height: 67%;
  align-items: center;
  
  
}
.mo-Pt-left-pair-box p {
  font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #e3e1e2;
  font-style: normal;
}

/* For devices narrower than 768px, you may want to fix the size for better readability */
@media (max-width: 768px),only screen and (orientation: portrait){
  .mo-Pt-left-pair-box p {
    font-size: 1rem; /* Fixed size on small screens */
  }
}

/* Right pair box: smaller */
.mo-Pt-right-pair-box {
  width: 40%;
  /* height: 20vw; */
  
  /* background-color: #000; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.mo-Pt-right-pair-box img{

  
  height: 50%;    
    width: 80%;
  object-fit: contain;
  /* display: block; */
  /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
  /* font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.6;
  text-align: left;
  color: #313131;
  font-style: normal; */
}
.mo-Pt-image2{
 margin-top: 20%;
}
.mo-Pt-right-pair-box4 {
  width: 40%;
  /* height: 20vw; */
  /* background-color: #000; */
  height: 67vh;
  display: flex
;
  align-items: center;
  justify-content: center;}

.mo-Pt-right-pair-box4 img {
  height: 50%;
  width: 80%;
  object-fit: contain;}


/* Responsive Adjustments */
@media (max-width: 768px),only screen and (orientation: portrait) {
  .mo-Pt-outer-box {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  static-box {
    margin-bottom: 2rem;
  }
  .mo-Pt-left-box{
    /* width: 100%; */
   width: 100%;
    display: flex;
    height: 18vh;
    left: 0;
    /* flex: 0 0 20%; */
    align-items: flex-end;
    justify-content: center;
  }
  .mo-Pt-right-box {
    width: 100%;
    height: auto;
    position: relative;
  }
  .mo-Pt-scroll-container{
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .mo-Pt-pair {
    display: flex;
    height: 100%;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    width: 100%;
  }

  .mo-Pt-last{
    width: 100vw;

  }

  .mo-Pt-last img{
    width:70vw;
  }
  .mo-Pt-left-pair-box{
    width: 100%;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
  }
  .mo-Pt-right-pair-box {
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
    /* height: auto; */
    align-items: center;
  }
 
  
  

  .mo-Pt-image1{
    margin-top: 10%;
  }
  .mo-Pt-right-pair-box4 img {
    width: 100%;
    height: auto;
    box-shadow: 0 0 0;
}

  .mo-Pt-right-pair-box img {
    width:65%;
    height: auto;
    box-shadow: 0 0 0;
}
.mo-Pt-right-pair-box4 {
  width: auto;
  height: auto;
}
  .mo-Pt-left-pair-box p{
    font-size: 0.8rem;
    text-align: center;
  }
  .static-box {
     text-align: center; 
  }
  .mo-Pt-left-box h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    
    
  }

  
  .mo-Pt-left-box h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    
  }
}


/*mo-st*/
/* Outer Box: Two columns layout */
.mo-St-outer-box {
  display: flex;
  gap: 2rem;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  /* height: 100vh; */
  overscroll-behavior: contain;
  background-image:linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
  url('images/background/TRICHY\ FRONT\ \(1\).png'); /* Replace with your image path */
 background-size: cover;       /* Make the image cover the entire section */
 background-position: center;  /* Center the image */
 background-repeat: no-repeat;
 overflow: hidden;
 object-fit: contain;
}

/* Left Column: Static Content */
.mo-St-left-box {
  
  position: absolute;
  /* top: 0; */
  right: 1%;
  left: 70.2%;
  height: 50%;
  width: 50vw;
  /* background: #F8F7DC; */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  /* padding: 1rem; */
  color: #e3e1e2;
  /* border: #000; */
 /* background-color: #000;  */
  z-index: 0;
}

.mo-St-left-box h1 {
  font-size: clamp(2rem, 2.5vw, 4.3vw);
  margin-bottom: 1rem;
  font-weight: 600;
}

.mo-St-left-box h2 {
  font-size: clamp(1.5rem, 2vw, 3vw);
  font-weight: 600;
}

/* Media query override for very small screens */
@media (max-width: 768px),only screen and (orientation: portrait) {
  .mo-St-left-box h1 {
    font-size: 2rem;  /* Override to a fixed value if needed */
  }
  .mo-St-left-box h2 {
    font-size: 1.5rem;
  }
}


/* Right Column: This column will not scroll on its own */
.mo-St-right-box {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* height: 100vh; */
  height: 100%;
  overflow-y: auto;
  /* scroll-snap-type: y mandatory; */
  /* overscroll-behavior: contain; */
  scroll-snap-stop: always; /* helps enforce snapping without ‘slippage’ */
  scroll-behavior: smooth;
  
}

/* .mo-St-right-box::-webkit-scrollbar { */
  /* For Chrome, Safari, and newer Edge */
  /* width: 0px;
  background: transparent; 
} */

/* For WebKit browsers */
.mo-St-right-box::-webkit-scrollbar {
  width: 12px;  /* Set the width of the scrollbar */
  }
  
  .mo-St-right-box::-webkit-scrollbar-track {
  background: #004b5e;  /* Color of the track */
  border-radius: 6px;
  }
  
  .mo-St-right-box::-webkit-scrollbar-thumb {
  background: #004b5e;  /* Color of the thumb */
  border-radius: 6px;
  border: 2px solid #004b5e; /* Optional: add border for a nicer look */
  }
  
  .mo-St-right-box::-webkit-scrollbar-thumb:hover {
  background: #005fa3;  /* Darker on hover */
  }
  
  /* For Firefox */
  .mo-St-right-box {
  scrollbar-width: thin;  /* Options: auto, thin, none */
  scrollbar-color: #F8E5C2 #004b5e;  /* thumb color then track color */
  }
  

/* Scroll Container: Contains all pairs and will be animated vertically */
.mo-St-scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Its height must equal the total height of all pairs.
     In this example, each pair fills 100vh, so for 3 pairs, height = 300vh */
  height: 499%;
  
  display: flex;
  flex-direction: column;
  /* overscroll-behavior: contain; */
  overscroll-behavior: auto; /* Allows events to bubble up once boundaries are reached */

}

/* Each Pair: Full viewport height */
.mo-St-pair {
  height: 100%;
    display: flex;
    padding: 1rem;
    box-sizing: border-box;
    /* background: #F8F7DC; */
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    align-items: center;
    justify-content: space-around;
  /* (Optional) You can add scroll-snap-align here if needed,
     but the animation below controls the translation */
     /* opacity: 0;
     transition: opacity 0.1s ease-out; */
     scroll-snap-align: start;
     
     
     
     
}



/* Base styling for boxes in pairs */
.mo-St-box {
  /* background: #ba3b3b; */
  padding: 1rem;
  /* border: 2px solid #aaa; */
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  
}

/* Left pair box: larger */
.mo-St-left-pair-box {
  
  display: flex;
  width: 35%;
  height: 67%;
  align-items: center;
  
  
}
.mo-St-left-pair-box p {
  font-size: clamp(1rem, 1rem + 0.1vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #e3e1e2;
  font-style: normal;
}

/* For devices narrower than 768px, you may want to fix the size for better readability */
@media (max-width: 768px),only screen and (orientation: portrait) {
  .mo-St-left-pair-box p {
    font-size: 1rem; /* Fixed size on small screens */
  }
}

/* Right pair box: smaller */
.mo-St-right-pair-box {
  width: 40%;
  /* height: 20vw; */
  
  /* background-color: #000; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.mo-St-right-pair-box img{

  
  height: 50%;    
    width: 80%;
  object-fit: contain;
  /* display: block; */
  /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
  /* font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.6;
  text-align: left;
  color: #313131;
  font-style: normal; */
}
.mo-St-image2{
 margin-top: 20%;
}
.mo-St-right-pair-box4 {
  width: 40vw;
  /* height: 20vw; */
  /* background-color: #000; */
  height: 67vh;
  display: flex
;
  align-items: center;
  justify-content: center;}

.mo-St-right-pair-box4 img {
  height: 40vh;
  width: 100vw;
  object-fit: contain;}




.mo-St-right-pair-box2 {
  width: 40vw;
  /* height: 20vw; */
  
  /* background-color: #000; */
  height: 67vh;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  
}
.mo-St-right-pair-box2 img{

    width: 20vw;
  object-fit: contain;
  margin-right: 1rem;
  /* display: block; */
  /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
  /* font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.6;
  text-align: left;
  color: #313131;
  font-style: normal; */
}
.mo-St-image2{
 margin-top: 20%;
 height: 40vh;
 
}
.mo-St-image1{
  
 height: 40vh;
}


/* Responsive Adjustments */
 /* Responsive Adjustments */
 @media (max-width: 768px),only screen and (orientation: portrait) {
  .mo-St-outer-box {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  static-box {
    margin-bottom: 2rem;
  }

  .mo-St-right-pair-box2 {
    width: auto;
    /* height: 20vw; */
    /* background-color: #000; */
    height: auto;
    display: flex
;
    align-items: center;}

  .mo-St-right-pair-box2 img {
    width: 50%;
    object-fit: contain;
    margin-right: 1rem;
    /* display: block; */
    /* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5); */
}
  .mo-St-left-box{
    /* width: 100%; */
   width: 100%;
    display: flex;
    height: 18vh;
    left: 0;
    /* flex: 0 0 20%; */
    align-items: flex-end;
    justify-content: center;
  }
  .mo-St-right-box {
    width: 100%;
    height: auto;
    position: relative;
  }
  .mo-St-scroll-container{
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .mo-St-pair {
    display: flex;
    height: 100%;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    width: 100%;
  }

  .mo-St-last{
    width: auto;

  }

  .mo-St-last img{
    width: 50%;
  }
  .mo-St-left-pair-box{
    width: 100%;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
  }
  .mo-St-right-pair-box {
    display: flex;
    width: 100%;
    /* margin-bottom: 1rem; */
    /* height: auto; */
    align-items: center;
  }
 
  
  

  .mo-St-image1{
    margin-top: 0%;
  }


  .mo-St-right-pair-box img {
   width:65%; 
    height: auto;
    box-shadow: 0 0 0;
}
  .mo-St-left-pair-box p{
    font-size: 0.8rem;
    text-align: center;
  }
  .static-box {
     text-align: center; 
  }
  .mo-St-left-box h1 {
    font-size: 2vw;
    margin-bottom: 1rem;
    
    
  }

  
  .mo-St-left-box h2 {
    font-size: 1.5vw;
    margin-bottom: 1rem;
    
  }
}
.mobile-section {
  display: none;
}

@media (max-width: 768px),only screen and (orientation: portrait) {
  .mobile-section {
    display: block;
  }
}


/*****congrats****/
/* .mgame-section {
  position: relative;
  background: #f8f8f8;
  padding: 1rem;
} */

/* The left and right boxes in your game */
/* .mgame-bottom-box {
  display: flex;
  gap: 1rem;
} */

/* Left box: sets + <h2> */
/* .mgame-left-box {
  background: #fff;
  flex: 1;
  padding: 1rem;
  border: 1px solid #ccc;
} */

/* Right box: the image grid */
/* .mgame-right-box {
  background: #fff;
  flex: 1;
  padding: 1rem;
  border: 1px solid #ccc;
} */

/* The "Congratulations" container */
/* Style the congrats overlay to cover the images-grid exactly */
.mgame-congrats {
  position: absolute;
  /* top: 0;
  left: 0; */
  width: 27%;
  height: 65%;
  /* Center the content if desired */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Semi-transparent background overlay */
  background: url('images/game/Frame\ 1400002979.jpg') no-repeat center center;
  background-size: cover;
  z-index: 10;
}

/* Optionally style the inner content */
.congrats-content {
  color: #000000;
  text-align: center;
  padding: 1rem;
}
.download-button {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
}