/*features*/
.main-features{
    padding-top: 5%;
    padding-bottom: 5%;
  }
  /* Container for the two columns */
  .features-container {
    width: auto;
    height: auto;
    margin-top: 5%;
    margin-bottom: 5%;
  }
  
  .board {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    overflow: hidden; /* Prevents content from leaking into other fields */
  }
  
  /* Styles for the text column */
  .features.text-column {
    width: 50%; /* Adjust percentage as needed */
    padding-right: 20px;
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    text-align: left; /* Default alignment */
  }
  
  /* Header and text styles */
  .text-uppercase {
    text-transform: uppercase;
  }
  
  .fw-bold {
    font-weight: bold;
  }
  
  .l7-theme-text-color {
    color: #4170FF; 
    font-size: 20px;
  }
  
  .features-right-header {
    color: white;
    font-size: 60px;
    margin: 10px 0;
    margin-left: 4.0vw;
  }
  
  .features-right-description {
    color: #9499B4;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.5; 
    max-height: 3em; 
    margin-left: 2.5w;
  }
  
  /* Styles for the image column */
  .features.image-column {
    width: 60%; 
    display: flex;
    justify-content: flex-start; 
    align-items: flex-start; 
    box-sizing: border-box; 
  }
  
  
  .text-box {
    margin-top: 20%;
  }
  
  
  .custom-image {
    max-width: 100%; 
    width: 90%;
    height: auto; 
    display: block;
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: crisp-edges; 
  }
  
  
  @media only screen and (max-width: 768px) {
    .board {
      flex-direction: column; 
      align-items: center; 
      padding: 20px;
    }
  
    .features.text-column {
      width: 100%; 
      padding-right: 0;
      text-align: center; 
      margin: 0; 
      margin-top: -100px;
      margin-left: 25%;
      margin-right: 20%;
      
    }
  
    .features-right-header {
      margin-left: 0; 
      text-align: left;
      margin-top: 0;
      margin-bottom: 0%;
      font-size: 40px;
    }
  
    .features-right-description {
      font-size: 16px; 
      max-height: none; 
      text-align: left;
      margin-left: 4%;
      margin-top: 0;
    }
  
    .features.image-column {
      width: 100%; 
      display: flex;
      justify-content: center; 
      align-items: center; 
      margin-top: 2px; 
     
    }
  
    .text-box{
      align-items: center;
      margin-top: 25%;
    }
  
    .l7-theme-text-color {
      color: #4170FF; 
      font-size: 16px;
      text-align: center;
      margin-right: 22%;
      margin-bottom: 0;
    }
  }
  
  /*features2*/
  /* Container for the two columns */
  .features-container2 {
    width: auto;
    height: auto;
    margin-top: 5%;
    margin-bottom: 5%;
    max-width: 90%;
  }
  
  .board2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    overflow: hidden; /* Prevents content from leaking into other fields */
  }
  
  /* Styles for the image column (now on the left and aligned to the end) */
  .features2.image-column2 {
    width: 60%; /* Adjust percentage as needed */
    padding-right: 20px;
    box-sizing: border-box; 
    display: flex;
    justify-content: flex-end;  /* Aligns image to the end of the column */
    align-items: flex-end;      /* Aligns image to the bottom of the column */
  }
  
  /* Styles for the text column (now on the right and aligned to the start) */
  .features2.text-column2 {
    width: 40%; 
    text-align: left; 
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns text to the start of the column */
    align-items: flex-start;
  }
  
  /* Header and text styles */
  .text-uppercase2 {
    text-transform: uppercase;
  }
  
  .fw-bold2 {
    font-weight: bold;
  }
  
  .l7-theme-text-color2 {
    color: #4170FF; 
    font-size: 20px;
    letter-spacing: 3px;
  }
  
  .features-right-header2 {
    color: white;
    font-size: 3.125vw;
    margin: 10px 0;
  }
  
  .features-right-description2 {
    color: #9499B4;
    margin-bottom: 20px;
    font-size: 1.042vw;
    line-height: 1.5; 
    max-height: 3em; 
    margin-top: 5%;
  }
  
  .text-box2 {
    margin-top: 30%;
  }
  
  .custom-image2 {
    max-width: 100%; 
    width: 90%;
    height: auto; 
    display: block;
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: crisp-edges; 
  }
  
  /* Responsive Design */
  @media only screen and (max-width: 768px) {
    .board2 {
      flex-direction: column-reverse; /* Places text above the image */
      align-items: center; 
    }
  
    .features2.image-column2 {
      width: 100%; 
      padding-right: 0;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      padding-left: 10%;
    }
  
    .features2.text-column2 {
      width: 100%; 
      text-align: center;
      margin-top: 15%;
      margin-top: -100px;
      margin-left: 5%;
      margin-right: 5%;
    }
  
    .features-right-header2 {
      text-align: left;
      margin-top: 0;
      margin-bottom: 0%;
      font-size: 40px;
    }
  
    .features-right-description2 {
      font-size: 14px; 
      max-height: none; 
      text-align: left;
      margin-top: 5%;
      line-height: 1.5;
    }
  
    .text-box2 {
      align-items: center;
      margin-top: 30%;
    }
  
    .l7-theme-text-color2 {
      color: #4170FF; 
      font-size: 16px;
      text-align: left;
      margin-bottom: 0;
    }
  }

  .features-container3 {
    width: auto;
    height: auto;
    margin-bottom: 10%;
    margin-top: 10%;
    max-width: 90%;
    margin-left: 2%;
}

