body {
    font-family: Work sans;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
 
}
.about-us-div {
   
    width: 90%;

    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    align-items: center;
    margin: 0 auto;
    padding: 10vh 0px 10vh 0px;
}
.about-us {
    width: 50%;
}
.images {
    width: 40%;
    height: 474px;
    top: 197px;
    left: 950px;
    gap: 0px;
    border-radius: 12px;
    opacity: 0px;
}
.about-us h1 {
    color: #FF9900;
    font-size: 36px;
    font-weight: 600;
    line-height: 42.23px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.about-us #p1 {
    color: #333333;
    line-height: 1.6;
    font-size: 28px;
    font-weight: 400;
    line-height: 32.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #040404;
    width: 661px;
    height: 132px;
    gap: 0px;
    opacity: 0px;
}
.about-us #p2 {
    font-size: 20px;
    font-weight: 300;
    line-height: 23.46px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #1E1E1E;
    margin-right: 7vw;
    margin-bottom: 50px;
    width: 572px;
    height: 184px;
}
.about-us p span {
    color: #FF0000;
}
.about-us #s2 {
    font-weight: 700;
}
.join-button {
    background: linear-gradient(114.08deg, #F6A61F 0%, #FF8700 101.88%);
    width: 199px;
    height: 61px;
    padding: 14px 30px 14px 30px;
    gap: 20px;
    border-radius: 12px;
    opacity: 0px;
    color: #FFFFFF;
    font-size: 28px;
    font-weight: 400;
    line-height: 32.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    text-decoration: none;
}
.join-button:hover {
    transition: 0.5s;
    text-decoration: none;
    box-shadow: 0px 3px 8px 0px #00000040;
}
#rectangle12 {
    position: absolute;
    width: 474px;
    height: 474px;
    top: 150px;
    right: 4.5%;
    gap: 0px;
    border-radius: 12px;
    opacity: 0px;
}
#rectangle13 {
    position: absolute;
    /* box-shadow: 0px 2px 6px 0px #00000026; */
    width: 376px;
    height: 246px;
    top: 400px;
    right:15.5%;
    gap: 0px;
    border-radius: 10px;
    opacity: 0px;
}
#rectangle14 {
    position: absolute;
    /* box-shadow: 0px 2px 6px 0px #00000026; */
    width: 376px;
    height: 246px;
    top: 127px;
    right:1.2%;
    gap: 0px;
    border-radius: 10px;
    opacity: 0px;
}

