/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:38px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}
/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:38px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}
/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:38px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}
/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:38px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}
/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:32px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}
/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:38px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}
/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:38px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}
/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:38px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}
/* SECTION */
.process-section{
  max-width:1350px;
  margin:auto;
}

.section-head{
  text-align:center;
  margin-bottom:50px;
}

.section-head h2{
  font-size:38px;
  font-weight:800;
  color:#1f2f46;
}

/* GRID */
.process-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

/* ITEM (IMPORTANT) */
.process-item{
  position:relative; /* ?? REQUIRED */
}

/* CARD */
.process-card{
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(10px);
  border-radius:26px;
  padding:30px 22px 28px;
  text-align:center;
  box-shadow:0 18px 35px rgba(0,0,0,0.08);
  transition:0.35s;
  position:relative;
}

.process-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 45px rgba(0,0,0,0.15);
}

/* TOP BORDER */
.process-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,#00b7b2,#6ce5df);
  border-radius:26px 26px 0 0;
}

/* STEP */
.step-tag{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,#00b7b2,#44d8cf);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  font-weight:800;
}

/* ICON */
.icon-box{
  width:90px;
  height:90px;
  border-radius:22px;
  background:#f0fbfa;
  border:1px solid #d9f2f0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
}

.icon-box img{
  width:54px;
}

/* TEXT */
.process-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.process-card p{
  font-size:15px;
  color:#61758a;
}

/* ?? ARROW FIX */
.connector{
  position:absolute;
  top:50%;
  right:-30px; /* ?? adjust */
  transform:translateY(-50%);
  display:flex;
  z-index:10;
}

.connector span{
  width:10px;
  height:10px;
  border-top:3px solid #00b7b2;
  border-right:3px solid #00b7b2;
  transform:rotate(45deg);
  animation:arrowMove 1.2s infinite;
}

.connector span:nth-child(2){
  margin-left:-3px;
  animation-delay:0.2s;
}

@keyframes arrowMove{
  0%{opacity:0.3;transform:translateX(-4px) rotate(45deg);}
  50%{opacity:1;}
  100%{opacity:0.3;transform:translateX(6px) rotate(45deg);}
}

/* LAST REMOVE */
.process-item:last-child .connector{
  display:none;
}

/* RESPONSIVE */
@media(max-width:991px){
  .process-row{
    grid-template-columns:repeat(2,1fr);
  }
  .connector{
    display:none;
  }
}

@media(max-width:575px){
  .process-row{
    grid-template-columns:1fr;
  }
}  .process-section{
      max-width:1320px;
      margin:auto;
    }

    .section-head{
      text-align:center;
      margin-bottom:45px;
    }

    .section-head h2{
      font-size:38px;
      font-weight:800;
      margin-bottom:10px;
    }

    .section-head p{
      max-width:760px;
      margin:auto;
      color:#607487;
      line-height:1.7;
      font-size:15px;
    }

    .process-grid{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:24px;
    }

    .process-card{
      position:relative;
      background:#fff;
      border-radius:24px;
      padding:22px;
      box-shadow:0 16px 35px rgba(31,47,70,0.08);
      border:1px solid #e8efef;
      transition:0.35s ease;
      overflow:hidden;
    }

    .process-card:hover{
      transform:translateY(-10px);
      box-shadow:0 24px 45px rgba(31,47,70,0.14);
    }

    .process-card::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:6px;
      background:linear-gradient(180deg,#00b7b2,#59ddd6);
    }

    .step-no{
      position:absolute;
      right:16px;
      top:14px;
      font-size:36px;
      font-weight:900;
      color:rgba(0,183,178,0.10);
      line-height:1;
    }

    .card-top{
      display:flex;
      align-items:center;
      gap:14px;
      margin-bottom:16px;
      padding-right:38px;
    }

    .icon-wrap{
      width:74px;
      height:74px;
      min-width:74px;
      border-radius:20px;
      background:linear-gradient(135deg,#eafcfa,#dff8f6);
      border:1px solid #d3f1ef;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
    }

    .icon-wrap img{
      width:44px;
      height:44px;
      object-fit:contain;
    }

    .card-top h3{
      font-size:20px;
      line-height:1.35;
      font-weight:800;
      color:#223248;
    }

    .process-card p{
      font-size:15px;
      line-height:1.75;
      color:#607487;
      margin-bottom:18px;
    }

    .card-bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:auto;
    }

    .mini-tag{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:8px 14px;
      border-radius:999px;
      background:#effaf9;
      color:#00a9a4;
      font-size:12px;
      font-weight:700;
      letter-spacing:0.5px;
      text-transform:uppercase;
      border:1px solid #daf3f1;
    }

    .flow-arrow{
      width:42px;
      height:42px;
      border-radius:50%;
      background:#f4fbfb;
      border:1px solid #d8efed;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 8px 18px rgba(0,0,0,0.05);
    }

    .flow-arrow span{
      width:10px;
      height:10px;
      border-top:3px solid #00b7b2;
      border-right:3px solid #00b7b2;
      transform:rotate(45deg);
      display:block;
      animation:moveArrow 1.1s infinite ease-in-out;
    }

    @keyframes moveArrow{
      0%{opacity:.35; transform:translateX(-3px) rotate(45deg);}
      50%{opacity:1; transform:translateX(1px) rotate(45deg);}
      100%{opacity:.35; transform:translateX(5px) rotate(45deg);}
    }

    .process-card:last-child .flow-arrow{
      display:none;
    }

    @media (max-width: 1199px){
      .process-grid{
        grid-template-columns:repeat(2,1fr);
      }
    }

    @media (max-width: 575px){
      body{
        padding:40px 15px;
      }

      .section-head h2{
        font-size:30px;
      }

      .process-grid{
        grid-template-columns:1fr;
        gap:16px;
      }

      .process-card{
        padding:18px;
        border-radius:20px;
      }

      .icon-wrap{
        width:66px;
        height:66px;
        min-width:66px;
      }

      .icon-wrap img{
        width:38px;
        height:38px;
      }

      .card-top h3{
        font-size:18px;
      }

      .process-card p{
        font-size:14px;
      }
    }@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght,CRSV@100..900,0&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Questrial&display=swap');


.geologica-<uniquifier> {
  font-family: "Geologica", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "CRSV" 0,
    "SHRP" 0;
}

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

body {
  background: linear-gradient(180deg, #fff 0%, #388f8f23 49.04%);
}

body img {
  width: 100%;
}

/* HAMBURGER */
.hamburger {
  font-size: 28px;
  background: var(--primaycolor);
  color: white;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1001;
  user-select: none;
  display: none; /* Show only in mobile */
}

.hamburger::before {
  content: "☰";
}

.hamburger.open::before {
  content: "✖";
}

/* NAVIGATION BAR (Desktop Default) */
nav {
  background: var(--primaycolor);
  margin: 0px auto;
  
  color: white;
 
  text-transform: uppercase;
  padding: 10px 1rem;
}


.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.1rem 1.5rem;
}

.logo img {
  height: 90px;
  /* width: auto; */
  border-radius: 5px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  position: relative;
}

nav a:hover {
  color: #ffd700;
}

nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

/* ================= MOBILE HEADER ================= */
.mobile-header {
  display: none;
}

/* MOBILE VIEW STYLES */
@media (max-width: 768px) {
  /* Sticky Mobile Header */
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--primaycolor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    z-index: 1002;
  }

  /* Mobile Logo */
  .mobile-logo img {
    height: 70px;
    width: auto;
    border-radius: 7px;
  }

  /* Show hamburger in mobile header */
  .hamburger {
    position: static;
    margin-left: auto;
    display: block;
  }

  /* Hide desktop logo in mobile */
  .desktop-logo {
    display: none;
  }

  /* Slide-in Navigation */
  nav {
    position: fixed;
    top: 70px; /* below mobile-header */
    right: -100%;
    width: 70%;
    height: 100vh;
    background: var(--primaycolor);
    z-index: 1000;
    transition: right 0.3s ease;
    padding-left: 0;
  }

  nav.open {
    right: 0;
  }

  .nav-container {  
    flex-direction: column;
    align-items: flex-start;
    padding-top: 2rem;
  }

  .logo {
    padding-left: 2rem;
    margin-bottom: 1rem;
  }

  nav ul {
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    align-items: flex-start;
    width: 100%;
  }
}

/* ========BODY SECTION START ============== */



