h1 {
    color: #038CD0;
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
}
.stlHomeContent {
    width: 100%;
    margin: 0px auto 0px auto;
    font-family: Verdana;
    display: table;
}
    .stlHomeContent h1 {
        font-size: large;
        margin: 5px;
        padding-bottom: 5px;
        color: #666;
    }
.stlHomeProductsSection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: 35dvw;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 1%;
}
.stlHomeProductsText {
    width: 45dvw;
    text-align: center;
}
    .stlHomeProductsText h1 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .stlHomeProductsText p {
        color: #01354F;
        font-size: 1.5rem;
    }
    .stlHomeProductsText button {
        width: 14rem;
        height: 4rem;
        font-size: 1.75rem;
    }
button {
    border-radius: 0.5rem;
    border-width: 0;
    cursor: pointer;
    background: linear-gradient(90deg, #005B96 8.5434%, #0099DE 100%);
    color: #ffffff;
    text-align: center;
}
.stlHomeProductsImage{
    width: 35dvw;
}
    .stlHomeProductsImage img{
        width: 100%;
    }
    
.stlWhyChooseUsCardWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-position: bottom;    
    background-repeat: no-repeat;
    background-size: 100dvw 27dvw;
    padding-bottom: 1.1dvw;
}
.stlWhyChooseUsCards {
    width: 30dvw;
    padding: 1dvw;
    border-radius: 10px;
    box-shadow: 7px 7px 5px rgba(192, 190, 190, 0.75);
    background-image: url(../images/why_choose_us_cards_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    margin-left: 2%;
    margin-right: 2%;
}
    .stlWhyChooseUsCards img {
        width: 12dvw;
        display: block;
        margin: 1dvw auto 2dvw auto;
    }
    .stlWhyChooseUsCards h3 {
        font-size: 1.5rem;
        color: #01354F;
        font-family: 'open sans';
        font-weight: bold;
        height: 3rem;
    }
    .stlWhyChooseUsCards p {
        font-size: 1.1rem;
        color: #01354F;
        font-family: 'open sans';
        font-weight: normal;
        margin-bottom: 2dvw;
        /* height: 5rem; */
    }
    .stlWhyChooseUsCards button {
        width: 10rem;
        height: 3rem;
        font-size: 1.1rem;
        margin-bottom: 1dvw;
    }
    .stlClientStories {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 4dvw 2% 3dvw 2%;
  }
  
  .stlClientStoriesWrapper {
      width: 65dvw; 
      height: 30dvw;
      background-color: #008acf;
      border-radius: 10px;
      padding: 0.5% 0.5% 1% 1% !important;          /*change mobile*/
      margin-right: 0 !important;
      overflow: hidden;
  }
  
  .stlClientStoriesSlider {
      width: 105%; 
      height: 100%;
      margin-left: 5% !important;
  }
  
  .stlClientStoryCards {
      background-color: white;
      /* width: 34% !important; */
      height: 90% !important;
      /* margin: 2% 1.5% 2% 1.5% !important; */
      border-radius: 5px;
  }

@media (max-width: 768px) {
  /* General h1 styling -   can be overridden by more specific rules */
    h1 {
        font-size: 40px;
    }

    .stlHomeProductsSection {
        display: flex;          
        flex-direction: column; 
        align-items: center;    
        text-align: center;    
        margin: 8% 5%;
        background-size: cover;  
    }

    /* These wrappers will 'disappear' for layout, their children become flex items */
    .stlHomeProductsSection .stlHomeProductsText,
    .stlHomeProductsSection .stlHomeProductsImage {
        display: contents; 
    }

    .stlHomeProductsSection h1 { /* This targets the h1 that was inside .stlHomeProductsText */
        font-size: 30px; /* Adjusted for emphasis as title */
        order: 1;          /* Title first */
        width: 90vw;       /* Apply width here */
        max-width: 100%;
        margin-bottom: 15px; /* Space after title */
    }
    
    .stlHomeProductsSection img { /* This targets the img that was inside .stlHomeProductsImage */
        order: 2;          /* Image second */
        width: 90vw;       /* Apply width here */
        max-width: 100%;   /* Ensure it doesn't overflow */
        height: auto;      /* Maintain aspect ratio */
        display: block;    /* Good practice for images */
        margin-bottom: 15px; /* Space after image */
    }

    .stlHomeProductsSection p { /* This targets the p that was inside .stlHomeProductsText */
        font-size: 1.1rem; /* Your original font size */
        order: 3;          /* Paragraph third */
        width: 90vw;       /* Apply width here */
        max-width: 100%;
        margin-bottom: 20px; /* Space after paragraph, before button */
        line-height: 1.5;  /* Improve readability */
    }

    /* Button (BUTTON from within the original .stlHomeProductsText) */
    .stlHomeProductsSection button { /* This targets the button that was inside .stlHomeProductsText */
        order: 4;          
        width: 12rem;      
        height: 3rem;      /* Your original height */
        font-size: 1.25rem;/* Your original font size */
        /* 'order: 4;' from your original specific .stlHomeProductsText button rule now applies here */
    }
}
@media (max-width: 768px) {
  .stlWhyChooseUsCardWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-position: bottom;    
    background-repeat: no-repeat;
    background-size: 100dvw 27dvw;
    padding-bottom: 1.1dvw;
}
  .stlWhyChooseUsCardWrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 60px;
    padding: 40px;

  }

  .stlWhyChooseUsCards {   /*card aligment with slim body done*/
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 95%;
    max-width: 90%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 4dvw;
  }
  .stlWhyChooseUsCards p {
        margin-bottom: 6dvw;
        /* height: 5rem; */
    }
  .stlWhyChooseUsCards img {
    width: 40vw;
  }
/* this wraps the slider and dots */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}


.slide {             /* actual slide wrapper */
  width: 100%;
  height: auto;
  text-align: center;
  margin-bottom: 1rem; 
  display:none;            /* Add margin-bottom if for spacing */
}

/* Dots container */
.dots {
  text-align: center;
  margin-top: 10px;
  position: relative; 
}

/* Individual dots */
.dots span {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #cccccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Active dot */
.dots span.active {
  background-color: #e4e9ee;
}

@media (max-width: 768px) { /*done*/
  #divClientStories {
    padding: 0px 20px;
  }
  .stlClientStories {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4dvw 2% 3dvw 2%;
    flex-direction: column;
}

.stlClientStoriesWrapper {
  width: 95dvw; 
  height: 82dvw;
  background-color: #008acf;
  border-radius: 10px;
  padding: 3% 3% 1% 1% !important;
  margin-right: 5 !important;
  overflow:hidden;
  
}
.stlClientStoriesSlider {
  width: 105%; 
  height: 100%;
  margin-left: 5% !important;
  
}
  .stlClientStoriesSlider .swiper-slide {
    background-color: #fff;
    border-radius: 10px;
    width: 89% !important; /* one full + one half slide */
    height: 300px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    
  }
    
}
}