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

:root {
    --primary-clr: #1a3a52;
    --secondary-clr: #2d5f7e;
    --accent-clr: #c19a6b;
    --text-dark: #1f1f1f;
    --text-light: #f4f4f4;
    --bg-light: #fafafa;
    --bg-dark: #0f2537;
    --border-clr: #d4d4d4;
    --transition-speed: 0.3s;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background: var(--text-light);
    overflow-x: hidden;
}

.navWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 0;
}

.navContent {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px;
}

.brandSection a {
    text-decoration: none;
}

.navLogo {
    height: 45px;
    width: auto;
    display: block;
}

.burgerBtn {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.burgerLine {
    width: 28px;
    height: 3px;
    background: var(--primary-clr);
    margin: 4px 0;
    transition: var(--transition-speed);
}

.navLinks {
    display: flex;
    gap: 35px;
    align-items: center;
}

.linkItem {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 16px;
    transition: color var(--transition-speed);
    position: relative;
}

.linkItem::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-clr);
    transition: width var(--transition-speed);
}

.linkItem:hover::after,
.linkItem.active::after {
    width: 100%;
}

.linkItem:hover {
    color: var(--secondary-clr);
}

.ctaLink {
    background: var(--accent-clr);
    color: var(--text-light);
    padding: 10px 24px;
    border-radius: 6px;
}

.ctaLink::after {
    display: none;
}

.ctaLink:hover {
    background: var(--primary-clr);
    color: var(--text-light);
}

.heroSection {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-clr) 0%, var(--secondary-clr) 100%);
    padding: 120px 30px 60px;
    overflow: hidden;
}

.heroOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><circle cx="100" cy="100" r="300" fill="rgba(255,255,255,0.03)"/><circle cx="1000" cy="600" r="400" fill="rgba(255,255,255,0.02)"/></svg>');
    opacity: 0.4;
}

.heroContent {
    position: relative;
    z-index: 2;
    max-width: 920px;
    text-align: center;
}

.heroTitle {
    font-size: 58px;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 28px;
    line-height: 1.2;
}

.heroSubtitle {
    font-size: 22px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 45px;
    line-height: 1.7;
}

.heroBtns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btnPrimary, .btnSecondary {
    padding: 16px 40px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--transition-speed);
    display: inline-block;
}

.btnPrimary {
    background: var(--accent-clr);
    color: var(--text-light);
}

.btnPrimary:hover {
    background: #d4a976;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(193,154,107,0.4);
}

.btnSecondary {
    background: transparent;
    color: var(--text-light);
    border: 2px solid var(--text-light);
}

.btnSecondary:hover {
    background: var(--text-light);
    color: var(--primary-clr);
}

.wrapperContent {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}

.introSection {
    padding: 100px 0;
    background: var(--text-light);
}

.introGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.sectionHeading {
    font-size: 42px;
    color: var(--primary-clr);
    margin-bottom: 25px;
    font-weight: 700;
    line-height: 1.3;
}

.sectionHeading.centered {
    text-align: center;
}

.introDescription {
    font-size: 18px;
    color: #4a4a4a;
    margin-bottom: 20px;
    line-height: 1.8;
}

.introVisual {
    position: relative;
}

.introImg {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.servicesSection {
    padding: 100px 0;
    background: var(--bg-light);
}

.sectionIntro {
    text-align: center;
    font-size: 19px;
    color: #5a5a5a;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.servicesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

.serviceCard {
    background: white;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.serviceCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

.serviceIcon {
    margin-bottom: 25px;
}

.iconCircle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-clr), #d4a976);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.serviceTitle {
    font-size: 24px;
    color: var(--primary-clr);
    margin-bottom: 15px;
    font-weight: 600;
}

.serviceDesc {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
}

.approachSection {
    padding: 100px 0;
    background: white;
}

.approachLayout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}

.approachVisuals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
}