/* General Styles */
:root {
--heading-color :#273036;
--background : #f3f4f5;
--primaycolor : #058686;
--white : #fff;
}

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

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primaycolor);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


body {
  font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
      -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
   font-family: 'Poppins', sans-serif;
}
h1,h2,h3 {
    font-weight: 600 !important;
}
h4,h5,h6 {
    font-weight: 400 !important;
}

a{
    text-decoration: none;
    color: var(--primaycolor);
}
p{
    color: #6c757d;
    font-family: 'Poppins', sans-serif;
}
.bttn {
    background-color: var(--primaycolor);
    box-shadow: 5px 5px #31335a4e;
    color: #fff;
    transition: 0.5s all ease-in-out;
}
.bttn:hover {
    background-color: var(--primaycolor);
    color: #fff;
    transform: translateY(5px);
    box-shadow: none;
}


/*=========================button start ================================*/
/* From Uiverse.io by satyamchaudharydev */ 
.button {
  position: relative;
  transition: all 0.3s ease-in-out;
  /*box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);*/
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  /*background-color: rgb(0 107 179);*/
  background-color: var(--primaycolor);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  /*font-weight: bold;*/
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.button:hover .icon {
  transform: translate(4px);
}

.button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

/*=========================button ends================================*/
/* ===========preloadrer========= */
/* Pre-loader styles */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid var(--primaycolor);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===========preloadrer========= */

.title {
    /* width: 30%; */
    background-color: var(--primaycolor);
    color: var(--white) !important;
    font-size: 22px;
    font-weight: bold;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 5px 10px 1px  #16161714;
    /* border-bottom: 2px solid var(--primaycolor);
    border-bottom-style: dotted; */
    text-align: center;
    text-transform: uppercase;
}


/* ============ hero section =================== */
.hero-section {
  width: 100%;
  height: 80vh;
 
}
.hero-section video {
  width: 100%;
  height: 100%;
  object-fit: cover;
 
}





/* ===============================about section start ==================== */
.about-section {
  padding: 50px 1.5rem;
}
.about-section img {
  /* border-radius: 20px; */
}
.about-txt {
  /* border: 2px solid red; */
}
.about-txt h4 , .project-box h4 {
  background-color: var(--heading-color);
  box-shadow: 2px 5px #0586863e;
  width: 25%;
  font-size: 1rem;
  border-radius: 10px;
  color: var(--white);
  padding: 10px 20px;
  margin-bottom: 1.1rem;
}
.project-box h4 {
  width: 25%;
}
.aminities-section .project-box h4 {
  width: 25%;
}
.about-txt ul li , .config-box ul li{
  list-style: none;
  line-height: 30px;
}
.about-txt ul, .config-box ul  {
  padding-left: 0;
}
.about-txt ul li i, .config-box ul li i {
  color: var(--primaycolor);
  margin-right: 5px;
}
.btn {
  width: 250px;
  height: 50px;
  background-color: var(--primaycolor);
  color: var(--white);
  border-radius: 12px;
  transition: 0.2s all ease-in-out;
}
.btn i {
  margin-left: 8px;
}
.btn:hover {
  background-color: var(--heading-color) !important;
  color: var(--white);
}
.btn:hover  i {
  margin-left: 9px;
}
/* ===============================about section ends ==================== */
.project-section {
  padding: 0px  1.2rem;
}
.project {
  /* background-color: #fff; */
  border-radius: 15px;
  /* margin: 50px auto; */
  padding: 50px 1.5rem;
}
.project-image img {
  border-radius: 10px;
  height: 555px;
}
.project-details {
  background-color: #fff;
  box-shadow: 2px 5px #058686;
  padding: 30px 20px;
  border-radius: 15px;
  border: 1px solid var(--heading-color);
}
.project-status-box {
  margin-bottom: 15px;
  border-radius: 15px;
}
.project-status-box h5 {
  font-size: 1rem;
  font-weight: 500 !important;
  color: var(--heading-color);
  margin-bottom: 5px;
}
.project-status-box p {
  margin-bottom: 0;
}

/* ============development section start=================== */
.development-heading h4 {
  width: 30%;
}
.development-approach {
  padding: 50px  2rem;
}
.development-box {
  background-color: #fff;
  padding: 1rem;
  border-radius: 15px;
  border-bottom: 2px solid var(--primaycolor);
  transition: 0.2s all ease-in-out;
}
.development-box:hover {
 transform: translateY(10px);
 cursor: pointer;
 border-bottom: none;
}
.development-box:hover img {
  width: 72px;
  height: 72px;
}
.development-box:hover  h5 {
  color: var(--primaycolor) !important;
}

.development-box img {
  width: 70px;
  height: 70px;
  /* border-radius: 50px; */
 margin-top: 10px;
 margin-bottom: 1rem;
}
.development-box h5 {
   font-weight: 500 !important;
   color: var(--heading-color);
   margin-bottom: 10px;
}
/* ============development section ends=================== */

/* =============gallrey section start ========================== */
.gallery-section{
padding: 50px  2rem;
/* border: 2px solid red; */
margin: auto;
}
.gallery-inner {
  background-color: var(--white);
  padding: 50px 20px;
  border-radius: 15px;
}
.gallrey-box img {
  border-radius: 15px;
}
/* =============gallrey section ends ========================== */


/* ==========contact us section start=================== */
.contact-section {
   padding: 50px 1.25rem;
   padding-bottom: 10px;
}
.contact-box {
  background-color: var(--white);
  padding: 1.5rem 1rem ;
  border-radius: 1rem;
  border-bottom: 2px solid var(--primaycolor);
  transition: 0.2s all ease-in-out;
  cursor: pointer;
}
.contact-box:hover {
  border-bottom: none;
  transform: translateY(8px);
}
.contact-box:hover.contact-box .i-box i {
  font-size: 1.3rem;
  transform: rotate(360deg) !important;
}
.contact-information {
  padding: 50px 1rem;
}
.contact-box .i-box {
  background-color: var(--heading-color);
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  margin-bottom: 1rem;
  transition: 0.3s all ease-in;
}
.contact-box .i-box i {
  color: var(--white);
  font-size: 1.2rem;
}
.contact-box a {
  color: #6c757d !important;
}
.contact-box h4 {
  font-weight: 500 !important;
  color: var(--primaycolor);
  font-size: 1.3rem;
  margin-bottom: 10px;
}
/* ==========contact us section ends=================== */

/* ==========contact form ================= */
.contact-form-section {
  padding: 0px 1.25rem;
  padding-bottom: 50px;
}
.contact-form {
  background-color: var(--white);
  border-radius: 15px;
  padding: 30px 20px;
}
.contact-form input , textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #0586867e;
  padding: 8px;
  /* border-radius: 7px; */
  /* padding-left: 10px; */
}
.contact-form ::placeholder {
  color: #6c757dec;
}
.form-box {
  margin-bottom: 15px;
}
.contact-form label {
  font-weight: 500 !important;
  color: var(--heading-color);
}

/* ==========contact form ================= */
/* ==========footer start================ */
.footer {
   
   color: #fff;
}
.footer a {
  color: var(--white);
}
.footer-box div h4 {
  font-weight: bold;
}
.footer-box{
  width: 100%;
  padding: 50px 30px;
  background-color: var(--primaycolor);
  
}

.footer-nav h4 , .footer-address h4 {
  margin-bottom: 1.5rem;
}
.footer .all-icons .social-box {
 display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  background-color: white;
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px;
  box-shadow: 2px 5px 1px #07312f90;
}
.footer .all-icons .social-box i {
  font-size: 21px;
  color: var(--primaycolor);
}
.footer-about {
   /* border: 2px solid red; */
   padding-right: 3rem;
}
.footer-about p {
  color: var(--white);
  margin-top: 1rem;
}


.footer-nav {
  /* border: 2px solid red; */
}
.footer-nav h4 {
  font-weight: bold;
}
.footer-nav ul {
  padding-left: 0;
}
.footer-nav ul li {
  list-style: none;
  line-height: 50px;
 
}
.footer-nav ul li a {
 color: var(--white) !important;
 transition: 0.2s all ease-in;
}
.footer-nav ul li a:hover {
  letter-spacing: 1.1px;
}

.footer-icon-box{
    /* border: 2px solid red; */
    margin-bottom: 1rem;
    align-items: center;
}

