@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  transition: .3s;
}
.arrowMove{
  cursor: pointer !important;
}
.arrowMove:hover i{
  transform: translateX(10px);
  cursor: pointer;
}
:root {
  --secondary-color: #891716;
  --dark-text-secondary: #A14545;
  --primary-color: ;

  --white-color: #fff;
  --black-color: #000;
}

.container {
  padding: 50px 50px;
  max-width: 1639px;
  margin: auto;
}

.container-fluid {
  padding: 10px;
  max-width: 1639px;
  margin: auto;
}

.d-flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.center {
  text-align: center;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.col-1 {
  flex: 1;
}

.col-2 {
  flex: 2;
}

.col-3 {
  flex: 3;
}

.col-4 {
  flex: 4;
}

.col-5 {
  flex: 5;
}

.btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--secondary-color);


  max-width: 227px;
  width: 100%;
  min-height: 58px;
  border-radius: 8px;
  padding: 0px 10px;

  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  color: var(--white-color);
}

.btn a:hover {
  background-color: var(--dark-text-secondary);
}

.mainHeading {
  margin-bottom: 56px;
}

.mainHeading h5 {
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: var(--secondary-color);

}

.mainHeading h2 {
  font-family: Inter;
  font-weight: 700;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 0px;
  color: #212B36;

}

.mainHeading h2 span {
  color: var(--secondary-color);
}

.mainHeading p {
  color: #637381;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0px;
  text-align: center;
  margin-top: 24px;


}

/* code for header starts here */
header {
  background: #F3E8E8;
  border: 1px solid #F3E8E8;
}

header .row a.logo {
  max-width: 222.96774291992188;
  width: 100%;
  min-height: 72px;
}

header ul {
  gap: 40px;
}

header ul li a {
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0px;
  color: #212B36;
}

header ul li a.active {
  color: var(--secondary-color);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;

}

header ul li a:hover {
  color: var(--secondary-color);
}

header .lang img {
  cursor: pointer;
}


header .lang select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  outline: none;
}


header .lang select::-ms-expand {
  display: none;
}

header .langBtn {
  gap: 32px;
}

header .langBtn .lang {
  gap: 8px;
}



header .langBtn .lang select {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #637381;
}


/* code for footer */
footer {
  background: #F3E8E8;

}

footer .row {
  gap: 48px;
  flex-wrap: wrap;
}

footer .row .col-1 {
  flex-basis: 250px;
  flex-grow: 1;
}
footer .col-1 .icons{
  gap: 28px;
  margin-top: 36px;
}
footer .col-1 .icons i{
  font-size: 36px;
  color: #212B36;
}
footer .row .col-1 h5 {
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #212B36;
}

footer .row .col-1 a {
  display: block;
  margin-bottom: 24px;

  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #212B36;
}
footer .row .col-1 a:hover{
  color: var(--secondary-color);
}

footer .contactDetail a {
  display: flex !important;
  gap: 12px;
  align-items: center;
}

footer .contactDetail a:nth-child(4) {
  align-items: start;
}

footer .contactDetail a:nth-child(4) img {
  margin-top: 4px;
}

footer .contactDetail a p {
  color: #212B36;

  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;

}

footer .mainPara {
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #212B36;
  margin-top: 50px;

}

/* code for contactBtn section */
.contactBtn {
  background: linear-gradient(90deg, #891716 0%, #230606 100%) !important;
  display: block;
  min-height: 308px;
  box-shadow: 0px 1px 4px 0px #89171680;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.contactBtn .container {
  width: 100%;
}

.contactBtn .container .row {
  width: 100%;
  gap: 30px;
}

.contactBtn .container .row .btn a {
  width: 206px;
  background-color: var(--white-color);

  color: #212B36;
}

.contactBtn .container .row .btn a:hover i {
  transform: translateX(10px);
}

.contactBtn .container .row h2 {
  font-family: Inter;
  font-weight: 700;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--white-color);
}