.approachImg {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.approachImg.primary {
    grid-column: 1 / 3;
}

.approachStep {
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 3px solid var(--accent-clr);
}

.stepTitle {
    font-size: 20px;
    color: var(--primary-clr);
    margin-bottom: 10px;
    font-weight: 600;
}

.stepText {
    font-size: 16px;
    color: #5a5a5a;
    line-height: 1.7;
}

.ctaSection {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(135deg, var(--secondary-clr), var(--primary-clr));
    text-align: center;
    overflow: hidden;
}

.ctaOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 50%, rgba(193,154,107,0.2), transparent);
}

.ctaContent {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0 auto;
}

.ctaTitle {
    font-size: 48px;
    color: white;
    margin-bottom: 25px;
    font-weight: 700;
}

.ctaText {
    font-size: 20px;
    color: rgba(255,255,255,0.95);
    margin-bottom: 40px;
    line-height: 1.7;
}

.btnCtaLarge {
    display: inline-block;
    padding: 20px 50px;
    background: var(--accent-clr);
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--transition-speed);
}

.btnCtaLarge:hover {
    background: #d4a976;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(193,154,107,0.4);
}

.benefitsSection {
    padding: 100px 0;
    background: var(--bg-light);
}

.benefitsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.benefitItem {
    background: white;
    padding: 35px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.benefitTitle {
    font-size: 22px;
    color: var(--primary-clr);
    margin-bottom: 15px;
    font-weight: 600;
}

.benefitText {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
}

.credibilitySection {
    padding: 100px 0;
    background: white;
}

.credibilityLayout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: start;
}

.credibilityPara {
    font-size: 17px;
    color: #4a4a4a;
    margin-bottom: 22px;
    line-height: 1.8;
}

.credibilityImg {
    width: 100%;
    border-radius: 10px;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.credibilityStats {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.statBox {
    background: linear-gradient(135deg, var(--primary-clr), var(--secondary-clr));
    padding: 35px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(26,58,82,0.2);
}

.statNumber {
    display: block;
    font-size: 56px;
    font-weight: 700;
    color: var(--accent-clr);
    margin-bottom: 10px;
}

.statLabel {
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    line-height: 1.5;
}

.processSection {
    padding: 100px 0;
    background: var(--bg-light);
}

.processTimeline {
    max-width: 900px;
    margin: 60px auto 0;
}

.timelineItem {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    position: relative;
}

.timelineItem::before {
    content: '';
    position: absolute;
    left: 32px;
    top: 65px;
    width: 2px;
    height: calc(100% + 50px);
    background: var(--border-clr);
}

.timelineItem:last-child::before {
    display: none;
}

.timelineMarker {
    flex-shrink: 0;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--accent-clr);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 15px rgba(193,154,107,0.3);
}

.timelineContent {
    flex: 1;
    background: white;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.timelineTitle {
    font-size: 22px;
    color: var(--primary-clr);
    margin-bottom: 12px;
    font-weight: 600;
}

.timelineDesc {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
}

.finalVisualSection {
    padding: 100px 0;
    background: white;
}

.finalVisualGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.finalImg {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.finalPara {
    font-size: 17px;
    color: #4a4a4a;
    margin-bottom: 20px;
    line-height: 1.8;
}

.contactSection {
    padding: 100px 0;
    background: var(--bg-light);
}

.contactLayout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 70px;
}

.contactIntro {
    font-size: 17px;
    color: #5a5a5a;
    margin-bottom: 40px;
    line-height: 1.7;
}

.contactDetails {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.detailItem {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-clr);
}

.detailLabel {
    font-size: 14px;
    color: var(--accent-clr);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.detailValue {
    font-size: 17px;
    color: var(--text-dark);
    line-height: 1.6;
}

.contactForm {
    background: white;
    padding: 45px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.formGroup {
    margin-bottom: 25px;
}

.formGroup.halfWidth {
    flex: 1;
}

.formRow {
    display: flex;
    gap: 20px;
}

.formLabel {
    display: block;
    font-size: 15px;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: 500;
}

.formInput,
.formSelect,
.formTextarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--border-clr);
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color var(--transition-speed);
}

.formInput:focus,
.formSelect:focus,
.formTextarea:focus {
    outline: none;
    border-color: var(--accent-clr);
}

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

.formSubmit {
    width: 100%;
    padding: 16px;
    background: var(--primary-clr);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.formSubmit:hover {
    background: var(--secondary-clr);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26,58,82,0.3);
}

.siteFooter {
    background: var(--bg-dark);
    color: rgba(255,255,255,0.8);
    padding: 70px 0 30px;
}

.footerGrid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 50px;
}

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

.footerDesc {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}

.footerHeading {
    font-size: 18px;
    color: white;
    margin-bottom: 20px;
    font-weight: 600;
}

.footerList {
    list-style: none;
}

.footerList li {
    margin-bottom: 12px;
}

.footerLink {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 15px;
    transition: color var(--transition-speed);
}

.footerLink:hover {
    color: var(--accent-clr);
}

.footerText {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
    margin-bottom: 10px;
}

.footerBottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

.copyrightText {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
}

@media (max-width: 992px) {
    .burgerBtn {
        display: flex;
    }

    .navLinks {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 80px);
        background: white;
        flex-direction: column;
        padding: 40px 30px;
        box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        transition: right 0.4s ease;
        align-items: flex-start;
    }

    .navLinks.active {
        right: 0;
    }

    .heroTitle {
        font-size: 42px;
    }

    .heroSubtitle {
        font-size: 19px;
    }

    .introGrid,
    .approachLayout,
    .finalVisualGrid,
    .contactLayout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .servicesGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .credibilityLayout {
        grid-template-columns: 1fr;
    }

    .footerGrid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .heroTitle {
        font-size: 36px;
    }

    .sectionHeading {
        font-size: 32px;
    }

    .servicesGrid,
    .benefitsGrid {
        grid-template-columns: 1fr;
    }

    .ctaTitle {
        font-size: 34px;
    }

    .formRow {
        flex-direction: column;
    }

    .footerGrid {
        grid-template-columns: 1fr;
    }

    .approachVisuals {
        grid-template-columns: 1fr;
    }

    .approachImg.primary {
        grid-column: 1;
    }
}