.footer-icon-box .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  background-color: white;
  width: 50px !important;
  height: 50px !important;
  border-radius: 15px;
  box-shadow: 2px 5px 1px #07312f90;
}
.footer-icon-box .icon i {
  font-size: 21px;
  color: var(--primaycolor);
}

.copyright {
    color: var(--white) !important;
    background-color: #058686;
    padding: 10px 15px;
    border-top: 1px solid;
   
}
.copyright a {
  color: var(--white);
}
/* ==========footer ends================ */


/* ==================RESPONSIVNESS START HERE========================== */

/* ==================RESPONSIVNESS ENDS HERE========================== */




/* =============heading section ===================== */

.heading-section {
  width: 98%;
  height: 50vh;
  background-image: url("./images/contact.webp");
  background-position: top center;
  padding: 10px 1.2rem;
  border-radius: 15px;
  margin-top: 10px;
}

/* =============heading section ===================== */


/* ==========project page start==================== */
.project-hero {
  width: 98%;
  height: 50vh;
  border-radius: 15px;
  background-color: var(--heading-color);
  color: var(--white);
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-box {
  /* border: 2px solid red; */
  padding: 20px;
  position: relative;
}
.title-box img {
  width: 550px;
  position: absolute;
  right: 0;
  top: 0;
}

.title-box p {
  color: #f1f1f1cd;
}

.configuration-section {
  width: 98%;
  margin: 10px auto;
}
.configuration-section .project-box h4 {
  width: 18%;
}
.config-box {
  background-color: var(--white);
  border-radius: 15px;
  padding: 1.5rem 1rem;
  transition: 0.3s all ease-in-out;
  cursor: pointer;
  border: 2px solid transparent;
}

.config-box:hover {
   background: linear-gradient(45deg, #fff 0%, #6ebdbd12 49.04%);
   border: 2px solid var(--heading-color);
   transform: scale(0.99);
   /* color: var(--whi); */
}

.config-box h3 {
  font-size: 1.5rem;
  color: var(--primaycolor);
}
.config-box h5 {
  font-size: 1rem;
  margin-top: 5px;
  margin-bottom: 1rem;
}


.aminity-box {
  background-color: var(--white);
  padding: 1.5rem 1.2rem;
  border-radius: 15px;
  box-shadow: 2px 5px 1px #05868620;
  transition: 0.3s all ease;
}
.aminity-box:hover {
  background-color: var(--primaycolor);
  color: var(--white) !important;
  box-shadow: none;
  cursor: pointer;
  transition: 0.3s all ease;
  transform: translateY(5px);
}
.aminity-box:hover.aminity-box p {
  color: var(--white) !important;
}
.aminity-box img {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
}
.aminity-box h4 {
  font-weight: 500 !important;
}
.aminity-box p {
  width: 80%;
  margin-top: 10px;
}
/* ==========project page ends==================== */


/* ================about page start here================== */
.mobile-break {
  display: inline;
}
.why-box {
  padding: 2.7rem 2rem;
  transition: 0.3s all ease-in-out;
}
.why-box h3 {
  font-size: 3rem;
  color: var(--primaycolor);
  text-shadow: 2px 5px #2730362c;
}
.why-box p {
    width: 80%;
}
.why-box:hover h3 {
  color: var(--white) !important;
  text-shadow: none;
  font-size: 3.25rem;
}
.why-box h4 {
  text-transform: uppercase;
  
}

/* ================about page ends here================== */


/* ==============responsive start here ================= */
@media screen and (max-width: 768px) {
  .hero-section {
    padding: 15px;
    margin-top: 95px;
  }
  .about-txt {
      margin-top: 1.5rem;
  }
  .about-txt h4, .project-box h4 {
    width: 35% !important;
  }
  .project {
    padding: 50px 0rem;
  }
  .project-box h4 {
    width:50% !important;
  }
  .project-image img { 
    height: auto ;
    margin-bottom: 1rem;
  }
  .development-approach {
    padding: 50px 1rem;
  }
  .development-heading h4 {
  width: 70% !important;
 }
 .d-box{
  margin-bottom: 1.5rem;
 }
 .gallery-section {
  padding: 30px 1rem;
 }
 .gallery-inner p {
  width: 100% !important;
 }
 .contact-section {
padding: 30px 0.5rem;
 }
 .c-box{
  margin-bottom: 1.5rem;
 }
 /* .contact-information{
  padding: 30px 1rem;
 } */
 .contact-form-section {
    padding: 0px 1rem;
  }
  .contact-map  {
    padding: 0.5rem;
  }
  .contact-form {
    margin: 2rem 0rem;
    margin-bottom: 5rem;
  }
  .footer-nav h4 {
    margin-bottom: 1rem;
  }
  .footer-nav , .footer-address {
    margin: 1rem 0;
  }
  .copyright {
    flex-direction: column;
    text-align: center;
  }
  .title-box {
    padding-bottom: 0;
  }
  .title-box img {
    position: relative;
    width: 80%;
  }
}

@media screen and (max-width: 500px) {
    .hero-section video {
        border: 1px solid var(--heading-color);
    }
    .title-box img {
    position: relative;
    width: 95%;
  }
  .btn {
    width: 95%;
  }

   .about-txt h4, .project-box h4 {
    width: 60% !important;
  }
   .mobile-break {
    display: block;   /* forces line break */
    margin-top: 4px;  /* optional spacing */
  }

  .why-box {
        padding: 2.7rem 1.5rem;
  }
  .why-box h4 {
      font-size: 1.2rem;
  }
  .why-box p {
      width: 100% !important;
  }
  
  .footer-icon-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-icon-box .icon {
   margin-bottom: 0.5rem;
  }
  .footer-icon-box {
    margin-bottom: 1.3rem !important;
  }
.copyright a {
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 400px) {

  .development-heading h4 {
    width: 90% !important;
  }
   .copyright a {
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 350px) {
  .project-box h4 {
    width: 80% !important;
  }
  .development-heading h4 {
    font-size: 0.9rem;
    width: 95% !important;
  }
  .contact-box a {
    font-size: 0.8rem;
  }
  .footer-box {
        padding: 50px 20px;
  }
}
/* ==============responsive ends here ================= */


/* ============project page responsive start here================== */
@media screen and (max-width: 768px) {
  .project-hero {
    width: 95%;
    height: 75vh;
    margin-top: 7.5rem;
  }
  .g-heading {
    width: 70%;
  }

  .project-hero p {
    width: 100% !important;
  }
  .configuration-section .project-box h4 {
    width: 85% !important;
  }
  .config-box {
    margin-bottom: 1rem;
    border: 2px solid var(--heading-color);
  }
  .config-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .aminity-p {
    width: 95% !important;
  }
  .aminities-section .project-box h4 {
    width: 85% !important;
  }
  .contact-map {
    padding: 0.5rem 0rem;
  }
}
@media screen and (max-width: 500px) {}
@media screen and (max-width: 400px) {}
@media screen and (max-width: 350px) {}

/* ============project page responsive ends here================== */

/* ============contact page responsive start here================== */
@media screen and (max-width: 768px) {
  .heading-section {
    margin-top: 7rem;
    width: 95%;
  }
}
/* ============contact page responsive end here================== */


 .spacer {
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #333;
    }

    .facts-section {
      padding: 80px 20px;
      background: linear-gradient(90deg, #043030 0%, #058686 100%);
      color: #fff;
      overflow: hidden;
    }

    .facts-container {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
    }

    .section-title {
      font-size: 35px;
      font-weight: 700;
      margin-bottom: 15px;
      color: #fff;
    }

    .section-subtitle {
      max-width: 850px;
      margin: 0 auto 50px;
      font-size: 18px;
      line-height: 1.7;
      color: #d9e8ef;
    }

    .facts-wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
    }

    .fact-box {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      padding: 35px 20px;
      backdrop-filter: blur(6px);
      transition: all 0.5s ease;
      opacity: 0;
      transform: translateY(40px);
    }

    .fact-box.show {
      opacity: 1;
      transform: translateY(0);
    }

    .fact-box:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.14);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    .fact-icon {
      font-size: 42px;
      margin-bottom: 15px;
      line-height: 1;
    }

    .fact-number {
      font-size: 44px;
      font-weight: bold;
      color: #ffd54f;
      margin-bottom: 10px;
    }

    .fact-title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
      color: #fff;
    }

    .fact-text {
      font-size: 15px;
      line-height: 1.7;
      color: #dbe7ef;
    }

    @media (max-width: 991px) {
      .facts-wrapper {
        grid-template-columns: repeat(2, 1fr);
      }

      .section-title {
        font-size: 38px;
      }
    }

    @media (max-width: 575px) {
      .facts-wrapper {
        grid-template-columns: 1fr;
      }

      .section-title {
        font-size: 30px;
      }

      .section-subtitle {
        font-size: 16px;
      }

      .fact-number {
        font-size: 36px;
      }
    }
 




 .process-section{
      max-width:1280px;
      margin:auto;
    }

    .section-head{
      text-align:center;
      margin-bottom:55px;
    }

    .section-head h2{
      font-size:38px;
      font-weight:800;
      margin-bottom:12px;
      color:#1f2f46;
    }

    .section-head p{
      max-width:760px;
      margin:auto;
      font-size:15px;
      line-height:1.75;
      color:#61758a;
    }

    .timeline{
      position:relative;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:24px;
      align-items:start;
    }

    .timeline::before{
      content:"";
      position:absolute;
      top:54px;
      left:12%;
      width:76%;
      height:3px;
      background:linear-gradient(90deg,#00b7b2,#73e4dd);
      border-radius:30px;
      z-index:0;
    }

    .timeline-item{
      position:relative;
      text-align:center;
      z-index:1;
    }

    .circle-step{
      width:110px;
      height:110px;
      margin:0 auto 22px;
      border-radius:50%;
      background:rgba(255,255,255,0.55);
      backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,0.7);
      box-shadow:0 18px 35px rgba(31,47,70,0.08);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      position:relative;
      transition:0.35s ease;
    }

    .timeline-item:hover .circle-step{
      transform:translateY(-8px) scale(1.03);
      box-shadow:0 22px 42px rgba(31,47,70,0.14);
    }

    .circle-step::after{
      content:"";
      position:absolute;
      bottom:-10px;
      left:50%;
      transform:translateX(-50%);
      width:18px;
      height:18px;
      border-radius:50%;
      background:#00b7b2;
      border:4px solid #edf7f6;
      box-shadow:0 8px 18px rgba(0,183,178,0.18);
    }

    .circle-step img{
      width:42px;
      margin-bottom:8px;
    }

    .step-no{
      font-size:13px;
      font-weight:800;
      color:#00a8a4;
    }

    .content-card{
      background:rgba(255,255,255,0.72);
      backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,0.75);
      border-radius:24px;
      padding:24px 20px;
      box-shadow:0 16px 35px rgba(31,47,70,0.07);
      transition:0.35s ease;
      min-height:220px;
    }

    .content-card:hover{
      transform:translateY(-8px);
    }

    .content-card h3{
      font-size:20px;
      font-weight:800;
      margin-bottom:10px;
    }

    .content-card p{
      font-size:15px;
      color:#61758a;
    }

    /* 🔥 ARROW INSIDE BOX */
    .arrow-box{
      margin-top:20px;
      display:flex;
      justify-content:center;
      gap:4px;
    }

    .arrow-box span{
      width:10px;
      height:10px;
      border-top:3px solid #00b7b2;
      border-right:3px solid #00b7b2;
      transform:rotate(45deg);
      animation:arrowMove 1.2s infinite;
    }

    .arrow-box span:nth-child(2){
      animation-delay:0.2s;
      margin-left:-3px;
    }

    @keyframes arrowMove{
      0%{opacity:0.3; transform:translateX(-4px) rotate(45deg);}
      50%{opacity:1;}
      100%{opacity:0.3; transform:translateX(6px) rotate(45deg);}
    }

    .timeline-item:last-child .arrow-box{
      display:none;
    }

@media (max-width: 991px){
  .process-section{
    padding: 0 10px;
  }

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

  .timeline::before{
    display: none;
  }

  .content-card{
    min-height: auto;
  }
}

@media (max-width: 575px){
  .process-section{
    padding: 0 8px;
  }

  .section-head{
    margin-bottom: 35px;
  }

  .section-head h2{
    font-size: 28px;
    line-height: 1.3;
  }

  .section-head p{
    font-size: 14px;
    line-height: 1.6;
  }

  .timeline{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .timeline-item{
    width: 100%;
  }

  .circle-step{
    width: 90px;
    height: 90px;
    margin: 0 auto 16px;
  }

  .circle-step img{
    width: 34px;
    margin-bottom: 6px;
  }

  .circle-step::after{
    width: 14px;
    height: 14px;
    bottom: -8px;
  }

  .step-no{
    font-size: 11px;
  }

  .content-card{
    padding: 18px 14px;
    border-radius: 18px;
    min-height: auto;
  }

  .content-card h3{
    font-size: 18px;
    line-height: 1.4;
  }

  .content-card p{
    font-size: 14px;
    line-height: 1.7;
  }

  .arrow-box{
    margin-top: 14px;
  }

  .arrow-box span{
    width: 8px;
    height: 8px;
    border-top: 2px solid #00b7b2;
    border-right: 2px solid #00b7b2;
  }
}


/* ===== CUSTOM DROPDOWN CSS ===== */

.custom-dropdown{
  position: relative;
}

.custom-dropdown-menu{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  padding: 8px 0;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.custom-dropdown-menu li{
  display: block;
  width: 100%;
  list-style: none;
}

.custom-dropdown-menu li a{
  display: block;
  width: 100%;
  padding: 10px 18px;
  color: #333;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
}

.custom-dropdown-menu li a:hover{
  background: #f3f3f3;
  color: #0f8b8d;
}

/* desktop hover */
@media (min-width: 992px){
  .custom-dropdown:hover .custom-dropdown-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* mobile */
@media(max-width:991px){

  .custom-dropdown-menu{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    min-width: 100%;
    margin-top: 8px;
    box-shadow: none;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 0;
  }

  .custom-dropdown.active .custom-dropdown-menu{
    display: flex;
    flex-direction: column;
  }

  .custom-dropdown-menu li a{
    color: #fff;
    padding: 10px 14px;
  }

  .custom-dropdown-menu li a:hover{
    background: rgba(255,255,255,0.12);
    color: #fff;
  }

  .dropdown-toggle{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .dropdown-arrow{
    transition: 0.3s ease;
  }

  .custom-dropdown.active .dropdown-arrow{
    transform: rotate(180deg);
  }
}



.section-title1{
  font-size:32px;
  font-weight:700;
  color:#1f2f46;
  position:relative;
  display:inline-block;
  margin-bottom:40px;
}

.section-title1::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:60px;
  height:3px;
  background:#00b7b2;
  border-radius:10px;
}


.section-title2{
  font-size:32px;
  font-weight:700;
  color:#1f2f46;
  position:relative;
  display:inline-block;
  margin-bottom:20px;
}

.section-title2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:60px;
  height:3px;
  background:#00b7b2;
  border-radius:10px;
}


 

.why-section{
  padding:60px 20px;
  background:#f8f9fb;
}

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

.why-wrapper{
  display:flex;
  gap:30px;
  align-items:center;
}

/* IMAGE */
.why-image{
  flex:1;
  position:relative;
}

.why-image img{
  width:100%;
  border-radius:15px;
}

.play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.8);
  padding:15px;
  border-radius:50%;
  font-size:20px;
}

/* CONTENT */
.why-content{
  flex:1;
}

.tag{
  background:#c7e7e7;
  color:#058686;
  padding:5px 10px;
  font-size:12px;
  border-radius:5px;
}

.why-content h2{
  font-size:32px;
  margin:15px 0;
}

.why-content p{
  color:#666;
  line-height:1.7;
}

/* HIGHLIGHT BOX */
.highlight-box{
  margin-top:20px;
  background:#058686;
  color:#fff;
  padding:20px;
  border-radius:10px;
  text-align:center;
}

.highlight-box h3{
  font-size:40px;
}

/* FEATURES */
.why-features{
  display:flex;
  gap:20px;
  margin-top:40px;
}

.feature-box{
  flex:1;
  background:#fff;
  padding:25px 20px;
  border-radius:12px;
  box-shadow:0 5px 15px rgba(0,0,0,0.08);
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;   /* 🔥 center align */
  justify-content:center;
	border: 1px solid;
}

/* ICON CENTER */
.feature-box .icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:#058686;   /* theme color */
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:24px;
  margin-bottom:12px;
}


