:root{
  --msz-nav-h: 72px;                 /* JS इसे real height से update करेगा */
  --msz-black:#0b0b0b;
  --msz-red:#c00000;
  --font-ui:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ====== push page content below fixed nav ====== */
body{ 
  padding-top: calc(var(--msz-nav-h) + 8px);
  background:#f5f6f8;
}

  /* Navbar */
.navbar .nav-link {
  color: #141414;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 500;

  margin: 0 10px;
  transition: color 0.3s ease;
}

.navbar .nav-link.active,
.navbar .nav-link:hover {
  color: #c50000;
}

.btn-dangerr {
   background: #C00000;
  border: 1px solid #C00000;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 9px 45px;
  border-radius: 28px;
  
}

.btn-danger:hover {
  background-color: #a00000;
}


/* Navbar */
.navbar .nav-link {
  color: #141414;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  margin: 0 10px;
  transition: all 0.3s ease;
  position: relative;
}

/* Active and hover underline effect */
.navbar .nav-link.active::after,
.navbar .nav-link:hover::after {
  content: "";
  position: absolute;
  bottom: -5px; /* distance below text */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #c50000; /* underline color */
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Optional: animation on hover */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #c50000;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.navbar .nav-link:hover::after {
  width: 100%;
}

/* Active color and underline */
.navbar .nav-link.active {
  color: #c50000;
}

.navbar .nav-link.active::after {
  width: 100%;
}

.client-btn{
  border-radius: 100px;
background: #C00000;
  display: flex;
padding: 10px 44px;
justify-content: center;
align-items: center;
gap: 8px;
flex: 1 0 0;
align-self: stretch;
}

    /* Headings (optional) */
.svc-h2{
     /* font: 900 clamp(1.6rem,1.1rem + 2.2vw,2.2rem)/1.15 "DM Sans",sans-serif; */
     font-family: "Poppins", sans-serif;
     font-style: normal;
     font-weight: 600;
     font-size: 2rem;
      color: #141414;
     }
.svc-intro{ 
   color: #141414;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
   
}
.sub-head{

    color: #141414;

font-family: Poppins;
font-size: 1rem;
font-style: normal;
font-weight: 300;
line-height: 150%; /* 24px */
}


/* ===== Mosaic grid (exact height match) ===== */
.ov-mosaic{
  --gap: 1.25rem;
  --h: clamp(340px, 44vw, 460px);    
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, 1fr);
  height: var(--h);
}


.ov-col{ display: grid; height: 100%; }
.ov-col.one{ grid-template-rows: 1fr; }        
.ov-col.two{ grid-template-rows: 1fr 1fr; row-gap: var(--gap); } 

/* Tiles */
.ov-tile{
  border-radius: 14px;
  overflow: hidden;
  /* box-shadow: 0 10px 22px rgba(0,0,0,.08); */
  /* background:#f6f6f6; */
}
.ov-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


@media (max-width: 991.98px){
  .ov-mosaic{
    grid-template-columns: repeat(2, 1fr);
    height: clamp(320px, 54vw, 520px);  
  }
}

@media (max-width: 575.98px){
  .ov-mosaic{
    grid-template-columns: 1fr;
    height: auto;                       
  }
  .ov-col{ height: auto; }
  /* pleasant ratios on phones */
  .ov-col.one .ov-tile{ aspect-ratio: 4 / 5; }
  .ov-col.two .ov-tile{ aspect-ratio: 16 / 10; }
}



/* Get in Touch */

.contact-section {
  background: #f9f9f9;
  font-family: 'Poppins', sans-serif;
  min-height: 100vh; /* centers vertically */
}



@media (min-width: 853px) and (max-width: 1280px) {
  
    .touch-title{
        padding-top: 12rem;
    }
}



.contact-item {
  padding: 10px 20px;
}

.contact-icon {
  width: 40px;
  height: auto;
}

.sub-icon {
  width: 18px;
  height: 18px;
}

.contact-link {
  color: #141414;
  text-decoration: none;
  transition: color 0.3s ease;
}
.contact-link:hover {
  color: #c00000;
}

.social-icon {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}
.social-icon:hover {
  transform: scale(1.1);
}

/* Divider borders for desktop */
.border-md-end {
  border-right: 1px solid #ddd;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
  .contact-section {
    padding: 60px 20px;
    min-height: auto;
  }

  .border-md-end {
    border: none !important;
    border-bottom: 1px solid #ddd;
    margin-bottom: 25px;
    padding-bottom: 25px;
  }

  .contact-item {
    text-align: center;
  }

  .contact-link {
    font-size: 0.9rem;
  }
}

.touch-title{

    color: #141414;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
}

.sub-title{

color: #141414;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}

.social-section {
  font-family: 'Poppins', sans-serif;
}

.social-section h6 {
  color: #141414;
  font-weight: 600;
  font-size: 1rem;
}

.social-icon {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.15);
  filter: brightness(1.2);
  
}

