@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Oswald:wght@700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,900;1,100;1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing:border-box;
}

h1,h2,h3,h4,h5,h6{
    margin: 0px ;
    color: #000;
    font-family: 'Open Sans',sans-serif;
}
p{
    margin: 0px;
    color: #000;
    font-family: 'Open Sans',sans-serif;
    font-size: 16px;
}
.section-padding{
    padding: 50px 0px;
}
.clearfix{
    display: block;
    content: "";
    clear: both;
}
img{
    vertical-align: middle;
    width: 100%;
    height:250px;
}
a{
    text-decoration: none;
    margin: 0px;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    color: #000;
}
p{
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    margin: 0px auto;
    text-align:justify;
}
ol,ul{
    list-style-type: none;
    margin: 0px ;
    padding: 0px;
}
.met-our-team-about:hover{
    background: linear-gradient(
        45deg,
        rgba(29, 236, 197, 0.5),
        rgba(91, 14, 214, 0.5) 100%
    );
}

body{
  overflow-x:hidden!important;
}

section{
    overflow:hidden;
}

/* =====MAIN CSS START HERE ================================================================================================================================================================== */
/* =====MAIN CSS START HERE ============================================================================================= */
/* Animated RGB Gradient Background */
.animated-nav {
  background: linear-gradient(45deg, #ff0040, #ff8c00, #00eaff, #8a2be2);
  background-size: 400% 400%;
  animation: rgbAnimation 12s ease infinite;
  padding: 6px 0;
  box-shadow: 0 4px 25px rgba(0,0,0,0.15);
}

/* RGB Gradient Animation */
@keyframes rgbAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Logo Style */
.main_logo {
  height: 55px;
  transition: 0.3s ease;
}
.logo:hover {
  transform: scale(1.05);
}

/* Navbar Links */
.navbar-top .nav-link {
  color: #fff !important;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: 0.3s ease;
  display: flex;
  align-items: center;
}

.navbar-top .nav-link:hover {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

/* Appointment Button */
.btn-appointment {
  background: rgba(255,255,255,0.25);
  padding: 8px 16px !important;
  border-radius: 10px;
}
.btn-appointment:hover {
  background: rgba(255,255,255,0.35);
}

/* Contact Button */
.btn-contact {
  background: rgba(0,0,0,0.25);
  padding: 8px 16px !important;
  border-radius: 10px;
}
.btn-contact:hover {
  background: rgba(0,0,0,0.35);
}

/* Custom Mobile Toggle */
.custom-toggler {
  border: none !important;
  background: #fff !important;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.toggler-icon {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
}

/* Mobile Menu Background */
@media (max-width: 991px) {
  #topbar {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(14px);
    border-radius: 12px;
    padding: 15px 10px;
    margin-top: 12px;
  }

  .navbar-top .nav-link {
    margin-bottom: 10px;
    font-size: 16px;
  }
}

 
 
 
 
 /* ========= TOP BAR CSS END HERE ============== */
 .offcan_sidebar ul li{
    border-bottom: 1px dotted #000 !important;
 }
.offcan_sidebar ul li a i{
    color: #000;
    font-size: 26px;
    text-transform: capitalize;  
 }
 #ofcanvas{
    background: linear-gradient(103deg,rgba(32, 104, 230, 0.68) 0%, rgba(255, 36, 61, 0.81) 49%, rgba(255, 255, 255, 0.53) 100%, rgba(255, 255, 255, 1) 75%);
    transition: 1s all;
 }
 .coll tr td a{
    color: #fff;
 }
 .coll tr td:hover {
  background: #fff;
  transition: 1s all;
 }
 .coll tr td:hover a{
    color: rgb(33, 86, 233);
 }
 /*  ===========OFF CANVAS CSS END HERE ================= */
 
 /* RESET OLD STYLES (important) */
.main-menu2,
.main-menu2 ul,
.main-menu2 ul li,
.sub-menu { all: unset; }