@media(max-width:768px){
  .why-wrapper{
    flex-direction:column;
  }

  .why-features{
    flex-direction:column;
  }
}

 /* review google */



.trust-review-section{
  padding: 70px 20px;
  background: #f7f7f7;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.trust-review-container{
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 35px;
  align-items: start;
}

.trust-left{
  min-width: 0;
}

.trust-tag{
  display: inline-block;
  font-size: 13px;
  letter-spacing: 1px;
  color: #315e6c;
  text-transform: uppercase;
  border-top: 1px solid #9db2bb;
  padding-top: 10px;
  margin-bottom: 20px;
}

.trust-left h2{
  font-size: 32px;
  line-height: 1.1;
  color: #2f6676;
  margin: 0 0 20px;
  font-weight: 500;
  max-width: 760px;
}

.trust-left p{
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  max-width: 800px;
}

.review-slider-wrap{
  position: relative;
  margin-top: 35px;
  padding: 0 28px;
}

.review-slider-viewport{
  overflow: hidden;
  width: 100%;
}

.review-slider-track{
  display: flex;
  gap: 20px;
  transition: transform 0.55s ease;
  will-change: transform;
}

.review-card{
  flex: 0 0 calc(50% - 10px);
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  min-height: 220px;
  box-sizing: border-box;
}