/* Responsive */
@media (max-width: 575.98px) {
  .social-section .d-flex {
    flex-direction: row;
    gap: 10px;
  }
  .social-section h6 {
    margin-bottom: 5px !important;
  }
}

.touch-media{
    color: #141414;
font-family: Poppins;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 30px */
}

.phone{
    color: #141414;
text-align: center;
padding-bottom: 10px;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}

.email{
    color: #141414;
    padding-bottom: 10px;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}

.location{
    color: #141414;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
}

.sub-iconn{
    width: 10px;
height: 16px;
stroke-width: 2px;
stroke: #141414;
}

/* Map section */
.map-section {
  background: #f9f9f9;
  font-family: 'Poppins', sans-serif;
}

.map-container {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  height: 450px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive height adjustments */
@media (max-width: 768px) {
  .map-container {
    height: 350px;
  }
}

@media (max-width: 576px) {
  .map-container {
    height: 280px;
  }
}



/* Sez Consultancy */

.consult-cta {
  font-family: 'Poppins', sans-serif;
}

/* LEFT column - clean, no bg/shadow */
.left-steps {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Vertical alignment for 3 steps */
.steps-timeline {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Step icon + vertical line */
.icon-stack {
  position: relative;
  width: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.icon-stack img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.icon-stack::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 220%;
  background: #FFDFDF;
}
@media (max-width: 767.98px) {
 .icon-stack::after{
     height: 100%;
 }
 .proposal{
    padding-bottom: 10px;
 }
 .proposal-sub{
    padding-bottom: 10px;
 }
 

  
}


@media (max-width: 768.98px) {
 .icon-stack::after{
     height: 100%;
 }
 .proposal{
    padding-bottom: 10px;
 }
 .proposal-sub{
    padding-bottom: 10px;
 }
 
}

@media (max-width: 820px) {
 .icon-stack::after{
     height: 100%;
 }
 .proposal{
    padding-bottom: 10px;
 }
 .proposal-sub{
    padding-bottom: 10px;
 }
 
}

@media (max-width: 912px) {
 .icon-stack::after{
     height: 100%;
 }
 .proposal{
    padding-bottom: 10px;
 }
 .proposal-sub{
    padding-bottom: 10px;
 }
 
}
.step-row.last .icon-stack::after {
  display: none;
}

/* Form Card */
.consult-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Icon bubble */
.icon-bubble {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff1f1;
  border: 1px solid #ffe1e1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dropzone */
.dropzone {
  border: 1.6px dashed #d7d7d7;
  border-radius: 10px;
  padding: 1.25rem;
  background: #fff;
}
.dropzone .xsmall {
  font-size: 0.72rem;
}

/* Equal heights */
@media (min-width: 992px) {
  .left-steps,
  .consult-card {
    height: 100%;
  }
}
.Looking{
    color: #141414;
font-family: Poppins;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 42px */
}

.found-path{
    color: #C00000;
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
}

.next-step {
    color: #000;
font-family: Poppins;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 36.4px */
}

.next-step-sub {
    color: #000;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}
.proposal{
    color: #000;
font-family: Poppins;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 26px */
}
.proposal-sub{
    color: #000;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
}

.followus{
    color: #141414;
font-family: Poppins;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 30px */
}
.writeus{
    color: #141414;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 30px */
}
.writeus-span{
    color: #C00000;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}

.writeus24{
color: #C00000;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 150%;
}

.form-label{

    color: #141414;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 21px */
}

.form-control{
border: 1px solid #464646;

}


.form-control::placeholder{
    color: #818181;
font-family: Poppins;
font-size: 13px;
font-style: normal;
font-weight: 300;
line-height: 150%; /* 18px */
}

.dropzone {
  border: 1.6px dashed #d7d7d7;
  border-radius: 10px;
  padding: 1.25rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.dropzone:hover {
  border-color: #c00000;
  background-color: #fff7f7;
}
.drop-it{
    color: #141414;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 21px */
}
.click-here{
    color: #C00000;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 150%;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.only-pdf{
    color: #464646;
font-family: Poppins;
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: 150%; /* 18px */
}

/* Remove Bootstrap blue focus border from inputs, selects, and textareas */
.form-control:focus,
.form-select:focus {
  box-shadow: none !important;   /* removes blue shadow */
  border-color: #ccc !important; /* keeps neutral border */
  outline: none !important;      /* removes outline */
}

/* Optional: if you want no color change at all on focus */
.form-control:focus,
.form-select:focus {
  border-color: inherit !important;
}
.need-help {
    color: #141414;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 48px */
}
.need-help-p{
    color: #141414;
font-family: Poppins;
font-size: 23px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 42px */
}

.scedule{
    color: #C00000;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 150%; /* 24px */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.consultation{
    color: #141414;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}

/* Fix spacing after removing "Need Help" section */
.left-steps {
  justify-content: flex-start !important;
  gap: 1rem;
}

.steps-timeline {
  margin-top: 2rem;
}

/* Make left column height consistent with form */
@media (min-width: 992px) {
  .left-steps {
    padding-bottom: 2rem;
  }
}