/* code for client section */
.client .row {
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.client .row .box {
  max-width: 525.3333129882812px;
  width: 100%;
  flex-basis: 350px;
  flex-grow: 1;
  min-height: 302.0854187011719px;
  border-radius: 24px;
  padding: 32px;
  gap: 22px;
  background-color: #F3E8E8;
}

.client .row .box:hover{
  transform: translateY(-10px);
  box-shadow: rgba(137, 23, 22, 0.35) 0px 5px 15px;
}

.client .row .box .photoBox {
  min-width: 142px;
  height: 100%;
}

.client .row .box img {
  width: 142px;
  min-height: 238.08541870117188px;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 16px;

}

.client .row .box .stars {
  margin-bottom: 22px;
}

.client .row .box .stars i {
  color: #919EAB;
  font-size: 18px;
}

.client .row .box .stars i.yellow {
  color: #FFC107;
}

.client .row .box .priBox p {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #637381;
  margin-bottom: 22px;
}

.client .row .box .priBox h3 {
  color: #212B36;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  vertical-align: middle;

}

/* Google Reviews: alleen voornaam + review */
.google-reviews .row .box {
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.google-reviews .review-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.google-reviews .google-badge {
  font-size: 14px;
  font-weight: 600;
  color: #5f6368;
}
.google-reviews .stars {
  margin-bottom: 0;
}
.google-reviews .review-text {
  flex: 1;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #637381;
  margin-bottom: 16px;
}
.google-reviews .review-author {
  font-weight: 600;
  font-size: 16px;
  color: #212B36;
  margin-top: auto;
}

/* code for services-quality section */
.services-quality {
  background: #F3E8E8;

}

.services-quality .mainHeading h2 {
  max-width: 921px;
  margin: auto;
}

.services-quality .row {
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
}

.services-quality .row .box {
  max-width: 384px;
  width: 100%;
  flex-basis: 300px;
  flex-grow: 1;
  height: 324px;
  padding-top: 40px;
  padding-right: 32px;
  padding-bottom: 40px;
  padding-left: 32px;
  gap: 12px;
  border-radius: 24px;
  background-color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0px 1px 4px 0px #89171680;
}


.services-quality .row .box:hover{
  transform: scale(.97);
  box-shadow: rgba(137, 23, 22, 0.8) 0px 5px 15px;
}
.services-quality .row .box img{
  height: 68px;
  width: 68px;
  border-radius: 12px;
  object-fit: cover;
}
.services-quality .row .box h3 {
  font-weight: 600;
  font-size: 28px;
  line-height: 33px;
  letter-spacing: 0px;
  color: #212B36;
  margin: 3px 0px;
}

.services-quality .row .box p {
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  text-align: center;
  color: #637381;
}

/* code for services section of home page */
.services .mainHeading h2 {
  max-width: 1015px;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .services .mainHeading h2 {
    font-size: 32px;
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

@media screen and (max-width: 520px) {
  .services .mainHeading h2 {
    font-size: 24px;
    line-height: 1.3;
  }
}

.services .row {
  gap: 34px;
  justify-content: center;
  flex-wrap: wrap;
}

.services .row .box {
  flex-basis: 400px;
  flex-grow: 1;
  max-width: 524px;
  width: 100%;
  gap: 12px;
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0px 1px 4px 0px #89171680;
}
.services .row .box:hover{
  box-shadow: rgba(137, 23, 22, 0.6) 0px 5px 15px;
}
.services .row .box img {
  max-width: 461px;
  width: 100%;
  height: 280px;
  max-height: 280px;
  object-fit: cover;
  border-radius: 24px;
}

.services .row .box h2 {
  font-weight: 600;
  font-size: 32px;
  line-height: 64px;
  letter-spacing: 0px;
  color: #212B36;
}

.services .row .box p {
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  color: #637381;
  line-height: 28px;
  letter-spacing: 0px;

}

.services .row .box .btnNext {
  min-height: 58px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
.services .row .box .btnNext:hover i{
  transform: translateX(10px);
}

.services .row .box .btnNext a {
  cursor: pointer;
  gap: 12px;
}

.services .row .box .btnNext a p {
  color: var(--dark-text-secondary);
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 0px;

}

.services .row .box .btnNext a i {
  color: var(--dark-text-secondary);
  font-size: 18px;
}

.services .moreServicesBtn {
  margin-top: 56px;
}

.services .moreServicesBtn a {
  max-width: 270px;
  width: 229px;
  min-height: 58px;
  padding-top: 6px;
  padding-right: 24px;
  padding-bottom: 6px;
  padding-left: 24px;
  gap: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #891716 0%, #230606 100%);
  box-shadow: 0px 2px 5px 0px #89171629;
  box-shadow: 0px 0px 0px 1px #89171629;
  box-shadow: 0px 1px 1px 0px #00000024;
  box-shadow: 0px 1px 0px 0px #E31414 inset;
  margin: auto;
  color: var(--white-color);
}

.services .moreServicesBtn a p {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
}

.services .moreServicesBtn a i {
  font-size: 20px;
}

.about h5 {
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: var(--secondary-color);
  margin-bottom: 16px;
}

.about h2 {
  color: #212B36;
  font-weight: 700;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 0px;
}

.about h2 span {
  color: var(--dark-text-secondary);
}

.about p {
  font-weight: 400;
  font-size: 18px;
  color: #637381;
  line-height: 24px;
  letter-spacing: 0px;
  margin-top: 48px;
}

.about .row {
  gap: 64px;
}

.about {
  background: #F3E8E8;
}

.about .row img {
  object-fit: cover;
  width: 100%;
  border-radius: 32px;

}


.faqs-section article {
  max-width: 853px;
  width: 100%;
  margin: auto;
}

.faqs-section .container{
  padding-top: 0px !important;
}

.faqs-section details {
  box-shadow: 0px 1px 4px 0px #89171680;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 24px;
  cursor: pointer;
}

.faqs-section summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  padding: 12px;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0px;
  color: #212B36;
}

.faqs-section summary::after {
  content: '';
  border: solid #292D32;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 4px;
  transition: 0.3s;
  transform: rotate(45deg);
}

.faqs-section details[open]>summary::after {
  transform: rotate(-135deg);
}

summary::-webkit-details-marker {
  display: none;
}

.faqs-section details[open] p {
  padding: 12px;
}

.faqs-section .row {
  max-width: 917px;
  width: 100%;
  padding-top: 40px;
  padding-right: 32px;
  padding-bottom: 18px;
  padding-left: 32px;
  border-radius: 24px;
  background: var(--white-color);
  margin: auto;
  box-shadow: 0px 1px 4px 0px #89171680;

}

/* code for hero-section section  */
.hero-section {
  background: none;
}

.hero-section .conainer {
  padding-top: 80px;
  padding-bottom: 80px;
}

.hero-section h1 {
  font-weight: 700;
  font-style: Bold;
  font-size: 64px;
  line-height: 80px;
  letter-spacing: 0px;
  color: #212B36;
  max-width: 856px;
  width: 100%;
  margin-bottom: 28px;

}

.hero-section h1 span {
  color: var(--secondary-color);
}

.hero-section .row {
  gap: 48px;
}

.hero-section .row p.mainPara {
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -2%;
  color: #637381;
}

.hero-section .row .gridBtn {
  margin-top: 60px !important;
  gap: 24px;
  flex-wrap: wrap;

}

.hero-section .row .coloredBg a {
  width: 227px;
}

.hero-section .row .noBg a {
  width: 227px;
  border-radius: 8px;
  border: 1.5px solid var(--secondary-color);
  background-color: transparent;
  color: var(--secondary-color);
  padding: 10px;

}
.hero-section .row .noBg a:hover{
  box-shadow: rgba(137, 23, 22, 0.5) 0px 5px 15px;
  transform: scale(.97);
}

.hero-section .row .col-1.imageGallery {
  max-width: 380px;
  flex: 0 1 auto;
}

.hero-section .row .col-1 .box {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-section .row .col-1 .box.secondBox {
  margin-bottom: 150px;
}

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 999999999 !important;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(137, 23, 22);
  /* Black fallback color */
  background-color: rgba(137, 23, 22);
  /* Black w/opacity */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%;
  /* 25% from the top */
  width: 100%;
  /* 100% width */
  text-align: center;
  /* Centered text/links */
  margin-top: 30px;
  /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 20px;
  color: var(--white-color);
  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
  color: rgb(227, 114, 112);
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 30px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.hero-section .mouse {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 46px;
  color: var(--secondary-color);
  margin: auto;
  animation: topDown infinite 1s;
  top: 20px;

}

@keyframes topDown {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}


/* code for form-section page */
.form-section .col-2 form {
  box-shadow: 0px 1px 4px 0px #89171680;
  background-color: var(--white-color);
  max-width: 1072px;
  width: 100%;
  border-radius: 24px;
  padding: 32px;

}

.form-section .col-2 form h1 {
  font-weight: 700;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 0px;
  color: #212B36;
  margin-bottom: 32px;
}

.form-section .col-2 form .boxFormFlex {
  gap: 26px;
  margin-bottom: 24px;
}

.form-section .col-2 form .boxFormFlex label {
  display: block;
}

.form-section {
  background-color: #F3E8E8;
}

.contact-hero {
  background: url(../images/contactBg.jpg) no-repeat center center/cover;
  min-height: 416px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.contact-hero::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: var(--black-color);
  opacity: .75;
}

.contact-hero h1 {
  font-weight: 700;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 0px;
  color: var(--white-color);
  margin: auto;
  margin-bottom: 40px;
  position: relative;
  z-index: 9;
  max-width: 870px;
  width: 100%;
}

.contact-hero h1 span {
  color: var(--secondary-color);
}

.contact-hero p {
  max-width: 1000px;
  margin: auto;
  font-weight: 400;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: -2%;
  color: #C7C6C6;
  position: relative;
  z-index: 9;
}

.form-section label {
  font-weight: 400;
  margin-bottom: 8px;
  color: #212B36;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: -0.16px;
  vertical-align: middle;

}

.form-section input {
  width: 100%;
  min-height: 56px;
  border-radius: 8px;
  padding: 10px;
  border: 1px solid #C4CDD5;
  outline: none;

  font-weight: 400;
  font-size: 16px;
  line-height: 29.25px;
  letter-spacing: -0.16px;
  vertical-align: middle;
  color: var(--black-color);

}

.form-section input::placeholder {
  color: #919EAB;
}

::selection {
  background-color: var(--secondary-color);
  color: var(--white-color);
}

.form-section textarea {
  width: 100%;
  border-radius: 8px;
  outline: none;
  padding: 50px 10px;
  background: #FFFFFF33;
  border: 1px solid #C4CDD5;
}

.custom-file-upload {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 55px;
  border: 2px dashed #cfd8dc;
  border-radius: 8px;
  cursor: pointer;
  color: #b0b7c3;
}

/* Hide default file input */
.custom-file-upload input[type="file"] {
  display: none;
}

.form-section .col-2 form .boxFormFlex.btn input {
  width: 100%;
  min-height: 62px;
  border-radius: 8px;
  padding: 10px;
  background-color: var(--secondary-color);


  color: #F4F6F8;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: -2%;
  margin-top: 28px;
cursor: pointer;
}
.form-section .col-2 form .boxFormFlex.btn input:hover{
  background-color: var(--dark-text-secondary);

}

.form-section .col-1 .box {
  max-width: 524px;
  width: 100%;
  min-height: 356px;
  border-radius: 24px;
  padding: 32px;
  background-color: var(--white-color);
  box-shadow: 0px 1px 4px 0px #89171680;

}

.form-section .col-1 .box h4 {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #212B36;
  margin-bottom: 24px;
}

.form-section .col-1 .box a {
  margin-bottom: 24px;

  gap: 12px;
  font-weight: 500;
  color: #212B36;
  font-style: Medium;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;

}

.form-section .col-1 .box h3 {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  vertical-align: middle;
  color: #212B36;
}

.form-section .col-1 .box .map-heading {
  margin-bottom: 24px;
}

.form-section .col-1 .box .map-location {
  background: url(../images/map-location.svg) no-repeat center center/cover;
  max-width: 460px;
  width: 100%;
  min-height: 308px;
  object-fit: cover;
  border-radius: 24px;
  position: relative;
  display: flex;
  /* align-items: end; */
  justify-content: end;
  padding: 10px;
}
.form-section .col-1 .box .map-location .map-location-detail{
  max-width: 258px;
  width: 100%;
height: 92px;
border-radius: 12px;

padding: 12px;
gap: 12px;

  background: rgba(250, 250, 250, .4);
border: 1px solid #919EAB;
}
.form-section .col-1 .box .map-location .map-location-detail h3{
font-weight: 600;
font-size: 16px;
color: #212B36;
line-height: 28px;
letter-spacing: 0px;
vertical-align: middle;

}
.form-section .col-1 .box .map-location .map-location-detail p{
font-weight: 500;
font-size: 14px;
color: #212B36;
line-height: 28px;
letter-spacing: 0px;

}
.form-section .row {
  gap: 24px;
}

/* code for single services page */
.hero-swap .row{
  gap: 20px;
}
.hero-swap h2 {
  font-weight: 700;
  font-size: 48px;
  color: #212B36;
  margin-bottom: 18px;
  line-height: 64px;
  letter-spacing: 0px;

}

.hero-swap p {
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  color: #212B36;
  line-height: 28px;
  letter-spacing: 0px;
  margin-bottom: 32px;
}

.hero-swap .subContent h5 {
  font-weight: 600;
  font-size: 20px;
  color: #212B36;
  line-height: 64px;
  letter-spacing: 0px;
  vertical-align: middle;

}

.hero-swap ul {
  padding-left: 26px;
}

.hero-swap ul li {
  list-style: disc !important;

  font-family: Inter;
  font-weight: 500;
  font-style: Medium;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0px;
  color: #637381;
}

.hero-swap .swapGrid {
  gap: 6px;
  position: relative;
}
.hero-swap .swapGrid .before{
  position: absolute;
  left: 25px;
  top: 25px;
display: flex;
align-items: center;
justify-content: center;
  width: 112px;
height: 50px;
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
border-radius: 12px;
background: #637381;
border: 1.4px solid #637381;


font-weight: 600;
font-size: 25.14px;
line-height: 36.32px;
color: #F3E8E8;
letter-spacing: 0px;

}

.hero-swap .swapGrid .after{
  position: absolute;
  right: 25px;
  top: 25px;
display: flex;
align-items: center;
justify-content: center;
width: 94px;
height: 50px;
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
border-radius: 12px;

background: #891716;
border: 1.4px solid #891716;

font-weight: 600;
font-size: 25.14px;
line-height: 36.32px;
color: #FFFFFF;
letter-spacing: 0px;

}

.hero-swap .swapGrid .imgBox img {
  max-width: 424.6124267578125px;
  width: 100%;
  min-height: 500.9998779296875px;
  object-fit: cover;
  /* padding: 27.94px; */

}

.hero-swap .swapGrid .imgBox.leftImage img {
  border-top-left-radius: 33.52px;
  border-bottom-left-radius: 33.52px;
}

.hero-swap .swapGrid .imgBox.rightImage img {
  border-top-right-radius: 33.52px;
  border-bottom-right-radius: 33.52px;
}

.hero-swap .swapGrid .arrowIcons {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #F3E8E8;


  width: 55.870059967041016px;
  height: 55.870059967041016px;
  /* gap: 13.97px; */
  border-radius: 28.63px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.hero-swap .swapGrid .arrowIcons i {
  font-size: 12px;
  color: #292D32;

}

.process-section{
  background-color: #F3E8E8;
padding-top: 120px;
padding-bottom: 120px;

}
.process-section .container {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 20px;
}

.process-section .timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Central Vertical Line */
.process-section .timeline-line {
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 0;
  width: 0;
  border-left: 2px dashed var(--secondary-color);
  transform: translateX(-50%, -50%);
  z-index: 1;
  height: 80%;
}

.process-section .timeline-item {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Marker Circle */
.process-section .marker {
  width: 34px;
  height: 34px;
  background: linear-gradient(90deg, #891716 0%, #230606 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  transform: translateX(-50%);
}

/* Connector horizontal dashed lines */
.process-section .marker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 55px;
  border-top: 2px dashed var(--secondary-color);
}

.process-section .marker::before {
  content: "";
  position: absolute;
  transform: translate(-50%);
  top: 10.5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  line-height: 16px;
  background: linear-gradient(90deg, #891716 0%, #230606 100%);
}

.process-section .left .marker::before {
  left: -55px;

}

.process-section .right .marker::before {
  right: -71px;

}


.process-section .left .marker::after {
  right: 34px;
}

.process-section .right .marker::after {
  left: 34px;
}

.process-section .left .marker.first {
  left: 100%;
  top: 18%;

}

.process-section .right .marker.second {
  top: 70%;
}

.process-section .right .marker.fourth {
  top: 73%;
}

.process-section .left .marker.third {
  left: 100%;
  top: 18%;
}

/* Card Styling */
.process-section .card {
  background: var(--white-color);
  padding: 15px;
  border-radius: 18px;
  width: 85%;
  box-shadow: 0px 1px 4px 0px #89171680;
}

.process-section .left .card {
  margin-right: auto;
}

.process-section .right .card {
  margin-left: auto;
}

.process-section .img-box img {
  max-width: 720px;
  width: 100%;
  height: 351.2075500488281px;
  border-radius: 24px;
  display: block;
  object-fit: cover;
}

.process-section .card-text {
  margin-top: 15px;
  font-weight: 700;
  color: #333;
  font-size: 1rem;
}
.process-section .informationContent{
  margin-top: 48px;
}
.process-section .informationContent h4{
font-weight: 700;
font-size: 48px;
color: #212B36;
line-height: 64px;
letter-spacing: 0px;
margin-bottom: 16px;

}

.process-section .informationContent p.infoPara{
font-weight: 500;
font-style: Medium;
font-size: 18px;
line-height: 28px;
letter-spacing: 0px;
color: #637381;
margin-bottom: 48px;
}
.process-section .informationContent .btn a {
  max-width: 338px;
}
/* TABLET & MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    .process-section .marginGap{
      gap: 20px;
      flex-wrap: wrap;
    }
    .process-section .marginGap.nomar{
      margin-bottom: 0px !important;
    }
    .process-section .timeline{
      gap: 20px;
    }
  .process-section .timeline-line {
    display: none !important;
  }

  .process-section .marker {
    display: none !important;
  }

  .process-section .timeline-item {
    flex-direction: row !important;
    box-sizing: border-box;
    flex-basis: 250px;
    flex-grow: 1;
  }
  .process-section .img-box img{
    height: 260.20755px;
  }

  .process-section .card {
    width: 100%;
    /* Make card full width */
  }

  .process-section .marker::after {
    display: none;
    /* Hide horizontal connectors on mobile */
  }
}
.process-section .mainHeading{
font-weight: 700;
font-size: 48px;
line-height: 64px;
letter-spacing: 0px;
color: #212B36;
}












































@media screen and (min-width: 769px) {
  .process-section .marker::after {
    width: 30px;
}
.process-section .left .marker::before {
    left: -31px;
}
.process-section .right .marker::before {
    right: -46px;
}
}

@media screen and (min-width: 1080px) {
  .process-section .marker::after {
    width: 50px;
}
.process-section .left .marker::before {
    left: -51px;
}
.process-section .right .marker::before {
    right: -66px;
}
}

@media screen and (min-width: 1200px) {
  .process-section .marker::after {
    width: 70px;
}
.process-section .left .marker::before {
    left: -71px;
}
.process-section .right .marker::before {
    right: -86px;
}
}


@media screen and (min-width: 1400.99px) {
.process-section .marker::after {
    width: 75px;
}
.process-section .left .marker::before {
    left: -75px;
}
.process-section .right .marker::before {
    right: -91px;
}
}

@media screen and (min-width: 1600.99px) {
.process-section .marker::after {
    width: 95px;
}
.process-section .left .marker::before {
    left: -95px;
}
.process-section .right .marker::before {
    right: -110px;
}
}


@media screen and (min-width: 1079.99px) {
  .pc {
    display: none !important;
  }
}

@media screen and (max-width: 1079.99px) {
  .container {
  padding: 80px 10px;
 }
  .mobile {
    display: none !important;
  }

  .hero-section .row,
  .about .row,
  .form-section .row {
    flex-direction: column;
  }
  .hero-section .row .imageGallery{
    display: none !important;
  }

  .hero-section .row .col-1 .box.secondBox {
    margin-bottom: 0px;
  }

  .form-section .row .col-1 {
    display: flex;
    gap: 24px;
  }

  .form-section .row .col-1 .box {
    margin-bottom: 0px !important;
  }


}

@media screen and (max-width: 872px) {
  .client .row .box {
    flex-basis: 440px;
  }

  .contactBtn .container .row {
    flex-direction: column;
  }
}

@media screen and (max-width: 580px) {
  .imageGallery {
    flex-direction: column;
  }

  .contactBtn .container .row h2 {
    text-align: center;

  }

}

@media screen and (max-width: 520px) {
    .hero-section {
    background: none !important;
}
  .container {
  padding: 50px 10px; 
}
  .client .row .box {
    flex-direction: column;
  }

  .client .row .box img {
    width: 100%;
    max-width: 100%;
  }

  .hero-section h1 {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 10px;
  }

  .faqs-section .row {
    padding: 24px 18px 1px 18px;
  }
  .process-section .mainHeading{
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 25px !important;
  }
  .process-section{
    padding: 50px 0px;
  }
  .process-section .container{
    padding: 0px 10px !important;
  }
  .hero-swap .swapGrid .imgBox img{
    min-height: 300px;
  }
}

@media screen and (max-width: 720px) {
  .form-section .row .col-1 {
    flex-direction: column;
  }
}

@media screen and (max-width: 872px) {
  .hero-swap .flex-content{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  .hero-swap .subContent{
    flex-basis: 200px;
    flex-grow: 1;
    margin-bottom: 10px !important;
  }
.hero-swap .row{
  flex-direction: column;
}
.hero-swap p,.hero-swap h2{
  margin-bottom: 14px;
}
}