.review-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.review-top img{
  width: 22px;
  height: 22px;
}

.stars,
.right-stars{
  color: #f4b400;
  font-size: 22px;
  letter-spacing: 2px;
}

.review-card p{
  font-size: 13px;
  line-height: 1.6;
  color: #111;
  margin-bottom: 25px;
}

.review-user{
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #8fa0ad;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.review-user h4{
  margin: 0;
  font-size: 14px;
  color: #000;
}

.review-user span{
  color: #666;
  font-size: 15px;
}

.review-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: none;
  background: #dfdfdf;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  cursor: pointer;
  font-size: 22px;
  z-index: 3;
}

.review-nav.prev{
  left: -5px;
}

.review-nav.next{
  right: -5px;
}

.trust-right{
  background: #fff;
  border-radius: 25px;
  padding: 35px 28px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.trust-right h3{
  margin: 18px 0 28px;
  font-size: 21px;
  color: #333;
  letter-spacing: 1px;
}

.google-box-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
}

.google-logo-box,
.qr-box{
  width: 110px;
  height: 110px;
  border: 2px solid #222;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.google-logo-box img{
  width: 70px;
}

.qr-box img{
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.trust-right p{
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin-bottom: 10px;
}

.review-count{
  font-size: 32px;
  color: #666;
  font-weight: 500;
}	

@media (max-width: 991px){
  .trust-review-container{
    grid-template-columns: 1fr;
  }

  .trust-left h2{
    font-size: 38px;
  }

  .review-card{
    flex: 0 0 100%;
  }

  .trust-right{
    max-width: 400px;
    margin: auto;
    width: 100%;
  }
}

@media (max-width: 575px){
  .trust-left h2{
    font-size: 30px;
  }

  .trust-left p,
  .review-card p,
  .trust-right p{
    font-size: 15px;
  }

  .google-box-wrap{
    flex-direction: column;
  }

  .review-count{
    font-size: 48px;
  }

  .review-slider-wrap{
    padding: 0 20px;
  }
}


.google-review-btn{
  display:inline-block;
  margin-top:20px;
  padding:12px 24px;
  background:#2f6676;
  color:#fff;
  text-decoration:none;
  border-radius:10px;
  font-size:16px;
}


 /* banner about us */


.inner-banner{
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}

/* Image */
.banner-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* Dark overlay */
.banner-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* Content center */
.banner-content{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 20px;
}

/* Heading */
.banner-content h1{
  font-size: 48px;
  margin-bottom: 12px;
  font-weight: 700;
}

/* Paragraph */
.banner-text{
  max-width: 700px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 15px;
}

/* Breadcrumb */
.breadcrumb{
  font-size: 14px;
}

.breadcrumb a{
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}

.breadcrumb span{
  color: #ff9800;
  font-weight: 600;
}

/* Mobile */
@media (max-width:768px){
  .banner-content h1{
    font-size: 32px;
  }

  .banner-text{
    font-size: 14px;
  }
}



.nav-no-space {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

 
/* FACT AND FIGUR SECTION about*/

 .ff-section {
  
  background: #f6f8fb;
}

.ff-heading {
  max-width: 1200px;
  margin: 0 auto 30px;
}

.ff-heading h2 {
  font-size: 32px;
  font-weight: 800;
  color: #22304a;
  margin: 0;
  line-height: 1.1;
}

.ff-heading span {
  display: inline-block;
  width: 65px;
  height: 4px;
  background: #10b7b4;
  border-radius: 10px;
  margin-top: 10px;
}

.ff-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, #ececef, #e4e7eb);
  box-shadow: 0 10px 35px rgba(23, 33, 52, 0.08);
}

.ff-card {
  position: relative;
  text-align: center;
  padding: 45px 20px 38px;
  border-right: 1px solid rgba(34, 48, 74, 0.08);
  transition: all 0.35s ease;
  opacity: 0;
  transform: translateY(45px);
}

.ff-card:last-child {
  border-right: none;
}

.ff-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 4px;
  background: linear-gradient(to right, #10b7b4, #22304a);
  border-radius: 0 0 10px 10px;
  opacity: 0;
  transition: 0.35s ease;
}

.ff-card:hover {
  background: #ffffff;
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(23, 33, 52, 0.12);
}

.ff-card:hover::before {
  opacity: 1;
}

.ff-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #10b7b4, #22304a);
  color: #fff;
  font-size: 28px;
  box-shadow: 0 10px 20px rgba(16, 183, 180, 0.2);
}

.ff-card h3 {
  margin: 0 0 10px;
  font-size: 54px;
  line-height: 1;
  font-weight: 800;
  color: #1c2740;
}

.ff-card p {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #5e6a7e;
}

.ff-section.active .ff-card {
  opacity: 1;
  transform: translateY(0);
}

.ff-section.active .ff-card:nth-child(1) {
  transition-delay: 0.1s;
}
.ff-section.active .ff-card:nth-child(2) {
  transition-delay: 0.25s;
}
.ff-section.active .ff-card:nth-child(3) {
  transition-delay: 0.4s;
}
.ff-section.active .ff-card:nth-child(4) {
  transition-delay: 0.55s;
}

@media (max-width: 991px) {
  .ff-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ff-card:nth-child(2) {
    border-right: none;
  }

  .ff-card:nth-child(1),
  .ff-card:nth-child(2) {
    border-bottom: 1px solid rgba(34, 48, 74, 0.08);
  }

  .ff-heading h2 {
    font-size: 40px;
  }
}

@media (max-width: 576px) {
  .ff-grid {
    grid-template-columns: 1fr;
  }

  .ff-card {
    border-right: none;
    border-bottom: 1px solid rgba(34, 48, 74, 0.08);
    padding: 35px 20px;
  }

  .ff-card:last-child {
    border-bottom: none;
  }

  .ff-heading h2 {
    font-size: 32px;
  }

  .ff-card h3 {
    font-size: 42px;
  }
}





/* MISION VISON*/




 .mvv-section{
      max-width:1200px;
      margin:auto;
    }

    .mvv-heading{
      text-align:center;
      margin-bottom:40px;
    }

    .mvv-heading h2{
      font-size:36px;
      color:#111;
      margin-bottom:10px;
    }

    .mvv-heading p{
      font-size:16px;
      color:#666;
      max-width:700px;
      margin:auto;
      line-height:1.7;
    }

    .mvv-wrapper{
      display:flex;
      gap:30px;
      justify-content:center;
      flex-wrap:wrap;
    }

    .mvv-card{
      position:relative;
      width:320px;
      background:#efefef;
      border-radius:14px;
      padding:70px 25px 35px;
      text-align:center;
      box-shadow:8px 8px 18px rgba(0,0,0,0.18);
      transition:0.35s ease;
      overflow:hidden;
    }

    .mvv-card:hover{
      transform:translateY(-10px);
    }

    .mvv-card::after{
      content:"";
      position:absolute;
      left:0;
      bottom:0;
      width:100%;
      height:12px;
      border-radius:0 0 14px 14px;
    }

    .mvv-card.vision::after{
      background:#f39c12;
    }

    .mvv-card.mission::after{
      background:#ff1744;
    }

    .mvv-card.values::after{
      background:#1abc9c;
    }

    .icon-circle{
      width:90px;
      height:90px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto 20px;
      background:#fff;
      font-size:34px;
      position:relative;
      z-index:1;
    }

    .vision .icon-circle{
      border:3px solid #f39c12;
      color:#f39c12;
    }

    .mission .icon-circle{
      border:3px solid #ff1744;
      color:#ff1744;
    }

    .values .icon-circle{
      border:3px solid #1abc9c;
      color:#1abc9c;
    }

    .mvv-card h3{
      font-size:30px;
      margin-bottom:15px;
      color:#111;
      letter-spacing:1px;
      font-weight:700;
    }

    .mvv-card p{
      font-size:15px;
      line-height:1.8;
      color:#666;
    }

    @media(max-width:992px){
      .mvv-card{
        width:280px;
      }
    }

    @media(max-width:768px){
      .mvv-heading h2{
        font-size:28px;
      }

      .mvv-wrapper{
        gap:20px;
      }

      .mvv-card{
        width:100%;
        max-width:340px;
      }
    }