.features-container {
    display: flex;
     flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    width: 90%;
    height: 511px;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 20px;
    padding: 15vh 0px 10vh 0px;

}
.header-feature {
    display: flex;
    justify-content: space-evenly;
    align-items:flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
}
.header {
    text-align: center;
    padding: 20px;
    position: relative;
    margin-right: 150px;
}
.header #rectangle12a {
    max-width: 474px;
    max-height: 474px;
    border-radius: 12px;
    opacity: 0px;
}
.header #sectionimg {
    position: absolute;
    max-width: 434px;
    max-height: 471px;
    top: 56px;
    left: 36px;
    gap: 0px;
    border-radius: 10px;
    opacity: 0px;
    /* box-shadow: 0px 2px 6px 0px #00000026; */
}
.features {
    position: absolute;
    width: 40%;
    height: 476px;
    gap: 20px;
    opacity: 0px;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 40px;
    right: 3%;
}
.features h2 {
    background: linear-gradient(114.08deg, #F6A61F 0%, #FF8700 101.88%);
    width: 154px;
    height: 42px;
    font-size: 36px;
    font-weight: 600;
    line-height: 42.23px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.features #p3 {
    max-width: 572px;
    max-height: 66px;
    gap: 0px;
    opacity: 0px;
    font-size: 28px;
    font-weight: 400;
    line-height: 32.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #141414;
}
.features #p4 {
    max-width: 572px;
    max-height: 115px;
    top: 148px;
    gap: 0px;
    opacity: 0px;
    color: #1E1E1E;
    font-size: 20px;
    font-weight: 300;
    line-height: 23.46px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
#p4 strong {
    color: #FF0000;
}
.features #p5 {
    max-width: 572px;
    color: #1E1E1E;
    height: 92px;
    top: 303px;
    gap: 0px;
    opacity: 0px;
    font-size: 20px;
    font-weight: 300;
    line-height: 23.46px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.learn-more {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(114.08deg, #F6A61F 0%, #FF8700 101.88%);
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 100px;
    font-size: 28px;
    font-weight: 400;
    line-height: 32.84px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    background: linear-gradient(114.08deg, #F6A61F 0%, #FF8700 101.88%);
}
.learn-more:hover {
    transition: 0.5s;
    text-decoration: none;
    box-shadow: 0px 3px 8px 0px #00000040;
}
.benefit-container {
    width: 100%;
    margin: 0 auto;
    background-color: #FFFFFF;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 829.7px;
    border-radius: 10px;
    padding: 0px 0px 0.3px 0px;
    gap: 50px;
    border: 0.5px solid #D6D6D6;
}
.benefits {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0;
    width: 80%;
    border-radius: 10px;
    margin-top: 10vh;
}
.benefit-cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 10vh;
}
.benefits h2 {
    width: 222px;
    height: 42px;
    /* top: 637px;
    left: 478px; */
    font-size: 36px;
    font-weight: 600;
    line-height: 42.23px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #FF9900;
    margin: 0 auto;
    margin-bottom: 20px;
}
.benefits #p6 {
    width: 938px;
    font-size: 28px;
    font-weight: 400;
    line-height: 32.84px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #040404;
    margin-bottom: 20px;
    margin: 0 auto;
}
.benefit-card:hover {
    background-color: #F6A61F; 
    box-shadow: 0px 2px 6px 0px #00000026;
}
.benefit-card:hover h1,
.benefit-card:hover h2,
.benefit-card:hover p
{
    color: #FFFFFF; /* Change to desired text color on hover */
}
.benefit-card:hover a {
    color: black;
}
.benefit-card {
    border: 0.5px solid #D6D6D6;
  background: #FFFFFF;
    width: 28%;
   max-height:265.78px;
    padding: 20px;
    border-radius: 10px ;
    margin-block:10px ;
    transition: background-color .7s ease-in-out, color .7s ease-in-out;
}
.card-header  {
    position: relative;
}
.card-header img {
    bottom: 12px;
    left: 6px;
    position: absolute;
}
.card-header h1 {
    font-size: 2em;
    margin: 0;
    color: #040404;
    width: 54px;
    height: 54px;
    gap: 0px;
    opacity: 0px;
}
.card-body h2 {
    font-size: 1.5em;
    margin: 10px 0;
    color: #040404;
    font-size: 20px;
    font-weight: 600;
    line-height: 23.46px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    width: 100%;
    height: 23px;
    gap: 0px;
    opacity: 0px;
}
.card-body p {
    font-size: 1em;
    margin: 10px 0;
    color: #040404;
    width: 100%;
    height: 126px;
    font-size: 18px;
    font-weight: 300;
    line-height: 21.11px;
    letter-spacing: 0.005em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
.card-body a {
    color:#E2363D;
    text-decoration: underline;
    font-weight: bold;
font-size: 18px;
font-weight: 300;
line-height: 21.11px;
letter-spacing: 0.005em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
text-decoration: none;
}
.card-body a:hover {
    color: #FF0000;
    text-decoration: none;
  }
.paragraph-content {
    max-height: 111px; /* Adjust based on your design */
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.paragraph-content.expanded {
    max-height: 400px; /* Adjust based on your design */
    overflow:  overlay;
}
/* WebKit browsers (Chrome, Safari) */
.paragraph-content.expanded::-webkit-scrollbar {
    width: 8px; /* Adjust the width of the scrollbar */
}
.paragraph-content.expanded::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}
.paragraph-content.expanded::-webkit-scrollbar-track {
    background: #F1F1F1; /* Color of the scrollbar track */
}
.paragraph-content.expanded::-webkit-scrollbar-track {
    background: transparent; /* Make the scrollbar track transparent */
}
/* Firefox */
.paragraph-content.expanded {
    scrollbar-width: thin; /* Makes the scrollbar thinner */
    scrollbar-color: #888 #F1F1F1; /* Thumb color and track color */
}
.read-more {
    color: #E2363D;
    text-decoration: underline;
    font-weight: bold;
    font-size: 18px;
    font-weight: 300;
    line-height: 21.11px;
    letter-spacing: 0.005em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    cursor: pointer;
}
.read-more:hover {
    color: #FF0000;
    text-decoration: none;
}




@media(max-width:1181px) {
    .about-us-div {
   
        width: 100%;
        display:block;
        padding: 0px 0px;
    }
    .about-us {
        width: 100%;
    }
    .images {
  position: relative;
  width: 100%;
  top: auto;
  left: auto;
  max-width: 700px; 
  margin: 0 auto; 
  height: auto;
}

#rectangle12 {
  position: static;
  width: 60%;
  height: 237px;
  margin: 0 auto;
  margin-top: 50px;
  display: block;
}

#rectangle13,
#rectangle14 {
  position: absolute;
  width: 188px;
  height: 123px;
  right: auto;
  max-width: 60%;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Position the first image (meeting room) */
#rectangle13 {
  top: -15px;
  left: 50%;
  transform: translateX(-20%);
}

