/* 2) banner///////////////////////////////////////////// */
.containerDiv .bannerContainer{
    display:flex;
    justify-content:space-between;
    gap:2.5em;
    padding:150px 4% 60px;
    width:100%;
}
.containerDiv .bannerContainer .bannerContentBox 
{
    width: 100%;
}
.containerDiv .bannerContainer .bannerContentBox h1{
    color:rgba(52, 52, 52, 1);
    /* font-family: 'Montserrat', sans-serif; */
    font-size: clamp(1.125rem, 0.946rem + 0.893vw, 1.75rem);
    font-weight: 400;
    line-height: 1.6em;
}

.containerDiv .bannerContainer .bannerContentBox h1 span{
    /* font-size: clamp(1.5rem, 1.286rem + 1.071vw, 2.25rem); */
  font-size: clamp(1.25rem, 1.9rem + 1.9vw, 3.8rem);
    font-weight: 650;
    line-height: 1.6em;
}
.containerDiv .bannerContainer .bannerContentBox h1 span.italic {
  font-weight: 200;
  /* font-style: italic; */
  color: #999;
  display:inline
}
.hero-badge {
  display: inline-block;
  width: fit-content;
}

.hero-badge span {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 8px 16px;
  font-size: clamp(0.75rem, 1.1rem + 1.1vw, 2.2rem);
  color: #666;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.sectionParagraph.description-italic {
  line-height: 1.6;
  color: #555;
  /* font-style: italic; */
  font-weight: 300;
   text-align: justify;
  hyphens: auto;
font-size: clamp(1rem, 0.60rem + 0.60vw, 1.25rem);
}

.sectionParagraph.description-bold {
 
  font-weight: 500;
  color: #000;
font-size: clamp(1rem, 0.9rem + 0.9vw, 1.35rem);
}

.sectionParagraph.description-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sectionParagraph.description-highlight {
  font-weight: 500;
  color: #000;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
font-size: clamp(1rem, 0.60rem + 0.60vw, 1.25rem);
}

.sectionParagraph.description-text {
  color: #666;
  line-height: 1.6;
   text-align: justify;
  hyphens: auto;
  font-size: clamp(1rem, 0.60rem + 0.60vw, 1.25rem);
}
.divider-line {
  width: 64px;
  height: 1px;
  background-color: #ccc;
}
.containerDiv .bannerContainer .bannerContentBox .bannerDescription{
    margin-top:12px;
    padding-left:0.125em;
    /* max-width:52.75em; */
    
}

.containerDiv .bannerContainer .bannerImage1{display:none !important;}
.containerDiv .bannerContainer .bannerImage2{
    max-height:15.375em;

    /* margin-top:2.625em; */

  
}

  .bannerContentBox h1 span.handwritten-text::after {
    
     
       bottom: 10px !important;
     
    }




/* Mobile-specific styles for hero badge and divider */
@media (max-width: 1148px) {
  .hero-badge {
    display: flex;
    justify-content: center;
    width: 100%;
        text-align: center;
  }
  
  .divider-line {
    margin: 0 auto;
  }
  
  .hero-badge span {
    display: inline-block;
    text-align: center;
  }
}

@media (min-width: 1440px) {
.containerDiv .bannerContainer .bannerImage2{
    max-height:22.375em;
}
}
@media only screen and (max-width:1296px) {

    .containerDiv .bannerContainer .bannerImage2{max-height:18.375em;
        /* margin-top: 3em; */
    }
 .containerDiv .bannerContainer .bannerContentBox {
    width:100%
    }
}

@media only screen and (max-width:1250px) {

    .containerDiv .bannerContainer .bannerImage2{
        max-height:12.375em;
        margin-top:2.5em;
     
    }
}

@media only screen and (max-width:991px) {

    .containerDiv .bannerContainer .bannerContentBox h1{
        line-height: 1.7em;
        text-align:center;
    }

    .containerDiv .bannerContainer .bannerContentBox h1 span{line-height: 1.7em;;}
    .containerDiv .bannerContainer .bannerContentBox .bannerDescription{
        margin:16px auto 0;;
        padding-left:0;
        max-width:90%;
        
        
    }
    .containerDiv .bannerContainer .bannerContentBox .bannerDescription p{text-align:center;}

    .containerDiv .bannerContainer .bannerImage1{
        display:block !important;
        max-width:50%;;height:auto;
        margin:1.5625em auto;;
     }

    .containerDiv .bannerContainer .bannerImage2{display:none !important;}
}

@media only screen and (max-width:768px) {
     p.sectionParagraph span{
    font-size: 15px !important;
  }
p.sectionParagraph{
    font-size: 15px !important;
  }
    .containerDiv .bannerContainer{ padding:40px 8% 60px;margin-top:83px;;}
    .containerDiv .bannerContainer .bannerContentBox .bannerDescription{
       
        max-width:100%;
        
        
    }
}
@media only screen and (max-width:1085px) {
     .bannerContentBox h1 span.tect-size{
    font-size: 2rem !important;

 }  
   .bannerContentBox h1 span.handwritten-text::after {
    
      height: 2px !important;
       bottom: 12px !important;
     
    }
  }