@media (max-width: 480px) {
    .navContent {
        padding: 15px 20px;
    }

    .wrapperContent {
        padding: 0 20px;
    }

    .heroTitle {
        font-size: 30px;
    }

    .heroSubtitle {
        font-size: 17px;
    }

    .heroBtns {
        flex-direction: column;
        width: 100%;
    }

    .btnPrimary,
    .btnSecondary {
        width: 100%;
        text-align: center;
    }

    .sectionHeading {
        font-size: 28px;
    }

    .contactForm {
        padding: 30px 20px;
    }
}.policySection {
  padding: 80px 2rem;
  background: #f8f9fa;
}



.policyContainer


{
	 max-width: 800px;
	margin: 0 auto;
                    text-align: left;
}

.policyContainer h2 {
    font-size: 2.5rem;
	    color: #2c3e50;
	    margin-bottom: 1.5rem;
	    font-weight: 700;
}

.policyContainer p {


    color: #7f8c8d;
   margin-bottom: 1.5rem;
  line-height:     1.7;
   font-size   :      1.1rem;
}@media (max-width: 768px) {
    .policyContainer h2 {
        font-size: 2rem;
    }

    .policyContainer p {
        font-size: 1rem;
    }

    .policySection {
        padding: 60px 1rem;
    }
}.aboutHero {
   position: relative;
  min-height: 65vh;
               display: flex;
    align-items    :center;
  justify-content: center;
  background: linear-gradient(120deg, #2d5f7e 0%, #1a3a52 100%);
     padding: 140px 30px 80px;
   overflow: hidden;
	
}

.aboutHeroOverlay {


   position: absolute;
   inset   :      0;
  background: radial-gradient(circle at 70% 30%, rgba(193,154,107,0.15), transparent 60%);
}

.aboutHeroContent {
  position: relative;

    z-index: 2;

	 text-align: center;

      max-width: 800px;
}

.aboutHeroTitle {
   font-size: 52px; 
    font-weight  :  700; 
    color: white; 
  margin-bottom: 20px; 

}

.aboutHeroText     {
   font-size: 21px;
  color: rgba(255,255,255,0.9);
   line-height  :  1.6;
}

.storySection 
 {
    padding: 90px 0; 
  background: white;
}

.storyLayout {
	display: grid;
  grid-template-columns  :        1.2fr 1fr;
    gap: 55px;
	align-items     :        center;
}

.storyParagraph {
    font-size: 17px;
   color: #4a4a4a;
   margin-bottom: 22px;
  line-height: 1.8;
}

.storyImage{

    width: 100%;
   border-radius: 10px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.15);


}