/* Position the second image (call center) slightly lower */
#rectangle14 {
  bottom: -15px;
  left: 50%;
  transform: translateX(-80%);
}

    .about-us h1 {
        font-family: Work Sans;
        font-size: 28px;
        font-weight: 700;
        line-height: 32.84px;
        letter-spacing: 0.01em;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        
    }
    .about-us #p1 {
width:95% ;
margin: 0 auto;
font-family: Work Sans;
font-size:19px;
font-weight: 500;
line-height: 23.46px;
letter-spacing: -0.02em;
text-align: left;
height: auto;
text-underline-position: from-font;
text-decoration-skip-ink: none;

    }
    .about-us #p2 {
        font-family: Work Sans;
        width:95% ;
        margin: 20px auto;
        font-size: 16px;
        font-weight: 400;
        line-height: 23.46px;
        text-align: left;
        height: auto;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

        
    }
    .about-us p span {
        color: #FF0000;
    }
    .about-us #s2 {
        font-weight: 700;
    }
    .join-button {
        background: linear-gradient(114.08deg, #F6A61F 0%, #FF8700 101.88%);
        display: block;
        margin: 0 auto;
        width:80px;
        height: 19px;
        padding: 10px 15px 10px 15px;
        gap: 10px;
        border-radius: 12px;
        opacity: 0px;
        color: #FFFFFF;
        font-family: Work Sans;
        font-size: 16px;
        font-weight: 500;
        line-height: 18.77px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }
    .join-button:hover {
        transition: 0.5s;
        text-decoration: none;
        box-shadow: 0px 3px 8px 0px #00000040;
    }
    /* #rectangle12 {
        position: relative;
        width: 237px;
        height: 237px;
        top:30px;
        right:-7%;
        gap: 0px;
        border-radius: 12px;
        opacity: 0px;
    }
    #rectangle13 {
        position:relative;
        width: 188px;
        height: 123px;
        top:-50px;
        right:18.5%;
        gap: 0px;
        border-radius: 10px;
        opacity: 0px;
    }
    #rectangle14 {
        position:relative;
        width: 188px;
        height: 123px;
        top: -390px;
        right:-65%;
        gap: 0px;
        border-radius: 10px;
        opacity: 0px;
    } */
    .features-container {
        display: block;
        width: 99%;
        margin: 0 auto;
        background-color: #FFFFFF;
        padding:0;
        height: auto;

    
    }
    .header-feature {
        display: flex;
        flex-direction: column;
        
    }
    .header {
        order: 2;
        padding: 0;
        position: static;
        margin: auto;
    }
    .header #rectangle12a {
        width:237px;
        height: 237px;
        border-radius: 12px;
        opacity: 0px;
    }
    .header #sectionimg {
        position: static;
        width: 217px;
        height: 235px;
        margin-left: -228px;
        border-radius: 10px;
        opacity: 0px;
        
    }
    .features {
        position:static;
        width:100%;
        height: auto;
        order: 1;
        margin-top: 50px;
        opacity: 0px;
        padding:5px;
        border-radius: 10px;
        
    }
    .features h2 {
        background: linear-gradient(114.08deg, #F6A61F 0%, #FF8700 101.88%);
        width: 123px;
        height: 33px;
        gap: 0px;
        opacity: 0px;
        font-family: Work Sans;
        font-size: 28px;
        display: block;
        margin: 0 auto;
        font-weight: 700;
        line-height: 32.84px;
        letter-spacing: 0.01em;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .features #p3 {
        width:90%;
        margin: 0 auto;
        font-family: Work Sans;
        font-size: 20px;
        font-weight: 500;
        line-height: 23.46px;
        letter-spacing: -0.02em;
        text-align: left;
        margin-top: 20px;
        max-width: none;
        height: auto;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        
    }
    .features #p4 {
        width: 90%;
        margin: 0 auto;
        gap: 0px;
        opacity: 0px;
        color: #1E1E1E;
        font-size: 20px;
        font-weight: 300;
        line-height: 23.46px;
        text-align: left;
        height: auto;
        max-width: none;
        max-height: none;
        margin-top: 20px;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }
    #p4 strong {
        color: #FF0000;
    }
    .features #p5 {
        width: 105%;
        color: #1E1E1E;
        height: 92px;
        margin-top:120px;
        gap: 0px;
        opacity: 0px;
        font-size: 20px;
        font-weight: 300;
        line-height: 23.46px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }
    
    .learn-more {
        display: inline-block;
        padding: 10px 20px;
        background: linear-gradient(114.08deg, #F6A61F 0%, #FF8700 101.88%);
        color: #FFFFFF;
        text-decoration: none;
        border-radius: 5px;
        width: 115px;
        display: block;
        margin: 0 auto;
        margin-top: 20px;
        font-family: Work Sans;
        font-size: 16px;
        font-weight: 500;
        line-height: 18.77px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        
    }
    .benefit-container {
        width:90%;
        margin: 0 auto;
        background-color: #FFFFFF;
        padding: 0px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        height: 829.7px;
        margin-top: 1400px;
        border-radius: 10px;
        padding: 0px 0px 0.3px 0px;
        gap:10px;
        border: 0.5px solid #D6D6D6;
    }
    .benefits {
        display: block;
        width:90%;
        border-radius:0px;
        margin-top: 20px;
    }
    .benefit-cards {

        justify-content: space-evenly;
        margin: 10px auto;
        padding-top:5vh;
    }
    .benefits h2 {
width:177px;
font-family: Work Sans;
font-size: 28px;
font-weight: 700;
line-height: 32.84px;
letter-spacing: 0.01em;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
margin: 0 auto;
margin-bottom: 20px;
    }
    .benefits #p6 {
        width:104%;
        font-family: Work Sans;
        font-size: 16px;
        font-weight: 400;
        line-height: 18.77px;
        letter-spacing: 0.005em;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        
    }
    .benefit-card:hover {
        background-color: #F6A61F; /* Change to desired background color on hover */
        box-shadow: 0px 2px 6px 0px #00000026;
    }
    .benefit-card:hover h1,
    .benefit-card:hover h2,
    .benefit-card:hover p
    {
        color: #FFFFFF; /* Change to desired text color on hover */
    }
    .benefit-card:hover a {
        color: black;
    }
    .benefit-card {
        min-width: 300px;
        height: 186.05px;
        gap: 5.6px;
        border-radius: 7px ;
        opacity: 0px;
        
     border: 0.5px solid #D6D6D6;
     background: #FFFFFF;
   
     margin-block:10px ;
     transition: background-color .7s ease-in-out, color .7s ease-in-out;
    }
    .card-header  {
        position: relative;
    }
    .card-header img {
        bottom: 2px;
        left: 6px;
        width: 37px;
        height: 37px;
        position: absolute;
    }
    .card-header h1 {
        font-family: Work Sans;
        font-size: 25.2px;
        font-weight: 600;
        line-height: 29.56px;
        text-align: right;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        margin: 0;
        color: #040404;
        width: 27px;
        height: 30px;
        gap: 0px;
        opacity: 0px;
    }
    .card-body h2 {
        font-size:14px;
        margin: 10px 0;
        color: #040404;
        font-weight: 400;
        line-height: 16.42px;      
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        width:90%;
        height:16px;
        gap: 0px;
        opacity: 0px;
    }
    .card-body p {
        margin: 10px 0;
        color: #040404;
        width:100%;
        height: 90px;
        font-family: Work Sans;
font-size: 14.6px;
font-weight: 300;
line-height: 14.78px;
letter-spacing: 0.005em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;

    }
    .card-body a {
        color:#E2363D;
        text-decoration: underline;
        font-weight: bold;
    font-size: 18px;
    font-weight: 300;
    line-height: 21.11px;
    letter-spacing: 0.005em;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    text-decoration: none;
    }
    


}