.heroSection {
  display: flex;
  padding: 32px 64px;
  align-items: flex-start;
  gap: 20px;
  background: #efedfa;
  align-self: stretch;
}


.writeUp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1 0 0;
  align-self: stretch;
}
.heroWrite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
.heroWrite h1 {
  color: var(--brand-Black-Shade-1, #2c2c31);
  align-self: stretch;
  /* material-theme/display/large */
  font-size: 57px;
  font-style: normal;
  font-weight: 300;
  line-height: 64px; /* 112.281% */
  letter-spacing: -0.25px;
}
.heroWrite p {
  color: var(--brand-Black-Shade-1, #2c2c31);

  /* material-theme/headline/medium */
  font-size: 28px;
  font-style: normal;
  font-weight: 300;
  line-height: 36px; /* 128.571% */
}
.mobile-heropictures{
display: none;
}
.heroCTA {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width:480px) {
  .heroCTA{
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .heroCTA button{
   width: 100%;
  }

}
.social-links {
  border-radius: 16px;
  background: var(--Schemes-On-Primary, #fff);
  display: flex;
  padding: 32px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  /* hero shadow */
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.social-links-tabs{
    display: none;
}
.heropictures {
  display: flex;
  width: 480px;
  padding: 28px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap;
  border-radius: 16px;
  background: var(--Schemes-On-Primary, #fff);

  /* hero shadow */
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1280px) {
    .social-links-tabs{
        display: flex;
padding: 32px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 16px;
background: var(--Schemes-On-Primary, #FFF);

/* hero shadow */
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.20);
    }
  .heroSection {
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    align-self: stretch;
  }
  .social-links {
    display: None;
  }
  .heroWrite {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
  }
  .heropictures {
    width: 100%;
    display: flex;
    height: fit-content;
    padding: 28px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    flex-wrap: wrap;
    border-radius: 16px;
    background: var(--Schemes-On-Primary, #fff);

    /* hero shadow */
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2);
  }
  .heropictures img {
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 16px;
    overflow-y: hidden;
    height: 250px;
  }
  .heroWrite h1 {
    line-height: 52px;
    font-size: 45px;
  }
  .heroWrite p {
    font-size: 24px;
    line-height: 32px;
  }
}
@media (max-width: 650px) {
  .heroSection {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    background: #efedfa;
  }
  .heroWrite {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
  }
  .writeUp h1 {
    color: #000;

    /* material-theme/display/small */
    
    font-size: 36px;
    font-style: normal;
    font-weight: 300;
    line-height: 44px; /* 122.222% */
  }
  .writeUp p {
    color: #000;

    /* material-theme/body/large */
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px; /* 150% */
    letter-spacing: 0.5px;
  }
  .heropictures{
  display: none;
  }
  .social-links-tabs{
    display: flex;
padding: 24px 16px;
justify-content: center;
align-items: center;
gap: 20px;
align-self: stretch;
border-radius: 16px;
background: var(--Schemes-On-Primary, #FFF);

/* hero shadow */
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.20);
  }
  .social-links-tabs img{
    height: 20px;
flex: 1 0 0;
width: 15px;
  }
  .mobile-heropictures{
    display: flex;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 16px;
background: var(--Schemes-On-Primary, #FFF);

/* hero shadow */
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.20);
  }
  .topImg, .bottomImg{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    width: 100%;
  }
  .topImg img{
    /* flex: 1 0 0; */
    width: 50%;
align-self: stretch;
  }
  .bottomImg img{
    width: 50%;
    align-self: stretch;
  }
}

/* About Us section */

.about-US{
  display: flex;
padding: 32px 64px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
}
.about-US h1{
  color: var(--brand-Black-Shade-1, #2C2C31);

/* material-theme/display/medium */
font-size: 45px;
font-style: normal;
font-weight: 300;
line-height: 52px; /* 115.556% */
}
.aboutUS-Content{
  display: flex;
align-items: center;
gap: 20px;
align-self: stretch;
}
.mission-vision-container{
  display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 20px;
flex: 1 0 0;
align-self: stretch;
}
.mission-container, .vision-container{
  display: flex;
padding: 16px 16px 24px 16px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
align-self: stretch;
border-radius: 8px;
background: var(--Color, rgba(255, 245, 238, 0.2));
border: 1px solid var(--Schemes-Secondary, #7a580c);
/* hero shadow */
/* box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.20); */
}

.mission-header, .vision-header{
  display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.mission-header h3, .vision-header h3{
  color: var(--brand-Black-Shade-1, #2C2C31);
text-align: center;

/* material-theme/headline/large */
font-size: 32px;
font-style: normal;
font-weight: 300;
line-height: 40px; /* 125% */
}
.mission-container p, .vision-container p{
  display: -webkit-box;         /* Enables flex-like behavior */
  -webkit-box-orient: vertical; /* Sets the orientation to vertical */
  overflow: hidden;             /* Hides the overflowed text */
  -webkit-line-clamp: 3;   
color: var(--brand-Black-Shade-1, #2C2C31);
text-overflow: ellipsis;


/* material-theme/headline/small */

font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 32px; /* 133.333% */
}


.core-values-container{
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  border-radius: 8px;
  background: var(--Color, rgba(255, 245, 238, 0.2));
  border: 1px solid var(--Schemes-Secondary, #7a580c);

/* hero shadow */
/* box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.20); */
}
.core-value{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.core-value h3{
  color: var(--brand-Black-Shade-1, #2C2C31);
text-align: center;

/* material-theme/headline/large */
font-size: 32px;
font-style: normal;
font-weight: 300;
line-height: 40px; /* 125% */
}
.core-value-list{
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.core-value-item{
  display: flex;
padding: 8px 0px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
border-bottom: 0.5px solid var(--brand-Black-Shade-1, #2C2C31);
}
.core-value-item h4{
  color: var(--brand-Black-Shade-1, #2C2C31);
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 32px; /* 133.333% */
  align-self: stretch;
}
.core-value-item p{
  color: var(--brand-Black-Shade-1, #2C2C31);
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 24px; /* 150% */
letter-spacing: 0.5px;
align-self: stretch;
}

@media (max-width :1120px) {
  .about-US{
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
  }
  .about-US h1{
    font-size: 36px;
  }
  .mission-header h3, .vision-header h3{
font-size: 28px;
  }
  .mission-container p, .vision-container p{
     -webkit-line-clamp: 4;   
     font-size: 20px;
  }

  .core-value h3{
  font-size: 28px;
  }

  .core-value-item h4{
    font-size: 24px;
  }
  .core-value-item p{
    font-size: 16px;
  
  }
}

@media (max-width : 650px) {
  .about-US{
    padding:32px 16px ;
  }
.aboutUS-Content{
  flex-direction: column;
}

}

/* our work section */
.our-Work{
  display: flex;
padding: 32px 64px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
background-color: #efedfa;
}

.our-Work h1{
  color: var(--brand-Black-Shade-1, #2C2C31);
font-size: 45px;
font-style: normal;
font-weight: 300;
line-height: 52px; /* 115.556% */
}
.our-work-note h5{
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 1;
 overflow: hidden;
 text-overflow: ellipsis;
  width: 100%;   
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: 32px; /* 133.333% */
}
.our-work-note p{
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}

.Our-Work-Content{
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  width: 100%;
}

.our-work-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  border-radius: 8px;
  background: lightgray center / cover no-repeat;
  height: 300px;
  overflow: hidden;
  background-color: #f5f5f5; /* Fallback for lazy loading */
}

.our-work-note {
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(255, 245, 238, 0.6);
}
@media (max-width: 1120px) {
.our-Work{
  display: flex;
padding: 32px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
}
.our-Work h1{
  font-size: 36px;
font-style: normal;
line-height: 44px; /* 122.222% */
}
}
@media (max-width: 480px) {
  .Our-Work-Content {
    grid-template-columns: 1fr;
  }
  .our-Work{
    display: flex;
padding: 24px 16px;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
  }
  .our-Work h1{
    font-size: 32px;

  }
}



/* blog and event */
.blog-and-event-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;
  padding: 32px 64px;
}

.blog-and-event-section h1 {
  color: var(--brand-Black-Shade-1, #2C2C31);
  font-size: 45px;
  font-weight: 300;
  line-height: 52px; /* 115.556% */
}

.blogEventContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  align-self: stretch;
}

.blogEventItem {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 16px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--Schemes-On-Primary, #FFF);
  border: 1px solid var(--Schemes-Secondary, #7a580c);
}

.blogImg {
  height: 300px;
  flex: 1 0 0;
  border-radius: 16px;
}

.blogImg img {
  border-radius: 4px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blogWriteSection {
  display: flex;
  height: 300px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1 0 0;
}

.blogWriteSection h5 {
  text-transform: capitalize;
  color: var(--brand-Black-Shade-1, #2C2C31);
  font-size: 24px;
  font-weight: 300;
  line-height: 32px; /* 133.333% */
}

.blogWriteSection p {
  display: -webkit-box; /* Fallback for older browsers */
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 5; /* Limits the text to 5 lines */
  max-height: calc(24px * 5); 
  color: var(--brand-Black-Shade-1, #2C2C31);
  font-size: 16px;
  font-weight: 300;
  line-height: 24px; /* 150% */
  letter-spacing: 0.5px;
}

.buttomBlogCard {
  display: flex;
  padding: 8px 0px;
  justify-content: space-between;
  align-items: flex-end;
  align-self: stretch;
  border-top: 0.5px solid rgba(0, 0, 0, 0.30);
}

.buttomBlogCard p {
  color: var(--brand-Black-Shade-1, #2C2C31);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  letter-spacing: 0.4px;
}

/* Responsive Design */
@media (max-width: 1120px) {
  .blog-and-event-section {
    padding: 32px;
  }

  .blog-and-event-section h1 {
    font-size: 36px;
    line-height: 44px;
  }

  .blogWriteSection p {
    -webkit-line-clamp: 3;
    max-height: calc(24px * 3);
  }
}

@media (max-width: 700px) {
  .blog-and-event-section {
    padding: 32px 16px;
  }

  .blogImg {
    width: 100%;
  }

  .blogEventContainer,
  .blogWriteSection {
    width: 100%;
  }
  .blogWriteSection{
    gap: 12px;
  }

  .blogEventItem {
    flex-direction: column;
    width: 100%;
    height: auto;
  }

  .blog-and-event-section h1 {
    font-size: 32px;
    line-height: 40px;
  }
}
 /* testimonial section */

 .testimonial-section {
  padding: 32px 64px;
  display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
gap: 16px;
align-self: stretch;
background-color: #efedfa;
}

.testimonial-section h1 {
  color: var(--brand-Black-Shade-1, #2C2C31);
  font-size: 45px;
  font-weight: 300;

}

.testimonialContainer {
  display: flex;
  gap: 20px;
  overflow: hidden; /* Prevent scrollbars */
  position: relative;
  width: 100%; /* Full width of the container */
  padding: 16px 0;
}

.testimonial-card {
  flex: 0 0 288px; /* Fixed width for each card */
  /* height: 218px; */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 4px;
  background: rgba(255, 245, 238, 0.2);
  border: 1px solid #7a580c;
}

.testimonial-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonial-profile img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.testimonial-profile div {
  display: flex;
  flex-direction: column;
}

.testimonial-profile h6 {
 align-self: stretch;
 color: var(--brand-Black-Shade-1, #2C2C31);

font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 24px; /* 150% */
letter-spacing: 0.5px;
}

.testimonial-profile p {
  margin: 0;
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: 16px; /* 133.333% */
letter-spacing: 0.4px;
}

.testimonial-message {
  color: var(--brand-Black-Shade-1, #2C2C31);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.25px;
}
.progress-container {
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  margin-top: 16px;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  background: #0000ee;/* Progress bar color */
  transition: width 0.2s linear;
}

@media (max-width: 1120px) {
  .testimonial-section{
    display: flex;
padding: 32px;
flex-direction: column;
align-items: center;
gap: 24px;
align-self: stretch;
  }
  .testimonial-section h1{
    font-size: 36px;
    line-height: 44px; /* 122.222% */
  }
}
@media (max-width: 480px) {
  .testimonial-section{
    display: flex;
    padding: 24px 16px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
  }
  .testimonial-section h1{
    font-size: 32px;
    line-height: 40px;
  }
}

/* Form */
.contactUs-section{
  display: flex;
padding: 32px 64px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
}
.contactUs-section h1{
  color: var(--brand-Black-Shade-1, #2C2C31);
font-size: 45px;
font-style: normal;
font-weight: 300;
line-height: 52px; /* 115.556% */
}
#contactForm{
  display: flex;
width: 650px;
padding: 35px 24px;
flex-direction: column;
align-items: flex-start;
border-radius: 8px;
background: var(--Schemes-Primary-Container, #efedfa);
gap: 24px;
}
.in{
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
align-self: stretch;
}
.in label{
  color: var(--brand-Black-Shade-1, #2C2C31);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
letter-spacing: 0.1px;

}
.in input{
  display: flex;
height: 48px;
padding: 8px 16px;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 8px;
background: var(--brand-Brand-white, #F7F8FA);
border: none;
}

.in textarea{
  display: flex;
height: 163px;
padding: 16px;
align-items: flex-start;
gap: 10px;
align-self: stretch;
border-radius: 16px;
background: var(--brand-Brand-white, #F7F8FA);
}

.formButton{
  display: flex;
width: 100%;
padding: 8px 8px 8px 16px;
justify-content: space-between;
align-items: center;
gap: 16px;
border-radius: 100px;
background: var(--brand-Brand-Purple, #8C62FF);
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 24px; /* 150% */
letter-spacing: 0.5px;
}

@media (max-width:1120px) {
  .contactUs-section{
    display: flex;
padding: 32px;
flex-direction: column;
align-items: center;
gap: 32px;
align-self: stretch;
  }
  .contactUs-section h1{
    font-size: 36px;
  }
  #contactForm{
    width: 450px;
    line-height: 44px; /* 122.222% */
  }
}

@media (max-width : 480px) {
  .contactUs-section{
    display: flex;
padding: 32px 16px;
flex-direction: column;
align-items: center;
gap: 16px;
width: 100%;
align-self: stretch;
  }
  .aboutUS-Content h1{
    font-size: 32px;

  }
  #contactForm{
    padding: 24px 16px;
    gap: 16px;
    width: 100%;
    line-height: 44px; /* 122.222% */
  }
  .form{
    width: 100%;
  }
}

.in input::placeholder, .in textarea::placeholder{
  color: var(--brand-black-shade-3, #B1B8CB);

font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
letter-spacing: 0.25px;
}

a{
  text-decoration: none;
}