/* MAIN MENU WRAPPER */
.main-menu-bg {
  background: #fff;
  padding: 12px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* MENU LIST */
.main-nav .menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.main-nav .menu-list li {
  position: relative;
  margin-right: 22px;
}

.main-nav .menu-list li a {
  display: inline-block;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  border-radius: 6px;
  transition: 0.3s ease;
}

.main-nav .menu-list li a:hover {
  background: #2563eb;
  color: #fff;
}

/* DROPDOWN MENU */
.main-nav .menu-list li.has-dropdown:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav .dropdown {
  position: absolute;
  top: 105%;
  left: 0;
  background: #ffffff;
  min-width: 200px;
  border-radius: 10px;
  padding: 8px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.25s ease;
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
  z-index: 999;
  border: 1px solid #e5e7eb;
}

.main-nav .dropdown li a {
  padding: 10px 20px;
  display: block;
  color: #111;
  font-size: 15px;
  transition: 0.2s ease;
}

.main-nav .dropdown li a:hover {
  background: #2563eb;
  color: #fff;
  padding-left: 25px;
}

/* SOCIAL ICONS */
.social-icons a {
  background: #f1f5f9;
  display: inline-block;
  margin-left: 8px;
  padding: 10px 12px;
  border-radius: 50%;
  font-size: 18px;
  color: #000;
  transition: .3s ease;
}

.social-icons a:hover.facebook { background: #4267B2; color: #fff; }
.social-icons a:hover.twitter { background: #1DA1F2; color: #fff; }
.social-icons a:hover.linkedin { background: #0A66C2; color: #fff; }
.social-icons a:hover.instagram { background: #E1306C; color: #fff; }
.social-icons a:hover.youtube { background: #FF0000; color: #fff; }

/* MOBILE */
@media(max-width:992px){
  .main-nav .menu-list {
    flex-direction: column;
    align-items: start;
  }
}




/* ===========  banner slider  area css start======= */


.overlay-about {
    position: absolute;
    background: linear-gradient(to right, #0d6efdd1, rgb(255 193 7 / 52%));
    background:rgba(0,0,0,0.80);
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    animation: overlay 10s infinite;
    animation-delay: 0.75s;
}
/*@keyframes overlay{*/
/*    0% {*/
/*        left:-100% ;*/
/*        opacity:0;*/
/*      }*/
/*    25%{*/
/*        left:0%;*/
/*        opacity:1;*/
/*      }*/
/*    50%{*/
/*        left:0%;*/
/*        opacity:1;*/
/*    }*/
/*    75%{*/
/*        left:0%;*/
/*        opacity:1;*/
/*    }*/
/*    100%{*/
/*        left:100%;*/
/*        opacity:1;*/
/*    }*/
/*}*/
  #slider {
    position: relative;
  }
  #slider .main-slider .owl-dots {
    position: absolute;
    top: 85%;
    right: 45%;
    transform: translate(-50%, -50%);
  }
.about-title h1{
    font-family:'Robot',sans-serif;
    font-weight:700;
    text-transform: uppercase;
    text-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.about-image img{
    height:100%;
}
.about-content{
    height: 100%;
   padding:20px 20px ;
}
.about-content h3{ 
    font-size:28px;
    font-family:'Open Sans ',sans-serif;
    font-weight:500;
    padding:10px 0px 
}
.about-content p{ 
    font-size:16px;
    font-family:'Open Sans ',sans-serif;
    font-weight:200;
    padding:10px 0px 
}

.attroney{
    text-align: center;
    position: relative;
    height:300px;
    width:300px;
    border-radius:50%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.attroney:hover .attoreny-info{
    top: 20%;
    transition: 0.35s all;
}
.attoreny-image img{
    position:absolute;
    top:0;
    left:0;
    height: 300px;
    width:300px;
    border-radius: 50%;
}
.attoreny h1{
    text-align: center;
    color:#fff;
    font-family:'Robot',sans-serif;
    font-weight:700;
    padding:15px 0px ;
    text-transform: capitalize;
}
  /* immigration css  */
  .slider-text-immi{
    position: absolute !important;
    width: 100%;
    margin: 0 atuo ;
    z-index: 9;
    transition: 0.5s all;
    padding: 10px;
    text-align: center;
  }
.slider-text-immi h1 {
    color: #e2ed39;
    font-family: 'Oswald', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0px;
    padding: 10px;
}
.slider-text-immi h6 {
    color: #fff;
    font-family: 'Roboto';
    font-weight: 800;
    text-transform: uppercase;
    margin: 0px;
    padding: 10px;
    text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
}
.slider-text-immi p {
    font-size: 22px;
    color: var(--bs-body-bg);
    font-family: 'Open Sans',sans-serif;
    font-weight: bolder;
    padding: 10px;
    text-align: center;
    width: 30%;
}

.slider-text-immi button {
    background: #6610f2c7;
}
.our-visa-service h5{
    color: #000;
    font-size: 20px;
    font-family: 'Open Sans',sans-serif;
    font-weight: 200;
    text-transform: capitalize;
}
.our-visa-service p{
    color: #000;
    font-size: 16px;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    text-align: center;
}
.study-aborods-immi {
    box-shadow: rgba(0, 0, 0, 0.39) 0px 10px 20px, rgba(0, 0, 0, 0.33) 0px 6px 6px;
    padding: 20px 15px;
    background: #00000059;
}
.study-aborods-immi h6 {
    color: #fff;
    font-size: 22px;
    font-family: 'Open Sans';
    font-weight: 700;
    letter-spacing: 5px;
    margin: 0px;
    padding: 10px 0px;
}
.study-aborods-immi h5{
    color: #000;
}
.study-aborods-immi h3 {
    color: #fff;
    font-family: 'Roboto';
    font-weight: 700;
    padding: 10px 8px;
    background: #2fa368;
}
.study-aborods-immi p {
    color: #fff;
    font-size: 18px;
    font-family: 'Open Sans';
    padding: 10px 0px;
}
.your-choose h1{
    text-transform:capitalize;
    font-weight:500;
    font-family:'Open Sans';
    padding:10px 0px ;
}
.your-choose p{
    font-size:16px;
    text-transform:capitalize;
    font-weight:200;
    font-family:'Open Sans'; 
}
/* study abroad css  */
.slider-text-abroad{
    position: absolute;
    top: 20%;
    text-align:left;
    transform: translate(0%,60%);
    overflow: hidden;
    width: 700px;
    background: rgba(0, 0, 0,0.35);
    padding: 10px ;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.slider-text-abroad h3 {
    color: #fff;
    font-family: auto;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0px;
}
.slider-text-abroad h2{
    color: #fff;
    font-family: 'Roboto',sans-serif;
    font-weight: 900;
    padding: 5px 0px ;
    text-transform: uppercase;
}
.slider-text-abroad h5 {
    color: #fff;
    font-family: auto;
    font-weight: 200;
    text-transform: capitalize;
    margin: 0px;
    font-size: 26px;
}
.lgbg{
     background: #f1f1f1;
}
.our-course {
    border: 1px solid #fff;
    background: #fff;
    transition: 1s all;
    margin: 10px 0px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.our-course img{
    height: 200px;
}
.our-course:hover{
     background: #8a3ab9;
}
.our-course2{
    border: 10px solid #fff;
    background: #fff;
    transition: 1s all;
    border-radius:10px;
    margin: 10px 0px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.our-course2:hover{
    transition: 1s all;
    box-shadow: -5px -5px 30px 5px red, 5px 5px 30px 5px blue;
}
.our-course:hover h3{
 color: #fff;
 transition: 1s all;
}
.our-course:hover h6{
 color: #fff;
 transition: 1s all ;
}
.our-course:hover p{
 color: #fff;
 transition: 1s all ;
}
.our-course:hover a{
 color: #fff;
 transition: 1s all ;
}
.our-course h6{
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    color: #000;
    text-transform: capitalize;
    font-size: 18px;
}
.our-course h3{
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    color: #000;
    text-transform: capitalize;
    font-size: 22px;
}
.our-course p{
    font-size: 16px s;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    color: #000;
    padding: 10px 0px ;
}
.populer-course h2{
    color: #2C3F69;
    font-family: 'Open Sans ',sans-serif;
    font-weight: 500;
    text-transform: capitalize;
}
.populer-course p {
    font-size: 16px;
    color: #2C3F69;
    font-family:'Open Sans',sans-serif;
    font-weight: 100;
    text-transform: capitalize;
    text-align: justify;
}
/* teams css */
.all-team-members{
    position: relative;
    overflow: hidden;
    transition: 0.35s all;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.all-team-members img{
    height: 450px;
    width: 100%;
}
.team-info{
    position: absolute;
    bottom:-75%;
    background:rgba(0, 126, 230,0.95);
    width: 100%;
    height: 100%;
    transition: 0.35s all;
}
.all-team-members:hover .team-info{
    bottom: 0;
    transition: 0.35s all;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.team-info h1 {
    font-size: 25px;
    color: #fff;
    padding: 8px 0px;
    text-transform: capitalize;
    font-family: 'Open Sans';
    font-weight: 500;
    margin-top:20px ;
}
.team-info h6 {
    font-size: 20px;
    color: #fff;
    text-transform: capitalize;
    font-family: 'Open Sans';
    font-weight: 500;
}
.team-info p{
    font-size: 17px;
    text-align: center;
    padding: 10px 20px ;
    color: #fff;
    font-family: 'Open Sans ',sans-serif;
}
.team-info ul li a{
    text-align: center;
    font-size: 20px;
    transform: translate(80%,0%);
    padding: 0px 10px;
}
.teams-social{
    text-align: center;   
}
.teams-social ul li {
    display: inline;
}
.teams-social ul li a{
    font-size: 17px;
    color: #000;
}
.get-agency{
    text-align: center;
    z-index :999;
}
/* more country  */
.more-details-uk h1 {
    color: #000;
    font-size: 38px;
    font-family: 'Open Sans';
    font-weight: 400;
    padding: 10px 0px;
    text-transform:capitalize;
}
.more-details-uk h3 {
    color: #000;
    font-size: 22px;
    font-family: 'Open Sans';
    font-weight: 400;
    padding: 10px 0px;
    text-transform:capitalize;
}
.more-details-uk p {
    color: #000;
    font-size: 16px;
    font-family: 'Open Sans';
    font-weight: 400;
    padding: 10px 0px;
}
/* privecy css start here  */
.our-privecy h1 {
    color: #000;
    /* font-size: 45px; */
    font-family: 'Open Sans';
    font-weight: 500;
    padding: 10px 0px;
    text-transform: capitalize;
}
.our-privecy h6 {
    color: #000;
    font-size: 15px;
    font-family: 'Open Sans';
    font-weight: 700;
    text-transform: capitalize;
    padding:10px 0px ;
}
.our-privecy p {
    color: #000;
    font-size: 14px;
    font-family: 'Open Sans';
    text-align: left;
    text-align: justify;
    text-transform: capitalize;
    padding-top: 10px 0px;
}
/* single  blog  */
.about-single-blog-side ul li{
    font-size: 18px;
    font-family:'Open Sans',sans-serif;
    font-weight: 200;
    padding:5px 0px ;
    color:#000;
    border-bottom:1px solid rgba(7, 7, 7,0.10);
}
.about-single-blog-side ul li span{
    font-size: 16px;
    margin-right: 12px ;
    color: green;
}
.single-about-image{
    position: relative;
    height: 500px;
    width: 100%;
    overflow: hidden;
}
.single-about-image img{
    position: absolute;
    height:100%;
    width: 100% ;
    top: 0;
    left: 0;
}
.single-about-content h1 {
    color: #000;
    font-size: 36px;
    font-family: 'Open Sans';
    font-weight: 400;
    margin: 0 auto;
    padding: 10px 0px;
    text-transform: capitalize;
}
.single-about-content h4 {
    color: #000;
    font-size: 25px;
    font-family: 'Open Sans';
    font-weight: 300;
    text-transform: capitalize;
}
.single-about-content p {
    color: #000;
    font-size: 16px;
    font-family: 'Open Sans';
    font-weight:
}
  /*button style advances css  */
.imageboxtitle2 {
    background: rgb(0,59,181);
    padding:5px 10px;
    border-radius:20px 0px 20px 0px;
    color:#fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    border:1px solid #fff";
}
.imageboxtitle{
    background: rgb(0,59,181);
    padding:5px 10px;
    border-radius:20px 0px 20px 0px ;
    color:#fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    border:1px solid #fff";
}
   
#boxstyle{
    background:#fff;
    padding:5px 10px;
    border-radius:30px 0px 30px 0px ;
    color:#fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.15) 0px 10px 10px;
    border:1px solid #fff";
    transition:0.35s all ;
}
#boxstyle:hover{
    background: #fff;
    padding: 5px 10px;
    border-radius: 0px 30px 0px 30px;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.15) 0px 10px 10px;
    border: 1px solid reen";
    transition:0.35s all;
}
   /*__button style __*/
#buttonstyle{
    background:#1d1760;
    padding:5px 10px;
    border-radius:20px 0px 20px 0px ;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.15) 0px 10px 10px;
    border:1px solid #fff";
    transition:035s all ;
}   
#buttonstyle:hover {
    background:#fff;
    padding:5px 10px;
    border-radius:0px 20px 0px 20px ;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.15) 0px 10px 10px;
    transition:0.35s all ;
    border:1px solid green";
}    
#buttonstyle a{
    color:#fff;
    font-size:18px;
    padding: 8px 5px ;
}
  #buttonstyle:hover a{
      color:green;
  } 
   /* ========== footer Area start Here ======== */
.f-bg, .copyright{
    background: #0A0A24;
    padding: 20px 0px ;
}
.footer-content h4{
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: #fff;
    border: 1px dotted #fff;
    text-transform: capitalize;
}
.footer-content img{
    background: #fff;
    width: 100%;
    height: auto;
    margin: 8px 0px;
}
.footer-content p{
    color: #fff; 
}
.footer-content ul li{
    width: 100%;
}
.footer-content ul li a{
    font-size: 14px ;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #fff;
    text-transform: capitalize;
    padding: 8px 0px !important;
    transition: 1s all;
}
.footer-content ul li:hover a{
    color: rgb(101, 132, 216);
    transition: 1s all ;
}
.social-icon-footer{
    background: #fff !important;
    border: none;
}
.social-icon-footer ul li{
   display: inline;
    padding: 5px 10px ;
    border: 1px solid #000;
}
.social-icon-footer ul li a{
    font-size: 20px;
    color: #000;
    font-family: 'Open Sans' sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    border: none;
}
/* ==========  footer area end  here  */ 

.text3d {
    position:relative;
    left: 0;
    /*transform: translate(50%,-50%);*/
    text-transform: uppercase;
    font-family: verdana;
    font-size: 60px;
    font-weight: 700;
    color: #1b0b37;
    padding:20px 0px;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #a04b4b,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #2e5ec7,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}
/*====*/
#cardstyle1{
    background: #fff;
    border-radius: 20px;
    border:5px solid linear-gradient(59deg, rgba(31,78,241,1) 11%, rgba(179,18,193,1) 74%);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
/*overlay right css */
.area_overlay{
    position: relative;
    overflow: hidden;
    transition: 0.35s all;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    height:100%;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    border-radius:10px;
}
.area_overlay img{
    height: 250px;
    width: 100%;
}
.overlay_information {
    position: absolute;
    right: -100%;
    top: 0;
    background: rgba(0, 126, 230,0.95);
    width: 100%;
    height: 100%;
    transition: 0.35s all;
}
.area_overlay:hover .overlay_information{
    right: 0;
    transition: 0.35s all;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

/* overlay end  */
    
/*--------  testimonial css -----*/















/*==========*/
.testimonial-area {
  background: #f6f9fc;
  padding: 70px 0;
}

/* MAIN CARD */
.neo-card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: 60px 25px 40px;
  box-shadow: 
    8px 8px 18px rgba(0,0,0,0.12),
    -6px -6px 16px rgba(255,255,255,0.8);
  transition: all .4s ease;
  overflow: hidden;
}

/* HOVER EFFECT */
.neo-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 
    12px 12px 26px rgba(0,0,0,0.18),
    -6px -6px 20px rgba(255,255,255,0.9);
}

/* TOP ANGLE SHAPE */
.testimonial-top-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 70px;
  background: linear-gradient(135deg, #00d4ff, #008cff);
  transform: rotate(-6deg) translateY(-30px);
  z-index: 1;
  opacity: 0.8;
}

/* BOTTOM ANGLE SHAPE */
.neo-bottom-shape {
  position: absolute;
  bottom: -40px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: rgba(0, 140, 255, 0.12);
  border-radius: 50%;
  filter: blur(4px);
  z-index: 0;
}

/* PROFILE IMAGE */
.neo-img-wrapper {
  height: 90px;
  width: 90px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
  position: relative;
  z-index: 2;
  margin-top: -30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}

.neo-img-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* NAME */
.neo-name {
  margin-top: 15px;
  font-weight: 700;
  color: #1f2937;
  z-index: 2;
  position: relative;
}

/* TEXT */
.neo-text {
  font-size: 15px;
  color: #4b5563;
  margin-top: 10px;
  line-height: 1.6;
  z-index: 2;
  position: relative;
}


/*.sectionbg1{*/
/*  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1031%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(251%2c 253%2c 255%2c 1)'%3e%3c/rect%3e%3cpath d='M1073.1325065621515 124.26956691929107L1035.8327046604077 40.49284018863209 928.8175155152911 138.3309064065773z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M824.45 135.12 a94.44 94.44 0 1 0 188.88 0 a94.44 94.44 0 1 0 -188.88 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1079.2360872752568 383.08012658011546L969.9567777668321 351.7447888196661 938.6214400063828 461.02409832809064 1047.9007495148073 492.35943608854z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1395.4584308499652 268.2530803987929L1294.635168929692 167.4298184785198 1193.811907009419 268.2530803987929 1294.635168929692 369.07634231906604z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1086.118086696141 469.47259041797065L943.2186931359395 436.338189395182 978.5638462242715 559.6013867951991z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M245.42 377.61 a100.54 100.54 0 1 0 201.08 0 a100.54 100.54 0 1 0 -201.08 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M141.97351838268017 445.77360986585103L-10.316084630528252 489.4419508289292 185.64185934575832 598.0632128790594z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1142.8805243892818 580.8680505013014L1322.1144008582976 612.6479729428423 1270.3092053550815 462.1947606422799z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M263.47 38.54 a105.11 105.11 0 1 0 210.22 0 a105.11 105.11 0 1 0 -210.22 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M413.1244710912358 269.5073036037559L360.75842672319703 125.63277915641044 216.88390227585157 177.99882352444925 269.2499466438904 321.87334797179466z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M892.2808262504631 388.47491380281593L881.7992072653061 473.84084994396926 967.1651434064595 484.32246892912616 977.6467623916164 398.95653278797283z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1031'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");*/
/*}*/
/*.sectionbg2{*/
/*background-color: #ee5522;*/
/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23d23d09' fill-opacity='0.6'%3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");*/
/*background-attachment: fixed;*/
/*}*/


/*=========  new site design only changese =======================================================================================================================================================================*/

/*----------- main menu desgin 2--------*/
/* Main Menu Background */




/*=== index page banner css=======*/
/* ======= Hero Section ======= */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider-item {
  position: relative;
  height: 70vh; /* default height 70% viewport */
  min-height: 400px; /* responsive min height */
  display: flex;
  align-items: center; /* vertically center image */
  justify-content: center;
}

.slider-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* maintain aspect ratio */
  object-position: center center; /* always show center part */

  /* Start scale slightly smaller */
  transform: scale(1); 

  /* Animation */
  animation: zoomIn 5s linear infinite forwards; /* adjust duration for speed */
}

/* Keyframes for continuous zoom-in */
@keyframes zoomIn {
  0% {
    transform: scale(1); /* original size */
  }
  100% {
    transform: scale(1.2); /* final zoom-in scale */
  }
}

/* Optional: hover zoom effect (if needed) */
.slider-item:hover img {
  transform: scale(1.25); /* slightly larger on hover */
  transition: transform 0.5s ease;
}

/* Modern Gradient Overlay */
.slider-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.2)
  );
  z-index: 1;
}

