* { margin:0; padding:0; box-sizing: border-box; font-family: "Inter", sans-serif; scroll-behavior: smooth;}
html, body { width:100%; height:100%;  font-family: 'Poppins', sans-serif; background: #000; color: #fff;
} 
/* ===== Loader Container ===== */
    .loader {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #8e1c2b, #c02238, #8e1c2b);
      background-size: 200% 200%;
      animation: bgMove 6s ease-in-out infinite;
      z-index: 9999;
      transform-origin: right center;
  will-change: transform, opacity;
  perspective: 800px;
    }

    /* ===== Background subtle gradient motion ===== */
    @keyframes bgMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* ===== Loader Heading ===== */
    .loader h1 {
      font-size: 5vw;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 2px;
      background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, rgba(255,255,255,0.2) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 200% auto;
      animation: shine 1.2s linear infinite;
      opacity: 0;
      text-align: center;
    }

    /* ===== Shine effect moving through text ===== */
    @keyframes shine {
      0% { background-position: 100% center; }
      100% { background-position: -100% center; }
    }

    .loader .percent {
      font-size: 1.4vw;
      margin-top: 1.5rem;
      color: rgba(255,255,255,0.8);
      opacity: 0;
      letter-spacing: 1px;
    }

    /* Optional smooth fade-out transition */
    .fade-out {
      animation: fadeOut 1s ease forwards;
    }

    @keyframes fadeOut {
      to { opacity: 0; visibility: hidden; }
    }
