* {
  margin    :   0;
    padding   :    0;
    box-sizing: border-box;
}

body


{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   line-height: 1.6;
    color: #333;
    background-color: #fff;

}



.topNavigation
	{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem 0;
   position: fixed;
  top: 0;
  width: 100%;
   z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-wrapper {
    max-width: 1200px;
   margin     :       0 auto;
  display: flex;
    justify-content: space-between;
   align-items: center;
	padding: 0 20px;
}

.brandContainer .companyLogo {
  height: 45px;
        width: auto;
}  

.menu-items {
    display: flex;
	gap: 2rem;
}

.nav-link {
  color   :   white;
    text-decoration: none;
	font-weight: 500;
	 transition    : color 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius:        25px;
}

.nav-link:hover,
.nav-link.active {
  background-color: rgba(255,255,255,0.2);
    color :     #fff;
}

.hamburger {
	       display: none;
    flex-direction: column;
  cursor    : pointer;
       gap: 4px;
	
	}

.hamburger span {
   width: 25px;
    height: 3px;
	background-color: white;
  transition  :   0.3s;
   border-radius: 2px;
}  

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
   opacity: 1;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

.heroContainer	{
  margin-top: 80px;
	padding: 4rem 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.heroContent
{
  max-width: 1200px;
	 margin     :   0 auto;
   display: grid;
    grid-template-columns: 1fr 1fr;
	gap :      3rem;
	align-items: center; 

}

.heroText h1


{


	font-size: 2.8rem;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  line-height: 1.2;
	

}


.heroText p	{
   font-size: 1.2rem;
   color: #5a6c7d;
    margin-bottom: 2rem;
}

.heroButtons {
  display: flex;
	gap: 1rem;
  flex-wrap: wrap;
}

.primaryBtn,
.secondaryBtn {

  padding: 1rem 2rem;
  text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
   transition: all 0.3s ease;
  display: inline-block;


}

.primaryBtn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.primaryBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.secondaryBtn {
   background: transparent;
	   color: #667eea;
		border: 2px solid #667eea;
}

.secondaryBtn:hover {
    background: #667eea;
	 color: white;
}

.heroImage img {
        width: 100%;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);


}

.servicesArea    {
  padding: 5rem 2rem;
   background-color    :   #fff;
} 

.sectionContainer {


    max-width: 1200px;
   margin: 0 auto;


}  

.sectionHeader {
  text-align   :  center;
	margin-bottom    :3rem;
}

.sectionHeader h2 {
  font-size   :      2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.sectionHeader p {
  font-size: 1.1rem;
    color   :       #5a6c7d;
}

.servicesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	 gap: 2rem;
}

.serviceCard
	{
       background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.serviceCard:hover {

	  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);

}

.serviceCard img {

   width: 100%;
   height: 200px;
   object-fit: cover;
  border-radius: 10px;
  margin-bottom:    1.5rem;
     }

.serviceCard h3 {
  font-size: 1.5rem;
      color: #2c3e50;
    margin-bottom: 1rem;
}

.serviceCard p {
  color: #5a6c7d;
  line-height    :     1.6;
}

.aboutPreview {
         padding: 5rem 2rem;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	color: white;
}

.aboutContent {


   max-width     :    1200px;
  margin: 0 auto;
   display: grid;
	grid-template-columns: 1fr 1fr;
	 gap: 3rem;
   align-items: center;
	}

.aboutText h2 {
     font-size: 2.3rem;
   margin-bottom: 1.5rem;
	


}

.aboutText p {
   font-size:     1.1rem;
   margin-bottom: 1.5rem;
    opacity: 0.9;
}



.benefitsList  
  {
  list-style: none;
    margin-bottom: 2rem;
}

.benefitsList li {
    padding: 0.5rem 0;
       position: relative;
   padding-left: 1.5rem;
}

.benefitsList li:before {
  content: "✓";
         position: absolute;
   left: 0;
    font-weight: bold;
   color   : #fff;
}

.learnMoreBtn {
  background: rgba(255,255,255,0.2);
  color: white;
			padding: 1rem 2rem;
   text-decoration: none;
  border-radius: 25px;
	font-weight: 600;
  transition: all 0.3s ease;
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.3);
}