.board3 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    overflow: hidden; /* Prevents content from leaking into other fields */
}

/* Styles for the video column (aligned to the end) */
.features3.video-column3 {
    width: 50%; /* Adjust percentage as needed */
    padding-right: 20px;
    box-sizing: border-box; 
    display: flex;
    justify-content: flex-end;  /* Aligns video to the end of the column */
    align-items: flex-end;      /* Aligns video to the bottom of the column */
}

/* Styles for the text column (aligned to the start) */
.features3.text-column3 {
    width: 50%;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns text to the start of the column */
    align-items: flex-start;
}

/* Header and text styles */
.text-uppercase3 {
    text-transform: uppercase;
}

.fw-bold3 {
    font-weight: bold;
}

.l7-theme-text-color3 {
    color: #4170FF;
    font-size: 20px;
    letter-spacing: 3px;
}

.features-right-header3 {
    color: white;
    font-size: 2.820vw;
    margin: 10px 0;
}

.features-right-description3 {
    color: #9499B4;
    margin-bottom: 20px;
    font-size: 1.042vw;
    line-height: 1.5;
    max-height: 3em;
    margin-top: 5%;
}

.text-box3 {
    margin-top: 5%;
    margin-left: 5%;
}

/* Video styling (responsive like the image) */

.custom-video3 { 
  width: 100%;
  max-width: 90%; /* Ensures video doesn't exceed container size */
  height: 400px; /* Keeps aspect ratio dynamically */
  display: block;
  border-radius: 20px;
}


/* Responsive Design */
@media only screen and (max-width: 768px) {
  .board3 {
      flex-direction: column-reverse; /* Places text above the video */
      align-items: center;
  }

  .custom-video3 {
      max-width: 100%;
      width: 100%;
      height: 400px; /* Ensures proper scaling on small screens */
  }

  iframe.custom-video3 {
    -webkit-transform: translateZ(0); /* Fixes rendering issues */
    transform: translateZ(0);
    aspect-ratio: 16/9; /* Ensures the video maintains a 16:9 ratio */
}

    .features3.video-column3 {
        width: 100%;
        margin-left: 5%;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .features3.text-column3 {
        width: 100%;
        text-align: center;
        padding-right: 5%;
        margin-top: 15%;
        margin-top: -100px;
    }

    .features-right-header3 {
        text-align: left;
        margin-top: 0;
        margin-bottom: 0%;
        font-size: 40px;
    }

    .features-right-description3 {
        font-size: 16px;
        max-height: none;
        text-align: left;
        margin-top: 5%;
        line-height: 1.5;
    }

    .text-box3 {
        align-items: center;
        margin-top: 30%;
    }

    .l7-theme-text-color3 {
        color: #4170FF;
        font-size: 16px;
        text-align: left;
        margin-bottom: 0;
    }
}

.features3 {
    margin-top: 5%;
    margin-bottom: 5%;
}


.tech-conatiner{
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
}

.MS-container{
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 10%;
  margin-top: 10%;
}


.container5 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5%;
}

.box {
  flex: 1 1 50%;
  padding: 20px;
}


/* Global Heading Styling */
#heading {
  color: #ffffff;
  margin: 0 0 10px 0;
  font-weight: bold;
}

/* Global Description Styling */
#description {
  font-size: 16px;
  margin: 0;
  color: #9499B4;
  line-height: 1.5;
  font-weight: bold;
  padding-right: 30px;
}

/* Mobile view: stack boxes */
@media (max-width: 768px) {
  .box {
      flex: 1 1 100%;
  }
}

.box-container{
  margin-top: 5%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
}

/* Hide <br> tags on mobile view */
@media only screen and (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
}



.features4-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 90%;
  padding: 20px;
}

/* Adjust the width of the columns here */
.features4-left {
  flex: 0 0 45%; /* Adjust this value to control the left column width */
  padding: 20px;
}

/* Right column width adjustable */
.features4-right {
  flex: 0 0 55%; /* Adjust this value to control the right column width */
  display: flex;
  align-items: center;
  justify-content: center; /* Center-aligns the image horizontally */
  padding: 20px;
}