.missionSection {
   padding: 90px 0;
  background: var(--bg-light);
}

.missionGrid {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
   gap: 35px;
}

.missionCard {

	   background: white;
    padding: 45px 35px;
    border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.09);
  transition : transform 0.3s ease, box-shadow 0.3s ease;

}

.missionCard:hover  
  {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.missionCardTitle

{
	   font-size    :        26px;
  color: var(--primary-clr);
    margin-bottom: 18px;
     font-weight: 600;


}

.missionCardText {
         font-size: 16px;
   color: #666;
                    line-height: 1.8;
}

.approachDetailSection 
 {
    padding: 90px 0;
    background: white;
}

.approachIntro {
	text-align: center;
	font-size: 18px;
    color: #5a5a5a;
    max-width: 750px;
    margin: 0 auto 55px;
}

.approachColumns {
  gap: 40px; 
	  grid-template-columns: repeat(2, 1fr); 
	    display: grid;


}

.approachColumn {
  background: var(--bg-light);
    padding: 40px 35px;
    border-radius: 10px;
  border-left: 4px solid var(--accent-clr);
}

.approachNumber {
               display: inline-block;
  background: linear-gradient(135deg, var(--accent-clr), #d4a976);
	color: white;
    font-size: 22px;
   font-weight: 700;
  width: 60px;
  height    :  60px;
   border-radius  :   50%;
  display: flex;
   align-items:      center;
   justify-content: center;
    margin-bottom: 20px;
}



.approachColumnTitle		{
   font-size: 23px;
  color: var(--primary-clr);
    margin-bottom: 15px;
    font-weight  :  600;
}

.approachColumnText {
   color: #666;
    font-size: 16px;
  line-height: 1.8;
}

.experienceSection {
  padding: 90px 0;
  background: var(--bg-light);
}

.experienceLayout {
  display  :     grid;
  grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items     :   center;
}

.experienceImages {
    display: grid;
  grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.expImg{
          width: 100%;
    border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.expImg.mainImg {

  grid-column: 1 / 3;
	
	}

.expPara {
	  font-size: 17px;
   color: #4a4a4a;
   margin-bottom: 20px;
   line-height: 1.8;

}

.principlesSection  {
    padding: 90px 0;
    background: white;
}

.principlesGrid {
   display: grid;
  grid-template-columns: repeat(3, 1fr);
        gap: 30px;
	margin-top: 55px;
}

.principleBox {
  background: var(--bg-light);
    padding: 35px 30px;
    border-radius: 8px;
  border-top: 3px solid var(--accent-clr);
   transition: all 0.3s ease;
	}

.principleBox:hover


{
  background: white;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.principleTitle {
   font-size: 20px;
  color: var(--primary-clr);
    margin-bottom    :      12px;
   font-weight: 600;
}

.principleText {
  font-size: 15px;
    color: #666;
     line-height: 1.7;
}

.whyUsSection {
    padding: 90px 0;
  background: var(--bg-light);
}

.whyUsContent {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
    align-items: start;
	
}

.whyUsPoints {
    display: flex;
  flex-direction: column;
  gap: 30px;
}

.whyPoint {
    display  :     flex;
   gap: 20px;
	background: white;
   padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.pointIcon {
   flex-shrink :     0;
   width: 45px;
  height    :  45px;
  background: var(--accent-clr);
   color :  white;
  border-radius: 50%;
  display: flex;
 align-items: center;
  justify-content  :   center;
    font-size: 24px;
               font-weight: 700;
}



.pointTitle {
  font-size: 19px;
  color: var(--primary-clr);
       margin-bottom: 8px;
   font-weight: 600;
}

.pointText {


   font-size: 15px;
  color     :    #666;
   line-height: 1.7; 
	}

.whyUsVisual {
  top :        100px;
  position: sticky;
}

.whyUsImg {
        width: 100%;
    border-radius :    10px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}


.locationSection {
  padding: 90px 0;
   background: white;
}

.locationContent {
    max-width: 800px;
    margin    :   0 auto;
  text-align    :        center;
}

.locationDescription {
	font-size:17px;
	color: #5a5a5a;
    margin-bottom: 40px;
   line-height: 1.8;
}

.addressBlock {
  background: var(--bg-light);
  padding: 30px;
   border-radius  :      8px;
    margin-bottom: 25px;
	
}

.addressLabel {
  font-size: 14px;
  color: var(--accent-clr);
    text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-weight: 600;
}

.addressText {
   font-size: 18px;
  color: var(--text-dark);
    line-height: 1.6;
}

.locationNote {

      font-size :        16px; 
	color: #666; 
  margin-top    :  30px; 
   font-style: italic;
     }

.finalCtaSection {
 position    :     relative;
   padding: 100px 0;
  background: linear-gradient(135deg, var(--primary-clr), var(--secondary-clr));
  text-align: center;
 overflow: hidden;
}

.finalCtaOverlay     {
    position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 40%, rgba(193,154,107,0.2), transparent);
}

.finalCtaContent {
  position: relative;
    z-index: 2;
  max-width: 850px;
    margin: 0 auto;
}  

.finalCtaTitle   {
         font-size: 44px;
   color  :white;
   margin-bottom: 25px;
  font-weight    :      700;
}

.finalCtaText {
	      font-size: 19px;
  color: rgba(255,255,255,0.95);
  margin-bottom: 40px;
   line-height: 1.8;


}

.btnFinalCta {
  display: inline-block;
  padding: 18px 45px;
  background: var(--accent-clr);
  color: white;
  font-size: 17px;
   font-weight: 600;
	text-decoration: none;
    border-radius: 8px;
  transition: all 0.3s ease;
}

.btnFinalCta:hover	{
   background: #d4a976;
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(193,154,107,0.4);
}

.thankyouSection   {
	min-height   : 85vh;
  display: flex;
         align-items: center;
    padding: 120px 0 80px;
  background: var(--bg-light);
}

.thankyouContainer {
          max-width: 900px;
    margin: 0 auto;
  text-align: center;
}

.successIcon {
    margin-bottom  :35px;

}

.checkmarkCircle {
	   width: 100px;
    height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  position: relative;
    margin: 0 auto;
  box-shadow: 0 8px 25px rgba(76,175,80,0.3);
    animation: scaleIn 0.5s ease-out;
	}@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}.checkmarkStem {
   position: absolute;
       width: 6px;
  height    :     30px;
    background: white;
    left: 54px;
   top: 32px;
  transform: rotate(45deg);
}

.checkmarkKick {
    position: absolute;
   width: 6px;
  height: 15px;
   background:      white;
  left: 38px;
    top: 50px;
  transform: rotate(-45deg);

}


.thankyouTitle {
	font-size: 46px;
  color: var(--primary-clr);
   margin-bottom: 20px;
  font-weight  :      700;
}

.thankyouMessage {


  font-size: 19px;
	 color: #5a5a5a;
   margin-bottom: 50px;
   line-height: 1.7;
}

.thankyouInfo {
   background: white;
    padding: 45px;
    border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    margin-bottom    :        45px;
  text-align: left;
}

.infoHeading {
    font-size: 28px;
  color: var(--primary-clr);
    margin-bottom: 35px;
    text-align: center;
    font-weight: 600;
}



.stepsList {
  display: flex;
   flex-direction: column;
    gap: 30px;
}

.stepItem 
 {
      display: flex;
  gap: 25px;
   align-items    : start;
}

.stepNumber {
  flex-shrink: 0;
    width: 50px;
   height: 50px;
  background: var(--accent-clr);
    color :      white;
    border-radius: 50%;
               display: flex;
  align-items: center;
  justify-content: center;
   font-size: 22px;
    font-weight: 700;
}

.stepTitle {
   font-size: 20px;
  color: var(--primary-clr);
    margin-bottom: 8px;
    font-weight: 600;
} 

.stepDesc {
          font-size: 16px;
  color: #666;
   line-height: 1.7;
}

.thankyouActions {
  gap: 20px;

	   display: flex;

	  justify-content: center;

	               flex-wrap: wrap;

	  margin-bottom: 50px;
}

.btnThankyou {
	padding: 16px 38px;
	font-size: 17px;
  font-weight :        600;
    text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
    display: inline-block;
}

.btnThankyou.primary  
  {
  background: var(--primary-clr);
   color: white;
}

.btnThankyou.primary:hover {
  background: var(--secondary-clr);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,58,82,0.3);
}

.btnThankyou.secondary {
   background: transparent;
  color: var(--primary-clr);
  border: 2px solid var(--primary-clr);
}

.btnThankyou.secondary:hover {
  background: var(--primary-clr);
       color: white;
}

.additionalResources  
  {
  background: white;
    padding: 35px;
   border-radius: 10px;
    margin-bottom: 35px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.resourcesHeading {
   font-size: 24px;
  color: var(--primary-clr);
  margin-bottom: 15px;
  font-weight: 600;
}

.resourcesText {
     font-size: 16px;
   color   :   #666;
    line-height: 1.7;
	
	}

.contactReminder {
      padding     :    30px;
  background: linear-gradient(135deg, var(--primary-clr), var(--secondary-clr));
   border-radius: 10px;
	 color    :   white;

}

.reminderText {
  font-size: 17px;
  margin-bottom: 10px;
}

.reminderPhone {
   font-size: 28px;
      font-weight: 700;
  color: var(--accent-clr); 

}

.whileYouWaitSection {
    padding: 90px 0; 
	  background  :      white;
}

.waitCardsGrid {

    display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 35px;

   margin-top:55px;


}

.waitCard {
  background: var(--bg-light);
                    border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.waitCard:hover {
  transform: translateY(-6px); 
	  box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}


.waitCardImg {
	   width: 100%;

  height: 220px;

  object-fit: cover;
}

.waitCardTitle {
    font-size: 22px;

	  color: var(--primary-clr);

	   padding: 25px 25px 15px;

	    font-weight: 600;
}

.waitCardText {

   font-size: 15px;
    color: #666;
  padding: 0 25px 30px;
  line-height: 1.7;

}@media (max-width: 992px) {
    .aboutHeroTitle {
        font-size: 42px;
    }

    .storyLayout,
    .experienceLayout {
        grid-template-columns: 1fr;
    }

    .missionGrid,
    .principlesGrid {
        grid-template-columns: 1fr;
    }

    .approachColumns {
        grid-template-columns: 1fr;
    }

    .whyUsContent {
        grid-template-columns: 1fr;
    }

    .whyUsVisual {
        position: static;
    }

    .waitCardsGrid {
        grid-template-columns: 1fr;
    }

    .experienceImages {
        grid-template-columns: 1fr;
    }

    .expImg.mainImg {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .aboutHeroTitle {
        font-size: 36px;
    }

    .aboutHeroText {
        font-size: 18px;
    }

    .finalCtaTitle {
        font-size: 34px;
    }

    .thankyouTitle {
        font-size: 36px;
    }

    .thankyouInfo {
        padding: 30px 25px;
    }

    .thankyouActions {
        flex-direction: column;
    }

    .btnThankyou {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .aboutHeroTitle {
        font-size: 30px;
    }

    .thankyouTitle {
        font-size: 30px;
    }

    .stepItem {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .thankyouInfo {
        padding: 25px 20px;
    }
}