/* our projects*/

/* SECTION */
.pg-wrap{
 
  margin:60px auto;
  padding:0 15px;
}

/* TITLE */
.pg-title{
  text-align:center;
  font-size:32px;
  margin-bottom:30px;
}

/* GRID */
.pg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

/* CARD */
.pg-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
}

.pg-card img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
}

/* HOVER OVERLAY */
.pg-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:0.3s;
  cursor:pointer;
}

.pg-card:hover .pg-overlay{
  opacity:1;
}

/* PLUS BUTTON */
.pg-plus{
  width:55px;
  height:55px;
  border-radius:50%;
  background:#fff;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:bold;
}

/* POPUP */
.pg-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

/* POPUP BOX */
.pg-popup-box{
  position:relative;
  max-width:90vw;
  max-height:90vh;
}

/* POPUP IMAGE */
.pg-popup-box img{
  max-width:90vw;
  max-height:90vh;
  object-fit:contain;
  display:block;
  border-radius:10px;
}

/* CLOSE BUTTON (RIGHT TOP) */
.pg-close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:768px){
  .pg-grid{
    grid-template-columns:1fr;
  }

  .pg-card img{
    height:220px;
  }
}


.pg-plus{
  width:55px;
  height:55px;
  border-radius:50%;
  background:#fff;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:bold;
  transform: scale(0.7);
  transition: 0.3s ease;
}

.pg-card:hover .pg-plus{
  transform: scale(1);
}

/* Hover effect */
.pg-plus:hover{
  background:#00584d;
  color:#fff;
  transform: scale(1.15);
}

.pg-card img{
  transition: transform 0.5s ease;
}

.pg-card:hover img{
  transform: scale(1.1) rotate(1deg);
}



/* PROJECTS */



 .services-section{
      padding:60px 20px;
      display:flex;
      justify-content:center;
    }

    .services-container{
      max-width:900px;
      width:100%;
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:30px;
    }

    .service-card{
      background:#fff;
      border-radius:10px;
      overflow:hidden;
      box-shadow:0 10px 30px rgba(0,0,0,0.08);
      transition:0.4s ease;
    }

    .service-card:hover{
      transform:translateY(-8px);
    }

    .service-image{
      position:relative;
      overflow:hidden;
    }

    .service-image img{
      width:100%;
      height:260px;
      object-fit:cover;
      transition:0.6s;
    }

    .service-card:hover img{
      transform:scale(1.08);
    }

    .service-image::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.1));
    }

    .service-icon{
      position:absolute;
      top:15px;
      left:15px;
      width:50px;
      height:50px;
      background:#058686;
      color:#fff;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      z-index:2;
    }

    .service-content{
      padding:20px;
    }

    .service-content h3{
      font-size:20px;
      margin-bottom:10px;
    }

    .service-content p{
      font-size:15px;
      line-height:1.6;
      margin-bottom:15px;
    }

    .read-more-btn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:#058686;
      color:#fff;
      padding:12px 20px;
      font-weight:bold;
      text-decoration:none;
      border-radius:4px;
      transition:0.3s;
		font-size: 13px;
    }

    .read-more-btn:hover{
      background:#07312F;
    }

    .read-more-btn i{
      transition:0.3s;
    }

    .read-more-btn:hover i{
      transform:translateX(5px);
    }

    /* Mobile */
    @media(max-width:768px){
      .services-container{
        grid-template-columns:1fr;
      }
    }






/* ON GOING PROJECTS */




.premium-project{
  padding:70px 18px;
  background:
    radial-gradient(circle at top left, rgba(0,151,143,.18), transparent 35%),
    linear-gradient(180deg,#ffffff,#eaf8f7);
}

.pp-container{
  max-width:1280px;
  margin:auto;
}

/* Common */
.pp-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#ffffff;
  border:1px solid rgba(0,137,130,.25);
  color:#008982;
  padding:9px 18px;
  border-radius:50px;
  font-size:14px;
  font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  margin-bottom:22px;
}

.pp-label::before{
  content:"";
  width:9px;
  height:9px;
  background:#008982;
  border-radius:50%;
}

.pp-title{
  font-size:42px;
  line-height:1.15;
  max-width:760px;
  margin-bottom:16px;
  font-weight:800;
  color:#122a31;
}

.pp-subtitle{
  max-width:780px;
  font-size:16px;
  line-height:1.8;
  color:#60777d;
  margin-bottom:35px;
}

.pp-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg,#009d95,#006e69);
  color:#fff;
  text-decoration:none;
  padding:14px 24px;
  border-radius:50px;
  font-size:14px;
  font-weight:800;
  box-shadow:0 16px 35px rgba(0,137,130,.32);
  transition:.35s;
}

.pp-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 45px rgba(0,137,130,.42);
}

/* Hero */
.pp-hero{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:34px;
  align-items:center;
  margin-bottom:90px;
}

.pp-image-wrap{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  min-height:540px;
  box-shadow:0 35px 90px rgba(0,0,0,.16);
}

.pp-image-wrap img{
  width:100%;
  height:100%;
  min-height:540px;
  object-fit:cover;
  display:block;
  transition:.7s;
}

.pp-image-wrap:hover img{
  transform:scale(1.06);
}

.pp-image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55));
}

.pp-floating-card{
  position:absolute;
  left:28px;
  bottom:28px;
  z-index:2;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-radius:24px;
  padding:22px;
  max-width:360px;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

.pp-floating-card h3{
  font-size:24px;
  margin-bottom:8px;
}

.pp-floating-card p{
  font-size:14px;
  line-height:1.7;
  color:#587077;
}

.pp-info-panel{
  background:#ffffff;
  border-radius:32px;
  padding:34px;
  box-shadow:0 25px 80px rgba(0,0,0,.09);
  border:1px solid rgba(0,137,130,.12);
}

.pp-info-item{
   
  border-bottom:1px solid #e4eeee;
}

.pp-info-item:last-child{
  border-bottom:0;
}

.pp-info-item span{
  display:block;
  color:#008982;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  margin-bottom:6px;
}

.pp-info-item p{
  color:#435a61;
  line-height:1.7;
  font-size:15px;
}

/* Config */
.pp-section{
  margin-bottom:90px;
}

.pp-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:35px;
}

.pp-section-head h2{
  font-size:36px;
  font-weight:800;
}

.pp-section-head p{
  max-width:520px;
  color:#62767b;
  line-height:1.7;
}

.pp-config-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}

.pp-config-card{
  background:#fff;
  border-radius:28px;
  padding:24px;
  min-height:300px;
  position:relative;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.06);
  transition:.4s;
  border:1px solid rgba(0,137,130,.12);
}

.pp-config-card::before{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  right:-50px;
  top:-50px;
  background:rgba(0,137,130,.12);
  border-radius:50%;
}

.pp-config-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.pp-config-card h3{
  font-size:22px;
  color:#008982;
  margin-bottom:8px;
  position:relative;
}

.pp-config-card .size{
  font-size:13px;
  color:#73878c;
  font-weight:700;
  margin-bottom:18px;
}

.pp-config-card ul{
  list-style:none;
  position:relative;
}

.pp-config-card li{
  position: relative;
  padding-left: 32px;
  list-style: none;
  font-size: 14px;
  margin: 10px 0;
  color: #40565c;
}