/* ======= Content Area ======= */
.slider-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 90%;
  max-width: 900px;
  padding: 30px 25px;
  color: #fff;

  /* Glass effect */
  background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

  text-align: center;
}


/* ===== Typography ===== */
.slider-content h2.slide-title {
  font-size: 22px;
  font-weight: 500;
  color: #00d4ff; /* neon blue */
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
  text-shadow: 0 2px 6px rgba(0, 212, 255, 0.5);
}

.slider-content h1.slide-heading {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.slider-content p.slide-caption {
  font-size: 18px;
  font-weight: 400;
  color: #f0f0f0;
  margin-bottom: 30px;
  line-height: 1.6;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ===== Button Styling ===== */
.slider-content a.slide-btn {
  display: inline-block;
  padding: 15px 35px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #2068e6, #ff243d, #fbb03b);
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}

.slider-content a.slide-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255,255,255,0.15);
  transform: rotate(45deg);
  transition: all 0.5s ease;
}

.slider-content a.slide-btn:hover::before {
  top: 0;
  left: 0;
}

.slider-content a.slide-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 25px rgba(255,36,61,0.5);
}

/* ===== Fade-in Animation ===== */
@keyframes fadeInContent {
  0% {
    opacity: 0;
    transform: translate(-50%, -55%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .slider-content h1.slide-heading {
    font-size: 36px;
  }
  .slider-content h2.slide-title {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .slider-content h1.slide-heading {
    font-size: 28px;
  }
  .slider-content h2.slide-title {
    font-size: 18px;
  }
  .slider-content p.slide-caption {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .slider-content h1.slide-heading {
    font-size: 22px;
  }
  .slider-content h2.slide-title {
    font-size: 16px;
  }
  .slider-content p.slide-caption {
    font-size: 14px;
  }
  .slider-content a.slide-btn {
    padding: 12px 28px;
    font-size: 14px;
  }
}




@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.owl-carousel .owl-item.active .slider-content h2.slide-title,
.owl-carousel .owl-item.active .slider-content h1.slide-heading,
.owl-carousel .owl-item.active .slider-content p.slide-caption,
.owl-carousel .owl-item.active .slider-content a.slide-btn {
    animation: fadeInDown 1s ease forwards;
}



/* ======= Responsive ======= */
@media (max-width: 992px) {
  .slider-item {
    height: 65vh;
  }
  .slide-heading { font-size: 34px; }
}

@media (max-width: 768px) {
  .slider-item { height: 60vh; }
  .slide-heading { font-size: 28px; }
  .slide-title { font-size: 18px; }
}

@media (max-width: 576px) {
  .slider-item { height: 50vh; }
  .slide-heading { font-size: 22px; }
  .slide-caption { font-size: 14px; }
}



/*===========  marque tag slider = section */
/* ===== Marquee Section ===== */
.marquee-section {
  width: 100%;
  background: linear-gradient(90deg, #2068e6, #ff243d);
  overflow: hidden;
  padding: 20px 0;
}

.marquee-wrapper {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 100s linear infinite;
}

.marquee-content h1 {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  margin: 0 50px;
}

/* ===== Animation ===== */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .marquee-content h1 {
    font-size: 18px;
    margin: 0 30px;
  }
}

@media (max-width: 576px) {
  .marquee-content h1 {
    font-size: 16px;
    margin: 0 20px;
  }
}



/*index about section design */
/* Overall Section */
.about-section {
  padding: 80px 0;
  background: #ffff;
  /*//f7f9fc*/
}

/* Title Style */
.about-title {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: 3px;
  position: relative;
  display: inline-block;
  color: #1e293b;
}

.about-title::after {
  content: "";
  width: 80px;
  height: 4px;
  background: linear-gradient(45deg, #ff7f50, #ffbd59);
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border-radius: 10px;
}

/* Image Wrapper */
.about-image-wrapper {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.about-img {
  border-radius: 20px;
  width: 100%;
  height: auto;
  transition: 0.5s;
}

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

/* Content Glass Card */
.about-content-wrapper {
  padding: 35px;
  background: rgba(255,255,255,0.65);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Headings */
.about-content-wrapper h3 {
  font-weight: 700;
  color: rgba(30, 41, 59, 0.9); /* dark slate color with 90% opacity */
  margin-top: 20px;
  padding-bottom: 7px;
}

/* Text */
.about-content-wrapper p {
  color: #475569;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Name */
.about-name {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 25px;
  color: #0f172a;
}

/* Designation */
.about-designation {
  font-weight: 500;
  color: #3b82f6;
  margin-bottom: 20px;
}

/* Modern Button */
.about-btn {
  background: linear-gradient(45deg, #2563eb, #1e40af);
  padding: 12px 30px;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  transition: 0.3s ease;
  display: inline-block;
}

.about-btn:hover {
  transform: translateY(-3px);
  background: linear-gradient(45deg, #1d4ed8, #1e3a8a);
  color: #fff;
}





/*index service section design */
/* Section Style */
.service-section {
  padding: 80px 0;
  background: #fff;
}

/* Heading */
.service-title {
  font-size: 3rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 3px;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}

.service-title::after {
  content: "";
  width: 90px;
  height: 4px;
  background: linear-gradient(45deg, #34d399, #059669);
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px;
}

/* Caption */
.service-caption {
  font-size: 1.1rem;
  color: #475569;
  margin-top: 15px;
  text-transform: uppercase;
  font-weight: 600;
}

/* Cards */
.service-card {
  padding: 25px;
  background: #ffffff;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: 0.35s ease;
  border: 1px solid rgba(0,0,0,0.05);
  cursor: pointer;
  height: 100%;
}

/* Card Hover Effect */
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 35px rgba(0,0,0,0.15);
}

/* Card Image */
.service-img img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: 15px;
}

/* Titles & Text */
.service-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
}

.service-card h6 {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Button */
.service-btn {
  padding: 10px 24px;
  background: linear-gradient(45deg, #10b981, #059669);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  display: inline-block;
  transition: 0.3s ease;
}

.service-btn:hover {
  background: linear-gradient(45deg, #059669, #047857);
  transform: translateY(-3px);
}
@media (max-width: 768px) {
  .service-title { font-size: 2.2rem; }
  .service-img img { height: 150px; }
}



/* Section Background */

/* Section Background */
.why-choose-section {
  padding: 80px 0;
  background: #f9fafb;
  font-family: 'Open Sans', sans-serif;
  color: #1f2937;
}

/* Section Heading */
.why-title {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 15px;
  text-align: center;
}

.why-title .highlight {
  color: #10b981;
}

.why-caption {
  font-size: 1.1rem;
  color: #4b5563;
  line-height: 1.7;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px auto;
}

/* Cards */
.why-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: 0.4s ease;
  position: relative;
}

.why-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Card Badge */
.card-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #10b981;
  color: #fff;
  font-weight: 700;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Card Header */
.why-card .card-header {
  background: #10b981;
  padding: 15px 20px;
  border-radius: 10px 10px 0 0;
}

.why-card .card-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
  text-align: left;
}

/* Card Body */
.why-card .card-body {
  padding: 20px;
}

.why-card .card-body p {
  font-size: 0.95rem;
  color: #1f2937;
  line-height: 1.6;
  text-align: left;
}

/* Responsive */
@media (max-width: 768px) {
  .why-title { font-size: 2.2rem; }
  .why-card { margin-bottom: 20px; }
}



/*-------legal aid card design -----*/
.legal_body{
     background: linear-gradient(103deg,rgba(32, 104, 230, 0.68) 0%, rgba(255, 36, 61, 0.81) 49%, rgba(255, 255, 255, 0.53) 100%, rgba(255, 255, 255, 1) 75%);
}
 .legal-cards {
      padding: 60px 0;
    }

    .section-head {
      text-align:center;
      margin-bottom: 34px;
      letter-spacing: 0.6px;
    }
    .section-head h2 {
      font-size: 28px;
      font-weight: 700;
      margin: 0 0 6px 0;
      color: #fff;
    }
    .section-head p {
      margin:0;
      color: #cfe8ff;
      opacity: 0.9;
    }

    /* Card grid */
    .la-card {
      position: relative;
      overflow: visible;
      border-radius: 18px;
      padding: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      border: 1px solid rgba(255,255,255,0.03);
      transition: transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .35s ease;
      min-height: 220px;
    }

    /* Animated gradient border (pseudo-element) */
    .la-card::before{
      content: "";
      position: absolute;
      inset: -2px;
      z-index: 0;
      border-radius: 20px;
      padding: 2px;
      background: linear-gradient(90deg, var(--accent1), var(--accent2), var(--accent3), var(--accent4));
      background-size: 200% 200%;
      filter: blur(6px);
      opacity: 0.8;
      transform: scale(0.98);
      transition: opacity .3s ease, transform .3s ease;
      mix-blend-mode: screen;
    }

    .la-card .card-inner{
      position: relative;
      z-index: 2;
    }

    .la-card:hover {
      transform: translateY(-10px) scale(1.01);
      box-shadow: 0 18px 50px rgba(2,6,23,0.75);
    }
    .la-card:hover::before { transform: scale(1); opacity: 1; animation: borderShift 6s linear infinite; }

    @keyframes borderShift {
      0%{ background-position: 0% 50%;}
      50%{ background-position: 100% 50%;}
      100%{ background-position: 0% 50%;}
    }

    /* Icon circle */
    .la-icon {
      width: 72px;
      height: 72px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      box-shadow: inset 0 -6px 18px rgba(0,0,0,0.35);
      transition: transform .35s ease;
    }
    .la-icon i {
      font-size: 28px;
      color: #fff;
      transition: transform .45s cubic-bezier(.2,.9,.2,1);
    }

    .la-card:hover .la-icon { transform: translateY(-6px) rotate(-6deg); }
    .la-card:hover .la-icon i { transform: scale(1.08); }

    .la-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 10px;
      color: #fff;
      line-height: 1.15;
    }
    .la-desc {
      color: rgba(230,238,248,0.85);
      font-size: 15px;
      margin-bottom: 18px;
      line-height: 1.6;
    }

    .la-cta {
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding:8px 14px;
      border-radius: 999px;
      font-weight:600;
      font-size:14px;
      text-decoration:none;
      color:#081428;
      background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
      box-shadow: 0 6px 18px rgba(2,6,23,0.5);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .la-cta span {
      display:inline-block;
      background: linear-gradient(90deg, rgba(0,120,255,0.18), rgba(255,55,85,0.18));
      padding:6px;
      border-radius: 50%;
      color: #fff;
      width:28px;
      height:28px;
      text-align:center;
      line-height:16px;
      font-size:13px;
    }
    .la-cta:hover{ transform: translateY(-4px); box-shadow: 0 12px 30px rgba(2,6,23,0.65); }

    /* reveal animation */
    .reveal {
      opacity: 0;
      transform: translateY(20px) scale(.98);
      transition: all .8s cubic-bezier(.2,.9,.2,1);
    }
    .reveal.in-view {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* small screens: tighten spacing */
    @media (max-width: 575px){
      .la-icon { width:62px; height:62px; }
      .la-title { font-size:18px; }
      .la-desc { font-size:14px; }
      .la-card { padding:18px; min-height:200px;}
    }






/*---------  history section css start ehre */
/* SECTION BACKGROUND */
.history-modern-section {
  background: linear-gradient(150deg, #11728c 10%, #eaf00235 80%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* Floating glow circles */
.history-modern-section::before,
.history-modern-section::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  filter: blur(60px);
  z-index: 0;
}

.history-modern-section::before {
  top: -60px;
  left: -40px;
}

.history-modern-section::after {
  bottom: -60px;
  right: -40px;
}

/* MAIN CARD WRAPPER */
.history-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 50px 30px;
  max-width: 900px;
  margin: auto;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(14px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 
    0 12px 40px rgba(0,0,0,0.18),
    inset 0 0 25px rgba(255,255,255,0.25);
}

/* MAIN HEADING */
.history-heading {
  font-size: 3.2rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 15px;
  text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* TITLE */
.history-title {
  font-size: 2rem;
  font-weight: 700;
  color: #102a43;
  margin-bottom: 10px;
}

/* SUBTITLE */
.history-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #d62828;
  margin-bottom: 25px;
}

/* CONTENT BOX */
.history-content-box {
  background: #ffffff;
  border-radius: 18px;
  padding: 25px 25px;
  color: #222;
  box-shadow: 
    0 5px 20px rgba(0,0,0,0.1),
    inset 0 0 12px rgba(0,0,0,0.05);
}

.history-content-box p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #3b3b3b;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .history-heading { font-size: 2.3rem; }
  .history-title { font-size: 1.5rem; }
  .history-subtitle { font-size: 1.2rem; }
}