#features4-image {
  max-width: 100%; /* Set to 100% to make it responsive */
  width: auto; /* Adjust the width automatically */
  height: auto; /* Default height, adjust to fit specific size */
  display: block; /* Display block to apply margin auto */
  margin-left: 10%;
}

/* Text Styling */
#features4-text-1 {
  margin-bottom: 10px;
  color: #4170FF; 
  font-size: 20px;
  letter-spacing: 3px;
}

#features4-text-2 {
  color: white;
  font-size: 2.917vw;
  margin-bottom: 0.938vw;
}

#features4-text-3 {
  font-size: 1.042vw;
  line-height: 1.5;
  color: #9499B4;
}

.text-box4 {
  margin-top: 30%;
}

@media (max-width: 768px) {
  .features4-container {
    flex-direction: column;
  }

  .features4-column {
    flex: 1 1 100%;
    padding: 10px;
  }

  #features4-text-1 {
    font-size: 16px; /* Adjust text size for smaller screens */
    margin-bottom: 8px;
    color: #4170FF; 
    letter-spacing: 2px;
  }
  
  #features4-text-2 {
    font-size: 40px; /* Adjust text size for smaller screens */
    margin-bottom: 15px;
    color: white;
  }
  
  #features4-text-3 {
    font-size: 14px; /* Adjust text size for smaller screens */
    line-height: 1.4;
    color: #9499B4;
  }

  #features4-image {
    width: 100%; /* Full width in mobile view */
    height: auto;
    margin: 0 auto;
  }
}

.features5-container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 90%;
  padding: 20px;
}

/* Adjust the width of the columns here */
.features5-left {
  flex: 0 0 50%; /* Adjust this value to control the left column width */
  display: flex; /* To center the image within the column */
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Right column width adjustable */
.features5-right {
  flex: 0 0 50%; /* Adjust this value to control the right column width */
  padding: 20px;
}

#features5-image {
  max-width: 100%; /* Set to 100% to make it responsive */
  width: 100%; /* Default width, adjust to fit specific size */
  height: auto; /* Default height, adjust to fit specific size */
  display: block; /* Center-aligns the image block */
  margin: 0 auto; /* Center-aligns the image */
}

/* Text Styling */
#features5-text-1 {
  margin-bottom: 10px;
  color: #4170FF; 
  font-size: 20px;
  letter-spacing: 3px;
}

#features5-text-2 {
  color: white;
  font-size: 56px;
  margin-bottom: 20px;
}

#features5-text-3 {
  font-size: 18px;
  line-height: 1.5;
  color: #9499B4;
}

.text-box5 {
  margin-top: 25%;
}

@media (max-width: 768px) {
  .features5-container {
    flex-direction: column;
  }

  .features5-left {
    order: 2; /* Move image column to the bottom in mobile view */
    flex: 1 1 100%;
    padding: 10px;
  }

  .features5-right {
    order: 1; /* Move text column to the top in mobile view */
    flex: 1 1 100%;
    padding: 10px;
  }

  #features5-text-1 {
    font-size: 16px; /* Adjust text size for smaller screens */
    margin-bottom: 8px;
    color: #4170FF; 
    letter-spacing: 2px;
  }
  
  #features5-text-2 {
    font-size: 40px; /* Adjust text size for smaller screens */
    margin-bottom: 15px;
    color: white;
  }
  
  #features5-text-3 {
    font-size: 14px; /* Adjust text size for smaller screens */
    line-height: 1.4;
    color: #9499B4;
  }

  #features5-image {
    width: 100%; /* Full width in mobile view */
    height: auto;
  }
}

.desc2{
  max-width: 80%;
}

.technology-description2{
  color: #9499B4;
  text-align: center;
  margin-top: 1.563vw;
  font-size: 0.938vw;
  line-height: 1.4;
}

.visit{
  color: #9499B4;
  text-align: center;
  margin-top: 1.563vw;
  font-size: 1.050vw;
}

.techhead{
  font-size: 3.021vw;
  text-align: center;
  }
  
  .techdesc1 {
    color: #9499b4;
    text-align: center;
    margin-top: 1.563vw;
    font-size: 1.034vw;
  }

@media (max-width: 768px) {
  .technology-description2{
    font-size: 16px;
    text-align: left;
    margin-left: 21px;
    margin-top: 15px;
  }

  .visit{
    font-size: 16px;
    text-align: left;
    margin-left: 21px;
    margin-top: 15px;
  }

  .techhead{
    font-size: 40px;
    margin-left: 20px;
    text-align: left;
        
  }

  .techdesc1 {
    font-size: 14px;
    line-height: 1.4;
    color: #9499B4;
    text-align: left;
    margin-left: 20px;
    margin-top: 15px;
  }
}