section { width: 100vw; height: 100vh;  position: relative;  
}
main { display: flex; overflow: hidden; height: 100vh;
}
.panel {
flex: 0 0 100vw;
width: 100vw;
height: 100vh;
position: relative;
 
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ✅ Overlap panels by 1px to eliminate subpixel gaps */
.panel:not(:last-child) {
margin-right: -2px;
}
.container { max-width: 80%;  margin: auto; z-index: 2;
}
.position-relative{ position: relative;
}
.text-center{
text-align: center;
}
.h-100{ 
height: 100%;
}
.w-100{
width: 100%;
}
.wid-6{
width: 60%; 
}
.wid-6{
width: 50%; 
}
.wid-4{
width: 40%; 
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-center {
justify-content:center;
}
.flex-column {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.header{  
position: fixed;
z-index: 9;
padding: 50px 0 0;
}
.home {
background: linear-gradient(120deg, #001030, #01265A, #001030);
background-size: 200% 200%;
animation: gradientMove 8s ease-in-out infinite;
background: url('../img/home-bg.webp') center center / cover no-repeat;
position: relative;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
} 
.timeline-nav {
width: 100%;
position: fixed;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 8;
bottom:50px
}
.timeline-nav ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 80%;
max-width: 1100px;
position: relative;
padding: 0;
margin: 0;
}
/* Horizontal dotted line behind items */
.timeline-nav ul::before {
content: "";
position: absolute;
top: 0;
left: calc(50% / 6); /* start from center of first li */
right: calc(50% / 6); /* end at center of last li */
border-top: 2px dotted rgba(255, 255, 255, 0.4);
z-index: 1;
}
/* Each menu item */
.timeline-nav li {
position: relative;
text-align: center;
flex: 1;
z-index: 2;
}
/* The vertical connector line */
.timeline-nav li::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 25px;
width: 1px;
background-color: rgba(255, 255, 255, 0.5);
}
/* The menu text pill */
.timeline-nav li span {
display: inline-block;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
padding: 6px 16px;
border-radius: 25px;
color: #fff;
font-size: 14px;
font-weight: 500;
margin-top: 30px; /* creates gap from the line */
transition: all 0.3s ease;
backdrop-filter: blur(8px);
cursor: pointer;
}
/* Active state */
.timeline-nav li.active span {
background: #fff;
color: #0a0a0a;
font-weight: 600;
box-shadow: 0 0 10px rgba(255,255,255,0.6);
}
.timeline-nav li.active::before {
background-color: #fff;
}
/* Hover effect */
.timeline-nav li:hover span {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
color:#fff
}
/* Responsive tweaks */
@media (max-width: 768px) {
.timeline-nav ul {
width: 95%;
}
.timeline-nav li span {
font-size: 13px;
padding: 5px 12px;
}
}
.legal-btn {
display: inline-flex;
align-items: center;
gap: 10px; 
color: #1b2b3a;
border: none; 
cursor: pointer;
text-decoration: none;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.legal-btn .arrow {
      width: 30px;
    height: 30px;
    padding: 5px;
transition: transform 0.4s ease, color 0.4s ease;
transform: rotate(-45deg);
}
.legal-btn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #5c8aff, #2ed0ff);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: inherit;
z-index: 0;
}
.legal-btn span, 
.legal-btn .arrow {
position: relative;
z-index: 1;
background: white;
border-radius: 40px;
}
.legal-btn span{
padding: 10px 20px;
font-weight: 600;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.legal-btn:hover .arrow {
transform: rotate(0deg);
}
.home-text h1{
font-size: 50px;
line-height: 1.2;
margin-bottom: 16px;
font-weight: 300;
}
.home-text {
width: 30%;
z-index: 2;
position: absolute;
transform-origin: center center; /* ✅ important */
will-change: transform;          /* ✅ tells browser to animate transforms smoothly */
perspective: 800px;              /* adds slight depth effect */
}
.home-text p{
font-size: 20px;
margin-bottom: 24px;
font-weight: 300;
}
.home:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #01265A;
background: linear-gradient(262deg,rgba(1, 30, 61, 0) 0%, rgba(1, 38, 90, 1) 100%);
z-index: 1;
}
.home:before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #01265A;
background: linear-gradient(90deg,rgba(1, 30, 61, 0) 0%, #011E3D 100%);
z-index: 1;
}
.home-note-wrap {
position: absolute;
right: 50px;
bottom:100px;
z-index: 2;
}
.home-note {
width: 500px;
background: linear-gradient(90deg, #ffffff57 0%, #2727272e 100%);
border-radius: 20px;
padding: 40px;
}
/* .home-note {
width: 500px;
background: #fff;
background: linear-gradient(90deg, #ffffff57 0%, #2727272e 100%);
border-radius: 20px;
padding: 40px;
right: 50px;
bottom: 200px;
z-index: 2;
position: absolute;
} */
.home-note p{
color: #fff;
font-size: 16px;
margin-bottom: 24px;
font-weight: 300;
line-height: 1.5;
}
.circle {
width: 460px; /* adjust size */
height: 460px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #007bff, #001030);
box-shadow: 0 0 40px rgba(0, 85, 255, 0.6);
right: 0;
left: 0;
margin: auto;
filter: blur(5px);
z-index: 0;
}
.aboutcircle-box{
position: absolute;
width: 100%;
left: 0;
}
.wavewrap{
position: absolute;
width: 100%;
left: 0;
}
.about {
background: #011E3D;
position: relative;
overflow: hidden;
}
.about .bg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, #011E3D 40%, #0047D6 90%);
opacity: 0;
z-index: 0;
}
.about-text{
width: 600px;
z-index: 1;
}
.about-mission{
width: 600px;
background-color: rgba(255, 255, 255, 0.13);
border-radius: 10px;
padding: 100px 40px; 
margin: 0 10px;
margin-top: 100px;
}
.about-vision{
width: 600px;
background-color: rgba(255, 255, 255, 0.13);
border-radius: 10px;
padding: 100px 40px;
margin: 0 10px;
}
.about-text h1{
font-size: 40px;
font-weight: 300;
}
.about-text p{
font-size: 16px;
margin-top: 20px;
line-height: 1.6;
font-weight: 300;
} 
.about-mission h2,.about-vision h2{
font-size: 40px;
font-weight: 300;
}
.about-mission p,.about-vision p{
font-size: 16px;
margin-top: 20px;
line-height: 1.6;
font-weight: 300;
}
.about-mission svg,.about-vision svg{ 
margin-right: 20px; 
}

/* ---- Service Section Gradient Circles ---- */
.services-commercial {
position: relative; 
padding-left: 80px;
}
.bg-layer-blue {
position: absolute;
top: 0;
left: -2px;
width: 50%;
height: 100%;
overflow: hidden;
z-index: 1;
background: linear-gradient(90deg, #0047D6  30%, #a8000000 100%);
}
.bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
/* Common circle layer styles */
.circle-layer {
position: absolute;
top: 50%;
left: -5%; /* start offscreen for GSAP animation */
transform: translate(-40%, -50%);
border-radius: 50%;
background:linear-gradient(
223deg, #B02533  19%, #FFC687 90%);
opacity: 0;
}
/* Layer size variations */
.layer1 { width: 1100px; height: 1100px; opacity: 0.7; }
.layer2 { width: 1000px; height: 1000px; opacity: 0.6; }
.layer3 { width: 900px; height: 900px; opacity: 0.5; }
.layer4 { width: 800px; height: 800px; opacity: 0.4; }
.layer5 { width: 700px; height: 700px; opacity: 0.3; }
.services-commercial .container {
position: relative;
z-index: 2; /* keep content above background */
}
.commercialservice{
    z-index: 2;
}
/* COMMERCIAL SERVICES */
.services-commercial  {
background: linear-gradient(90deg, hsl(353.39deg 58.53% 42.55%)  60%, hsl(354.12deg 46.36% 56.86%) 100%);
}
/* PERSONAL SERVICES */
.services-personal {
background:linear-gradient(90deg, hsl(354.12deg 46.36% 56.86%)  0%, #000 70%);  
}
.svc-wrap { width: 100%; }
.svc-title {
font-weight: 300; font-size: 40px; margin-bottom: 50px; letter-spacing: .5px;
padding-left: 20px;
}
.svc-grid {
display:flex ;
justify-content: space-between;
align-items: start;
}
.service_hover{
  color: #fff;
  text-decoration: none;
}
/* .svc-card {
    width: 300px;
position: relative;
padding: 22px 20px; 
border-radius: 14px;
backdrop-filter: blur(6px);
transform: translateY(40px) scale(.98);
opacity: 0;
will-change: transform, opacity;
transition: transform .35s ease, box-shadow .35s ease;
} */
/* --- Default service card --- */
.svc-card {
  position: relative;
  /* padding: 22px 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15); */
  border-radius: 14px;
  /* backdrop-filter: blur(6px); */
  transform: scale(0.95);
  opacity: 0.6;
  transition: all 0.4s ease;
  padding: 22px 30px 40px;
  width: 300px;
  overflow: hidden;

}
.svc-card::before  {
  content: "";
  position: absolute;
  inset: 0;
   background: linear-gradient(135deg, hsl(6.85deg 100% 50.2%) 0%, hsl(355, 82%, 40%) 65%, #013FB6 135%);
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  border-radius: inherit;
}
/* --- Hover/Active visual style --- */
/* .svc-card.active {
   padding: 22px 30px 40px;
  background: linear-gradient(135deg, hsl(6.85deg 100% 50.2%) 0%, hsl(355, 82%, 40%) 65%, #013FB6 135%);
  opacity: 1;
  transform: scale(1); 
  color: #fff;
} */
.svc-card.active::before,.svc-card:hover::before
 {
  opacity: 1;
  transform: translateY(0%);
}
.svc-card.active { 
  color: #fff;
}
 
/* optional subtle text color balance */
.svc-card.active h3,
.svc-card.active p {
  color: #fff;
}

/* .svc-card:hover {
transform: translateY(-4px) scale(1);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
} */
.svc-icn { font-size: 26px; margin-bottom: 10px; opacity:.9;position: relative;z-index: 2; }
.svc-card h3 { font-size: 25px; margin-bottom: 15px; font-weight: 300;position: relative;z-index: 2; }
.svc-card p { font-size: 15px; line-height: 1.5; opacity: .85; margin-bottom: 14px; position: relative;z-index: 2;}
.svc-cta { font-size: 14px; text-decoration: none; background:#fff; color:#0a1d35; padding:8px 12px; border-radius: 999px;margin-top: 20px; display: inline-block;position: relative;z-index: 2;}
 .svc-card .svc-icn{
   opacity: 0;
   transition: all 0.4s ease;
 }
 .svc-card.active .svc-icn,.svc-card:hover .svc-icn{
    opacity: 1;
   transition: all 0.4s ease;
 }
  .svc-card .svc-cta{
   opacity: 0;
   transition: all 0.4s ease;
 }
  .svc-card.active .svc-cta,.svc-card:hover .svc-cta  {
    opacity: 1;
   transition: all 0.4s ease;
 }
 .svc-card1{
    margin-top: 100px;
 }
  .svc-card2{
    margin-top: 100px;
 }
 .svc-card4{
    margin-top: 50px;
 }

 .globe-orbit-wrap {
  position: absolute;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  perspective: 1000px; 
  top: 10%;
  left: 5%;
}

.globe {
  position: relative;
  width: 100%;
  height: 100%;
   transform-style: preserve-3d;
  transform: rotateX(0deg);
  top: 10%;
}

/* Main sphere with subtle glow */
.inner-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  /* background: radial-gradient(circle at 30% 30%, #E41E04, #dd9b9b 70%, #2b0505 100%); */
  background: linear-gradient(
152deg, #E41E04 26%, #fff 112%); 
  box-shadow: inset -10px -10px 25px rgba(255, 120, 100, 0.3),
              0 0 40px rgba(255, 60, 30, 0.5);
  transform: translate(-50%, -50%); 
  filter: blur(10px);
  opacity:0.3 ;
}
 


/* All orbits same size */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(75deg);
  transform-style: preserve-3d;
  opacity: 0.8;
}

/* Stack each orbit vertically by Y offset */
.orbit1 { transform: translate(-50%, calc(-50% - 120px)) rotateX(75deg); }
.orbit2 { transform: translate(-50%, calc(-50% - 80px)) rotateX(75deg); }
.orbit3 { transform: translate(-50%, calc(-50% - 40px)) rotateX(75deg); }
.orbit4 { transform: translate(-50%, -50%) rotateX(75deg); }
.orbit5 { transform: translate(-50%, calc(-50% + 40px)) rotateX(75deg); }
.orbit6 { transform: translate(-50%, calc(-50% + 80px)) rotateX(75deg); }
.orbit7 { transform: translate(-50%, calc(-50% + 120px)) rotateX(75deg); }

/* Soft rotation animation for the sphere */
 .globe {
  visibility: hidden; /* hides it until JS reveals it */
}
.globe, .orbit, .inner-sphere {
  transition: none !important;
  will-change: transform, opacity;
}

/* The glowing trail effect */
.orbit::before {
  content: "";
  position: absolute;

}
.pvc-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* hide scrollbars */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0rem 2rem;
}

.pvc-grid {
  display: flex;
  flex-wrap: nowrap; 
}

.pvc-card {
  flex: 0 0 300px; /* fixed card width */
  /* background: rgba(255,255,255,0.05); */
  /* border-radius: 20px; */
  padding: 2rem 50px;
  color: #fff;
  /* backdrop-filter: blur(6px); */
  transition: all 0.6s ease-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative; 
  background: transparent; /* start transparent */
}
.pvc-card .pvc_hover{
  color: #fff;
  text-decoration: none;
}
.pvc-card:nth-child(odd){
  padding-top:15%;
}
.pvc-card::after{
  content: "";
  position: absolute; 
  background: linear-gradient(135deg, #C8646D 0%, #E8A1A9 51%, #CA6C75 135%); 
  top: 10%;
  height: 40%;
  right: 0;
  width: 1px;
}
.pvc-card::before{ 
  content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(175deg, #FF1E00 0%, #FF796E 90%);
    opacity: 0; 
    transition: all 0.8s 
cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    border-radius: inherit;
    width: 0;
}
.pvc-card.active::before,.pvc-card:hover::before {
    opacity: 1; 
    width: 100%;
}
.pvc-card:nth-child(odd)::after{ 
  bottom: 20%; 
  top: auto;
}
.pvc-card:last-child::after { 
  display: none;
}

.pvc-card:hover {
  transform: translateY(-10px);
}
.pvc-card .legal-btn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pvc-card:hover .legal-btn {
  opacity: 1;
  transform: translateY(0);
}
.services-personal {
  position: relative;
  /* overflow: hidden;   */
  overflow: visible !important;
  
}
.services-personal::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    height: 100%;
    background: linear-gradient(270deg, #000 10%, rgba(0, 0, 0, 0) 102%);
    z-index: 2;
}
.services-personal.no-mask::after {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
.services-personal .pvc-wrap {
  position: relative;
  width: 100%;
  /* height: 100%; */
  overflow: visible !important; /* hide scrollbars */
  display: flex; 
  z-index: 4;
}

.services-personal .pvc-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0rem;
  will-change: transform;
  padding-left: 15%;
  height: 100%;
  align-items: flex-start;
  
    
}
 .pvc-card.active{
    z-index: 3;
 }
.pvc-title{
  font-weight: 300;
    font-size: 40px;
    margin-bottom: 50px;
    letter-spacing: .5px;
    padding-left: 20px;
    position: absolute;
    top: 15%;
    z-index: 3;
}
.pvc-card h3{
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 300;
  position: relative;
  z-index: 2;
}
.pvc-card p{
  font-size: 15px;
  line-height: 1.5;
  opacity: .85;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.pvc-card .pvc-icn img{ 
  width: 100px; 
  height: 60px;
  margin-bottom: 50px; 
  position: relative;
  z-index: 2;
  object-fit: contain;
  object-position: left;
}
/*************************************** Team Section ********************************/
.team-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* overflow: hidden; */
  overflow: visible !important;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0rem 100px !important;
}
.team-content{
      display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    top: 15%;
    /* z-index: 9; */
    h2{
font-size: 2.2rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 20px;
    }
    p{
      font-size: 16px;
      font-weight: 200;
      line-height: 1.6;
    }
}
.team-scroll { 
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
    .team-wrapper {
     display: flex;
  /* align-items: center; */
  justify-content: flex-start;
  gap: 0px;
  padding: 60px 0;
  align-items: flex-start;
    }

    .member {
      position: relative;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      overflow: hidden; 
      cursor: pointer;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .member img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%; 
      transition: transform 0.5s ease;
    }

   /* Hover effect */
.member:hover {
  transform: scale(1.1);
}

.member:hover img {
  transform: scale(1.1);
  filter: brightness(0.7);
}

    /* Zigzag positioning pattern */
    .member:nth-child(1) { transform: translateY(-50px); }
    .member:nth-child(2) { transform: translateY(40px); }
    .member:nth-child(3) { transform: translateY(-70px); }
    .member:nth-child(4) { transform: translateY(50px); }
    .member:nth-child(5) { transform: translateY(-40px); }
    .member:nth-child(6) { transform: translateY(60px); }
    .member:nth-child(7) { transform: translateY(-70px); }
    .member:nth-child(8) { transform: translateY(70px); }

/* Overlay blue circle */
.member::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom left, #00b3ff, #0072ff);
  opacity: 0;
  border-radius: 50%;
  transition: opacity 0.4s ease;
}

/* Show blue overlay on hover */
.member:hover::after {
  opacity: 0.95;
}

/* Text inside overlay */
.member .info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.4s ease;
  padding: 20px 20px;
}

.member:hover .info {
  opacity: 1;
}

.member .info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.member .info p {
  font-size: 0.9rem;
  opacity: 0.85;
}

.member .info .arrow {
  margin-top: 10px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.3s ease;
}

.member .info .arrow:hover {
  background: rgba(255,255,255,0.2);
}

 
/* ******************** Blog *********************** */
.blog-section {
  position: relative; 
 background-color: #000;
  color: #fff;
  overflow: hidden;
  background-image: url('../img/grid.png');
  background-repeat: no-repeat;
}

/* Subtle grid pattern overlay (background) */
 
.blog-container{
  width: 65%;
  margin: auto;
}
.blog-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

.blog-header {
  display: flex;
  justify-content: space-between; 
  margin-bottom: 60px;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  top:15%;
  /* z-index: 9; */
}

.blog-title {
  font-size: 2.2rem;
  font-weight: 400;
  color: #fff;
}

.blog-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 400;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  padding: 10px 20px;
  transition: background 0.3s ease, color 0.3s ease;
  text-decoration: none;
  margin-top: 20px;
}

.blog-cta:hover {
  background: #fff;
  color: #000;
}

.blog-grid-wrap {
  overflow: visible;
}

.blog-grid-wrap {
  display: flex;
  gap: 2rem; 
  align-items: center;
  margin-top: 40px;
}

.blog-grid {
  position: relative;
  flex: 0 0 25%;
  width: 25%; 
  transition: transform 0.4s ease;
}

.blog-grid:hover .blog-card {
  transform: translateY(-10px);
}
.blog-card{
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    background: #111;  
}
.blog-img {
  width: 100%; 
  overflow: hidden;
  height: 400px;  
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  transition: transform 0.6s ease;
}

.blog-grid:hover .blog-img img {
  transform: scale(1.05);
}

.blog-info {
    padding: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff; 
    display: flex;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    justify-content: space-between;
    align-items: flex-end;
}

.blog-subject {
  font-size: 15px;
  font-weight: 300;
  margin-bottom: 5px;
  width: calc(100% - 80px);
  line-height: 1.6;
}

.blor_ctgry {
  font-size: 13px;
  opacity: 0.8;
  padding:5px 15px;
  border-radius: 50px;
  border: 1px solid #fff;
}

/* Hidden link footer (appears on hover) */
.blog-link { 
 
  padding: 0px 20px;
  opacity: 0;
  height: 0; 
  transition: all 0.5s ease;
}

.blog-grid:hover .blog-link {
  opacity: 1;
  height: 80px;
  
}

.legal-btn {
  color: #000;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.legal-btn:hover {
  color: #000;
}
.legal-btn svg{
  
}
.circle-layer-layer1 {
    position: absolute;
    width: 600px;
    height: 100%;
    border-radius: 100%;
    opacity: 0.7;
    filter: blur(153px);
    left: 15%;
    top: -17%;
    background: linear-gradient(175deg, #ff7100 5%, #c93030 70%);
}
.circle-layer-layer2 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    opacity: 0.5;
    filter: blur(100px);
    opacity: 0.9;
    filter: blur(104px);
    left: 44%;
    top: 0%;
    background: linear-gradient(175deg, #ff7100 5%, #c93030 70%);
}
.circle-layer-layer3 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    opacity: 0.5;
    filter: blur(100px);
    opacity: 0.9;
    filter: blur(104px);
    right: 19%;
    top: 0%;
    background: linear-gradient(175deg, #ff7100 5%, #c93030 70%);
}
/* *********** contact ********** */
 .contact-title {
  font-size: 40px;
  font-weight: 300;
  margin-bottom: 20px;
 }
 .contact-text{
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 80px;
  font-weight: 200;
 }
 .contact-adddress{
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 80px;
  font-weight: 200;
 }
.contact-form-box .form-control {
  width: 100%;
  padding: 12px 15px;
  margin-top: 8px;
  font-size: 16px;
  color: #fff;
  background: transparent;
  border:1px solid #ffffff4a;
  border-radius: 15px;
  /* background-image: linear-gradient(#000, #000),
                    linear-gradient(45deg, #FF1E00 0%, #FF796E 90%); */
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 0 0 0 transparent;
  outline: none;
  transition: 0.3s;
  height: 50px;
}

.contact-form-box .form-control:focus {
  box-shadow: 0 0 10px rgba(255, 120, 100, 0.6);
}

.contact-form-box textarea.form-control {
  resize: none;
  min-height: 140px;
}
.bg-circle{
  background:linear-gradient(175deg, #B02533 0%, #E24533 90%);
  position: absolute;
  height: 1100px;
  width: 1100px;
  border-radius: 100%;
  filter: blur(220px);
  top: 0;
  transform: translateX(25%);
  transition: all 0.4s ease;
  right: 0;
  z-index: -1;
}
.form-circle {
    width: 600px;
    height: 600px;
    position: absolute;
    border-radius: 100%;
    filter: blur(10px);
    z-index: -1;
    background: #ffffff57;
    opacity: 0.1;
    top: 0;
    right: 23%;
    bottom: 0;
    margin: auto;
}
.contact-link a{
  color: #fff;
  text-decoration: none; 
  transition: all 0.3s ease;
  display: inline-flex;
  margin-right: 20px;
  align-items: center;
  font-size: 16px;
  font-weight: 200;
  img{
    margin-right: 10px;
  }
}
.form-button .legal-btn{
  background: #fff;
  color: #0a1d35;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 40px;
  margin-top: 20px;
}
.form-control::placeholder {
  font-weight: 200;
  opacity: 0.5;
  color: #fff;
}


/* === Nested horizontal scroll sections === */
.services-personal {
  overflow: hidden;
}
/* .services-personal .pvc-wrap {
  overflow: hidden;
} */
.services-personal .pvc-grid {
  display: flex;
  gap: 0px; 
  width: max-content;
  height: 100%;
}
/* 
.team-section {
  overflow: hidden;
}
.team-section .team-scroll {
  overflow: hidden;
} */
 


/* /////////////////////// COmmercial *************
/////////////////////////////////////////////////// */
/* HORIZONTAL PANELS */

/* .pin-wrap {
  height: 100vh;
  overflow: hidden;
}

.panel-wrapper {
  display: flex;
  height: 100vh;
  width: 500vw;  
}

.panel {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  padding: 4rem 6vw;
} */

/* PANEL STYLES */

/* .panel-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: radial-gradient(circle at 0% 0%, #14151b, #02030a);
} */

.hero-content {
  max-width: 420px;
}

.logo {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  opacity: 0.7;
  margin-bottom: 2rem;
}
.commercial_banner  .home-text {
        width: 40%;
    } 
.commercia-note-wrap{
  position: absolute;
    width: 100%;
    bottom: 0;
    background:linear-gradient(to left, #000 0%, #37373726 100%);
    padding: 40px 60px 40px;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: flex-end;
    height: 330px;
}
.commercial-note{
  width: 500px;
  
}
.commercial-note p {
    color: #fff;
    font-size: 14px;
    margin-bottom: 24px;
    font-weight: 300;
    line-height: 1.5;
}
.hero-title {
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.hero-sub {
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 380px;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.btn-primary,
.btn-outline {
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, #2a8cff, #09f0ff);
  color: #020617;
}

.btn-outline {
  border: 1px solid #4b9bff;
  background: transparent;
  color: #e5f0ff;
}

.hero-visual {
  flex: 1;
  position: absolute;
  width: 100%;
  height: 80vh;
  top: -30px;
  z-index: -2;
  right: 30px;
}
.hero-visual-2 {
    position: absolute;
    width: 100%;
    top: auto;
    bottom: 0;
    background-color: black;
    z-index: -1;
    overflow: hidden;
    height: 330px;
}
/* Fake waves as gradient blocks – you can replace with SVGs */
.ellipsewave {
  position: absolute;
  bottom: 0;
  width: 140px;
  height: 260px;
  border-radius: 100%;
 background: linear-gradient(to bottom, #A7E5FF 0%, #020617 40%, #A7E5FF 100%);
top: 0;
margin: auto;
  opacity: 0.3;
  filter: blur(0.3px);
}
.wave-8 { right: 0%; height: 10vh;width: 30px;}
.wave-7 { right: 6%; height: 20vh;width: 40px; }
.wave-6 { right: 12%; height: 30vh;width: 50px; }
.wave-5 { right: 20%; height: 40vh;width: 70px;}
.wave-4 { right: 30%; height: 50vh;width: 80px; }
.wave-3 { right: 40%; height: 60vh; }
.wave-2 { right: 52%; height: 70vh; }
.wave-1 { right: 65%; height: 80vh; width: 160px; }

.hero-visual-2 .ellipsewave {
    top: -35px;
    bottom: auto;
    opacity: 0.6;
}
/* GENERIC SECTION HEADER */

.section-header {
  max-width: 500px;
  margin-bottom: 2rem;
}

.section-header h2 {
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
  font-weight: 300;
}

.section-header p {
  font-size: 14px;
  opacity: 0.8;
  font-weight: 300;
}

/* PANEL 2 – GRID */
.panel-how {
    /* initial background before scroll */ 
    background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(15, 59, 141) 100%);
}
.panel-how .grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:0;
  max-width: 100%;
}

.panel-how .grid-item {
  background: rgba(255, 255, 255, 0.07);
  border-radius:0;
  padding: 1rem;
  font-size: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 233px;
  backface-visibility: hidden;
  font-weight: 300;
}
.panel-how .grid-tem-icon_top{
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.panel-how .grid-tem-icon_bottom{
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.panel-how .grid-item{
    display: flex;
    flex-direction: column;
    justify-content: end; 
}
.inshort-how{ 
  width:600px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 0;
  position: relative;
  margin-top: 30px;
  
}
.inshort-how p {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 300;
    text-align: center;
    width: 55%; 
    position: absolute;
    top: auto;
    bottom: auto;
    margin: auto;
    left: 0;
    right: 0; 
    transform: translate(0px, 50%);
}
.inshort-how svg{
  width: 100%;  
}

/* PANEL 3 – BARS + BUBBLES */

.panel-why {
  /* display: flex;
  flex-direction: column;
  justify-content: center; */
  background-color: #0F3B8D;
}
.why-choose-us-flex .section-header{
  width: 25%;
}
.why-choose-us-flex .bubbles{
  width: 70%;
}
/* wrapper for bars */
.blue-bars {
  display: flex;
  gap: 20px;                        /* space between bars */
  padding: 0px 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

/* basic bar style */
.blue-bars .bar {
  width: 36px;
  height: 100%;                    /* default height */
  border-radius:0;
  background: linear-gradient(to top, #0058FF 0%, #04112A 70%);
  /* box-shadow: 0 0 25px rgba(0, 120, 255, 0.7);   */
  filter: blur(3px);
  opacity: 0.3;
}

/* heights to create the inverted-arch shape */
.blue-bars .bar:nth-child(1)  {
  height: 95vh;
}

.blue-bars .bar:nth-child(2) {
  height:95vh;
}

.blue-bars .bar:nth-child(3){
  height: 70vh;
}

.blue-bars .bar:nth-child(4) {
  height: 50vh;
}

.blue-bars .bar:nth-child(5) {
  height: 40vh;
}

.blue-bars .bar:nth-child(6) {
  height: 30vh;                    /* center shortest */
}  
.blue-bars .bar:nth-child(7) {
  height: 25vh;
}
.blue-bars .bar:nth-child(8) {
  height: 25vh;
}
.blue-bars .bar:nth-child(9) {
  height: 30vh;
}
.blue-bars .bar:nth-child(10) {
  height: 40vh;
  opacity: 0.1;
}
.bars-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.bars-wrap .bar {
  flex: 1;
  height: 220px;
  border-radius: 999px;
  background: linear-gradient(to top, #020617, #1d4ed8);
  opacity: 0.6;
}

.bubbles {
  display: flex;
  flex-wrap: wrap;
  gap: 0rem;
  justify-content: center;
}

.bubble {
  padding:15px;
  border-radius: 999px;
  
  font-size: 0.85rem;
}
    .bubble {
      position: relative;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      /* overflow: hidden;  */
      cursor: pointer;
      transition: transform 0.4s ease, opacity 0.4s ease;
      border: dashed 1px #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      margin-right: -15px;
    } 
.bubble::after    {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: linear-gradient(#236fff 40%, #000000 119%);
    transform: scale(0);
    transition: all 0.4s ease;
    filter: blur(10px);
    z-index: -1;
}
.bubble:hover{
  border-color: transparent;
}
   /* Hover effect */
.bubble:hover::after {
  transform: scale(1.1); 
}

 

    /* Zigzag positioning pattern */
    .bubble:nth-child(1) { transform: translateY(-50px); }
    .bubble:nth-child(2) { transform: translateY(40px); }
    .bubble:nth-child(3) { transform: translateY(-50px); }
    .bubble:nth-child(4) { transform: translateY(50px); }
    .bubble:nth-child(5) { transform: translateY(-40px); }
    .bubble:nth-child(6) { transform: translateY(60px); }
    .bubble:nth-child(7) { transform: translateY(-70px); }
    .bubble:nth-child(8) { transform: translateY(70px); }
/* PANEL 4 – EXPERTS */

.panel-experts {
  display: flex;
  flex-direction: column;
  justify-content: center;
   background: linear-gradient(to right,#0F3B8D 0%, #000000 100%);
}

.experts-header {
  margin-bottom: 2.5rem;
}

.experts-grid {
  display: grid;
  grid-template-columns:repeat(4, 260px);
  gap: 1.4rem;
}

.expert-card {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 1.2rem;
  padding: 1.4rem 1rem;
  text-align: center;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.avatar {
  width: 130px;
  height: 130px;
  margin: 0 auto 0.9rem;
  border-radius: 100%;
  background: radial-gradient(circle at 30% 0%, #1d4ed8, #020617);
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
}
.expert-card h3 {
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
}

.expert-card p {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-bottom: 0.8rem;
}

/* PANEL 5 – CTA */

.panel-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cta-bg-img{
  position: absolute;
    height: 155%;
    top: 0;
    left: 0;
}
.cta-card {
    max-width: 420px;
    padding: 2.2rem;
    border-radius: 1.6rem;
    position: absolute;
    z-index: 2;
    top: 16%;
    left: 29%;
}

.cta-card .badge {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.cta-card h2 {
  font-size: 1.9rem;
  margin: 1rem 0 0.5rem;
  font-weight: 300;
}

.cta-card p {
  font-size: 0.93rem;
  opacity: 0.8;
  margin-bottom: 1.4rem;
}

.cta-wave {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 0%, #38bdf8, #020617);
  filter: blur(6px);
  opacity: 0.7;
}

#wavePath, #dot {
  filter: drop-shadow(0 0 10px #00A3FF);
}
.service_cta{
  position: absolute;
  bottom: 50px;
  z-index: 2;
  left: 20%;
}
.service_cta p{
  font-size:14px;
  opacity: 0.8;
  margin-bottom:10px;
}
.service_cta h3{
  font-size: 1.9rem;
  margin: 1rem 0 0.5rem;
  font-weight: 300;
}
.cta-wave-img{
  position: absolute;
    right: 0;
    bottom: 0;
    width: 500px;
    height: 308px;
    left: 16.3%;
    top: 11%;
    object-fit: contain;
}
/*========================= dispute start ========================*/
.dispute .commercia-note-wrap {
  background: linear-gradient(80.51deg,
  #B02533 -20%,
  #4A0E14 40%,
  #000000 104%,
  #000000 100%
)

}
.dispute.panel-how .grid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
  z-index: 7;
}
.dispute.panel-how .inshort-how{
  z-index: 7;
}
.panel-how.dispute{
  position: relative;
  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(98, 1, 1) 45.05%);
}
.panel-how.dispute::before{
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(to right, #000000db 0, #00000000 100%);
    z-index: -1;
    pointer-events: none;
}
.ring-svg{
  position: absolute;
  right: -20%;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: -1;
}
.d-circle{
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.circle-large{
  width: 1200px;
  height: 1200px;
  background: linear-gradient(90.07deg, rgba(177, 0, 18, 0.72) 0.06%, rgba(78, 21, 21, 0.72) 59.86%);
  opacity: 0.4;
  filter: blur(7.5px);
  right: -30rem;
  z-index: 6;
}
.circle-md-xl{
  width: 800px;
  height: 800px;
  background: linear-gradient(94.2deg, rgba(253, 101, 101, 0.5112) 3.42%, rgba(72, 0, 0, 0.72) 89.07%);
  opacity: 0.2;
  filter: blur(7.5px);
  right: 11rem;
  z-index: 5;
}
.circle-md-lg,
.circle-md-md{
  width: 550px;
  height: 550px;
  filter: blur(7.10309px);
}
.circle-md-lg{
  background: linear-gradient(90.07deg, rgba(255, 0, 0, 0.72) 0.06%, rgba(88, 7, 7, 0.72) 59.86%);
  opacity: 0.3;
  border: 4.26186px solid #E55A5A;
  right: -8rem;
  z-index: 2;
}
.circle-md-md{
  background: rgba(17, 17, 17, 0.08);
  right: -10rem;
  z-index: 4;
}
.circle-md-sm{
  width: 370px;
  height: 370px;
  background: linear-gradient(90.14deg, rgba(255, 0, 0, 0.72) 0.12%, rgba(112, 4, 4, 0.72) 42.9%);
  /* border: 3px solid rgba(2, 177, 196, 0.64); */
  filter: blur(5px);
  right: -14rem;
  z-index: 3;
}
.why-choose-us{
  background: linear-gradient(270deg, #000000 0%, #5C0707 100%);
  position: relative;
}
.why-choose-us .section-header{
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.why-choose-us::before{
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(265.82deg, #460404 3.41%, #490505 97.83%);
    filter: blur(76px);
    z-index: -1;
    pointer-events: none;
}
.choose-item-grid{
  width: 20%;
  height: 100%;
  display: flex;
  position: relative;
}
.choose-item-grid-wraper{
  width: 100%;
  padding-left: 3rem;
}
.choose-item-grid-wraper .choose-item-grid:nth-child(even) .choose-item-grid-content{
  transform: translateY(-10rem);
}
.choose-item-grid img{
  max-width: 80%;
  margin-left: auto;
}
.choose-item-grid-content{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  z-index: 2;
  height: fit-content;
  transform: translateY(50px);
  padding-left: 2rem;
}
.choose-item-grid-content p{
  font-size: 14px;
}
.choose-item-grid-content span{
  height: 42px;
  width: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.choose-item-grid-content span::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 169, 169, 0.41);
  border: 0.2px solid #3A7DFA;
  filter: blur(2.5px);
  pointer-events: none;
}
.dispute.panel-experts .container{
  width: 100%;
}
.dispute.panel-experts{
  background: linear-gradient(270deg, #010103 0%, #0A0103 100%);
}
.dispute.panel-experts .expert-card{
  background: rgba(40, 40, 40, 0.28);
  border: 0;
}
.dispute.panel-experts .experts-grid{
  grid-template-columns: repeat(4, 23%);
}
.panel-hero.dispute {
  background-image: url('../img/dispute-baner.svg');
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.panel-hero.dispute .commercia-note-wrap::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/dispute-banner-reflection.svg);
  filter: blur(1);
  z-index: -1;
  background-size: 100%;
  pointer-events: none;
}

/* /////////////////////// Employment Law /////////////////////// */
.employment-hero .commercia-note-wrap{
    background: linear-gradient(to left, #0000002b 0%, #252525b5 100%);
        backdrop-filter: blur(3px); 
}
 .employment-visual{
  position: absolute;
    width:auto;
    height: 80vh;
    top: 0px;
    z-index: -2;
    right: 0;
    text-align: right;
    
 }
 .employment-visual img{
  width:80%;
 height: 100%;
 object-fit: cover;
 object-position: center;
 }
.eployment_visual2 img {
    width: 50%; 
     object-fit: cover;
 object-position: top;
}
 .eployment_visual2{
display: flex;
    justify-content: flex-end;
    right: 0;
 }
 .employment-visual::after,.eployment_visual2::after {
    content: "";
    position: absolute;
    width: 40%;
    height: 100%;
    background:linear-gradient(270deg, #010203 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
    right: 0;
 }
 .panel_5_grid{
  grid-template-columns: repeat(5, minmax(0, 1fr));
 }

 /*================ Header Menu =======================*/
.menu-toggle {
  width: 34px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  z-index: 999;
}

.menu-toggle .line {
  height: 2px;
  background: #e2e2e2;
  border-radius: 3px;
  display: block;
  width: 100%;
  transition: background 0.3s ease;
}
.sidenav{
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  z-index: 100;
  transition: transform 0.2s linear;
  background: linear-gradient(135.19deg, #B02533 15.76%, #0D4E92 161.15%);
  padding: 140px 60px 20px;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;

}
.sidenav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.sidenav-relative{
  position: relative;
  height: 100%;
  width: 100%;
  max-width:80%;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sidenav-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.sidenav-menu a{
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  color: #FFFFFF;
  display: block;
  width: fit-content;
  text-decoration: none;
  margin-bottom: 40px;
  transition: 0.2s linear;
  letter-spacing: normal;
}
.service_menu h3 a{
  font-weight: 500;
  font-size: 26px; 
  line-height: 1.2;
  color: #FFFFFF;
  display: block;
  width: fit-content;
  text-decoration: none;
  margin-bottom: 40px;
  transition: 0.2s linear;
  letter-spacing: normal;
}
.service_menu li a{
  font-weight: 300;
  font-size: 20px; 
  line-height: 1.2;
  color: #FFFFFF;
  display: block;
  width: fit-content;
  text-decoration: none;
  margin-bottom: 40px;
  transition: 0.2s linear;
  letter-spacing: normal;
}
/* .sidenav-menu a:hover{
  letter-spacing: 2px;
} */
.sidenav-social-media ul li:not(:last-child) a{
  margin-bottom: 40px;
  display: block;
  width: fit-content;
}
.sidenav-credit p, .sidenav-credit p a{
  font-weight: 300;
  font-size: 16px;
  line-height: 27px;
  color: #FFFFFF;
  text-decoration: none;
}
.sidenav-credit p a{
  position: relative;
  padding-right: 20px;
  margin-right: 20px;
}
.sidenav-credit p a:last-child{
  padding-right: 0;
  margin-right: 0;
}
.sidenav-credit p a:last-child::after{
  display: none;
}
.sidenav-credit p a::after{
  position: absolute;
  right: 0;
  height: 100%;
  width: 2px;
  content: '|';
  /* background: #fff; */
}
.logo{
  opacity: 1;
}
.logo-image img{
  opacity: 0.7;
}

/*================= blog page =====================*/
.container{
  width: 100%;
}
.blog-banner{
  min-height: 960px;
  position: relative;
  overflow: hidden;
}
.blog-banner .container{
  width: 100%;
}
.blog-banner img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.blog-banner{
  display: flex;
  align-items: center;
}
.blue-gradient{
  position: absolute;
  width: 100%;
  height: 1260px;
  left: 0;
  top: 0;
  background: linear-gradient(180deg, rgba(26, 88, 153, 0) 20%, #1A5899 63%, #000000 100%);
  z-index: 1;
  pointer-events: none;
}
main{
  position: relative;
}
.blog-banner .home-text{
  width: 500px;
  position: relative;
}
.vertical-align{
  display: block;
  height: auto;
}
.blog-listing{
  position: relative;
  z-index: 2;
  margin-top: -6rem;
  width: 100%;
  height: auto;
}
.blog-listing .contaier{
  width: 100%;
}
.blog-listing .section-header h2{
  text-align: center;
}
.blog-listing .section-header{
  margin: auto;
  margin-bottom: 50px;
}
.blog-item-wraper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-item-col{
  max-width: 25%;
  width: 100%;
  padding: 0 5px;
  margin-bottom: 36px;
}
.blog-item{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ffffff59;
}
.blog-item:hover .blog-item-image img{
  transform: scale(1.1);
}
.blog-item-image{
  width: 100%;
  height: 480px;
  top: 0;
  left: 0;
  position: relative;
}
.blog-item-image::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(180.15deg, rgba(0, 0, 0, 0) 20%, #1755CC 99.87%);
  pointer-events: none;
}
.blog-item-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .6s cubic-bezier(.22,.95,.33,1),filter .6s ease;

}
.blog-item-content{
  padding: 36px 30px;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.blog-item-content h4 a{ 
  font-weight: 400; 
  font-size: 16px;
  line-height: 1.55;
  color: #FFFFFF;
  max-width: 230px;
  margin-bottom: 15px;
  text-decoration: none;
  display: block;
  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}
.legal-btn-2{
  width: fit-content;
}
.legal-btn-2 span{
  /* visibility: hidden; */
  opacity: 0;
  overflow: hidden;
  transition: 0.3s linear;
}
.legal-btn-2 .arrow{
  background: transparent;
  border: 1px solid #fff;;
  transition: 0.2s linear;
  width: 39px;
  height: 39px;
}
.legal-btn-2 .arrow path{
  stroke: #fff;
}
.legal-btn-2:hover span{
  visibility: visible;
}
.legal-btn-2:hover .arrow{
  background: #fff;
}
.legal-btn-2:hover .arrow path{
  stroke: #000000;
}
.blog-item-content .legal-btn{
  color: #67461B;
}
.blog-item-content .legal-btn:hover .arrow path{
  stroke: #67461B;
}
.news-events{
  height: auto;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 30px;
  position: relative;
}
.gradient-shap{
  height: 400px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #610202 19.08%, #C81B25 49.67%, #870202 75.43%);
  filter: blur(250px);
}
.mw-100{
  max-width: 100%;
}
.news-events .section-header{
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}
.news-events-container{
  max-width: 1125px;
  width: 100%;
  margin: auto;
}
.news-events-item-wraper{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: -5px;
}
.news-events-item-col{
  max-width: 33.33%;
  width: 100%;
  padding: 0 5px;
  margin-bottom: 30px;
}
.news-events-item{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ffffff59;
  padding: 13px 13px 30px 13px;
  background: #000;
}
.news-circle-sm{
  height: 250px;
  width: 250px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  background: #FF0000;
  border: 2.54px solid #000000;
  filter: blur(150px);
  opacity: 0;
  transition: all 0.4s ease;
}
.news-circle-sm{
  height: 450px;
  width: 450px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  bottom: -5rem;
  background: #FF0000;
  border: 4.66px solid #000000;
  filter: blur(250px);
  opacity: 0;
  transition: all 0.4s ease;
}

.news-events-item-image{
  border-radius: 5px;
  overflow: hidden;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}
.news-events-item-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
.news-events-item-content{
  position: relative;
}
.news-events-item-content-head{
  padding: 0 7px;
  margin-bottom: 50px;
}
.news-events-item-content-head a{
  text-decoration: none;
}
.news-events-item-content-head h4{
  font-weight: 400;
  font-size: 25px;
  line-height: 1.4;
  color: #FFFFFF;
  margin-bottom: 10px;
  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
}
.news-events-item-content-head span{
  font-weight: 300;
  font-size: 16px;
  line-height: 25px;
  color: #C6C6C6;
  display: block;
}
.news-events-item:hover .news-circle-sm,
.news-events-item:hover .news-circle-lg{
  opacity: 1;
}

/*================= Footer =====================*/
footer{
  position: relative;
  overflow: hidden;
  padding-top: 40px;
  background: #B02533;
}
footer::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(91.1deg, #B02533 -2.83%, #FF0000 99.06%);
  pointer-events: none;
  z-index: 0;
}
.footer-fade{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1;
  object-fit: cover;
  object-position: center;
  /* animation: heightAnim 7s ease infinite; */
}
@keyframes heightAnim {
  0% {
    height: 90%;
  }
  50%{
    height: 100%;
  }
  100%{
    height: 90%;
  }
}
.fade-text{
  position: absolute;
  font-weight: 700;
  font-size: 362.542px;
  line-height: 0.8;
  color: #FFFFFF;
  left: 0;
  bottom: -0.5rem;
  opacity: 0.1;
  pointer-events: none;
  z-index: 2;
  width: fit-content;
}
.footer-container{
  /* max-width: 1500px;
  padding: 0 12px;
  width: 100%;
  margin: auto; */
  position: relative;
  z-index: 3;
}
.footer-menu-wraper{
  display: flex;
  justify-content: flex-end;
  padding-bottom: 60px;
}
.footer-menu-wraper ul{
  margin-bottom: 30px;
  list-style-type: none;
  padding: 0 30px;
}
.footer-menu-wraper ul li a{
  font-weight: 400;
  font-size: 16px;
  line-height: 25px;
  color: #FFFFFF;
  display: block;
  width: fit-content;
  margin-bottom: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.footer-menu-wraper ul li a:hover{
  color: #382121;
}
.footer-credit{
  border-top: 1px solid #FFA5A5;
  padding: 36px 0 60px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-credit p, .footer-credit a{
  font-weight: 200;
  font-size: 16px;
  line-height: 27px;
  color: #FFFFFF;
  display: block;
  width: fit-content;
  text-decoration: none;
}
.footer-credit ul{
  display: flex;
  align-items: center;
  list-style-type: none;
  padding-left: 2rem;
}
.footer-credit ul li:not(:last-child){
  margin-right: 20px;
}
.footer-credit a{
  display: flex;
}
.header-scroll{
  background: transparent;
  padding: 32px 0;
  transition: 0.9s ease;
}
.header-scroll::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}
.header-scroll .logo{
  margin-bottom: 0;
}
.header-scroll.affix{
  padding: 25px 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
 
.header-scroll.affix::after{
  opacity: 1;
}

/*================= Hamburger Menu Animation =====================*/
.eltdf-hm-lines {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    width: 48px;
    height: 28px;
    overflow: hidden;
    color: #e5e7e2;
    right: 46px;
    top: -106px;
    cursor: pointer;
}
.eltdf-hm-lines:after, 
.eltdf-hm-lines:before {
    content: '';
    position: absolute;
    display: block;
    top: calc(50% - 1px);
    width: 100%;
    height: 1px;
    background-color: currentColor;
    -webkit-transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    transition: all .35s ease-out;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.eltdf-hm-lines:before {
    -webkit-transform: rotate(45deg) translateX(-100%);
    -ms-transform: rotate(45deg) translateX(-100%);
    /* transform: rotate(45deg) translateX(-100%); */
}
.eltdf-hm-lines:after {
    -webkit-transform: rotate(-45deg) translateX(-100%);
    -ms-transform: rotate(-45deg) translateX(-100%);
    transform: rotate(-45deg) translateX(-100%);
}
 .eltdf-hm-lines .eltdf-hm-line {
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    top: calc(50% - 1px);
    left: 0;
    background-color: currentColor;
    -webkit-transition: .35s ease-out;
    -o-transition: .35s ease-out;
    transition: .35s ease-out;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
 .eltdf-hm-lines .eltdf-hm-line.eltdf-line-1 {
    -webkit-transform: rotate(45deg) translateX(0);
    -ms-transform: rotate(45deg) translateX(0);
    transform: rotate(45deg) translateX(0);
}
 .eltdf-hm-lines .eltdf-hm-line {
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    top: calc(50% - 1px);
    left: 0;
    background-color: currentColor;
    -webkit-transition: .35s ease-out;
    -o-transition: .35s ease-out;
    transition: .35s ease-out;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
 .eltdf-hm-lines .eltdf-hm-line.eltdf-line-2 {
    -webkit-transform: rotate(-45deg) translateX(0);
    -ms-transform: rotate(-45deg) translateX(0);
    transform: rotate(-45deg) translateX(0);
}
.eltdf-hm-lines:hover:before {
    -webkit-transform: rotate(45deg) translateX(0);
    -ms-transform: rotate(45deg) translateX(0);
    transform: rotate(45deg) translateX(0);
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}
.eltdf-hm-lines:hover:after {
    -webkit-transform: rotate(-45deg) translateX(0);
    -ms-transform: rotate(-45deg) translateX(0);
    transform: rotate(-45deg) translateX(0);
    -webkit-transition-delay: .45s;
    -o-transition-delay: .45s;
    transition-delay: .45s;
}
.eltdf-hm-lines:hover .eltdf-hm-line.eltdf-line-1 {
    -webkit-transform: rotate(45deg) translateX(100%);
    -ms-transform: rotate(45deg) translateX(100%);
    transform: rotate(45deg) translateX(100%);
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.eltdf-hm-lines:hover .eltdf-hm-line.eltdf-line-2 {
    -webkit-transform: rotate(-45deg) translateX(100%);
    -ms-transform: rotate(-45deg) translateX(100%);
    transform: rotate(-45deg) translateX(100%);
    -webkit-transition-delay: .15s;
    -o-transition-delay: .15s;
    transition-delay: .15s;
}
/*=================// Hamburger Menu Animation =====================*/


/*================= Single blog ================*/
.header-secondary{
  padding:  0 !important;
}
.header-secondary.affix .container{
  border: none !important;
}
.header-secondary.affix{
  background: rgb(255, 255, 255, 97%) !important;
  box-shadow: 0 -1px 20px rgb(0, 0, 0, 13%), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.header-secondary .logo{
  margin-bottom: 0;
}
.header-secondary .container{
  padding: 25px 0 !important;
}
.body-white{
  background-color: #fff;
  height: auto;
}
.body-white .logo-image img{
  opacity: 1;
}
.body-white .menu-toggle .line{
  background: #0D4E92;
}
.body-white .header .container{
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 30px;
  transition: 0.3s ease;
}
.single-blog-header{
  position: relative;
  overflow: hidden;
  padding-top: 8rem;
  margin-bottom: 50px;
  height: auto;
  min-height: auto;
}
.single-header-row{
  display: flex;
}
.single-head{
  padding: 28px 60px 60px 0;
  border-right: 1px solid #E0E0E0;
}
.single-head h1{
  font-weight: 400;
  font-size: 55px;
  line-height: 1.2;
  color: #212121;
  max-width: 750px;
}
.single-blog-info{
  flex-shrink: 0;
  padding-left: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.single-blog-info h4{
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: #0D4E92;
  margin-bottom: 5px;
}
.single-blog-info p{
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: #636363;
  margin-bottom: 5px;
}
.blog-share ul{
  display: flex;
  margin-top: 30px;
  list-style-type: none;
  padding: 0;
}
.blog-share ul li:not(:last-child){
  margin-right: 7px;
}
.blog-share ul li a{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0D4E92;
  transition: 0.3s ease-in-out;
}
.blog-share ul li a:hover{
  background: #212121;
}
.featured-image{
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 40px;
}
.featured-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.single-blog-description{
  height: auto;
  min-height: auto;
}
.single-blog-content p{
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  color: #636363;
  margin-bottom: 30px;
}
.blog-content-row{
  display: flex;
  padding-bottom: 45px;
}
.blog-content{
  max-width: 900px;
  padding-right: 60px;
  width: 100%;
}
.blog-content :where(h1,h2,h3,h4,h5,h6){
  margin-bottom: 30px !important;
  font-weight: 400;
  margin-bottom: 60px;
  padding-top: 10px;
  color: #212121;
}
.blog-content h2{
  font-size: 40px;
}
.blog-content h3{
  font-size: 30px;
}
.blog-content h4{
  font-size: 25px;
}
.blog-content h5{
  font-size: 20px;
}
.blog-content h6{
  font-size: 18px;
}
.blog-content p{
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #636363;
  margin-bottom: 15px;
}
.blog-content img{
  max-width: 100%;
  margin-bottom: 30px;
  margin-top: 15px;
}
.blog-content :where(ul,ol){
  margin-left: 20px;
  margin-bottom: 30px;
}
.blog-content :where(ul,ol) li{
  margin-bottom: 10px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #636363;
}
.recent-blogs{
  max-width: 480px;
  width: 100%;
  padding-left: 50px;
  border-left: 1px solid #E0E0E0;
  height: fit-content;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  margin-top: 0;
}
.recent-blogs .section-header h2{
  color: #212121;
  margin-bottom: 36px;
}
.recent-blogs ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.recent-blogs ul li:not(:last-child){
  margin-bottom: 25px;
}
.recent-blogs ul li a{
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: #636363;
  text-decoration: none;
  display: block;
}
.recent-blogs ul li a:hover{
  color: #0D4E92;
}
.may-like{
  height: auto;
}
.section-head{
  font-weight: 400;
  font-size: 40px;
  line-height: 1.3;
  color: #212121;
  margin-bottom: 30px;
}

.may-like-wraper{
  padding-top: 50px;
  border-top: 1px solid #E0E0E0;
}
/*=================// Single blog ================*/



/*================ career page =================*/
/* .vertical-align section{
  height: auto;
} */
.career-banner{
  height: 800px;
  position: relative;
  display: flex;
  align-items: center;
}
.career-banner .home-text{
  position: relative;
}
.career-banner .legal-btn span{
  color: #67461B;
}
.career-banner .legal-btn svg path{
  stroke: #67461B;
}
.career-banner::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 300px;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  background: #000000;
  filter: blur(175px);

}
.career-banner::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 300px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1) 82%);
  /* filter: blur(125px); */
  z-index: 1;
}
.career-banner-img{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-join-us{
  padding: 60px 0;
  position: relative;
  background: linear-gradient(180deg, #000000 29.56%, #013FB6 100%);
  height: auto;
  margin-top: -2rem;
}
.why-join-us .section-head{
  color: #fff;
  margin-bottom: 160px;
}
.why-choose-item-wraper{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 200px;
}
.why-choose-item-col{
  max-width: 33.33%;
  width: 100%;
  padding: 0 22px;
  margin-bottom: 40px;
}
.why-choose-item{
  height: 100%;
  position: relative;
  padding: 50px 40px;
  border: 1px solid #FFFFFF29;
  border-radius: 10px;
  background: rgba(53, 53, 53, 0.19);
backdrop-filter: blur(3px);
}
.why-choose-item h4{
  color: #FFFFFF;
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.9;
}
.why-choose-item p{
  font-weight: 300;
  font-size: 16px;
  line-height: 25px;
  color: #FFFFFF;
}

.current-openings{
  max-width: 1260px;
}
.current-openings .section-head{
  margin-bottom: 50px;
}
.job-post-row{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.job-post-item{
  padding: 30px 0 18px 0;
  border-bottom: 1px solid #ffffff62;
}
.job-post-info h4{
  font-weight: 400;
  font-size: 25px;
  line-height: 1.5;
  color: #FFFFFF;
  margin-bottom: 25px;
}
.job-post-info ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.job-post-info ul li{
  margin-bottom: 12px;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #797979;
  background: #fff;
  padding: 6px 8px;
  border-radius: 4px;
}
.job-post-info ul li:not(:last-child){
  margin-right: 15px;
}
.apply-post .legal-btn{
  margin-top: -2rem;
}
.apply-post .legal-btn span{
  color: #67461B;
}
.apply-post .legal-btn:hover svg path{
  stroke: #67461B;
}
.svgAnim{
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  width: fit-content;
}
/*================ // career page =================*/

/*================= single career page =================*/
.single-career-banner{
  height: auto;
  padding-top: 10rem;
}
.single-career-banner-row{
  display: flex;
  align-items: center;
  padding-bottom: 60px;
  border-bottom: 1px solid #3a3a3a;
}
.single-career-banner-image{
  border-radius: 10px;
  height: 362px;
  width: 100%;
  max-width: 700px;
  overflow: hidden;
}
.single-career-banner-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.single-career-banner-content{
  padding-left: 90px;
}
.single-career-banner-content .section-head{
  margin-bottom: 30px;
  color: #FFFFFF;
}
.single-career-banner-content p{
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: 10px;
}
.single-career-banner-content .legal-btn{
  margin-top: 36px;
}
.single-career-banner-content .legal-btn span{
  color: #67461B;
}
.single-career-banner-content .legal-btn svg path{
  stroke: #67461B;
}

.single-career-content-wraper{
  padding: 50px 0 100px 0;
  position: relative;
}
.form-vector{
  position: absolute;
  width: 50%;
  height: 90%;
  background: linear-gradient(270deg, #B02533 -24.46%, #E24533 100%);
  opacity: 0.67;
  filter: blur(184.882px);
  right: -25%;
}
.single-career-row{
  display: flex;
  justify-content: space-between;
  max-width: 1340px;
  position: relative;
}
.single-career-content{
  max-width: 700px;
  width: 100%;
  z-index: 1;
  position: relative;
}
.single-career-content :where(h1,h2,h3,h4,h5,h6){
  font-weight: 400;
  margin-bottom: 16px;
  padding-top: 10px;
  color: #fff;
}
.single-career-content :where(ul,ol){
  margin-left: 20px;
  margin-bottom: 30px;
}

.single-career-content p, .single-career-content li{
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 15px;
}
.single-career-content li{
  margin-bottom: 4px;
}
.single-career-content h1{
  font-size: 30px;
}
.single-career-content h2{
  font-size: 25px;
}
.single-career-content h3{
  font-size: 20px;
}
.single-career-content h4{
  font-size: 18px;
}
.single-career-content h5{
  font-size: 16px;
}
.single-career-content h6{
  font-size: 14px;
}
.single-career-form .section-head{
  margin-bottom: 25px;
  color: #FFFFFF;
}
.form-grid{
  position: relative;
  margin-bottom: 8px;
}
.form-grid :where(input, textarea, select){
  width: 100%;
  background: transparent;
  border: 1px solid #a7a7a7;
  border-radius: 15px;
  padding: 15px 30px;
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  color: #FFFFFF;
  outline: none;
}
.form-grid :where(input, textarea, select)::placeholder{
  color: #e7e7e7;
}
.custom-file{
  position: relative;
  background: #000;
  display: flex;
  width: fit-content;
  align-items: center;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}
.custom-file span{
  line-height: 1;
  display: block;
  flex-shrink: 0;
  margin-right: 5px;
}
.form-grid input[type="file"]{
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 1;
}
.submit-btn{
  background: transparent;
  margin-top: 20px;
}
.submit-btn span{
  color: #67461B;
}
.submit-btn svg path{
  stroke: #67461B;
}
.single-career-form{
  padding-left: 3rem;
  width: fit-content;
  padding-top: 12rem;
  position: relative;
}
.form-circle-2{
  position: absolute;
  width: 500px;
  height: 500px;
  left: -60%;
  top: 5%;
  background: rgba(255, 255, 255, 0.02);
  filter: blur(5.2957px);
  backdrop-filter: blur(15.8871px);
  border-radius: 50%;
}
.single-career-form-wraper{
  position: relative;
  z-index: 0;
}
/*=================// single career page =================*/


/*================= service listing =================*/
.service-listing{
  position: relative;
}
.service-listing::after,.service-listing::before{
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
}
.service-listing::before{
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
}
.service-listing::after{
  right: 0;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 50%);
}
.service-listing-banner{
  height: 600px;
  position: relative;
  overflow: hidden;
  width: fit-content;
  margin: auto;
}
.service-listing-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.service-listing-wraper{
  position: relative;
  z-index: 2;
  padding-top: 60px;
  margin-top: -18rem;
}
.service-listing-wraper::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 300px;
  top: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0,0,0,1) 0, rgba(0,0,0,0) 75%);
  z-index: 1;
  pointer-events: none;
}
.service-listing-header{
  text-align: center;
  padding-bottom: 80px;
}
.service-listing-header .section-head{
  font-size: 55px;
  color: #fff;
  margin-bottom: 15px;
}
.service-listing-header p{
  line-height: 1.5;
}
.service-listing-wraper .container{
  position: relative;
  z-index: 2;
}

.service-listing-item-wraper{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 112px;
}
.service-listing-item-col{
  max-width: 25%;
  width: 100%;
}
.service-listing-item{
  position: relative;
  overflow: hidden;
  height: 100%;
}
.service-listing-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.service-listing-item-front{
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.service-listing-item-front-content{
  position: absolute;
  width: 100%;
  padding: 40px 20px;
  text-align: center;
  bottom: 0;
  left: 0;
}
.service-listing-item-front-content h4{
  font-size: 20px;
  color: #fff;
  font-weight: 300;
  line-height: 1.5;
}
.service-listing-item-back{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
}
.service-listing-item-back::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 75%);
  z-index: 1;
}
.service-listing-item-back a{
  position: absolute;
  z-index: 2;
  transform: translateY(-40px);
}
.service-listing-item-back .legal-btn span{
  color: #67461B;
}
.service-listing-item-back .legal-btn svg path{
  stroke: #67461B;
}
.service-listing-item:hover .service-listing-item-back{
  opacity: 1;
}
.service-listing-item-back h3{
  font-size: 30px;
  margin-bottom: 15px;
}
.service-listing-item-back p{
  line-height: 1.5;
}
.service-listing-item-back a{
  margin-top: 15px;
}
/*=================// service listing =================*/

/*=============== Immigration page =================*/
.inshort-how p{
  width: 100%;
}
.panel-experts.immigration{
  background: linear-gradient(270deg, #000000 0%, #740202 100%);
}
.immigration-shape{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity, transform;
}
.why-choose-us.immigration{
  background: linear-gradient(90deg, #000000 0%, #740202 100%);
}
.why-choose-us.immigration::before{
  background: linear-gradient(270.28deg, #000000 14.61%, #7E0F0F 108.76%);
  filter: none;
  display: none;
}



.immigration.why-choose-us .grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 1rem;
    font-size: 0.9rem;
    border: 0;
    height: 150px;
    backface-visibility: hidden;
    font-weight: 300;
    max-width: 230px;
    width: 100%;
    text-align: center;
}
.immigration.why-choose-us .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: relative;
    z-index: 7;
    display: grid;
    max-width: 100%;
    height: fit-content;
    max-width: 1345px;
    width: 100%;
    margin-left: auto;
    padding-left: 1rem;
}
.immigration.why-choose-us .container{
  align-items: center;
}
.immigration.why-choose-us .grid .grid-item:not(:last-child){
  margin-right: 2rem;
}

 .immigration-vector-box {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
}

/* COMMON VECTOR STYLE */
.img-vector {
  position: relative;
  width: 300px;
  height: 600px;
  border-radius: 300px;
  filter: blur(0.2px);
}


/* BORDER */
.img-vector::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgb(255, 40, 40);
  mask-image: linear-gradient(to bottom, #000, #00000059 30%, rgba(0, 0, 0, 0) 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000, #00000059 30%, rgba(0, 0, 0, 0) 70%, transparent);
}

/* VECTOR ONE */
.img-vector.one {
  left: -17%;
  top: 0;
  transform: rotate(-50deg);
  background: linear-gradient(360deg,rgba(180, 0, 0, 0.9) 10%,rgba(80, 0, 0, 0.4) 55%,rgba(0, 0, 0, 0) 85%);
}
.img-vector.one::before{
  mask-image: linear-gradient(to bottom, #00000000, #00000000 30%, rgba(0, 0, 0, 0) 70%, #000);
  -webkit-mask-image: linear-gradient(to bottom, #00000000, #00000000 30%, rgba(0, 0, 0, 0) 70%, #000);
}
/* VECTOR TWO */
.img-vector.two {
  right: -17%;
  top: 0;
  transform: rotate(-50deg);
  background: linear-gradient(180deg, rgba(150, 0, 0, 0.85) 20%,rgba(70, 0, 0, 0.35) 60%, transparent 90%);
}
.img-vector {
  background-size: 120% 200%;
  opacity: 0;
  transform: scale(0);
}

/* ******************** residential *************** */
.panel-how.dispute.residential{
background: linear-gradient(90deg, rgb(0, 0, 0) 0%, #0059FF 100%);
}
.panel-how.dispute.residential .d-circle{
    background:linear-gradient(90.07deg, #e7bdff3b 0.06%, #011b4b00 59.86%)
}
.why-choose-us.residential {
    background:linear-gradient(270deg, #090519 0%, #2D0964 50%, #1260fd 100%); 
}
.why-choose-us.residential::before{
  display: none;
}
.panel-experts.residential{
  background: #090519;
}
.panel-cta.residential{
  background: #090519;
}

.svc-card p, .pvc-card p{
  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* number of lines to show */
           line-clamp: 4; 
   -webkit-box-orient: vertical;
}
.blog-subject{
overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
           line-clamp: 3; 
   -webkit-box-orient: vertical;
}

/*=================== team page ==================*/
.team-listing .container, .team-listing-wraper .container{
  max-width: 1270px;
}
.team-listing{
  position: relative;
  padding-top: 300px;
  height: auto;
  min-height: auto;
}
.team-listing .team-banner{
  position: absolute;
  right: 0;
  top: 0;
  max-width: 100%;
}
.team-listing-row{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-inline: -12px;
}
.team-item-col{
  width: 20%;
  padding: 0 12px;
  margin-bottom: 24px;
  display: none;
    animation: fadeUp 0.4s ease forwards;
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.team-listing-wraper{
  height: auto;
  min-height: auto;
  position: relative;
  padding-bottom: 80px;
  z-index: 1;
}
.team-listing-row .member{
  transform: none;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.team-listing .home-text{
  position: relative;
  max-width: 590px;
  width: 100%;
  margin-bottom: 160px;
}
.team-listing .home-text p{
  font-size: 16px;
}
.load-more-btn-box{
  text-align: center;
  margin: 20px 0;
  display: none;
}
.load-more-btn-box .legal-btn{
  width: fit-content;
  margin: auto;
}
.team-listing-page{
  position: relative;
  overflow: hidden;
}
.square-anim{
  position: absolute;
  width: 886px;
  height: 886px;
  background: #0044C9;
  filter: blur(187px);
  border-radius: 78px;
  left: -40%;
  top: -112px;
  transform: rotate(45deg);
  z-index: 1;
}
.body-vector{
  position: absolute;
  height: 500px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(2, 61, 177, 1), rgba(0,0,0,1));
  filter: blur(150px);
  top: -10rem;
  right: -3rem;
}

.teamModal .modal-content{
  max-width: 1280px !important;
  overflow: hidden;
  /* max-height: 80vh; */
  padding: 0 !important;
  padding-bottom: 1rem !important;
}
.team-info-scroll{
  max-height: 80vh;
  overflow: auto;
}
.teamModal .modal-content .square-anim{
  left: -25%;
  height: 350px;
  width: 350px;
}
.modal-content-wraper{
  position: relative;
}
.teamModal .modal-content{
  background: #000000 !important;
  position: relative;
}
.teamModal .modal-close{
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #fff;
  color: #000000;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
}
.team-wraper{
  position: relative;
  display: flex;
  z-index: 1;
}
.team-image{
  flex-shrink: 0;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  overflow: hidden;
}
.team-image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
}
.team-info{
  padding-left: 60px;
}
.team-info h4{
  font-weight: 500;
  font-size: 32px;
  line-height: 1.5;
  color: #FFFFFF;
  margin-bottom: 20px;
}
.designnation{
  position: relative;
  width: fit-content;
  font-size: 16px;
  margin-bottom: 20px;
}
.designnation::after{
  content: "";
  position: absolute;
  width: 50%;
  height: 3px;
  bottom: -5px;
  left: 0;
  background: #023DB1;
}
.team-info-content{

}
.team-info-content p{
  font-size: 15px;
  margin-bottom: 20px;
  line-height: 1.6;
}
.team-member-info{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.team-member-info li{
  font-size: 15px;
  margin-bottom: 15px;
}
.team-member-info li span{
  color: #868686;
}
.team-member-info :where(li, a){
  color: #fff;
  text-decoration: none;
}
.team-modal-vector{
  position: absolute;
  top: 0;
  left: 3rem;
  max-width: 100%;
}
.team-modal-vector-circle{
  position: absolute;
  right: -60px;
  bottom: 0;
  width: 40%;
  height: 90px;
  border-radius: 50%;
  background: rgba(2, 61, 177, 0.8);
  filter: blur(75.8465px);
  transform: rotate(160deg);
}
.modal-inside{
  position: relative;
  max-height: 86vh;
  padding: 90px 100px 60px 100px;
}
/*===================// team page ==================*/


/*================ about page ==================*/
.about-page{
  padding-top: 300px;
  position: relative;
}
.about-page section{
  height: auto;
}
.about-banner{
  position: relative;
  padding-bottom: 80px;
}
.about-banner .banner-container{
  position: relative;
  z-index: 1;
}
.about-banner-img{
  position: absolute;
  right: 0;
  top: 0;
  max-width: 100%;
  z-index: 1;

}
.about-banner .home-text{
  position: relative;
  max-width: 590px;
  width: 100%;
}
.about-banner .home-text p{
  font-size: 16px;
  line-height: 1.55;
}
.gradient-circle{
  position: relative;
  z-index: 0;
  height: 500px;
  width: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #020009 60%, #0040BD 102.63%);
}
.gradient-circle-child{
  width: 80%;
  height: 360px;
  border-radius: 50%;
  background: linear-gradient(180deg, #020009 65%, #0040BD 109.63%);
}
.gradient-wraper{
  display: flex;
  position: absolute;
  width: 100%;
  z-index: 1;
  bottom: 6rem;
}
.gradient-circle-item{
  width: 33.333%;
  height: 195px;
  border-radius: 50%;
  background: #023DB1;
  filter: blur(250px);
}
.about-container{
  max-width: 1300px;
  width: 100%;
  margin: auto;
  padding: 0 15px;
}
.about-description{
  max-width: 900px;
  margin: auto;
}
.about-description p{
  text-align: center;
background: linear-gradient(90deg, #FFFFFF 0%, rgba(80, 123, 205, 0.69) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin-bottom: 60px;
font-size: 20px;
line-height: 1.3;
}
.decade-row{
  display: flex;
  flex-wrap: wrap;
  margin-inline: -10px;
}
.decade-col{
  width: 50%;
  padding: 0 10px;
  margin-bottom: 20px;
}
.decade-item{
  height: 100%;
  padding: 40px;
  background: linear-gradient(106.37deg, rgba(255, 255, 255, 0.13) 38.64%, rgba(153, 153, 153, 0.13) 88.68%);
  backdrop-filter: blur(50px);
  border-radius: 10px;
}
.decade-item p{
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(80, 123, 205, 0.69) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  margin-bottom: 0;
}
.about-content{
  padding-bottom: 140px;
  position: relative;
}
.about-content svg{
  position: absolute;
  top: -8rem;
  width: auto;
}
.shape-left-about{
  left: 0;
}
.shape-right-about{
  right: 0;
}
.about-content .single-head{
  border: none;
  padding: 0;
  margin-bottom: 40px;
}
.about-content .single-head h1{
  text-align: center;
  color: #fff;
  max-width: 100%;
}
.decade-section{
  position: relative;
}
.decade-section svg{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  max-height: 690px;
  max-width: 100%;
  width: auto;
  animation: 3s scaleAnim linear infinite;
  transform-origin: center center;
  z-index: -1;
}
@keyframes scaleAnim{
  0%{
    transform: scale(0.8);
  }
  50%{
    transform: scale(1);
  }
  100%{
    transform: scale(0.8);
  }
}
/*================// about page ==================*/

.contact-adddress p{
  margin-bottom: 16px;
}
.grid-item{
  position: relative;
  overflow: hidden;
}
/* .grid-item::after{
    position: absolute;
    width: 300%;
    content: '';
    height: 5px;
    background: #fff;
    filter: blur(20px);
    top: 0;
    left: -300%;
    transform: rotate(45deg);
    transition: all 2s ease;
} */
.grid-item span{
  height: 30px;
  width: 30px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  width: fit-content;
  margin-top: 10px;
  transition: all 0.3s ease;
}
.grid-item:hover span{
  background: #fff;
}
.grid-item:hover span img{
  filter: brightness(0);
}
.grid-item:hover::after{
  left: 300%;
}

/*------------- fee information ----------------*/

.fee-information_row{
  display: flex;
  margin: 0 -10px;
  flex-wrap: wrap;
}
.fee-information_row .fee-information_col:nth-child(even) .fee-information_item a{
  background: #f2f8ff;
}
.fee-information_col{
  max-width: 25%;
  width: 100%;
  margin-bottom: 20px;
  padding: 0 10px;
}
.fee-information_item{
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
}
.fee-information_item h5{
  font-size: 20px;
  color: #212121;
  margin: 0 !important;
}
.fee-information_item a{
  text-decoration: none;
  display: block;
  padding: 25px 25px;
  background: #fff4f5;
}
.fee-information_icon{
  margin-bottom: 13px;
}
.fee-information_icon img{
  margin: 0 !important;
  max-width: 50px;
  max-width: 50px;
}
.pr-0{
  padding-right: 0;
}

/*------------- //fee information ----------------*/

/*------------- single fee information ----------------*/

.wp-block-quote{
  position: relative;
  padding: 40px 40px 40px 40px;
  background: #edf6ff;
  margin-bottom: 36px;
  font-size: 42px;
  color: #000000;
}
.wp-block-quote::after{
  position: absolute;
  width: 5px;
  height: 100%;
  top: 0;
  left: 0;
  content: '';
  pointer-events: none;
  background: #0f59a7;
}
.supporting-page .single-blog-header .single-head{
  padding-bottom: 15px;
}
.wp-block-quote h2{
  margin: 0 !important;
  padding: 0;
}

/*-------------// single fee information ----------------*/



.tab-buttons{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  margin-bottom:20px;
}

.tab-btn{
  padding:10px 28px;
  cursor:pointer;
  border:1px solid #ccc;
  background:#f5f5f5;
  border-radius: 7px;
}

.tab-btn.active{
  background:#2265aa;
  color:#fff;
}

.tab-content{
  display:none;
}

.tab-content.active{
  display:block;
}