.pp-config-card li::before{
  content: "\f058";   /* Font Awesome circle-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 15px;
  color: #008982;
}

/* Amenities */
.pp-amenity{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:45px;
  align-items:center;
}

.pp-stack{
  position:relative;
  height:500px;
}

.pp-stack img{
  position:absolute;
  width:64%;
  height:310px;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 25px 60px rgba(0,0,0,.16);
  border:7px solid #fff;
  transition:.45s;
}

.pp-stack img:nth-child(1){
  left:0;
  top:0;
}

.pp-stack img:nth-child(2){
  right:0;
  bottom:55px;
}

.pp-stack img:nth-child(3){
  left:60px;
  bottom:0;
  width:46%;
  height:210px;
}

.pp-stack img:hover{
  transform:scale(1.04) rotate(-1deg);
  z-index:3;
}

.pp-amenity-box{
  background:#0d8e87;
  border-radius:34px;
  padding:42px;
  color:#fff;
  box-shadow:0 30px 80px rgba(0,137,130,.25);
}

.pp-amenity-box .pp-label{
  background:rgba(255,255,255,.15);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:none;
}

.pp-amenity-box .pp-label::before{
  background:#fff;
}

.pp-amenity-box h2{
  font-size:36px;
  margin-bottom:14px;
}

.pp-amenity-box p{
  line-height:1.8;
  opacity:.9;
  margin-bottom:25px;
	color: #ffffff;
}

.pp-amenity-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
  list-style:none;
  margin-bottom:28px;
}

.pp-amenity-list li{
  background:rgba(255,255,255,.13);
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
}

 
.pp-amenity-list li{
  position: relative;
 
  list-style: none;
}

 

/* Gallery */
.pp-gallery-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-auto-rows:240px;
  gap:20px;
}

.pp-gallery-item{
  border-radius:28px;
  overflow:hidden;
  position:relative;
  box-shadow:0 18px 45px rgba(0,0,0,.1);
}

.pp-gallery-item.big{
  grid-row:span 2;
}

.pp-gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s;
}

.pp-gallery-item:hover img{
  transform:scale(1.12);
}

.pp-gallery-item::after{
  content:"+";
  position:absolute;
  inset:0;
  background:rgba(0,137,130,.45);
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-size:50px;
  opacity:0;
  transition:.35s;
}

.pp-gallery-item:hover::after{
  opacity:1;
}

/* Specs */
.pp-spec-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.pp-spec-card{
  background:#fff;
  border-radius:28px;
  padding:26px;
  min-height:220px;
  border:1px solid rgba(0,137,130,.12);
  box-shadow:0 18px 45px rgba(0,0,0,.06);
  transition:.4s;
}

.pp-spec-card:hover{
  transform:translateY(-10px);
  background:#0d8e87;
  color:#fff;
}

.pp-spec-icon{
  width:58px;
  height:58px;
  background:#eefafa;
  border-radius:18px;
  padding:10px;
  margin-bottom:18px;
}

.pp-spec-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.pp-spec-card h3{
  font-size:21px;
  margin-bottom:10px;
}

.pp-spec-card p{
  font-size:14px;
  line-height:1.7;
  color:#5d7378;
}

.pp-spec-card:hover p{
  color:rgba(255,255,255,.88);
}

/* Floating */
.pp-whatsapp{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:99;
  background:#25d366;
  color:#fff;
  text-decoration:none;
  padding:15px 22px;
  border-radius:50px;
  font-weight:800;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}

/* Responsive */
@media(max-width:1100px){
  .pp-config-grid,
  .pp-spec-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:900px){
  .pp-hero,
  .pp-amenity{
    grid-template-columns:1fr;
  }

  .pp-gallery-grid{
    grid-template-columns:1fr 1fr;
  }

  .pp-gallery-item.big{
    grid-row:span 1;
  }
}

@media(max-width:575px){
  .premium-project{
    padding:45px 14px;
  }

  .pp-title{
    font-size:32px;
  }

  .pp-section-head{
    display:block;
  }

  .pp-section-head h2{
    font-size:29px;
    margin-bottom:10px;
  }

  .pp-image-wrap,
  .pp-image-wrap img{
    min-height:360px;
  }

  .pp-floating-card{
    left:15px;
    right:15px;
    bottom:15px;
  }

  .pp-info-panel,
  .pp-amenity-box{
    padding:24px;
    border-radius:24px;
  }

  .pp-config-grid,
  .pp-spec-grid,
  .pp-amenity-list,
  .pp-gallery-grid{
    grid-template-columns:1fr;
  }

  .pp-stack{
    height:auto;
    display:grid;
    gap:15px;
  }

  .pp-stack img{
    position:static;
    width:100% !important;
    height:230px !important;
  }

  .pp-gallery-grid{
    grid-auto-rows:230px;
  }
}



/* footer new css */


 
/* Footer */
.pad-footer {
  background: linear-gradient(135deg,#0f7f7a,#0a5f5a);
  color: #fff;
  padding: 60px 60px 20px;
  font-family: 'Poppins', sans-serif;
  animation: fadeInUp 1s ease;
}

.pad-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 40px;
}

/* Fade animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Columns */
.pad-col {
  transition: transform 0.3s ease;
}

.pad-col:hover {
  transform: translateY(-8px);
}

.pad-col h2 {
  margin: 0;
  font-size: 24px;
}

.pad-col h3 {
  margin-bottom: 15px;
	font-size: 20px;
}

.pad-tagline {
  font-style: italic;
  font-size: 14px;
  margin-bottom: 15px;
}

.pad-text {
  font-size: 14px;
  line-height: 1.6;
	color: #ffffff;
}

/* Links */
.pad-links {
  list-style: none;
  padding: 0;
}

.pad-links li {
  margin-bottom: 10px;
}

.pad-links a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  position: relative;
  transition: 0.3s;
	font-size: 16px;
}

/* underline animation */
.pad-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: #fff;
  transition: 0.3s;
}

.pad-links a:hover::after {
  width: 100%;
}

.pad-links a:hover {
  color: #ffd86b;
}

/* Social Icons */
.pad-social {
  margin-top: 15px;
}

.pad-social a {
  display: inline-block;
  width: 38px;
  height: 38px;
  background: #058686;
  color: #ffffff;
  border-radius: 10px;
  text-align: center;
  line-height: 38px;
  margin-right: 8px;
  font-size: 16px;
  transition: 0.4s;
}

/* hover animation */
.pad-social a:hover {
  transform: translateY(-6px) rotate(8deg);
  background: #ffd86b;
  color: #000;
}

/* Contact */
.pad-contact {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.pad-icon {
  width: 42px;
  height: 42px;
  background: #fff;
  color: #0f7f7a;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-right: 12px;
  transition: 0.3s;
}

/* icon hover */
.pad-contact:hover .pad-icon {
  transform: scale(1.15);
  background: #ffd86b;
  color: #000;
}

/* Bottom */
.pad-bottom {
  border-top: 1px solid rgba(255,255,255,0.3);
  margin-top: 30px;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 13px;
}

/* Responsive */
@media(max-width: 900px) {
  .pad-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width: 600px) {
  .pad-container {
    grid-template-columns: 1fr;
  }
}


.pad-col {
  color: #fff;
}

.pad-col h3 {
  color: #fff;
}

.pad-contact {
  color: #fff;
  text-decoration: none;
}



/* blog page css */


.xyvblogzone-wrapper{
  padding:80px 6%;
  background:#f8f8f8;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

.xyvblogzone-heading{
  text-align:center;
  margin-bottom:60px;
}

.xyvblogzone-mini{
  color:#ff6b1a;
  font-size:18px;
  font-weight:600;
  letter-spacing:1px;
  position:relative;
  display:inline-block;
  margin-bottom:14px;
}

.xyvblogzone-mini::before,
.xyvblogzone-mini::after{
  content:'';
  position:absolute;
  width:70px;
  height:2px;
  background:#d9d9d9;
  top:50%;
}

.xyvblogzone-mini::before{
  left:-90px;
}

.xyvblogzone-mini::after{
  right:-90px;
}

.xyvblogzone-title{
  font-size:68px;
  font-weight:800;
  line-height:1.1;
  color:#071133;
  margin-bottom:18px;
}

.xyvblogzone-subtitle{
  color:#666;
  font-size:20px;
  max-width:850px;
  margin:auto;
}

.xyvblogzone-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:30px;
}

.xyvblogzone-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s ease;
}

.xyvblogzone-card:hover{
  transform:translateY(-12px);
  box-shadow:0 18px 40px rgba(0,0,0,0.14);
}