.learnMoreBtn:hover {
    background: white;
    color: #f5576c;
}

.aboutImage img  {
   width: 100%;
    border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.ctaSection     {
   padding: 4rem 2rem;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   text-align: center;
  color: white;
}

.ctaContent h2 {
   font-size: 2.5rem;
    margin-bottom: 1rem;
}

.ctaContent p {
  font-size: 1.2rem;
    margin-bottom: 2rem;
   opacity :0.9;
}

.ctaButton {
    background: white;
   color: #4facfe;
   padding: 1.2rem 2.5rem;
       text-decoration: none;
                    border-radius: 35px;
  font-weight: 700;
  font-size: 1.1rem;
       transition: all 0.3s ease;
  display: inline-block;
}

.ctaButton:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255,255,255,0.3);
}

.contactSection {
   padding: 5rem 2rem;
         background-color: #f8f9fa; 

}

.contactContainer {
  max-width: 1200px;
   margin: 0 auto;
  display   :   grid;
   grid-template-columns: 1fr 1fr;
	 gap: 4rem;
}

.contactInfo h2 {
   font-size: 2.3rem;
   color: #2c3e50;
	margin-bottom: 1rem;
}

.contactInfo p {

    color: #5a6c7d;
	  font-size: 1.1rem;
	  margin-bottom: 2rem;
     }

.contactDetails {
  display: flex;
 gap: 1.5rem;
  flex-direction: column;
}

