/*=====================================================
Template Name   : Taxrio
Description     : Tax Advisor & Consulting HTML5 Template
Author          : Lunartemp
Version         : 1.0
=======================================================*/


/*=====================================================
Table of contents
=======================================================
1. Google fonts
2. Theme variables
3. General css
4. Preloader
5. Theme default css
6. Margin & padding
7. Site title css
8. Theme button
9. Container
10. Scroll top css
11. Header top css
12. Navbar css
13. Multi level dropdown menu
14. Search popup
15. Sidebar popup css 
16. Main section css 
17. Hero css 
18. Play btn
19. Nice select css
20. About css 
21. Feature css 
22. Service css 
23. Service single
24. Case study css 
25. Case study single
26. Counter css 
27. Pricing css 
28. Video css 
29. Choose css 
30. Process css 
31. Testimonial css 
32. Quote css 
33. Blog css 
34. Blog single css
35. Widget sidebar css
36. Partner css 
37. Contact us css 
38. Instagram css 
39. Team css 
40. Cta css 
41. Gallery css 
42. Faq css 
43. Breadcrumb css
44. Pagination css 
45. Auth css 
46. Coming soon css 
47. Error css 
48. Terms/privacy css 
49. Footer css 
50. Home 2
51. Home 3
52. Home 4
53. Home 5
=======================================================*/


/*====================
1. Google fonts
======================*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&family=Roboto:wght@100;300;400;500;700;900&display=swap');


/*====================
2. Theme variables
======================*/

:root {
  --body-font: 'Roboto', sans-serif;
  --heading-font: "Plus Jakarta Sans", sans-serif;;
  --theme-color: #33B6FF;
  --theme-color2: #3DCAB1;
  --theme-bg-light: #EAF8FF;
  --body-text-color: #757F95;
  --color-white: #ffffff;
  --color-dark: #0A1D43;
  --box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
  --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.17);
  --transition: all .5s ease-in-out;
  --transition2: all .3s ease-in-out;
  --border-info-color: rgba(0, 0, 0, 0.08);
  --border-info-color2: rgba(0, 0, 0, 0.05);
  --border-white-color: rgba(255, 255, 255, 0.08);
  --border-white-color2: rgba(255, 255, 255, 0.05);
  --footer-bg: #03163B;
  --footer-bg2: #0A1D43;
  --footer-text-color: #F5FAFF;
}



/*====================
3. General css
======================*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  scroll-behavior: inherit !important;
}

html,
body {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  color: var(--body-text-color);
  line-height: 1.8;
}

a {
  color:  var(--color-dark);
  display: inline-block;
}

a,
a:active,
a:focus,
a:hover {
  outline: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  text-decoration: none;
}

a:hover {
  color: var(--color-blue);
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color:  var(--color-dark);
  margin: 0px;
  font-weight: 600;
  font-family: var(--heading-font);
  line-height: 1.2;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  margin: 0px;
}

.img,
img {
  max-width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: auto;
}

label {
  color: #999;
  cursor: pointer;
  font-weight: 400;
}

*::-moz-selection {
  background: #d6b161;
  color: var(--color-white);
  text-shadow: none;
}

::-moz-selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

::selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}

*::placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}



/*====================
4. Preloader
======================*/

.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader-ripple div {
  position: absolute;
  border: 4px solid var(--color-white);
  opacity: 1;
  border-radius: 50%;
  animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.loader-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes loader-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}




/*===================
5. Theme default css
======================*/

.ovrflow-hidden {
  overflow: hidden;
}

.position-relative {
  position: relative;
  z-index: 1;
}

.text-right {
  text-align: right;
}

.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-pd {
  padding: 0 7rem;
}

.s-pd {
  padding: 0 12rem;
}

.h-100 {
  height: 100%;
}

.h-100vh {
  height: 100vh;
}

.bg {
  background: var(--theme-bg-light);
}



/*====================
6. Margin & padding
======================*/

.pt-0 {
  padding-top: 0px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-120 {
  padding-top: 120px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-120 {
  padding-bottom: 120px;
}

.py-80 {
  padding: 80px 0;
}

.py-90 {
  padding: 90px 0;
}

.py-100 {
  padding: 100px 0;
}

.py-110 {
  padding: 110px 0;
}

.py-120 {
  padding: 120px 0;
}

.mt-0 {
  margin-top: 0px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-120 {
  margin-top: 120px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-120 {
  margin-bottom: 120px;
}

.my-80 {
  margin: 80px 0;
}

.my-90 {
  margin: 90px 0;
}

.my-100 {
  margin: 100px 0;
}

.my-110 {
  margin: 110px 0;
}

.my-120 {
  margin: 120px 0;
}



/*====================
7. Site title css
======================*/

.site-heading {
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}

.site-title-tagline {
  display: inline-block;
  color: var(--theme-color);
  font-weight: 500;
  text-transform: capitalize;
  font-size: 18px;
  background: var(--theme-bg-light);
  border-radius: 50px;
  padding-right: 15px;
  margin-bottom: 15px;
}

.site-title-tagline.light{
  background: var(--color-white);
}

.site-title-tagline i{
  font-size: 16px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: var(--theme-color);
  color: var(--color-white);
  text-align: center;
  border-radius: 50px;
  margin-right: 5px;
}

.site-title {
  font-weight: 800;
  text-transform: capitalize;
  font-size: 45px;
  color:  var(--color-dark);
  margin-bottom: 0;
}

.site-title span{
  color: var(--theme-color);
}

.site-heading p {
  margin-top: 15px;
}

.heading-divider {
  display: inline-block;
  position: relative;
  border-bottom: 4px solid var(--theme-color);
  width: 90px;
  height: 4px;
  border-radius: 50px;
}

.heading-divider:after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 6px;
  width: 15px;
  border-radius: 0px;
  background-color: var(--color-white);
  -webkit-animation: heading-move 5s infinite linear;
  animation: heading-move 5s infinite linear;
}

@-webkit-keyframes heading-move {
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(75px);
  }
  100% {
    transform: translateX(-1px);
  }
}

@keyframes heading-move {
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(75px);
  }
  100% {
    transform: translateX(-1px);
  }
}



/*====================
8. Theme button
======================*/

.theme-btn {
  font-size: 16px;
  color: var(--color-white);
  padding: 10px 24px;
  transition: all 0.5s;
  text-transform: capitalize;
  position: relative;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  border: none;
  background: var(--theme-color);
  box-shadow: var(--box-shadow);
  z-index: 1;
}

.theme-btn::before {
  content: "";
  height: 300px;
  width: 300px;
  background: #febd10;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(0);
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.theme-btn:hover {
  color: #000;
}

.theme-btn:hover::before {
  transform: translateY(-50%) translateX(-50%) scale(1);
}

.theme-btn i {
  margin-left: 8px;
  transform: rotate(-40deg);
  transition: var(--transition2);
}

.theme-btn:hover i{
  transform: rotate(0deg);
}

.theme-btn span {
  margin-right: 5px;
}

.theme-btn2{
  background: var(--theme-color);
  color: var(--color-white);
  font-weight: 600;
}

.theme-btn2::before{
    background: #febd10;
}
.theme-btn2:hover{
  color: #000;
  background: #febd10;
}
.theme-btn2::after{
  background: #febd10;
}



/*====================
9. Container
======================*/

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1200px;
  }
}



/*====================
10. Scroll top css
======================*/

#scroll-top {
  position: fixed;
  bottom: -20px;
  right: 30px;
  z-index: 99;
  font-size: 20px;
  border: none;
  outline: none;
  border-radius: 50px;
  color: var(--color-white);
  background-color: var(--theme-color);
  cursor: pointer;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  box-shadow: var(--box-shadow2);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  transform: rotate(-40deg);
  z-index: 1;
}

#scroll-top:hover{
  transform: rotate(0);
}

#scroll-top.active{
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}


@media all and (min-width: 768px) and (max-width: 1199px) {
  #scroll-top.active {
    bottom: 100px;
  }
}



/*====================
11. Header top css
======================*/

.header-top {
  padding: 12px 0 12px 0;
  position: relative;
  background: var(--color-dark);
  z-index: 5;
}

.header-top::before{
  content: "";
  position: absolute;
  right: 5%;
  top: 0;
  bottom: 0;
  width: 35%;
  background: var(--theme-color);
  border-radius: 50px 0 50px 0;
  z-index: -1;
}

.header-top-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.header-top-contact ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}

.header-top-contact a {
  color: var(--color-white);
  font-weight: 500;
}

.header-top-contact a i{
  color: var(--theme-color);
}

.header-top-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.header-top-link a{
  color: var(--color-white);
  margin-right: 12px;
}

.header-top-link a:hover{
  color: var(--theme-color);
}

.header-top-social span{
  color: var(--color-white);
}

.header-top-social a {
  color: var(--color-white);
  font-size: 16px;
  text-align: center;
  margin-left: 14px;
  transition: var(--transition);
}

.header-top-social a:hover {
  color: var(--color-dark);
}

.header-top-lang .top-lang{
  color: var(--color-white);
}

.header-top-lang .dropdown-menu{
  min-width: 60px;
  border-radius: 15px;
  padding: 10px;
  border: none;
  box-shadow: var(--box-shadow);
}

.header-top-lang .dropdown-item{
  color: var(--color-dark);
  border-radius: 10px;
}

.header-top-lang .dropdown-item:hover{
  background: var(--theme-color);
  color: var(--color-white);
}

@media all and (max-width: 1199px) {
  .header-top-contact ul {
    gap: 10px;
  }

  .header-top-social a {
    width: 34px;
    height: 34px;
    line-height: 37px;
    margin-left: 0;
  }

  .header-top-left {
    margin-right: 5px;
  }
}

@media all and (max-width: 991px) {
  .header-top-contact ul {
    gap: 0px;
  }

  .header-top-contact ul li{
    margin-right: 10px;
  }

  .header-top-contact ul li:last-child{
    display: none;
  }

  .header-top-lang .dropdown-toggle::after{
    margin-top: 12px;
  }
}



/*====================
12. Navbar css
======================*/

.navbar {
  background: transparent;
  padding-top: 0px;
  padding-bottom: 0px;
  z-index: 4;
}

.navbar.fixed-top {
  position: fixed;
  background: var(--color-white);
  box-shadow: var(--box-shadow2);
  animation: slide-down 0.7s;
}


@keyframes slide-down {
  0% {
    transform: translateY(-100%);
  }

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

.navbar .navbar-brand .logo-display {
  display: block;
}

.navbar .navbar-brand .logo-scrolled {
  display: none;
}

.navbar.fixed-top .navbar-brand .logo-display {
  display: none;
}

.navbar.fixed-top .navbar-brand .logo-scrolled {
  display: block;
}

.navbar .navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler-mobile-icon {
  display: inline-block;
  width: inherit;
  height: inherit;
}

.navbar-brand {
  margin-right: 0;
}

.navbar-brand img {
  width: 170px;
}

.navbar .dropdown-toggle::after {
  display: inline-block;
  margin-left: 5px;
  vertical-align: baseline;
  font-family: 'Font Awesome 6 Pro';
  content: "\f107";
  font-weight: 600;
  border: none;
  font-size: 14px;
}

@media all and (max-width: 1199px) {
  .nav-right {
    margin-left: 25px !important;
  }

  .navbar .nav-item .nav-link {
    margin-right: 15px;
  }

  .nav-right-btn {
    display: none;
  }

  .nav-right .call-wrap{
    display: none !important;
  }
}

@media all and (min-width: 992px) {
  .navbar .nav-item .nav-link {
    margin-right: 22px;
    padding: 30px 0 30px 0;
    font-size: 17px;
    font-weight: 600;
    color:  var(--color-dark);
    text-transform: capitalize;
  }

  .navbar .nav-item:last-child .nav-link {
    margin-right: 0;
  }

  .navbar .nav-item .dropdown-menu {
    display: block;
    padding: 10px;
    margin-top: 0;
    left: -15px;
    border-radius: 15px;
    border: none;
    background: var(--color-dark);
    width: 220px;
    box-shadow: var(--box-shadow);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition2);
  }

  .navbar .nav-item .dropdown-menu .dropdown-item {
    font-size: 16px;
    padding: 6px 15px;
    font-weight: 500;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    transition: var(--transition2);
    z-index: 1;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item:hover {
    background: var(--theme-color);
    color: var(--color-white);
    padding-left: 25px;
  }

  /* .navbar .nav-item .dropdown-menu .dropdown-item::before {
    content: "\f061";
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    left: -15px;
    top: 6px;
    color: var(--color-white);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition2);
    z-index: -1;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item:hover::before {
    left: 0;
    opacity: 1;
    visibility: visible;
  } */

  .navbar .nav-item .nav-link {
    position: relative;
  }

  .navbar .nav-item .nav-link.active,
  .navbar .nav-item:hover .nav-link {
    color: var(--theme-color);
  }

  .navbar .nav-item:hover .dropdown-menu {
    transition: .3s;
    opacity: 1;
    visibility: visible;
    top: 100%;
    transform: rotateX(0deg);
  }

  .navbar .dropdown-menu-end {
    right: 0;
    left: auto;
  }

  .navbar .dropdown-menu.fade-down {
    top: 80%;
    transform: rotateX(-75deg);
    transform-origin: 0% 0%;
  }

  .navbar .dropdown-menu.fade-up {
    top: 140%;
  }

  .navbar #main_nav {
    justify-content: flex-end;
  }

  /* nav right */
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-left: 45px;
  }

  .nav-right-link {
    position: relative;
    font-size: 20px;
    color:  var(--color-dark);
    transition: var(--transition);
  }

  .nav-right-link:hover {
    color: var(--theme-color) !important;
  }

  .nav-right .sidebar-btn .nav-right-link,
  .nav-right .search-btn .nav-right-link {
    border: none;
    background: transparent;
    color: var(--color-dark);
    font-size: 28px;
    padding-right: 0;
  }

  .nav-right .search-btn .nav-right-link {
    font-size: 20px;
    padding: 0;
  }

  .nav-right .call-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
  }

  .nav-right .call-wrap .icon{
    width: 45px;
    height: 45px;
    line-height: 46px;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-white);
    text-align: center;
    font-size: 18px;
    margin-top: 5px;
  }

  .nav-right .call-wrap .content span{
   color: var(--theme-color);
   font-weight: 500;
  }

  .nav-right .call-wrap .content h6 a{
    color: var(--color-dark);
    font-weight: 800;
  }
}


/* mobile menu */
.mobile-menu-right {
  display: none;
}

@media all and (max-width: 991px) {
  .navbar {
    position: absolute;
    width: 100%;
    height: auto;
  }

  .navbar-brand img {
    width: 130px;
  }

  .navbar-collapse {
    max-height: 220px;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 20px;
    margin-bottom: 10px;
    background-color: var(--theme-bg-light);
    border-radius: 15px;
  }

  .navbar-toggler {
    padding: 0;
    border: none;
  }

  .dropdown-toggle::after {
    float: right;
    margin-top: 2.5px;
  }

  .navbar .nav-item .nav-link {
    color:  var(--color-dark);
    font-weight: 700;
    margin-right: 0px;
    transition: var(--transition);
  }

  .navbar .nav-item .nav-link:hover {
    color: var(--theme-color) !important;
  }

  .mobile-menu-right {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .mobile-menu-right .nav-right-link {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--color-dark);
  }

  .mobile-menu-right .nav-right-link:hover{
    color: var(--theme-color);
  }

  .navbar-toggler-mobile-icon {
    font-size: 25px;
    color:  var(--color-dark);
    font-weight: 500;
  }

  .navbar .dropdown-menu {
    border-radius: 15px;
    border: none;
  }

  .nav-right {
    display: none;
  }
}


/*============================
13. Multi level dropdown menu
==============================*/

.navbar .nav-item .dropdown-submenu {
  position: relative;
}

.navbar .nav-item .dropdown-submenu .dropdown-menu::before {
  display: none;
}

.navbar .nav-item .dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 15px;
  top: 8px;
  font-weight: 600;
}

.navbar .nav-item .dropdown-submenu a:hover {
  background: transparent;
  color: var(--color-white);
}

.navbar .nav-item .dropdown-submenu .dropdown-menu {
  top: 120%;
  left: 100%;
  opacity: 0;
  visibility: hidden;
}

.navbar .nav-item .dropdown-submenu:hover .dropdown-menu {
  top: 0;
  opacity: 1;
  visibility: visible;
}

@media all and (max-width: 991px) {
  .navbar .nav-item .dropdown-menu .dropdown-item{
    color: var(--color-dark)
  }

  .navbar .nav-item .dropdown-submenu .dropdown-menu {
    margin: 0 17px;
  }

  .navbar .nav-item .dropdown-submenu .dropdown-menu {
    opacity: unset;
    visibility: unset;
  }

  .navbar .nav-item .dropdown-submenu a::after {
    top: 3px;
  }

  .navbar .nav-item .dropdown-submenu a:hover {
    color: var(--theme-color);
  }
}



/* ======================
14. Search popup
====================== */

.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, .95);
  transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

.sidenav-bar-visible .search-popup {
  width: 80%;
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}

.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  border: none;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50px;
  text-align: center;
  background: var(--theme-color);
  text-align: center;
  width: 50px;
  height: 50px;
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
}

.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  transition-delay: 1500ms;
}

.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: all 300ms ease;
}

.search-active .search-popup form {
  transform: scaleX(1);
  transition-delay: 1200ms;
}

.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.search-popup .form-control {
  position: relative;
  width: 100%;
  height: 70px;
  outline: none;
  border-radius: 0px;
  border: none;
  border-bottom: 2px solid var(--color-white);
  background-color: transparent;
  color: var(--color-white);
  font-size: 40px;
  padding: 0 70px 0 20px;
  transition: all 500ms ease;
  text-transform: capitalize;
}

.search-popup .form-control::placeholder{
  color: var(--color-white);
  font-size: 40px;
}


.search-popup .form-group button {
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: 50px;
  background: transparent;
  text-align: center;
  font-size: 30px;
  color: var(--color-white);
  height: 50px;
  width: 50px;
  border: none;
  cursor: pointer;
  transition: all 500ms ease;
}

.search-popup .form-group button:hover{
  color: var(--theme-color);
}




/*====================
15. Sidebar popup css 
======================*/

.sidebar-popup {
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.sidebar-popup.open {
  visibility: visible;
  opacity: 1;
}

.sidebar-wrapper {
  position: fixed;
  top: 0;
  right: -100%;
  width: 400px;
  background: var(--color-white);
  visibility: hidden;
  opacity: 0;
  padding: 40px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  z-index: 9999;
}

.sidebar-wrapper.open {
  right: 0;
  visibility: visible;
  opacity: 1;
}

.sidebar-content{
  position: relative;
  overflow-y: auto;
  height: calc(100vh - 75px);
}

.close-sidebar-popup{
  position: absolute;
  top: 1px;
  right: 1px;
  width: 38px;
  height: 38px;
  line-height: 36px;
  border-radius: 50px;
  text-align: center;
  border: none;
  font-size: 20px;
  background: var(--theme-color);
  color: var(--color-white);
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.close-sidebar-popup:hover{
  background: var(--color-dark);
}

.close-sidebar-popup i{
  transition: var(--transition);
}

.close-sidebar-popup:hover i{
  transform: rotate(180deg);
}

.sidebar-logo img{
  width: 180px;
}

.sidebar-about{
  margin-top: 40px;
}

.sidebar-about h4{
  margin-bottom: 10px;
  font-weight: 700;
}

.sidebar-contact{
  margin-top: 20px;
}

.sidebar-contact h4{
  margin-bottom: 15px;
  font-weight: 700;
}

.sidebar-contact li{
  margin: 10px 0;
}

.sidebar-contact li i{
  margin-right: 5px;
  color: var(--theme-color);
}

.sidebar-contact li a:hover{
  color: var(--theme-color);
}

.sidebar-social{
  margin-top: 25px;
}

.sidebar-social h4{
  margin-bottom: 20px;
  font-weight: 700;
}

.sidebar-social a{
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50px;
  margin-right: 8px;
  background: var(--theme-color);
  color: var(--color-white);
  box-shadow: var(--box-shadow);
}

.sidebar-social a:hover{
  background: var(--color-dark);
}



/*====================
16. Main section css 
======================*/

.main {
  margin-top: 0rem;
}



/*====================
17. Hero css 
======================*/

.hero-section {
  position: relative;
}

.hero-shape img{
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: auto;
  z-index: 2;
}

.hero-single {
  padding-top: 150px;
  padding-bottom: 150px;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-single::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: -0.5px;
  top: 0;
  background: linear-gradient(to bottom right, rgba(10, 29, 67, .6) 30%, rgba(10, 29, 67, 0) 100%);
  z-index: -1;
}

.hero-single .hero-content {
  height: 100%;
}

.hero-single .hero-content .hero-title {
  color: var(--theme-color);
  font-size: 60px;
  font-weight: 800;
  margin: 20px 0;
  text-transform: capitalize;
}

.hero-single .hero-content .hero-title span{
  color: #fff;
}

.hero-single .hero-content .hero-sub-title {
  display: inline-block;
  color: var(--theme-color);
  font-size: 25px;
  letter-spacing: 6px;
  font-weight: 800;
  position: relative;
  text-transform: uppercase;
}

.hero-single .hero-content p {
  color: var(--color-white);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 20px;
}

.hero-single .hero-content .hero-btn {
  gap: 1rem;
  display: flex;
  margin-top: 35px;
  justify-content: start;
}


@media all and (max-width: 1199px) {
  .hero-single .hero-content .hero-title {
    font-size: 37px;
  }
}

@media all and (max-width: 991px) {
  .hero-single .hero-content .hero-title {
    font-size: 50px;
  }
}

@media all and (max-width: 767px) {
  .hero-single .hero-content .hero-sub-title {
    font-size: 18px;
  }

  .hero-single .hero-content .hero-btn {
    gap: 1rem;
  }
}



/* hero-slider */
.hero-slider.owl-theme .owl-nav {
  margin-top: 0px;
}

.hero-slider.owl-theme .owl-nav [class*=owl-] {
  color: var(--color-white);
  font-size: 25px;
  margin: 0;
  padding: 0;
  background: var(--theme-color);
  display: inline-block;
  cursor: pointer;
  height: 55px;
  width: 55px;
  line-height: 55px;
  border-radius: 50px;
  text-align: center;
  transition: var(--transition);
}

.hero-slider.owl-theme .owl-nav [class*=owl-]:hover {
  background: var(--color-white);
  color: var(--theme-color);
}

.hero-slider.owl-theme .owl-nav .owl-prev {
  left: 40px;
}

.hero-slider.owl-theme .owl-nav .owl-next {
  right: 40px;
}

.hero-slider.owl-theme .owl-nav .owl-prev,
.hero-slider.owl-theme .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

@media all and (max-width: 1199px) {
  .hero-slider.owl-theme .owl-nav .owl-prev,
  .hero-slider.owl-theme .owl-nav .owl-next {
    top: unset;
    bottom: 70px !important;
  }

  .hero-slider.owl-theme .owl-nav .owl-prev {
    left: unset;
    right: 120px;
  }

  .hero-slider.owl-theme .owl-nav .owl-next {
    right: 40px;
  }
}


/* hs-1 */
.hs-1{
  margin-top: -9rem;
}

.hs-1 .hero-single{
  padding-top: 230px;
  padding-bottom: 90px;
  background: rgba(229, 242, 255, .2);
}

.hs-1 .hero-single::before{
  display: none;
}

.hs-1 .hero-shape img{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .15;
  z-index: -1;
}

.hs-1 .hero-single .hero-content .hero-sub-title{
  text-transform: capitalize;
  background: var(--theme-color2);
  color: var(--color-white);
  font-size: 18px;
  letter-spacing: 1px;
  border-radius: 50px;
  font-weight: 600;
  padding: 4px 18px 4px 4px;
}

.hs-1 .hero-single .hero-content .hero-sub-title i{
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50px;
  background: var(--color-white);
  color: var(--theme-color2);
  text-align: center;
  margin-right: 8px;
}

.hs-1 .hero-single .hero-content .hero-title{
  color: var(--color-dark);
  font-size: 55px;
}

.hs-1 .hero-single .hero-content p{
  color: var(--color-dark);
}

.hs-1 .hero-img img{
  position: absolute;
  right: 15%;
  bottom: -2px;
  width: 29.5%;
} 

.hs-1 .hero-img-shape{
  position: absolute;
  right: 10%;
  bottom: 0;
  width: 37%;
  z-index: -1;
}

@media all and (max-width: 1199px) {
  .hs-1 .hero-img img{
    width: 45%;
    right: 20px;
  }

  .hs-1 .hero-img-shape{
    width: 50%;
    right: 0;
  }
}


@media all and (max-width: 991px) {
  .hs-1 .hero-single{
    padding-top: 280px;
    padding-bottom: 0;
  }

  .hs-1 .hero-img{
    margin-top: 30px;
  }

  .hs-1 .hero-img img{
    width: 100%;
    position: unset;
  }

  .hs-1 .hero-img-shape{
    width: 100%;
    right: 0;
  }
}



/* hs-2 */
.hs-2 .hero-single{
  padding-bottom: 220px;
}

.hs-2 .hero-single .hero-content .hero-sub-title{
  padding-left: 50px;
  color: var(--theme-color2);
}

.hs-2 .hero-sub-title::before{
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  border-bottom: 3px solid var(--theme-color2);
  border-radius: 50px;
  width: 40px;
}

.hs-2 .hero-text-shape{
  position: absolute;
  right: 100px;
  bottom: 10px;
  z-index: 2;
}

.hs-2 .hero-text-shape p{
  color: transparent;
  font-size: 150px;
  writing-mode: vertical-lr;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 25px;
  -webkit-text-stroke: 2px rgba(229, 242, 255, .4);
}

@media all and (max-width: 991px) {
  .hs-2 .hero-text-shape{
    display: none;
  }
}

/* hs-3  */
.hs-3{
  margin-top: -6rem;
}

.hs-3 .hero-single{
  padding-top: 200px;
}

.hs-3 .hero-single::before{
  display: none;
}

.hs-3 .hero-single .hero-content .hero-sub-title{
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 20px;
}

.hs-3 .hero-shape-1 img{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
}

.hs-3 .hero-img{
  margin-left: 80px;
  padding-right: 30px;
  position: relative;
}

.hs-3 .hero-img::before{
  content: "";
  position: absolute;
  left: 30px;
  right: 0px;
  top: -30px;
  border: 5px solid #febd10;
  height: 100%;
  border-radius: 80px;
}

.hs-3 .hero-img img{
  border-radius: 50px;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
}

.hs-3 .hero-social h6{
  font-size: 19px;
  color: var(--color-white);
}

.hs-3 .hero-social .social{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.hs-3 .hero-social .social a{
  color: var(--color-white);
  font-size: 18px;
}

.hs-3 .hero-social .social a:hover{
  color: var(--theme-color);
}

.hs-3 .hero-social .social a i{
  color: var(--theme-color);
  margin-right: 5px;
}

@media all and (max-width: 991px) {
  .hs-3 .hero-img-wrap{
    margin-top: 80px;
  }

  .hs-3 .hero-img{
    margin-left: 0;
  }
}



/*===================
18. Play btn
=====================*/

.play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  line-height: 75px;
  font-size: 20px;
  text-align: center;
  background: var(--theme-color);
  color: var(--color-white) !important;
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.play-btn i::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--theme-color);
  border-radius: 50px;
  animation: ripple-wave 1s linear infinite;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}

@keyframes ripple-wave {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}



/*====================
19. Nice select css
======================*/

.nice-select{
  width: 100%;
  height: 55px;
  line-height: 54px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--color-dark);
}

.nice-select::after{
  width: 9px;
  height: 9px;
  right: 20px;
  margin-top: -7px
}

.nice-select:focus{
  border-color: var(--theme-color);
}

.nice-select .list{
  width: 100%;
  border: none;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.nice-select .option.focus,
.nice-select .option.selected.focus,
.nice-select .option:hover {
  border-radius: 10px;
  background: var(--theme-bg-light);
  color: var(--theme-color);
}




/* ===================
20. About css 
====================== */

.about-area {
  position: relative;
  display: block;
}

.about-left {
  position: relative;
  display: block;
}

.about-img{
  position: relative;
}

.about-img .img-1{
  width: 85%;
  border-radius: 20px;
}

.about-img .img-2{
  position: absolute;
  width: 280px;
  right: -30px;
  bottom: -50px;
  border: 10px solid var(--color-white);
  border-radius: 50%;
}

.about-img-shape img{
  position: absolute;
  right: -20px;
  top: -70px;
  z-index: -1;
}

.about-right {
  position: relative;
  display: block;
  padding-left: 30px;
}

.about-experience{
  background: var(--theme-color);
  box-shadow: var(--box-shadow);
  position: absolute;
  left: -30px;
  bottom: 40px;
  padding: 30px 20px;
  border-radius: 20px;
  text-align: center;
}

.about-experience h5{
  color: var(--color-white);
  font-size: 20px;
}

.about-experience span{
  color: var(--color-white);
  font-size: 70px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 10px;
  display: inline-block;
}

.about-list-wrapper {
  position: relative;
  display: block;
  margin-top: 25px;
  margin-bottom: 35px;
}

.about-text{
  color: var(--body-text-color);
}

.about-list {
  position: relative;
  display: block;
  margin-top: 25px;
  margin-bottom: 35px;
}

.about-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-info-color);
}

.about-list li:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.about-list .icon {
  position: relative;
  display: flex;
  align-items: center;
}

.about-list .icon i {
  font-size: 50px;
  color: var(--theme-color);
}

.about-list .icon img{
  width: 50px;
}

.about-list .content h4{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.about-list .content p{
  color: var(--body-text-color);
}


@media all and (max-width: 991px) {
  .about-right {
    margin-top: 80px;
  }
}

@media all and (max-width: 767px) {
  .about-title {
    font-size: 30px;
  }

  .about-img{
    width: 100%;
  }

  .about-img .img-2{
    width: 50%;
    right: 0;
  }

  .about-experience{
    left: -7px;
  }

  .about-list li{
    align-items: flex-start;
  }

  .about-list .icon img{
    width: 80px;
  }
}



/*====================
21. Feature css 
======================*/

/* ===============================
   FEATURE AREA
=================================*/

.feature-area {
  position: relative;
  padding: 100px 0;
  background: #f4f7fb;
}

.feature-wrap .row {
  display: flex;
  flex-wrap: wrap;
}

.feature-wrap .col-lg-4 {
  display: flex;
}

/* ===============================
   FEATURE CARD
=================================*/

.feature-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 420px;
  text-align: left;
  background: #1e2f3d;
  border-radius: 20px;
  padding: 90px 30px 40px 30px;
  transition: 0.5s ease;
  overflow: hidden;
  z-index: 1;
}

/* Gradient slide hover background */
.feature-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #33B6FF99, #33B6FF99);
  transition: 0.6s ease;
  z-index: -1;
}

.feature-item:hover::before {
  left: 0;
}

/* Lift + shadow effect */
.feature-item:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

/* ===============================
   COUNT BACKGROUND NUMBER
=================================*/

.feature-item .count {
  font-size: 110px;
  font-weight: 800;
  -webkit-text-stroke: 2px #33B6FF;
  -webkit-text-fill-color: transparent;
  position: absolute;
  right: 20px;
  top: 60px;
  opacity: 0.1;
  z-index: 0;
}

/* ===============================
   ICON CIRCLE
=================================*/

.feature-icon {
  position: absolute;
  /* left: 0; */
  top: 0;
  width: 100px;
  height: 100px;
  line-height: 85px;
  background: #33B6FF;
  border: 6px solid #ffffff;
  border-radius: 50%;
  transition: 0.5s ease;
}

.feature-icon img {
  width: 50px;
  filter: brightness(0) invert(1);
}

/* Icon animation on hover */
.feature-item:hover .feature-icon {
  transform: rotate(8deg) scale(1.05);
  background: #ffffff;
}

.feature-item:hover .feature-icon img {
  filter: none;
}

/* ===============================
   TITLE
=================================*/

.feature-content h4 {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffffff;
  transition: 0.4s ease;
}

/* ===============================
   BULLET LIST
=================================*/

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 15px;
  color: #d0d8e0;
  transition: 0.4s ease;
}

/* Dot Circle */
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #33B6FF;
  transition: 0.4s ease;
}

/* Dot animate on hover */
.feature-item:hover .feature-list li::before {
  background: #ffffff;
  transform: scale(1.6);
}

/* Text turns white on hover */
.feature-item:hover h4,
.feature-item:hover li {
  color: #ffffff;
}

/* ===============================
   RESPONSIVE
=================================*/

@media (max-width: 991px) {

  .feature-item {
    min-height: auto;
    padding: 80px 25px 30px 25px;
  }

  .feature-wrap .col-lg-4 {
    margin-bottom: 30px;
  }

  .feature-icon {
    left: 25px;
    top: -45px;
    width: 85px;
    height: 85px;
    line-height: 75px;
  }

  .feature-icon img {
    width: 40px;
  }
}

@media (max-width: 576px) {

  .feature-area {
    padding: 70px 0;
  }

  .feature-item {
    padding: 70px 20px 25px 20px;
  }

  .feature-content h4 {
    font-size: 20px;
  }

  .feature-list li {
    font-size: 14px;
  }
}





/*====================
22. Service css 
======================*/

.service-area {
  position: relative;
  display: block;
  overflow: hidden;
}

.service-item {
  position: relative;
  padding: 20px;
  background: var(--color-white);
  border-radius: 20px;
  transition: var(--transition);
  overflow: hidden;
  z-index: 1;
}

.service-shape img{
  position: absolute;
  width: 120px;
  height: 120px;
  right: 0;
  top: 0;
  z-index: -1;
}

.service-item:hover {
  transform: translateY(-10px);
}

.service-content {
  position: relative;
  margin-top: 5px;
}

.service-icon {
  width: 90px;
  height: 90px;
  line-height: 80px;
  background: var(--theme-color);
  font-size: 50px;
  color: var(--theme-color);
  text-align: center;
  border-radius: 50%;
  position: relative;
}

.service-icon::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 8px;
  top: 0px;
  border: 3px solid var(--theme-color2);
  border-radius: 50%;
  transition: var(--transition);
  z-index: -1;
}

.service-item:hover .service-icon::before{
  left: 0;
}

.service-icon img{
  width: 55px;
  filter: brightness(0) invert(1);
}

.service-arrow {
  margin-top: 25px;
}

.service-title a {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  color:  var(--color-dark);
}

.service-title a:hover {
  color: var(--theme-color);
}


/* service-area 2 */
.service-area2 .service-content{
  display: flex;
  gap: 15px;
}

.service-area2 .service-info{
  flex: 1;
}

.service-area2 .service-icon::before{
  display: none;
}

.service-area2 .service-img img{
  border-radius: 20px;
  margin-top: 25px;
}





/*==================
23. Service single
====================*/

.service-single-list i {
  color: var(--theme-color);
  margin-right: 10px;
}

.service-download a {
  border: 2px solid var(--theme-color);
  padding: 12px 20px;
  color:  var(--color-dark);
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
  border-radius: 50px;
  transition: var(--transition);
}

.service-download a i {
  margin-right: 10px;
}

.service-download a:hover {
  background-color: var(--theme-color);
  color: var(--color-white);
}

.service-details h3 {
  color:  var(--color-dark);
  font-weight: 700;
}

.service-details img{
  border-radius: 15px;
}



/* ========================
24. Case study css 
=========================== */

.case-study{
  position: relative;
}

.case-img{
  position: relative;
  overflow: hidden;
}

.case-img::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 10px;
  left: 10px;
  opacity: 0;
  border-radius: 15px;
  background: rgba(51, 182, 255, .7);
  transform: scaleY(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.case-item:hover .case-img::before {
  opacity: 1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.case-img img{
  border-radius: 20px;
}

.case-link {
  position: absolute;
  width: 55px;
  height: 55px;
  line-height: 55px;
  color: var(--theme-color) !important;
  background: var(--color-white);
  text-align: center;
  border-radius: 50px;
  left: 50%;
  top: 50%;
  font-size: 35px;
  margin-top: 50px;
  opacity: 0;
  box-shadow: var(--box-shadow);
  transform: translate(-50%, -50%);
  transition-delay: 0.3s;
}

.case-item:hover .case-link {
  margin-top: 0px;
  opacity: 1;
}

.case-btn{
  position: absolute;
  right: -3px;
  bottom: 0;
  width: 70px;
  height: 70px;
  background: var(--color-white);
  border-top-left-radius: 50%;
  padding: 10px;
}

.case-btn::before{
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: 5px 5px 0 5px var(--color-white);
  border-bottom-right-radius: 20px;
}

.case-btn::after{
  content: "";
  position: absolute;
  top: -20px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: 5px 5px 0 5px var(--color-white);
  border-bottom-right-radius: 20px;
}

.case-btn a{
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: var(--theme-color);
  color: var(--color-white);
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
}

.case-btn:hover a{
  transform: scale(1.1);
}

.case-content{
  margin-top: 10px;
  padding-bottom: 10px;
}

.case-content small{
  color: var(--theme-color);
  font-weight: 500;
  font-size: 16px;
}

.case-content h4 a{
  color: var(--color-dark);
  font-weight: 800;
}

.case-content h4 a:hover{
  color: var(--theme-color);
}

/* case-slider */
.case-slider.owl-theme .owl-nav button{
  color: var(--color-white);
  font-size: 25px;
  background: var(--theme-color);
  height: 48px;
  width: 48px;
  line-height: 49px;
  text-align: center;
  border-radius: 50%;
  margin-top: -25px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  transition: all .5s ease-in-out;
}

.case-slider.owl-theme .owl-nav .owl-prev {
  left: 10px;
  opacity: 0;
}

.case-slider.owl-theme .owl-nav .owl-next {
  right: 10px;
  opacity: 0;
}

.case-slider:hover .owl-nav .owl-prev {
  left: -12px;
  opacity: 1;
}

.case-slider:hover .owl-nav .owl-next {
  right: -12px;
  opacity: 1;
}

@media all and (max-width: 1199px) {
  .case-slider.owl-theme .owl-nav {
    display: none;
  }
}

/* case filter */
.filter-btn{
  display: flex;
  justify-content: end;
  gap: 10px;
}

.filter-btn li{
  padding: 5px 15px;
  background: var(--theme-bg-light);
  border-radius: 10px;
  color: var(--color-dark);
  font-weight: 500;
  cursor: pointer;
}

.filter-btn li.active{
  background: var(--theme-color);
  color: var(--color-white);
}

@media all and (max-width: 1199px) {
  .filter-control{
    margin-bottom: 30px;
  }

  .filter-btn{
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}



/* ======================
25. Case study single
====================== */

.case-sidebar .case-sidebar-content ul li {
  border-bottom: 1px solid var(--border-info-color);
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-transform: capitalize;
  color: var(--color-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 33px;
}

.case-sidebar .case-sidebar-content ul li:last-child {
  border-bottom: none;
}

.case-sidebar-title {
  font-size: 28px;
  text-transform: capitalize;
  margin-bottom: 30px;
  font-weight: 700;
}

.case-sidebar .case-sidebar-content ul li span {
  display: block;
  font-weight: normal;
  margin: 0;
  text-transform: capitalize;
}

.case-sidebar .case-sidebar-content .rating a {
  color: var(--theme-color);
}

.case-new-project {
  background: var(--theme-color)!important;
}

.case-new-project h4 {
  color: var(--color-white);
  margin-bottom: 30px;
}

.case-new-project .theme-btn{
  background: var(--color-white);
  color: var(--color-dark);
}

.case-new-project .theme-btn:hover{
  color: var(--color-white);
}

.case-details img{
  border-radius: 15px;
}

.case-single-list i {
  color: var(--theme-color);
  margin-right: 10px;
}



/* ===================
26. Counter css 
====================== */

.counter-area {
  position: relative;
  background: var(--color-dark);
  overflow: hidden;
  z-index: 1;
}

.counter-shape .img-1{
  position: absolute;
  left: -20px;
  top: 0;
  width: 320px;
  opacity: .2;
  z-index: -1;
}

.counter-shape .img-2{
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 320px;
  opacity: .1;
  z-index: -1;
}

.counter-box {
  display: flex;
  gap: 12px;
  position: relative;
  padding: 20px 15px 20px 20px;
  border-radius: 15px;
  border: 2px solid var(--border-white-color);
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
  z-index: 1;
}

.counter-box .icon {
  width: 80px;
  height: 80px;
  line-height: 70px;
  font-size: 35px;
  border-radius: 50px;
  text-align: center;
  color: var(--color-white);
  background: var(--color-white);
}

.counter-box .icon img{
  width: 45px;
}

.counter-box .info{
  display: flex;
  gap: 2px;
}

.counter-box .counter {
  display: block;
  line-height: 1;
  color: var(--color-white);
  font-size: 50px;
  font-weight: 900;
}

.counter-box .unit{
  font-size: 50px;
  color: var(--theme-color);
  font-weight: 500;
  line-height: 1;
}

.counter-box .title {
  color: var(--color-white);
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
}




/* ===================
27. Pricing css 
====================== */

.pricing-area{
  position: relative;
}

.pricing-item {
  background: var(--color-white);
  border-radius: 15px;
  position: relative;
  padding: 40px;
  overflow: hidden;
  box-shadow: var(--box-shadow);
  transition: all .5s ease-in-out;
  z-index: 1;
}

.pricing-item:hover{
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
} 

.pricing-shape img{
  position: absolute;
  right: -30px;
  top: 50px;
  width: 100%;
  opacity: .05;
  z-index: -1;
}

.pricing-header-wrap{
  margin-bottom: 30px;
}

.pricing-header{
  position: absolute;
  right: 0;
  top: 0;
  background: var(--theme-color);
  padding: 2px 15px;
  box-shadow: var(--box-shadow);
  border-bottom-left-radius: 20px;
}

.pricing-header h5 {
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-block;
  color: var(--color-white);
}

.pricing-amount{
  margin-bottom: 45px;
}

.pricing-amount strong {
  font-size: 50px;
  font-weight: 900;
  color: var(--color-dark);
  line-height: 1;
}

.pricing-amount-type {
  color: var(--color-dark);
  font-size: 16px;
  font-weight: 500;
}

.pricing-text{
  color: var(--color-dark);
  text-transform: uppercase;
  font-size: 15px;
}

.pricing-feature {
  padding: 40px 0 0 0;
}

.pricing-feature li {
  margin-bottom: 15px;
  color: var(--color-dark);
  font-weight: 500;
}

.pricing-feature li:last-child {
  margin-bottom: 0px;
}

.pricing-feature li i {
  color: var(--theme-color);
  margin-right: 10px;
}

.pricing-feature li .not-include{
  color: #F76464;
} 

.pricing-item .theme-btn{
  width: 100%;
}

.pricing-item.active{
  outline: 3px solid var(--theme-color);
}

@media all and (max-width: 991px) {
  .pricing-amount strong {
    font-size: 50px;
  }
}




/*====================
28. Video css 
======================*/

.video-area{
  position: relative;
}

.video-img {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
}

.video-img::before {
  content: "";
  position: absolute;
  background: rgba(10, 29, 67, .5);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.video-info{
  position: relative;
  padding-top: 150px;
  padding-bottom: 80px;
  text-align: center;
  z-index: 1;
}

.video-info h1{
  color: var(--color-white);
  font-weight: 800;
}

.video-info p{
  margin-top: 20px;
  margin-bottom: 35px;
  color: var(--color-white);
  font-size: 18px;
}

.video-area .play-btn {
  position: absolute;
  height: 85px;
  width: 85px;
  line-height: 70px;
  padding-left: 2px;
  text-align: center;
  font-size: 25px;
  border-radius: 50%;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: none;
  border: 8px solid var(--color-white);
}

/* video-area2 */
.video-area2 .video-img{
  clip-path: unset;
}

.video-area2 .video-info{
  text-align: left;
}

.video-area2 .video-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

@media all and (max-width: 767px) {
  .video-area2 .video-btn{
    justify-content: end;
    align-items: baseline;
  }

  .video-area2 .video-btn .play-btn{
    margin-right: 30px;
    margin-top: 40px;
  }
}




/* ===================
29. Choose css 
====================== */

.choose-area{
  position: relative;
}

.choose-item{
  display: flex;
  gap: 20px;
  margin: 30px 0;
}

.choose-item-icon{
  position: relative;
  width: 60px;
  height: 60px;
  line-height: 50px;
  background: var(--theme-color);
  text-align: center;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.choose-item-icon::before{
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--theme-color);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.choose-item-icon img{
  width: 38px;
  filter: brightness(0) invert(1);
}

.choose-item-info{
  flex: 1;
}

.choose-item-info h4{
  color: var(--color-dark);
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
}

.choose-item-info p{
  color: var(--body-text-color);
}

.choose-img{
  position: relative;
  text-align: right;
}

.choose-img .img-1{
  width: 70%;
  border-radius: 20px;
}

.choose-img .img-2{
  position: absolute;
  left: 0;
  bottom: -125px;
  width: 80%;
  border-radius: 30px;
  border: 8px solid var(--color-white);
}

.choose-img .img-shape{
  position: absolute;
  left: 0;
  top: 50px;
  width: 150px;
  z-index: -1;
}

@media all and (max-width: 991px) {
  .choose-img .img-2{
    width: 70%;
    bottom: -50px;
  }
}




/* ===================
30. Process css 
====================== */

.process-area{
  position: relative;
}

.process-wrap{
  position: relative;
  background: var(--theme-color2);
  border-radius: 20px;
  overflow: hidden;
}

.process-shape{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .09;
}

.process-item {
  position: relative;
}

.process-item .icon {
  height: 130px;
  width: 130px;
  line-height: 80px;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  font-size: 40px;
  border: 2px dashed var(--color-white);
  padding: 8px;
  margin-bottom: 20px;
}

.process-item .icon img {
  width: 120px;
  border-radius: 50%;
}

.process-item span {
  position: absolute;
  height: 35px;
  width: 35px;
  font-size: 14px;
  background: var(--color-white);
  line-height: 35px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  color: var(--theme-color);
  left: -3px;
  top: -13px;
  font-weight: 600;
}

.process-item h4 {
  color: var(--color-white);
  font-weight: 800;
  margin-bottom: 10px;
}

.process-item p{
  color: var(--color-white);
}

.process-item::before {
  content: url(../img/process/shape.png);
  position: absolute;
  right: -65px;
  top: 50px;
  opacity: .5;
}

.process-area .col-lg-3:last-child .process-item::before {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .process-item::before {
    display: none;
  }
}

@media all and (max-width: 991px) {
  .process-wrap{
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media all and (max-width: 767px) {
  .process-item::before {
    display: none;
  }
}



/*====================
31. Testimonial css 
======================*/

.testimonial-area {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.testimonial-area::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../img/shape/02.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .1;
  z-index: -1;
}

.testimonial-item {
  margin-bottom: 20px;
}

.testimonial-quote {
  position: relative;
  background: var(--color-white);
  padding: 40px 30px 50px 30px;
  border-radius: 20px;
}

.testimonial-quote::before {
  content: "\f0dd";
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  bottom: -52px;
  left: 40px;
  font-weight: bold;
  font-size: 70px;
  color: var(--color-white);
}

.testimonial-quote::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  background-image: url(../img/shape/08.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transform: translate(-50%, -50%);
  opacity: .08;
}

.testimonial-quote p{
  position: relative;
  color: var(--color-dark);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  z-index: 1;
}

.testimonial-content {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
  margin-left: 20px;
}

.testimonial-author-img {
  margin-right: 20px;
  width: 80px;
  padding: 5px;
  border-radius: 50px;
  border: 2px dashed var(--theme-color);
}

.testimonial-author-img img {
  border-radius: 50%;
}

.testimonial-author-info h4 {
  font-size: 20px;
  color: var(--color-dark);
  font-weight: 700;
}

.testimonial-author-info p {
  color: var(--theme-color);
}

.testimonial-quote-icon{
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  line-height: 42px;
  background: var(--theme-color);
  color: var(--color-white);
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
}

.testimonial-rate {
  color: #FB9902;
}

/* testimonial-slider */
.testimonial-slider .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.testimonial-slider .owl-dots .owl-dot span {
  background: var(--theme-color);
  margin: 5px;
  border-radius: 10px;
  width: 15px;
  height: 7px;
  display: inline-block;
  transition: var(--transition);
}

.testimonial-slider .owl-dots .owl-dot.active span {
  background-color: var(--theme-color);
  width: 8px;
  height: 8px;
}




/*====================
32. Quote css 
======================*/

.quote-area{
  position: relative;
  background-image: url(../img/quote/01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.quote-content{
  background: var(--theme-bg-light);
  padding: 35px;
}

.quote-img img{
  border-radius: 15px;
}

.quote-head{
  margin-bottom: 20px;
}

.quote-head h3{
  margin-bottom: 8px;
  font-weight: 800;
}

.quote-form .input-group{
  margin-bottom: 22px;
}

.quote-form .input-group:focus-within{
  outline: 2px solid var(--theme-color);
  border-radius: 50px;
}

.quote-form .input-group.textarea:focus-within{
  border-radius: 30px;
}

.quote-form .input-group .form-control{
  padding: 15px 25px 15px 0px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  background: var(--color-white);
}

.quote-form .input-group .nice-select{
  line-height: 25px;
}

.quote-form .input-group .form-control,
.quote-form .input-group .form-select,
.quote-form .input-group .form-control::placeholder{
  color: var(--color-dark);
}

.quote-form .input-group .input-group-text{
  background: var(--color-white);
  color: var(--theme-color);
  border-radius: 50px;
  padding-left: 20px;
  border: none;
}

.quote-form .input-group.textarea .input-group-text,
.quote-form .input-group.textarea .form-control{
  border-radius: 30px;
}

.quote-form .input-group.textarea .input-group-text{
  align-items: flex-start;
  padding-top: 20px;
}



/*====================
33. Blog css 
======================*/

.blog-area{
  position: relative;
}

.blog-item{
  padding: 20px;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.blog-item-img{
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.blog-item-img img {
  border-radius: 12px;
}

.blog-item:hover .blog-item-img img{
  transform: scale(1.1);
} 

.blog-date{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 60px;
  height: 60px;
  line-height: 15px;
  background: var(--theme-color);
  color: var(--color-white);
  text-align: center;
  border-radius: 50px;
  box-shadow: var(--box-shadow);
  border: 4px solid var(--color-white);
}

.blog-date strong{
  display: block;
  font-size: 25px;
  font-weight: 800;
  margin-top: 4px;
  line-height: 1;
}

.blog-date span{
  font-weight: 500;
}

.blog-item-info {
  padding: 15px 0 0 0;
}

.blog-item-meta ul {
  margin: 0;
  margin-bottom: 14px;
  padding: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-info-color);
}

.blog-item-meta ul li {
  display: inline-block;
  margin-right: 15px;
  font-weight: 500;
  position: relative;
  color: var(--color-dark);
}

.blog-item-meta ul li i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-item-meta a{
  color: var(--color-dark);
}

.blog-item-meta a:hover {
  color: var(--theme-color);
}

.blog-title {
  font-size: 22px;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.blog-item-info h4 a {
  color: var(--color-dark);
  font-weight: 700;
}

.blog-item-info h4 a:hover {
  color: var(--theme-color);
}

.blog-item-info p {
  margin-bottom: 16px;
}

.blog-item-info .theme-btn {
  margin-top: 10px;
}




/*========================
34. Blog single css
==========================*/

.blog-single{
  position: relative;
}

.blog-single .blog-thumb-img {
  margin-bottom: 20px;
}

.blog-single .blog-single-content img {
  border-radius: 15px;
}

.blog-single .blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.blog-single .blog-meta-left ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-single .blog-meta-left ul li{
  color: var(--color-dark);
  font-weight: 500;
}

.blog-single .blog-meta i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-single .blog-meta a {
  color: var(--color-dark);
  font-weight: 500;
}

.blog-single .blog-meta a:hover {
  color: var(--theme-color);
}

.blog-single .blog-details-title {
  font-size: 34px;
  color:  var(--color-dark);
  font-weight: 800;
}

.blog-single .blockqoute {
  background: var(--theme-bg-light);
  border-left: 5px solid var(--theme-color);
  padding: 30px;
  font-size: 17px;
  font-style: italic;
  margin: 20px 0;
  border-radius: 0px;
  position: relative;
}

.blog-single .blockqoute .blockqoute-icon{
  position: absolute;
  right: 20px;
  bottom: 5px;
  color: var(--theme-color);
  font-size: 70px;
}

.blog-single .blockqoute-author {
  margin-top: 20px;
  padding-left: 60px;
  position: relative;
  color:  var(--color-dark);
}

.blog-single .blockqoute-author::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 40px;
  background: var(--theme-color);
  left: 0;
  top: 10px;
}

.blog-single .blog-details-tags {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-single .blog-details-tags h5 {
  color:  var(--color-dark);
}

.blog-single .blog-details-tags ul {
  display: flex;
  align-items: center;
  gap: 15px;
}

.blog-single .blog-details-tags ul a {
  background: var(--theme-bg-light);
  color:  var(--color-dark);
  padding: 5px 18px;
  border-radius: 50px;
  transition: var(--transition);
}

.blog-single .blog-details-tags ul a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.blog-single .blog-author {
  display: flex;
  justify-content: start;
  align-items: center;
  background: var(--theme-bg-light);
  margin: 50px 0;
  padding: 20px;
  border-radius: 15px;
}

.blog-single .blog-author-img {
  width: 320px;
}

.blog-single .blog-author-img img {
  border-radius: 15px;
}

.blog-single .author-name {
  font-size: 22px;
  color: var(--theme-color);
  margin: 8px 0;
}

.blog-single .author-info {
  padding: 0 20px;
}

.blog-single .author-social {
  margin-top: 10px;
}

.blog-single .author-social a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  border: 2px solid var(--theme-color);
  border-radius: 50px;
  margin-right: 5px;
  color: var(--theme-color);
  transition: var(--transition);
}

.blog-single .author-social a:hover {
  color: var(--color-white);
  background: var(--theme-color);
}

.blog-single .blog-comments h3 {
  color:  var(--color-dark);
  font-weight: 700;
}

.blog-single .blog-comments-wrapper {
  margin: 30px 0;
}

.blog-single .blog-comments-single {
  display: flex;
  justify-content: start;
  align-items: flex-start;
  margin-top: 50px;
}

.blog-single .blog-comments-single img {
  width: 80px;
  border-radius: 50%;
}

.blog-single .blog-comments-content {
  padding: 0 0 0 20px;
}

.blog-single .blog-comments-content span {
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 500;
}

.blog-single .blog-comments-content a {
  font-weight: 500;
  margin-top: 5px;
  color: var(--theme-color);
}

.blog-single .blog-comments-content a:hover {
  color:  var(--theme-color2);
}

.blog-single .blog-comments-content h5 {
  color:  var(--color-dark);
  font-weight: 700;
}

.blog-single .blog-comments-reply {
  margin-left: 50px;
}

.blog-single .blog-comments-form {
  padding: 30px;
  margin-top: 50px;
  border-radius: 15px;
  background: var(--theme-bg-light);
}

.blog-single .blog-comments-form h3 {
  margin-bottom: 20px;
}

.blog-single .blog-comments-form .input-group{
  margin-bottom: 22px;
}

.blog-single .blog-comments-form .input-group:focus-within{
  outline: 2px solid var(--theme-color);
  border-radius: 50px;
}

.blog-single .blog-comments-form .input-group.textarea:focus-within{
  border-radius: 30px;
}

.blog-single .blog-comments-form .input-group .form-control{
  padding: 15px 25px 15px 0px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  background: var(--color-white);
}

.blog-single .blog-comments-form .input-group .nice-select{
  line-height: 25px;
}

.blog-single .blog-comments-form .input-group .form-control,
.blog-single .blog-comments-form .input-group .form-select,
.blog-single .blog-comments-form .input-group .form-control::placeholder{
  color: var(--color-dark);
}

.blog-single .blog-comments-form .input-group .input-group-text{
  background: var(--color-white);
  color: var(--theme-color);
  border-radius: 50px;
  padding-left: 20px;
  border: none;
}

.blog-single .blog-comments-form .input-group.textarea .input-group-text,
.blog-single .blog-comments-form .input-group.textarea .form-control{
  border-radius: 30px;
}

.blog-single .blog-comments-form .input-group.textarea .input-group-text{
  align-items: flex-start;
  padding-top: 20px;
}


@media all and (max-width: 767px) {
  .blog-single .blog-meta {
    flex-direction: column;
    font-size: 15px;
  }

  .blog-single .blog-meta-left ul {
    gap: 10px;
  }

  .blog-single .blog-details-tags {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-single .blog-author {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .blog-single .author-info{
    margin-top: 25px;
  }

  .blog-single .blog-comments-single {
    flex-direction: column;
    text-align: center;
    padding: 30px 0px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border-radius: 15px;
  }

  .blog-single .blog-comments-single img{
    margin: 0 auto 20px auto;
  }

  .blog-single .blog-comments-reply {
    margin-left: 0px;
  }
}



/*=======================
35. Widget sidebar css
=========================*/

.widget {
  background: var(--theme-bg-light);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 15px;
}

.widget .widget-title {
  padding-bottom: 10px;
  margin-bottom: 30px;
  position: relative;
  font-size: 25px;
  color:  var(--color-dark);
  font-weight: 700;
}

.widget .widget-title::before {
  position: absolute;
  content: '';
  width: 15px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 0;
}

.widget .widget-title::after {
  position: absolute;
  content: '';
  width: 30px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 22px;
}

.widget .search-form .form-control {
  padding: 12px 15px 12px 20px;
  border-radius: 50px;
  box-shadow: none;
  color: var(--color-dark);
}

.widget .search-form .form-control::placeholder{
  color: var(--color-dark);
}

.widget .search-form {
  position: relative;
}

.widget .search-form .form-control:focus {
  border-color: var(--theme-color);
}

.widget .search-form button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  padding: 8px 18px 6px 18px;
  background: transparent;
  border: none;
  color: var(--theme-color);
}

.widget .category-list a {
  display: block;
  padding: 10px 0;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 1px solid var(--border-info-color);
  transition: var(--transition);
}

.widget .category-list a:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}

.widget .category-list a:hover {
  padding-left: 10px;
  color: var(--theme-color);
}

.widget .category-list a i {
  margin-right: 5px;
  color: var(--theme-color);
}

.widget .category-list a span {
  float: right;
}

.widget .recent-post-single {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.widget .recent-post-img img {
  width: 75px;
  border-radius: 15px;
}

.widget .recent-post-bio{
  flex: 1;
}

.widget .recent-post-bio h6 {
  font-size: 18px;
  font-weight: 700;
}

.widget .recent-post-bio span {
  font-size: 14px;
  color: var(--theme-color);
}

.widget .recent-post-bio span i {
  margin-right: 5px;
}

.widget .recent-post-bio h6 a:hover {
  color: var(--theme-color);
}

.widget .social-share-link a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
  text-align: center;
  margin-right: 5px;
  border-radius: 50px;
  transition: var(--transition);
}

.widget .social-share-link a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.widget .tag-list a {
  background: var(--color-white);
  color:  var(--color-dark);
  padding: 5px 18px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 50px;
  display: inline-block;
  transition: var(--transition);
}

.widget .tag-list a:hover {
  background-color: var(--theme-color);
  color: var(--color-white);
}




/*===================
36. Partner css 
=====================*/

.partner-area{
  position: relative;
}

.partner-content h6{
  font-size: 18px;
  margin-bottom: 15px;
}

.partner-content h6 span{
  color: var(--theme-color);
}




/*===================
37. Contact us css 
=====================*/

.contact-wrapper {
  position: relative;
}

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

.contact-form{
  background: var(--theme-bg-light);
  padding: 20px 25px;
  border-radius: 15px;
}

.contact-form-header {
  margin-bottom: 30px;
}

.contact-form-header h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  color:  var(--color-dark);
}

.contact-form .input-group{
  margin-bottom: 22px;
}

.contact-form .input-group:focus-within{
  outline: 2px solid var(--theme-color);
  border-radius: 50px;
}

.contact-form .input-group.textarea:focus-within{
  border-radius: 30px;
}

.contact-form .input-group .form-control{
  padding: 15px 25px 15px 0px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  background: var(--color-white);
}

.contact-form .input-group .nice-select{
  line-height: 25px;
}

.contact-form .input-group .form-control,
.contact-form .input-group .form-select,
.contact-form .input-group .form-control::placeholder{
  color: var(--color-dark);
}

.contact-form .input-group .input-group-text{
  background: var(--color-white);
  color: var(--theme-color);
  border-radius: 50px;
  padding-left: 20px;
  border: none;
}

.contact-form .input-group.textarea .input-group-text,
.contact-form .input-group.textarea .form-control{
  border-radius: 30px;
}

.contact-form .input-group.textarea .input-group-text{
  align-items: flex-start;
  padding-top: 20px;
}

.contact-form .text-success{
  color: var(--theme-color);
}

.contact-map {
  margin-bottom: -9px;
}

.contact-map iframe {
  width: 100%;
  height: 450px;
}

.contact-content {
  margin-bottom: 50px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  padding: 30px 20px;
  position: relative;
  margin-bottom: 25px;
  border-radius: 15px 50px 50px 50px;
  background:var(--theme-bg-light);
  transition: var(--transition);
}

.contact-info:hover{
  transform: translateY(-8px)
}

.contact-info-icon i {
  font-size: 35px;
  color: var(--color-white);
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50px;
  background: var(--theme-color);
}

.contact-info h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color:  var(--color-dark);
}

.contact-info p{
  color:  var(--color-dark);
  font-weight: 500;
  font-size: 16px;
}


@media all and (max-width: 768px) {
  .contact-content {
    margin-top: 50px;
    margin-bottom: 0;
  }
}



/* ===================
38. Instagram css 
====================== */

.instagram-area{
  position: relative;
}

.instagram-item {
  position: relative;
}

.instagram-img img{
  border-radius: 20px;
}

.instagram-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  opacity: 0;
  z-index: 0;
  transition: 0.4s;
}

.instagram-item a {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  background: var(--theme-color);
  color: var(--color-white);
  font-size: 20px;
  visibility: hidden;
  opacity: 0;
  text-align: center;
  z-index: 2;
  transition: 0.4s;
  transform: translate(-50%, -50%);
}

.instagram-item:hover::after {
  width: 100%;
  opacity: 1;
}

.instagram-item:hover a {
  visibility: visible;
  opacity: 1;
}



/* ===================
39. Team css 
====================== */

.team-area{
  position: relative;
}

.team-img{
  position: relative;
}

.team-img img{
  border-radius: 20px;
}

.team-social-btn{
  position: absolute;
  right: -3px;
  bottom: 0;
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border-top-left-radius: 50%;
  padding: 8px;
}

.team-social-btn::before{
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: 5px 5px 0 5px var(--color-white);
  border-bottom-right-radius: 20px;
}

.team-social-btn::after{
  content: "";
  position: absolute;
  top: -20px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: 5px 5px 0 5px var(--color-white);
  border-bottom-right-radius: 20px;
}

.team-social-btn button{
  width: 42px;
  height: 42px;
  line-height: 42px;
  background: var(--theme-color);
  color: var(--color-white);
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  border: none;
}

.team-social{
  position: absolute;
  right: 9px;
  bottom: 40px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.team-social a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  background: var(--color-white);
  color: var(--theme-color);
  border-radius: 50px;
}

.team-social a:hover {
 background: var(--theme-color);
 color: var(--color-white);
}

.team-social-wrap:hover .team-social{
  opacity: 1;
  visibility: visible;
  bottom: 60px;
}

.team-content{
  margin-top: 10px;
}

.team-content h4{
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 5px;
}

.team-content h4 a:hover{
  color: var(--theme-color);
}

.team-content span{
  color: var(--theme-color);
  font-weight: 500;
}



/* ===================
40. Cta css 
====================== */

.cta-area{
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-top: 90px;
  padding-bottom: 90px;
  z-index: 1;
}

.cta-area::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background:rgba(10, 29, 66, .7);
  z-index: -1;
}

.cta-content{
  text-align: center;
}

.cta-content h1{
  color: var(--color-white);
  text-transform: capitalize;
  font-weight: 800;
  margin-bottom: 10px;
}

.cta-content p{
  color: var(--color-white);
  font-size: 16px;
  margin-bottom: 30px;
}

.cta-content .theme-btn{
  background: var(--theme-color);
  color: var(--color-white);
}




/* ========================
41. Gallery css 
=========================== */

.gallery-item {
  position: relative;
  width: 100%;
}

.gallery-img {
  height: 100%;
}

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

.gallery-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.gallery-content::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background: var(--theme-color);
  border-radius: 15px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.gallery-content:hover::before {
  opacity: 0.9;
  visibility: visible
}

.gallery-link {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.5s;
  border-radius: 50px;
  opacity: 0;
  visibility: hidden;
  font-size: 50px;
  color: var(--color-white);
}

.gallery-link:hover {
  color: var(--color-white);
}

.gallery-content:hover .gallery-link {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}



/*====================
42. Faq css 
======================*/

.faq-area .accordion-item {
  border: none;
  margin-bottom: 30px;
  background: var(--color-white);
  border-radius: 12px !important;
  box-shadow: var(--box-shadow);
}

.faq-area .accordion-item span {
  width: 45px;
  height: 45px;
  margin-right: 15px;
}

.faq-area .accordion-item i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  background: var(--theme-color);
  text-align: center;
  color: var(--color-white);
}

.faq-area .accordion-button:not(.collapsed) {
  color: var(--theme-color);
  background: transparent;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.faq-area .accordion-button {
  border-radius: 0px !important;
  background: transparent;
  font-weight: 700;
  font-size: 20px;
  color:  var(--color-dark);
  box-shadow: none !important;
}

.faq-area .accordion-button:not(.collapsed) {
  border-bottom: 1px solid var(--theme-color);
}

.faq-area .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq-area .accordion-body{
  color: var(--color-dark);
  font-weight: 500;
}

@media all and (max-width: 991px) {
  .faq-area .faq-right {
    margin-bottom: 50px;
  }

  .faq-area .accordion-button {
    font-size: 16px;
  }
}



/*====================
43. Breadcrumb css
======================*/

.site-breadcrumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
  z-index: 1;
}

.site-breadcrumb::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--color-dark);
  opacity: 0.7;
  z-index: -1;
}

.site-breadcrumb .breadcrumb-title {
  font-size: 40px;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: capitalize;
}

.site-breadcrumb .breadcrumb-menu {
  position: relative;
  z-index: 1;
}

.site-breadcrumb .breadcrumb-menu li {
  position: relative;
  display: inline-block;
  margin-left: 25px;
  color: var(--color-white);
  font-weight: 500;
  text-transform: capitalize;
}

.site-breadcrumb .breadcrumb-menu li a {
  color: var(--color-white);
  transition: all 0.5s ease-in-out;
}

.site-breadcrumb .breadcrumb-menu li::before {
  position: absolute;
  content: '\f101';
  font-family: 'Font Awesome 6 Pro';
  right: -21px;
  top: 1px;
  text-align: center;
  font-size: 16px;
  color: var(--color-white);
}

.site-breadcrumb .breadcrumb-menu li:first-child {
  margin-left: 0;
}

.site-breadcrumb .breadcrumb-menu li:last-child:before {
  display: none;
}

.site-breadcrumb .breadcrumb-menu li a:hover {
  color: var(--theme-color);
}

.site-breadcrumb .breadcrumb-menu li.active {
  color: var(--theme-color);
}

@media (max-width: 991px) {
  .site-breadcrumb {
    padding-top: 200px;
  }
}


/*====================
44. Pagination css 
======================*/

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.pagination .page-link {
  border: none;
  background:  var(--theme-bg-light);
  color: var(--color-dark);
  font-weight: 500;
  margin: 0 10px;
  border-radius: 12px !important;
  width: 40px;
  height: 40px;
  line-height: 27px;
  text-align: center;
  transition: var(--transition);
  z-index: 1;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background: var(--theme-color);
  color: var(--color-white);
}



/*====================
45. Auth css 
======================*/

.login-form {
  padding: 40px;
  background: var(--theme-bg-light);
  border-radius: 15px;
}

.login-form .login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-form .login-header img {
  width: 200px;
  margin-bottom: 10px;
}

.login-form .login-header h3 {
  color: var(--theme-color);
  margin-bottom: 5px;
  font-weight: 800;
}

.login-form .login-header p {
  color: var(--color-dark);
  font-size: 20px;
}

.login-form .login-footer {
  margin-top: 25px;
}

.login-form .login-footer p {
  color: var(--color-dark);
  text-align: center;
}

.login-form .login-footer a {
  color: var(--theme-color);
  transition: .5s;
}

.login-form .login-footer a:hover {
  color:  var(--color-dark);
}

.login-form .input-group{
  margin-bottom: 22px;
}

.login-form label {
  color:  var(--color-dark);
  margin-bottom: 5px;
}

.login-form .input-group:focus-within{
  outline: 2px solid var(--theme-color);
  border-radius: 50px;
}

.login-form .input-group .form-control{
  padding: 15px 25px 15px 0px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  background: var(--color-white);
}

.login-form .input-group .nice-select{
  line-height: 25px;
}

.login-form .input-group .form-control,
.login-form .input-group .form-select,
.login-form .input-group .form-control::placeholder{
  color: var(--color-dark);
}

.login-form .input-group .input-group-text{
  background: var(--color-white);
  color: var(--theme-color);
  border-radius: 50px;
  padding-left: 20px;
  border: none;
}

.login-form .form-check{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.login-form .form-check-input{
  margin: 0;
  box-shadow: none;
  border-radius: 50px;
  border: none;
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
}

.login-form .form-check-input:checked {
  background-color: var(--theme-color);
  border-color: var(--theme-color);
}

.login-form .form-check-label{
  margin-bottom: 0;
}

.login-form .form-check-label a {
  color: var(--theme-color);
  transition: var(--transition);
}

.login-form .form-check-label a:hover {
  color: var(--theme-color);
}

.login-form .forgot-password{
  color: var(--theme-color);
  transition: var(--transition);
}

.login-form .forgot-password:hover {
  color: var(--color-dark);
}

.login-form .theme-btn {
  width: 100%;
}

.login-form .theme-btn::before{
  width: 420px;
  height: 420px;
  transition: var(--transition2);
}

.login-form .social-login {
  border-top: 1px solid var(--border-info-color);
  margin-top: 15px;
}

.login-form .social-login p {
  color: var(--color-dark);
  margin: 10px 0;
}

.login-form .social-login-list {
  text-align: center;
}

.login-form .social-login-list a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: var(--theme-color);
  border-radius: 50px;
  margin: 5px;
}

.login-form .social-login-list a i {
  color: var(--color-white);
}

.login-form .social-login-list a:hover {
  background:  var(--color-dark);
}

@media only screen and (max-width: 991px) {
  .login-form {
    padding: 40px 20px;
  }
}



/*====================
46. Coming soon css 
======================*/

.coming-soon {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center !important;
  min-height: 100vh;
  width: 100%;
  z-index: 1;
}

.coming-soon:before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.coming-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75vh;
}

.coming-content{
  text-align: center;
}

.coming-info h1{
  color: var(--color-white);
  font-weight: 700;
  font-size: 50px;
}

.coming-info p{
  font-size: 18px;
  color: var(--color-white);
  margin-top: 10px;
}

.coming-countdown-wrap{
  margin-top: 30px;
  margin-bottom: 30px;
}

.coming-countdown .time-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.coming-countdown .time{
  background: var(--color-white);
  width: 125px;
  border-radius: 15px;
  padding: 14px 10px;
}

.coming-countdown .time span{
  display: block;
}

.coming-countdown .time span:first-child{
  color: var(--theme-color);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
}

.coming-countdown .time .unit{
  color: var(--color-dark);
  font-weight: 500;
}

.coming-countdown .divider{
  display: none;
}

.coming-newsletter-form{
  margin-top: 50px;
  margin-bottom: 25px;
}

.coming-newsletter-form .form-group{
  position: relative;
}

.coming-newsletter-form .form-control{
  padding: 17px 150px 17px 20px;
  border-radius: 50px;
  border: none;
  box-shadow: none;
  color: var(--color-dark);
}

.coming-newsletter-form .form-control::placeholder{
  color: var(--color-dark);
}

.coming-newsletter-form .theme-btn{
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 9px 15px;
}

.coming-social{
  margin-top: 40px;
  text-align: center;
}

.coming-social a{
  display: inline-block;
  background: var(--theme-color);
  color: var(--color-white);
  margin: 5px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50px;
  transition: .5s;
  box-shadow: var(--box-shadow2);
}

.coming-social a:hover{
  background: var(--theme-color2);
}

@media all and (max-width: 767px) {
  .coming-info h1{
    font-size: 40px;
  }
}



/*====================
47. Error css 
======================*/

.error-wrapper {
  text-align: center;
}

.error-wrapper h1 {
  font-size: 250px;
  letter-spacing: 5px;
  font-weight: bold;
  color: var(--theme-color);
}

.error-wrapper h1 span {
  color:  var(--color-dark);
}

.error-wrapper h2 {
  margin-top: 30px;
  margin-bottom: 10px;
}

.error-wrapper img {
  width: 100%;
}

.error-wrapper .theme-btn {
  margin-top: 30px;
}


@media all and (max-width: 767px) {
  .error-wrapper h1 {
    font-size: 160px;
  }
}



/*====================
48. Terms/privacy css 
====================== */

.terms-content:not(:last-child) {
  margin-bottom: 54px;
}

.terms-content:first-child {
  margin-top: -3px;
}

.terms-content .terms-list {
  margin-top: 37px;
}

.terms-content h3 {
  margin-bottom: 23px;
  position: relative;
  font-weight: 700;
}

.terms-content p:not(:last-child) {
  margin-bottom: 26px;
}

.terms-list li:not(:last-child) {
  margin-bottom: 16px;
}



/*====================
49. Footer css 
======================*/

.footer-area {
  background: var(--footer-bg);
  position: relative;
  z-index: 1;
}

.footer-shape img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
  z-index: -1;
}

.footer-widget-box {
  margin-bottom: 20px;
}

.footer-widget-box.about-us{
  margin-right: 25px;
}

.footer-widget {
  position: relative;
  z-index: 1;
}

.footer-logo img {
  width: 200px;
  margin-bottom: 15px;
}

.footer-widget-title {
  color: var(--color-white);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 21px;
  z-index: 1;
}

.footer-widget-title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 3px;
  background: var(--theme-color);
  border-radius: 50px;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.footer-list li a {
  color: var(--color-white);
  transition: var(--transition);
  position: relative;
  margin-left: -20px;
}

.footer-list li a i {
  margin-right: 5px;
  color: var(--theme-color);
  opacity: 0;
  transition: var(--transition);
}

.footer-list li a:hover {
  margin-left: 0px;
  color: var(--theme-color);
}

.footer-list li a:hover i{
  opacity: 1;
}

.footer-widget-box p {
  color: var(--color-white);
  padding-right: 18px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 15px;
  justify-content: end;
}

.footer-social li a i {
  height: 38px;
  width: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 50px;
  background: var(--color-white);
  color: var(--theme-color);
  transition: var(--transition);
}

.footer-social li a i:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.footer-contact li {
  position: relative;
  display: flex;
  justify-content: start;
  gap: 10px;
  color: var(--footer-text-color);
  font-size: 16px;
  margin-bottom: 12px;
}

.footer-contact .icon{
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: var(--theme-color);
  border-radius: 50px;
  text-align: center;
}

.footer-contact .content{
  flex: 1;
}

.footer-contact .content h6{
  color: var(--color-white);
  margin-bottom: 5px;
}

.footer-contact .content a{
  color: var(--color-white);
}

.footer-newsletter h6{
  color: var(--color-white);
  margin-bottom: 20px;
}

.subscribe-form .form-group{
  position: relative;
}

.subscribe-form .form-control {
  padding: 16px 140px 16px 15px;
  border-radius: 0px;
  color: var(--color-white);
  box-shadow: none;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-white);
  outline: none;
}

.subscribe-form .form-control:focus{
  border-bottom-color: var(--theme-color);
}

.subscribe-form .form-control::placeholder{
  color: var(--color-white);
}

.subscribe-form .theme-btn {
  position: absolute;
  right: 0px;
  top: 5px;
  border-radius: 50px;
  padding: 5px 15px;
}

.subscribe-form .theme-btn:hover {
  color: var(--theme-color);
}

.subscribe-form .theme-btn::before{
  background: var(--color-white);
}

.copyright {
  padding: 20px 0;
  border-top: 1px solid var(--border-white-color);
}

.copyright .footer-menu {
  margin: 0;
  padding: 0;
  text-align: right;
}

.copyright .footer-menu li {
  display: inline-block;
  margin-left: 25px;
  font-size: 16px;
}

.copyright .footer-menu li a {
  color: var(--footer-text-color);
  transition: var(--transition);
}

.copyright .footer-menu li a:hover {
  color: var(--theme-color);
}

.copyright .copyright-text {
  color: var(--footer-text-color);
  margin-bottom: 0px;
  font-size: 16px;
}

.copyright .copyright-text a {
  color: var(--theme-color);
  font-weight: 500;
}


@media all and (max-width: 1199px) {
  .footer-widget-box {
    margin-bottom: 50px;
  }
}

@media all and (max-width: 991px) {
  .footer-widget-wrapper {
    padding-bottom: 0px;
  }

  .footer-area::before{
    height: 60%;
  }

  .copyright .footer-menu {
    float: left;
    margin-top: 20px;
    text-align: left;
  }

  .copyright .footer-menu li {
    margin-left: 0;
    margin-right: 15px;
  }
}

@media all and (max-width: 767px) {
  .footer-widget-wrapper {
    padding-bottom: 0px;
  }

  .footer-social {
    justify-content: flex-start;
    margin-top: 20px;
  }
}


/* footer-area 2 */
.footer-area2{
  background: #FAFCFF;
}

.footer-area2 .footer-widget-title{
  color: var(--color-dark);
  font-weight: 800;
}

.footer-area2 .footer-widget-box p{
  color: var(--body-text-color);
}

.footer-area2 .footer-newsletter h6{
  color: var(--color-dark);
  font-weight: 700;
}

.footer-area2 .subscribe-form .form-control{
  color: var(--color-dark);
  border-bottom-color: var(--body-text-color);
}

.footer-area2 .subscribe-form .form-control::placeholder{
  color: var(--body-text-color);
}

.footer-area2 .subscribe-form .form-control:focus{
  border-bottom-color: var(--theme-color);
}

.footer-area2 .footer-list li a{
  color: var(--body-text-color);
}

.footer-area2 .footer-contact .content h6{
  color: var(--color-dark);
  font-weight: 700;
}

.footer-area2 .footer-contact .content a{
  color: var(--body-text-color);
}

.footer-area2 .copyright{
  border-top-color: var(--border-info-color);
}

.footer-area2 .copyright .copyright-text{
  color: var(--body-text-color);
}

.footer-area2 .footer-social li a i{
  background: var(--color-dark);
  color: var(--color-white);
}

.footer-area2 .footer-social li a i:hover{
  background: var(--theme-color);
}




/*====================
50. Home 2
======================*/

@media (min-width: 992px) {
  .home-2 .navbar .dropdown-menu {
      background: var(--color-white);
  }

  .home-2 .navbar .nav-item .dropdown-menu .dropdown-item{
    color: var(--color-dark);
  }

  .home-2 .navbar .nav-item .dropdown-menu .dropdown-item:hover{
    color: var(--color-white);
  }
}

@media all and (max-width: 991px) {
  .home-2 .navbar{
    background: var(--color-white);
  }
}


/*====================
51. Home 3
======================*/

.home-3{
  --footer-bg: #101010;
}

.home-3 .service-item{
  text-align: center;
}

.home-3 .service-icon{
  margin: auto auto;
}

.home-3 .footer-bg::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/shape/11.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .03;
}


@media (min-width: 992px) {
  .home-3 .navbar .nav-item .nav-link{
    color: var(--color-white);
  }

  .home-3 .navbar.fixed-top .nav-item .nav-link{
    color: var(--color-dark);
  }

  .home-3 .navbar .nav-item .nav-link:hover,
  .home-3 .navbar .nav-item .nav-link.active{
    color: var(--theme-color);
  }

  .home-3 .navbar .dropdown-menu {
      background: var(--color-white);
  }

  .home-3 .navbar .nav-item .dropdown-menu .dropdown-item{
    color: var(--color-dark);
  }

  .home-3 .navbar .nav-item .dropdown-menu .dropdown-item:hover{
    color: var(--color-white);
  }

  .home-3 .nav-right .search-btn .nav-right-link{
    color: var(--color-white);
  }

  .home-3 .navbar.fixed-top .nav-right .search-btn .nav-right-link{
    color: var(--color-dark);
  }
}

@media all and (max-width: 991px) {
  .home-3 .mobile-menu-right .nav-right-link{
    color: var(--color-white);
  }

  .home-3 .navbar.fixed-top .mobile-menu-right .nav-right-link{
    color: var(--color-dark);
  }

  .home-3 .navbar-toggler-mobile-icon{
    color: var(--color-white);
  }

  .home-3 .navbar.fixed-top .navbar-toggler-mobile-icon{
    color: var(--color-dark);
  }
}


/*====================
52. Home 4
======================*/

.home-4 .hs-1 .hero-img{
  position: relative;
}

.home-4 .hs-1 .hero-img::before{
  content: "";
  position: absolute;
  left: 150px;
  right: 0;
  top: -50px;
  background: var(--color-dark);
  border-radius: 20px 80px 40px 20px;
  height: 100%;
  z-index: -1;
}

.home-4 .hs-1 .hero-img img{
  position: unset;
  width: 80%;
  border-radius: 20px;
  margin-left: 50px;
}


@media all and (max-width: 991px) {
  .home-4 .hero-img-wrap{
    margin-top: 80px;
  }

  .home-4 .hs-1 .hero-img img{
    margin-left: 0;
  }
}


/*====================
53. Home 5
======================*/

.home-5 .navbar{
  border-bottom: 1px solid rgba(229, 242, 255, .2);
}

.home-5 .hs-2{
  margin-top: -6rem;
}

.home-5 .hs-2 .hero-single{
  padding-top: 230px;
  padding-bottom: 140px;
}


@media (min-width: 992px) {
  .home-5 .navbar .nav-item .nav-link{
    color: var(--color-white);
  }

  .home-5 .navbar.fixed-top .nav-item .nav-link{
    color: var(--color-dark);
  }

  .home-5 .navbar .nav-item .nav-link:hover,
  .home-5 .navbar .nav-item .nav-link.active{
    color: var(--theme-color);
  }

  .home-5 .navbar .dropdown-menu {
      background: var(--color-white);
  }

  .home-5 .navbar .nav-item .dropdown-menu .dropdown-item{
    color: var(--color-dark);
  }

  .home-5 .navbar .nav-item .dropdown-menu .dropdown-item:hover{
    color: var(--color-white);
  }

  .home-5 .nav-right .search-btn .nav-right-link{
    color: var(--color-white);
  }

  .home-5 .navbar.fixed-top .nav-right .search-btn .nav-right-link{
    color: var(--color-dark);
  }

  .home-5 .nav-right .call-wrap .content h6 a{
    color: var(--color-white);
  }

  .home-5 .navbar.fixed-top .nav-right .call-wrap .content h6 a{
    color: var(--color-dark);
  }
}

@media all and (max-width: 991px) {
  .home-5 .mobile-menu-right .nav-right-link{
    color: var(--color-white);
  }

  .home-5 .navbar.fixed-top .mobile-menu-right .nav-right-link{
    color: var(--color-dark);
  }

  .home-5 .navbar-toggler-mobile-icon{
    color: var(--color-white);
  }

  .home-5 .navbar.fixed-top .navbar-toggler-mobile-icon{
    color: var(--color-dark);
  }
}



/* ===================================
              Rajesh
  =================================== */
/* =========================================
              HOME PAGE
=========================================   */

.typing-text {
    font-size: 50px;
    font-weight: 900;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #febd10;
    min-height: 40px;
}

.cursor {
    display: inline-block;
    font-weight: bold;
    color: #febd10;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* ================================
   GOVERNMENT + LUXURY STYLE
================================ */

/* SECTION */
/* CONTAINER SECTION */
.home-services-premium {
    padding: 100px 20px;
    /* Darker overall section background for contrast */
    background: hsl(195, 100%, 94%); 
    position: relative;
    overflow: hidden;
}

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

/* HEADER */
.home-header {
    text-align: center;
    margin-bottom: 70px;
}

.home-header h2 {
    font-size: 46px;
    font-weight: 800;
    /* White text for dark mode */
    color: #000000; 
    position: relative;
}

.home-header h2::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    border-radius: 10px;
}

/* GRID */
.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 35px;
}

/* CARD */
.home-card {
    position: relative;
    padding: 45px 35px;
    border-radius: 18px;
    /* Rich Dark Background */
    background: #0b2d44; 
    overflow: hidden;
    transition: all .35s ease;
    /* Deep Shadow for depth */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* ANIMATED GRADIENT BORDER (GLOW EFFECT) */
.home-card::before {
    content: "";
    position: absolute;
    inset: 0px; 
    border-radius: 18px;
    background: linear-gradient(120deg, #4bd0f8, #ffca39, #4bd0f8);
    background-size: 300% 300%;
    animation: borderMove 7s linear infinite;
    z-index: -2;
}

/* CARD INNER LAYER (DARK SURFACE) */
.home-card::after {
    content: "";
    position: absolute;
    /* This creates the thin border effect */
    inset: 2px; 
    background: #0b2d44; 
    border-radius: 16px;
    z-index: -1;
}

/* HOVER EFFECT */
.home-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(75, 208, 248, 0.2);
}

/* TITLE */
.home-card h3 {
    font-size: 24px;
    margin-bottom: 18px;
    font-weight: 700;
    color: #ffffff; /* High contrast white */
    letter-spacing: 0.5px;
}

/* LIST */
.home-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-card ul li {
    margin-bottom: 12px;
}

/* LINKS */
.home-card ul li a {
    position: relative;
    font-size: 15px;
    font-weight: 400;
    /* Light grey for readability, not pure white to keep hierarchy */
    color: #cbd5e0; 
    text-decoration: none;
    padding-left: 22px;
    display: inline-block;
    transition: .3s;
}

/* BULLET */
.home-card ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4bd0f8; /* Cyan bullet pops more than yellow here */
}

/* LINK HOVER */
.home-card ul li a:hover {
    color: #ffca39; /* Switches to Gold on hover */
    transform: translateX(6px);
}

/* CONSULTATION CARD (STAYS VIBRANT) */
.home-consult {
    background: linear-gradient(135deg, #4bd0f899, #4bd0f899);
    color: #000;
    text-align: center;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.home-consult::before,
.home-consult::after {
    display: none;
}

.home-consult h3 {
    color: #000;
}

.home-consult p {
    font-size: 24px;
    font-weight: 800;
    margin-top: 15px;
    color: #0b2d44; /* Darker text for the bright yellow/cyan area */
}

/* BORDER ANIMATION */
@keyframes borderMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* RESPONSIVE */

@media(max-width:1024px){

.home-header h2{
font-size:40px;
}

}

@media(max-width:768px){

.home-services-premium{
padding:80px 20px;
}

.home-header h2{
font-size:32px;
}

.home-card{
padding:35px 25px;
}

}

@media(max-width:480px){

.home-grid{
grid-template-columns:1fr;
}

.home-header h2{
font-size:28px;
}

.home-card{
padding:30px 20px;
}

}


/* ====================== our process ==============*/

/* ======================================
   GOVERNMENT + LUXURY TESTIMONIAL SECTION
====================================== */



/* Last section */

.home-contact-section {
  position: relative;
  padding: 140px 20px 180px;
  background: linear-gradient(135deg,#6a11cb99,#ff7e5f99);
  overflow: hidden;
  color: #fff;
}

/* WAVE SHAPE */
.home-contact-section::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 700px;
  background: #f8fcff;
  border-top-left-radius: 120%;
  border-top-right-radius: 10% ;
  border-bottom-left-radius: 90% ;
  border-bottom-right-radius: 90% ;
}

/* CONTAINER */
.home-contact-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

/* LEFT */
.home-contact-left {
  width: 45%;
}

.home-contact-tag {
  display: inline-block;
  background: rgba(0, 0, 0, 0.85);
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 15px;
}

.home-contact-left h2 {
  font-size: 42px;
  margin-bottom: 20px;
}

.home-contact-left p {
  margin-bottom: 25px;
  color: #000;
  opacity: 0.9;
}

.home-contact-phone span {
  font-size: 14px;
  color: #000;
  opacity: 0.8;
}

.home-contact-phone h4 {
  font-size: 22px;
  margin-top: 5px;
  color: #000;
}

/* FORM */
.home-contact-form-wrapper {
  width: 45%;
}

.home-contact-form {
  background: #ffffff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
  color: #333;
  transition: 0.4s;
}

.home-contact-form:hover {
  transform: translateY(-6px);
}

.home-form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.home-form-row input,
.home-form-row select {
  width: 50%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #eee;
  transition: 0.3s;
}

.home-contact-form textarea {
  width: 100%;
  height: 120px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #eee;
  margin-bottom: 20px;
  resize: none;
  transition: 0.3s;
}

.home-contact-form input:focus,
.home-contact-form select:focus,
.home-contact-form textarea:focus {
  border-color: #6a11cb;
  outline: none;
}

.home-contact-form button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg,#2ac5f599,#febd1099);
  color: #000;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.home-contact-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* CLOUD ANIMATION */
.home-cloud {
  position: absolute;
  width: 300px;
  /* opacity: 0.9; */
}

.home-cloud-1 {
  top: 550px;
  left: -10px;
  right: -50px;
  animation: homeCloudMove 6s linear infinite;
}

.home-cloud-2 {
  top: 600px;
  left: -150px;
  animation: homeCloudMove 6s linear infinite;
}

@keyframes homeCloudMove {
  from { transform: translateX(0); }
  to { transform: translateX(4vw); }
}

/* TREES */
.home-tree {
  position: absolute;
  bottom: 0;
  width: 80px;
}

.home-tree-1 { left: 120px; }
.home-tree-2 { left: 170px; }

/* PERSON FLOAT */
.home-person {
  position: absolute;
  bottom: 0;
  right: 80px;
  width: 180px;
  animation: homePersonFloat 4s ease-in-out infinite alternate;
}

@keyframes homePersonFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

/* RESPONSIVE */
@media(max-width:992px){
  .home-contact-container {
    flex-direction: column;
    gap: 50px;
  }

  .home-contact-left,
  .home-contact-form-wrapper {
    width: 100%;
  }

  .home-form-row {
    flex-direction: column;
  }

  .home-form-row input,
  .home-form-row select {
    width: 100%;
  }

  .home-person {
    width: 120px;
    right: 20px;
  }
}



/* ==================...Page-1 Styling...===================== */
.fssai-section {
  padding: 110px 20px 70px;
  background: radial-gradient(circle at top,#4bd0f815,#ffffff);
  overflow:hidden;
}

/* Container */

.fssai-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:70px;
  align-items:center;
}

/* Card */

.fssai-content{
  flex:1;
  padding:50px;
  border-radius:26px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  position:relative;
  box-shadow:0 40px 80px rgba(0,0,0,.12);
}

/* Card Glow */

.fssai-content:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:28px;
  background: linear-gradient( 135deg, rgba(254, 189, 16, 0.18), rgba(42, 197, 245, 0.18) );
  z-index:-1;
}

/* Headings */

.fssai-content h1{
  font-size:40px;
  line-height:1.2;
  margin-bottom:22px;
  color:#30260a;
  font-weight: bold;
}

.fssai-content span{
  color:linear-gradient(135deg,#4bd0f8,#fdd25b);
}

/* Paragraphs */

.fssai-content p{
  font-size:16px;
  line-height:1.8;
  margin-bottom:18px;
  color:#333;
}

/* Button */

.fssai-btn{
  margin-top:25px;
  display:inline-block;
  padding:15px 42px;
  border-radius:60px;
  background: linear-gradient( 135deg, rgba(254, 189, 16, 0.18), rgba(42, 197, 245, 0.18) );
  color:#000;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 20px 40px #4bd0f855;
  position:relative;
  overflow:hidden;
  transition:.4s;
}

.fssai-btn:hover{
  transform:translateY(-6px);
  background: #000;
  color: #fff;
}

/* Ripple */

.fssai-btn:after{
  content:'';
  position:absolute;
  inset:0;
  background:#ffffff55;
  transform:translateX(-100%);
  transition:.4s;
}

.fssai-btn:hover:after{
  transform:translateX(0);
}

/* Image */

.fssai-image{
  flex:1;
  position:relative;
}

.fssai-image img{
  width:100%;
  border-radius:26px;
  box-shadow:0 40px 70px rgba(0,0,0,.18);
  animation:floatImg 4s ease-in-out infinite;
}

/* Float */

@keyframes floatImg{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

/* Reveal */

.reveal{
  opacity:0;
  transform:translateY(50px);
  transition:.9s cubic-bezier(.19,1,.22,1);
}

.reveal.active{
  opacity:1;
  transform:none;
}

.delay1{transition-delay:.2s}
.delay2{transition-delay:.4s}
.delay3{transition-delay:.6s}

/* Mobile */

@media(max-width:900px){
  .fssai-container{flex-direction:column}
  .fssai-content{padding:35px}
  .fssai-content h1{font-size:32px}
}

/* SUMMARY SECTION */

.fssai-summary{
  padding:50px 20px;
  background:radial-gradient(circle at top,#4bd0f815,#ffffff);
}

.summary-title{
  text-align:center;
  font-size:36px;
  margin-bottom:60px;
  color:#685111;
}

.summary-title span{
  color:#000;
}

/* GRID */

.summary-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

/* CARD */

.summary-card{
  background:rgba(255,255,255,.9);
  padding:35px;
  border-radius:22px;
  position:relative;
  box-shadow:0 25px 50px rgba(0,0,0,.1);
  transition:.4s;
}

/* Gradient Border */

.summary-card:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:24px;
  background:linear-gradient(135deg,#4bd0f888,#f7d16888);
  z-index:-1;
}

/* Hover */

.summary-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 35px 70px #4bd0f855;
}

/* Text */

.summary-card h4{
  color:#4bd0f8;
  font-size:20px;
  margin-bottom:10px;
  font-weight: bold;
}
.summary-card h4{
  transition:.4s;
}

/* Change h4 color when card is hovered */

.summary-card:hover h4{
  color:#000;
  text-shadow:0 0 12px #ffca39aa;
}


.summary-card p{
  color:#333;
  line-height:1.6;
}

/* Responsive */

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

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

  .summary-title{
    font-size:28px;
  }
}
.fssai-info{
  padding:100px 20px;
  background:#ffffff;
}

.fssai-info-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:70px;
  align-items:center;
}

/* LEFT */

.fssai-info-content{
  flex:1;
  padding:45px;
  border-radius:24px;
  background:rgba(255,255,255,.9);
  position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.1);
}

.fssai-info-content:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:26px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
}

.fssai-info-content h2{
  font-size:34px;
  color:#ffca39;
  margin-bottom:18px;
}

.fssai-info-content span{
  color:#4bd0f8;
}

.fssai-info-content p{
  line-height:1.8;
  margin-bottom:15px;
  color:#333;
}

.fssai-info-content h3{
  margin:20px 0 15px;
  color:#4bd0f8;
}

/* Difference */

.fssai-diff{
  display:flex;
  gap:20px;
}

.diff-box{
  flex:1;
  padding:20px;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 15px 30px rgba(0,0,0,.08);
  transition:.4s;
}

.diff-box:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 45px #4bd0f855;
}

.diff-box h4{
  color:#ffca39;
  margin-bottom:8px;
}

small{
  display:block;
  margin-top:20px;
  color:#555;
}

/* IMAGE */

.fssai-info-image{
  flex:1;
}

.fssai-info-image img{
  width:100%;
  border-radius:24px;
  box-shadow:0 40px 80px rgba(0,0,0,.15);
}

/* REVEALS */

.reveal-left{
  opacity:0;
  transform:translateX(-80px);
  transition:1s cubic-bezier(.19,1,.22,1);
}

.reveal-right{
  opacity:0;
  transform:translateX(80px);
  transition:1s cubic-bezier(.19,1,.22,1);
}

.reveal-left.active,
.reveal-right.active{
  opacity:1;
  transform:none;
}

/* =========================
   LARGE LAPTOPS
========================= */

@media(max-width:1200px){

  .fssai-info-container{
    gap:50px;
  }

  .fssai-info-content{
    padding:35px;
  }

  .fssai-info-content h2{
    font-size:30px;
  }

}

/* =========================
   TABLETS
========================= */

@media(max-width:900px){

  .fssai-info{
    padding:80px 20px;
  }

  .fssai-info-container{
    flex-direction:column;
    gap:40px;
  }

  .fssai-info-content{
    padding:30px;
  }

  .fssai-info-content h2{
    font-size:28px;
  }

  .fssai-diff{
    flex-direction:column;
  }

}

/* =========================
   MOBILE DEVICES
========================= */

@media(max-width:600px){

  .fssai-info{
    padding:60px 15px;
  }

  .fssai-info-content{
    padding:25px;
  }

  .fssai-info-content h2{
    font-size:24px;
  }

  .fssai-info-content h3{
    font-size:18px;
  }

  .fssai-info-content p{
    font-size:14px;
  }

  .diff-box{
    padding:18px;
  }

  .diff-box h4{
    font-size:16px;
  }

}

/* =========================
   SMALL PHONES
========================= */

@media(max-width:400px){

  .fssai-info-content{
    padding:20px;
  }

  .fssai-info-content h2{
    font-size:22px;
  }

  .fssai-info-content p{
    font-size:13px;
  }

}


/* ================= WHO NEEDS ================= */

.fssai-who{
  padding:60px 20px;
  background:#4bd0f810;
}

.fssai-who-card{
  max-width:1100px;
  margin:auto;
  padding:60px;
  background:#ffffff;
  border-radius:28px;
  position:relative;
  box-shadow:0 40px 90px rgba(0,0,0,.15);
}

/* Gradient Frame */

.fssai-who-card:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:30px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
}

/* Heading */

.fssai-who h2{
  font-size:36px;
  color:#ffca39;
  margin-bottom:15px;
}

.fssai-who h2 span{
  color:#4bd0f8;
}

/* Intro */

.intro{
  color:#333;
  margin-bottom:30px;
}

/* Grid */

.who-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-bottom:25px;
}

/* Item */

.who-item{
  padding:18px 22px;
  border-radius:14px;
  background:#ffffff;
  border:1px solid #4bd0f840;
  font-weight:600;
  color:#333;
  transition:.4s;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.who-item:hover{
  transform:translateY(-6px);
  border-color:#ffca39;
  box-shadow:0 20px 40px #4bd0f840;
  color:#ffca39;
}

/* Note */

.note{
  margin:20px 0;
  color:#444;
}

/* Highlight Box */

.who-highlight{
  background:#4bd0f815;
  padding:25px;
  border-radius:18px;
  border-left:6px solid #ffca39;
}

.who-highlight p{
  margin-bottom:10px;
  line-height:1.7;
}

.who-highlight span{
  color:#4bd0f8;
  font-weight:700;
}

/* Responsive */

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

  .fssai-who-card{
    padding:40px 25px;
  }

  .fssai-who h2{
    font-size:30px;
  }
}


/* ================= TYPES ================= */

.fssai-types{
  padding:60px 20px;
  background:#4bd0f808;
}

.types-title{
  text-align:center;
  font-size:36px;
  color:#ffca39;
  margin-bottom:60px;
}

.types-title span{color:#4bd0f8}

/* Types Cards */

.types-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.type-card{
  background:#fff;
  padding:35px;
  border-radius:22px;
  position:relative;
  box-shadow:0 25px 50px rgba(0,0,0,.1);
  transition:.4s;
}

.type-card:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:24px;
  background:linear-gradient(135deg,#4bd0f888,#ffca3988);
  z-index:-1;
}

.type-card:hover{
  transform:translateY(-12px);
  box-shadow:0 35px 70px #4bd0f855;
}

.type-no{
  color:#ffca39;
  font-size:22px;
  font-weight:700;
}

.type-card h3{
  margin:10px 0;
  color:#4bd0f8;
}

.type-card:hover h3{
  color:#000000;
}
.type-card ul{
  padding-left:18px;
}

.type-card li{
  margin-bottom:8px;
  color:#333;
}

/* Fees */

.fees-title{
  text-align:center;
  margin:80px 0 30px;
  color:#4bd0f8;
}

.fees-table{
  max-width:1200px;
  margin:auto;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.fees-head,.fees-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:18px 25px;
}

.fees-head{
  background:linear-gradient(135deg,#4bd0f888,#ffca3988);
  color:#000;
  font-weight:700;
}

.fees-row{
  background:#fff;
  border-bottom:1px solid #eee;
  transition:.3s;
}

.fees-row:hover{
  background:#4bd0f810;
}

/* Mobile Fees Table */

@media(max-width:768px){

  .fees-table{
    box-shadow:none;
  }

  .fees-head{
    display:none; /* hide desktop header */
  }

  .fees-row{
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:15px;
    border-radius:16px;
    box-shadow:0 15px 30px rgba(0,0,0,.1);
    border:none;
    padding:20px;
  }

  .fees-row span{
    display:block;
    font-size:14px;
  }

  /* Labels before values */

  .fees-row span:nth-child(1)::before{
    content:"License Type: ";
    font-weight:700;
    color:#4bd0f8;
  }

  .fees-row span:nth-child(2)::before{
    content:"Turnover Limit: ";
    font-weight:700;
    color:#4bd0f8;
  }

  .fees-row span:nth-child(3)::before{
    content:"Government Fee: ";
    font-weight:700;
    color:#4bd0f8;
  }

  .fees-row:hover{
    background:#ffffff;
  }

}

/* Notes */

.fees-notes{
  max-width:1200px;
  margin:40px auto;
}

.fees-notes h4{
  color:#ffca39;
  margin-bottom:10px;
}

.fees-notes ul{
  padding-left:20px;
}

.fees-notes li{
  margin-bottom:6px;
}

/* Free Box */

.free-box{
  max-width:1200px;
  margin:30px auto 0;
  padding:25px;
  border-left:6px solid #ffca39;
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.free-box h4{
  color:#4bd0f8;
  margin-bottom:8px;
}

/* Responsive */

@media(max-width:900px){

.types-grid{
  grid-template-columns:1fr;
}

.fees-head,.fees-row{
  grid-template-columns:1fr;
  gap:6px;
}

}


/* ================= DOCUMENTS ================= */

.fssai-docs{
  padding:120px 20px;
  background:#4bd0f808;
}

.fssai-docs-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:70px;
  align-items:center;
}

/* LEFT CARD */

.fssai-docs-content{
  flex:1;
  padding:45px;
  border-radius:26px;
  position:relative;
  overflow:hidden;

  /* Proper layered background */
  background:
    linear-gradient(
      rgba(255,255,255,.75),
      rgba(255,255,255,.75)
    );

  box-shadow:0 30px 70px rgba(0,0,0,.12);
}



/* Gradient frame */

.fssai-docs-content:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:28px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
}

.fssai-docs-content h2{
  font-size:34px;
  color:#ffca39;
  margin-bottom:12px;
}

.fssai-docs-content span{
  color:#4bd0f8;
}

.docs-intro{
  color:#333;
  margin-bottom:20px;
}

/* Lists */

.docs-lists{
  display:flex;
  gap:40px;
}

.docs-list{
  list-style:none;
  padding:0;
}

.docs-list li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  color:#333;
  transition:.3s;
}

/* Custom bullet */

.docs-list li:before{
  content:'✔';
  position:absolute;
  left:0;
  top:0;
  color:#ffca39;
  font-weight:700;
}

/* Hover */

.docs-list li:hover{
  transform:translateX(6px);
  color:#010d11;
}

/* GST Note */

.docs-note{
  margin-top:25px;
  padding:18px 22px;
  border-left:5px solid #ffca39;
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  color:#444;
}

/* IMAGE */

.fssai-docs-image{
  flex:1;
}

.fssai-docs-image img{
  width:100%;
  border-radius:26px;
  box-shadow:0 40px 80px rgba(0,0,0,.18);
  animation:floatImg 4s ease-in-out infinite;
}

/* Responsive */

@media(max-width:900px){

  .fssai-docs-container{
    flex-direction:column;
  }

  .docs-lists{
    flex-direction:column;
    gap:0;
  }

  .fssai-docs-content{
    padding:35px 25px;
  }

  .fssai-docs-content h2{
    font-size:30px;
  }
}

/* ================= HOW TO APPLY ================= */
.fssai-steps{
  padding:60px 20px;
  background:#4bd0f808;
}

/* Title */

.steps-title{
  text-align:center;
  font-size:36px;
  color:#ffca39;
}

.steps-title span{
  color:#4bd0f8
}

.steps-intro{
  text-align:center;
  margin:10px 0 60px;
  color:#555;
  font-size:16px;
}

/* Wrapper */

.steps-wrapper{
  max-width:900px;
  margin:auto;
  position:relative;
}

/* Vertical line */

.steps-wrapper:before{
  content:'';
  position:absolute;
  left:28px;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(#4bd0f8,#ffca39);
  border-radius:5px;
}

/* Step */

.step{
  display:flex;
  gap:25px;
  margin-bottom:40px;
  position:relative;
}

/* Icon */

.step-icon{
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#000;
  box-shadow:0 15px 35px #4bd0f855;
  animation:pulse 2s infinite;
  flex-shrink:0;
}

@keyframes pulse{
  50%{
    transform:scale(1.08)
  }
}

/* Content */

.step-content{
  background:#ffffff;
  padding:20px 25px;
  border-radius:16px;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
  flex:1;
  transition:.4s;
}

.step-content:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 50px #4bd0f840;
  /* background-color:#ffca3988; */
}

.step-content h4{
  color:#333;
  font-size:20px;
  margin-bottom:8px;
}

.step-content p{
  font-size:15px;
  line-height:1.7;
  color:#555;
}

/* Footer */

.steps-footer{
  text-align:center;
  margin-top:40px;
}

/* =========================
   LARGE LAPTOP
========================= */

@media(max-width:1200px){

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

.steps-wrapper{
  max-width:800px;
}

}

/* =========================
   TABLET VIEW
========================= */

@media (max-width:900px){

.fssai-steps{
  padding:50px 25px;
}

.steps-title{
  font-size:28px;
}

.steps-intro{
  font-size:15px;
  margin-bottom:40px;
}

.steps-wrapper{
  max-width:100%;
}

.steps-wrapper:before{
  left:35px;
}

.step{
  gap:20px;
}

.step-icon{
  width:55px;
  height:55px;
  font-size:16px;
}

.step-content{
  padding:20px;
}

}


/* =========================
   UNIQUE MOBILE VIEW
========================= */

@media (max-width:600px){

.fssai-steps{
  padding:45px 18px;
}

/* Title */

.steps-title{
  font-size:24px;
}

.steps-intro{
  font-size:14px;
  margin-bottom:35px;
}

/* Remove timeline line */

.steps-wrapper:before{
  display:none;
}

/* Steps become cards */

.step{
  flex-direction:column;
  margin-bottom:35px;
}

/* Icon becomes floating badge */

.step-icon{
  width:50px;
  height:50px;
  font-size:14px;
  position:absolute;
  top:-30px;
  left:20px;
  z-index:2;
}

/* Card layout */

.step-content{
  padding:25px 18px 18px 18px;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
  border-top:4px solid #4bd0f8;
}

/* Alternate card color */

.step:nth-child(even) .step-content{
  border-top:4px solid #ffca39;
}

/* Text */

.step-content h4{
  font-size:17px;
}

.step-content p{
  font-size:14px;
  line-height:1.6;
}

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width:380px){

.steps-title{
  font-size:22px;
}

.step-content{
  padding:22px 16px;
}

.step-icon{
  width:45px;
  height:45px;
}

}

/* ================= STATUS ================= */

.fssai-status{
  padding:60px 20px;
  background:#4bd0f808;
}

.status-title{
  text-align:center;
  font-size:36px;
  color:#ffca39;
}

.status-title span{color:#4bd0f8}

.status-intro{
  text-align:center;
  margin:10px 0 40px;
}

/* Steps */

.steps-head{
  text-align:center;
  color:#4bd0f8;
  margin-bottom:20px;
}

.status-steps{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
  color: #464545;
  font-weight: bold;
}

.status-step{
  background:#fff;
  padding:22px;
  border-radius:18px;
  display:flex;
  gap:15px;
  align-items:center;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
  transition:.4s;
}

.status-step span{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.status-step:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 50px #4bd0f855;
  /* background-color: #ffca3988; */
  color: #000;
}

/* Table */

.meaning-title{
  text-align:center;
  margin:70px 0 20px;
  color:#ffca39;
}

.status-table{
  max-width:1100px;
  margin:auto;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 25px 50px rgba(0,0,0,.12);
}

.status-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  padding:16px 22px;
  background:#fff;
  border-bottom:1px solid #eee;
  color: #131010;
  transition:.3s;
}

.status-row:hover{
  background:#4bd0f810;
}

.status-row.head{
  background:linear-gradient(135deg,#4bd0f888,#ffca3988);
  font-weight:700;
}

/* Mobile Status Table */

@media(max-width:768px){

  .status-table{
    box-shadow:none;
  }

  /* Hide desktop header */

  .status-row.head{
    display:none;
  }

  .status-row{
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:15px;
    border-radius:16px;
    box-shadow:0 12px 28px rgba(0,0,0,.1);
    border:none;
    padding:20px;
  }

  .status-row span{
    display:block;
    font-size:14px;
  }

  /* Labels before values */

  .status-row span:nth-child(1)::before{
    content:"Status: ";
    font-weight:700;
    color:#4bd0f8;
  }

  .status-row span:nth-child(2)::before{
    content:"Meaning: ";
    font-weight:700;
    color:#4bd0f8;
  }

  .status-row:hover{
    background:#ffffff;
  }

}


/* Link Card */

.foscos-card{
  display:block;
  max-width:1100px;
  margin:30px auto 10px;
  padding:18px;
  text-align:center;
  border-radius:14px;
  background:#fff;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
  text-decoration:none;
  color:#00394b;
  font-weight:600;
  transition:.4s;
}

.foscos-card:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 50px #4bd0f855;
  /* background-color: #ffca3988; */
  color:#000;
}

/* Footer Note */

.status-note{
  text-align:center;
  margin-top:15px;
  color:#444;
}

/* Responsive */

@media(max-width:700px){

.status-steps{
  grid-template-columns:1fr;
}

.status-row{
  grid-template-columns:1fr;
  gap:6px;
}

}

/* ================= DOWNLOAD ================= */

.fssai-download{
  padding:30px 20px;
  background:#4bd0f808;
}

.fssai-download-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:70px;
  align-items:center;
}

/* LEFT CARD */

.download-content{
  flex:1;
  padding:50px;
  border-radius:28px;
  background:#ffffff;
  position:relative;
  box-shadow:0 35px 80px rgba(0,0,0,.15);
}

/* Gradient frame */

.download-content:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:30px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
  animation:borderFlow 6s linear infinite;
}

.download-content h2{
  font-size:36px;
  color:#ffca39;
  margin-bottom:15px;
}

.download-content span{
  color:#4bd0f8;
}

.download-content p{
  line-height:1.8;
  color:#333;
}

/* Badge */

.download-badge{
  margin-top:25px;
  display:inline-block;
  padding:12px 22px;
  border-radius:50px;
  background:linear-gradient(135deg,#4bd0f888,#ffca3988);
  color:#000;
  font-weight:600;
  box-shadow:0 15px 35px #4bd0f855;
  animation:pulse 2s infinite;
}

/* IMAGE */

.download-image{
  flex:1;
}

.download-image img{
  width:100%;
  border-radius:26px;
  box-shadow:0 40px 80px rgba(0,0,0,.18);
  animation:floatImg 4s ease-in-out infinite;
}
/* Image Wrapper */

.download-image{
  position:relative;
  perspective:1000px;
}

/* Main Image */

.download-image img{
  transition:.6s cubic-bezier(.19,1,.22,1);
  transform-style:preserve-3d;
}

/* Hover 3D Tilt */

.download-image:hover img{
  transform:rotateY(-10deg) rotateX(6deg) scale(1.04);
}

/* Soft Glow Behind Image */

.download-image:after{
  content:'';
  position:absolute;
  inset:20px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  filter:blur(60px);
  opacity:.35;
  z-index:-1;
  transition:.6s;
}

.download-image:hover:after{
  opacity:.6;
}

/* Shine Effect */

.download-image:before{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    #ffca39,
    transparent
  );
  transform:skewX(-20deg);
  opacity:0;
  pointer-events:none;   /* 🔥 THIS IS THE FIX */
}

/* Trigger only when hovering image wrapper */

.download-image:hover:before{
  left:80%;
  opacity:1;
  transition:left 1.2s cubic-bezier(.19,1,.22,1), opacity .3s;
}



/* Responsive */

@media(max-width:900px){

.fssai-download-container{
  flex-direction:column;
}

.download-content{
  padding:35px 25px;
}

.download-content h2{
  font-size:30px;
}

}


/* ================= RENEWAL ================= */

.fssai-renewal{
  padding:120px 20px;
  background:#4bd0f808;
}

.renewal-wrap{
  max-width:1100px;
  margin:auto;
  background:#fff;
  padding:60px; 
  border-radius:30px;
  position:relative;
  box-shadow:0 40px 90px rgba(0,0,0,.15);
}

/* Gradient Frame */

.renewal-wrap:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:32px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
}

.renewal-wrap h2{
  font-size:36px;
  color:#ffca39;
  margin-bottom:10px;
}

.renewal-wrap span{
  color:#4bd0f8;
}

.renewal-intro{
  margin-bottom:25px;
}

/* Grid */

.renewal-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin:20px 0 35px;
}

.renewal-box{
  padding:18px;
  color: #000;
 background:
    linear-gradient(
      rgba(204, 228, 238, 0.80),
      rgba(204, 228, 238, 0.80)
    ),
    url("../img/page-1-FSSAI/bg-1.jfif") center/cover no-repeat;
  border-radius:16px;
  box-shadow:0 12px 25px rgba(0,0,0,.08);
  transition:.4s;
}

.renewal-box:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 30px #ffca3988;
}

/* List */

.renewal-list{
  margin:15px 0 30px;
  padding-left:20px;
}

.renewal-list li{
  margin-bottom:10px;
}

/* Reference */

.renewal-ref{
  background:#4bd0f815;
  padding:22px;
  border-radius:18px;
  margin-bottom:35px;
}

/* CTA */

.renewal-cta{
  padding:45px;
  border-radius:26px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      rgba(220, 236, 243, 0.85),
      rgba(220, 236, 243,.85)
    ),
    radial-gradient(circle at top left,#4bd0f815,transparent 60%);
  box-shadow:0 35px 80px rgba(0,0,0,.15);
}

/* Gradient Border */

.renewal-cta:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:28px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
  animation:borderFlow 6s linear infinite;
}

/* Floating Light */

.renewal-cta:after{
  content:'';
  position:absolute;
  width:220px;
  height:220px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  filter:blur(90px);
  opacity:.25;
  top:-80px;
  right:-80px;
}

/* Heading */

.renewal-cta h4{
  color:#4bd0f8;
  margin-bottom:10px;
  font-size:22px;
}

/* Button */

.renewal-btn{
  margin-top:20px;
  display:inline-block;
  padding:16px 44px;
  border-radius:60px;
  background:linear-gradient(135deg,#4bd0f888,#ffca3988);
  color:#000;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 20px 45px #4bd0f855;
  transition:.4s;
  position:relative;
  overflow:hidden;
}

/* Shine */

.renewal-btn:after{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.8),
    transparent
  );
  transform:skewX(-20deg);
  pointer-events:none;
}

/* Hover */

.renewal-btn:hover{
  transform:translateY(-6px) scale(1.03);
  color: #000;
}

/* Shine trigger */

.renewal-btn:hover:after{
  left:120%;
  transition:1.5s cubic-bezier(.19,1,.22,1);
}

/* Pulse */

@keyframes pulseGlow{
  50%{box-shadow:0 0 0 12px rgba(42,197,245,.15)}
}

.renewal-btn{
  animation:pulseGlow 2.5s infinite;
}

/* =========================
   TABLET VIEW
========================= */

@media (max-width:900px){

.renewal-btn{
  padding:14px 36px;
  font-size:15px;
}

}

/* =========================
   MOBILE VIEW
========================= */

@media (max-width:600px){

.renewal-btn{
  display:block;
  width:100%;
  text-align:center;
  padding:14px 20px;
  font-size:15px;
  border-radius:50px;
}

}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width:400px){

.renewal-btn{
  padding:13px 18px;
  font-size:14px;
}

}
/* Responsive */

@media(max-width:900px){

.renewal-wrap{
  padding:40px 25px;
}

.renewal-grid{
  grid-template-columns:1fr;
}

.renewal-wrap h2{
  font-size:30px;
}

}

/* ================= FAQ ================= */

.fssai-faq{
  padding:80px 20px 80px;
  position:relative;
  background:
    linear-gradient(
      rgba(204, 228, 238, 0.55),
      rgba(204, 228, 238, 0.55)
    ),
    url("../img/page-1-FSSAI/bg-1.jfif") center/cover no-repeat;
}


.faq-title{
  text-align:center;
  font-size:36px;
  color:#ffca39;
  margin-bottom:50px;
}

.faq-title span{color:#4bd0f8}

.faq-grid{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
}

.faq-card{
  background:#fff;
  padding:28px;
  border-radius:20px;
  position:relative;
  box-shadow:0 20px 45px rgba(0,0,0,.1);
  transition:.4s;
}

/* Gradient border */

.faq-card:before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:22px;
  /* background:linear-gradient(135deg,#96beca,#96beca); */
  z-index:-1;
}

.faq-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 60px #4bd0f8;
  color: #1b1919;
}

.faq-card h4{
  color:#181100;
  margin-bottom:10px;
}
.faq-card:hover h4{
  color:#000;
  margin-bottom:10px;
}

.fssai-disclaimer{
  padding:100px 20px 120px;
  background:#4bd0f808;
}

/* Main Box */

.disclaimer-box{
  max-width:900px;
  margin:auto;
  padding:50px;
  border-radius:26px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      rgba(255,255,255,.9),
      rgba(255,255,255,.9)
    );
  box-shadow:0 35px 80px rgba(0,0,0,.15);
  transition:.5s cubic-bezier(.19,1,.22,1);
}

/* Animated Left Bar */

.disclaimer-box:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:8px;
  height:100%;
  background:linear-gradient(180deg,#4bd0f8,#ffca39);
  transition:.6s;
}

/* Gradient Glow */

.disclaimer-box:after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:28px;
  background:linear-gradient(135deg,#4bd0f888,#ffca3988);
  opacity:0;
  z-index:-1;
  transition:.6s;
}

/* Hover Effects */

.disclaimer-box:hover{
  transform:translateY(-8px);
}

.disclaimer-box:hover:before{
  width:100%;
  opacity:.08;
}

.disclaimer-box:hover:after{
  opacity:1;
}

/* Heading */

.disclaimer-box h3{
  color:#4bd0f8;
  margin-bottom:15px;
  transition:.4s;
}

/* Text */

.disclaimer-box p{
  margin-bottom:12px;
  line-height:1.7;
  color:#333;
  transition:.4s;
}

/* Text color shift on hover */

.disclaimer-box:hover h3{
  color:#000;
}

.disclaimer-box:hover p{
  color:#111;
}

/* Responsive */

@media(max-width:800px){

.faq-grid{
  grid-template-columns:1fr;
}

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

.disclaimer-box{
  padding:35px 25px;
}

}


/* ==================...Page-2 Styling...===================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.gms-hero{
  position:relative;
  background: linear-gradient( rgba(174, 216, 218, 0.7), rgba(204, 228, 238, 0.70) ), url("../img/page-2/first-bg.jfif") center/cover no-repeat;
  padding:100px 20px;
  overflow:hidden;
}

.gms-hero::before{
  content:'';
  position:absolute;
  width:400px;
  height:400px;
  background:#4bd0f833;
  border-radius:50%;
  top:-150px;
  right:-150px;
  filter:blur(120px);
}

.gms-hero::after{
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  background:#ffca3933;
  border-radius:50%;
  bottom:-120px;
  left:-120px;
  filter:blur(120px);
}


.gms-hero-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
  align-items: center;
}

/* LEFT */

.gms-hero-content h1 {
  font-size: 52px;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}

.gms-hero-content h1 span {
  color: #ffca39;
}

.gms-hero-content p {
  margin-top: 20px;
  font-size: 17px;
  color: #1b1b1b;
  max-width: 1200px;
}

/* BUTTONS */

.gms-hero-actions {
  margin-top: 35px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.gms-btn-primary {
  background: #ffca3988;
  color: #000;
  padding: 14px 30px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.4s;
  box-shadow: 0 10px 25px rgba(42,197,245,.35);
}

.gms-btn-primary:hover {
  transform: translateY(-4px);
  background: #4bd0f8;
  color: #fff;
  box-shadow: 0 15px 30px rgba(254,189,16,.45);
}

.gms-btn-outline {
  border: 2px solid #4bd0f8;
  color: #000;
  background: #ffca3990;
  padding: 13px 28px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.4s;
}

.gms-btn-outline:hover {
  background: #ffca39;
  color: #000;
  transform: translateY(-4px);
}

/* RIGHT VISUAL */

.gms-hero-visual {
  position: relative;
  height: 350px;
}

.gms-glow-card {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 40px;
  background: linear-gradient(135deg,#4bd0f899,#ffca3999);
  top: 30px;
  right: 40px;
  filter: blur(0);
  animation: float 6s ease-in-out infinite;
}

.gms-glow-card.second {
  width: 200px;
  height: 200px;
  background: #4bd0f8;
  opacity: .3;
  top: 120px;
  right: 200px;
  animation-delay: 2s;
}

@keyframes float {
  0%,100% {transform: translateY(0);}
  50% {transform: translateY(-20px);}
}

/* RESPONSIVE */

@media(max-width:900px){
  .gms-hero-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .gms-hero-content p{
    margin:auto;
  }

  .gms-hero-actions{
    justify-content:center;
  }

  .gms-hero-visual{
    height:220px;
   display: none;
    
  }
}

@media(max-width:500px){
  .gms-hero-content h1{
    font-size:36px;
  }
}

.gms-about-firm{
  padding:80px 20px 40px;
  background:#fff;
  font-family:'Poppins',sans-serif;
}

.gms-about-wrapper{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

/* IMAGE SIDE */

.gms-about-image{
  position:relative;
}

.gms-about-image img{
  width:100%;
  border-radius:24px;
  transition:.5s;
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.gms-about-image:hover img{
  transform:scale(1.04) rotate(-1deg);
}

/* Floating accent */

.gms-about-image::after{
  content:'';
  position:absolute;
  width:120px;
  height:120px;
  background:#ffca39;
  border-radius:30px;
  top:-20px;
  left:-20px;
  z-index:-1;
}

/* CONTENT */

.gms-about-content h2{
  font-size:38px;
  margin-bottom:20px;
  color:#111;
}

.gms-about-content h2 span{
  color:#ffca39;
}

.gms-about-content p{
  font-size:16px;
  line-height:1.7;
  color:#353535;
  margin-bottom:15px;
}

/* BUTTON */

.gms-about-btn{
  display:inline-block;
  margin-top:25px;
  background:#ffca3988;
  color:#000;
  padding:14px 32px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
  box-shadow:0 12px 30px rgba(42,197,245,.35);
}

.gms-about-btn:hover{
  background:#4bd0f899;
  color: #000;
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(254,189,16,.4);
}

/* RESPONSIVE */

@media(max-width:900px){
  .gms-about-wrapper{
    grid-template-columns:1fr;
    /* text-align:center; */
  }

  .gms-about-image::after{
    display:none;
  }
}

@media(max-width:500px){
  .gms-about-content h2{
    font-size:30px;
    text-align: center;
  }
}

.gms-types{
  padding:50px 20px 40px;
  background:#fff;
  font-family:'Poppins',sans-serif;
}

.gms-types-wrapper{
  max-width:1200px;
  margin:auto;
}

/* HEADER */

.gms-types-header{
  max-width:650px;
  margin-bottom:50px;
}

.gms-types-header h2{
  font-size:38px;
  margin-bottom:15px;
}

.gms-types-header h2 span{
  color:#4bd0f8;
}

.gms-types-header p{
  color:#555;
  line-height:1.7;
}

/* GRID */

.gms-types-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

/* CARD */

.gms-type-card{
  background:#fff;
  padding:35px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  transition:.4s;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
  z-index:1;
}

.gms-type-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:2px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:.4s;
  z-index:-1; /* 👈 KEY FIX */
}

.gms-type-card:hover::before{
  opacity:1;
}

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

/* ICON */

.gms-type-icon{
  width:50px;
  height:50px;
  background:#4bd0f8;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:20px;
  transition:.4s;
}

.gms-type-card:hover .gms-type-icon{
  background:#ffca39;
  transform:rotate(10deg) scale(1.1);
}

/* TEXT */

.gms-type-card h3{
  margin-bottom:10px;
}

.gms-type-card p{
  color:#555;
  line-height:1.6;
}

/* CTA */

.gms-types-cta{
  margin-top:50px;
}

.gms-types-btn{
  display:inline-block;
  background:#4bd0f899;
  color:#000;
  padding:15px 35px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
  box-shadow:0 12px 30px rgba(42,197,245,.35);
}

.gms-types-btn:hover{
  background:#ffca3999;
  transform:translateY(-4px);
  color: #000;
  box-shadow:0 18px 40px rgba(254,189,16,.45);
}

/* RESPONSIVE */

@media(max-width:900px){
  .gms-types-grid{
    grid-template-columns:1fr;
  }

  .gms-types-header{
    text-align:center;
    margin:auto auto 40px;
  }

  .gms-types-cta{
    text-align:center;
  }
}

@media(max-width:500px){
  .gms-types-header h2{
    font-size:30px;
  }
}

.gms-who2{
  padding:50px 20px;
  background:#fff;
  font-family:'Poppins',sans-serif;
}

.gms-who2-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:center;
}

/* LEFT */

.gms-who2-left h2{
  font-size:38px;
  margin-bottom:15px;
}

.gms-who2-left h2 span{
  color:#ffca39;
}

.gms-who2-intro{
  color:#555;
  line-height:1.7;
  margin-bottom:35px;
}

/* ITEMS */

.gms-who2-item{
  display:flex;
  gap:18px;
  margin-bottom:22px;
  transition:.4s;
}

.gms-who2-item:hover{
  transform:translateX(10px);
}

.gms-who2-icon{
  min-width:44px;
  height:44px;
  background:#ffca3999;
  color:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:0 8px 20px rgba(42,197,245,.4);
  transition:.4s;
}

.gms-who2-item:hover .gms-who2-icon{
  background:#4bd0f899;
  transform:rotate(10deg) scale(1.1);
  color: #000;
}

.gms-who2-item h4{
  margin-bottom:5px;
}

.gms-who2-item p{
  color:#555;
  line-height:1.6;
}

/* BUTTON */

.gms-who2-btn{
  display:inline-block;
  margin-top:25px;
  background:#ffca3999;
  color:#000;
  padding:14px 32px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
  box-shadow:0 12px 30px rgba(42,197,245,.35);
}

.gms-who2-btn:hover{
  background:#4bd0f899;
  color: #000;
  transform:translateY(-4px);
}

/* RIGHT IMAGE */

.gms-who2-right img{
  width:100%;
  border-radius:10px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
  transition:.6s;
}

.gms-who2-right:hover img{
  transform:scale(1.05);
}

/* RESPONSIVE */

@media(max-width:900px){
  .gms-who2-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .gms-who2-item{
    justify-content:center;
    text-align:left;
  }
}

@media(max-width:500px){
  .gms-who2-left h2{
    font-size:30px;
  }
}


.gms-compare{
  padding:50px 20px;
  background:#fff;
  font-family:'Poppins',sans-serif;
}

.gms-compare-wrap{
  max-width:1200px;
  margin:auto;
}

/* HEAD */

.gms-compare-head{
  max-width:1100px;
  margin-bottom:40px;
}

.gms-compare-head h2{
  font-size:38px;
  margin-bottom:10px;
}

.gms-compare-head h2 span{
  color:#4bd0f8;
}

.gms-compare-head p{
  color:#555;
  line-height:1.7;
}

/* TABLE */

.gms-compare-table{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.1);
}

/* ROW */

.gms-compare-row{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr 1fr;
  background:#fff;
  transition:.4s;
}

.gms-compare-row:nth-child(even){
  background:#fafafa;
}

/* CELLS */

.gms-compare-cell{
  padding:18px;
  border-right:1px solid #eee;
}

.gms-compare-cell:last-child{
  border-right:none;
}

/* FEATURE COLUMN */

.gms-compare-cell.feature{
  font-weight:600;
  background:#f7fdff;
}

/* TOP */

.gms-compare-top{
  background:#4bd0f899;
  color:#000;
  font-weight:600;
}

.gms-compare-top .feature{
  background:#4bd0f8;
}

/* HIGHLIGHT COLUMN */

.gms-compare-cell.highlight{
  position:relative;
}

.gms-compare-cell.highlight::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:#ffca39;
}

/* ROW HOVER */

.gms-compare-row:hover{
  transform:scale(1.02);
  /* background:#f0fbff; */
}

/* CTA */

.gms-compare-cta{
  margin-top:40px;
}

.gms-compare-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 38px;
  border-radius:50px;
  color:#4bd0f8;
  font-weight:600;
  text-decoration:none;
  overflow:hidden;
  border:2px solid #4bd0f8;
  background:#fff;
  transition:.4s ease;
}

/* sliding background */

.gms-compare-btn::before{
  content:'';
  position:absolute;
  left:-100%;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  transition:.4s;
  z-index:-1;
}

/* hover */

.gms-compare-btn:hover{
  color:#000;
  box-shadow:0 10px 30px rgba(42,197,245,.4);
}

.gms-compare-btn:hover::before{
  left:0;
}


/* RESPONSIVE */

/* =====================================
   ENHANCED MOBILE RESPONSIVE TABLE
===================================== */

@media (max-width: 900px) {

  .gms-compare-head h2 {
    font-size: 26px;
  }

  .gms-compare-head p {
    font-size: 14px;
  }

  /* Hide header row */
  .gms-compare-top {
    display: none;
  }

  /* Each row becomes a card */
  .gms-compare-row {
    display: block;
    margin-bottom: 25px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    overflow: hidden;
  }

  /* Feature becomes card title */
  .gms-compare-cell.feature {
    background: #4bd0f8;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 18px;
  }

  /* Normal cells stacked */
  .gms-compare-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
  }

  .gms-compare-cell:last-child {
    border-bottom: none;
  }

  /* Add column label automatically */
  .gms-compare-cell::before {
    content: attr(data-label);
    font-weight: 600;
    color: #4bd0f8;
    font-size: 13px;
  }

  /* Highlight column styling */
  .gms-compare-cell.highlight {
    background: rgba(254,189,16,0.05);
    position: relative;
  }

  .gms-compare-cell.highlight::after {
    display: none;
  }

  /* CTA button */
  .gms-compare-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 14px;
  }

}

.gms-benefits{
  padding:50px 20px;
  background:linear-gradient(180deg,#fff 0%,#f5fcff 100%);
  font-family:'Poppins',sans-serif;
}

.gms-benefits-wrap{
  max-width:1200px;
  margin:auto;
}

/* HEAD */

.gms-benefits-head{
  max-width:650px;
  margin-bottom:50px;
}

.gms-benefits-head h2{
  font-size:38px;
  margin-bottom:12px;
}

.gms-benefits-head h2 span{
  color:#4bd0f8;
}

.gms-benefits-head p{
  color:#555;
  line-height:1.7;
}

/* GRID */

.gms-benefits-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:35px;
}

/* CARD */

.gms-benefit-card{
  background:#fff;
  padding:35px 30px 32px;
  border-radius:18px;
  position:relative;
  transition:.45s;
  box-shadow:0 15px 45px rgba(0,0,0,.08);
  overflow:hidden;
}

/* TOP ACCENT */

.gms-benefit-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#4bd0f8,#ffca39);
}

/* DOT ICON */

.gms-benefit-dot{
  width:14px;
  height:14px;
  background:#4bd0f8;
  border-radius:50%;
  display:inline-block;
  margin-bottom:12px;
}

/* HOVER */

.gms-benefit-card:hover{
  transform:translateY(-8px) rotate(-.3deg);
  box-shadow:0 25px 60px rgba(42,197,245,.25);
}

.gms-benefit-card:hover .gms-benefit-dot{
  background:#ffca39;
}

/* TEXT */

.gms-benefit-card h4{
  margin-bottom:8px;
}

.gms-benefit-card p{
  color:#555;
  line-height:1.6;
}

/* CTA */

.gms-benefits-cta{
  margin-top:50px;
}

.gms-benefits-btn{
  position:relative;
  padding:15px 40px;
  border-radius:8px;
  background:#111;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  overflow:hidden;
  transition:.4s;
}

/* button glow */

.gms-benefits-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  opacity:0;
  transition:.4s;
  z-index:-1;
}

.gms-benefits-btn:hover{
  color:#000;
  background-color: #4bd0f899;
}

.gms-benefits-btn:hover::after{
  opacity:1;
  background-color: #4bd0f8;
}

/* RESPONSIVE */

@media(max-width:900px){
  .gms-benefits-grid{
    grid-template-columns:1fr;
  }

  .gms-benefits-head{
    text-align:center;
    margin:auto auto 40px;
  }

  .gms-benefits-cta{
    text-align:center;
  }
}

@media(max-width:500px){
  .gms-benefits-head h2{
    font-size:30px;
  }
}


.gms-docs{
  padding:60px 20px;
  background:#fff;
  font-family:'Poppins',sans-serif;
}

.gms-docs-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
}

/* LEFT */

.gms-docs-left h2{
  font-size:38px;
  margin-bottom:10px;
}

.gms-docs-left h2 span{
  color:#4bd0f8;
}

.gms-docs-intro{
  color:#555;
  line-height:1.7;
  margin-bottom:40px;
}

/* TIMELINE LINE */

.gms-docs-line{
  position:absolute;
  left:15px;
  top:180px;
  width:3px;
  height:420px;
  background:linear-gradient(#4bd0f8,#ffca39);
}

/* ITEM */

.gms-doc-item{
  display:flex;
  gap:20px;
  margin-bottom:35px;
  position:relative;
  opacity:0;
  transform:translateY(20px);
  animation:docFade .7s ease forwards;
}

.gms-doc-item:nth-child(4){animation-delay:.1s}
.gms-doc-item:nth-child(5){animation-delay:.2s}
.gms-doc-item:nth-child(6){animation-delay:.3s}
.gms-doc-item:nth-child(7){animation-delay:.4s}
.gms-doc-item:nth-child(8){animation-delay:.5s}

@keyframes docFade{
  to{
    opacity:1;
    transform:none;
  }
}

.gms-doc-item span{
  min-width:34px;
  height:34px;
  border-radius:50%;
  background:#4bd0f8;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  box-shadow:0 6px 20px rgba(42,197,245,.4);
}

/* TEXT */

.gms-doc-item h4{
  margin-bottom:5px;
}

.gms-doc-item p{
  color:#555;
  line-height:1.6;
}

/* BUTTON */

.gms-docs-btn{
  display:inline-block;
  margin-top:25px;
  padding:14px 36px;
  border-radius:30px;
  border:2px dashed #4bd0f8;
  color:#011116;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
}

.gms-docs-btn:hover{
  background:#4bd0f899;
  color:#000;
}

/* RIGHT IMAGE (STICKY EFFECT) */

.gms-docs-right{
  position:sticky;
  top:120px;
  align-items: center;
}

.gms-docs-right img{
  width:100%;
  height: 90%;
  align-items: center;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* RESPONSIVE */

@media(max-width:900px){
  .gms-docs-wrap{
    grid-template-columns:1fr;
  }

  .gms-docs-line{
    display:none;
  }

  .gms-docs-right{
    position:relative;
    top:0;
  }

  .gms-docs-left{
    text-align:center;
  }

  .gms-doc-item{
    justify-content:center;
    text-align:left;
  }
}

@media(max-width:500px){
  .gms-docs-left h2{
    font-size:30px;
  }
}


.gms-help{
  padding:60px 20px;
  background:linear-gradient(180deg,#f6fdff,#fff);
  font-family:'Poppins',sans-serif;
}

.gms-help-wrap{
  max-width:1100px;
  margin:auto;
}

/* HEAD */

.gms-help-head{
  max-width:1200px;
  margin-bottom:60px;
  text-align: center;
}

.gms-help-head h2{
  font-size:38px;
  margin-bottom:10px;
}

.gms-help-head h2 span{
  color:#ffca39;
}

.gms-help-head p{
  color:#555;
  line-height:1.7;
}

/* FLOW */

.gms-help-flow{
  position:relative;
}

/* center line */

.gms-help-flow::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  height:100%;
  background:linear-gradient(#4bd0f8,#ffca39);
  transform:translateX(-50%);
}

/* STEP */

.gms-help-step{
  display:flex;
  align-items:center;
  margin-bottom:50px;
  width:50%;
}

.gms-help-step.right{
  margin-left:auto;
  flex-direction:row-reverse;
}

/* ICON */

.gms-help-icon{
  width:50px;
  height:50px;
  background:#ffca39;
  color:#000;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 20px;
  box-shadow:0 10px 25px rgba(42,197,245,.4);
  transition:.4s;
}

/* CARD */

.gms-help-card{
  background:#c2dff0;
  padding:22px 26px;
  border-radius:14px;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
  transition:.4s;
}

/* HOVER */

.gms-help-step:hover .gms-help-card{
  transform:translateY(-6px);
  background:#ffca3999;
}

.gms-help-step:hover .gms-help-icon{
  background:#4bd0f8;
  transform:scale(1.1);
}

/* CTA */

.gms-help-cta{
  margin-top:60px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.gms-help-btn{
  display:inline-block;
  padding:14px 40px;
  background:#fff;
  color:#4bd0f8;
  border:2px solid #4bd0f8;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  transition:.4s;
}

.gms-help-btn:hover{
  background:#4bd0f899;
  color:#000;
}

/* RESPONSIVE */

@media(max-width:900px){

  .gms-help-flow::before{
    left:20px;
  }

  .gms-help-step,
  .gms-help-step.right{
    width:100%;
    margin-left:0;
    flex-direction:row;
  }

  .gms-help-icon{
    margin-left:0;
  }

}

.gms-why{
  padding:60px 20px;
  background:linear-gradient(180deg,#fff,#f4fcff);
  font-family:'Poppins',sans-serif;
}

.gms-why-wrap{
  max-width:1200px;
  margin:auto;
}

/* HEAD */

.gms-why-head{
  max-width:1200px;
  text-align: center;
  margin-bottom:60px;
}

.gms-why-head h2{
  font-size:38px;
  margin-bottom:10px;
}

.gms-why-head h2 span{
  color:#4bd0f8;
}

.gms-why-head p{
  color:#555;
  line-height:1.7;
}

/* MAIN */

.gms-why-main{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}

/* IMAGE */

.gms-why-image{
  position:relative;
}

.gms-why-image::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:24px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
}

.gms-why-image img{
  width:100%;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* FEATURES GRID */

.gms-why-features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
}

/* ITEM */

.gms-why-item{
  background:#fff;
  padding:22px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  transition:.4s;
  position:relative;
  overflow:hidden;
}

/* gradient shine */

.gms-why-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,#ffca39,transparent);
  transform:translateX(-100%);
  transition:.6s;
}

.gms-why-item:hover::after{
  transform:translateX(100%);
}

.gms-why-item:hover{
  transform:translateY(-6px);
}

.gms-why-item span{
  display:inline-block;
  width:42px;
  height:42px;
  background:#4bd0f8;
  color:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  transition:.4s;
}

.gms-why-item:hover span{
  background:#ffca39;
  transform:rotate(10deg);
}

.gms-why-item h4{
  margin-bottom:6px;
}

.gms-why-item p{
  color:#555;
  line-height:1.6;
}

/* CTA */

.gms-why-cta{
  margin-top:60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gms-why-btn{
  position:relative;
  padding:15px 45px;
  border-radius:40px;
  border:2px solid #4bd0f8;
  color:#4bd0f8;
  text-decoration:none;
  font-weight:600;
  overflow:hidden;
}

.gms-why-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  transform:scaleX(0);
  transform-origin:left;
  transition:.4s;
  z-index:-1;
}

.gms-why-btn:hover{
  color:#000;
}

.gms-why-btn:hover::before{
  transform:scaleX(1);
}

/* RESPONSIVE */

@media(max-width:900px){
  .gms-why-main{
    grid-template-columns:1fr;
  }

  .gms-why-features{
    grid-template-columns:1fr;
  }

  .gms-why-head{
    text-align:center;
    margin:auto auto 40px;
  }

  .gms-why-cta{
    text-align:center;
  }
}

@media(max-width:500px){
  .gms-why-head h2{
    font-size:30px;
  }
}


.gms-final{
  padding:110px 20px;
  background:#fff;
  font-family:'Poppins',sans-serif;
}
.gms-final{
  position:relative;
  overflow:hidden;
}

/* .gms-final::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#0ab0e211);
  animation:bgSweep 10s linear infinite;
}

@keyframes bgSweep{
  from{transform:translateX(-100%);}
  to{transform:translateX(100%);}
} */


.gms-final-wrap{
  max-width:1200px;
  margin:auto;
}

/* HEAD */

.gms-final-head{
  max-width:650px;
  margin-bottom:50px;
}

.gms-final-head h2{
  font-size:38px;
  margin-bottom:12px;
}

.gms-final-head h2 span{
  color:#4bd0f8;
}

.gms-final-head p{
  color:#555;
  line-height:1.7;
}

/* STATS */

.gms-final-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin-bottom:40px;
}

.gms-final-stat{
  padding:25px;
  border-radius:16px;
  position:relative;
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  transition:.4s;
}

.gms-final-stat.highlight{
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#000;
  text-decoration: none;
}

.gms-final-stat:hover{
  transform:translateY(-6px);
}

.gms-final-stat h3{
  font-size:36px;
  margin-bottom:6px;
}

.gms-final-stat span{
  font-weight:600;
}

.gms-final-stat p{
  margin-top:6px;
  font-size:14px;
  color:#555;
}

.gms-final-stat.highlight p{
  color:#333;
}

/* DIVIDER */

.gms-final-divider{
  border:none;
  height:3px;
  background:linear-gradient(to right,transparent,#4bd0f8,transparent);
  margin:50px 0;
}

/* MAIN GRID */

.gms-final-main{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

/* LEFT */

.gms-final-left h4{
  font-size:26px;
  margin-bottom:10px;
}

.gms-final-left p{
  color:#555;
  line-height:1.7;
}

.gms-final-phone{
  margin:15px 0 25px;
}

/* BUTTONS */

.gms-final-actions{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

/* call */

.gms-final-call{
  padding:14px 32px;
  background:#4bd0f899;
  color:#000;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  animation:pulseCall 2s infinite;
}

@keyframes pulseCall{
  0%{box-shadow:0 0 0 0 rgba(42,197,245,.6);}
  70%{box-shadow:0 0 0 12px rgba(42,197,245,0);}
  100%{box-shadow:0 0 0 0 rgba(42,197,245,0);}
}


.gms-final-call:hover{
  background:#ffca3999;
  color: #000;
}

/* register */

.gms-final-register{
  padding:14px 32px;
  border-radius:6px;
  border:2px solid #4bd0f8;
  color:#4bd0f8;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
}

.gms-final-register:hover{
  background:#4bd0f899;
  color:#000;
}

/* IMAGE */

.gms-final-right{
  position:relative;
}

.gms-final-right::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:24px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
}

.gms-final-right img{
  transition:transform .4s;
}

.gms-final-right:hover img{
  transform:scale(1.04) translateY(-8px);
}

.gms-final-right img{
  width:100%;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* RESPONSIVE */
.gms-final-stat{
  animation:floatStat 5s ease-in-out infinite;
}

.gms-final-stat:nth-child(2){animation-delay:1s;}
.gms-final-stat:nth-child(3){animation-delay:2s;}

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

@media(max-width:900px){

  .gms-final-stats{
    grid-template-columns:1fr;
  }

  .gms-final-main{
    grid-template-columns:1fr;
  }

  .gms-final-head{
    text-align:center;
    margin:auto auto 40px;
  }

  .gms-final-actions{
    justify-content:center;
  }

}

@media(max-width:500px){
  .gms-final-head h2{
    font-size:30px;
  }
}









/* ========================================================== 
              Page-3 Styling
========================================================== */


/* ===================================================
                  section-1
==================================================== */

.page-3-hero2{
  position:relative;
  min-height:50vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient( rgba(174, 216, 218, 0.4), rgba(5, 37, 51, 0.4) ), url("../img/page-3/bg-1.jfif") center/cover no-repeat;
  overflow:hidden;
  font-family:'Poppins',sans-serif;
}

/* Overlay */

/* .page-3-hero2-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,#020617dd,#0f172add,#4bd0f860);
} */

/* Content */

.page-3-hero2-inner{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:850px;
  padding:30px;
  animation:page3HeroZoom 1.1s ease forwards;
}

/* Heading */

.page-3-hero2-inner h1{
  font-size:48px;
  color:#241a01;
  line-height:1.3;
  position:relative;
}

.page-3-hero2-inner h1 span{
  display:block;
  width:120px;
  height:4px;
  background:#ffca39;
  margin:18px auto 0;
  border-radius:4px;
  animation:page3Line 1.2s ease forwards;
}

/* Paragraph */

.page-3-hero2-inner p{
  margin:28px 0 40px;
  color: #222;
  font-size:18px;
  font-weight: 700;
}

/* Buttons */

.page-3-hero2-buttons{
  display:flex;
  justify-content:center;
  gap:22px;
}

.page-3-btn-solid{
  background:#4bd0f899;
  color:#241a01;
  padding:14px 32px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 15px 40px #4bd0f860;
  transition:.3s;
}

.page-3-btn-solid:hover{
  transform:translateY(-4px);
  color: #000;
}

.page-3-btn-ghost{
  border:2px solid #fff;
  padding:12px 30px;
  border-radius:12px;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
}

.page-3-btn-ghost:hover{
  background:#ffca3999;
  border-color:#ffca3999;
  color:#0f172a;
}

/* Animations */

@keyframes page3HeroZoom{
  from{opacity:0;transform:scale(.9);}
  to{opacity:1;transform:none;}
}

@keyframes page3Line{
  from{width:0;}
  to{width:120px;}
}

/* Responsive */

@media(max-width:768px){

  .page-3-hero2-inner h1{
    padding-top: 40px;
    font-size:34px;
  }

  .page-3-hero2-buttons{
    flex-direction:column;
  }

}


/* ===================================================
                  section-2
==================================================== */

.page-3-why2{
  position:relative;
  padding:110px 20px;
  background:linear-gradient(180deg,#f8fdff,#ffffff);
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* Golden Accent */

.page-3-why2-accent{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:6px;
  background:#ffca39;
}

/* Layout */

.page-3-why2-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

/* Left */

.page-3-why2-left h2{
  font-size:36px;
  color:#0f172a;
}

.page-3-why2-left p{
  margin:18px 0 35px;
  color:#475569;
}

/* Cards */

.page-3-why2-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:22px;
}

.page-3-why2-card{
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px);
  padding:26px;
  border-radius:16px;
  border-left:4px solid #4bd0f8;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
  transition:.35s;
}

.page-3-why2-card:hover{
  transform:translateY(-6px);
  border-left-color:#ffca39;
}

.page-3-why2-card h4{
  color:#0f172a;
}

.page-3-why2-card span{
  color:#64748b;
  font-size:14px;
}

/* Footer */

.page-3-why2-footer strong{
  color:#4bd0f8;
}

/* Right */

.page-3-why2-right img{
  width:100%;
  border-radius:22px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
  
}

/* Floating Image Effect */

/* Scroll Reveal Image */

/* FLOAT IMAGE BASE */

.page-3-float-image{
  position:relative;
  will-change:transform;
}

.page-3-float-image img{
  width:100%;
  border-radius:22px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
  transition:transform .15s linear;
}

/* Mobile fix */
@media(max-width:768px){
  .page-3-float-image.page-3-active img{
    transform:none;
  }
}

/* Responsive */

@media(max-width:900px){

  .page-3-why2-wrap{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px) {

  .page-3-float-image img {
    transform: none !important;
    transition: none !important;
  }

}


/* ===================================================
                  section-3
==================================================== */


.page-3-process{
  padding:60px 20px;
  background:#ecfdfb;
  font-family:'Poppins',sans-serif;
}

/* Container */

.page-3-process-wrap{
  max-width:1200px;
  margin:auto;
}

/* Heading */

.page-3-process-head{
  max-width:1200px;
  
}

.page-3-process-head h2{
  font-size:36px;
  text-align: center;
  color:#0f172a;
}

.page-3-process-head p{
  margin-top:12px;
  color:#475569;
  text-align: center;
}

/* Image */

.page-3-process-image{
  margin:50px 0;
  text-align:center;
}

.page-3-process-image img{
  max-width:100%;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

/* Steps Grid */

.page-3-process-steps{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:28px;
}

/* Top row (3 cards) */
.page-3-process-step:nth-child(1),
.page-3-process-step:nth-child(2),
.page-3-process-step:nth-child(3){
  grid-column:span 2;
}

/* Bottom row (2 cards, centered & equal) */
.page-3-process-step:nth-child(4){
  grid-column:2 / span 2;
}

.page-3-process-step:nth-child(5){
  grid-column:4 / span 2;
}

/* Responsive */
@media(max-width:900px){
  .page-3-process-steps{
    grid-template-columns:1fr;
  }

  .page-3-process-step{
    grid-column:auto !important;
  }
}

/* Step Card */

.page-3-process-step{
  background:#fff;
  padding:32px;
  border-radius:20px;
  position:relative;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
  opacity:0;
  transform:translateY(40px);
  transition:.5s;
}

/* Gradient Edge */

.page-3-process-step::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:linear-gradient(#4bd0f8,#ffca39);
}

/* Shimmer Layer */

.page-3-process-step::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,#ffca39, transparent);
  transform:translateX(-100%);
}

/* Hover Effects */

.page-3-process-step:hover{
  transform:translateY(-10px) scale(1.05);
  box-shadow:0 30px 70px rgba(0,0,0,.15);
}

.page-3-process-step:hover::after{
  transform:translateX(100%);
  transition:1s;
}

.page-3-process-step.page-3-active{
  opacity:1;
  transform:none;
}

.page-3-process-step h4{
  color:#0f172a;
  margin-bottom:12px;
}

.page-3-process-step ul{
  padding-left:18px;
  color:#475569;
  font-size:14px;
}

/* Scroll Animation */

.page-3-process-step.page-3-active{
  opacity:1;
  transform:none;
}


/* ===== Image Advanced Effect ===== */

.page-3-tilt-wrap{
  perspective:1000px;
  opacity:0;
  transform:translateY(80px) scale(.95);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

.page-3-tilt-wrap.page-3-active{
  opacity:1;
  transform:none;
}

.page-3-tilt-img{
  transition:.4s ease;
  box-shadow:0 30px 80px rgba(0,0,0,.2);
}

/* Floating */

.page-3-tilt-wrap.page-3-active .page-3-tilt-img{
  animation:page3FloatImage 6s ease-in-out infinite;
}

@keyframes page3FloatImage{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}

/* Responsive */

@media(max-width:768px){

  .page-3-process-head h2{
    font-size:28px;
  }

}

/* ===================================================
                  section-4
==================================================== */

.page-3-docs{
  padding:60px 20px;
  background:#f6f8fb;
  font-family:'Poppins',sans-serif;
}

.page-3-docs-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

/* Left Heading */

.page-3-docs-left h2{
  font-size:36px;
  color:#0f172a;
}

.page-3-docs-left p{
  margin:10px 0 35px;
  color:#475569;
}

/* List Wrapper */

.page-3-docs-list{
  display:grid;
  gap:18px;
}

/* Document Card */

.page-3-doc-item{
  position:relative;
  display:flex;
  gap:18px;
  align-items:center;
  padding:22px 26px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff,#f9fbff);
  box-shadow:
    0 15px 35px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
  opacity:0;
  transform:translateX(-40px) scale(.96);
  transition:
    transform .5s cubic-bezier(.22,.61,.36,1),
    box-shadow .5s;
}

/* Animated Gradient Rail */

.page-3-doc-item::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:linear-gradient(#4bd0f8,#ffca39);
}

/* Glow Overlay */

.page-3-doc-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,#4bd0f8,transparent);
  transform:translateX(-100%);
}

/* Icon Bubble */

.page-3-doc-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:20px;
  background:#4bd0f820;
  color:#4bd0f8;
  flex-shrink:0;
  transition:.4s;
}

/* Hover Effects */

.page-3-doc-item:hover{
  transform:translateX(0) translateY(-8px) scale(1.02);
  box-shadow:0 30px 70px rgba(0,0,0,.16);
}

.page-3-doc-item:hover::after{
  transform:translateX(100%);
  transition:1s;
}

.page-3-doc-item:hover .page-3-doc-icon{
  background:#ffca39;
  color:#0f172a;
}

/* Text */

.page-3-doc-item strong{
  color:#0f172a;
}

/* Scroll Active */

.page-3-doc-item.page-3-active{
  opacity:1;
  transform:none;
}

/* Image */

.page-3-docs-right{
  position:relative;
  perspective:1000px;
}

/* Main Image */

.page-3-docs-right img{
  width:80%;
  border-radius:26px;
  position:relative;
  z-index:2;
  box-shadow:
    0 35px 90px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .5s ease, box-shadow .5s ease;
}

/* Gradient Glow Frame */

.page-3-docs-right::before{
  content:'';
  position:absolute;
  inset:20px;
  border-radius:28px;
  background:linear-gradient(120deg,#4bd0f860,#ffca3960);
  filter:blur(40px);
  opacity:.6;
  z-index:1;
}

/* Glass Reflection */

.page-3-docs-right::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:26px;
  background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 40%);
  opacity:.15;
  pointer-events:none;
  z-index:3;
}

/* Hover Tilt */

.page-3-docs-right:hover img{
  transform:rotateY(-6deg) rotateX(3deg) scale(1.03);
  box-shadow:0 50px 120px rgba(0,0,0,.25);
}

/* Floating Animation (when active from scroll) */

.page-3-docs-float.page-3-active img{
  animation:page3DocsFloat 6s ease-in-out infinite;
}

@keyframes page3DocsFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

/* Mobile Fix */

@media(max-width:768px){
  .page-3-docs-right img{
    width:100%;
  }

  .page-3-docs-right:hover img{
    transform:none;
  }
}

/* Float Image */

.page-3-docs-float{
  opacity:0;
  transform:translateY(60px);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

.page-3-docs-float.page-3-active{
  opacity:1;
  transform:none;
}

/* Active list animation */

.page-3-doc-item.page-3-active{
  opacity:1;
  transform:none;
}

/* Responsive */

@media(max-width:900px){

  .page-3-docs-wrap{
    grid-template-columns:1fr;
  }

}

/* =====================================================
                    section-5
===================================================== */

.page-3-pricing{
  padding:60px 20px;
  background:linear-gradient(180deg,#ffffff,#f2f9ff);
  font-family:'Poppins',sans-serif;
}

.page-3-pricing-wrap{
  max-width:1000px;
  margin:auto;
}

/* Heading */

.page-3-pricing h2{
  font-size:36px;
  color:#0f172a;
  margin-bottom:40px;
}

/* Table */

.page-3-price-table{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.1);
}

.page-3-price-row{
  display:grid;
  grid-template-columns:1.2fr .8fr 2fr;
  padding:18px 25px;
  border-bottom:1px solid #eef2f7;
  align-items:center;
  transition:.35s;
}

.page-3-price-row:hover{
  background:#f8fdff;
}

.page-3-price-head{
  background:#f1f9ff;
  font-weight:600;
  color:#0f172a;
}

.page-3-price-row div{
  color:#334155;
}

.page-3-price-row div:nth-child(2){
  color:#4bd0f8;
  font-weight:600;
}

.page-3-price-row.highlight{
  background:#fffbea;
}

/* Notes */

.page-3-price-note{
  margin:25px 0;
  background:#f1f1f1;
  padding:18px 22px;
  border-radius:12px;
}

.page-3-price-note p{
  margin:6px 0;
  color:#334155;
}

/* CTA */

.page-3-price-btn{
  display:inline-block;
  margin-top:15px;
  background:#0f172a;
  color:#fff;
  padding:14px 32px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.page-3-price-btn:hover{
  transform:translateY(-3px);
  color: #ffffff;
}

/* Responsive Table → Cards */


/* Pricing Background Effects */

.page-3-pricing{
  position:relative;
  overflow:hidden;
}

.page-3-pricing::before{
  content:'';
  position:absolute;
  width:280px;
  height:280px;
  background:#4bd0f840;
  border-radius:50%;
  top:-80px;
  left:-80px;
  filter:blur(80px);
}

.page-3-pricing::after{
  content:'';
  position:absolute;
  width:280px;
  height:280px;
  background:#ffca3940;
  border-radius:50%;
  bottom:-80px;
  right:-80px;
  filter:blur(80px);
}

/* Glass Panel */

.page-3-price-table{
  backdrop-filter:blur(10px);
  transform:translateY(40px);
  opacity:0;
  transition:1s cubic-bezier(.22,.61,.36,1);
}

.page-3-price-table.page-3-active{
  transform:none;
  opacity:1;
}

/* Row Reveal */

.page-3-price-row{
  opacity:0;
  transform:translateX(-30px);
}

.page-3-price-row.page-3-active{
  opacity:1;
  transform:none;
}

/* Highlight Plan */

.page-3-price-row.highlight{
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}

/* .page-3-price-row.highlight::after{
  content:'POPULAR';
  position:absolute;
  top:10px;
  right:12px;
  background:#ffca39;
  padding:4px 10px;
  border-radius:6px;
  font-size:10px;
  font-weight:600;
} */

/* Hover */

.page-3-price-row:hover{
  transform:translateY(-4px) scale(1.01);
}

/* CTA Pulse */

.page-3-price-btn{
  animation:page3Pulse 2.5s infinite;
}

@keyframes page3Pulse{
  0%,100%{box-shadow:0 0 0 0 #4bd0f8;}
  50%{box-shadow:0 0 0 18px transparent;}
}

/* =========================
   LARGE LAPTOP
========================= */

@media (max-width:1200px){

.page-3-pricing h2{
  font-size:32px;
}

.page-3-price-row{
  grid-template-columns:1.2fr .9fr 1.9fr;
  padding:16px 22px;
}

}


/* =========================
   TABLET VIEW
========================= */

@media (max-width:992px){

.page-3-pricing{
  padding:50px 20px;
}

.page-3-pricing h2{
  font-size:30px;
}

.page-3-price-row{
  grid-template-columns:1.2fr 1fr 1.8fr;
  font-size:15px;
}

.page-3-price-btn{
  padding:12px 26px;
}

}


/* =========================
   SMALL TABLETS
========================= */

@media (max-width:768px){

.page-3-price-head{
  display:none;
}

.page-3-price-row{
  grid-template-columns:1fr;
  gap:10px;
  padding:18px;
  border-radius:12px;
  margin-bottom:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.page-3-price-row div{
  display:flex;
  justify-content:space-between;
  font-size:14px;
}

.page-3-price-row div::before{
  content:attr(data-label);
  font-weight:600;
  color:#0f172a;
}

}


/* =========================
   MOBILE VIEW
========================= */

@media (max-width:600px){

.page-3-pricing{
  padding:45px 16px;
}

.page-3-pricing h2{
  font-size:26px;
}

.page-3-price-table{
  box-shadow:none;
  background:transparent;
}

.page-3-price-row{
  background:#ffffff;
  padding:18px;
}

.page-3-price-row div{
  font-size:14px;
}

.page-3-price-btn{
  width:100%;
  text-align:center;
}

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width:400px){

.page-3-pricing h2{
  font-size:22px;
}

.page-3-price-row{
  padding:16px;
}

.page-3-price-row div{
  font-size:13px;
}

.page-3-price-btn{
  font-size:14px;
  padding:12px 20px;
}

}


/* =====================================================
                  section-6
===================================================== */

.page-3-trust{
  padding:60px 20px;
  background:linear-gradient(180deg,#fffdf7,#ffffff);
  font-family:'Poppins',sans-serif;
  position:relative;
}

.page-3-trust-wrap{
  max-width:1100px;
  margin:auto;
}

/* Heading */

.page-3-trust h2{
  font-size:36px;
  color:#0f172a;
  margin-bottom:40px;
}

/* Image */

.page-3-trust-image img{
  width:100%;
  border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.15);
}

/* Floating image */

.page-3-trust-float{
  opacity:0;
  transform:translateY(60px);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

.page-3-trust-float.page-3-active{
  opacity:1;
  transform:none;
}

/* Stats */
/* ===== STATS GRID ===== */

.page-3-trust-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  margin:60px 0;
}

/* Glass Stat Card */

.page-3-stat{
  position:relative;
  text-align:center;
  padding:36px 32px;
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  box-shadow:
    0 20px 50px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:.45s cubic-bezier(.22,.61,.36,1);
  opacity:0;
  transform:translateY(40px) scale(.97);
  overflow:hidden;
}

/* Glow Ring */

.page-3-stat::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:22px;
  background:linear-gradient(120deg,#4bd0f850,#ffca3950,transparent 60%);
  opacity:0;
  transition:.5s;
}

/* Hover */

.page-3-stat:hover{
  transform:translateY(-12px) scale(1.03);
  box-shadow:0 40px 90px rgba(0,0,0,.18);
}

.page-3-stat:hover::before{
  opacity:1;
}

/* Active */

.page-3-stat.page-3-active{
  opacity:1;
  transform:none;
}

/* Numbers */

.page-3-stat span{
  font-size:46px;
  color:#4bd0f8;
  font-weight:800;
}

.page-3-stat p{
  margin:10px 0 4px;
  font-weight:600;
  color:#0f172a;
}

.page-3-stat small{
  color:#64748b;
}

/* ===== TABLE ===== */

.page-3-trust-table{
  background:linear-gradient(180deg,#ffffff,#f9fbff);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.12);
  margin-top:40px;
}

/* Row */

.page-3-trust-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  padding:18px 26px;
  border-bottom:1px solid #eef2f7;
  transition:.4s cubic-bezier(.22,.61,.36,1);
  opacity:0;
  transform:translateX(-40px);
  overflow:hidden;
}

/* Shimmer */

/* Left Accent Bar */

.page-3-trust-row::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:#4bd0f8;
  opacity:0;
  transition:.4s;
}

/* Soft Glow Layer */

.page-3-trust-row span{
  position:relative;
  z-index:2;
}

/* Hover Effects */

.page-3-trust-row:hover{
  background:#f6fcff;
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 12px 35px rgba(42,197,245,.15);
}

/* Accent Reveal */

.page-3-trust-row:hover::before{
  opacity:1;
}

/* Golden Highlight for second column */

.page-3-trust-row:hover div:last-child{
  color:#ffca39;
  transition:.3s;
}

.page-3-trust-row.page-3-active{
  animation:trustPop .6s ease;
}

@keyframes trustPop{
  0%{transform:scale(.96);}
  100%{transform:scale(1);}
}


/* Header */

.page-3-trust-row.head{
  background:#f1f9ff;
  font-weight:700;
  color:#0f172a;
}

/* Active */

.page-3-trust-row.page-3-active{
  opacity:1;
  transform:none;
}

/* Hover */

.page-3-trust-row:hover{
  background:#f8fdff;
  transform:translateX(0) scale(1.01);
}


/* ===== MOBILE VIEW (Table → Cards) ===== */

@media(max-width:768px){

  .page-3-trust-stats{
    grid-template-columns:1fr;
  }

  .page-3-trust-row{
    grid-template-columns:1fr;
    gap:8px;
    border-radius:14px;
    margin:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }

  .page-3-trust-row.head{
    display:none;
  }

  .page-3-trust-row div:first-child{
    font-weight:700;
    color:#0f172a;
  }

  .page-3-trust-row div:last-child{
    color:#475569;
  }

}

/* Responsive */

@media(max-width:768px){

  .page-3-trust-stats{
    grid-template-columns:1fr;
  }

  .page-3-trust-row{
    grid-template-columns:1fr;
    gap:8px;
  }

}


/* ===================================================
                  section-7
==================================================== */

.page-3-deliver{
  padding:60px 20px;
  background:linear-gradient(180deg,#f3f9ff,#ffffff);
  font-family:'Poppins',sans-serif;
  position:relative;
  overflow:hidden;
}

.page-3-deliver-wrap{
  max-width:1100px;
  margin:auto;
  text-align:center;
}

/* Heading */

.page-3-deliver h2{
  font-size:36px;
  color:#0f172a;
  margin-bottom:40px;
}

/* Image */

.page-3-deliver-image{
  display:inline-block;
  position:relative;
  margin-bottom:40px;
  opacity:0;
  transform:translateY(60px) scale(.95);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

.page-3-deliver-image.page-3-active{
  opacity:1;
  transform:none;
}

.page-3-deliver-image img{
  width:720px;
  border-radius:16px;
  box-shadow:0 40px 100px rgba(0,0,0,.2);
  animation:page3CertFloat 6s ease-in-out infinite;
}

/* Glow frame */

.page-3-deliver-image::before{
  content:'';
  position:absolute;
  inset:-20px;
  background:linear-gradient(120deg,#4bd0f860,#ffca3960);
  filter:blur(50px);
  z-index:-1;
}

/* Float */

@keyframes page3CertFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

/* Intro */

.page-3-deliver-intro{
  color:#475569;
  margin-bottom:40px;
}

/* Cards */

.page-3-deliver-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.page-3-deliver-card{
  background:#fff;
  padding:28px;
  border-radius:18px;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(30px);
  transition:.5s cubic-bezier(.22,.61,.36,1);
}

/* Gradient Edge */

.page-3-deliver-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:linear-gradient(#4bd0f8,#ffca39);
}

/* Shimmer */

.page-3-deliver-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,#4bd0f820,transparent);
  transform:translateX(-100%);
}

/* Hover */

.page-3-deliver-card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 30px 70px rgba(0,0,0,.16);
}

.page-3-deliver-card:hover::after{
  transform:translateX(100%);
  transition:1s;
}

/* Active */

.page-3-deliver-card.page-3-active{
  opacity:1;
  transform:none;
}

.page-3-deliver-card h4{
  color:#0f172a;
}

.page-3-deliver-card small{
  color:#64748b;
}

/* Footer bar */

.page-3-deliver-footer{
  margin-top:50px;
  padding:18px 28px;
  background:linear-gradient(120deg,#4bd0f890,#ffca3990);
  color:#0f172a;
  border-radius:50px;
  display:inline-block;
  font-weight:600;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* Responsive */

@media(max-width:900px){

  .page-3-deliver-grid{
    grid-template-columns:1fr;
  }

  .page-3-deliver-image img{
    width:100%;
  }

}


/* ===================================================
                  section-8
==================================================== */

.gms-testimonials{
  padding:60px 20px;
  background:linear-gradient(180deg,#f6fdff,#fff);
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

.gms-test-wrap{
  max-width:1100px;
  margin:auto;
}

/* HEAD */

.gms-test-head{
  max-width:650px;
  margin-bottom:50px;
}

.gms-test-head h2{
  font-size:38px;
}

.gms-test-head span{
  color:#ffca39;
}

.gms-test-head p{
  margin-top:10px;
  color:#555;
}

/* FLOW */

.gms-test-flow{
  display:flex;
  gap:30px;
  animation:testFlow 20s linear infinite;
}

@keyframes testFlow{
  from{transform:translateX(50%);}
  to{transform:translateX(-35%);}
}

/* CARD */

.gms-test-card{
  min-width:320px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  padding:30px;
  border-radius:18px;
  box-shadow:0 15px 45px rgba(0,0,0,.1);
  position:relative;
}

.gms-test-card:hover{
  background:linear-gradient(135deg,#4bd0f890,#ffca3990);
  color: #000;
}
/* quote */

.gms-test-card::before{
  content:'“';
  position:absolute;
  top:-20px;
  left:20px;
  font-size:80px;
  color:#4bd0f833;
}

.gms-test-card p{
  line-height:1.7;
  color:#333;
}
.gms-test-card:hover p{
  color: #000;
}

.gms-test-card span{
  margin-top:10px;
  display:block;
  font-weight:600;
}

/* RATINGS */

.gms-test-ratings{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin:60px 0 30px;
}

.gms-rating-box{
  text-align:center;
  padding:20px;
  border-radius:16px;
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  background:linear-gradient(135deg,#4bd0f890,#ffca3990);
  color: #000;
  transition:.4s;
}

.gms-rating-box strong{
  font-size:36px;
  color:#000;
}

.gms-rating-box.highlight{
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#000;
  text-decoration: none;
}

.gms-rating-box.highlight strong{
  color:#000;
}

.gms-rating-box:hover{
  transform:translateY(-6px);
}

/* FOOTER */

.gms-test-footer{
  text-align:center;
  margin-top:30px;
  font-weight:500;
}

/* RESPONSIVE */

@media(max-width:900px){

  .gms-test-flow{
    animation:none;
    flex-direction:column;
  }

  .gms-test-ratings{
    grid-template-columns:1fr;
  }

  .gms-test-head{
    text-align:center;
    margin:auto auto 40px;
  }

}


/* ===================================================
                  section-9
==================================================== */

.gms-trust{
  padding:60px 20px;
  background:linear-gradient(160deg,#f7fdff,#fff);
  font-family:'Poppins',sans-serif;
}

.gms-trust-wrap{
  max-width:1200px;
  margin:auto;
}

/* HEAD */

.gms-trust h2{
  font-size:38px;
  margin-bottom:40px;
}

/* MAIN */

.gms-trust-main{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}

/* IMAGE */

.gms-trust-image{
  position:relative;
}

.gms-trust-image::before{
  content:'';
  position:absolute;
  inset:-12px;
  border-radius:26px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
}

.gms-trust-image img{
  width:100%;
  border-radius:22px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
  transition:.6s;
}

.gms-trust-image:hover img{
  transform:scale(1.04);
}

/* LIST */

.gms-trust-list{
  list-style:none;
  padding:0;
  margin:0 0 30px;
}

.gms-trust-list li{
  padding:12px 18px;
  margin-bottom:12px;
  background:#fff;
  color: #000;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  position:relative;
  padding-left:42px;
  transition:.4s;
}

/* check icon */

.gms-trust-list li::before{
  content:'✔';
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:#4bd0f8;
  font-weight:700;
}

/* .gms-trust-list li:hover{
  transform:translateX(8px);
  box-shadow:0 15px 35px rgba(42,197,245,.15);
  
} */
/* prepare shine layer */

.gms-trust-list li{
  overflow:hidden;
}

/* shine overlay */

.gms-trust-list li::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,#03163B,transparent);
  transform:translateX(-100%);
  transition:.6s;
}

/* activate on hover */

.gms-trust-list li:hover::after{
  transform:translateX(100%);
}


/* BUTTONS */

.gms-trust-actions{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.gms-trust-btn{
  padding:12px 26px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
}

/* primary */

.gms-trust-btn.primary{
  background:#4bd0f890;
  color:#000;
}

.gms-trust-btn.primary:hover{
  background:#ffca3990;
}

/* outline */

.gms-trust-btn.outline{
  border:2px solid #4bd0f8;
  color:#4bd0f8;
}

.gms-trust-btn.outline:hover{
  background:#4bd0f890;
  color:#000;
}

/* ghost */

.gms-trust-btn.ghost{
  background:#111;
  color:#fff;
}

.gms-trust-btn.ghost:hover{
  background:#333;
}

/* GUARANTEE BAR */

.gms-trust-guarantee{
  margin-top:40px;
  padding:16px 20px;
  border-radius:10px;
  background:linear-gradient(90deg,#4bd0f899,#ffca3999);
  color:#000;
  font-weight:500;
  position:relative;
  overflow:hidden;
}

/* sliding light */

.gms-trust-guarantee::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,#ffffff,transparent);
  transform:translateX(-100%);
  animation:trustSweep 7s linear infinite;
}

@keyframes trustSweep{
  to{transform:translateX(100%);}
}

/* RESPONSIVE */

@media(max-width:900px){

  .gms-trust-main{
    grid-template-columns:1fr;
  }

  .gms-trust h2{
    text-align:center;
  }

  .gms-trust-actions{
    justify-content:center;
  }

}


/* ===================================================
                  section-10
==================================================== */

.gms-faq{
  padding:60px 20px;
  background:linear-gradient(180deg,#f6fdff,#fff);
  font-family:'Poppins',sans-serif;
}

.gms-faq-wrap{
  max-width:1200px;
  margin:auto;
}

.gms-faq h2{
  font-size:38px;
  margin-bottom:50px;
}

.gms-faq h2 span{
  color:#4bd0f8;
}

.gms-faq-main{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}

/* IMAGE */

.gms-faq-image{
  position:relative;
}

.gms-faq-image::before{
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:24px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  z-index:-1;
}

.gms-faq-image img{
  width:100%;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
}

/* FAQ ITEMS */

.gms-faq-item{
  margin-bottom:16px;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.07);
}

.gms-faq-q{
  width:100%;
  background:#fff;
  border:none;
  padding:18px 20px;
  text-align:left;
  font-weight:600;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:.3s;
}

.gms-faq-q span{
  font-size:22px;
  color:#4bd0f8;
  transition:.3s;
}

.gms-faq-a{
  max-height:0;
  overflow:hidden;
  background:#f9fdff;
  padding:0 20px;
  color:#555;
  transition:max-height .4s ease,padding .4s ease;
}

/* ACTIVE */

.gms-faq-item.active .gms-faq-a{
  max-height:200px;
  padding:15px 20px 20px;
}

.gms-faq-item.active .gms-faq-q span{
  transform:rotate(45deg);
  color:#ffca39;
}

/* HOVER */

.gms-faq-q:hover{
  background:linear-gradient(90deg,#4bd0f890,#ffca3990);
  color: #000;
}

/* RESPONSIVE */

@media(max-width:900px){
  .gms-faq-main{
    grid-template-columns:1fr;
  }

  .gms-faq h2{
    text-align:center;
  }
}

/* ===================================================
                  section-11
==================================================== */

.gms-related{
  padding:60px 20px 100px;
  background:
    radial-gradient(circle at top,#4bd0f820,transparent 60%),
    radial-gradient(circle at bottom,#ffca3920,transparent 60%),
    #fff;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

.gms-related-wrap{
  max-width:1100px;
  margin:auto;
  text-align:center;
}

/* TITLE */

.gms-related h2{
  font-size:38px;
  margin-bottom:60px;
}

/* VISUAL */

.gms-related-visual{
  position:relative;
  display:inline-block;
}

.gms-related-visual img{
  width:100%;
  max-width:720px;
  border-radius:26px;
  box-shadow:0 35px 90px rgba(0,0,0,.18);
}

/* PILLS */

.gms-pill{
  position:absolute;
  padding:8px 18px;
  background:#fff;
  border-radius:30px;
  font-size:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  animation:floatPill 6s ease-in-out infinite;
  border:1px solid #4bd0f8;
}

/* positions */

.p1{top:-20px;left:20%;}
.p2{top:20%;right:-30px;animation-delay:1s;}
.p3{bottom:15%;left:-40px;animation-delay:2s;}
.p4{bottom:-20px;right:25%;animation-delay:3s;}
.p5{top:45%;left:-30px;animation-delay:4s;}

@keyframes floatPill{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

/* LINKS */

.gms-related-links{
  margin-top:60px;
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
}

.gms-related-links a{
  position:relative;
  color:#000000;
  font-weight:600;
  text-decoration:none;
  padding-bottom:6px;
}

.gms-related-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:#ffca39;
  transition:.3s;
}

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

/* RESPONSIVE */

@media(max-width:900px){

  .gms-pill{
    display:none;
  }

  .gms-related h2{
    font-size:32px;
  }

}

@media(max-width:500px){

  .gms-related-links{
    gap:18px;
  }

}


/* ====================================================
                Page-4 styling
===================================================== */

/* =======================================================
   PAGE-4 | SECTION-1 | HERO
======================================================= */

.page-4-hero {
    position: relative;
    min-height: 50vh;
    background: url("../img/page-4/page-4-bg-1.jfif") center/cover no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 25%;
    overflow: hidden;
}

/* Overlay with brand gradient */
.page-4-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(42, 197, 245, 0.35),
        rgba(254, 189, 16, 0.35)
    );
    z-index: 1;
}

/* Content */
.page-4-hero-content {
    position: relative;
    align-items: center;
    z-index: 2;
    max-width: 1100px;
    color: #000;
}

/* Heading */
.page-4-hero-content h1 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.25;
    margin-bottom: 20px;
    color: #000;
    font-weight: 700;
}

/* Paragraph */
.page-4-hero-content p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 35px;
    max-width: 1100px;
}

/* Buttons wrap */
.page-4-hero-buttons {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/* Base button */
.page-4-btn {
    padding: 14px 28px;
    font-size: 16px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Primary button */
.page-4-btn-primary {
    background: #0f172a;
    color: #fff;
}

/* .page-4-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #4bd0f8, #ffca39);
    opacity: 0;
    transition: 0.35s ease;
} */

.page-4-btn-primary:hover::after {
    opacity: 1;
}

.page-4-btn-primary:hover {
    background: #fff;
    color: #000;
}

/* Secondary button */
.page-4-btn-secondary {
    background: #fff;
    border: 2px solid #fff;
    color: #0f172a;
}

.page-4-btn-secondary:hover {
    background: #0f172a;
    color: #fff;
}

/* =======================================================
   PAGE-4 | REVEAL ANIMATION
======================================================= */

.page-4-reveal {
    opacity: 0;
    transform: translateY(50px);
    animation: page4FadeUp 1s ease forwards;
}

@keyframes page4FadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =======================================================
   PAGE-4 | RESPONSIVE
======================================================= */

@media (max-width: 991px) {
    .page-4-hero {
        min-height: 65vh;
        padding: 60px 5%;
    }

    .page-4-hero-content {
        text-align: center;
        margin: auto;
    }

    .page-4-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .page-4-hero-buttons {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .page-4-hero {
        min-height: 75vh;
        padding: 70px 20px;
    }

    .page-4-btn {
        width: 100%;
        text-align: center;
    }
}

/* =======================================================
   PAGE-4 | SECTION-2 | SUMMARY
======================================================= */

.page-4-summary-section {
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    background: linear-gradient(
        180deg,
        #f8fcff,
        #ffffff
    );
}

/* Summary Card */
.page-4-summary-card {
    position: relative;
    max-width: 1050px;
    width: 100%;
    padding: 55px 60px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Accent Left Strip */
.page-4-summary-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(
        180deg,
        #4bd0f8,
        #ffca39
    );
}

/* Heading */
.page-4-summary-card h2 {
    margin-top: 0;
    font-size: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: #0f172a;
}

/* Icon */
.page-4-summary-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    box-shadow: 0 0 0 4px rgba(42, 197, 245, 0.2);
    animation: page4Pulse 2.5s infinite;
}

@keyframes page4Pulse {
    0% { box-shadow: 0 0 0 0 rgba(42, 197, 245, 0.35); }
    70% { box-shadow: 0 0 0 10px rgba(42, 197, 245, 0); }
    100% { box-shadow: 0 0 0 0 rgba(42, 197, 245, 0); }
}

/* Paragraphs */
.page-4-summary-card p {
    font-size: 17px;
    line-height: 1.75;
    color: #1e293b;
    margin: 14px 0;
}

/* Highlight strong text */
.page-4-summary-card strong {
    color: #0f172a;
    position: relative;
}

.page-4-summary-card strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 6px;
    background: rgba(254, 189, 16, 0.4);
    z-index: -1;
}

/* =======================================================
   PAGE-4 | SECTION-2 | REVEAL ANIMATION
======================================================= */

.page-4-reveal-summary {
    opacity: 0;
    transform: translateY(60px);
    animation: page4SummaryReveal 1s ease forwards;
}

@keyframes page4SummaryReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =======================================================
   PAGE-4 | RESPONSIVE
======================================================= */

@media (max-width: 768px) {
    .page-4-summary-card {
        padding: 40px 30px;
    }

    .page-4-summary-card h2 {
        font-size: 24px;
        flex-wrap: wrap;
    }

    .page-4-summary-card p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .page-4-summary-section {
        padding: 70px 16px;
    }

    .page-4-summary-card {
        padding: 34px 22px;
        border-radius: 14px;
    }
}

/* =======================================================
   PAGE-4 | SECTION-3 | NEXT-LEVEL ENHANCEMENT
======================================================= */

.page-4-trademark-section {
    position: relative;
    padding: 60px 20px;
    background: linear-gradient(180deg, #ffffff, #f7fcff);
    overflow: hidden;
}

/* Ambient background blobs */
.page-4-bg-shapes::before,
.page-4-bg-shapes::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
    z-index: 0;
    animation: page4FloatBlob 12s ease-in-out infinite alternate;
}

.page-4-bg-shapes::before {
    background: #4bd0f8;
    top: -120px;
    left: -120px;
}

.page-4-bg-shapes::after {
    background: #ffca39;
    bottom: -140px;
    right: -120px;
    animation-delay: 4s;
}

@keyframes page4FloatBlob {
    from { transform: translateY(0); }
    to { transform: translateY(-60px); }
}

.page-4-container {
    position: relative;
    z-index: 2;
    max-width: 1150px;
    margin: auto;
    text-align: center;
}

/* Title */
.page-4-title {
    font-size: clamp(34px, 4vw, 46px);
    color: #0f172a;
    margin-bottom: 20px;
}

.page-4-title::after {
    content: "";
    width: 90px;
    height: 5px;
    margin: 18px auto 0;
    display: block;
    border-radius: 10px;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
}

/* Subtitle */
.page-4-subtitle {
    font-size: 18px;
    max-width: 760px;
    margin: 0 auto 80px;
    line-height: 1.75;
    color: #334155;
}

/* Grid */
.page-4-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Card */
.page-4-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    border-radius: 22px;
    padding: 36px 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    transition: all 0.45s ease;
    position: relative;
}

/* Glow halo */
.page-4-card::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: linear-gradient(135deg, #4bd0f899, #ffca3999);
    opacity: 0;
    z-index: -1;
    transition: 0.4s ease;
}

.page-4-card:hover::after {
    opacity: 0.7;
}

.page-4-card:hover {
    transform: translateY(-12px) scale(1.02);
}

/* Wide card */
.page-4-card-wide {
    grid-column: span 2;
}

/* Icon */
.page-4-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4bd0f899, #ffca3999);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.4s ease;
}

.page-4-card:hover .page-4-icon-circle {
    transform: rotate(10deg) scale(1.15);
}

/* Text */
.page-4-card h3 {
    font-size: 22px;
    font-weight: 500;
    color: #0f172a;
    text-align: left;
}

/* Footer */
.page-4-footer-text {
    margin-top: 70px;
    font-size: 18px;
    color: #334155;
}

.page-4-footer-text span {
    background: linear-gradient(90deg, #ffca39, #4bd0f8);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 700;
}



/* =======================================================
   PAGE-4 | SCROLL REVEAL BASE
======================================================= */

.page-4-reveal,
.page-4-card-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.9s cubic-bezier(.2,.7,.2,1);
}

/* When visible */
.page-4-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Card specific (slight scale) */
.page-4-card-reveal {
    transform: translateY(50px) scale(0.95);
}

.page-4-card-reveal.page-4-visible {
    transform: translateY(0) scale(1);
}

/* Stagger delays (cards only) */
.page-4-card-reveal:nth-child(1) { transition-delay: 0.1s; }
.page-4-card-reveal:nth-child(2) { transition-delay: 0.2s; }
.page-4-card-reveal:nth-child(3) { transition-delay: 0.3s; }
.page-4-card-reveal:nth-child(4) { transition-delay: 0.4s; }
.page-4-card-reveal:nth-child(5) { transition-delay: 0.5s; }


@keyframes page4RevealSmooth {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes page4CardSmooth {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 900px) {
    .page-4-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-4-card-wide {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .page-4-card-grid {
        grid-template-columns: 1fr;
    }

    .page-4-card-wide {
        grid-column: span 1;
    }

    .page-4-card {
        padding: 28px 22px;
    }

    .page-4-subtitle {
        margin-bottom: 60px;
    }
}


/* =======================================================
   PAGE-4 | SECTION-4 | COMPARISON
======================================================= */

.page-4-comparison-section {
    padding: 60px 20px;
    background: linear-gradient(180deg, #f9fdff, #ffffff);
    text-align: center;
}

/* Title */
.page-4-comparison-section h2 {
    font-size: clamp(30px, 4vw, 42px);
    color: #0f172a;
    margin-bottom: 70px;
}

/* Comparison cards wrapper */
.page-4-comparison-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 20px;
}

/* Card */
.page-4-compare-card {
    background: linear-gradient(
        135deg,
        rgba(42, 197, 245, 0.12),
        rgba(254, 189, 16, 0.12)
    );
    border-radius: 22px;
    padding: 45px 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 0.45s ease;
}

/* Gradient top accent */
.page-4-compare-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    border-radius: 22px 22px 0 0;
}

.page-4-compare-card:hover {
    transform: translateY(-10px);
}

/* Image */
.page-4-compare-card img {
    max-width: 140px;
    margin-bottom: 25px;
}

/* Headings */
.page-4-compare-card h3 {
    font-size: 22px;
    margin-bottom: 14px;
    color: #0f172a;
}

/* Text */
.page-4-compare-card p {
    font-size: 16.5px;
    line-height: 1.7;
    color: #334155;
}

/* Decision box */
.page-4-decision-box {
    max-width: 1200px;
    margin: auto;
    padding: 45px 50px;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        rgba(42, 197, 245, 0.12),
        rgba(254, 189, 16, 0.12)
    );
}

.page-4-decision-box h4 {
    font-size: 22px;
    margin-bottom: 20px;
    text-align: left;
    color: #0f172a;
}

.page-4-decision-box ul {
    text-align: left;
    margin: 0;
    padding-left: 20px;
}

.page-4-decision-box li {
    font-size: 16.5px;
    line-height: 1.7;
    margin-bottom: 14px;
    color: #334155;
}

/* Rule box */
.page-4-rule-box {
    margin: 40px auto 30px;
    max-width: 720px;
    padding: 12px;
    border-radius: 18px;
    background: #0f172a;
    color: #ffffff;
}

.page-4-rule-title {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.page-4-rule-highlight {
    font-size: 18px;
    font-weight: 600;
    margin-top: 12px;
    color: #ffca39;
}

/* Note */
.page-4-note {
    margin-top: 25px;
    font-size: 16px;
    color: #475569;
}

/* =======================================================
   PAGE-4 | DIFFERENT REVEAL DIRECTIONS
======================================================= */

.page-4-reveal-left,
.page-4-reveal-right {
    opacity: 0;
    transition: all 0.9s cubic-bezier(.2,.7,.2,1);
}

.page-4-reveal-left {
    transform: translateX(-60px);
}

.page-4-reveal-right {
    transform: translateX(60px);
}

.page-4-reveal-left.page-4-visible,
.page-4-reveal-right.page-4-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 900px) {
    .page-4-comparison-cards {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .page-4-decision-box {
        padding: 38px 30px;
    }
}

@media (max-width: 600px) {
    .page-4-compare-card {
        padding: 36px 26px;
    }

    .page-4-rule-box {
        padding: 28px 22px;
    }
}

/* =======================================================
   PAGE-4 | SECTION-5 | WHO CAN APPLY
======================================================= */

.page-4-apply-section {
    position: relative;
    padding: 60px 20px;
    text-align: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(42, 197, 245, 0.25), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(254, 189, 16, 0.25), transparent 45%),
        linear-gradient(180deg, #ffffff, #f7fcff);
    overflow: hidden;
}


/* Title */
.page-4-apply-section h2 {
    font-size: clamp(30px, 4vw, 42px);
    color: #0f172a;
    margin-bottom: 20px;
}

/* Subtitle */
.page-4-apply-subtitle {
    font-size: 18px;
    color: #334155;
    margin-bottom: 70px;
}

/* Grid */
.page-4-apply-grid {
    max-width: 1000px;
    margin: 0 auto 80px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Apply box */
.page-4-apply-box {
    position: relative;
    background: #ffffff;
    padding: 26px 18px;
    border-radius: 18px;
    font-size: 16.5px;
    font-weight: 500;
    color: #0f172a;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.07);
    transition: all 0.4s ease;
    overflow: hidden;
}

/* Gradient border effect */
.page-4-apply-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: 0.4s ease;
}

.page-4-apply-box:hover::before {
    opacity: 1;
}

.page-4-apply-box:hover {
    transform: translateY(-8px) scale(1.03);
}

/* =======================================================
   SCALE-UP REVEAL (UNIQUE TO THIS SECTION)
======================================================= */

.page-4-scale-reveal {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(.2,.7,.2,1);
}

.page-4-scale-reveal.page-4-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger effect */
.page-4-scale-reveal:nth-child(1) { transition-delay: .05s; }
.page-4-scale-reveal:nth-child(2) { transition-delay: .1s; }
.page-4-scale-reveal:nth-child(3) { transition-delay: .15s; }
.page-4-scale-reveal:nth-child(4) { transition-delay: .2s; }
.page-4-scale-reveal:nth-child(5) { transition-delay: .25s; }
.page-4-scale-reveal:nth-child(6) { transition-delay: .3s; }
.page-4-scale-reveal:nth-child(7) { transition-delay: .35s; }
.page-4-scale-reveal:nth-child(8) { transition-delay: .4s; }

/* =======================================================
   IMPORTANT BOX
======================================================= */

.page-4-important-box {
    max-width: 820px;
    margin: auto;
    padding: 30px 36px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(254, 189, 16, 0.18),
        rgba(42, 197, 245, 0.18)
    );
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

/* Icon pulse */
.page-4-important-icon {
    font-size: 26px;
    animation: page4PulseWarn 2s infinite;
}

@keyframes page4PulseWarn {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.page-4-important-box p {
    font-size: 16.5px;
    color: #0f172a;
}

/* =======================================================
   PAGE-4 | SECTION-5 | FLIP CARDS
======================================================= */

.page-4-apply-grid {
    max-width: 1100px;
    margin: 0 auto 90px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    perspective: 1200px;
}

/* Flip Card Wrapper */
.page-4-flip-card {
    height: 150px;
}

/* Inner */
.page-4-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}

/* Hover & tap */
.page-4-flip-card:hover .page-4-flip-inner,
.page-4-flip-card:focus-within .page-4-flip-inner {
    transform: rotateY(180deg);
}

/* Front & Back */
.page-4-flip-front,
.page-4-flip-back {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 22px 45px rgba(0,0,0,0.08);
}

/* Front */
.page-4-flip-front {
    background: #ffffff;
    color: #0f172a;
    font-size: 16.5px;
}

/* Back */
.page-4-flip-back {
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    color: #000;
    font-size: 15px;
    transform: rotateY(180deg);
}

/* Glow ring */
.page-4-flip-front::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    opacity: 0.25;
    z-index: -1;
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 1000px) {
    .page-4-apply-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .page-4-apply-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .page-4-apply-grid {
        grid-template-columns: 1fr;
    }

    .page-4-flip-card {
        height: 140px;
    }
}


/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 1000px) {
    .page-4-apply-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .page-4-apply-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .page-4-apply-subtitle {
        margin-bottom: 50px;
    }
}

@media (max-width: 480px) {
    .page-4-apply-grid {
        grid-template-columns: 1fr;
    }

    .page-4-important-box {
        flex-direction: column;
        text-align: center;
    }
}


/* =======================================================
   PAGE-4 | SECTION-6 | SELF FILING
======================================================= */

.page-4-self-section {
    position: relative;
    padding: 60px 20px;
    background:
        radial-gradient(circle at 10% 20%, rgba(42,197,245,0.18), transparent 45%),
        radial-gradient(circle at 90% 70%, rgba(254,189,16,0.18), transparent 45%),
        linear-gradient(180deg, #ffffff, #f8fcff);
    overflow: hidden;
}

.page-4-self-wrap {
    max-width: 950px;
    margin: auto;
    background: #ffffff;
    padding: 70px 60px;
    border-radius: 26px;
    box-shadow: 0 35px 80px rgba(0,0,0,0.08);
    position: relative;
}

/* Left accent bar */
.page-4-self-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 40px;
    width: 6px;
    height: calc(100% - 80px);
    background: linear-gradient(180deg, #4bd0f8, #ffca39);
    border-radius: 10px;
}

/* Heading */
.page-4-self-wrap h2 {
    font-size: clamp(30px, 4vw, 40px);
    margin-bottom: 22px;
    color: #0f172a;
}

/* Intro */
.page-4-self-intro {
    font-size: 18px;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 22px;
}

/* Sub text */
.page-4-self-sub {
    font-size: 17px;
    margin-bottom: 30px;
    color: #475569;
}

/* =======================================================
   PAGE-4 | SECTION-6 | ENHANCED RISK LIST
======================================================= */

/* =======================================================
   PAGE-4 | SECTION-6 | PREMIUM RISK LIST
======================================================= */

.page-4-risk-list {
    position: relative;
    list-style: none;
    padding-left: 0;
    margin: 0 0 48px;
}

/* Vertical guide line */
.page-4-risk-list::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 6px;
    width: 2px;
    height: calc(100% - 12px);
    background: linear-gradient(
        180deg,
        rgba(42,197,245,0.35),
        rgba(254,189,16,0.35)
    );
    border-radius: 2px;
}

/* =======================================================
   ITEM BASE STATE
======================================================= */

.page-4-risk-item {
    position: relative;
    margin-bottom: 22px;
    padding: 18px 24px 18px 70px;

    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(6px);

    border-radius: 18px;
    font-size: 16px;
    color: #1e293b;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.04),
        inset 0 0 0 1px rgba(15,23,42,0.03);

    transition:
        transform 0.45s cubic-bezier(.22,.61,.36,1),
        box-shadow 0.45s cubic-bezier(.22,.61,.36,1),
        background 0.45s cubic-bezier(.22,.61,.36,1),
        color 0.3s ease;

    will-change: transform, box-shadow;
}

/* Timeline dot */
/* .page-4-risk-item::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    box-shadow:
        0 0 0 5px rgba(42,197,245,0.18);
} */

/* Arrow indicator */
.page-4-risk-item::after {
    content: "›";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    font-size: 20px;
    color: rgba(15,23,42,0.35);
    transition:
        transform 0.45s cubic-bezier(.22,.61,.36,1),
        color 0.3s ease;
}

/* =======================================================
   HOVER — SMOOTH & CONTROLLED
======================================================= */

.page-4-risk-item:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 50px rgba(0,0,0,0.10),
        inset 0 0 0 1px rgba(15,23,42,0.04);

    background: linear-gradient(
        135deg,
        rgba(254,189,16,0.30),
        rgba(42,197,245,0.22)
    );

    color: #0f172a;
}

.page-4-risk-item:hover::after {
    transform: translateY(-50%) translateX(6px);
    color: #0f172a;
}

/* =======================================================
   SCROLL REVEAL — CLEAN & SEPARATE FROM HOVER
======================================================= */

.page-4-risk-item {
    opacity: 0;
    transform: translateX(-24px);
}

.page-4-risk-item.page-4-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered reveal */
.page-4-risk-item:nth-child(1) { transition-delay: .08s; }
.page-4-risk-item:nth-child(2) { transition-delay: .16s; }
.page-4-risk-item:nth-child(3) { transition-delay: .24s; }
.page-4-risk-item:nth-child(4) { transition-delay: .32s; }

/* =======================================================
   MOBILE REFINEMENT
======================================================= */

@media (max-width: 768px) {
    .page-4-risk-list::before {
        left: 22px;
    }

    .page-4-risk-item {
        padding: 16px 18px 16px 60px;
        font-size: 15.5px;
    }
}



/* Bullet icon */
.page-4-risk-item::before {
    content: "⚠️";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

/* Highlight box */
.page-4-self-highlight {
    padding: 22px 26px;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(
        135deg,
        rgba(254,189,16,0.25),
        rgba(42,197,245,0.25)
    );
    color: #0f172a;
}

/* =======================================================
   REVEAL DIRECTION (NEW STYLE)
======================================================= */

.page-4-risk-item.page-4-visible {
    transform: translateX(0);
    opacity: 1;
}

.page-4-risk-item {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(.2,.7,.2,1);
}

.page-4-risk-item:nth-child(1) { transition-delay: .1s; }
.page-4-risk-item:nth-child(2) { transition-delay: .2s; }
.page-4-risk-item:nth-child(3) { transition-delay: .3s; }
.page-4-risk-item:nth-child(4) { transition-delay: .4s; }

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 768px) {
    .page-4-self-wrap {
        padding: 50px 28px;
    }

    .page-4-self-wrap::before {
        display: none;
    }

    .page-4-self-wrap h2 {
        text-align: center;
    }

    .page-4-self-intro,
    .page-4-self-sub {
        text-align: center;
    }
}

/* =======================================================
   PAGE-4 | SECTION-7 | TRADEMARK SEARCH
======================================================= */

.page-4-search-section {
    position: relative;
    padding: 60px 20px;
    background:
        radial-gradient(circle at 85% 20%, rgba(42,197,245,0.18), transparent 45%),
        radial-gradient(circle at 15% 80%, rgba(254,189,16,0.18), transparent 45%),
        linear-gradient(180deg, #ffffff, #f9fdff);
    overflow: hidden;
}

/* Wrapper */
.page-4-search-wrap {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

/* =======================================================
   CONTENT
======================================================= */

.page-4-search-content h2 {
    font-size: clamp(30px, 4vw, 40px);
    line-height: 1.3;
    color: #0f172a;
    margin-bottom: 22px;
}

.page-4-search-intro {
    font-size: 17px;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 34px;
}

.page-4-search-sub {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 18px;
}

/* =======================================================
   LIST – CHECK STYLE (UNIQUE)
======================================================= */

.page-4-search-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.page-4-search-item {
    position: relative;
    padding: 14px 18px 14px 46px;
    margin-bottom: 14px;
    background: rgba(255,255,255,0.9);
    border-radius: 14px;
    font-size: 16px;
    color: #1e293b;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition:
        transform 0.4s cubic-bezier(.22,.61,.36,1),
        box-shadow 0.4s cubic-bezier(.22,.61,.36,1),
        background 0.4s ease;
}

/* Check icon */
.page-4-search-item::before {
    content: "✓";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    color: #000;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover – soft lift */
.page-4-search-item:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.10);
    background: rgba(255,255,255,1);
}

/* Note */
.page-4-search-note {
    font-size: 16px;
    color: #475569;
}

/* =======================================================
   IMAGE
======================================================= */

.page-4-search-image {
    position: relative;
}

.page-4-search-image img {
    width: 100%;
    max-width: 420px;
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.15);
    animation: page4FloatImage 6s ease-in-out infinite alternate;
}

/* Subtle float */
@keyframes page4FloatImage {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 900px) {
    .page-4-search-wrap {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .page-4-search-list {
        max-width: 520px;
        margin: 0 auto 32px;
    }

    .page-4-search-image img {
        margin: auto;
    }
}

@media (max-width: 480px) {
    .page-4-search-section {
        padding: 110px 16px;
    }

    .page-4-search-item {
        padding: 14px 16px 14px 42px;
        font-size: 15.5px;
    }
}

/* =======================================================
   PAGE-4 | SECTION-8 | PROCESS TIMELINE
======================================================= */

.page-4-process-section {
    position: relative;
    padding: 70px 20px;
    background:
        radial-gradient(circle at 10% 15%, rgba(42,197,245,0.2), transparent 45%),
        radial-gradient(circle at 90% 85%, rgba(254,189,16,0.2), transparent 45%),
        linear-gradient(180deg, #ffffff, #f8fcff);
    overflow: hidden;
}

.page-4-process-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

/* Title */
.page-4-process-title {
    font-size: clamp(32px, 4vw, 44px);
    margin-bottom: 90px;
    color: #0f172a;
}

/* =======================================================
   GRID
======================================================= */

.page-4-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px;
    position: relative;
}

/* =======================================================
   PROCESS ITEM
======================================================= */

.page-4-process-item {
    position: relative;
    padding: 50px 30px 38px;
    background: rgba(255,255,255,0.9);
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.08);
    transition:
        transform 0.5s cubic-bezier(.22,.61,.36,1),
        box-shadow 0.5s cubic-bezier(.22,.61,.36,1);
}

/* Hover lift */
.page-4-process-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 45px 90px rgba(0,0,0,0.12);
}

/* Step number */
.page-4-step-no {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4bd0f899, #ffca3999);
    color: #000;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

/* Animated connector line */
.page-4-step-line {
    width: 60%;
    height: 3px;
    margin: 30px auto 26px;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    border-radius: 10px;
    opacity: 0.6;
}

/* Text */
.page-4-process-item h3 {
    font-size: 20px;
    margin-bottom: 14px;
    color: #0f172a;
}

.page-4-process-item p {
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
}

/* =======================================================
   NOTE
======================================================= */

.page-4-process-note {
    margin: 100px auto 0;
    max-width: 900px;
    padding: 30px 36px;
    border-radius: 22px;
    background: linear-gradient(
        135deg,
        rgba(42,197,245,0.25),
        rgba(254,189,16,0.25)
    );
    font-size: 17px;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.page-4-note-icon {
    font-size: 22px;
}

/* =======================================================
   SCROLL REVEAL STAGGER
======================================================= */

.page-4-card-reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
}

.page-4-card-reveal.page-4-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger */
.page-4-card-reveal:nth-child(1) { transition-delay: .1s; }
.page-4-card-reveal:nth-child(2) { transition-delay: .2s; }
.page-4-card-reveal:nth-child(3) { transition-delay: .3s; }
.page-4-card-reveal:nth-child(4) { transition-delay: .4s; }
.page-4-card-reveal:nth-child(5) { transition-delay: .5s; }
.page-4-card-reveal:nth-child(6) { transition-delay: .6s; }

/* =======================================================
   RESPONSIVE
======================================================= */

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

@media (max-width: 640px) {
    .page-4-process-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .page-4-process-title {
        margin-bottom: 70px;
    }

    .page-4-process-item {
        padding: 46px 26px 34px;
    }

    .page-4-process-note {
        flex-direction: column;
        text-align: start;
      
    }
}


/* =======================================================
   PAGE-4 | SECTION-9 | FEES
======================================================= */

.page-4-fees-section {
    position: relative;
    padding: 70px 20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(254,189,16,0.18), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(42,197,245,0.18), transparent 45%),
        linear-gradient(180deg, #ffffff, #f9fdff);
}

.page-4-fees-container {
    max-width: 1000px;
    margin: auto;
    text-align: center;
}

/* Title */
.page-4-fees-title {
    font-size: clamp(30px, 4vw, 42px);
    color: #0f172a;
    margin-bottom: 18px;
}

/* Subtitle */
.page-4-fees-subtitle {
    font-size: 18px;
    color: #475569;
    margin-bottom: 40px;
}

/* =======================================================
   TABLE WRAPPER (GLASS CARD)
======================================================= */

.page-4-fees-table-wrap {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    border-radius: 26px;
    padding: 20px;
    box-shadow: 0 35px 80px rgba(0,0,0,0.08);
    max-width: 800px;
    margin: auto;
}

/* Table */
.page-4-fees-table {
    width: 100%;
    border-collapse: collapse;
}

/* Head */
.page-4-fees-table thead th {
    font-size: 16px;
    text-align: left;
    padding: 18px 16px;
    color: #0f172a;
    border-bottom: 2px solid rgba(15,23,42,0.1);
}

/* Rows */
.page-4-fees-table tbody tr {
    transition: background 0.4s ease, transform 0.4s ease;
}

.page-4-fees-table tbody tr:hover {
    background: linear-gradient(
        135deg,
        rgba(254,189,16,0.18),
        rgba(42,197,245,0.18)
    );
    transform: scale(1.01);
}

/* Cells */
.page-4-fees-table td {
    padding: 22px 16px;
    text-align: left;
    font-size: 16.5px;
    color: #334155;
}

/* Fee highlight */
.page-4-fee-amount {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    -webkit-background-clip: text;
    color: transparent;
}

/* =======================================================
   NOTE
======================================================= */

.page-4-fees-note {
    margin: 70px auto 0;
    max-width: 780px;
    padding: 26px 30px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(254,189,16,0.25),
        rgba(42,197,245,0.25)
    );
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    font-size: 16.5px;
    color: #0f172a;
}

.page-4-fees-icon {
    font-size: 22px;
}

/* =======================================================
   SCROLL REVEAL (TABLE FEELS HEAVY & PREMIUM)
======================================================= */

.page-4-card-reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.96);
}

.page-4-card-reveal.page-4-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 768px) {
    .page-4-fees-table-wrap {
        padding: 30px 22px;
    }

    .page-4-fees-table thead {
        display: none;
    }

    .page-4-fees-table tr {
        display: block;
        margin-bottom: 20px;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    }

    .page-4-fees-table td {
        display: flex;
        justify-content: space-between;
        padding: 16px 18px;
        font-size: 15.5px;
    }

    .page-4-fees-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #0f172a;
    }
}


/* =======================================================
   PAGE-4 | SECTION-10 | DOCUMENTS
======================================================= */

.page-4-documents-section {
    position: relative;
    padding: 80px 20px;
    background: url("../img/page-4/page-4-bg-2.jfif") center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

/* Dark + brand overlay */
.page-4-doc-overlay {
    position: absolute;
    inset: 0;
    /* background:
        linear-gradient(
            135deg,
            rgba(42,197,245,0.75),
            rgba(254,189,16,0.75)
        ); */
    z-index: 1;
}

/* Main card */
.page-4-documents-card {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: auto;
    padding: 70px 60px;
    background: rgba(255,255,255,0.52);
    backdrop-filter: blur(10px);
    border-radius: 28px;
    box-shadow: 0 40px 90px rgba(0,0,0,0.25);
    text-align: center;
}

/* Title */
.page-4-documents-title {
    font-size: clamp(30px, 4vw, 42px);
    color: #0f172a;
    margin-bottom: 50px;
}

/* =======================================================
   DOCUMENT GRID
======================================================= */

.page-4-documents-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 45px;
}

/* Document item */
.page-4-document-item {
    position: relative;
    padding: 26px 22px;
    background: #ffffff;
    border-radius: 18px;
    font-size: 16.5px;
    font-weight: 600;
    color: #0f172a;
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    transition:
        transform 0.45s cubic-bezier(.22,.61,.36,1),
        box-shadow 0.45s cubic-bezier(.22,.61,.36,1),
        background 0.45s ease;
}

/* Gradient edge */
.page-4-document-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: 0.4s ease;
}

/* Hover */
.page-4-document-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.15);
    color: #000;
    background: linear-gradient(
        135deg,
        rgba(254,189,16,0.25),
        rgba(42,197,245,0.25)
    );
}

.page-4-document-item:hover::before {
    opacity: 1;
}

/* =======================================================
   NOTE
======================================================= */

.page-4-documents-note {
    font-size: 17px;
    color: #334155;
    max-width: 700px;
    margin: auto;
}

/* =======================================================
   SCALE REVEAL (UNIQUE FOR THIS SECTION)
======================================================= */

.page-4-scale-reveal {
    opacity: 0;
    transform: scale(0.92);
    transition: all 0.8s cubic-bezier(.2,.7,.2,1);
}

.page-4-scale-reveal.page-4-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger */
.page-4-scale-reveal:nth-child(1) { transition-delay: .05s; }
.page-4-scale-reveal:nth-child(2) { transition-delay: .1s; }
.page-4-scale-reveal:nth-child(3) { transition-delay: .15s; }
.page-4-scale-reveal:nth-child(4) { transition-delay: .2s; }
.page-4-scale-reveal:nth-child(5) { transition-delay: .25s; }

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 992px) {
    .page-4-documents-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-4-documents-card {
        padding: 60px 40px;
    }
}

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

    .page-4-documents-card {
        padding: 50px 24px;
    }

    .page-4-documents-section {
        background-attachment: scroll;
    }
}


/* =======================================================
   PAGE-4 | SECTION-11 | TRADEMARK CLASSES
======================================================= */

.page-4-classes-section {
    position: relative;
    padding: 70px 20px;
    background:
        radial-gradient(circle at 15% 25%, rgba(42,197,245,0.18), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(254,189,16,0.18), transparent 45%),
        linear-gradient(180deg, #ffffff, #f9fdff);
    overflow: hidden;
}

.page-4-classes-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 90px;
    align-items: center;
}

/* =======================================================
   IMAGE
======================================================= */

.page-4-classes-image {
    position: relative;
}

.page-4-classes-image img {
    width: 100%;
    max-width: 420px;
    border-radius: 30px;
    box-shadow: 0 35px 80px rgba(0,0,0,0.18);
    animation: page4ClassFloat 6s ease-in-out infinite alternate;
}

/* Floating effect (unique to this section) */
@keyframes page4ClassFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-14px); }
}

/* =======================================================
   CONTENT
======================================================= */

.page-4-classes-content h2 {
    font-size: clamp(32px, 4vw, 42px);
    line-height: 1.3;
    color: #0f172a;
    margin-bottom: 22px;
}

.page-4-classes-content p {
    font-size: 17px;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 18px;
}

.page-4-classes-intro {
    font-size: 18px;
    margin-bottom: 28px;
}

/* =======================================================
   CLASS TYPE PILLS (VERY DISTINCTIVE)
======================================================= */

.page-4-class-types {
    display: flex;
    gap: 18px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.page-4-class-pill {
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    box-shadow: 0 16px 35px rgba(0,0,0,0.12);
    transition:
        transform 0.4s cubic-bezier(.22,.61,.36,1),
        box-shadow 0.4s cubic-bezier(.22,.61,.36,1);
}

/* Goods */
.page-4-class-pill.goods {
    background: linear-gradient(135deg, #ffca3999, #ffe08a);
    color: #000;
}

/* Services */
.page-4-class-pill.services {
    background: linear-gradient(135deg, #4bd0f899, #a6e9ff);
    color: #000;
}

/* Hover interaction */
.page-4-class-pill:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0,0,0,0.18);
}

/* =======================================================
   SCALE REVEAL FOR PILLS
======================================================= */

.page-4-scale-reveal {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(.2,.7,.2,1);
}

.page-4-scale-reveal.page-4-visible {
    opacity: 1;
    transform: scale(1);
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 992px) {
    .page-4-classes-container {
        grid-template-columns: 1fr;
        gap: 70px;
        text-align: center;
    }

    .page-4-class-types {
        justify-content: center;
    }

    .page-4-classes-image img {
        margin: auto;
    }
}

@media (max-width: 480px) {
    .page-4-classes-section {
        padding: 60px 16px;
    }

    .page-4-class-pill {
        font-size: 15px;
        padding: 12px 18px;
    }
}


/* =======================================================
   PAGE-4 | SECTION-12 | STATUS TRACKING
======================================================= */

.page-4-status-section {
    position: relative;
    padding: 70px 20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(42,197,245,0.18), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(254,189,16,0.18), transparent 45%),
        linear-gradient(180deg, #ffffff, #f9fdff);
}

.page-4-status-card {
    max-width: 1100px;
    margin: auto;
    padding: 70px 60px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border-radius: 30px;
    box-shadow: 0 40px 90px rgba(0,0,0,0.10);
    text-align: center;
}

/* Title */
.page-4-status-title {
    font-size: clamp(30px, 4vw, 42px);
    color: #0f172a;
    margin-bottom: 18px;
}

/* Intro */
.page-4-status-intro {
    font-size: 18px;
    color: #334155;
    margin-bottom: 26px;
}

.page-4-status-sub {
    font-size: 17px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 45px;
}

/* =======================================================
   STATUS GRID (FLOW STYLE)
======================================================= */

.page-4-status-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 26px;
    margin-bottom: 45px;
}

/* Status item */
.page-4-status-item {
    position: relative;
    padding: 26px 20px 22px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
    font-size: 16.5px;
    font-weight: 500;
    color: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition:
        transform 0.45s cubic-bezier(.22,.61,.36,1),
        box-shadow 0.45s cubic-bezier(.22,.61,.36,1);
}

/* Icon */
.page-4-status-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4bd0f899, #ffca3999);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Hover */
.page-4-status-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.15);
}

/* =======================================================
   NOTE
======================================================= */

.page-4-status-note {
    font-size: 17px;
    color: #475569;
    max-width: 700px;
    margin: auto;
}

/* =======================================================
   SCROLL REVEAL – STAGGERED FLOW
======================================================= */

.page-4-card-reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
}

.page-4-card-reveal.page-4-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger */
.page-4-card-reveal:nth-child(1) { transition-delay: .1s; }
.page-4-card-reveal:nth-child(2) { transition-delay: .2s; }
.page-4-card-reveal:nth-child(3) { transition-delay: .3s; }
.page-4-card-reveal:nth-child(4) { transition-delay: .4s; }
.page-4-card-reveal:nth-child(5) { transition-delay: .5s; }
.page-4-card-reveal:nth-child(6) { transition-delay: .6s; }

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width: 992px) {
    .page-4-status-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-4-status-card {
        padding: 60px 40px;
    }
}

@media (max-width: 576px) {
    .page-4-status-list {
        grid-template-columns: 1fr;
    }

    .page-4-status-card {
        padding: 50px 24px;
    }
}

/* =======================================================
   PAGE-4 TRADEMARK SECTION – PREMIUM DESIGN
======================================================= */

.page-4-trademark {
    padding: 60px 6%;
    background: linear-gradient(
        to bottom,
        #ffffff,
        rgba(254,189,16,0.06)
    );
}

.page-4-container {
    max-width: 1100px;
    margin: auto;
}

/* Heading */
.page-4-trademark h1 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #111827;
    line-height: 1.3;
}

/* Subtitle */
.page-4-subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 60px;
}

/* Card Grid */
.page-4-card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

/* Cards */
.page-4-card {
    background: #ffffff;
    padding: 35px;
    border-radius: 18px;
    border: 1px solid rgba(42,197,245,0.15);
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Gradient top line accent */
.page-4-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #4bd0f889, #ffca3989);
}

/* Hover effect */
.page-4-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(42,197,245,0.15);
    border-color: #4bd0f8;
}

/* Card Heading */
.page-4-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111827;
}

/* Card Text */
.page-4-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #000;
}

/* CTA Button */
.page-4-efile-btn {
    display: inline-block;
    margin-top: 60px;
    padding: 14px 30px;
    border-radius: 40px;
    background: linear-gradient(90deg, #4bd0f899, #ffca3999);
    color: #000;
    font-weight: 600;
    text-decoration: none;
    transition: 0.4s ease;
    box-shadow: 0 15px 40px rgba(42,197,245,0.3);
}

.page-4-efile-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 60px rgba(254,189,16,0.35);
    color: #000;
}

/* Responsive */
@media (max-width: 900px) {

    .page-4-card-container {
        grid-template-columns: 1fr;
    }

    .page-4-trademark h1 {
        font-size: 28px;
    }
}

/* =======================================================
   PAGE-4 CLARIFY CTA SECTION – PREMIUM DESIGN
======================================================= */

.page-4-clarify-section {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  padding: 0 8%;
  overflow: hidden;
   background: linear-gradient( rgba(174, 216, 218, 0.4), rgba(5, 37, 51, 0.4) ), url("../img/page-4/page-4-bg.jfif") center/cover no-repeat;
  background-size: cover;
  background-position: center;
  /* animation: page4BgZoom 20s ease-in-out infinite alternate; */
}

/* Background Zoom Effect */
@keyframes page4BgZoom {
  0% { background-size: 100%; }
  100% { background-size: 110%; }
}

/* Brand Overlay */
.page-4-clarify-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(42,197,245,0.35),
    rgba(42,197,245,0.35)
  );
  mix-blend-mode: multiply;
}

/* Content */
.page-4-clarify-content {
  position: relative;
  max-width: 900px;
  
  color: #ffffff;
  animation: page4FadeUp 1s ease forwards;
}

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

.page-4-clarify-content h2 {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.3;
  color: #000000;
}

.page-4-clarify-content p {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 30px;
  color: #000000;
}

.page-4-clarify-content p span {
  font-weight: 700;
  text-decoration: underline;
}

/* Button */
.page-4-clarify-btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 50px;
  background: #ffffff;
  color: #111827;
  font-weight: 600;
  text-decoration: none;
  transition: 0.4s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.page-4-clarify-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
  background: #f9fafb;
  color: #000;
}

/* Responsive */
@media (max-width: 768px) {

  .page-4-clarify-section {
    height: auto;
    padding: 100px 6%;
  }

  .page-4-clarify-content h2 {
    font-size: 28px;
  }
}

/* =======================================================
   PAGE-4 FAQ SECTION – CLEAN & PROPER ALIGNMENT
======================================================= */

.page-4-faq-section {
  padding: 60px 8%;
  background: linear-gradient(
    to bottom,
    #ffffff,
    rgba(42,197,245,0.05)
  );
}

.page-4-faq-container {
  max-width: 1100px;
  margin: auto;
}

/* Title */
.page-4-faq-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 70px;
  color: #111827;
}

/* Grid */
.page-4-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-bottom: 70px;
}

/* Card */
.page-4-faq-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 35px 28px;
  border: 1px solid rgba(42,197,245,0.15);
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Hover */
.page-4-faq-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(42,197,245,0.15);
}

/* Icon INSIDE card */
.page-4-faq-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4bd0f899, #ffca3999);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 700;
}

/* Heading */
.page-4-faq-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111827;
}

/* Paragraph */
.page-4-faq-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

/* Disclaimer */
.page-4-disclaimer {
  border-top: 1px solid #e5e7eb;
  padding-top: 40px;
}

.page-4-disclaimer h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.page-4-disclaimer p {
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
  max-width: 900px;
}

/* Responsive */
@media (max-width: 992px) {
  .page-4-faq-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .page-4-faq-grid {
    grid-template-columns: 1fr;
  }

  .page-4-faq-title {
    font-size: 26px;
  }
}



/* ====================================================
                Page-5 styling
===================================================== */

/* ================= PAGE 5 SECTION-1 ================= */

/* ===============================
        ESIC HERO SECTION
================================ */

.esic-hero {
    padding: 120px 6%;
    background: linear-gradient(135deg, #f9fbff 0%, #ffffff 60%, #f7fbff 100%);
    position: relative;
    overflow: hidden;
}

/* Blue Glow */
.esic-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(42,197,245,0.18) 0%, transparent 70%);
    top: -180px;
    left: -150px;
    z-index: 0;
    filter: blur(20px);
}

/* Gold Glow */
.esic-hero::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(254,189,16,0.18) 0%, transparent 70%);
    bottom: -200px;
    right: -150px;
    z-index: 0;
    filter: blur(25px);
}

/* subtle pattern layer */
.esic-hero::marker {
    display:none;
}

.esic-hero-pattern{
    position:absolute;
    inset:0;
    background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity:0.3;
    z-index:0;
}

.esic-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1300px;
    margin: auto;
    position: relative;
    z-index: 2;
}

/* LEFT CONTENT */

.esic-content {
    flex: 1;
}

.esic-content h1 {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.3;
    color: #1e1e1e;
}

.esic-content h1 span {
    color: #4bd0f8;
    position: relative;
}

.esic-content h1 small {
    display: block;
    font-size: 20px;
    margin-top: 10px;
    font-weight: 500;
    color: #666;
}

.esic-content p {
    margin: 30px 0;
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    max-width: 550px;
}

/* BUTTONS */

.esic-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-primary {
    background: #4bd0f899;
    color: #333;
    padding: 14px 32px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background: #1fb0dc;
    transform: translateY(-3px);
}

.btn-outline {
    border: 2px solid #ffca39;
    color: #333;
    padding: 14px 30px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-outline:hover {
    background: #ffca3999;
    color: #000;
    transform: translateY(-3px);
}

/* RIGHT IMAGE */

.esic-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-card {
    background: #fff;
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
    transition: 0.4s ease;
}

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

.image-card img {
    width: 100%;
    max-width: 450px;
    border-radius: 18px;
}

/* ===============================
        RESPONSIVE DESIGN
================================ */

/* Tablet */
@media (max-width: 992px) {
    .esic-container {
        flex-direction: column;
        text-align: center;
    }

    .esic-content p {
        margin-left: auto;
        margin-right: auto;
    }

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

    .esic-content h1 {
        font-size: 36px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .esic-hero {
        padding: 80px 6%;
    }

    .esic-content h1 {
        font-size: 28px;
    }

    .esic-content p {
        font-size: 15px;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        text-align: center;
    }

    .image-card img {
        max-width: 100%;
    }
}


/* ================= PAGE 5 SECTION-2 ================= */
/* ===============================
      ESIC KEY POINTS SECTION
================================ */

.esic-section {
    padding: 120px 6%;
    background: linear-gradient(
        180deg,
        rgba(42,197,245,0.04) 0%,
        rgba(254,189,16,0.04) 100%
    );
}

.esic-wrapper {
    max-width: 1300px;
    margin: auto;
}

/* SECTION TITLE */

.esic-title {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    color: #1e1e1e;
    margin-bottom: 70px;
}

.esic-title span {
    color: #4bd0f8;
}

/* GRID LAYOUT */

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

/* CARD DESIGN */

.esic-card {
    background: #ffffff;
    padding: 35px 28px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    transition: all 0.35s ease;
    border: 1px solid rgba(42,197,245,0.08);
    overflow: hidden;
}

/* Subtle Left Accent Line */
.esic-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(
        180deg,
        #4bd0f8,
        #ffca39
    );
    opacity: 0.3;
    transition: 0.3s ease;
}

.esic-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

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

/* ICON */

.esic-card .icon {
    font-size: 34px;
    margin-bottom: 18px;
}

/* CARD CONTENT */

.esic-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #222;
}

.esic-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

/* ===============================
        RESPONSIVE DESIGN
================================ */

/* Large Tablets */
@media (max-width: 1200px) {
    .esic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets */
@media (max-width: 768px) {
    .esic-title {
        font-size: 30px;
    }

    .esic-section {
        padding: 90px 6%;
    }
}

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

    .esic-title {
        font-size: 24px;
    }

    .esic-card {
        padding: 25px 20px;
    }

    .esic-card p {
        font-size: 14px;
    }
}

/* ================= PAGE 5 SECTION-3 ================= */
/* =====================================
      ESIC APPLICABILITY - UNIQUE STYLE
====================================== */
/* =====================================
   ESIC APPLICABILITY SECTION
====================================== */
.gms-esic-applicability {
    padding: 80px 6%;
    background: linear-gradient(
        90deg,
        rgba(42,197,245,0.03) 0%,
        #ffffff 50%
    );
}

.gms-esic-container {
    max-width: 1300px;
    margin: auto;
    /* Added flex column to stack layout and note vertically */
    display: flex;
    flex-direction: column;
    gap: 40px; 
}

/* TOP SPLIT LAYOUT (Left | Right) */
.gms-applicability-layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    width: 100%;
}

/* LEFT SIDE CONTENT */
.gms-applicability-left {
    flex: 1.2; /* Slightly more weight to the text side */
}

.gms-section-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1e1e1e;
    line-height: 1.3;
}

.gms-section-title span {
    color: #4bd0f8;
}

.gms-intro-text {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #555;
}

/* FACTORS LIST */
.gms-factors {
    display: flex;
    gap: 40px;
    margin-bottom: 25px;
}

.gms-factors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gms-factors li {
    margin-bottom: 14px;
    font-size: 15px;
    color: #333;
    padding-left: 20px;
    position: relative;
}

.gms-factors li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #ffca39;
    border-radius: 50%;
}

.gms-note-line {
    font-weight: 500;
    color: #444;
}

/* RIGHT SIDE TABLE CARD */
.gms-applicability-right {
    flex: 1;
}

.gms-table-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.03);
}

.gms-table-card table {
    width: 100%;
    border-collapse: collapse;
}

.gms-table-card th {
    text-align: left;
    padding-bottom: 15px;
    font-weight: 600;
    color: #1e1e1e;
    border-bottom: 2px solid rgba(42,197,245,0.2);
}

.gms-table-card td {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    color: #555;
}

.gms-table-card tr:last-child td {
    border-bottom: none;
}

/* BOTTOM FULL-WIDTH INFO BOX */
.gms-info-box {
    display: flex;
    gap: 20px;
    background: rgba(42,197,245,0.06);
    border-left: 5px solid #4bd0f8;
    padding: 25px 30px;
    border-radius: 12px;
    width: 100%; /* Spans full width of container */
    align-items: center;
}

.gms-info-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.gms-info-box p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .gms-applicability-layout {
        gap: 40px;
    }
}

@media (max-width: 992px) {
    .gms-applicability-layout {
        flex-direction: column;
        gap: 40px;
    }

    .gms-applicability-left, .gms-applicability-right {
        width: 100%;
    }

    .gms-esic-applicability {
        padding: 60px 5%;
    }
}

@media (max-width: 576px) {
    .gms-section-title {
        font-size: 26px;
    }

    .gms-factors {
        flex-direction: column;
        gap: 10px;
    }

    .gms-info-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ================= PAGE 6 SECTION-4 ================= */

/* =====================================
        DEFINITION SECTION
====================================== */

.definition-section {
    padding: 80px 6%;
    background: linear-gradient(
        180deg,
        rgba(254,189,16,0.03) 0%,
        #ffffff 60%
    );
    position: relative;
}

/* Soft Decorative Glow */
.definition-section::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(42,197,245,0.06) 0%, transparent 70%);
    top: -120px;
    right: -120px;
}

.definition-container {
    max-width: 900px;
    margin: auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* HEADING */

.definition-container h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.4;
    color: #1e1e1e;
    margin-bottom: 30px;
}

/* Highlight Accent */

.definition-container .highlight {
    position: relative;
    color: #4bd0f8;
}

.definition-container .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 6px;
    background: rgba(254,189,16,0.4);
    border-radius: 4px;
    z-index: -1;
}

/* PARAGRAPH */

.definition-container p {
    font-size: 17px;
    line-height: 1.9;
    color: #555;
    max-width: 750px;
    margin: auto;
}

/* =====================================
        RESPONSIVE DESIGN
====================================== */

/* Tablet */
@media (max-width: 992px) {
    .definition-container h2 {
        font-size: 30px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .definition-section {
        padding: 80px 6%;
    }

    .definition-container h2 {
        font-size: 24px;
    }

    .definition-container p {
        font-size: 15px;
    }
}

/* =====================================
        ESIC BENEFITS SECTION
====================================== */

.esic-benefits {
    padding: 120px 6%;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(42,197,245,0.03) 100%
    );
}

.benefits-wrapper {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.esic-benefits h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #1e1e1e;
}

/* IMAGE */

.benefits-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    margin-bottom: 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
}

/* DESCRIPTION */

.benefits-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 40px;
}

/* GRID */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

/* CARD */

.benefit-card {
    background: #ffffff;
    padding: 22px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    box-shadow: 0 12px 35px rgba(0,0,0,0.05);
    border: 1px solid rgba(42,197,245,0.08);
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    border-color: rgba(42,197,245,0.25);
}

/* FULL WIDTH CARD */

.benefit-card.full-width {
    grid-column: span 2;
    background: rgba(254,189,16,0.06);
    border: 1px solid rgba(254,189,16,0.25);
}

/* FOOTER TEXT */

.benefits-footer {
    font-size: 16px;
    font-weight: 500;
    color: #444;
}

/* =====================================
        RESPONSIVE DESIGN
====================================== */

/* Tablet */
@media (max-width: 992px) {
    .esic-benefits h2 {
        font-size: 30px;
    }
}

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

    .benefit-card.full-width {
        grid-column: span 1;
    }

    .esic-benefits {
        padding: 80px 6%;
    }

    .esic-benefits h2 {
        font-size: 24px;
    }

    .benefits-description,
    .benefits-footer {
        font-size: 14px;
    }
}

/* =====================================
        ESIC BENEFITS - PREMIUM STYLE
====================================== */

.esic-benefits {
    padding: 120px 6%;
    background: linear-gradient(
        180deg,
        rgba(42,197,245,0.03) 0%,
        #ffffff 60%
    );
}

.benefits-wrapper {
    max-width: 1300px;
    margin: auto;
}

.esic-benefits h2 {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 70px;
    color: #1e1e1e;
}

/* SPLIT LAYOUT */

.benefits-layout {
    display: flex;
    align-items: center;
    gap: 70px;
}

/* IMAGE */

.benefits-image-box {
    flex: 1;
}

.benefits-image-box img {
    width: 100%;
    border-radius: 25px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.07);
}

/* CONTENT */

.benefits-content {
    flex: 1;
}

/* DESCRIPTION */

.benefits-description {
    font-size: 16px;
    margin-bottom: 35px;
    color: #555;
    line-height: 1.8;
}

/* BENEFIT LIST */

.benefits-list {
    border-left: 3px solid rgba(42,197,245,0.3);
    padding-left: 25px;
    margin-bottom: 35px;
}

.benefit-item {
    position: relative;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: #ffffff;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    box-shadow: 0 12px 35px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.benefit-item::before {
    content: "•";
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #ffca39;
}

.benefit-item:hover {
    transform: translateX(6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* FOOTER */

.benefits-footer {
    font-size: 16px;
    font-weight: 500;
    color: #444;
}

/* =====================================
        RESPONSIVE DESIGN
====================================== */

@media (max-width: 992px) {
    .benefits-layout {
        flex-direction: column;
        gap: 40px;
    }

    .esic-benefits h2 {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .esic-benefits {
        padding: 80px 6%;
    }

    .esic-benefits h2 {
        font-size: 24px;
    }

    .benefits-description,
    .benefits-footer {
        font-size: 14px;
    }

    .benefit-item {
        font-size: 14px;
    }
}

/* =====================================
      ESIC CONTRIBUTION - SPLIT STYLE
====================================== */

.esic-contribution {
    padding: 120px 6%;
    background: #ffffff;
}

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

.esic-contribution h2 {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1e1e1e;
}

.intro-text {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* ================= COMPARISON PANEL ================= */

.comparison-panel {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.panel {
    flex: 1;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    background: #fafafa;
    position: relative;
}

.panel h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.rate {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #4bd0f8;
}

.employee .rate {
    color: #ffca39;
}

.panel p {
    font-size: 15px;
    color: #444;
}

.divider {
    width: 1px;
    background: rgba(0,0,0,0.1);
}

/* ================= TOTAL ================= */

.total-text {
    text-align: center;
    font-weight: 500;
    margin-bottom: 40px;
    color: #444;
}

/* ================= RESPONSIBILITY ================= */

.responsibility-section {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 30px;
    border-radius: 14px;
    background: rgba(42,197,245,0.05);
}

.responsibility-section ul {
    margin-top: 15px;
    padding-left: 20px;
}

.responsibility-section li {
    margin-bottom: 10px;
    font-size: 15px;
}

/* ================= SUMMARY STRIP ================= */

.summary-strip {
    display: flex;
    justify-content: space-between;
    padding: 20px 30px;
    background: #f7f7f7;
    border-radius: 12px;
    font-weight: 600;
}

.summary-strip .total {
    color: #4bd0f8;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {
    .comparison-panel {
        flex-direction: column;
    }

    .divider {
        display: none;
    }

    .summary-strip {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .esic-contribution {
        padding: 80px 6%;
    }

    .esic-contribution h2 {
        font-size: 24px;
    }

    .rate {
        font-size: 36px;
    }
}

:root {
    --primary-blue: #2c5282;
    --accent-green: #68d391;
    --dark-navy: #1a365d;
    --bg-soft: #f7fafc;
}

.esic-premium-section {
    padding: 100px 20px 20px;
    background-color: var(--bg-soft);
    font-family: 'Inter', sans-serif;
}

.esic-main-wrapper {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header Styling */
.esic-header-group {
    text-align: center;
    margin-bottom: 60px;
}

.esic-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--dark-navy);
    margin-bottom: 10px;
}

.esic-subtitle-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.esic-subtitle-box .line {
    height: 2px;
    width: 40px;
    background: var(--accent-green);
}

.esic-subtitle-box p {
    color: #718096;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}

/* Grid Alignment */
.esic-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Unbalanced columns look more modern */
    gap: 40px;
    align-items: start;
}

/* Calculation Engine Styling */
.calc-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    border: 1px solid #edf2f7;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-radius: 15px;
    transition: 0.3s;
}

.calc-row:hover { background: #f8fafc; }

.calc-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.calc-info i {
    font-size: 24px;
    color: var(--primary-blue);
    background: #ebf4ff80;
    padding: 15px;
    border-radius: 12px;
}

.calc-info h4 { font-size: 18px; margin-bottom: 4px; color: var(--dark-navy); }
.calc-info p { font-size: 14px; color: #718096; }

.calc-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary-blue);
}

.calc-operator {
    text-align: center;
    margin: 10px 0;
    color: #000;
    font-size: 20px;
}

.calc-divider {
    height: 1px;
    background: #edf2f7;
    margin: 20px 0;
}

.calc-row.total {
    background: var(--dark-navy);
    color: #fff;
}

.calc-row.total .calc-info i { background: rgba(255,255,255,0.1); color: #fff; }
.calc-row.total .calc-info h4 { color: #fff; }
.calc-row.total .calc-info p { color: #a0aec0; }
.calc-row.total .calc-value { color: var(--accent-green); font-size: 32px; }

.stat-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding: 15px;
    font-size: 14px;
    color: #4a5568;
    background: #fff;
    border-radius: 12px;
}

.stat-notice i { color: var(--accent-green); }

/* Sidebar Compliance Styling */
.compliance-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 35px;
    border-left: 6px solid var(--accent-green);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.compliance-card h3 {
    font-size: 20px;
    margin-bottom: 30px;
    color: var(--dark-navy);
}

.step-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.step-num {
    font-weight: 800;
    color: var(--accent-green);
    font-size: 18px;
    opacity: 0.9;
}

.step-item p {
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
}

.law-tag {
    margin-top: 30px;
    text-align: center;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Responsive Handling */
@media (max-width: 992px) {
    .esic-content-grid {
        grid-template-columns: 1fr;
    }
    .esic-title { font-size: 28px; }
}

@media (max-width: 600px) {
    .calc-row { flex-direction: column; text-align: center; gap: 15px; }
    .calc-info { flex-direction: column; gap: 10px; }
    .calc-card { padding: 20px; }
}



/* ===== ESIC DOCUMENTS PREMIUM SECTION ===== */

.esic-documents {
    padding: 30px 20px;
    background: linear-gradient(135deg,#f7fbff,#eef6ff);
    position: relative;
    overflow: hidden;
    font-family: 'Poppins',sans-serif;
}

    .esic-documents .container {
        max-width: 1150px;
        margin: auto;
    }

    /* Heading */

    .esic-documents h2 {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 70px;
        color: #1c1c1c;
    }

/* Grid Layout */

.documents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

/* Image Style */

.doc-image {
    position: relative;
}

    .doc-image img {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        transition: 0.5s;
    }

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

    /* Decorative Glow */

    .doc-image::after {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle,#4bd0f8,transparent);
        top: -40px;
        right: -40px;
        z-index: -1;
    }

/* Glass Content Card */

.doc-content {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 45px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.4);
}

    /* Paragraph */

    .doc-content p {
        font-size: 16px;
        color: #555;
        margin-bottom: 20px;
    }

    /* List */

    .doc-content ul {
        list-style: none;
        padding: 0;
        margin-bottom: 20px;
    }

        .doc-content ul li {
            position: relative;
            padding-left: 40px;
            margin-bottom: 18px;
            font-size: 15px;
            color: #444;
        }

            /* Animated Icon */

            .doc-content ul li::before {
                content: "📄";
                position: absolute;
                left: 0;
                top: 0;
                font-size: 20px;
            }

/* Note */

.note-text {
    font-size: 14px;
    color: #666;
    background: #f0f7ff;
    padding: 14px 18px;
    border-radius: 10px;
    border-left: 4px solid #4bd0f8;
}

/* Responsive */

@media (max-width:900px) {

    .documents-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .doc-content {
        padding: 30px;
    }

    .esic-documents h2 {
        font-size: 30px;
    }
}



/* ===== ESIC PENALTY SECTION ===== */

.esic-penalty {
    padding: 60px 20px;
    background: linear-gradient(135deg,#f9fbff,#eef6ff);
    font-family: 'Poppins',sans-serif;
}

.penalty-container {
    max-width: 1100px;
    margin: auto;
    text-align: center;
}

/* Heading */

.esic-penalty h2 {
    font-size: 38px;
    font-weight: 700;
    color: #1e1e1e;
    margin-bottom: 25px;
}

/* Intro text */

.intro-text {
    color: #666;
    font-size: 16px;
    margin-bottom: 45px;
}

/* Penalty cards */

.penalty-cards {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

/* Card Style */

.penalty-card {
    background: #ffffff;
    padding: 28px 35px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    min-width: 230px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
    position: relative;
    transition: all .35s ease;
}

    /* Icon circle */

    .penalty-card::before {
        content: "⚠";
        position: absolute;
        top: -14px;
        left: 20px;
        width: 32px;
        height: 32px;
        background: #ffca39;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    /* Hover effect */

    .penalty-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.12);
    }

/* Footer text */

.footer-text {
    font-size: 15px;
    color: #555;
    margin-bottom: 40px;
}

/* Note box */

.note-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 25px 28px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    display: flex;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
    border-left: 4px solid #4bd0f8;
}

.note-icon {
    font-size: 22px;
    color: #4bd0f8;
    margin-top: 3px;
}

.note-box p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}

/* Responsive */

/* =========================
   LARGE LAPTOP
========================= */

@media (max-width:1200px){

.esic-penalty h2{
  font-size:34px;
}

.penalty-container{
  max-width:1000px;
}

}


/* =========================
   TABLET VIEW
========================= */

@media (max-width:992px){

.esic-penalty{
  padding:50px 20px;
}

.esic-penalty h2{
  font-size:30px;
}

.intro-text{
  font-size:15px;
}

.penalty-card{
  min-width:200px;
  padding:24px 28px;
  font-size:14px;
}

}


/* =========================
   SMALL TABLETS
========================= */

@media (max-width:768px){

.penalty-cards{
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.penalty-card{
  width:100%;
  max-width:420px;
}

.note-box{
  flex-direction:column;
  gap:10px;
}

.note-icon{
  font-size:20px;
}

}


/* =========================
   MOBILE VIEW
========================= */

@media (max-width:600px){

.esic-penalty{
  padding:45px 16px;
}

.esic-penalty h2{
  font-size:26px;
}

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

.penalty-card{
  width:100%;
  padding:22px;
}

.penalty-card::before{
  width:28px;
  height:28px;
  font-size:14px;
  top:-12px;
}

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

.note-box{
  padding:20px;
}

.note-box p{
  font-size:13px;
}

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width:400px){

.esic-penalty h2{
  font-size:22px;
}

.penalty-card{
  padding:18px;
  font-size:13px;
}

.note-box{
  padding:18px;
}

.note-box p{
  font-size:12.5px;
}

}

/* ===== ESIC CTA SECTION ===== */

.esic-cta {
    padding: 60px 20px;
    position: relative;
    background: linear-gradient(135deg,#4bd0f899,#1fb0dc99);
    overflow: hidden;
    font-family: 'Poppins',sans-serif;
}

    /* Decorative Glow */

    .esic-cta::before {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle,rgba(255,255,255,0.2),transparent);
        top: -200px;
        left: -150px;
    }

    .esic-cta::after {
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle,rgba(255,255,255,0.15),transparent);
        bottom: -200px;
        right: -120px;
    }

/* Overlay */

.cta-overlay {
    position: relative;
    z-index: 2;
}

/* Container */

.cta-container {
    max-width: 850px;
    margin: auto;
    text-align: center;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    padding: 60px 50px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.25);
}

    /* Heading */

    .cta-container h2 {
        font-size: 40px;
        font-weight: 700;
        color: #000;
        margin-bottom: 20px;
    }

    /* Paragraph */

    .cta-container p {
        font-size: 17px;
        color: #000;
        line-height: 1.7;
        margin-bottom: 35px;
    }

/* Highlight */

.highlight {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
}

/* CTA Button */

.cta-button {
    display: inline-block;
    padding: 18px 42px;
    background: #ffffff;
    color: #000000;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: all .35s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

    /* Button Hover */

    .cta-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(0,0,0,0.25);
        background: #f8fbff;
        color: #000;
    }

/* Responsive */

@media (max-width:768px) {

    .cta-container {
        padding: 45px 30px;
    }

        .cta-container h2 {
            font-size: 30px;
        }

        .cta-container p {
            font-size: 15px;
        }
}

/* ====================================================
                Page-6 styling
===================================================== */

/* ================= PAGE 6 SECTION-1 ================= */

.page-6-pf-hero{
  position:relative;
  min-height:40vh;
   background: linear-gradient( rgba(174, 216, 218, 0.4), rgba(5, 37, 51, 0.4) ), url("../img/page-6/pf-hero.jfif") center/cover no-repeat;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* Soft zoom animation */
.page-6-pf-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:inherit;
  animation:page4Zoom 20s ease-in-out infinite alternate;
}

@keyframes page4Zoom{
  from{transform:scale(1);}
  to{transform:scale(1.08);}
}

/* Gradient Overlay */
.page-6-pf-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#02131bcc,#06374acc,#4bd0f844);
  z-index:1;
}

/* Container */
.page-6-pf-container{
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:auto;
  padding:0 20px;
  /* min-height:100vh; */
  display:flex;
  align-items:center;
}

/* Glass Card */
.page-6-pf-content{
  max-width:1200px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  margin: 50px auto;
  padding:30px 40px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 40px 90px rgba(0,0,0,.35);
}

/* Heading */
.page-6-pf-content h1{
  font-size:48px;
  line-height:1.2;
  color:#fff;
  margin-bottom:20px;
}

/* Paragraph */
.page-6-pf-content p{
  color:#eaf8ff;
  font-size:17px;
  line-height:1.7;
  margin-bottom:35px;
}

/* Buttons */
.page-6-pf-buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.page-6-btn-primary{
  padding:14px 32px;
  background:#4bd0f899;
  color:#ffffff;
  border-radius:40px;
  font-weight:600;
  text-decoration:none;
  transition:.4s;
  /* box-shadow:0 10px 30px #4bd0f880; */
}

.page-6-btn-primary:hover{
  transform:translateY(-4px);
  /* box-shadow:0 18px 40px #4bd0f8aa; */
  color: #000;
}

/* Outline Button */
.page-6-btn-outline{
  padding:13px 30px;
  border:2px solid #ffca39;
  color:#ffca39;
  border-radius:40px;
  font-weight:600;
  text-decoration:none;
  transition:.4s;
  position:relative;
  overflow:hidden;
}

.page-6-btn-outline::after{
  content:'';
  position:absolute;
  inset:0;
  background:#ffca3999;
  transform:translateX(-100%);
  transition:.4s;
  z-index:-1;
}

.page-6-btn-outline:hover::after{
  transform:translateX(0);
}

.page-6-btn-outline:hover{
  color:#ffffff;
  transform:translateY(-4px);
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

  .page-6-pf-hero{
    padding-top: 40px;
  }

  .page-6-pf-content{
    padding:35px;
  }

  .page-6-pf-content h1{
    font-size:36px;
  }
}

@media(max-width:600px){
  
  .page-6-pf-hero{
    padding-top: 40px;
  }
  .page-6-pf-content{
    padding:28px;
  }

  .page-6-pf-content h1{
    font-size:30px;
  }

  .page-6-pf-buttons{
    flex-direction:column;
  }

  .page-6-btn-primary,
  .page-6-btn-outline{
    text-align:center;
  }
}


/* ================= PAGE 6 SECTION-2 ================= */

/* ================= PAGE 6 PF ABOUT ================= */

.page-6-pf-about{
  padding:60px 20px;
  background:linear-gradient(180deg,#f6fdff,#ffffff);
  font-family:'Poppins',sans-serif;
}

/* Wrapper */
.page-6-pf-about-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:70px;
  align-items:center;
}

/* Text Box */
.page-6-pf-about-text{
  padding:50px;
  border-radius:30px;
  background:#ffffff;
  box-shadow:0 30px 70px rgba(0,0,0,.08);
  position:relative;
}

/* Accent bar */
.page-6-pf-about-text::before{
  content:'';
  position:absolute;
  left:0;
  top:40px;
  width:6px;
  height:80px;
  background:#4bd0f8;
  border-radius:20px;
}

/* Heading */
.page-6-pf-about-text h2{
  font-size:38px;
  margin-bottom:25px;
  position:relative;
}

/* Animated underline */
.page-6-pf-about-text h2::after{
  content:'';
  display:block;
  width:70px;
  height:4px;
  background:#ffca39;
  margin-top:10px;
  border-radius:5px;
}

/* Paragraphs */
.page-6-pf-about-text p{
  font-size:16px;
  line-height:1.8;
  color:#333;
  margin-bottom:18px;
}

/* Strong highlights */
.page-6-pf-about-text strong{
  color:#000;
}

/* List */
.page-6-pf-about-text ul{
  margin-top:15px;
  padding-left:0;
  list-style:none;
}

.page-6-pf-about-text li{
  padding-left:28px;
  margin-bottom:12px;
  position:relative;
  transition:.3s;
}

/* Custom bullet */
.page-6-pf-about-text li::before{
  content:'✔';
  position:absolute;
  left:0;
  color:#ffca39;
  font-weight:700;
}

.page-6-pf-about-text li:hover{
  transform:translateX(6px);
}

/* Image Card */
.page-6-pf-about-image{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.15);
  transition:.6s;
}

.page-6-pf-about-image img{
  width:100%;
  display:block;
}

/* Image hover tilt */
.page-6-pf-about-image:hover{
  transform:rotate(-1deg) scale(1.03);
  box-shadow:0 30px 70px #4bd0f855;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

  .page-6-pf-about-wrap{
    grid-template-columns:1fr;
  }

  .page-6-pf-about-image{
    max-width:420px;
    margin:auto;
  }
}

@media(max-width:600px){

  .page-6-pf-about-text{
    padding:30px;
  }

  .page-6-pf-about-text h2{
    font-size:28px;
  }
}

/* ================= PAGE 6 SECTION-3 ================= */
/* ================= PAGE 6 PF AUTHORITY (TRUE SLIDE SCROLL) ================= */

.page-6-pf-authority{
  padding:60px 20px;
  background:#f9fcff;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

.page-6-pf-authority-wrap{
  max-width:1200px;
  margin:auto;
  position:relative;
  display:flex;
  align-items:center;
}

/* IMAGE */

.page-6-pf-authority-image{
  width:55%;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.18);
}

.page-6-pf-authority-image img{
  width:100%;
  display:block;
  transform:scale(1.08);
  transition:1.2s ease;
}

/* CONTENT CARD (STARTS ON IMAGE) */

.page-6-pf-authority-content{
  position:absolute;
  left:30%;
  width:50%;
  background:#fff;
  padding:55px;
  border-radius:28px;
  box-shadow:0 40px 90px rgba(0,0,0,.12);
  border-left:6px solid #4bd0f8;

  transform:translateX(-40%);
  opacity:0;
  filter:blur(6px);

  transition:1.2s cubic-bezier(.22,.61,.36,1);
}

/* ACTIVE = SLIDE RIGHT */

.page-6-pf-authority.page-6-active .page-6-pf-authority-content{
  transform:translateX(45%);
  opacity:1;
  filter:blur(0);
}

/* Image clears */

.page-6-pf-authority.page-6-active img{
  transform:scale(1);
}

/* TAG */

.page-6-pf-tag{
  display:inline-block;
  background:#4bd0f820;
  color:#4bd0f8;
  padding:6px 16px;
  border-radius:20px;
  font-size:13px;
  margin-bottom:12px;
}

/* TEXT */

.page-6-pf-authority-content h2{
  font-size:34px;
  margin-bottom:20px;
}

.page-6-pf-authority-content p{
  font-size:15.5px;
  line-height:1.75;
  margin-bottom:15px;
  color:#333;
}

.page-6-pf-authority-content strong{
  color:#4bd0f8;
}

/* LIST */

.page-6-pf-authority-content ul{
  list-style:none;
  padding:0;
  margin:15px 0;
}

.page-6-pf-authority-content li{
  padding-left:26px;
  position:relative;
  margin-bottom:10px;
}

.page-6-pf-authority-content li::before{
  content:'➤';
  position:absolute;
  left:0;
  color:#ffca39;
}

/* MOBILE */

@media(max-width:950px){

  .page-6-pf-authority-wrap{
    flex-direction:column;
  }

  .page-6-pf-authority-image,
  .page-6-pf-authority-content{
    position:relative;
    width:100%;
    left:auto;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }

  .page-6-pf-authority-content{
    margin-top:30px;
  }
}

@media(max-width:600px){

  .page-6-pf-authority-content{
    padding:35px;
  }

  .page-6-pf-authority-content h2{
    font-size:26px;
  }
}


/* ================= PAGE 6 SECTION-4 ================= */
/* ================= PAGE 6 WHO NEEDS PF (PREMIUM) ================= */

.page-6-pf-who{
  padding:70px 20px;
  position:relative;
  font-family:'Poppins',sans-serif;
  background:
    radial-gradient(circle at 20% 30%, #4bd0f820, transparent 40%),
    radial-gradient(circle at 80% 70%, #ffca3920, transparent 40%),
    #f9fdff;
  overflow:hidden;
}

/* Top animated bar */
.page-6-pf-who::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  height:4px;
  width:100%;
  background:linear-gradient(90deg,#4bd0f8,#ffca39,#4bd0f8);
  animation:page6Bar 6s linear infinite;
}

@keyframes page6Bar{
  from{background-position:0%}
  to{background-position:200%}
}

/* Wrapper */
.page-6-pf-who-wrap{
  max-width:1200px;
  margin:auto;
  position:relative;
  z-index:2;
}

/* Header */
.page-6-pf-who-head{
  max-width:720px;
  margin-bottom:70px;
}

.page-6-pf-who-head h2{
  font-size:40px;
  margin-bottom:12px;
}

.page-6-pf-who-head p{
  color:#444;
  margin-bottom:20px;
}

.page-6-pf-who-head h4{
  color:#4bd0f8;
}

/* Grid */

.page-6-pf-who-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
}

/* Cards */

.page-6-pf-who-card{
  position:relative;
  background:#fff;
  border-radius:30px;
  padding:45px 35px;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
  overflow:hidden;

  transform-style:preserve-3d;
  transition:.6s cubic-bezier(.22,.61,.36,1);

  opacity:0;
  transform:translateY(60px) scale(.95);
}

/* Reveal */
.page-6-pf-who.page-6-active .page-6-pf-who-card{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Glow sweep */
/* .page-6-pf-who-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(220deg,transparent,#4bd0f844,transparent);
  opacity:-4;
  transition:.6s;
} */

.page-6-pf-who-card:hover::before{
  opacity:1;
}

/* Hover lift */

.page-6-pf-who-card:hover{
  transform:translateY(-15px) scale(1.03);
  box-shadow:0 40px 90px #ffca3966;
}

/* Icon */

.page-6-pf-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:20px;
  /* animation:page6Pulse 3s infinite; */
}

@keyframes page6Pulse{
  0%{box-shadow:0 0 0 0 #4bd0f880}
  70%{box-shadow:0 0 0 15px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Text */

.page-6-pf-who-card h3{
  margin-bottom:10px;
}

.page-6-pf-who-card p{
  color:#444;
  line-height:1.6;
}

/* Footer */

.page-6-pf-who-footer{
  margin-top:55px;
  max-width:900px;
  font-size:16px;
}

.page-6-pf-who-footer span{
  color:#4bd0f8;
  font-weight:600;
}

/* Responsive */

@media(max-width:900px){

  .page-6-pf-who-grid{
    grid-template-columns:1fr;
  }

  .page-6-pf-who-head h2{
    font-size:30px;
  }
}

/* ================= PAGE 6 SECTION-5 ================= */

/* ================= PAGE 6 PF ELIGIBILITY VIDEO ================= */

.page-6-pf-eligibility{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  font-family:'Poppins',sans-serif;
}

/* Video */

.page-6-pf-eligibility-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
}

/* ================= PAGE 6 PF ELIGIBILITY VIDEO (SECTION ONLY) ================= */

/* Overlay */

.page-6-pf-eligibility-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#02131bdd,#02131bcc,#4bd0f833);
  z-index:-2;
}

/* Wrapper */

.page-6-pf-eligibility-wrap{
  max-width:1200px;
  margin:auto;
  padding:140px 20px;
}

/* Glass Box */

.page-6-pf-eligibility-box{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-radius:32px;
  padding:60px;
  box-shadow:0 40px 110px rgba(0,0,0,.35);

  opacity:0;
  transform:translateY(90px);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

/* Reveal */

.page-6-pf-eligibility.page-6-active .page-6-pf-eligibility-box{
  opacity:1;
  transform:translateY(0);
}

/* Headings */

.page-6-pf-eligibility-box h2{
  font-size:36px;
  margin-bottom:10px;
}

.page-6-pf-eligibility-box h4{
  margin:25px 0;
  color:#4bd0f8;
}

/* Grid */

.page-6-pf-eligibility-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:25px;
}

/* Cards */

.page-6-pf-eligibility-card{
  background:#fff;
  border-radius:18px;
  padding:22px 25px;
  border-left:5px solid #4bd0f8;
  box-shadow:0 12px 30px rgba(0,0,0,.1);

  opacity:0;
  transform:translateY(30px);
  transition:.7s ease;
}

/* Stagger */

.page-6-pf-eligibility.page-6-active .page-6-pf-eligibility-card{
  opacity:1;
  transform:translateY(0);
}

.page-6-pf-eligibility-card:nth-child(1){transition-delay:.2s}
.page-6-pf-eligibility-card:nth-child(2){transition-delay:.35s}
.page-6-pf-eligibility-card:nth-child(3){transition-delay:.5s}
.page-6-pf-eligibility-card:nth-child(4){transition-delay:.65s}

/* Hover */

.page-6-pf-eligibility-card:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 50px #4bd0f855;
}

/* Note */

.page-6-pf-eligibility-note{
  margin-top:35px;
  padding:18px 22px;
  border-radius:12px;
  background:#4bd0f820;
  border-left:5px solid #ffca39;
}

/* Mobile fallback */

@media(max-width:900px){

  .page-6-pf-eligibility-video{
    display:none;
  }

  .page-6-pf-eligibility{
    background:url('assets/img/page-6/pf-bg.jpg') center/cover no-repeat;
  }

  .page-6-pf-eligibility-grid{
    grid-template-columns:1fr;
  }

  .page-6-pf-eligibility-box{
    padding:40px;
  }
}

@media(max-width:600px){

  .page-6-pf-eligibility-box h2{
    font-size:26px;
  }
}

/* ================= PAGE 6 SECTION-6 ================= */
/* ================= PAGE 6 PF DOCUMENTS ================= */

.page-6-pf-docs{
  padding:60px 20px;
  background:linear-gradient(180deg,#ffffff,#f3fbff);
  font-family:'Poppins',sans-serif;
}

.page-6-pf-docs-wrap{
  max-width:1100px;
  margin:auto;
}

/* Header */

.page-6-pf-docs-head{
  max-width:850px;
  margin-bottom:70px;
}

.page-6-pf-docs-head h2{
  font-size:38px;
  margin-bottom:10px;
}

.page-6-pf-docs-head h4{
  margin-top:25px;
  color:#4bd0f8;
}

/* Timeline */

.page-6-pf-docs-timeline{
  position:relative;
  padding:20px 0;
}

/* Center Line */

.page-6-pf-docs-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(#4bd0f8,#ffca39);
  transform:translateX(-50%);
}

/* Items */

.page-6-pf-docs-item{
  width:45%;
  padding:25px 30px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  position:relative;
  margin:35px 0;

  opacity:0;
  transform:translateY(40px);
  transition:.8s cubic-bezier(.22,.61,.36,1);
}

/* ===== AUTO SHINER EFFECT FOR DOC CARDS ===== */

.page-6-pf-docs-item{
  overflow:hidden;
}

/* Shimmer layer */

.page-6-pf-docs-item::after{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(42,197,245,.18),
    rgba(254,189,16,.18),
    transparent 70%
  );
  animation:page6DocShine 6s infinite;
}

/* Stagger timing */

.page-6-pf-docs-item:nth-child(1)::after{animation-delay:0s;}
.page-6-pf-docs-item:nth-child(2)::after{animation-delay:1s;}
.page-6-pf-docs-item:nth-child(3)::after{animation-delay:2s;}
.page-6-pf-docs-item:nth-child(4)::after{animation-delay:3s;}
.page-6-pf-docs-item:nth-child(5)::after{animation-delay:4s;}
.page-6-pf-docs-item:nth-child(6)::after{animation-delay:5s;}

/* Animation */

@keyframes page6DocShine{
  0%{
    left:-120%;
  }
  40%{
    left:120%;
  }
  100%{
    left:120%;
  }
}

/* Reveal */

.page-6-pf-docs.page-6-active .page-6-pf-docs-item{
  opacity:1;
  transform:translateY(0);
}

/* Left / Right */

.page-6-pf-docs-item.left{
  margin-right:auto;
}

.page-6-pf-docs-item.right{
  margin-left:auto;
}

/* Dot */

.page-6-pf-docs-item::before{
  content:'';
  position:absolute;
  top:30px;
  width:14px;
  height:14px;
  background:#ffca39;
  border-radius:50%;
}

.page-6-pf-docs-item.left::before{
  right:-38px;
}

.page-6-pf-docs-item.right::before{
  left:-38px;
}

/* Hover */

.page-6-pf-docs-item:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 70px #4bd0f855;
}

/* Footer */

.page-6-pf-docs-footer{
  margin-top:40px;
  font-size:15.5px;
  text-align: center;
}

/* Mobile */

@media(max-width:900px){

  .page-6-pf-docs-line{
    left:0;
  }

  .page-6-pf-docs-item{
    width:100%;
    padding-left:50px;
  }

  .page-6-pf-docs-item.left,
  .page-6-pf-docs-item.right{
    margin-left:0;
  }

  .page-6-pf-docs-item::before{
    left:-8px!important;
  }

  .page-6-pf-docs-head h2{
    font-size:30px;
  }
}


/* ================= PAGE 6 SECTION-7 ================= */

/* ================= PAGE 6 PF PROCESS (ANIMATED PIPELINE) ================= */

.page-6-pf-process{
  padding:80px 20px;
  background:linear-gradient(180deg,#ffffff,#f4fbff);
  font-family:'Poppins',sans-serif;
}

.page-6-pf-process-wrap{
  max-width:1200px;
  margin:auto;
}

/* Header */

.page-6-pf-process-head{
  max-width:850px;
  margin-bottom:80px;
}

.page-6-pf-process-head h2{
  font-size:38px;
  margin-bottom:10px;
}

/* Flow */

.page-6-pf-process-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:30px;
  margin-bottom:60px;
}

/* Animated connector line */

.page-6-pf-process-line{
  position:absolute;
  top:28px;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(
    90deg,
    #4bd0f8 0%,
    #ffca39 50%,
    #4bd0f8 100%
  );
  background-size:200% 100%;
  animation:page6Flow 3s linear infinite;
  z-index:0;
}

@keyframes page6Flow{
  from{background-position:0%}
  to{background-position:200%}
}

/* Step */

.page-6-pf-process-step{
  text-align:center;
  position:relative;
  z-index:2;

  opacity:0;
  transform:translateY(40px);
  transition:.6s cubic-bezier(.22,.61,.36,1);
}

/* Reveal */

.page-6-pf-process.page-6-active .page-6-pf-process-step{
  opacity:1;
  transform:translateY(0);
}

/* Icon */

.page-6-pf-process-icon{
  width:56px;
  height:56px;
  margin:0 auto 15px;
  border-radius:50%;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  transform:scale(.3);
  opacity:0;
}

/* Sequential icon animation */

.page-6-pf-process.page-6-active .page-6-pf-process-step:nth-child(2) .page-6-pf-process-icon{
  animation:page6Icon 0.6s forwards .1s;
}
.page-6-pf-process.page-6-active .page-6-pf-process-step:nth-child(3) .page-6-pf-process-icon{
  animation:page6Icon 0.6s forwards .4s;
}
.page-6-pf-process.page-6-active .page-6-pf-process-step:nth-child(4) .page-6-pf-process-icon{
  animation:page6Icon 0.6s forwards .7s;
  color: #000000;
}
.page-6-pf-process.page-6-active .page-6-pf-process-step:nth-child(5) .page-6-pf-process-icon{
  animation:page6Icon 0.6s forwards 1s;
}
.page-6-pf-process.page-6-active .page-6-pf-process-step:nth-child(6) .page-6-pf-process-icon{
  animation:page6Icon 0.6s forwards 1.3s;
}

@keyframes page6Icon{
  0%{
    transform:scale(.3);
    opacity:0;
  }
  70%{
    transform:scale(1.15);
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

/* Pulse ring */

.page-6-pf-process-icon::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid #4bd0f8;
  opacity:.5;
  animation:page6Pulse 2.5s infinite;
}

@keyframes page6Pulse{
  0%{transform:scale(.7);opacity:.7}
  100%{transform:scale(1.6);opacity:0}
}

/* Hover */

.page-6-pf-process-step:hover{
  transform:translateY(-10px);
}

/* Footer */

.page-6-pf-process-footer{
  font-size:16px;
  padding:20px 25px;
  background:#4bd0f820;
  border-left:5px solid #ffca39;
  border-radius:12px;
}

/* Mobile */
/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* =========================
   TABLET VIEW (768px - 1024px)
========================= */

@media (max-width:1024px){

.page-6-pf-process-line{
  display:none;
}

.page-6-pf-process-flow{
  grid-template-columns:repeat(2,1fr);
  gap:25px;
}

.page-6-pf-process-step{
  background:#ffffff;
  padding:25px;
  border-radius:16px;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.page-6-pf-process-head{
  text-align:center;
}

}


/* =========================
   MOBILE VIEW (Unique Cards)
========================= */

/* =========================
   MOBILE VIEW
========================= */

@media (max-width:600px){

.page-6-pf-process{
  padding:50px 15px;
}

.page-6-pf-process-flow{
  grid-template-columns:1fr;
  gap:20px;
}

/* Card Style */

.page-6-pf-process-step{
  display:block;
  text-align:center;
  padding:25px 20px;
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Icon on Top */

.page-6-pf-process-icon{
  margin:0 auto 12px;
  width:48px;
  height:48px;
  font-size:20px;
}

/* Heading */

.page-6-pf-process-step h4{
  margin-bottom:6px;
}

/* Title */

.page-6-pf-process-head h2{
  font-size:26px;
  text-align:center;
}

.page-6-pf-process-footer{
  font-size:14px;
}

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width:380px){

.page-6-pf-process-head h2{
  font-size:22px;
}

.page-6-pf-process-step{
  padding:20px 16px;
}

.page-6-pf-process-icon{
  width:42px;
  height:42px;
  font-size:18px;
}

}


/* ================= PAGE 6 SECTION-8 ================= */

/* ================= PAGE 6 PF AFTER REGISTRATION ================= */

.page-6-pf-after{
  padding:80px 20px;
  background:linear-gradient(180deg,#ffffff,#f3fbff);
  font-family:'Poppins',sans-serif;
}

.page-6-pf-after-wrap{
  max-width:1200px;
  margin:auto;
}

/* Header */

.page-6-pf-after-head{
  max-width:1100px;
  margin-bottom:70px;
}

.page-6-pf-after-head h2{
  font-size:38px;
  margin-bottom:10px;
}

.page-6-pf-after-head h4{
  margin-top:25px;
  color:#4bd0f8;
}

/* Flow */

.page-6-pf-after-flow{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin-bottom:50px;
  position:relative;
}

/* Items */

.page-6-pf-after-item{
  position:relative;
  background:#fff;
  padding:40px 30px;
  border-radius:26px;
  box-shadow:0 25px 60px rgba(0,0,0,.08);

  opacity:0;
  transform:translateX(-40px);
  transition:.8s cubic-bezier(.22,.61,.36,1);

  animation:page6Float 4s ease-in-out infinite;
}

/* Floating */

/* @keyframes page6Float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
} */

/* Reveal */

.page-6-pf-after.page-6-active .page-6-pf-after-item{
  opacity:1;
  transform:translateX(0);
}

.page-6-pf-after-item:nth-child(1){transition-delay:.1s}
.page-6-pf-after-item:nth-child(2){transition-delay:.3s}
.page-6-pf-after-item:nth-child(3){transition-delay:.5s}

/* Arrow decoration */

.page-6-pf-after-arrow{
  position:absolute;
  right:-35px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:20px;
  background:#4bd0f8;
  clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%,15% 50%);
}

.page-6-pf-after-item:last-child .page-6-pf-after-arrow{
  display:none;
}

/* Hover */

/* .page-6-pf-after-item:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 35px 80px #4bd0f855;
} */

/* ===== SEQUENTIAL PULSE FOR AFTER REGISTRATION ITEMS ===== */

.page-6-pf-after-item{
  position:relative;
}

/* Pulse animation */

.page-6-pf-after-item{
  animation:
    page6Float 4s ease-in-out infinite,
    page6PulseItem 6s ease-in-out infinite;
}

/* Stagger pulse timing */

.page-6-pf-after-item:nth-child(1){
  animation-delay:0s,0s;
}

.page-6-pf-after-item:nth-child(2){
  animation-delay:0s,2s;
}

.page-6-pf-after-item:nth-child(3){
  animation-delay:0s,4s;
}

/* Pulse keyframes */

@keyframes page6PulseItem{
  0%{
    box-shadow:0 25px 60px rgba(0,0,0,.08);
  }
  20%{
    box-shadow:0 0 0 10px rgba(42,197,245,.05),0 30px 80px #4bd0f899;
  }
  40%{
    box-shadow:0 25px 60px rgba(0,0,0,.08);
  }
  100%{
    box-shadow:0 25px 60px rgba(0,0,0,.08);
  }
}

/* Important */

.page-6-pf-after-important{
  padding:22px 25px;
  background:#4bd0f820;
  border-left:6px solid #ffca39;
  border-radius:12px;
  margin-bottom:25px;
  animation:page6PulseBox 3s infinite;
}

@keyframes page6PulseBox{
  0%{box-shadow:0 0 0 0 #ffca3944}
  70%{box-shadow:0 0 0 15px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Footer */

.page-6-pf-after-footer span{
  color:#4bd0f8;
  font-weight:600;
}

/* Mobile */

@media(max-width:900px){

  .page-6-pf-after-flow{
    grid-template-columns:1fr;
  }

  .page-6-pf-after-arrow{
    display:none;
  }

  .page-6-pf-after-head h2{
    font-size:30px;
  }
}


/* ================= PAGE 6 SECTION-9 ================= */

/* ================= PAGE 6 PF COMPARE ================= */

.page-6-pf-compare{
  position:relative;
  padding:70px 20px;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* Background image */

.page-6-pf-compare-bg{
  position:absolute;
  inset:0;
  background: url("../img/page-6/bg-1.jfif") center/cover no-repeat;
  overflow:hidden;
  z-index:-3;
}

/* Overlay */

.page-6-pf-compare-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(12,74,110,.35),
    rgba(15,118,110,.35),
    rgba(12,74,110,.35)
  );
  z-index:-2;
}


/* Wrap */

.page-6-pf-compare-wrap{
  max-width:1100px;
  margin:auto;
  position:relative;
  z-index:2;
}

/* Head */

.page-6-pf-compare-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 80px;
  color:#333;
}

.page-6-pf-compare-head h2{
  font-size:38px;
  margin-bottom:10px;
}

.page-6-pf-compare-head h4{
  margin-top:20px;
  color: #333;
}

.page-6-pf-compare-head{
  color:#f8fbff;
}

.page-6-pf-compare-head h2{
  text-shadow:0 6px 25px rgba(0,0,0,.6);
}

.page-6-pf-compare-head p{
  color:#dceeff;
}

/* Grid */

.page-6-pf-compare-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:40px;
  align-items:center;
}

/* Cards */

.page-6-pf-compare-card{
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(18px);
  border-radius:28px;
  padding:45px;
  color:#f4faff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 30px 80px rgba(0,0,0,.45);

  opacity:0;
  transition:1s cubic-bezier(.22,.61,.36,1);
}


/* Slide directions */

.page-6-pf-compare-card.left{
  transform:translateX(-80px);
}

.page-6-pf-compare-card.right{
  transform:translateX(80px);
}

/* Reveal */

.page-6-pf-compare.page-6-active .page-6-pf-compare-card{
  transform:translateX(0);
  opacity:1;
}

/* VS */

.page-6-pf-compare-vs{
  font-size:26px;
  font-weight:700;
  color:#000;
  padding:18px;
  border-radius:50%;
  border:2px solid #000;
  animation:page6VsPulse 2.5s infinite;
}

/* Pulse */

@keyframes page6VsPulse{
  0%{box-shadow:0 0 0 0 #ffca3944}
  70%{box-shadow:0 0 0 20px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

/* Hover */

.page-6-pf-compare-card:hover{
  transform:translateY(-10px) scale(1.03)!important;
  /* box-shadow:0 50px 120px #4bd0f866; */
}

/* Footer */

.page-6-pf-compare-footer{
  margin-top:60px;
  text-align:center;
  color:#eaf8ff;
}

/* Mobile */

@media(max-width:900px){

  .page-6-pf-compare-grid{
    grid-template-columns:1fr;
  }

  .page-6-pf-compare-vs{
    margin:30px auto;
  }

  .page-6-pf-compare-head h2{
    font-size:30px;
  }
}

/* ================= PAGE 6 SECTION-10 ================= */
/* ================= PAGE 6 PF WARNING ================= */

.page-6-pf-warning{
  padding:70px 20px 50px;
  background:linear-gradient(180deg,#ffffff,#f6fbff);
  font-family:'Poppins',sans-serif;
}

.page-6-pf-warning-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

/* Image */

.page-6-pf-warning-image{
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.15);
  transition:.6s;
}

.page-6-pf-warning-image img{
  width:100%;
  display:block;
}

.page-6-pf-warning-image:hover{
  transform:rotate(-1deg) scale(1.03);
}

/* Content */

.page-6-pf-warning-content h2{
  font-size:36px;
  margin-bottom:10px;
}

.page-6-pf-warning-content p{
  margin-bottom:25px;
}

/* List */

.page-6-pf-warning-list{
  position:relative;
  padding-left:30px;
}

.page-6-pf-warning-list::before{
  content:'';
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(#4bd0f8,#ffca39);
}

/* Items */
/* ===== PREMIUM ALERT CARDS ===== */

.page-6-pf-warning-item{
  position:relative;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  padding:30px 35px;
  border-radius:22px;
  margin-bottom:28px;

  box-shadow:
    0 18px 45px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.5);

  opacity:0;
  transform:translateX(60px);
  transition:.9s cubic-bezier(.22,.61,.36,1);

  overflow:hidden;
}

/* Animated top border */

.page-6-pf-warning-item::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:4px;
  width:100%;
  background:linear-gradient(90deg,#4bd0f8,#ffca39,#4bd0f8);
  background-size:200% 100%;
  animation:page6WarnLine 4s linear infinite;
}

@keyframes page6WarnLine{
  from{background-position:0%}
  to{background-position:200%}
}

/* Corner glow */

.page-6-pf-warning-item::after{
  content:'';
  position:absolute;
  right:-40px;
  bottom:-40px;
  width:120px;
  height:120px;
  background:#4bd0f833;
  border-radius:50%;
  filter:blur(40px);
}

/* Reveal */

.page-6-pf-warning.page-6-active .page-6-pf-warning-item{
  opacity:1;
  transform:translateX(0);
}

.page-6-pf-warning-item:nth-child(1){transition-delay:.15s}
.page-6-pf-warning-item:nth-child(2){transition-delay:.35s}
.page-6-pf-warning-item:nth-child(3){transition-delay:.55s}

/* Hover spotlight */

.page-6-pf-warning-item:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 35px 90px #4bd0f866;
}

/* Spotlight sweep */

.page-6-pf-warning-item:hover::after{
  animation:page6Spot .8s ease;
}

@keyframes page6Spot{
  from{opacity:0}
  to{opacity:1}
}

/* ICON upgrade */

.page-6-pf-warning-icon{
  position:absolute;
  left:-38px;
  top:28px;
  width:36px;
  height:36px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  border-radius:50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

/* Halo ripple */

.page-6-pf-warning-icon::after{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid #4bd0f8;
  opacity:.5;
  /* animation:page6WarnPulse 2.5s infinite; */
}

/* Sequential breathing glow */
/* 
.page-6-pf-warning-item{
  animation:page6WarnBreath 6s infinite;
} */

.page-6-pf-warning-item:nth-child(1){animation-delay:0s}
.page-6-pf-warning-item:nth-child(2){animation-delay:2s}
.page-6-pf-warning-item:nth-child(3){animation-delay:4s}

@keyframes page6WarnBreath{
  0%,100%{
    box-shadow:0 18px 45px rgba(0,0,0,.12);
  }
  30%{
    box-shadow:0 0 0 12px rgba(42,197,245,.25),0 35px 90px #4bd0f866;
  }
}

/* Hover shake */

.page-6-pf-warning-item:hover{
  animation:page6Shake .25s linear;
}

@keyframes page6Shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-6px)}
  100%{transform:translateX(0)}
}

/* Footer */

.page-6-pf-warning-footer{
  margin-top:20px;
  font-size:15.5px;
}

/* Mobile */

@media(max-width:900px){

  .page-6-pf-warning-wrap{
    grid-template-columns:1fr;
  }

  .page-6-pf-warning-content h2{
    font-size:28px;
  }
}


/* ================= PAGE 6 SECTION-11 ================= */

/* ================= PAGE 6 PF ASSIST ================= */

.page-6-pf-assist{
  padding:60px 20px;
  position:relative;
  font-family:'Poppins',sans-serif;
  background:
    radial-gradient(circle at 30% 20%, #4bd0f830, transparent 40%),
    radial-gradient(circle at 80% 70%, #ffca3930, transparent 40%),
    #ffffff;
  overflow:hidden;
}

.page-6-pf-assist-wrap{
  max-width:1100px;
  margin:auto;
}

/* Head */

.page-6-pf-assist-head{
  max-width:1100px;
  margin-bottom:70px;
}

.page-6-pf-assist-head h2{
  font-size:38px;
  margin-bottom:10px;
}

/* Grid */

.page-6-pf-assist-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:35px;
}

/* Cards */

.page-6-pf-assist-card{
  background:#fff;
  padding:45px 35px;
  border-radius:26px;
  box-shadow:0 25px 60px rgba(0,0,0,.08);
  position:relative;
  overflow:hidden;

  opacity:0;
  transition:.9s cubic-bezier(.22,.61,.36,1);
}

/* Directional entry */

.page-6-pf-assist-card:nth-child(1){transform:translateX(-60px)}
.page-6-pf-assist-card:nth-child(2){transform:translateY(-60px)}
.page-6-pf-assist-card:nth-child(3){transform:translateY(60px)}
.page-6-pf-assist-card:nth-child(4){transform:translateX(60px)}

.page-6-pf-assist.page-6-active .page-6-pf-assist-card{
  opacity:1;
  transform:translate(0,0);
}

/* Hover magnet */

.page-6-pf-assist-card:hover{
  transform:translateY(-12px) scale(1.02)!important;
  box-shadow:0 40px 90px #4bd0f855;
}

/* Icon */

.page-6-pf-assist-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:20px;
  transition:.5s;
}

/* Icon spin */

.page-6-pf-assist-card:hover .page-6-pf-assist-icon{
  transform:rotate(12deg) scale(1.1);
}

/* Footer */

.page-6-pf-assist-footer{
  margin-top:50px;
  font-size:16px;
  padding:22px 25px;
  border-left:5px solid #ffca39;
  background:#4bd0f820;
  border-radius:12px;
}

/* Mobile */

@media(max-width:900px){

  .page-6-pf-assist-grid{
    grid-template-columns:1fr;
  }

  .page-6-pf-assist-head h2{
    font-size:30px;
  }
}


/* ================= PAGE 6 SECTION-12 ================= */

/* ================= PAGE 6 PF FAQ ================= */

.page-6-pf-faq{
  padding:60px 20px;
  background:linear-gradient(180deg,#ffffff,#f3fbff);
  font-family:'Poppins',sans-serif;
}

.page-6-pf-faq-wrap{
  max-width:1200px;
  margin:auto;
}

/* Head */

.page-6-pf-faq-head{
  margin-bottom:70px;
}

.page-6-pf-faq-head h2{
  font-size:38px;
}

/* Grid */

.page-6-pf-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:35px;
}
/* Make last FAQ bubble full width */

.page-6-pf-faq-bubble:nth-child(5){
  grid-column:1 / -1;
  max-width:1000px;
  margin:auto;
}

/* Bubble */

.page-6-pf-faq-bubble{
  position:relative;
  background:#dfe6fb;
  padding:30px 28px;
  border-radius:22px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);

  opacity:0;
  transform:translateY(40px);
  transition:.8s cubic-bezier(.22,.61,.36,1);

  animation:page6BubbleFloat 5s ease-in-out infinite;
}

/* Floating */

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

/* Tail */

.page-6-pf-faq-bubble::after{
  content:'';
  position:absolute;
  bottom:-14px;
  width:18px;
  height:18px;
  background:#dfe6fb;
  transform:rotate(45deg);
}

/* Tail position */

.page-6-pf-faq-bubble.left::after{left:30px}
.page-6-pf-faq-bubble.center::after{left:50%;transform:translateX(-50%) rotate(45deg)}
.page-6-pf-faq-bubble.right::after{right:30px}

/* Reveal */

.page-6-pf-faq.page-6-active .page-6-pf-faq-bubble{
  opacity:1;
  transform:translateY(0);
}

.page-6-pf-faq-bubble:nth-child(1){transition-delay:.1s}
.page-6-pf-faq-bubble:nth-child(2){transition-delay:.25s}
.page-6-pf-faq-bubble:nth-child(3){transition-delay:.4s}
.page-6-pf-faq-bubble:nth-child(4){transition-delay:.55s}
.page-6-pf-faq-bubble:nth-child(5){transition-delay:.7s}

/* Gradient border glow on hover */

.page-6-pf-faq-bubble:hover{
  box-shadow:
    0 0 0 2px #4bd0f860,
    0 25px 70px #ffca3955;
}

/* Mobile */

@media(max-width:900px){

  .page-6-pf-faq-grid{
    grid-template-columns:1fr;
  }

  .page-6-pf-faq-head h2{
    font-size:30px;
  }
}


/* ================= PAGE 6 PF CTA ================= */

.page-6-pf-cta{
  position:relative;
  padding:80px 20px;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* Background */

.page-6-pf-cta-bg{
  position:absolute;
  inset:0;
  background: url("../img/page-6/bg-2-final.jfif") center/cover no-repeat;
  z-index:-3;
}

/* Overlay */

.page-6-pf-cta-overlay{
  position:absolute;
  inset:0;
  /* background:linear-gradient(120deg,#ffffffdd,#ffffffcc,#4bd0f833); */
  z-index:-2;
}

/* Wrap */

.page-6-pf-cta-wrap{
  max-width:1200px;
  margin:auto;
  position:relative;
}

/* Glass box */

.page-6-pf-cta-box{
  max-width:1200px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  padding:60px;
  border-radius:32px;
  box-shadow:0 40px 110px rgba(0,0,0,.2);

  opacity:0;
  transform:translateY(60px);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

/* Reveal */

.page-6-pf-cta.page-6-active .page-6-pf-cta-box{
  opacity:1;
  transform:translateY(0);
}

/* Heading */

.page-6-pf-cta-box h2{
  font-size:40px;
  margin-bottom:15px;
}

.page-6-pf-cta-box h2 span{
  color:#4bd0f8;
  position:relative;
}

.page-6-pf-cta-box h2 span::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#4bd0f8,#ffca39);
  animation:page6Underline 2.5s infinite;
}

@keyframes page6Underline{
  0%{width:0}
  50%{width:100%}
  100%{width:0}
}

/* Button */

.page-6-pf-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#4bd0f899;
  color:#000000;
  padding:14px 30px;
  border-radius:30px;
  margin:25px 0 10px;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
  position:relative;
  overflow:hidden;
}

/* Ripple */

.page-6-pf-cta-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle,#ffffff44 10%,transparent 60%);
  opacity:0;
  transition:.4s;
}

.page-6-pf-cta-btn:hover::before{
  opacity:1;
}

.page-6-pf-cta-btn span{
  transition:.4s;
}

.page-6-pf-cta-btn:hover span{
  transform:translateX(6px);
}

.page-6-pf-cta-btn:hover{
  background:#ffca3990;
  color:#000;
  box-shadow:0 15px 40px #ffca3955;
}

/* Small */

.page-6-pf-cta-box small{
  display:block;
  margin-top:5px;
  color:#333;
}

/* Mobile */

@media(max-width:900px){

  .page-6-pf-cta-box{
    padding:40px;
  }

  .page-6-pf-cta-box h2{
    font-size:30px;
  }
}


/* ========================================================== 
              Page-7 Styling
========================================================== */

/* ===================================================
                  page-7 section-1
==================================================== */
/* ===================================================
   PAGE-7 HERO SECTION
==================================================== */

.page-7-hero {
    position: relative;
    padding: 110px 8%;
    background: linear-gradient(135deg, #ffffff 60%, rgba(42,197,245,0.08));
    overflow: hidden;
}

/* Decorative Glow Background */
.page-7-hero::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(254,189,16,0.25), transparent 70%);
    top: -120px;
    left: -120px;
    border-radius: 50%;
    animation: page7Float 8s ease-in-out infinite alternate;
}

.page-7-hero::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(42,197,245,0.25), transparent 70%);
    bottom: -100px;
    right: -100px;
    border-radius: 50%;
    animation: page7Float 10s ease-in-out infinite alternate;
}

@keyframes page7Float {
    0% { transform: translateY(0px); }
    100% { transform: translateY(25px); }
}

/* Container */
.page-7-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Content */
.page-7-content h1 {
    font-size: 46px;
    font-weight: 800;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    margin-bottom: 24px;
}

.page-7-content p {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 18px;
    max-width: 560px;
}

/* Buttons */
.page-7-buttons {
    display: flex;
    gap: 18px;
    margin-top: 30px;
}

.page-7-btn-primary {
    background: #4bd0f8;
    color: #000000;
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.4s ease;
    box-shadow: 0 8px 25px rgba(42,197,245,0.3);
}

.page-7-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(254,189,16,0.4);
    color: #000;
}

.page-7-btn-outline {
    border: 2px solid #4bd0f8;
    color: #4bd0f8;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.4s ease;
}

.page-7-btn-outline:hover {
    background: #4bd0f8;
    color: #ffffff;
    transform: translateY(-4px);
}

/* Image */
.page-7-image img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
    animation: page7ImageFloat 6s ease-in-out infinite alternate;
}

@keyframes page7ImageFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-15px); }
}

/* Reveal Animation */
.page-7-reveal {
    opacity: 0;
    transform: translateY(60px);
    animation: page7Reveal 1.2s ease forwards;
}

@keyframes page7Reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   MOBILE RESPONSIVE
==================================================== */

@media (max-width: 992px) {

    .page-7-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .page-7-image {
        order: -1;
    }

    .page-7-content h1 {
        font-size: 34px;
        text-align: left;
    }

    .page-7-content p {
        font-size: 15px;
    }

    .page-7-buttons {
        flex-direction: column;
        gap: 14px;
    }

    .page-7-btn-primary,
    .page-7-btn-outline {
        width: 100%;
        text-align: center;
    }

}

/* ===================================================
   PAGE-7 SECTION-2 IMPORTANCE
==================================================== */

.page-7-importance {
    padding: 90px 8%;
    background: linear-gradient(135deg, rgba(42,197,245,0.05), rgba(254,189,16,0.05));
    position: relative;
    overflow: hidden;
}

/* Decorative Accent Line */
.page-7-importance::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 6px;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
}

/* Container */
.page-7-importance-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

/* Heading */
.page-7-importance h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 28px;
    color: #4bd0f899;
}

/* Intro */
.page-7-intro {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
    max-width: 900px;
    margin: 0 auto 16px auto;
}

/* Feature Grid */
.page-7-features {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* Feature Card */
.page-7-feature {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    transition: all 0.4s ease;
    border: 1px solid rgba(42,197,245,0.1);
}

/* Hover Effect */
.page-7-feature:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(254,189,16,0.2);
    border-color: #ffca39;
}

/* Icon Styling */
.page-7-icon {
    font-size: 34px;
    min-width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #4bd0f899, #ffca3999);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(42,197,245,0.3);
}

/* Titles */
.page-7-feature h3 {
    font-size: 20px;
    margin-bottom: 6px;
    color: #111827;
    font-weight: 700;
}

/* Text */
.page-7-feature p {
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
}

/* Reveal Animation */
.page-7-reveal {
    opacity: 0;
    transform: translateY(60px);
    animation: page7RevealSection 1.2s ease forwards;
}

@keyframes page7RevealSection {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   MOBILE RESPONSIVE
==================================================== */

@media (max-width: 992px) {

    .page-7-importance h2 {
        font-size: 32px;
    }

    .page-7-features {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .page-7-feature {
        padding: 22px;
    }

    .page-7-icon {
        font-size: 26px;
        min-width: 45px;
        height: 45px;
    }

    .page-7-feature h3 {
        font-size: 18px;
    }

}

/* ===================================================
   PAGE-7 SECTION-3 HYD EXPERTISE
==================================================== */

.page-7-hyd-tax-expertise {
    position: relative;
    padding: 120px 8%;
    background: linear-gradient(135deg, #0f172a, #111827);
    overflow: hidden;
    color: #ffffff;
}

/* Animated Light Overlay */
.page-7-hyd-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(42,197,245,0.15), transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(254,189,16,0.15), transparent 40%);
    animation: page7HydGlow 8s ease-in-out infinite alternate;
}

@keyframes page7HydGlow {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

.page-7-hyd-container {
    position: relative;
    max-width: 1200px;
    margin: auto;
    text-align: center;
    z-index: 2;
}

/* Heading */
.page-7-hyd-container h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subtitle */
.page-7-hyd-subtitle {
    font-size: 17px;
    line-height: 1.8;
    color: #d1d5db;
    max-width: 900px;
    margin: 0 auto 70px;
}

/* Grid */
.page-7-hyd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Glass Card */
.page-7-hyd-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
    padding: 35px 25px;
    border-radius: 20px;
    border: 1px solid rgba(42,197,245,0.2);
    transition: all 0.4s ease;
    position: relative;
}

/* Gradient Border Effect */
.page-7-hyd-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    -webkit-mask: 
        linear-gradient(#000 0 0) content-box, 
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: 0.4s;
}

.page-7-hyd-card:hover::before {
    opacity: 1;
}

.page-7-hyd-card:hover {
    transform: translateY(-10px);
}

/* Icon */
.page-7-hyd-icon {
    font-size: 36px;
    margin-bottom: 16px;
    color: #ffca39;
    transition: 0.3s;
}

.page-7-hyd-card:hover .page-7-hyd-icon {
    transform: scale(1.2);
    color: #4bd0f8;
}

/* Title */
.page-7-hyd-card h3 {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 700;
    color: #ffffff;
}

/* Text */
.page-7-hyd-card p {
    font-size: 15px;
    color: #d1d5db;
    line-height: 1.6;
}

/* Stagger Reveal */
.page-7-hyd-card {
    opacity: 0;
    transform: translateY(40px);
    animation: page7HydReveal 0.8s ease forwards;
}

.page-7-hyd-card:nth-child(1) { animation-delay: 0.2s; }
.page-7-hyd-card:nth-child(2) { animation-delay: 0.3s; }
.page-7-hyd-card:nth-child(3) { animation-delay: 0.4s; }
.page-7-hyd-card:nth-child(4) { animation-delay: 0.5s; }
.page-7-hyd-card:nth-child(5) { animation-delay: 0.6s; }
.page-7-hyd-card:nth-child(6) { animation-delay: 0.7s; }

@keyframes page7HydReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE
==================================================== */

@media (max-width: 992px) {
    .page-7-hyd-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .page-7-hyd-container h2 {
        font-size: 32px;
    }
}

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

    .page-7-hyd-tax-expertise {
        padding: 90px 6%;
    }

    .page-7-hyd-card {
        padding: 25px 20px;
    }
}

/* ===================================================
   PAGE-7 SECTION-4 ITR FORMS
==================================================== */

.page-7-itr-forms {
    padding: 60px 8%;
    background: #ffffff;
    position: relative;
}

/* Container */
.page-7-itr-forms-container {
    max-width: 1200px;
    margin: auto;
}

/* Heading */
.page-7-itr-forms h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #111827;
    position: relative;
}

/* Gradient underline */
.page-7-itr-forms h2::after {
    content: "";
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    display: block;
    margin-top: 12px;
    border-radius: 10px;
}

/* Intro */
.page-7-itr-forms-intro {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
    max-width: 1000px;
    margin-bottom: 50px;
}

/* Table Wrapper */
.page-7-itr-table-wrapper {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06);
    margin-bottom: 50px;
}

/* Table */
.page-7-itr-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

/* Table Header */
.page-7-itr-table th {
    background: linear-gradient(90deg, #4bd0f890, #ffca3990);
    color: #000000;
    padding: 18px;
    font-size: 16px;
    text-align: left;
}

/* Table Cells */
.page-7-itr-table td {
    padding: 18px;
    font-size: 15px;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
    transition: 0.3s;
}

/* Row Hover Effect */
.page-7-itr-table tbody tr:hover {
    background: rgba(254,189,16,0.08);
}

/* Help Box */
.page-7-itr-help-box {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, rgba(42,197,245,0.1), rgba(254,189,16,0.1));
    padding: 26px;
    border-radius: 16px;
    border-left: 5px solid #ffca39;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.4s;
}

.page-7-itr-help-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(42,197,245,0.2);
}

.page-7-help-icon {
    font-size: 24px;
    color: #4bd0f8;
}

.page-7-itr-help-box p {
    font-size: 16px;
    color: #111827;
    line-height: 1.7;
}

/* Reveal */
.page-7-reveal {
    opacity: 0;
    transform: translateY(50px);
    animation: page7FormsReveal 1s ease forwards;
}

@keyframes page7FormsReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE
==================================================== */

@media (max-width: 992px) {

    .page-7-itr-forms h2 {
        font-size: 30px;
    }

    .page-7-itr-forms-intro {
        font-size: 15px;
    }

    .page-7-itr-table th,
    .page-7-itr-table td {
        font-size: 14px;
        padding: 14px;
    }

    .page-7-itr-help-box {
        flex-direction: column;
    }
}

/* ===================================================
   PAGE-7 SECTION-5 WIDE IMAGE
==================================================== */

.page-7-wide-image-section {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}

/* Cinematic Image */
.page-7-wide-image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    animation: page7WideZoom 12s ease-in-out infinite alternate;
    transition: transform 0.6s ease;
}

/* Subtle Zoom Animation */
@keyframes page7WideZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* Gradient Overlay */
.page-7-wide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(42,197,245,0.25),
        rgba(0,0,0,0.2),
        rgba(254,189,16,0.25)
    );
    z-index: 2;
    mix-blend-mode: multiply;
}

/* Soft Fade Edges */
.page-7-wide-image-section::before,
.page-7-wide-image-section::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: 3;
}

.page-7-wide-image-section::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffff, transparent);
}

.page-7-wide-image-section::after {
    bottom: 0;
    background: linear-gradient(to top, #ffffff, transparent);
}

/* Reveal Animation */
.page-7-reveal {
    opacity: 0;
    transform: translateY(40px);
    animation: page7WideReveal 1s ease forwards;
}

@keyframes page7WideReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE
==================================================== */

@media (max-width: 992px) {
    .page-7-wide-image-section {
        height: 250px;
    }
}

@media (max-width: 576px) {
    .page-7-wide-image-section {
        height: 200px;
    }

    .page-7-wide-overlay {
        background: linear-gradient(
            to bottom,
            rgba(42,197,245,0.3),
            rgba(254,189,16,0.3)
        );
    }
}

/* ===================================================
   PAGE-7 SECTION-6 FILING COMPARISON
==================================================== */

.page-7-filing-comparison {
    padding: 120px 8% 60px;
    background: linear-gradient(
        135deg,
        rgba(254,189,16,0.05),
        rgba(42,197,245,0.05)
    );
    position: relative;
}

/* Container */
.page-7-filing-container {
    max-width: 1200px;
    margin: auto;
}

/* Heading */
.page-7-filing-container h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #111827;
}

.page-7-filing-container h2 span {
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Subheading */
.page-7-filing-container h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #4bd0f8;
}

/* Intro */
.page-7-intro-text {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
    max-width: 950px;
    margin-bottom: 60px;
}

/* Grid */
.page-7-pitfalls-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Cards */
.page-7-pitfall-card {
    position: relative;
    padding: 30px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    overflow: hidden;
}

/* Left Animated Accent Bar */
.page-7-pitfall-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 6px;
    background: linear-gradient(to bottom, #ffca39, #4bd0f8);
    transition: width 0.4s ease;
}

.page-7-pitfall-card:hover::before {
    width: 100%;
    opacity: 0.08;
}

/* Hover Effect */
.page-7-pitfall-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 60px rgba(42,197,245,0.2);
}

/* Titles */
.page-7-pitfall-card h4 {
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 700;
    color: #111827;
}

/* Text */
.page-7-pitfall-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
}

/* Stagger Animation */
.page-7-pitfall-card {
    opacity: 0;
    transform: translateY(40px);
    animation: page7PitfallReveal 0.8s ease forwards;
}

.page-7-pitfall-card:nth-child(1) { animation-delay: 0.2s; }
.page-7-pitfall-card:nth-child(2) { animation-delay: 0.3s; }
.page-7-pitfall-card:nth-child(3) { animation-delay: 0.4s; }
.page-7-pitfall-card:nth-child(4) { animation-delay: 0.5s; }
.page-7-pitfall-card:nth-child(5) { animation-delay: 0.6s; }

@keyframes page7PitfallReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE
==================================================== */

@media (max-width: 992px) {

    .page-7-pitfalls-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-7-filing-container h2 {
        font-size: 30px;
    }
}

@media (max-width: 576px) {

    .page-7-pitfalls-grid {
        grid-template-columns: 1fr;
    }

    .page-7-intro-text {
        font-size: 15px;
    }

    .page-7-pitfall-card {
        padding: 22px;
    }
}

/* ===================================================
   PAGE-7 SECTION-7 EXPERT BENEFITS
==================================================== */

.page-7-expert-benefits {
    padding: 60px 8%;
    background: linear-gradient(
        to bottom,
        #ffffff,
        rgba(42,197,245,0.04)
    );
}

/* Container */
.page-7-benefits-container {
    max-width: 1200px;
    margin: auto;
}

/* Heading */
.page-7-benefits-container h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 60px;
    text-align: center;
    color: #111827;
    position: relative;
}

.page-7-benefits-container h2::after {
    content: "";
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    display: block;
    margin: 14px auto 0;
    border-radius: 10px;
}

/* Grid */
.page-7-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Cards */
.page-7-benefit-card {
    background: #ffffff;
    padding: 32px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Top Accent Line */
.page-7-benefit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 0%;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    transition: width 0.4s ease;
}

.page-7-benefit-card:hover::before {
    width: 100%;
}

/* Hover Lift */
.page-7-benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(42,197,245,0.15);
}

/* Text */
.page-7-benefit-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 700;
    color: #111827;
}

.page-7-benefit-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
}

/* Wide Cards */
.page-7-wide {
    grid-column: span 1;
}

/* Note Box */
.page-7-benefits-note {
    margin-top: 60px;
    padding: 28px;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(254,189,16,0.12),
        rgba(42,197,245,0.12)
    );
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border-left: 5px solid #4bd0f8;
    transition: 0.4s;
}

.page-7-benefits-note:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(254,189,16,0.2);
}

.page-7-note-icon {
    font-size: 22px;
    color: #ffca39;
}

.page-7-benefits-note p {
    font-size: 16px;
    line-height: 1.7;
    color: #111827;
}

/* Reveal */
.page-7-reveal {
    opacity: 0;
    transform: translateY(50px);
    animation: page7BenefitsReveal 1s ease forwards;
}

@keyframes page7BenefitsReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE
==================================================== */

@media (max-width: 992px) {

    .page-7-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-7-wide {
        grid-column: span 2;
    }

    .page-7-benefits-container h2 {
        font-size: 30px;
    }
}

@media (max-width: 576px) {

    .page-7-benefits-grid {
        grid-template-columns: 1fr;
    }

    .page-7-wide {
        grid-column: span 1;
    }

    .page-7-benefit-card {
        padding: 24px;
    }

    .page-7-benefits-note {
        flex-direction: column;
    }
}

/* ===================================================
   PAGE-7 SECTION-8 TAX REGIME
==================================================== */

.page-7-tax-regime {
    padding: 60px 8% 120px;
    background: linear-gradient(
        to bottom,
        rgba(42,197,245,0.03),
        #ffffff
    );
}

/* Container */
.page-7-tax-regime-container {
    max-width: 1200px;
    margin: auto;
}

/* Heading */
.page-7-tax-regime h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 18px;
    text-align: center;
    color: #111827;
}

.page-7-regime-intro {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

/* Columns */
.page-7-regime-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

/* Column Base */
.page-7-regime-column {
    padding: 40px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    transition: 0.4s;
}

/* OLD Regime Styling */
.page-7-old {
    border-top: 6px solid #ffca39;
}

/* NEW Regime Styling */
.page-7-new {
    border-top: 6px solid #4bd0f8;
}

/* Column Titles */
.page-7-regime-column h3 {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 700;
}

/* Cards */
.page-7-regime-card {
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 20px;
    background: #f9fafb;
    transition: 0.4s;
}

/* Hover Effect */
.page-7-old .page-7-regime-card:hover {
    background: rgba(254,189,16,0.1);
    transform: translateX(6px);
}

.page-7-new .page-7-regime-card:hover {
    background: rgba(42,197,245,0.1);
    transform: translateX(6px);
}

/* Card Text */
.page-7-regime-card h4 {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #111827;
}

.page-7-regime-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
}

/* Footer */
.page-7-regime-footer {
    margin-top: 60px;
    text-align: center;
}

.page-7-regime-footer p {
    max-width: 950px;
    margin: 0 auto 30px;
    font-size: 16px;
    line-height: 1.7;
    color: #111827;
}

/* CTA Button */
.page-7-regime-btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    color: #000000;
    background: linear-gradient(90deg, #4bd0f899, #ffca3999);
    transition: 0.4s;
    box-shadow: 0 10px 30px rgba(42,197,245,0.3);
}

.page-7-regime-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(254,189,16,0.4);
    color: #000;
}

/* Reveal */
.page-7-reveal {
    opacity: 0;
    transform: translateY(40px);
    animation: page7RegimeReveal 1s ease forwards;
}

@keyframes page7RegimeReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE
==================================================== */

@media (max-width: 992px) {

    .page-7-regime-columns {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .page-7-tax-regime h2 {
        font-size: 30px;
    }

    .page-7-regime-column {
        padding: 28px;
    }
}

/* ===================================================
   PAGE-7 SECTION-9 ANALYTICS BANNER
==================================================== */

.page-7-analytics-banner {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

/* Image */
.page-7-analytics-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    animation: page7AnalyticsZoom 14s ease-in-out infinite alternate;
}

/* Subtle Zoom Animation */
@keyframes page7AnalyticsZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.06); }
}

/* Brand Overlay */
.page-7-analytics-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(42,197,245,0.25),
        rgba(0,0,0,0.3),
        rgba(254,189,16,0.25)
    );
    z-index: 2;
    mix-blend-mode: multiply;
}

/* Soft Section Blending */
/* .page-7-analytics-banner::before,
.page-7-analytics-banner::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 3;
} */

.page-7-analytics-banner::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffff, transparent);
}

.page-7-analytics-banner::after {
    bottom: 0;
    background: linear-gradient(to top, #ffffff, transparent);
}

/* Reveal Animation */
.page-7-reveal {
    opacity: 0;
    transform: translateY(40px);
    animation: page7AnalyticsReveal 1s ease forwards;
}

@keyframes page7AnalyticsReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE
==================================================== */

@media (max-width: 992px) {
    .page-7-analytics-banner {
        height: 220px;
    }
}

@media (max-width: 576px) {
    .page-7-analytics-banner {
        height: 180px;
    }

    .page-7-analytics-overlay {
        background: linear-gradient(
            to bottom,
            rgba(42,197,245,0.35),
            rgba(254,189,16,0.35)
        );
    }
}

/* ===================================================
   PAGE-7 SECTION-10 TRANSACTION TRACKING
==================================================== */

.page-7-transaction-tracking {
    padding: 120px 8% 60px;
    background: linear-gradient(
        to bottom,
        #ffffff,
        rgba(254,189,16,0.04)
    );
}

/* Container */
.page-7-tracking-container {
    max-width: 1200px;
    margin: auto;
}

/* Headings */
.page-7-transaction-tracking h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #111827;
}

.page-7-transaction-tracking h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 22px;
    color: #4bd0f8;
}

/* Intro */
.page-7-tracking-intro {
    font-size: 17px;
    line-height: 1.8;
    color: #374151;
    max-width: 900px;
    margin-bottom: 60px;
}

/* Grid */
.page-7-tracking-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

/* Tracking Cards */
.page-7-tracking-item {
    background: #ffffff;
    padding: 30px;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Accent Border */
.page-7-tracking-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    background: linear-gradient(to bottom, #ffca39, #4bd0f8);
    transition: width 0.4s ease;
}

.page-7-tracking-item:hover::before {
    width: 100%;
    opacity: 0.07;
}

.page-7-tracking-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px rgba(42,197,245,0.15);
}

/* Icon */
.page-7-tracking-icon {
    font-size: 34px;
    margin-bottom: 12px;
    color: #ffca39;
}

/* Text */
.page-7-tracking-item h4 {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 700;
    color: #111827;
}

.page-7-tracking-item p {
    font-size: 15px;
    line-height: 1.7;
    color: #374151;
}

/* Bottom Note */
.page-7-tracking-note {
    padding: 26px;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        rgba(42,197,245,0.12),
        rgba(254,189,16,0.12)
    );
    border-left: 5px solid #4bd0f8;
}

.page-7-tracking-note p {
    font-size: 16px;
    line-height: 1.7;
    color: #111827;
}

/* Reveal */
.page-7-reveal {
    opacity: 0;
    transform: translateY(40px);
    animation: page7TrackingReveal 1s ease forwards;
}

@keyframes page7TrackingReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===================================================
   RESPONSIVE
==================================================== */

@media (max-width: 992px) {

    .page-7-tracking-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .page-7-transaction-tracking h2 {
        font-size: 30px;
    }

    .page-7-tracking-item {
        padding: 22px;
    }
}

/* ===================================================
   PAGE-7 PROCESS ADVANCED ANIMATION
==================================================== */

.page-7-process-section {
    padding: 60px 6%;
    background: linear-gradient(
        to bottom,
        #ffffff,
        rgba(42,197,245,0.04)
    );
    overflow: hidden;
}

/* Container */
.page-7-process-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
}

/* Step */
.page-7-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
    opacity: 0;
    transform: translateY(40px);
    animation: page7StepReveal 0.8s ease forwards;
}

/* Stagger Reveal */
.page-7-process-step:nth-child(1) { animation-delay: 0.2s; }
.page-7-process-step:nth-child(3) { animation-delay: 0.4s; }
.page-7-process-step:nth-child(5) { animation-delay: 0.6s; }
.page-7-process-step:nth-child(7) { animation-delay: 0.8s; }
.page-7-process-step:nth-child(9) { animation-delay: 1s; }

@keyframes page7StepReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animated Circle */
.page-7-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: #fff;
    position: relative;
    z-index: 2;
    border: 6px solid transparent;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(135deg, #4bd0f8, #ffca39);
    background-origin: border-box;
    background-clip: content-box, border-box;
    animation: page7Pulse 3s ease-in-out infinite;
}

/* Pulse Animation */
@keyframes page7Pulse {
    0% { box-shadow: 0 0 0 0 rgba(42,197,245,0.4); }
    50% { box-shadow: 0 0 25px 10px rgba(254,189,16,0.25); }
    100% { box-shadow: 0 0 0 0 rgba(42,197,245,0.4); }
}

/* Floating Motion */
.page-7-process-step:hover .page-7-circle {
    transform: translateY(-8px) scale(1.08);
    transition: 0.4s ease;
}

/* Step Label */
.page-7-process-step p {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

/* Animated Connector Line */
.page-7-arrow {
    width: 70px;
    height: 4px;
    background: linear-gradient(
        90deg,
        rgba(42,197,245,0.3),
        #4bd0f8,
        #ffca39,
        rgba(254,189,16,0.3)
    );
    background-size: 200% 100%;
    animation: page7Flow 2s linear infinite;
    position: relative;
}

/* Flow Animation */
@keyframes page7Flow {
    0% { background-position: 200% 0; }
    100% { background-position: 0% 0; }
}


/* Arrow Head */
.page-7-arrow::after {
    content: "";
    position: absolute;
    right: -10px;
    top: -4px;
    border-left: 10px solid #ffca39;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* ===================================================
   MOBILE VERSION (VERTICAL TIMELINE)
==================================================== */

@media (max-width: 992px) {

    .page-7-process-container {
        flex-direction: column;
        gap: 30px;
    }

    .page-7-arrow {
        width: 4px;
        height: 50px;
        background: linear-gradient(
            to bottom,
            #4bd0f8,
            #ffca39
        );
        animation: page7FlowVertical 2s linear infinite;
    }

    @keyframes page7FlowVertical {
    0% { background-position: 0 200%; }
    100% { background-position: 0 0; }
}


    .page-7-arrow::after {
        right: auto;
        left: -6px;
        top: auto;
        bottom: -10px;
        border-left: none;
        border-top: 10px solid #ffca39;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
    }

    .page-7-circle {
        width: 90px;
        height: 90px;
        font-size: 26px;
    }
}

/* ===================================================
   PAGE-7 SECTION-12 FINAL ALIGNED VERSION
==================================================== */
.gms-page-7-itr-process-v2 {
    padding: 80px 6%;
    background: #ffffff;
}

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

/* 1️⃣ Heading & Subtitle */
.gms-page-7-title {
    font-size: 36px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 20px;
    line-height: 1.3;
    text-align: center;
}

.gms-page-7-subtitle {
    font-size: 16px;
    line-height: 1.8;
    color: #374151;
    margin-bottom: 60px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 2️⃣ Steps Grid - Switched to Grid for perfect height matching */
.gms-page-7-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    position: relative;
    margin-bottom: 60px;
}

/* Connecting Line - Optimized for Grid */
.gms-page-7-steps-grid::before {
    content: '';
    position: absolute;
    top: 32px; 
    left: 50px;
    right: 50px;
    height: 3px;
    background: linear-gradient(90deg, #4bd0f8, #ffca39);
    z-index: 1;
}

/* Step Card - Enhanced for uniformity */
.gms-page-7-step-card {
    background: #ffffff;
    padding: 40px 25px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(42,197,245,0.1);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    z-index: 2;
    
    /* This forces the card to fill the grid height and align internal content */
    display: flex;
    flex-direction: column;
    height: 100%; 
}

.gms-page-7-step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: #4bd0f8;
}

.gms-page-7-step-icon {
    width: 65px;
    height: 65px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4bd0f8, #ffca39);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
    flex-shrink: 0; /* Prevents icon from squishing */
}

.gms-page-7-step-content {
    flex-grow: 1; /* Pushes content to fill space evenly */
    display: flex;
    flex-direction: column;
}

.gms-page-7-step-content h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111827;
}

.gms-page-7-step-content p {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* 3️⃣ Highlights Section */
.gms-page-7-highlights-v2 {
    border-top: 1px solid #e5e7eb;
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    font-weight: 600;
    color: #111827;
}

/* --- RESPONSIVE BREAKPOINTS --- */

@media (max-width: 1024px) {
    .gms-page-7-steps-grid {
        grid-template-columns: 1fr; /* Single column for tablets/mobile */
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .gms-page-7-steps-grid::before {
        display: none; /* Remove horizontal line on vertical stack */
    }
}

@media (max-width: 768px) {
    .gms-page-7-itr-process-v2 {
        padding: 60px 20px;
    }

    .gms-page-7-title {
        font-size: 28px;
    }

    .gms-page-7-highlights-v2 {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
}



/* ===================================================
   PAGE-7 SECTION-13 FIXED ALIGNMENT
==================================================== */

.page-7-documents-section {
  padding: 60px 6%;
  background: #ffffff;
}

.page-7-doc-container {
  max-width: 1100px;
  margin: auto;
}

/* Header */
.page-7-doc-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 70px;
}

.page-7-doc-header h2 {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #111827;
  line-height: 1.3;
}

.page-7-doc-header p {
  font-size: 16px;
  color: #374151;
  line-height: 1.8;
}

/* Grid */
.page-7-documents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: stretch;
}

/* Card */
.page-7-doc-card {
  background: #ffffff;
  padding: 35px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  transition: 0.3s ease;
}

.page-7-doc-card:hover {
  border-color: #4bd0f8;
  box-shadow: 0 20px 50px rgba(42,197,245,0.12);
}

/* List */
.page-7-doc-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-7-doc-card li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.7;
  color: #111827;
}

.page-7-doc-card li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  background: linear-gradient(135deg, #4bd0f8, #ffca39);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons */
.page-7-doc-buttons {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.page-7-btn-primary {
  padding: 14px 32px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(90deg, #4bd0f899, #ffca3999);
  color: #000000;
  transition: 0.3s ease;
}

.page-7-btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(42,197,245,0.25);
}

.page-7-btn-outline {
  padding: 12px 30px;
  border-radius: 40px;
  border: 2px solid #4bd0f8;
  text-decoration: none;
  font-weight: 600;
  color: #4bd0f8;
  transition: 0.3s ease;
}

.page-7-btn-outline:hover {
  background: #4bd0f8;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
  .page-7-documents-grid {
    grid-template-columns: 1fr;
  }

  .page-7-doc-header h2 {
    font-size: 28px;
  }
}

/* ===================================================
   PAGE-7 SECTION-14 PREMIUM CITY SECTION
==================================================== */

.page-7-city-itr-section {
  padding: 60px 6%;
  background: linear-gradient(
    to bottom,
    #ffffff,
    rgba(42,197,245,0.05)
  );
}

.page-7-city-container {
  max-width: 1150px;
  margin: auto;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 60px;
  align-items: center;
}

/* Image */
.page-7-city-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.08);
  transition: 0.4s ease;
}

.page-7-city-image img:hover {
  transform: scale(1.03);
}

/* Content */
.page-7-city-content h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #111827;
}

.page-7-city-content p {
  font-size: 15px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 15px;
}

.page-7-city-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 30px 0 15px;
}

/* Trust Points */
.page-7-trust-points {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}

.page-7-trust-points li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #222;
}

.page-7-trust-points li::before {
  content: "✔";
  position: absolute;
  left: 0;
  font-weight: bold;
  background: linear-gradient(135deg, #4bd0f8, #ffca39);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Stats */
.page-7-stats {
  display: flex;
  gap: 25px;
  margin: 40px 0;
}

.page-7-stat-box {
  flex: 1;
  background: linear-gradient(
    135deg,
    rgba(42,197,245,0.15),
    rgba(254,189,16,0.15)
  );
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  transition: 0.4s ease;
}

.page-7-stat-box:hover {
  transform: translateY(-6px);
}

.page-7-stat-box h4 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 5px;
  color: #4bd0f8;
}

.page-7-stat-box p {
  font-size: 14px;
  color: #111827;
}

/* CTA */
.page-7-cta {
  margin-top: 40px;
  text-align: center;
}

.page-7-cta h4 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 5px;
}

.page-7-cta p {
  font-size: 14px;
  color: #555;
}

/* Buttons */
.page-7-cta-buttons {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-7-btn-call {
  padding: 12px 26px;
  border-radius: 40px;
  background: linear-gradient(90deg, #4bd0f899, #ffca3999);
  color: #000000;
  font-weight: 600;
  text-decoration: none;
  transition: 0.4s ease;
}

.page-7-btn-call:hover {
  transform: translateY(-4px);
  color: #000;
  box-shadow: 0 20px 50px rgba(42,197,245,0.4);
}

.page-7-btn-whatsapp {
  padding: 12px 26px;
  border-radius: 40px;
  border: 2px solid #4bd0f8;
  color: #4bd0f8;
  text-decoration: none;
  font-weight: 600;
  transition: 0.4s ease;
}

.page-7-btn-whatsapp:hover {
  background: #4bd0f899;
  color: #000;
}

/* Reveal Animation */
.page-7-reveal {
  opacity: 0;
  transform: translateY(40px);
  animation: page7CityReveal 1s ease forwards;
}

@keyframes page7CityReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 992px) {

  .page-7-city-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .page-7-stats {
    flex-direction: column;
  }

  .page-7-city-content h2 {
    font-size: 26px;
  }
}

/* ===================================================
   PAGE-7 SECTION-15 PREMIUM FAQ
==================================================== */

.page-7-faq-section {
  padding: 80px 6%;
  background: linear-gradient(
    to bottom,
    #ffffff,
    rgba(254,189,16,0.05)
  );
}

.page-7-faq-container {
  max-width: 900px;
  margin: auto;
}

.page-7-faq-container h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 50px;
  color: #111827;
}

/* FAQ Item */
.page-7-faq-item {
  border-bottom: 1px solid #e5e7eb;
}

/* Question Button */
.page-7-faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  padding: 18px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s ease;
  color: #111827;
}

.page-7-faq-question span {
  font-size: 20px;
  font-weight: bold;
  color: #4bd0f8;
  transition: 0.3s ease;
}

/* Hover */
.page-7-faq-question:hover {
  color: #4bd0f8;
}

/* Answer */
.page-7-faq-answer {
  max-height: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.7;
  color: #374151;
  transition: all 0.4s ease;
  padding-right: 20px;
}

/* Active State */
.page-7-faq-item.active .page-7-faq-answer {
  max-height: 200px;
  padding-bottom: 20px;
}

.page-7-faq-item.active .page-7-faq-question span {
  transform: rotate(45deg);
  color: #ffca39;
}


/* ========================================================== 
              Page-8 Styling
========================================================== */

/* ===================================================
                  page-8 section-1
==================================================== */

.page-8-gst-hero{
  position:relative;
  padding:100px 20px;
  font-family:'Poppins',sans-serif;
  background:linear-gradient(135deg,#4bd0f810,#ffca3920);
  overflow:hidden;
}

/* Background Shapes */
.page-8-bg-shape{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.35;
}

.page-8-one{
  width:320px;
  height:320px;
  background:#4bd0f8;
  top:-90px;
  left:-90px;
}

.page-8-two{
  width:360px;
  height:360px;
  background:#ffca39;
  bottom:-140px;
  right:-140px;
}

/* Layout */
.page-8-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:70px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* Image Card */
.page-8-image-box{
  background:#fff;
  padding:18px;
  border-radius:26px;
  box-shadow:0 30px 70px rgba(0,0,0,.12);
  transition:.5s ease;
}

.page-8-image-box:hover{
  transform:translateY(-22px) rotate(-5deg);
  box-shadow:0 40px 90px rgba(42,197,245,.35);
}

.page-8-image-box img{
  width:100%;
  border-radius:18px;
}

/* Content */
.page-8-content h1{
  font-size:42px;
  font-weight:700;
  color:#0f172a;
  line-height:1.3;
}

.page-8-content h1 span{
  color:#4bd0f8;
}

.page-8-content p{
  margin:22px 0 35px;
  color:#475569;
  line-height:1.8;
  font-size:16px;
  max-width:520px;
}

/* CTA Button */
.page-8-btn{
  display:inline-block;
  padding:14px 36px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#000;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.4px;
  transition:.4s ease;
  box-shadow:0 15px 35px rgba(42,197,245,.4);
}

.page-8-btn:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 22px 45px rgba(254,189,16,.5);
  color: #000;
}

/* Responsive */
@media(max-width:900px){
  .page-8-container{
    grid-template-columns:1fr;
    text-align:center;
  }

  .page-8-content p{
    margin:auto;
  }
}

@media(max-width:520px){
  .page-8-content h1{
    font-size:30px;
  }
}

/* ===================================================
                  page-8 section-2
==================================================== */

/* ================= PAGE 8 INFO SECTION ================= */

.page-8-gst-info{
  padding:120px 20px;
  background:#ffffff44;
  font-family:'Poppins',sans-serif;
  position:relative;
  overflow:hidden;
}

/* Floating dots */
.page-8-gst-info:before,
.page-8-gst-info:after{
  content:'';
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  background:#4bd0f820;
  filter:blur(70px);
}

.page-8-gst-info:before{
  top:40px;
  right:60px;
}

.page-8-gst-info:after{
  bottom:40px;
  left:80px;
  background:#ffca3930;
}

/* Card */
.page-8-info-wrap{
  max-width:1200px;
  margin:auto;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);
  padding:70px 60px;
  border-radius:30px;
  text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.08);
  border-top:6px solid #ffca39;
  border-bottom:6px solid #ffca39;
  transition:.5s ease;
}

.page-8-info-wrap:hover{
  transform:translateY(-8px);
  box-shadow:0 40px 100px rgba(42,197,245,.25);
}

/* Tag */
.page-8-info-tag{
  display:inline-block;
  padding:6px 18px;
  background:#ffca3999;
  color:#000;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  margin-bottom:20px;
}

/* Heading */
.page-8-info-wrap h2{
  font-size:38px;
  margin-bottom:25px;
  color:#0f172a;
}

.page-8-info-wrap h2 span{
  color:#4bd0f8;
}

/* Paragraph */
.page-8-info-wrap p{
  color:#475569;
  line-height:1.9;
  margin-bottom:18px;
  font-size:16px;
}

/* Reveal Animation */
.page-8-reveal{
  opacity:0;
  transform:translateY(60px);
  transition:1s ease;
}

.page-8-reveal.page-8-active{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
@media(max-width:600px){

  .page-8-info-wrap{
    padding:45px 25px;
  }

  .page-8-info-wrap h2{
    font-size:28px;
  }
}


/* ===================================================
                  page-8 section-3
==================================================== */
/* ================= PAGE 8 SECTION 3 (Enhanced Alignment) ================= */

.rn-page-8-gst{
  padding:120px 20px;
  background:linear-gradient(135deg,#4bd0f812,#ffca3922);
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* Reveal Base */

.rn-page-8-reveal{
  opacity:0;
  transform:translateY(60px);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

.rn-page-8-active{
  opacity:1!important;
  transform:translateY(0)!important;
}

/* Layout */

.rn-page-8-gst-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

/* Image */

.rn-page-8-gst-image{
  border-radius:24px;
  overflow:hidden;
  position:relative;
  box-shadow:0 35px 80px rgba(0,0,0,.18);
}

.rn-page-8-gst-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.7s;
}

.rn-page-8-gst-image:hover img{
  transform:scale(1.08) rotate(.5deg);
}

.rn-page-8-gst-image::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,#4bd0f855);
}

/* Content */

.rn-page-8-gst-content h2{
  font-size:42px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:20px;
}

.rn-page-8-gst-content p{
  color:#475569;
  line-height:1.8;
}

.rn-page-8-gst-sub{
  margin-top:25px;
  font-weight:600;
}

/* Points */

.rn-page-8-gst-points{
  margin-top:30px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.rn-page-8-gst-points li{
  background:white;
  padding:18px 22px;
  border-radius:14px;
  display:flex;
  gap:14px;
  align-items:center;
  font-weight:500;
  box-shadow:0 14px 28px rgba(0,0,0,.1);
  position:relative;
  overflow:hidden;
  transition:.5s;
}

.rn-page-8-gst-points li span{
  font-size:22px;
}

.rn-page-8-gst-points li::before{
  content:'';
  position:absolute;
  left:-100%;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,#4bd0f899,#ffca3999);
  transition:.5s;
  z-index:-1;
}

.rn-page-8-gst-points li:hover::before{
  left:0;
}

.rn-page-8-gst-points li:hover{
  color:#000;
  transform:translateX(10px);
}

/* Responsive */

@media(max-width:900px){

  .rn-page-8-gst-wrap{
    grid-template-columns:1fr;
  }

  .rn-page-8-gst-content h2{
    font-size:32px;
  }

  .rn-page-8-gst{
    padding:80px 15px;
  }
}


/* ===================================================
                  page-8 section-4
==================================================== */

/* ================= PAGE 8 SECTION 4 UPDATED ================= */

.page-8-gst-types{
  position:relative;
  padding:140px 20px;
  font-family:'Poppins',sans-serif;
  background: url("../img/page-8/gst-bg.jfif") center/cover no-repeat;
  overflow:hidden;
}

.page-8-gst-types-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,#020617ee,#0f172add,#4bd0f844);
}

/* Container */

.page-8-gst-types-inner{
  position:relative;
  max-width:1200px;
  margin:auto;
  text-align:center;
}

/* Title */

.page-8-gst-types-title{
  font-size:42px;
  color:white;
  margin-bottom:60px;
  position:relative;
}

.page-8-gst-types-title::after{
  content:'';
  width:120px;
  height:4px;
  background:linear-gradient(90deg,#4bd0f8,#ffca39);
  display:block;
  margin:15px auto 0;
  border-radius:10px;
}

/* Grid */

.page-8-gst-types-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
}

/* Cards */

.page-8-gst-type-card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  border-radius:22px;
  padding:35px 28px;
  color:white;
  text-align:left;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  transition:.6s;
  position:relative;
  border:1px solid rgba(255,255,255,.2);
}

.page-8-gst-type-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:22px;
  padding:2px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* Hover */

.page-8-gst-type-card:hover{
  transform:translateY(-15px) scale(1.02);
  box-shadow:0 40px 80px rgba(42,197,245,.4);
}

/* Card Content */

.page-8-gst-type-card h3{
  font-size:22px;
  margin-bottom:18px;
  text-align: center;
  color: #fff;
}

.page-8-gst-type-card ul{
  padding-left:18px;
}

.page-8-gst-type-card li{
  margin-bottom:10px;
  line-height:1.6;
  opacity:.9;
}

/* CTA */

.page-8-gst-types-cta{
  margin-top:60px;
}

.page-8-gst-types-cta a{
  display:inline-block;
  padding:14px 36px;
  border-radius:50px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:.4s;
}

.page-8-gst-types-cta a:hover{
  transform:scale(1.08);
  box-shadow:0 15px 40px rgba(254,189,16,.6);
}

/* Responsive */

@media(max-width:950px){

  .page-8-gst-types-grid{
    grid-template-columns:1fr;
  }

  .page-8-gst-types-title{
    font-size:32px;
  }

  .page-8-gst-types{
    padding:90px 15px;
  }
}


/* ===================================================
                  page-8 section-5
==================================================== */
/* ================= PAGE 8 ELIGIBILITY ================= */

.page-8-eligibility{
  padding:120px 20px;
  background:linear-gradient(135deg,#4bd0f812,#ffca3922);
  font-family:'Poppins',sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.page-8-eligibility-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:480px 1fr;
  gap:80px;
  align-items:center;
}

/* LEFT IMAGE */

.page-8-eligibility-visual{
  max-width:460px;
  margin:auto;
  background:white;
  padding:30px;
  border-radius:26px;
  box-shadow:0 40px 90px rgba(0,0,0,.15);
  position:relative;
}

.page-8-eligibility-visual::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:26px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  z-index:-1;
}

.page-8-eligibility-visual img{
  width:100%;
  display:block;
}

/* RIGHT CONTENT */

.page-8-eligibility-content{
  max-width:520px;
}

.page-8-eligibility-content h2{
  font-size:34px;
  color:#1e3a8a;
  margin-bottom:45px;
}

/* ================= TIMELINE ================= */

.page-8-timeline{
  position:relative;
  padding-left:50px;
  display:flex;
  flex-direction:column;
  gap:45px;
  max-width:500px;
}

/* Vertical Line */

.page-8-timeline-line{
  position:absolute;
  left:19px;
  top:0;
  width:3px;
  height:0;
  background:linear-gradient(180deg,#4bd0f8,#ffca39);
  border-radius:10px;
  transition:2s;
}

.page-8-active .page-8-timeline-line{
  height:100%;
}

/* Step */

.page-8-timeline-step{
  display:flex;
  gap:25px;
  align-items:flex-start;
  opacity:0;
  transform:translateX(40px) scale(.9);
  transition:.9s cubic-bezier(.22,.61,.36,1);
}

.page-8-timeline-step.page-8-active{
  opacity:1;
  transform:none;
}

/* Dot */

.page-8-dot{
  min-width:40px;
  height:40px;
  border-radius:50%;
  background:white;
  border:3px solid #4bd0f8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#4bd0f8;
  position:relative;
  animation:pulse8 2.5s infinite;
}

/* Pulse */

@keyframes pulse8{
  0%{box-shadow:0 0 0 0 rgba(42,197,245,.6);}
  70%{box-shadow:0 0 0 12px rgba(42,197,245,0);}
  100%{box-shadow:0 0 0 0 rgba(42,197,245,0);}
}

/* Box */

.page-8-timeline-box{
  background:white;
  padding:20px 26px;
  border-radius:16px;
  box-shadow:0 20px 45px rgba(0,0,0,.08);
  transition:.5s;
  position:relative;
}

.page-8-timeline-box::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:16px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  z-index:-1;
  opacity:0;
  transition:.4s;
}

/* Hover */

.page-8-timeline-step:hover .page-8-timeline-box{
  transform:translateY(-6px) rotate(.3deg);
}

.page-8-timeline-step:hover .page-8-timeline-box::after{
  opacity:1;
}

.page-8-timeline-step:hover .page-8-dot{
  background:#ffca39;
  color:#020617;
  border-color:#ffca39;
}

/* Text */

.page-8-timeline-box h4{
  margin:0 0 8px;
  font-size:18px;
}

.page-8-timeline-box p{
  margin:0;
  color:#475569;
  line-height:1.6;
}

/* ================= RESPONSIVE ================= */

@media(max-width:1100px){

  .page-8-eligibility-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .page-8-eligibility-content,
  .page-8-timeline{
    margin:auto;
  }
}

@media(max-width:900px){

  .page-8-timeline{
    padding-left:0;
  }

  .page-8-timeline-line{
    display:none;
  }

  .page-8-timeline-step{
    flex-direction:column;
    gap:15px;
    align-items:center;
    text-align:center;
  }

  .page-8-eligibility{
    padding:90px 15px;
  }
}


/* ===================================================
                  page-8 section-6
==================================================== */

/* ================= PAGE 8 DOCUMENTS ================= */

/* ================= PAGE 8 DOCUMENTS (VIDEO BG) ================= */

.page-8-docs{
  position:relative;
  padding:140px 20px;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* Video */

.page-8-docs-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  transform:scale(1.05);
  animation:page8VideoZoom 18s linear infinite alternate;
}

@keyframes page8VideoZoom{
  from{transform:scale(1.05);}
  to{transform:scale(1.15);}
}

/* Overlay */

.page-8-docs-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(2,6,23,.8),rgba(15,23,42,.7),rgba(42,197,245,.25));
  z-index:-1;
}

/* Inner */

.page-8-docs-inner{
  position:relative;
  max-width:900px;
  margin:auto;
  text-align:center;
  color:white;
}

.page-8-docs-inner h2{
  font-size:36px;
  color: #fff;
  margin-bottom:50px;
}

/* Grid */

.page-8-docs-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  margin-bottom:55px;
}

/* Document Tiles */

.page-8-doc-item{
  background:rgba(255,255,255,.92);
  color:#020617;
  padding:22px 28px;
  border-radius:16px;
  font-weight:600;
  box-shadow:0 20px 45px rgba(0,0,0,.3);
  transition:.5s;
  position:relative;
}

/* Glow Border */

.page-8-doc-item::after{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:16px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  opacity:0;
  transition:.4s;
  z-index:-1;
}

/* Hover */

.page-8-doc-item:hover{
  transform:translateY(-10px) scale(1.03);
}

.page-8-doc-item:hover::after{
  opacity:1;
}

/* Actions */

.page-8-docs-actions{
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
}

.page-8-docs-btn{
  padding:14px 36px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  transition:.4s;
}

/* Primary */

.page-8-docs-btn.primary{
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#fff;
}

/* Secondary */

.page-8-docs-btn.secondary{
  border:2px solid #4bd0f8;
  color:white;
}

/* Hover Buttons */

.page-8-docs-btn:hover{
  transform:scale(1.08);
  box-shadow:0 15px 40px rgba(42,197,245,.5);
}

/* Responsive */

@media(max-width:900px){

  .page-8-docs-grid{
    grid-template-columns:1fr;
  }

  .page-8-docs-inner h2{
    font-size:28px;
  }

  .page-8-docs{
    padding:90px 15px;
  }
}


/* ===================================================
                  page-8 section-7
==================================================== */
/* ================= PAGE 8 PROCESS UNIQUE ================= */

.page-8-process2{
  padding:130px 20px;
  font-family:'Poppins',sans-serif;
  background:
    radial-gradient(circle at top left,#4bd0f840,transparent 60%),
    radial-gradient(circle at bottom right,#ffca3940,transparent 60%),
    linear-gradient(135deg,#f8fdff,#fff4da);
}

.page-8-process2-wrap{
  max-width:1200px;
  margin:auto;
  text-align:center;
}

.page-8-process2-wrap h2{
  font-size:34px;
  color:#1e3a8a;
  margin-bottom:70px;
}

/* Flow */

.page-8-process2-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  position:relative;
}

/* Animated ribbon */

.page-8-process2-flow::before{
  content:'';
  position:absolute;
  top:38px;
  left:0;
  width:100%;
  height:6px;
  background:linear-gradient(90deg,#4bd0f8,#ffca39,#4bd0f8);
  background-size:200%;
  animation:page8Ribbon 6s linear infinite;
  border-radius:20px;
  z-index:0;
}

@keyframes page8Ribbon{
  from{background-position:0%;}
  to{background-position:200%;}
}

/* Step */

.page-8-process2-step{
  background:white;
  padding:35px 25px 28px;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  position:relative;
  z-index:1;
  transition:.6s;
}

/* Reveal feel */

.page-8-process2-step.page-8-active{
  animation:page8Pop .7s ease forwards;
}

@keyframes page8Pop{
  from{transform:scale(.9);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* Number */

/* Number with ripple pulse */

.page-8-process2-step span{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#020617;
  font-weight:700;
  margin:-60px auto 15px;
  position:relative;
  z-index:2;
}

/* Ripple Rings */

.page-8-process2-step span::before,
.page-8-process2-step span::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid #4bd0f8;
  opacity:.7;
  animation:page8Ripple 2.8s infinite;
}

.page-8-process2-step span::after{
  animation-delay:1.4s;
  border-color:#ffca39;
}

/* Ripple Animation */

@keyframes page8Ripple{
  0%{
    transform:scale(1);
    opacity:.6;
  }
  100%{
    transform:scale(2.4);
    opacity:0;
  }
}

/* Text */

.page-8-process2-step h4{
  margin:0 0 10px;
}

.page-8-process2-step p{
  margin:0;
  color:#475569;
  line-height:1.6;
}

/* Soft breathing animation */

.page-8-process2-step{
  animation:page8Breath 5s ease-in-out infinite;
}

@keyframes page8Breath{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

/* CTA */

.page-8-process2-cta{
  margin-top:60px;
}

.page-8-process2-cta a{
  padding:14px 40px;
  border-radius:40px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#020617;
  text-decoration:none;
  font-weight:600;
  display:inline-block;
}

/* Responsive */

@media(max-width:1000px){

  .page-8-process2-flow{
    grid-template-columns:1fr 1fr;
    gap:45px;
  }

  .page-8-process2-flow::before{
    display:none;
  }
}

@media(max-width:650px){

  .page-8-process2-flow{
    grid-template-columns:1fr;
  }

  .page-8-process2-wrap h2{
    font-size:28px;
  }
}

/* ===================================================
                  page-8 section-8
==================================================== */
/* ================= PAGE 8 BENEFITS ================= */

.page-8-benefits{
  padding:130px 20px;
  font-family:'Poppins',sans-serif;
  background:#fffbea;
}

.page-8-benefits-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:480px 1fr;
  gap:80px;
  align-items:center;
}

/* LEFT VISUAL */

.page-8-benefits-visual{
  background:white;
  padding:40px;
  border-radius:28px;
  box-shadow:0 40px 90px rgba(0,0,0,.12);
  animation:page8Float 6s ease-in-out infinite;
}

@keyframes page8Float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

.page-8-benefits-visual img{
  width:100%;
  display:block;
}

/* CONTENT */

.page-8-benefits-content h2{
  font-size:34px;
  color:#1e3a8a;
  margin-bottom:45px;
}

/* Benefits */

.page-8-benefits-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.page-8-benefit{
  position:relative;
  padding-left:28px;
}

/* Animated underline reveal */

.page-8-benefit::before{
  content:'';
  position:absolute;
  left:0;
  top:6px;
  width:6px;
  height:0;
  background:linear-gradient(180deg,#4bd0f899,#ffca3999);
  transition:.8s;
}

.page-8-benefit.page-8-active::before{
  height:100%;
}

.page-8-benefit h4{
  margin:0 0 8px;
  font-size:20px;
}

.page-8-benefit p{
  margin:0;
  color:#475569;
  line-height:1.6;
}

/* CTA */

.page-8-benefits-cta{
  margin-top:45px;
}

.page-8-benefits-cta a{
  padding:14px 38px;
  border-radius:40px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#020617;
  text-decoration:none;
  font-weight:600;
  position:relative;
  overflow:hidden;
  display:inline-block;
}

/* Shine sweep */

.page-8-benefits-cta a::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:50%;
  height:100%;
  background:rgba(255,255,255,.4);
  transform:skewX(-20deg);
  animation:page8Shine 3s infinite;
}

@keyframes page8Shine{
  0%{left:-100%}
  60%{left:150%}
  100%{left:150%}
}

/* Responsive */

@media(max-width:1000px){

  .page-8-benefits-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .page-8-benefits-list{
    align-items:center;
  }

  .page-8-benefit{
    padding-left:0;
  }

  .page-8-benefit::before{
    left:-5px;
    transform:translateX(-50%);
  }
}

@media(max-width:700px){

  .page-8-benefits{
    padding:90px 15px;
  }

  .page-8-benefits-content h2{
    font-size:28px;
  }
}


/* ===================================================
                  page-8 section-9
==================================================== */
/* ================= PAGE 8 GST STATUS ================= */

.page-8-status{
  padding:130px 20px;
  font-family:'Poppins',sans-serif;
  /* background:
    linear-gradient(135deg,#4bd0f820 0%,transparent 40%),
    linear-gradient(315deg,#ffca3920 0%,transparent 40%),
    #fff1fb; */
}

.page-8-status-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:70px;
  align-items:center;
}

/* LEFT */

.page-8-status-content h2{
  font-size:36px;
  color:#1e3a8a;
  margin-bottom:40px;
}

/* Two blocks */

.page-8-status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-bottom:35px;
}

/* Sliding blocks */

.page-8-status-block{
  background:white;
  padding:26px;
  border-radius:20px;
  box-shadow:0 25px 50px rgba(0,0,0,.08);
  transform:translateX(-40px);
  opacity:0;
  transition:.9s cubic-bezier(.22,.61,.36,1);
}

.page-8-status-block.page-8-active{
  transform:none;
  opacity:1;
}

.page-8-status{
  position:relative;
  overflow:hidden;
}

.page-8-status::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle,#4bd0f812 10%,transparent 40%),
    radial-gradient(circle,#ffca3912 10%,transparent 40%);
  background-size:300px 300px;
  animation:page8Dust 25s linear infinite;
  pointer-events:none;
}

@keyframes page8Dust{
  from{transform:translate(0,0)}
  to{transform:translate(200px,200px)}
}

.page-8-status-block h4,
.page-8-status-queries h4{
  display:inline-block;
  padding:6px 14px;
  border-radius:30px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#020617;
  margin-bottom:12px;
}
.page-8-status-content p,
.page-8-status-content li{
  opacity:0;
  transform:translateY(6px);
}

.page-8-active .page-8-status-content p,
.page-8-active .page-8-status-content li{
  animation:page8Type .6s ease forwards;
}

.page-8-active .page-8-status-content li:nth-child(1){animation-delay:.1s}
.page-8-active .page-8-status-content li:nth-child(2){animation-delay:.25s}
.page-8-active .page-8-status-content li:nth-child(3){animation-delay:.4s}

@keyframes page8Type{
  to{opacity:1;transform:none}
}

.page-8-status-content ul{
  list-style:none;
  padding-left:0;
}

.page-8-status-content li{
  position:relative;
  padding-left:26px;
}

.page-8-status-content li::before{
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  color:#4bd0f8;
  transform:scale(0);
}

.page-8-active .page-8-status-content li::before{
  animation:page8Tick .4s ease forwards;
}

@keyframes page8Tick{
  to{transform:scale(1)}
}

/* Link ink effect */

.page-8-status-link{
  padding:6px 12px;
  border-radius:6px;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  background-size:0% 100%;
  background-repeat:no-repeat;
  transition:.4s;
}

.page-8-status-link:hover{
  background-size:100% 100%;
  color:#020617;
}
.page-8-status-link{
  padding:6px 12px;
  border-radius:6px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  background-size:0% 100%;
  background-repeat:no-repeat;
  transition:.4s;
}

.page-8-status-link:hover{
  background-size:100% 100%;
  color:#020617;
}


.page-8-status-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:3px;
  background:linear-gradient(90deg,#4bd0f899,#ffca3999);
  transition:.4s;
}

.page-8-status-link:hover::after{
  width:100%;
}

/* Queries */

.page-8-status-queries{
  background:white;
  padding:28px;
  border-radius:22px;
  box-shadow:0 25px 50px rgba(0,0,0,.08);
  transform:translateY(40px);
  opacity:0;
  transition:.9s cubic-bezier(.22,.61,.36,1);
}

.page-8-status-queries.page-8-active{
  transform:none;
  opacity:1;
}

/* Lists */

.page-8-status-content ul{
  padding-left:18px;
}

.page-8-status-content li{
  margin-bottom:8px;
  line-height:1.6;
  color:#475569;
}

/* RIGHT IMAGE */

.page-8-status-visual{
  position:relative;
  border-radius:26px;
  overflow:hidden;
}

.page-8-status-visual img{
  width:100%;
  display:block;
}

/* Spotlight sweep */

.page-8-status-visual::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 0% 50%,rgba(255,255,255,.6),transparent 60%);
  animation:page8Spot 6s infinite;
}

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

/* Responsive */

@media(max-width:1000px){

  .page-8-status-wrap{
    grid-template-columns:1fr;
  }

  .page-8-status-grid{
    grid-template-columns:1fr;
  }

  .page-8-status-visual{
    max-width:420px;
    margin:auto;
  }
}

@media(max-width:700px){

  .page-8-status{
    padding:90px 15px;
  }

  .page-8-status-content h2{
    font-size:28px;
  }
}

/* ===================================================
                  page-8 section-10
==================================================== */
/* ================= PAGE 8 CERTIFICATE ================= */

.page-8-certificate{
  position:relative;
  padding:130px 20px;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* Animated background waves */

.page-8-certificate-bg{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 30%,#4bd0f840,transparent 45%),
    radial-gradient(circle at 80% 70%,#ffca3940,transparent 45%),
    linear-gradient(135deg,#fff7fb,#f4fcff);
  animation:page8Wave 18s linear infinite alternate;
  z-index:-1;
}

@keyframes page8Wave{
  from{transform:translate(-40px,-30px)}
  to{transform:translate(40px,30px)}
}

/* Layout */

.page-8-certificate-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:460px 1fr;
  gap:80px;
  align-items:center;
}

/* LEFT IMAGE */

.page-8-certificate-visual{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 35px 80px rgba(0,0,0,.15);
  animation:page8Drift 7s ease-in-out infinite;
}

@keyframes page8Drift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

.page-8-certificate-visual img{
  width:100%;
  display:block;
}

/* Scan frame overlay (unique effect) */

.page-8-scan-frame{
  position:absolute;
  inset:10px;
  border:2px solid #4bd0f8;
  border-radius:22px;
  animation:page8Scan 4s infinite;
}

@keyframes page8Scan{
  0%{clip-path:inset(0 0 90% 0)}
  50%{clip-path:inset(45% 0 45% 0)}
  100%{clip-path:inset(90% 0 0 0)}
}

/* RIGHT */

.page-8-certificate-content h2{
  font-size:34px;
  color:#1e3a8a;
  margin-bottom:35px;
}

/* Steps */

.page-8-certificate-steps{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* Chevron steps */

.page-8-cert-step{
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:white;
  padding:18px 22px;
  border-radius:18px;
  box-shadow:0 18px 35px rgba(0,0,0,.08);
  opacity:0;
  transform:translateX(40px) blur(3px);
  transition:.8s cubic-bezier(.22,.61,.36,1);
}

.page-8-cert-step.page-8-active{
  opacity:1;
  transform:none;
  filter:none;
}

/* Number */

.page-8-cert-num{
  min-width:38px;
  height:38px;
  border-radius:10px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#020617;
}

/* Text */

.page-8-cert-step h4{
  margin:0 0 6px;
}

.page-8-cert-step p{
  margin:0;
  color:#475569;
}

/* Buttons */

.page-8-certificate-actions{
  margin-top:35px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

/* Liquid fill buttons (unique) */

.page-8-cert-btn{
  position:relative;
  padding:14px 34px;
  border-radius:40px;
  text-decoration:none;
  font-weight:600;
  overflow:hidden;
  transition:.4s;
  color: #000;
}

.page-8-cert-btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  transform:translateY(100%);
  transition:.4s;
  z-index:-1;
}

.page-8-cert-btn:hover::before{
  transform:none;
}

.page-8-cert-btn.primary{
  background:#1e3a8a;
  color: #fff;
}

.page-8-cert-btn.secondary{
  border:2px solid #4bd0f8;
  color:#1e3a8a;
}

.page-8-cert-btn.secondary:hover{
  color:#000;
}
/* Hover text */

.page-8-cert-btn:hover{
  color:#fff;
}

/* Responsive */

@media(max-width:1000px){

  .page-8-certificate-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .page-8-certificate-visual{
    max-width:420px;
    margin:auto;
  }

  .page-8-certificate-actions{
    justify-content:center;
  }
}

@media(max-width:700px){

  .page-8-certificate{
    padding:90px 15px;
  }

  .page-8-certificate-content h2{
    font-size:28px;
  }
}


/* ===================================================
                  page-8 section-11
==================================================== */
/* ================= PAGE 8 CANCELLATION ================= */

.page-8-cancel{
  padding:130px 20px;
  font-family:'Poppins',sans-serif;
  background:#fffbea;
}

.page-8-cancel-box{
  position:relative;
}

.page-8-cancel-box::after,
.page-8-cancel-box::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  background:white;
  z-index:-1;
}

.page-8-cancel-box::before{
  transform:translate(6px,6px);
  opacity:.4;
}

.page-8-cancel-box::after{
  transform:translate(12px,12px);
  opacity:.2;
}

.page-8-cancel-content h2{
  position:relative;
  display:inline-block;
}

.page-8-cancel-content h2::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:4px;
  background:linear-gradient(90deg,#4bd0f8,#ffca39);
  animation:page8Underline 1.2s forwards;
}

@keyframes page8Underline{
  to{width:100%}
}

.page-8-cancel-box li{
  opacity:0;
  transform:translateX(-10px);
}

.page-8-cancel-box.page-8-active li{
  animation:page8List .5s ease forwards;
}

.page-8-cancel-box.page-8-active li:nth-child(1){animation-delay:.1s}
.page-8-cancel-box.page-8-active li:nth-child(2){animation-delay:.25s}
.page-8-cancel-box.page-8-active li:nth-child(3){animation-delay:.4s}

@keyframes page8List{
  to{opacity:1;transform:none}
}

/* Layout */

.page-8-cancel-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:70px;
  align-items:center;
}

/* Left Content */

.page-8-cancel-content h2{
  font-size:34px;
  color:#1e3a8a;
  margin-bottom:45px;
}

/* Columns */

.page-8-cancel-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

/* Sliding paper boxes */

.page-8-cancel-box{
  background:white;
  padding:26px;
  border-radius:18px;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
  opacity:0;
  transform:translateY(40px) rotate(-1deg);
  transition:.8s cubic-bezier(.22,.61,.36,1);
}

.page-8-cancel-box.page-8-active{
  opacity:1;
  transform:none;
}

/* Headings */

.page-8-cancel-box h4{
  margin:0 0 12px;
}

/* Custom bullets */

.page-8-cancel-box ul,
.page-8-cancel-box ol{
  padding-left:0;
  list-style:none;
}

.page-8-cancel-box li{
  position:relative;
  padding-left:22px;
  margin-bottom:8px;
  color:#475569;
}

/* Draw dot */

.page-8-cancel-box li::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4bd0f8;
  transform:scale(0);
}

.page-8-cancel-box.page-8-active li::before{
  animation:page8Dot .4s ease forwards;
}

@keyframes page8Dot{
  to{transform:scale(1)}
}

/* Note */

.page-8-cancel-note{
  margin:30px 0;
  font-weight:500;
}

/* CTA progress fill */

.page-8-cancel-cta a{
  display:inline-block;
  padding:14px 36px;
  border-radius:40px;
  background:#1e3a8a;
  color:white;
  text-decoration:none;
  font-weight:600;
  position:relative;
  overflow:hidden;
}

.page-8-cancel-cta a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0;
  background:linear-gradient(135deg,#4bd0f8,#ffca39);
  transition:.4s;
  z-index:-1;
}

.page-8-cancel-cta a:hover::after{
  height:100%;
}

/* Right Image */

.page-8-cancel-visual{
  border-radius:24px;
  overflow:hidden;
  position:relative;
  transform-style:preserve-3d;
  animation:page8Tilt 8s ease-in-out infinite;
  box-shadow:0 40px 90px rgba(0,0,0,.18);
}

@keyframes page8Tilt{
  0%,100%{transform:rotateY(0deg) rotateX(0deg)}
  50%{transform:rotateY(-6deg) rotateX(4deg)}
}

.page-8-cancel-visual img{
  width:100%;
  display:block;
}

/* Corner pin dots */

.page-8-cancel-visual::before{
  content:'';
  position:absolute;
  inset:12px;
  border:2px dashed rgba(42,197,245,.6);
  border-radius:18px;
  animation:page8Pins 6s linear infinite;
}

@keyframes page8Pins{
  from{opacity:.2}
  50%{opacity:.7}
  to{opacity:.2}
}


/* Corner fold */

.page-8-cancel-visual::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:80px;
  height:80px;
  background:linear-gradient(135deg,#ffca39,#4bd0f8);
  clip-path:polygon(100% 0,0 0,100% 100%);
  opacity:.4;
}

/* Responsive */

@media(max-width:1000px){

  .page-8-cancel-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .page-8-cancel-columns{
    grid-template-columns:1fr;
  }

  .page-8-cancel-visual{
    max-width:420px;
    margin:auto;
  }
}

@media(max-width:700px){

  .page-8-cancel{
    padding:90px 15px;
  }

  .page-8-cancel-content h2{
    font-size:28px;
  }
}


/* ===================================================
                  page-8 section-12
==================================================== */
/* ================= PAGE 8 FAQ ================= */

.page-8-faq{
  position:relative;
  padding:130px 20px;
  font-family:'Poppins',sans-serif;
  background:
    radial-gradient(circle at 25% 30%,#4bd0f840,transparent 45%),
    radial-gradient(circle at 75% 70%,#ffca3940,transparent 45%),
    #f9fdff;
  overflow:hidden;
}

/* Moving spotlight */

.page-8-faq-bg{
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle,rgba(255,255,255,.6),transparent 60%);
  animation:page8SpotFaq 18s linear infinite;
}

@keyframes page8SpotFaq{
  from{transform:translate(-200px,-100px)}
  to{transform:translate(200px,100px)}
}

/* Wrap */

.page-8-faq-wrap{
  position:relative;
  max-width:1200px;
  margin:auto;
}

.page-8-faq-wrap h2{
  text-align:center;
  font-size:34px;
  color:#1e3a8a;
  margin-bottom:70px;
}

/* Grid */

.page-8-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:35px;
}

/* FAQ tile */

.page-8-faq-item{
  background:white;
  padding:28px;
  border-radius:24px;
  box-shadow:0 25px 55px rgba(0,0,0,.08);
  transform:scale(.9);
  opacity:0;
  filter:blur(4px);
  transition:.8s cubic-bezier(.22,.61,.36,1);
}

/* Reveal */

.page-8-faq-item.page-8-active{
  transform:scale(1);
  opacity:1;
  filter:none;
}

/* Magnetic drift hover (not lift) */

.page-8-faq-item:hover{
  transform:translateX(6px);
}

/* Text */

.page-8-faq-item h4{
  margin:0 0 10px;
  color:#1e3a8a;
}

.page-8-faq-item p{
  margin:0;
  color:#475569;
  line-height:1.6;
}

/* ================= PAGE 8 FAQ FLIP ================= */

.page-8-faq-item{
  perspective:1200px;
}

/* Inner flip wrapper */

.page-8-faq-flip{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:1s cubic-bezier(.22,.61,.36,1);
}

/* Flip on hover */

.page-8-faq-item:hover .page-8-faq-flip{
  transform:rotateY(180deg);
}

/* Faces */

.page-8-faq-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:24px;
  padding:28px;
  box-shadow:0 25px 55px rgba(0,0,0,.08);
  background:white;
}

/* Front */

.page-8-faq-front{
  transform:rotateY(0deg);
}

/* Back */

.page-8-faq-back{
  transform:rotateY(180deg);
  background:
    linear-gradient(135deg,#4bd0f820,#ffca3920),
    white;
}

/* Ensure container height */

.page-8-faq-item{
  min-height:220px;
}

/* Text remains same */

.page-8-faq-face h4{
  margin:0 0 10px;
  color:#1e3a8a;
}

.page-8-faq-face p{
  margin:0;
  color:#475569;
  line-height:1.6;
}

/* Mobile: disable flip (tap friendly) */

@media(max-width:700px){

  .page-8-faq-flip{
    transform:none!important;
  }

  .page-8-faq-face{
    position:relative;
  }

  .page-8-faq-back{
    display: none ;
  }
}


/* Responsive */

@media(max-width:1000px){

  .page-8-faq-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:650px){

  .page-8-faq-grid{
    grid-template-columns:1fr;
  }

  .page-8-faq{
    padding:90px 15px;
  }

  .page-8-faq-wrap h2{
    font-size:28px;
  }
}

/* ===================================================
                  page-8 section-13
==================================================== */

/* ================= PAGE 8 SUPPORT ================= */

.page-8-support{
  position:relative;
  padding:70px 20px;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* Mesh background */

.page-8-support-bg{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 20% 30%, #4bd0f830, transparent 45%),
    radial-gradient(circle at 80% 70%, #ffca3930, transparent 45%),
    linear-gradient(135deg, #f9fbff, #fff6e8);
  animation:page8MeshMove 20s ease-in-out infinite alternate;
  z-index:-1;
}

@keyframes page8MeshMove{
  from{transform:translate(-40px,-20px)}
  to{transform:translate(40px,20px)}
}

/* Layout */

.page-8-support-wrap{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:80px;
  align-items:center;
}

/* IMAGE */

.page-8-support-visual{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 35px 80px rgba(0,0,0,.15);
}

.page-8-support-visual img{
  width:100%;
  display:block;
}

/* Signal wave effect */

.page-8-support-wave{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,
      rgba(42,197,245,.25) 0%,
      transparent 60%);
  animation:page8WavePulse 5s infinite;
  pointer-events:none;
}

@keyframes page8WavePulse{
  0%{transform:scale(.9);opacity:.4}
  50%{transform:scale(1.1);opacity:.15}
  100%{transform:scale(.9);opacity:.4}
}

/* CONTENT */

.page-8-support-content{
  opacity:0;
  transform:translateX(40px);
  transition:1s cubic-bezier(.22,.61,.36,1);
}

.page-8-support-content.page-8-active{
  opacity:1;
  transform:none;
}

.page-8-support-content h2{
  font-size:36px;
  color:#1e3a8a;
  margin-bottom:22px;
}

/* Points */

.page-8-support-points{
  font-weight:500;
  margin-bottom:32px;
  color:#020617;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* CTA button – press interaction */

.page-8-support-btn{
  display:inline-block;
  padding:16px 42px;
  border-radius:14px;
  background:linear-gradient(135deg,#4bd0f899,#ffca3999);
  color:#020617;
  font-weight:600;
  text-decoration:none;
  transition:.2s;
  box-shadow:0 12px 30px rgba(42,197,245,.35);
}

.page-8-support-btn:active{
  transform:translateY(2px);
  box-shadow:0 6px 18px rgba(42,197,245,.35);
  background-color: #000;
  color: #fff;
}
.page-8-support-btn:hover{
  transform:translateY(2px);
  box-shadow:0 6px 18px rgba(42,197,245,.35);
  background:#4bd0f899;
  color: #000;
}

/* Call */

.page-8-support-call{
  margin-top:22px;
  color:#334155;
}

/* Responsive */

@media(max-width:1000px){

  .page-8-support-wrap{
    grid-template-columns:1fr;
    text-align:center;
  }

  .page-8-support-visual{
    max-width:420px;
    margin:auto;
  }

  .page-8-support-points{
    justify-content:center;
  }
}

@media(max-width:700px){

  .page-8-support{
    padding:100px 15px;
  }

  .page-8-support-content h2{
    font-size:28px;
  }
}


/* ===================================================
                  page-8 section-14
==================================================== */
/* ================= PAGE 8 EXPLORE ================= */

.page-8-explore{
  position:relative;
  padding:120px 20px;
  font-family:'Poppins',sans-serif;
  background:linear-gradient(135deg,#fff1fb,#f7fdff);
  overflow:hidden;
}

/* Floating dots background */

.page-8-explore-bg{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle,#4bd0f820 6%,transparent 7%),
    radial-gradient(circle,#ffca3920 6%,transparent 7%);
  background-size:120px 120px;
  animation:page8Dots 25s linear infinite;
  z-index:-1;
}

@keyframes page8Dots{
  from{transform:translate(0,0)}
  to{transform:translate(200px,200px)}
}

/* Layout */

.page-8-explore-wrap{
  max-width:1000px;
  margin:auto;
  text-align:center;
}

.page-8-explore-wrap h2{
  font-size:34px;
  color:#1e3a8a;
  margin-bottom:60px;
}

/* Grid */

.page-8-explore-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  justify-content:center;
}

/* Lists */

.page-8-explore-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
}

/* Links */

.page-8-explore-list a{
  position:relative;
  text-decoration:none;
  font-size:18px;
  font-weight:500;
  color:#020617;
  padding-right:22px;
  transition:.3s;
}

/* Underline draw */

.page-8-explore-list a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:3px;
  background:linear-gradient(90deg,#4bd0f8,#ffca39);
  transition:.4s;
}

/* Arrow nudge */

.page-8-explore-list a::before{
  content:'→';
  position:absolute;
  right:0;
  opacity:0;
  transform:translateX(-6px);
  transition:.3s;
}

.page-8-explore-list a:hover::after{
  width:100%;
}

.page-8-explore-list a:hover::before{
  opacity:1;
  transform:none;
}

/* Reveal */

.page-8-explore-list.page-8-active{
  animation:page8FadeUp .8s ease forwards;
}

@keyframes page8FadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

/* Responsive */

@media(max-width:800px){

  .page-8-explore-grid{
    grid-template-columns:1fr;
    gap:50px;
  }

  .page-8-explore-wrap h2{
    font-size:28px;
  }
}

@media(max-width:500px){

  .page-8-explore{
    padding:90px 15px;
  }

  .page-8-explore-list a{
    font-size:16px;
  }
}






























/* sushma */


 .site-breadcrumb{
  background:url("assets/img/breadcrumb/01.jpg") center/cover no-repeat;
  padding:120px 0;
  text-align:center;
}

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

.breadcrumb-title{
  color:white;
  font-size:40px;
  margin-bottom:10px;
}

.breadcrumb-menu{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:10px;
  padding:0;
}

.breadcrumb-menu li{
  color:white;
}

.breadcrumb-menu li a{
  color:white;
  text-decoration:none;
}







/* Section */
.gms-about-firm-section {
  padding: 80px 0;
}

.gms-about-container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}

/* Image Styling */
.gms-about-firm-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.gms-about-firm-image img {
  width: 100%;
  max-width: 700px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Content Styling */
.gms-about-firm-content {
  flex: 1;
}

.gms-about-firm-content h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #111827;
}

.gms-about-firm-content p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 18px;
  color: #4b5563;
}

/* Responsive */
@media (max-width:768px){

  .gms-about-firm-section{
    padding:60px 20px;
  }

  .gms-about-container{
    flex-direction:column;
    text-align:center;
    gap:30px;
  }

  .gms-about-firm-image img{
    width:100%;
    max-width:100%;
  }

  .gms-about-firm-content h2{
    font-size:26px;
  }

  .gms-about-firm-content p{
    font-size:15px;
    line-height:1.7;
  }

}






/* Section */
.gms-about-benefits-section{
  padding:80px 0;
}

.gms-about-container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

/* Header */

.gms-about-section-header{
  max-width:650px;
  margin-bottom:40px;
}

.gms-about-section-header h2{
  font-size:32px;
  font-weight:700;
  color:#1f2937;
  margin-bottom:15px;
}

.gms-about-section-header p{
  color:#6b7280;
  line-height:1.7;
  font-size:15px;
}

/* Grid */

.gms-about-benefits-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

/* Card */

.gms-about-benefit-card{
  background:#fff;
  padding:30px 25px;
  border-radius:14px;
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* Top border */

.gms-about-benefit-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:4px;
  width:100%;
  border-radius:14px 14px 0 0;
  background:linear-gradient(to right,#2bb0ed,#f4b400);
}

/* Dot */

.gms-about-dot{
  height:10px;
  width:10px;
  border-radius:50%;
  display:inline-block;
  margin-bottom:12px;
}

.gms-about-dot.blue{
  background:#2bb0ed;
}

.gms-about-dot.yellow{
  background:#f4b400;
}

/* Content */

.gms-about-benefit-card h3{
  font-size:18px;
  color:#111827;
  margin-bottom:10px;
}

.gms-about-benefit-card p{
  font-size:14px;
  color:#6b7280;
  line-height:1.7;
}

/* Highlight */

.gms-about-highlight{
  background:linear-gradient(135deg,#ffffff,#eef7ff);
}

/* Responsive */

@media(max-width:768px){

  .gms-about-benefits-grid{
    grid-template-columns:1fr;
  }

  .gms-about-section-header h2{
    font-size:26px;
  }

}

/* contactpage */



.gms-about-documents-section{
  padding:80px 0;
}

.gms-about-doc-container{
  width:90%;
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:60px;
  flex-wrap:wrap;
}

/* Left Content */

.gms-about-documents-content{
  flex:1;
}

.gms-about-documents-content h2{
  font-size:34px;
  margin-bottom:15px;
  color:#1f2937;
}

.gms-about-documents-content h2 span{
  color:#2bb0ed;
}

.gms-about-intro{
  color:#6b7280;
  line-height:1.7;
  margin-bottom:30px;
  font-size:15px;
}

/* Document List */

.gms-about-doc-list{
  display:flex;
  flex-direction:column;
  gap:25px;
}

.gms-about-doc-item{
  display:flex;
  gap:15px;
  align-items:flex-start;
}

.gms-about-number{
  min-width:40px;
  height:40px;
  background:linear-gradient(135deg,#2bb0ed,#4fd1c5);
  color:#fff;
  font-weight:bold;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.gms-about-doc-item h3{
  font-size:18px;
  margin-bottom:6px;
  color:#111827;
}

.gms-about-doc-item p{
  font-size:14px;
  color:#6b7280;
  line-height:1.6;
}

/* Image */

.gms-about-documents-image{
  flex:1;
  display:flex;
  justify-content:center;
}

.gms-about-documents-image img{
  width:100%;
  max-width:450px;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 25px 45px rgba(0,0,0,0.08);
}

/* Responsive */

@media(max-width:768px){

  .gms-about-doc-container{
    flex-direction:column;
  }

  .gms-about-documents-content h2{
    font-size:26px;
  }

}