.xyvblogzone-imgbox{
  height:320px;
  overflow:hidden;
}

.xyvblogzone-imgbox img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.5s ease;
}

.xyvblogzone-card:hover img{
  transform:scale(1.08);
}

.xyvblogzone-content{
  padding:28px;
}

.xyvblogzone-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
  gap:10px;
  flex-wrap:wrap;
}

.xyvblogzone-category{
  color:#ff6b1a;
  font-size:15px;
  font-weight:600;
  text-transform:uppercase;
}

.xyvblogzone-date{
  color:#777;
  font-size:15px;
}

.xyvblogzone-date i{
  margin-right:6px;
}

.xyvblogzone-cardtitle{
  font-size:20px;
  line-height:1.3;
  color:#071133;
  margin-bottom:18px;
  transition:0.3s;
}

.xyvblogzone-card:hover .xyvblogzone-cardtitle{
  color:#ff6b1a;
}

.xyvblogzone-text{
  color:#666;
  line-height:1.9;
  font-size:17px;
  margin-bottom:28px;
}

.xyvblogzone-btn{
  text-decoration:none;
  color:#ff6b1a;
  font-size:18px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:0.3s;
}

.xyvblogzone-btn:hover{
  gap:16px;
}

@media(max-width:992px){

  .xyvblogzone-title{
    font-size:52px;
  }

  .xyvblogzone-cardtitle{
    font-size:30px;
  }

}

@media(max-width:768px){

  .xyvblogzone-title{
    font-size:40px;
  }

  .xyvblogzone-subtitle{
    font-size:16px;
  }

  .xyvblogzone-imgbox{
    height:260px;
  }

  .xyvblogzone-cardtitle{
    font-size:26px;
  }

}



/* 404 page */

.zxq404masterbox{
  width:100%;
  padding:40px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.zxq404card{
 
  width:100%;
   
  border-radius:30px;
  padding:70px 40px;
  text-align:center;
  
  position:relative;
  overflow:hidden;
  animation:zxqfadeup 1s ease;
}

/* TOP GLOW */

.zxq404card::before{
  content:'';
  position:absolute;
  top:-150px;
  left:-150px;
  width:300px;
  height:300px;
  background:linear-gradient(135deg,#d8b4fe,#93c5fd);
  border-radius:50%;
  opacity:0.25;
  filter:blur(80px);
}

.zxq404card::after{
  content:'';
  position:absolute;
  bottom:-150px;
  right:-150px;
  width:300px;
  height:300px;
  background:linear-gradient(135deg,#93c5fd,#d8b4fe);
  border-radius:50%;
  opacity:0.25;
  filter:blur(80px);
}

/* 404 NUMBER */

.zxq404number{
  font-size:180px;
  font-weight:800;
  line-height:1;
  margin-bottom:20px;
  background:linear-gradient(135deg,#d8b4fe,#93c5fd);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:zxqfloat 3s ease-in-out infinite;
}

/* TITLE */

.zxq404title{
  font-size:42px;
  font-weight:700;
  color:#2d2d2d;
  margin-bottom:22px;
  text-transform:uppercase;
  letter-spacing:1px;
}

/* DESCRIPTION */

.zxq404desc{
  max-width:650px;
  margin:auto;
  color:#666;
  font-size:22px;
  line-height:1.8;
  margin-bottom:45px;
}

/* BUTTONS */

.zxq404btnwrap{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}

.zxq404btn{
  padding:18px 38px;
  border-radius:60px;
  text-decoration:none;
  font-size:18px;
  font-weight:600;
  transition:0.4s ease;
  border:2px solid #6bb3e6;
}

/* PRIMARY */

.zxq404primary{
  background:#6bb3e6;
  color:#fff;
}

.zxq404primary:hover{
  background:#4d9ed8;
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(107,179,230,0.4);
}

/* OUTLINE */

.zxq404outline{
  background:transparent;
  color:#6bb3e6;
}

.zxq404outline:hover{
  background:#6bb3e6;
  color:#fff;
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(107,179,230,0.35);
}

/* ANIMATIONS */

@keyframes zxqfadeup{
  from{
    opacity:0;
    transform:translateY(60px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes zxqfloat{
  0%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-10px);
  }
  100%{
    transform:translateY(0px);
  }
}

/* RESPONSIVE */

@media(max-width:768px){

  .zxq404card{
    padding:50px 25px;
  }

  .zxq404number{
    font-size:120px;
  }

  .zxq404title{
    font-size:30px;
  }

  .zxq404desc{
    font-size:17px;
  }

}

.whatsapp-btn{
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 55px;
    height: 55px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.whatsapp-btn:hover{
    transform: scale(1.08);
    transition: 0.3s;
}



#scrollTopBtn{
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 20px;
    cursor: pointer;
    display: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: 0.3s;
}

#scrollTopBtn:hover{
    transform: scale(1.1);
}

i.fa-solid.fa-arrow-up {
    margin-left: 17px;
    margin-top: 15px;
}



/* virtual-section */

.virtual-section{
    width:100%;
    padding:90px 20px;
    background:#ffffff;
}

.virtual-container{
    max-width:1200px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

/* LEFT */

.virtual-content{
    width:45%;
}

.virtual-tag{
    display:inline-block;
    background:#111;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:13px;
    margin-bottom:20px;
    letter-spacing:1px;
}

.virtual-title{
    font-size:48px;
    line-height:1.2;
    color:#111;
    margin-bottom:20px;
}

.virtual-text{
    font-size:17px;
    line-height:1.8;
    color:#666;
}

.virtual-btn{
    display:inline-block;
    margin-top:30px;
    padding:15px 36px;
    background:#111;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-size:16px;
    transition:0.3s ease;
}

.virtual-btn:hover{
    background:#25D366;
    transform:translateY(-3px);
}

/* RIGHT */

.virtual-gallery{
    width:50%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.virtual-img{
    width:100%;
    height:220px;
    overflow:hidden;
    border-radius:22px;
}

.virtual-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s ease;
    display:block;
}

.virtual-img:hover img{
    transform:scale(1.08);
}

/* MOBILE */

@media(max-width:991px){

.virtual-container{
    flex-direction:column;
}

.virtual-content,
.virtual-gallery{
    width:100%;
}

.virtual-title{
    font-size:36px;
}

}

@media(max-width:600px){

.virtual-gallery{
    grid-template-columns:1fr;
}

.virtual-img{
    height:240px;
}

}





.hero-slider {
  width: 100%;
  height: 520px;
  position: relative;
  overflow: hidden;
  background: #111;
}

.slider-track,
.slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  display: none;
  animation: fadeSlide 0.8s ease-in-out;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.1)
  );
  z-index: 1;
}

.slide-content {
  position: absolute;
  top: 50%;
  left: 7%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 580px;
  color: #fff;
}

.slide-content h1 {
  font-size: 56px;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 18px;
}

.slide-content p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 28px;
  color: #f1f1f1;
}

.slide-content a {
  display: inline-block;
  padding: 14px 32px;
  background: #ffffff;
  color: #111;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: 0.3s ease;
}

.slide-content a:hover {
  background: #111;
  color: #fff;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  font-size: 22px;
  cursor: pointer;
  transition: 0.3s ease;
}

.slider-btn:hover {
  background: #111;
  color: #fff;
}

.slider-btn.prev {
  left: 25px;
}

.slider-btn.next {
  right: 25px;
}

.slider-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 10px;
}

.slider-dots span {
  width: 11px;
  height: 11px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s ease;
}

.slider-dots span.active {
  width: 28px;
  border-radius: 20px;
  background: #fff;
}

@keyframes fadeSlide {
  from {
    opacity: 0.4;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Tablet */
@media (max-width: 991px) {
  .hero-slider {
    height: 430px;
  }

  .slide-content h1 {
    font-size: 42px;
  }

  .slide-content p {
    font-size: 16px;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .hero-slider {
    height: 360px;
  }

  .slide-content {
    left: 5%;
    right: 5%;
    max-width: 100%;
    text-align: center;
  }

  .slide::after {
    background: rgba(0, 0, 0, 0.55);
  }

  .slide-content h1 {
    font-size: 30px;
  }

  .slide-content p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .slide-content a {
    padding: 11px 24px;
    font-size: 14px;
  }

  .slider-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .slider-btn.prev {
    left: 12px;
  }

  .slider-btn.next {
    right: 12px;
  }
}