/* 5) Tripple loop sections /////////////////////////////////////////////*/
.tripleLoopSection{padding:60px 4% 80px;}

.tripleLoopSection .containerDiv{
     display:flex;
     gap:5em;
     margin-top:3em;
     justify-content:center;
     width:100%;
}

.tripleLoopSection .headingContent .headingHeadImage{display:none;}

.tripleLoopSection .containerDiv .headImage{
    max-width: 29.125em;
    max-height: 29.375em; 
}

.tripleLoopSection .containerDiv .rightBox{
    display:flex;
    flex-direction:column;
    gap:4.375em;
}

.tripleLoopSection .containerDiv .rightBox .loopDetails{
display: grid;
grid-template-columns:1fr 4fr;
position:relative;
gap:2.25em;
border-left:0.01875em solid #DADCE0;
}
 .tripleLoopSection .tect-size{
    font-size: 2.3rem;
 }      
.tripleLoopSection .containerDiv .rightBox .loopDetails .numbering{
color:#72757f;
font-family: 'Montserrat', sans-serif;
margin-left:1.875em;
align-self:center;
font-size: clamp(0.75rem, 0.679rem + 0.357vw, 1rem);
font-weight: 400;
line-height: 1.75em;
text-align:center;
}

.tripleLoopSection .containerDiv .rightBox .loopDetails .numbering span{
color:#72757f;
font-family: 'Montserrat', sans-serif;
font-size: clamp(2.25rem, 2.179rem + 0.357vw, 2.5rem);
font-weight: 700;
}

.tripleLoopSection .containerDiv .rightBox .loopDetails ul{
display:flex;
flex-direction:column;
gap:0.25em;
}

.tripleLoopSection .containerDiv .rightBox .loopDetails ul li p{
color:#69696e;
/* max-width:35.625em; */
margin-bottom: 0px;
}

.tripleLoopSection .containerDiv .rightBox .loopDetails:hover::after{
content:"";
position:absolute;
width:0.4375em;
height:100%;
background:rgb(164, 164, 164);
border-top-right-radius: 0.625em;
border-bottom-right-radius:0.625em;
}

.tripleLoopSection .containerDiv .rightBox .loopDetails:hover h1{color:#202124;}
.tripleLoopSection .containerDiv .rightBox .loopDetails:hover h1 span{color:#202124;}
.tripleLoopSection .containerDiv .rightBox .loopDetails:hover ul li p{color:#101011;}
#loop1, #loop2, #loop3{
  display:block
}
#loop1S, #loop2S, #loop3S{
  display:none
}
@media only screen and (max-width:1118px) {
    .tripleLoopSection .containerDiv .rightBox{gap:3.375em;}
}
@media only screen and (max-width:1085px) {
     .tripleLoopSection .tect-size{
    font-size: 1.8rem;
 }  
   .handwritten-text::after {
    
      height: 2px;
     
    }
    .tripleLoopSection{padding:45px 8% 100px;}

    .tripleLoopSection .containerDiv .rightBox{gap:3.375em;}

    .tripleLoopSection .containerDiv .headImage{display:none;}

    .tripleLoopSection .headingContent{
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .tripleLoopSection .headingContent h1{
        position:relative;
        text-align: left;
        padding-left:1.25em;
    }

    .tripleLoopSection .headingContent h1::after{
        content:"";
        position:absolute;
        width:0.0625em;
        height:100%;
        background:#DADCE0;
        opacity:60%;
        top:0;
        left:0;
    }
  
    .tripleLoopSection .headingContent .headingHeadImage{
        display:block;
        /* max-width:clamp(4.688rem, 4.33rem + 1.786vw, 5.938rem);;; */
        width:150px;
        height:auto;
        margin-right:1.25em;;
        margin:0px auto 20px auto;
    }
    .tripleLoopSection .containerDiv .rightBox{
       margin-right:auto;
    }
}
@media only screen and (max-width:430px) {
    .tripleLoopSection .headingContent{
        margin:0 auto;
        max-width:50%;
    }
    
}
@media only screen and (max-width: 768px) {
 ul li p.sectionParagraph{
    font-size: 15px !important;
  }
  p.sectionParagraph span{
    font-size: 15px !important;
  }

}
@media only screen and (max-width: 425px) {
    .tripleLoopSection .containerDiv .rightBox .loopDetails {
        grid-template-columns: 1fr; /* Change from 1fr 4fr to single column */
        gap: 1.5em; /* Adjust gap as needed */
    }
    
    .tripleLoopSection .containerDiv .rightBox .loopDetails .numbering {
        margin-left: 0; /* Remove left margin since it's now stacked */
        text-align: left; /* Adjust alignment if needed */
         padding-left: 1.875em; 
        white-space: nowrap; 
        border-left:0.11875em solid #DADCE0;
    }
    .tripleLoopSection .containerDiv .rightBox .loopDetails{
border-left:none;
}
.tripleLoopSection .containerDiv .rightBox .loopDetails ul{
margin-left:20px ;
margin-right: 20px;
}
#loop1, #loop2, #loop3{
  display:none
}
#loop1S, #loop2S, #loop3S{
  display:block
}
}