.contactItem h4 {
   color: #667eea;
  margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.contactItem p {
    color: #2c3e50;
    margin: 0;
}

.contactForm

{
  background: white;
	padding: 2.5rem;
    border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.formGroup {
    margin-bottom    :       1.5rem;
}

.formGroup input,
.formGroup select,
.formGroup textarea {
	width: 100%;
   padding: 1rem;
   border: 2px solid #e1e5e9;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
   font-family: inherit;


}

.formGroup input:focus,
.formGroup select:focus,
.formGroup textarea:focus {
    outline: none;
   border-color: #667eea;
}

.formGroup textarea {
    min-height: 120px; 
   resize: vertical;
}

.submitBtn		{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 1rem 2rem;
   border: none;
        border-radius: 25px;
   font-size: 1.1rem;
  font-weight: 600;
     cursor: pointer;
    transition: all 0.3s ease;
  width: 100%;
}

.submitBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.siteFooter {
	background: #2c3e50;
	color: white;
   padding    :     3rem 2rem 1rem;
}

.footerContent {
	max-width: 1200px;
   margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.footerSection h4 {
          margin-bottom    :   1rem;
	color: #ecf0f1;
     font-size: 1.2rem;
}

.footerSection p {
    color: #bdc3c7;
   line-height    : 1.6;
}

.footerSection ul {
  list-style: none;
}

.footerSection ul li {
    margin-bottom: 0.5rem;
}



.footerSection ul li a {
   color: #bdc3c7;
  text-decoration: none;
 transition: color 0.3s ease;
}

.footerSection ul li a:hover {
  color: #ecf0f1; 

}

.footerLogo {
   height: 40px;
               width: auto;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
}

.footerBottom {
  max-width: 1200px;
   margin     :       2rem auto 0;
    padding-top: 2rem;
   border-top    :  1px solid #34495e;
  text-align: center;
   color: #bdc3c7;
}

.scroll-top-btn {
    position: fixed;
   bottom: 20px;
    right: 20px;
    background    : #667eea;
   color: white;
     border: none;
    border-radius: 50%;
  width: 50px;
                    height: 50px;
                    font-size: 20px;
		cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition     :    all 0.3s ease;
  z-index   :    1000;

}

.scroll-top-btn:hover {
   background: #764ba2;
  transform: translateY(-3px);
}



.animate-in {
   opacity: 1;
  transform: translateY(0);
          transition: all 0.6s ease;
}

.serviceCard,
.aboutText,
.contactForm {
   opacity :      1;
  transform: translateY(30px);
}  @media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .menu-items {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        flex-direction: column;
        padding: 1rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    
    .menu-items.active {
        transform: translateX(0);
    }
    
    .heroContent {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .heroText h1 {
        font-size: 2.2rem;
    }
    
    .aboutContent {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .contactContainer {
        grid-template-columns: 1fr;
    }
    
    .heroButtons {
        justify-content: center;
    }
    
    .servicesGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nav-wrapper {
        padding: 0 15px;
    }
    
    .heroContainer {
        padding: 2rem 1rem;
    }
    
    .heroText h1 {
        font-size: 1.8rem;
    }
    
    .sectionHeader h2 {
        font-size: 2rem;
    }
    
    .ctaContent h2 {
        font-size: 2rem;
    }
    
    .contactForm {
        padding: 1.5rem;
    }
    
    .primaryBtn,
    .secondaryBtn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}.aboutHeroSection {
    margin-top: 80px;
       padding: 4rem 2rem;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.aboutHeroContainer {

	   max-width: 1200px;
    margin: 0 auto;
	display: grid;
    grid-template-columns: 1fr 1fr;
   gap: 3rem;
    align-items: center;


     }

.aboutHeroContent h1		{
    color: #1565c0;
  line-height: 1.2;
   margin-bottom: 1.5rem;
    font-size   :      2.8rem;
}  

.aboutHeroContent p {
         font-size: 1.2rem;
   color: #37474f;
   line-height: 1.6;
}

.aboutHeroImage img {


  width: 100%;
    border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	}

.companyStorySection {

	   padding: 5rem 2rem;
    background-color: #fff;
}

.storyContainer {


  max-width: 1200px;
         margin: 0 auto;
     }


.storyContent h2 {
  font-size: 2.5rem;
  text-align: center;
  color: #2c3e50;
   margin-bottom     :     3rem;
}

.storyGrid  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.storyItem {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 2rem;
  border-radius: 15px;
 text-align: center;
   border-left: 4px solid #667eea;
        transition     :        transform 0.3s ease;
}  

.storyItem:hover {
  transform: translateY(-5px);
}

.storyYear {
   font-size: 2rem; 
	  font-weight    :  bold; 
	   color: #667eea; 
		 margin-bottom: 1rem;
}

.storyItem h3 {
   font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.storyItem p {
    color: #5a6c7d;
    line-height: 1.6;
}

.valuesSection {
    padding: 5rem 2rem;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  color: white;
	
}

.valuesContainer {
   max-width: 1200px;
		 margin: 0 auto;
}

.valuesHeader {
  text-align    :  center;
   margin-bottom: 3rem;
	
}

.valuesHeader h2 {
   font-size: 2.5rem;
  margin-bottom: 1rem;
}

.valuesHeader p {
   font-size: 1.1rem;
   opacity: 0.9;
}

.valuesGrid {
	 display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2rem;
}

.valueCard {
  background: rgba(255,255,255,0.1);
        padding: 2rem;
  border-radius: 15px;
   text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.valueIcon {
	margin-bottom: 1rem;
  font-size   :       3rem;
}

.valueCard h3 {

	  font-size: 1.5rem;
  margin-bottom: 1rem;
	}

.valueCard p {
   opacity: 0.9;
    line-height   :  1.6; 

	}

.expertiseSection {
  padding: 5rem 2rem;
	background-color: #f8f9fa;
}

.expertiseContainer {
   max-width: 1200px;
	margin: 0 auto;
}

.expertiseContent

{
  display: grid;
   grid-template-columns     :    1fr 1fr;
      gap: 3rem;
   align-items    :     center;
}

.expertiseText h2 {
  font-size    :        2.3rem;
	color: #2c3e50;
    margin-bottom: 1.5rem;
}

.expertiseText > p	{
	  font-size: 1.1rem;
  color: #5a6c7d;
	margin-bottom: 2rem; 


}

.expertiseList {
    display: flex;

	  flex-direction: column;

	    gap: 1.5rem;
}

.expertiseItem {
       padding: 1.5rem;
    background: white;
   border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.08);
  border-left: 4px solid #667eea;
}

.expertiseItem h4 {
	color: #667eea; 
   margin-bottom: 0.5rem; 
   font-size: 1.2rem;
}

.expertiseItem p 
 {
   color: #5a6c7d;
  line-height: 1.5;
		margin: 0;
}

.expertiseImage img {
  width: 100%;
   border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.statsSection    {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
	 text-align: center; 
	
}

.statsContainer   {
    max-width: 1200px;
 margin: 0 auto;
}

.statsContainer h2 {
    margin-bottom  :3rem;
  font-size: 2.5rem;
}

.statsGrid {
          display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 2rem; 

}

.statItem{
    padding: 2rem;
}

.statNumber {
    font-size: 3.5rem;
	 font-weight: bold;
   margin-bottom: 0.5rem;
}

.statLabel
	{
   font-size  :1.1rem;
  opacity: 0.9;
}

.approachSection	{
  padding  :       5rem 2rem;
    background-color   :      #fff;
}

.approachContainer  {
    max-width: 1200px;
    margin: 0 auto;
}

.approachHeader {
         text-align: center;
    margin-bottom: 3rem;
}

.approachHeader h2 {
  font-size: 2.5rem;
  color: #2c3e50;
    margin-bottom: 1rem;
}

.approachHeader p {
	font-size: 1.1rem;
  color: #5a6c7d;
}

.approachSteps {
   display   :        grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                    gap: 2rem;
	
}

.stepItem {
    text-align   :   center;
    padding: 2rem;
}

.stepNumber {
    width: 60px; 
	  height: 60px; 
	  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
	   color: white; 
	   border-radius: 50%; 
	  display: flex; 
	   align-items:     center; 
	  justify-content: center; 
	   font-size: 1.5rem; 
	   font-weight: bold; 
	    margin: 0 auto 1.5rem;
}

.stepItem h3 {
  font-size: 1.4rem;
  color   :    #2c3e50;
  margin-bottom: 1rem;
}

.stepItem p  {
   color     : #5a6c7d;
    line-height: 1.6;
}

.whyChooseSection {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.whyChooseContainer  {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
 align-items: center;
}

.whyChooseImage img		{
   width: 100%;

   border-radius: 15px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.whyChooseContent h2 {
   font-size   :  2.3rem;
	color: #2c3e50;
  margin-bottom: 2rem;
}

.reasonsList {
  display: flex;
   flex-direction: column;
   gap: 1.5rem;
               margin-bottom: 2rem;
}



.reasonItem
	{
    padding  :       1.5rem;
  background: rgba(255,255,255,0.8);
    border-radius: 10px;
  backdrop-filter: blur(10px);
}


.reasonItem h4 {
    font-size: 1.2rem; 
    margin-bottom: 0.5rem; 
	color: #667eea;
}

.reasonItem p {

    color: #37474f;
   line-height: 1.5;
  margin: 0;
}

.backToHomeBtn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius :        25px;
  font-weight: 600;
  transition: all 0.3s ease;
	 display: inline-block;
}

.backToHomeBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.thankyouHeroSection {
   margin-top     :        80px;
    padding: 4rem 2rem;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
       color: white;
   text-align  :     center;
}

.thankyouContainer {
   max-width: 800px;
    margin: 0 auto;
}

.successIcon {
  width   : 80px;
    height: 80px;
  background: rgba(255,255,255,0.2);
    border-radius: 50%;
  display: flex;
    align-items: center;
	justify-content: center;
    font-size: 2.5rem;
   margin: 0 auto 2rem;
  border: 3px solid rgba(255,255,255,0.3);
}

.thankyouContent h1 {
    font-size: 2.8rem;
  margin-bottom: 1.5rem;

}

.thankyouMessage  
  {
 font-size: 1.2rem;
    margin-bottom: 3rem;
  opacity: 0.9;
	line-height    :1.6;

}

.nextStepsContainer {
   margin-bottom: 3rem;
}

.nextStepsContainer h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.stepsGrid {
	    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
  margin-bottom: 2rem;
	}

.stepCard {


  background: rgba(255,255,255,0.1);
  padding     :   1.5rem;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
     }

.stepIcon {
                    font-size: 2rem;
                    margin-bottom: 1rem;
}

.stepCard h3
{
     font-size: 1.3rem;
   margin-bottom: 0.5rem;}

.stepCard p {
  opacity: 0.9;
    line-height: 1.5;
    font-size: 0.95rem;
}

.recommendationsSection     {
   margin-bottom: 3rem;
}

.recommendationsSection h2 {
   font-size: 2rem;
  margin-bottom: 2rem;
}

.recommendationCards {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap   :    1.5rem;
}

.recommendationCard {
  background: rgba(255,255,255,0.1);
          border-radius: 15px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.recommendationCard img {
  width :  100%;
    height: 150px;
    object-fit: cover;
}

.cardContent		{
        padding: 1.5rem;
}

.cardContent h3 {
	    font-size: 1.2rem;
  margin-bottom: 0.5rem;}

.cardContent p {
    opacity: 0.9;
    line-height: 1.5;
   font-size: 0.95rem;
}  

.actionButtons {
    display: flex;
  gap    :        1rem;
  justify-content: center;
   flex-wrap: wrap;
}

.additionalInfoSection {
      padding: 4rem 2rem;
    background-color: #f8f9fa;
}



.infoContainer {
     max-width: 1200px;
  margin: 0 auto; 
	
}


.infoGrid {


    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
     }

.infoCard {
    background: white;
    padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  text-align: center;
}

.infoCard h3 {
    font-size: 1.4rem;
   color: #2c3e50;
    margin-bottom: 1rem;
}

.infoCard p {
   color: #5a6c7d;
  line-height: 1.6;
}

.emergencyContactSection {
	 padding    :      4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
   text-align: center;
}

.emergencyContainer {
	max-width: 800px;
                    margin: 0 auto;
}

.emergencyContainer h2 {
  font-size: 2.3rem;
  margin-bottom: 1rem;
     }

.emergencyContainer p {
   font-size: 1.1rem;
       margin-bottom: 2rem;
    opacity: 0.9;
}

.contactDetails {
	 display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap    :        2rem;
}

.contactDetails .contactItem {
  background: rgba(255,255,255,0.1);
    padding: 1.5rem;
   border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);


}

.contactDetails .contactItem h4 {


    font-size: 1.2rem;
  margin-bottom: 0.5rem;
     }

.contactDetails .contactItem p {
  line-height    : 1.4;
  opacity: 0.9;
}@media (max-width: 768px) {
    .aboutHeroContainer,
    .expertiseContent,
    .whyChooseContainer {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .aboutHeroContent h1 {
        font-size: 2.2rem;
    }
    
    .storyGrid {
        grid-template-columns: 1fr;
    }
    
    .valuesGrid {
        grid-template-columns: 1fr;
    }
    
    .statsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .approachSteps {
        grid-template-columns: 1fr;
    }
    
    .thankyouContent h1 {
        font-size: 2.2rem;
    }
    
    .stepsGrid {
        grid-template-columns: 1fr;
    }
    
    .recommendationCards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .aboutHeroSection,
    .thankyouHeroSection {
        padding: 2rem 1rem;
    }
    
    .aboutHeroContent h1 {
        font-size: 1.8rem;
    }
    
    .thankyouContent h1 {
        font-size: 1.8rem;
    }
    
    .statsGrid {
        grid-template-columns: 1fr;
    }
    
    .actionButtons {
        flex-direction: column;
    }
    
    .successIcon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
}.sectionContent {
   max-width  :  1200px;
   margin: 0 auto;
    padding: 0 20px;
          font-size  :      1.1rem;
  color: #5a6c7d;
   line-height: 1.8;
}

.sectionContent h3 {
    font-size: 1.8rem;
	         color  :       #2c3e50;
	         margin: 2rem 0 1rem;
}

.sectionContent p {
   margin-bottom: 1.5rem;
}

.sectionContent ul {
     margin-bottom     :   1.5rem;
}