/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 1rem;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 2.5rem;
  margin-bottom: 0px;
  color: #212741;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 1rem;
  line-height: 1.625rem;
  color: #212741;
}

img {
  width: 100%;
  overflow: hidden;
}



/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/


html,
body {
  background: #ffff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #0371d1;
  color: #fff;
}

::-moz-selection {
  background: #0333d1;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 1.875rem;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 1.875rem; 
  }
  .mobile-bottom-fix-big {
    margin-bottom: 3.75rem;
  }
}

.green-button a {
  font-size: 0.875rem;
  color: #fff;
  background-color: #43ba7f;
  padding: 0.75rem 1.875rem;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.03125rem;
  transition: all 0.3s;
}

.green-button a:hover {
  opacity: 0.9;
}

.blue-button a {
  font-size: 0.875rem;
  color: #fff;
  background-color: #008ec6;
  padding: 0.75rem 1.875rem;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.03125rem;
  transition: all 0.3s;
}

.blue-button a:hover {
  opacity: 0.9;
}

section {
  margin-top: 7.5rem;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 4.375rem;
}

.section-heading h6 {
  font-size: 1rem;
  text-transform: uppercase;
  color: #2e99f6;
  font-weight: 700;
}

.section-heading h4 {
  margin-top: 0.625rem;
  line-height: 2.5rem;
  font-size: 2.25rem;
  font-weight: 700;
  text-transform: capitalize;
  color: #212741;
}

.section-heading p {
  font-family: 'Arial', sans-serif;
  font-size: 1.2rem;
  color: #7f8c8d;
  line-height: 1.6;
}




/* 
-----------------------------------------------------------------------------
header
-----------------------------------------------------------------------------
*/
.background-header {
  background-color: #212741;
  height: 5rem!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0rem 0rem 0.625rem rgba(0, 0, 0, 0.15)!important; 
}

.header-area {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  height: 6.875rem;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 5rem;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height:  7.5rem;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .nav {
  margin-top: 0rem;
  padding-top: 0rem; 
  position: relative;
  top: -2.8125rem;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .nav {
  top: 0rem;
}

.header-area .main-nav .logo img {
  height: 10.5rem;
  width: auto;
  padding-top: 0rem;
  margin-top: -1.1880rem;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo img {
  height: 8.125rem;;
  width: auto;
  padding-top: 0rem;
  margin-top: -1.5625rem; 
}

.background-header .main-nav .logo {
  line-height:  5rem;
  width: 10rem;
}

.background-header .nav {
  margin-top: 1.125rem !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 5.3125rem;
  margin-right: 0rem;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 1rem;
  padding-right: 1rem;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0rem;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 1rem;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 2.5rem;
  line-height: 2.5rem;
  border: transparent;
  letter-spacing: 0rem;
}

.header-area .main-nav .nav li:last-child a {
  font-size: 0.9375rem;
  color: #fff;
  background-color: #0288fd;
  padding: 0.625rem 1rem !important;
  display: inline-block;
  border-radius: 0.3125rem;
  font-weight: 500;
  text-transform: capitalize;
  height: auto;
  line-height: 1.5625rem;
  letter-spacing: 0.03125rem;
  transition: all 0.3s;
}

.header-area .main-nav .nav li:last-child a:hover {
  color: #ffff;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a {
  margin-left: 0rem;
  padding-left: 0rem;
  padding-right: 0rem;
  border-radius: 0rem;
  padding-top: 0rem !important;
  height: 3rem;
}


.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 1.5625rem !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #007fef;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #0288fd;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 0.75rem;
  color: #fff;
  position: absolute;
  right: 0.125rem;
  top: 0.75rem;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 8.75rem;
  background-color: #fff;
  box-shadow: 0 0.125rem 1.75rem 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 2.5rem;
  border-radius: 0.3125rem;
  opacity: 0;
  transition: all 0.3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0rem;
  padding-left: 0rem;
  padding-right: 0rem;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 1.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 0.75rem;
  font-weight: 400;
  border-bottom: 0.0625rem solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #0288fd!important;
  padding-left: 1.5625rem;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width:  0.1875rem;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 2.0625rem;
  width: 2rem;
  height: 2.5rem;
  text-indent: -9999em;
  z-index: 99;
  right: 2.5rem;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 1.4375rem; 
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 1.875rem;
  height: 0.125rem;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 1.875rem;
  height: 0.125rem;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 1rem;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -0.625rem;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 0.625rem;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(0.375rem) translateX(0.0625rem) rotate(45deg);
  -ms-transform: translateY(0.375rem) translateX(0.0625rem) rotate(45deg);
  -webkit-transform: translateY(0.375rem) translateX(0.0625rem) rotate(45deg);
  transform: translateY(0.375rem) translateX(0.0625rem) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-0.375rem) translateX(0.0625rem) rotate(-45deg);
  -ms-transform: translateY(-0.375rem) translateX(0.0625rem) rotate(-45deg);
  -webkit-transform: translateY(-0.375rem) translateX(0.0625rem) rotate(-45deg);
  transform: translateY(-0.375rem) translateX(0.0625rem) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: 5rem;
}

.header-area .nav {
  margin-top: 1.875rem;
}

.header-area.header-sticky .nav li a.active {
  color: #0288fd;
}

@media (max-width: 75rem) {
  .header-area .main-nav .nav li {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 47.9375rem) {
  .header-area {
    background-color: #f7f7f7;
    padding: 0 0.9375rem;
    height: 6.25rem;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0;
  }
  .header-area .logo {
    margin-left: 0;
    line-height: 5rem;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 0.0625rem solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 6.25rem !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 5rem !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 0.0625rem solid #eee;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .header-area .main-nav .nav li a {
    height: 2.8rem !important;
    line-height: 2.8rem !important;
    padding: 0 !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #0288fd!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0rem;
    width: 100%;
    box-shadow: none;
    height: 0rem;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 0.75rem;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 1.875rem;
    font-size: 0.875rem;
    top: 0.9375rem;
  }
  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0;
  }
}

@media (min-width: 47.9375rem) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* Media Queries for Responsive */

/* For large tablets and small desktops (max-width: 1024px) */
@media (max-width: 64rem) {
  .header-area .main-nav .logo {
    font-size: 1.5rem; /* Reduce logo font size */
  }

  .header-area .main-nav .nav li {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .header-area .main-nav .nav {
    margin-top: 4rem; /* Adjust menu positioning */
  }
}

/* For tablets (max-width: 768px) */
@media (max-width: 48rem) {
  .header-area {
    height: 5rem; /* Reduce header height */
    padding: 0 1rem;
    text-align: center;
  }

  .header-area .main-nav .logo img {
    height: 6rem; /* Adjust logo image size */
  }

  .header-area .main-nav .menu-trigger {
    display: block !important; /* Show menu trigger for smaller devices */
  }

  .header-area .main-nav .nav {
    display: none; /* Hide the nav by default */
    width: 50%;
    position: absolute;
    margin-left: 3rem;
    top: -1.2rem;
    left: 8.6rem;
    background-color: transparent; /* Set background for dropdown */
  }

  .header-area .main-nav .nav.active {
    display: block; /* Show the nav when active */
  }

  .header-area .main-nav .nav li {
    width: 100%;
    text-align: center;
    padding: 0.02rem 0;
    border-bottom: 0.0625rem solid #333; /* Add separator between items */
  }

  .header-area .main-nav .nav li a {
    font-size: 1rem;
    line-height: 2rem;
  }
}

/* For mobile phones (max-width: 480px) */
@media (max-width: 30rem) {
  .header-area {
    height: 4.5rem;
  }

  .header-area .main-nav .logo {
    font-size: 1.25rem
  }

  .header-area .main-nav .menu-trigger {
    right: 1rem;
  }

  .header-area .main-nav .nav li a {
    font-size: 0.875rem;
    padding: 0.5rem 0;
  }
}


/* 
---------------------------------------------------------------------------------------
banner
---------------------------------------------------------------------------------------
*/
.banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* Ensure the Swiper container has full height */
.swiper-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  margin: 0;
  background-color: #212741;
}

.swiper-slide {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Animations for active slide elements */
.swiper-slide-active h2 {
  animation: fadeInLeft .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active p {
  animation: fadeInRight .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .div-dec {
  animation: fadeIn .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.slide-inner .header-text {
  position: absolute;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.slide-inner .header-text h2 {
  position: relative;
  z-index: 2;
  font-size: 2.8rem;
  color: #fff;
  font-weight: 700;
  opacity: 1;
  visibility: visible;
  line-height: 4.375rem;
  margin-bottom: 2.5rem;
  margin-top: 8.75rem;
}

.slide-inner .header-text .div-dec {
  width: 5rem;
  height: 0.375rem;
  border-radius: 0.1875rem;
  background-color: #fff;
  margin-bottom: 2.5rem;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text p {
  color: #fff;
  margin-right: rem;
  margin-bottom: 3.125rem;
  opacity: 1;
  text-align: justify;
  visibility: visible;
}

.slide-inner .header-text h2 em {
  font-style: normal;
  color: #60b4fd;
}

.slide-inner .header-text .buttons {
  display: inline;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text .buttons .green-button {
  display: inline;
  float: left;
  margin-right: 1.25rem;
}

.swiper-button-next, .swiper-button-prev {
  color: #fff !important;
}

/* Media Queries for Responsiveness */

/* Tablet View */

@media (max-width: 64rem) {
  .swiper-container {
    height: 75vh;
  }

  .slide-inner .header-text {
    width: 70%;
    top: 40%;
    transform: translateY(-40%);
  }

  .slide-inner .header-text h2 {
    font-size: 2rem;
    line-height: 3rem;
    margin-top: 5rem;
    margin-bottom: 1.5rem;
  }

  .slide-inner .header-text p {
    font-size: 1rem;
    margin-right: 0;
    margin-bottom: 2rem;
  }

  .swiper-button-next, .swiper-button-prev {
    font-size: 1.5rem;
    padding: 0.5rem;
  }
}

@media (max-width: 48rem) {
  .swiper-container {
    height: 60vh;
  }

  .slide-inner .header-text {
    width: 90%;
    top: 30%;
    transform: translateY(-30%);
  }

  .slide-inner .header-text h2 {
    font-size: 1.5rem;
    line-height: 2.5rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
  }

  .slide-inner .header-text p {
    font-size: 0.875rem;
    margin-right: 0;
    margin-bottom: 1.5rem;
  }

  .swiper-button-next, .swiper-button-prev {
    font-size: 1.2rem;
    padding: 0.375rem;
  }
}

@media (max-width: 30rem) {
  .swiper-container {
    height: 50vh;
  }

  .slide-inner .header-text {
    width: 90%;
    top: 30%;
    transform: translateY(-30%);
  }

  .slide-inner .header-text h2 {
    font-size: 1.25rem;
    line-height: 2.25rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }

  .slide-inner .header-text p {
    font-size: 0.875rem;
    margin-right: 0;
    margin-bottom: 1.25rem;
  }

  .swiper-button-next, .swiper-button-prev {
    font-size: 1rem;
    padding: 0.25rem;
  }
}






/*
--------------------------------------------------------------------------------------
Our Services
--------------------------------------------------------------------------------------
*/

.services .section-heading h2 { 
  font-size: 2.6rem;
}

.services .section-heading h4 {
  font-size: 1rem;
  color: #00b7ff;
  text-transform: capitalize;
  font-weight: 500;
  margin-top: -2rem;
  padding-bottom: 2rem;
}

.services .section-heading p {
  font-size: 1.1rem;
  margin-bottom: -3rem;
}

section.services {
  margin-top: -0.001rem;
  background: #ffffff;
}

.services .service-item {
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 0.89rem;
  box-shadow: 0rem 0rem 0.9375rem rgba(0, 0, 0, 0.1);
  margin-top: 1.875rem;
}

.services .service-item:hover i {
  margin-top: 2.5rem;
}

.services .service-item h4 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.services .service-item p {
  text-align: left;
  margin-right: 3rem;
  font-size: 1rem;
  margin-left: 5rem;
}

.services .service-item i {
  transition: all 0.5s;
  float: left;
  font-size: 3rem;
  color: #0288fd;
  margin-bottom: 1.875rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .services .section-heading h2 {
    font-size: 2rem;
  }

  .services .section-heading p {
    font-size: 1.2rem;
  }

  section.services {
    margin-bottom: 2rem;
  }

  .services .service-item {
    padding: 1.25rem;
    margin-top: 1.5rem;
  }

  .services .service-item h4 {
    font-size: 1.2rem;
  }

  .services .service-item p {
    margin-left: 0;
    padding: 0 1rem;
  }

  .services .service-item i {
    font-size: 3rem;
    float: none;
    margin-bottom: 1.5rem;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .services .section-heading h2 {
    font-size: 1.8rem;
  }

  .services .section-heading p {
    font-size: 1rem;
  }

  section.services {
    margin-bottom: 0.5rem;
  }

  .services .service-item {
    padding: 0.5rem;
    margin-top: 1.25rem;
  }

  .services .service-item h4 {
    font-size: 1.4rem;
  }

  .services .service-item p {
    margin-left: 0;
    padding: 0 1rem;
  }

  .services .service-item i {
    font-size: 3.5rem;
    margin-bottom: 1.25rem;
  }
}




/*
--------------------------------------------------------------------------------------
Our Features
--------------------------------------------------------------------------------------
*/

/* General styling for the features section */
.features-section {
  padding: 3rem 1rem;
  background-color: #ffffff;
  text-align: center;
  margin: 0rem;
}

.features-section h2 {
  font-size: 2.6rem;
  font-weight: 700;
  color: #313233;
  padding-bottom: 1rem;
}

.features-subheading {
  font-size: 1rem;
  color: #666;
  margin-bottom: 3rem;
}

/* Grid Container for Features */
.features-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 75rem;
  margin: 0 auto;
}

/* Feature Item Styling */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.feature-image {
  width: 100%;
  max-width: 50rem;
  height: auto;
  border-radius: 0.5rem;
  transition: transform 0.5s ease, filter 0.5s ease;
}

/* Hover Effect for Images */
.feature-image:hover {
  transform: scale(1.1);
  filter: brightness(1.2);
}

.feature-description {
  margin-top: 1rem;
  text-align: center;
}

.feature-description h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}

.feature-description p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Responsive Design */

/* Tablet: max-width 768px */
@media (max-width: 768px) {
  .features-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .features-section {
    padding: 2.5rem 1.5rem; /* Adjust padding */
  }

  .features-heading {
    font-size: 2rem;
  }

  .features-subheading {
    font-size: 1rem;
  }

  .feature img {
    max-width: 15rem;
  }

  .feature-description h3 {
    font-size: 1.3rem;
  }

  .feature-description p {
    font-size: 0.9rem;
  }
}

/* Mobile: max-width 480px */
@media (max-width: 480px) {
  .features-section {
    padding: 2rem 1rem; /* Reduce padding for smaller screens */
  }

  .features-heading {
    font-size: 1.8rem; /* Reduce heading size */
  }

  .features-subheading {
    font-size: 0.9rem; /* Reduce subheading size */
  }

  .features-container {
    gap: 1rem; /* Reduce the gap between features */
  }

  .feature img {
    max-width: 12rem; /* Smaller image size */
    height: auto;
  }

  .feature-description h3 {
    font-size: 1.2rem; /* Smaller heading size */
  }

  .feature-description p {
    font-size: 0.85rem; /* Smaller paragraph size */
  }
}



/*--------------------------------------------------------------------
Testimonials - Sliding Cards
---------------------------------------------------------------------
.testimonial-section {
  text-align: center;
  padding: 3.125rem 1.25rem;
  background-color: #f8fbff;
}

.section-header h5 {
  font-size: 1.2rem;
  color: #00b7ff;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

.section-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1c2237;
  margin-bottom: 0.9375rem;
}

.section-header p {
  font-size: 1rem;
  color: #6c757d;
  margin-bottom: 1.5625rem;
  line-height: 1.6;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5625rem;
  font-size: 1rem;
  color: white;
  background-color: #00b7ff;
  border-radius: 1.5625rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #009edd;
}

.testimonial-slider {
  display: flex;
  gap: 1.25rem;
  justify-content: flex-start;
  margin-top: 1.875rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  transition: transform 0.3s ease-in-out;
}

.testimonial-slider:active {
  cursor: grabbing;
}

.testimonial {
  background-color: white;
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: 0rem 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
  flex: 0 0 18.75rem;
  text-align: left;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.testimonial:hover {
  transform: scale(1.05);
  box-shadow: 0rem 0.375rem 0.9375rem rgba(0, 0, 0, 0.15);
}

.testimonial p {
  font-size: 0.9375rem;
  color: #555;
  margin-bottom: 0.9375rem;
}

.client-info {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
}

.client-info img {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  border: 0.125rem solid #00b7ff;
}

.client-info h4 {
  font-size: 1rem;
  margin: 0;
  color: #1c2237;
}

.client-info span {
  font-size: 0.85rem;
  color: #6c757d;
}

.slider-dots {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.dot {
  width: 0.625rem;
  height: 0.625rem;
  background-color: #ddd;
  border-radius: 50%;
  margin: 0 0.3125rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #00b7ff;
}

/* Responsive Design 
@media (max-width: 48rem) {
  .testimonial-slider {
    flex-wrap: wrap;
    justify-content: center;
  }

  .testimonial {
    width: 90%;
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 30rem) { 
  .section-header h2 {
    font-size: 2rem;
  }

  .section-header p {
    font-size: 0.9rem;
  }

  .btn {
    font-size: 0.9rem;
    padding: 0.625rem 1.25rem;
  }
} 
-------------------------------------------------*/
 
/* Why Choose us */
.advantages {
  background-color: #ffffff;
  padding: 5rem 0;
  margin: 0rem;
  text-align: center;
}

.advantages h5 {
  color: #00b7ff;
  font-size: 1.1rem;
  font-weight: 400;
}

.advantages h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1rem;
}

.advantages p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 3rem;
  line-height: 1.8;
}

.advantages .advantage-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0 2rem;
}

.advantages .advantage-item {
  flex: 1 1 calc(25% - 2rem);
  max-width: 18rem;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Transparent overlay */
.advantages .advantage-item::before {
  content: '';
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  transition: bottom 0.4s ease;
  z-index: 1;
}

/* On hover, the overlay slides in from bottom to top */
.advantages .advantage-item:hover::before {
  bottom: 0;
}

.advantages .advantage-item:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.15);
}

.advantages .advantage-item .icon-circle {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 20%;
  background-color: #e8e9f5;
  color: #031179;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem auto;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.advantages .advantage-item .icon-circle i {
  font-size: 2.5rem;
}

.advantages .advantage-item:hover .icon-circle {
  transform: rotate(360deg);
  border-radius: 50%;
  background-color: #f5e8e8;
  color: #ff4081;
}

.advantages .advantage-item h3 {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 0.75rem;
}

.advantages .advantage-item p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

.advantages a {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: #04127d;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
  transition: color 0.3s ease;
  position: relative; 
  z-index: 2;
}

.advantages a i {
  margin-left: 0.5rem;
}

.advantages a:hover {
  color: #ff4081;
  cursor: pointer;
}

.advantages a:hover i {
  transform: translateX(0.25rem);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .advantages .advantage-item {
    flex: 1 1 calc(50% - 2rem);
  }

  .advantages a {
    font-size: 1rem;
  }

  .advantages a i {
    margin-left: 0.3rem;
  }

  /* Maintain hover effect on mobile/tablet */
  .advantages a:hover i {
    transform: translateX(0.2rem);
  }
}

@media (max-width: 768px) {
  .advantages .advantage-item {
    flex: 1 1 100%; /* One card per row */
  }

  .advantages h2 {
    font-size: 1.75rem; 
  }

  .advantages p {
    font-size: 1rem;
  }

  .advantages .advantage-item .icon-circle {
    width: 4rem;
    height: 4rem;
  }

  .advantages .advantage-item .icon-circle i {
    font-size: 2rem; /* Adjust icon size */
  }

  .advantages a {
    font-size: 1rem; 
  }

  .advantages a i {
    margin-left: 0.3rem;
  }

  /* Ensure hover effects on mobile */
  .advantages a:hover i {
    transform: translateX(0.2rem);
  }
}

@media (max-width: 480px) {
  .advantages h2 {
    font-size: 1.5rem; 
  }

  .advantages p {
    font-size: 0.9rem; /* Adjust text size */
  }

  .advantages .advantage-item {
    padding: 1rem; /* Less padding on very small screens */
  }

  .advantages .advantage-item .icon-circle {
    width: 3.5rem; /* Further reduce icon size */
    height: 3.5rem;
  }

  .advantages .advantage-item .icon-circle i {
    font-size: 1.8rem;
  }

  .advantages a {
    font-size: 0.9rem; 
  }

  .advantages a i {
    margin-left: 0.3rem;
  }

  /* Ensure hover effects on mobile */
  .advantages a:hover i {
    transform: translateX(0.2rem); 
  }
}



/*------------------------
FAQ
------------------------*/
.faq {
  max-width: 50rem;
  margin: 0 auto;
  background: none;
  padding: 2rem;
  text-align: center;
}

.faq-title {
  font-size: 2.6rem;
  font-weight: bold;
  margin-top: 1rem;
}

.faq-title span {
  color: #0f74f0;
}

.faq-btn-shape {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(53, 135, 250);
  background-color: #e7ebf7;
  padding: 0.2rem 0.8rem;
  border-radius: 2rem;
  text-align: center;
}

.faq-item {
  width: 60%;
  text-align: left;
  margin-top: 0.625rem;
  border: 0.0625rem solid #f8d7da;
  border-radius: 0.625rem;
  background: #fff;
  overflow: hidden;
  padding: 0.625rem;
}

.question {
  font-weight: 500;
  cursor: pointer;
  padding: 0.625rem;
  color: #dc3545;
  border-radius: 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question::after {
  content: '\003E'; /* Right-pointing triangle */
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.question.active::after {
  transform: rotate(90deg); /* Rotates arrow when active */
}

.question:focus {
  box-shadow: none;
}

.answer {
  display: none;
  padding: 0.625rem;
  background: #f1f1f1;
  margin-top: 0.3125rem;
  border-radius: 0.3125rem;
}

/* Responsive Design */
@media (max-width: 48rem) {
  .faq-title {
      font-size: 1.75rem;
  }
  .faq-item {
    width: 100%; /* Full width on smaller screens */
}
}

@media (max-width: 30rem) {
  .faq-title {
      font-size: 1.5rem;
  }
}




/*
---------------------------------------------
cta
---------------------------------------------
*/

section.simple-cta {
  background-image: url(../images/cta-bg1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 5rem 0rem;
}

section.simple-cta .left-image {
  margin-right: 2.8125rem;
}

section.simple-cta h4 {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 3.125rem;
}

section.simple-cta h4 em {
  font-style: normal;
  color: #ffffff;
}

section.simple-cta h4 strong {
  color: #0288fd;
  font-weight: 700;
}

section.simple-cta p {
  color: #fff;
  margin-top: 1.875rem;
  margin-bottom: 2.5rem;
}

section.simple-cta .buttons {
  display: flex;
  justify-content: end;
}

section.simple-cta .buttons .blue-button {
  margin-left: 33.125rem;
}

section.simple-cta .buttons .blue-button,
section.simple-cta .buttons .green-button {
  margin-top: -5.625rem;
  margin-right: -31.25rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  section.simple-cta h4 {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }

  section.simple-cta p {
    font-size: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }

  section.simple-cta .buttons {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  section.simple-cta .buttons .blue-button {
    margin-left: 0;
    margin-top: 1rem;
  }

  section.simple-cta .buttons .blue-button,
  section.simple-cta .buttons .green-button {
    margin-top: 0;
    margin-right: 0;
  }

  section.simple-cta .left-image {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  section.simple-cta h4 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  section.simple-cta p {
    font-size: 0.9rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }

  section.simple-cta .buttons .blue-button {
    margin-left: 0;
    margin-top: 1rem;
  }

  section.simple-cta .buttons .blue-button,
  section.simple-cta .buttons .green-button {
    margin-top: 0.5rem;
    margin-right: 0;
    width: 100%;
  }

  section.simple-cta .left-image {
    margin-right: 0;
    margin-bottom: 1rem;
    max-width: 100%;
  }
}





/* 
---------------------------------------------
partners
--------------------------------------------- 
*/

section.partners {
  background-color: #212741;
  padding: 5rem 0rem;
}

section.partners .item {
  margin: 0rem 0.9375rem;
  cursor: pointer;
  transition: all 0.3s;
}

section.partners .item:hover {
  opacity: 0.75;
}

/* Media Queries for Responsiveness */

/* For tablet screens (up to 768px) */
@media (max-width: 768px) {
  section.partners {
    padding: 3rem 1rem;
  }

  section.partners .item {
    margin: 1rem 0;
  }
}

/* For mobile screens (up to 480px) */
@media (max-width: 480px) {
  section.partners {
    padding: 2rem 1rem;
  }

  section.partners .item {
    margin: 1rem 0;
  }

  section.partners .item img {
    max-width: 80%;
  }
}



/*------------------------------------------------------ 
Footer General Styles 
------------------------------------------------------*/
footer {
  background: #010439;
  color: white;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

footer h6 {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: #ece6e6;
}

/* Footer Layout */
footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: start;
}

/* Footer Links */
footer ul {
  list-style: none;
  padding: 0;
}

footer ul li {
  margin-bottom: 0.8rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9rem;
}

/* Add Arrows Only to 'Quick Links' and 'Our Expertise' */
.col-lg-2:nth-child(2) ul li::before {
  content: ">";
  color: #ffffff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: bold;
}

/* Add hover effect to arrows */
.col-lg-2:nth-child(2) ul li::before {
  content: ">";
  color: #ffffff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: bold;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* On hover, change color and animate the arrow */
.col-lg-2:nth-child(2) ul li:hover::before {
  color: #0306d0;
  transform: translateY(-50%) translateX(5px);
}

/* Add hover effect to the text */
.col-lg-2:nth-child(2) ul li:hover {
  color: #00aaff;
  transition: color 0.3s ease;
}

/* Move 'Quick Links' slightly to the right */
.col-lg-2:nth-child(2) {
  margin-left: 8rem;
}

/* Remove arrows for 'Company' and 'Support' */
.col-lg-2:nth-child(1) ul li::before,
.col-lg-2:nth-child(3) ul li::before,  
.col-lg-2:nth-child(4) ul li::before { 
  content: "";
}

.col-lg-2:nth-child(1) ul li,
.col-lg-2:nth-child(3) ul li,
.col-lg-2:nth-child(4) ul li {
  padding-left: 0;
}

/* Align email in one line with icon */
.col-lg-2:nth-child(1) ul li:nth-child(3) {
  display: flex;
  align-items: left;
  gap: 0.5rem;
  white-space: nowrap;
  margin-left: -0.7rem;
}

/* Adjust the mail icon */
.col-lg-2:nth-child(1) ul li:nth-child(3) i {
  font-size: 1rem;
  color: #ffffff;
}

.col-lg-2:nth-child(1) ul li:nth-child(2) i,
.col-lg-2:nth-child(1) ul li:nth-child(1) i {
  font-size: 1rem;
  color: #ffffff;
}

/* Footer Links */
footer ul li a {
  text-decoration: none;
  color: white;
}

/* Social Media Icons - Hover Effect */
footer .d-flex a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0.125rem solid white;
  border-radius: 0.3rem;
  color: white;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

/* Hover Effects */
footer .d-flex a:hover {
  background-color: rgb(255, 255, 255);
  color: #0026ff;
  transform: scale(1.2) rotate(10deg); /* Slight zoom and rotation */
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5); /* Glowing effect */
}

/* Footer Bottom Text */
footer .row .col-lg-12 p {
  color: #f5f4f2;
  font-size: 0.9rem;
}

footer .row .col-lg-12 p a {
  color: #5aa3f2;
  text-decoration: none;
}

/* White Line Above Copyright */
.footer-divider {
  width: 90%;
  height: 0.01rem;
  background-color: rgb(146, 146, 146);
  margin: 2rem auto;
  opacity: 0.5;
}


/*---------------------------------- 
Responsive Footer Styles 
-----------------------------------*/

/* Tablets */
@media (max-width: 62rem) { /* 992px */
  footer .row {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  footer .col-lg-2 {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* Mobile */
@media (max-width: 36rem) {
  footer {
    padding: 1.5rem;
  }

  footer h6 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    text-align: left;
  }

  /* Align Quick Links & Our Expertise in the same row */
  .footer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    text-align: left;
  }

  .footer-links .col-lg-2 {
    width: 50%; /* Make them take equal space */
  }

  /* Remove extra padding & align arrows */
  footer ul {
    padding-left: 0;
  }

  footer ul li {
    font-size: 0.85rem;
    padding-left: 1.2rem;
  }

  /* Remove unnecessary margin */
  .col-lg-2:nth-child(1) ul li:nth-child(3) {
    margin-left: 0;
    justify-content: flex-start;
  }

  /* Social Media Icons */
  footer .d-flex {
    justify-content: flex-start;
  }

  footer .d-flex a {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.8rem;
  }

  /* Footer bottom text */
  footer .row .col-lg-12 p {
    font-size: 0.8rem;
    text-align: center;
  }
}

/* Small Desktops / Large Tablets */
@media (max-width: 75rem) { /* 1200px */
  footer .row {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  footer .col-lg-2 {
    width: auto;
    margin-bottom: 0;
  }

  /* Move 'Quick Links' slightly to the right */
  .col-lg-2:nth-child(2) {
    margin-left: 0rem; /* Adjust as needed */
  }
}



/* 
---------------------------------------------
page heading
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/heading-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 13.4375rem 0rem 7.5rem 0rem;
  text-align: center;
}

.page-heading h2 {
  font-size: 3.5rem;
  color: #fff;
  font-weight: 700;
}

.page-heading .div-dec {
  width: 7rem;
  height: 0.375rem;
  border-radius: 0.1875rem;
  background-color: #fff;
  margin: 1.25rem auto 0 auto;
}




/* 
---------------------------------------------
about us page
--------------------------------------------- 
*/

.top-heading {
  font-size: 2.3rem;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.top-heading span {
  color: #dc3545; /* Different color for 'About Us' */
}

section.top-section .left-image img {
  border-radius: 0.9375rem;
  height: 34.375rem;
  margin-top: 2.125rem;
  width: 100%; /* Make image responsive */
}

section.top-section .accordions {
  border-radius: 0.3125rem;
  padding: 3.125rem 2.5rem;
  background-color: #fff;
  margin-left: 1.875rem;
  box-shadow: 0rem 0rem 0.9375rem rgba(0, 0, 0, 0.1);
}

.accordions .accordion {
  border-bottom: 0.0625rem solid #eee;
}

.accordions .last-accordion {
  border-bottom: none;
}

.accordion-head {
  padding: 2.1875rem 0rem !important;
  font-size: 1.375rem;
  font-weight: 600;
  color: #212741;
  cursor: pointer;
  transition: color 200ms ease-in-out;
}

@media screen and (min-width: 48rem) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}

.accordion-head.is-open {
  color: #43ba7f;
  border-bottom: none;
}

.accordion-head.is-open .icon {
  transform: rotate(45deg);
}

.accordion-body {
  padding: 0rem;
  overflow: hidden;
  height: 0rem;
  transition: height 300ms ease-in-out;
  border-bottom: 0.0625rem solid #fff;
}

.accordion-body > .content p {
  padding: 0rem 0rem 1.875rem 0rem;
  padding-top: 0rem;
}

section.what-we-do {
  margin-bottom: 2rem;
}

.what-we-do .left-content {
  margin-right: 3.75rem;
}

.what-we-do .left-content h4 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 2.5rem;
  margin-bottom: 2.5rem;
}

.what-we-do .left-content p {
  margin-bottom: 2.5rem;
}

.what-we-do .right-items .item {
  border-radius: 0.3125rem;
  padding: 2.5rem 1.875rem;
  box-shadow: 0rem 0rem 0.9375rem rgba(0, 0, 0, 0.1);
  margin-bottom: 1.875rem;
  position: relative;
}

.what-we-do .right-items .item em {
  position: absolute;
  font-style: normal;
  font-size: 2.75rem;
  color: #43ba7f;
  font-weight: 600;
  right: 0.9375rem;
  top: 0.3125rem;
  transition: all 0.3s;
}

.what-we-do .right-items .item h4 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 1.375rem;
}

.what-we-do .right-items .item:hover em {
  top: 0.625rem;
}

/* Responsive adjustments */

/* For mobile devices */
@media screen and (max-width: 767px) {
  section.top-section .left-image img {
    height: auto;
    max-width: 100%;
    margin-top: 1.5rem;
  }

  section.top-section .accordions {
    padding: 2rem 1.5rem;
    margin-left: 0;
  }

  .what-we-do {
    margin-bottom: 4rem;
  }

  .what-we-do .left-content {
    margin-right: 0;
    margin-bottom: 2rem;
  }

  .what-we-do .right-items {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .what-we-do .right-items .item {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .what-we-do .right-items .item em {
    font-size: 2.5rem;
    top: 0.25rem;
  }

  .accordion-head {
    font-size: 1.2rem;
    padding: 1rem 0;
  }
}

/* For tablet devices */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  section.top-section .left-image img {
    height: 30rem;
  }

  section.top-section .accordions {
    padding: 2.5rem 2rem;
  }

  .what-we-do {
    margin-bottom: 6rem;
  }

  .what-we-do .left-content {
    margin-right: 2.5rem;
  }

  .what-we-do .right-items .item {
    width: 48%;
    margin-bottom: 2rem;
  }
}




/* 
---------------------------------------------
Our services page
--------------------------------------------- 
*/

.services {
  padding: 6rem;
  margin: 0rem;
  text-align: center;
  background-color: #ffff;
}

.services h2 {
  font-weight: 700;
  color: #151721;
  font-size: 2.4rem;
  margin-bottom: 1rem;
  padding-top: -10rem;
}

.services p {
  font-size: 1.1rem;
  color: #666;
  margin-top: 0.9rem;
}

.service-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;  
  padding: 1.25rem 0.625rem;
  flex-wrap: wrap;
}

/* Service Card */
.service-card {
  background-color: #ffffff;
  padding: 1.25rem;
  text-align: center;
  border-radius: 0.9375rem;
  transition: 0.3s ease-in-out;
  box-shadow: 0 0 0.9375rem rgba(0, 0, 0, 0.2); 
  max-width: 35rem;
  margin: 0.625rem;
  transform-origin: center;
  display: inline-block;
}

.service-card:hover {
  transform: scale(1.08);
  box-shadow: 0 0 1.25rem rgba(0, 123, 255, 0.3);
}

/* Icon Styling */
.icon {
  font-size: 2.875rem;
  margin-bottom: 1rem;
  color: #007BFF;
  text-align: center;
  display: block;
}

/*------------------ Detailed Services Section----------------- */

/* Detailed Services Section Styling */
.detailed-services {
  padding: 3rem 2rem;
  text-align: center;
  margin: 0rem;
  background-color: #f4f4f4;
}

.detailed-services h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #313233;
  margin-bottom: 1.5rem;
}

.detailed-services p {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 3rem;
}

.details-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.detail-card {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.detail-card a {
  color: #ffffff; /* White text */
  font-weight: bold;
  text-decoration: none;
  background-color: #007bff; /* Blue background */
  padding: 0.5rem 0.75rem; /* 8px → 0.5rem, 12px → 0.75rem */
  border-radius: 0.3125rem; /* 5px → 0.3125rem */
  display: inline-block;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.detail-card a:hover {
  background-color: #ff9900; /* Orange background on hover */
  color: #ffffff; /* White text */
  text-decoration: none;
}

.detail-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.icon {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon i {
  font-size: 3rem;
  color: #00d1ff;
  transition: transform 0.3s ease;
}

.detail-card:hover .icon i {
  transform: scale(1.1); /* Scale the icon slightly on hover */
}

.detail-card h3 {
  font-size: 1.5rem;
  text-align: center;
  font-weight: 600;
  color: #313233;
  margin-bottom: 1rem;
}

.detail-card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

/* Add Image above each heading */
.detail-card img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.detail-card:hover img {
  transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Responsive Design for Smaller Screens */

/* Mobile view (max-width: 576px) */
@media (max-width: 576px) {
  .services {
    padding: 3rem 1rem;
  }

  .services h2 {
    font-size: 1.5rem;
  }

  .services p {
    font-size: 1rem;
  }

  .service-container {
    flex-direction: column;
    padding: 1rem;
  }

  .service-card {
    max-width: 100%;
    margin: 1rem 0;
  }

  .detailed-services {
    padding: 2rem 1rem;
  }

  .detailed-services h2 {
    font-size: 1.5rem;
  }

  .detailed-services p {
    font-size: 1rem;
  }

  .details-container {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .detail-card {
    padding: 1.5rem;
  }

  .detail-card h3 {
    font-size: 1.2rem;
  }

  .detail-card p {
    font-size: 0.9rem;
    padding-left: 1rem;
  }

  .detail-card img {
    height: auto;
  }

  .benefits {
    padding: 3rem 1rem;
  }

  .benefits .title {
    font-size: 1.5rem;
  }

  .benefits .subtitle {
    font-size: 1.1rem;
  }

  .card {
    max-width: 100%;
    padding: 1rem;
  }

  .card i {
    font-size: 2rem;
  }
}

/* Tablet view (min-width: 577px and max-width: 1024px) */
@media (min-width: 577px) and (max-width: 1024px) {
  .services {
    padding: 5rem 2rem;
  }

  .services h2 {
    font-size: 2rem;
  }

  .service-container {
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .service-card {
    max-width: 45%;
  }

  .detailed-services {
    padding: 3rem 2rem;
  }

  .detailed-services h2 {
    font-size: 2rem;
  }

  .detailed-services p {
    font-size: 1.1rem;
  }

  .details-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .detail-card {
    padding: 2rem;
  }

  .detail-card h3 {
    font-size: 1.4rem;
  }

  .detail-card p {
    font-size: 1rem;
    padding-left: 2rem;
  }

  .benefits {
    padding: 5rem 2rem;
  }

  .benefits .title {
    font-size: 1.75rem;
  }

  .benefits .subtitle {
    font-size: 1.3rem;
  }

  .card {
    max-width: 48%;
    padding: 1.5rem;
  }
}

/* Desktop view (min-width: 1025px) */
@media (min-width: 1025px) {
  .services {
    padding: 6rem 3rem;
  }

  .services h2 {
    font-size: 2.4rem;
  }

  .service-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .service-card {
    max-width: 30%;
  }

  .detailed-services {
    padding: 4rem 3rem;
  }

  .detailed-services h2 {
    font-size: 2.5rem;
  }

  .details-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .detail-card {
    padding: 2.5rem;
  }

  .detail-card h3 {
    font-size: 1.6rem;
  }

  .detail-card p {
    font-size: 1.1rem;
    padding-left: 2rem;
  }

  .benefits {
    padding: 6rem 3rem;
  }

  .benefits .title {
    font-size: 2rem;
  }

  .benefits .subtitle {
    font-size: 1.5rem;
  }

  .card {
    max-width: 32%;
    padding: 2rem;
  }
}





/*
---------------------------------------------
Contact Us Page
--------------------------------------------- 
*/

section.map {
  margin-top: 0rem;
  margin-bottom: -4rem;
  padding-top: 3rem;
  background-color: #f9f9f9;
}

.header-text h2 {
  margin: 0rem;
  font-size: 2.5rem;
  font-weight: bold;
}

section.contact {
  padding: 0.75rem 1.25rem;
  background-color: #f9f9f9;
  margin-top: 1rem;
}

section.contact .info-item {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
  text-align: left;
}

section.contact .info-item i {
  font-size: 2.375rem; 
  color: #ff4757;
  margin-bottom: -1rem;
}

section.contact .info-item h3 {
  font-size: 1.25rem; 
  font-weight: 700;
  margin: 1.25rem 0 0.625rem 0;
  color: #333;
}

section.contact .info-item p {
  font-size: 0.875rem;
  color: #7e7c7c;
  line-height: 1.5rem;
}

section.contact .php-email-form {
  background-color: #ffffff; 
  padding: 1.8rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.625rem rgba(200, 29, 29, 0.1);
}

section.contact .php-email-form input,
section.contact .php-email-form textarea {
  width: 100%;
  padding: 0.625rem 0.9375rem;
  font-size: 0.875rem;
  color: #555;
  border: 0.0625rem solid #ddd;
  border-radius: 0.25rem;
  background-color: #ffffff;
  margin-bottom: 0.2rem;
}

section.contact .php-email-form input:focus,
section.contact .php-email-form textarea:focus {
  border-color: #ffffff;
  outline: none;
}

section.contact .php-email-form button[type=submit] {
  background-color: #ff4757;
  color: #ffffff;
  border: none;
  padding: 0.625rem 1.875rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

section.contact .php-email-form button[type=submit]:hover {
  background-color: #e63946;
}

.container.section-title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12.90rem;
}

.container.section-title h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
}
.red-line-title {
  position: relative;
  display: inline-block;
  text-align: center;
}

.red-line-title::before,
.red-line-title::after {
  content: "";
  display: inline-block;
  width: 2.6rem;
  border-radius: 4rem;
  height: 0.2rem;
  background-color: rgb(180, 3, 3);
  position: relative;
  vertical-align: middle;
  margin: 0 0.625rem;
}

.red-line-title::before {
  margin-right: 0.625rem;
}

.red-line-title::after {
  margin-left: 0.625rem; 
}

/* Responsive Media Queries */
/* Mobile Devices (Max Width: 576px) */
@media (max-width: 576px) {
  .header-text h2 {
    font-size: 1.8rem;
  }

  section.contact {
    padding: 0.5rem 0.75rem;
  }

  section.contact .info-item {
    padding: 1rem;
    font-size: 0.875rem;
  }

  section.contact .info-item i {
    font-size: 1.4rem; /* Adjust icon size */
  }

  section.contact .info-item h3 {
    font-size: 0.95rem;
  }

  section.contact .info-item p {
    font-size: 0.7rem;
  }

  section.contact .php-email-form input,
  section.contact .php-email-form textarea {
    font-size: 0.7rem; /* Adjust input font size */
  }

  .container.section-title h2 {
    font-size: 1.8rem; /* Adjust title size */
  }
}

/*--------------------------------------------
  Responsive Small Cards for Contact Info
--------------------------------------------*/

/* Responsive Grid */
@media (max-width: 768px) {
  .info-item {
    padding: 1rem;
  }

  .info-item i {
    font-size: 1.8rem;
  }

  .info-item h3 {
    font-size: 1.1rem;
  }

  .info-item p {
    font-size: 0.85rem;
  }
}

/* Mobile View (Stack Cards in One Column) */
@media (max-width: 576px) {
  .col-md-6 {
    width: 100%;
  }

  .info-item {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .info-item i {
    font-size: 1.5rem;
  }

  .info-item h3 {
    font-size: 1rem;
  }

  .info-item p {
    font-size: 0.8rem;
  }
}


/* Mobile Devices (Max Width: 576px) */
@media (max-width: 576px) {
  .header-text h2 {
    font-size: 2rem;
  }

  section.contact {
    padding: 0.75rem 1rem;
  }

  section.contact .info-item {
    padding: 1rem;
    text-align: left;
  }

  section.contact .info-item i {
    font-size: 1.6rem;
  }

  section.contact .info-item h3 {
    font-size: 1rem;
  }

  section.contact .info-item p {
    font-size: 0.75rem;
  }

  section.contact .php-email-form input,
  section.contact .php-email-form textarea {
    font-size: 0.8rem;
  }

  .container.section-title h2 {
    font-size: 2rem;
  }
}

/* Tablets (Max Width: 768px) */
@media (max-width: 768px) {
  .header-text h2 {
    font-size: 2.3rem;
  }

  section.contact {
    padding: 1rem 1.5rem;
  }

  section.contact .info-item {
    padding: 1.25rem;
  }

  section.contact .info-item i {
    font-size: 1.8rem;
  }

  section.contact .info-item h3 {
    font-size: 1.1rem;
  }

  section.contact .php-email-form input,
  section.contact .php-email-form textarea {
    font-size: 0.9rem;
  }

  .container.section-title h2 {
    font-size: 2.2rem;
  }
}

/* Medium Screens (Max Width: 992px) */
@media (max-width: 992px) {
  .header-text h2 {
    font-size: 2.5rem;
  }

  section.contact {
    padding: 1.5rem 2rem;
  }

  section.contact .info-item {
    padding: 1.75rem;
  }

  section.contact .info-item i {
    font-size: 2rem;
  }

  section.contact .info-item h3 {
    font-size: 1.2rem;
  }

  .container.section-title h2 {
    font-size: 2.5rem;
  }
}

/* Large Screens (Min Width: 1200px) */
@media (min-width: 1200px) {
  .header-text h2 {
    font-size: 3rem;
  }

  section.contact {
    padding: 2rem 3rem;
  }

  section.contact .info-item {
    padding: 2rem;
  }

  section.contact .php-email-form input,
  section.contact .php-email-form textarea {
    font-size: 1rem;
  }

  .container.section-title h2 {
    font-size: 2.8rem;
  }
}



/* 
---------------------------------------------
product page
--------------------------------------------- 
*/

.main-product h5 {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 3rem;
  margin-top: -1rem;
  color: #00d1ff;
}

.red-line-title {
  text-align: center;
  display: block;
  width: 100%;
}

.features-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #212741;
  margin-bottom: 0rem;
  text-align: left;
}

.main-product {
  padding: 3.75rem;
  background-color: #f9f9f9;
  margin-top: 0rem;
}

.image-content {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
}

.image-content img {
  width: 30%;
  border-radius: 0.625rem;
  margin-bottom: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.interactive-content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.description-item {
  display: flex;
  align-items: flex-start;
  background: #f0f0f5;
  padding: 2rem;
  border-radius: 0.625rem;
  box-shadow: 0.3rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.description-item:hover {
  transform: translateY(-0.3125rem);
  box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.description-item i {
  font-size: 2rem;
  color: #2aa7ff;
  margin-right: 1rem;
}

.description-item h5 {
  text-align: center;
  font-style: 'Calibri';
  font-weight: 600;
  margin-top: -0.5rem;
  font-size: 1.35rem;
  color: #1f2233;
  margin-bottom: 0.5rem;
}

.description-item p {
  margin-left: 2.5rem;
  font-size: 1rem;
  color: #383838;
  line-height: 1.6;
}

.product-video {
  margin-top: 6.25rem;
  margin-left: 7rem;
  max-width: 23.25rem;
  width: 100%;
  height: auto;
  border: 0.5rem solid #000000;
  border-radius: 0.5rem; 
  box-shadow: 0rem 0.125rem 0.625rem rgba(0, 0, 0, 0.1); 
  padding: 0.3rem;
  background-color: #ffffff;
}

.video-title {
  text-align: center;
  margin-bottom: 1rem;
  margin-left: 4rem;
}

.video-title h2 {
  font-size: 1.8rem;
  color: #000000;
  font-weight: 650;
  text-transform: 'Arial';
}

/* Product Details Section */
.product-details {
  padding: 3.75rem 0;
  background-color: #fff;
  margin: 0rem;
  text-align: center;
}

.section-heading h5 {
  color: #2aa7ff;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.125rem solid #2aa7ff;
  animation: typing 8s steps(20, end) infinite, blink-caret 0.5s step-end infinite;
}

.section-heading h4 {
  color: #000000;
  font-family: 'Arial', serif;
  font-size: 1.5rem; 
  font-weight: bold;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

/* Keyframes for typing effect */
@keyframes typing {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

/* Keyframes for blinking caret effect */
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #2aa7ff;
  }
}

/* Table Container */
.table-container {
  margin: 1rem auto; /* Center the container horizontally */
  margin-right: -15rem;
  overflow-x: auto;
  border-radius: 0.625rem;
  animation: fadeIn 0.5s ease-in-out;
  background-color: #f7faff;
  padding: 1.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  max-width: 100%;
  text-align: center;
}

/* Flexbox for Side-by-Side Tables */
.tables-container {
  display: flex;
  gap: 2rem;
  justify-content: center; /* Center all tables within the parent container */
  flex-wrap: wrap;
}

.table-container {
  flex: 1;
  min-width: 30rem;
  max-width: 100%;
}

/* Responsive Table */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  text-align: center;
}

.responsive-table th,
.responsive-table td {
  padding: 1.5rem;
  text-align: center;
  border: 0.0625rem solid #ddd;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.responsive-table th {
  background-color: #08195f;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.responsive-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.responsive-table tr:hover {
  background-color: #e6f7ff;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

/* Cell Hover Effects */
.responsive-table td:hover {
  background-color: #d1eaff;
  color: #08195f;
}

/* Plan Details Section */
.plan-details {
  margin-left: 15rem;
  margin-top: 1rem;
  padding: 1.5rem;
  background-color: #f7faff;
  border: 0.0625rem solid #ddd;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
  margin-bottom: 1rem;
}

.plan-details h3 {
  font-size: 1.5rem;
  color: #08195f;
  margin-bottom: 1rem;
}

.plan-details p {
  margin: 0rem;
  font-size: 1rem;
}

button.buy-now-btn {
  padding: 0.75rem 2rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
  background-color: #08195f;
  border: none;
  border-radius: 0.3125rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button.buy-now-btn:hover {
  background-color: #299bff;
}

/* Center the Toggle Buttons in the Middle of the Page */
.toggle-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  padding-bottom: 3rem;
  transform: translate(-50%, -50%);
  gap: 1.5rem;
}

/* Toggle Button Styles */
.tab-button {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  color: #08195f;
  background: linear-gradient(135deg, #f7faff 30%, #dfeeff 100%);
  border: 0.125rem solid #08195f;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

/* Hover Effect */
.tab-button:hover {
  background: linear-gradient(135deg, #031d83 30%, #40a1f5 100%);
  color: #fff;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);
}

/* Active Button */
.tab-button.active {
  background: linear-gradient(135deg, #299bff 30%, #0288fd 100%);
  color: white;
  border-color: #0288fd;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 136, 253, 0.4);
}

/* Click Animation */
.tab-button:active {
  transform: scale(0.95);
}

/* Animated Background */
.tab-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

.tab-button:hover::before {
  transform: scaleX(1);
}

.toggle-buttons .tab-button {
  animation: fadeInButtons 0.5s ease both;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInButtons {
  from {
    opacity: 0;
    transform: translateY(-10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Adjustments */
@media (max-width: 48rem) {
  .main-nav .nav {
    flex-direction: column;
    align-items: center;
  }

  .menu-trigger {
    display: block;
    color: #212741;
    cursor: pointer;
    font-size: 1.4rem;
  }

  .service-item,
  .image-content img {
    max-width: 90%;
    margin: auto;
  }

  .text-content h4 {
    font-size: 1.25rem;
  }
}

/* Responsive Adjustments for Product Page */
@media (max-width: 64rem) {
  .interactive-content {
    flex-direction: column;
    gap: 1rem;
  }

  .product-video {
    margin-left: 0;
    max-width: 100%;
    padding: 0.2rem;
  }

  .video-title {
    margin-left: 0;
  }
}

@media (max-width: 48rem) {
  .features-title {
    font-size: 1.5rem;
    text-align: center;
  }

  .main-product {
    padding: 2rem 1rem;
  }

  .image-content img {
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }

  .description-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
  }

  .description-item p {
    margin-left: 0;
  }

  .product-video {
    margin-top: 3rem;
    margin-left: 0;
  }

  .video-title h2 {
    font-size: 1.5rem;
  }

  .section-heading h5 {
    font-size: 1.5rem;
  }

  .section-heading h4 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .features-title {
    font-size: 1.5rem;
  }

  .main-product {
    padding: 1.5rem 0.5rem;
  }

  .interactive-content {
    gap: 0.75rem;
  }

  .description-item {
    padding: 1rem;
  }

  .description-item i {
    padding-bottom: 2rem;
  }

  .description-item h5 {
    font-size: 1.15rem;
  }

  .description-item p {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .product-video {
    margin-top: 4rem;
    max-width: 100%;
  }

  .toggle-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }

  .tab-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .buy-now-btn {
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
  }
}

/* Table Responsive Adjustments */
@media (max-width: 64rem) { /* For tablets */
  .tables-container {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }

  .table-container {
    max-width: 90%;
    min-width: auto;
    margin-right: 0;
    overflow-x: auto;
  }

  .plan-details {
    margin-left: 0;
    max-width: 90%;
  }

  .toggle-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    left: auto;
    transform: none;
    padding-bottom: 2rem;
  }
}

@media (max-width: 48rem) { /* For mobile screens */
  .tables-container {
    display: block;
    width: 100%;
  }

  .table-container {
    width: 100%;
    min-width: auto;
    margin: 0 auto;
    padding: 1rem;
    overflow-x: auto;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 1rem;
    font-size: 0.875rem;
  }

  .responsive-table tr:hover {
    transform: none; /* Remove scaling effect on smaller screens */
  }

  .plan-details {
    width: 50%;
    padding: 1rem;
    text-align: left;
  }

  .toggle-buttons {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    text-align: center;
    position: relative;
    left: auto;
    transform: none;
  }

  .tab-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    width: 80%;
    text-align: center;
  }

  .buy-now-btn {
    width: 55%;
    margin-top: 2rem;
    font-size: 1rem;
    padding: 0.75rem;
  }
}

/* Ensuring the table fits within smaller screens */
@media (max-width: 36rem) { /* For very small screens */
  .table-container {
    max-width: 100%;
    overflow-x: auto;
  }

  .responsive-table {
    font-size: 0.75rem;
  }

  .responsive-table th,
  .responsive-table td {
    padding: 0.75rem;
  }

  .toggle-buttons {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: -1rem;
  }

  .tab-button {
    width: 60%;
    font-size: 0.75rem;
    padding: 0.5rem;
  }
}



/***-------------------------------------------------------
Our Team
------------------------------------------------------- ***/

/* General Styling for Team Section */
.team-section {
  margin: 0rem;
  text-align: center;
  padding: 1rem 0;
  padding-bottom: 4rem;
  background-color: #f8f9fa;
}

.team-section h2 {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

.team-section h4 {
  font-size: 1.1rem;
  color: #00d1ff;
}

.team-section h2 span {
  color: #d53c3c;
}

/* Team Container */
.team-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}

/* Single Team Member Styling */
.team-member {
  position: relative;
  background: white;
  border-radius: 0.625rem;
  overflow: hidden;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease-in-out;
  width: 16.25rem;
  padding-bottom: 0.625rem;
}

.team-member img {
  width: 17rem;
  height: 20rem;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.team-member:hover {
  transform: translateY(-0.3125rem); 
}

/* Social Media Overlay Box */
.overlay {
  position: absolute;
  bottom: 0.625rem;
  left: 50%;
  transform: translateX(-50%) translateY(1.25rem);
  width: 80%;
  height: 3.125rem; 
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.team-member:hover .overlay {
  opacity: 1;
  transform: translateX(-50%) translateY(0rem);
  pointer-events: auto;
}

/* Social Media Icons */
.social-icons {
  display: flex;
  gap: 0.9375rem;
}

.social-icons a {
  font-size: 1.4rem;
  color: white;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  color: #00d1ff;
  transform: scale(1.2);
}

/* Team Member Info */
.info h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0.625rem 0 0.3125rem;
}

.info p {
  color: gray;
  font-size: 0.9rem;
  margin-bottom: 0.625rem;
}

/* Responsive Design */
@media (max-width: 48rem) {
  .team-container {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

@media (min-width: 48rem) and (max-width: 64rem) {
  .team-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .team-container {
    grid-template-columns: repeat(3, 1fr);
  }
}




/*--------------------------------------------------
Terms and Conditions Section Styles 
--------------------------------------------------*/

.terms-conditions {
  padding: 3rem 0;
  background-color: #f8f8f8;
  margin: 0;
}

.terms-conditions .wrapper {
  max-width: 70%;
  margin: 0 auto;
  text-align: left;
}

.terms-conditions .section-title {
  font-size: 2rem;
  font-weight: bold;
  color: #2c2c2c;
  margin-bottom: 1.5rem;
  text-align: center;
}

.terms-conditions .sub-heading {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 0rem;
  color: #333;
}

.terms-conditions p {
  font-size: 0.9rem;
  padding-top: 0.5rem;
  margin-bottom: 1rem;
  color: #555;
  line-height: 1.6;
  text-align: justify;
}

.terms-conditions h5 {
  font-size: 1.2rem;
  margin-bottom: -1rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

.terms-conditions h6 {
  margin-bottom: -1rem;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
}

.terms-conditions ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.terms-conditions ul li {
  margin-bottom: 0.5rem;
  color: #444;
}

/* Prevents affecting global styles */
.terms-conditions * {
  box-sizing: border-box;
  word-wrap: break-word;
}

.terms-conditions strong {
  font-weight: 600;
  color: #3d3d3d; /* Darker shade for emphasis */
}

/* Responsive Design */
@media (max-width: 768px) {
  .terms-conditions .wrapper {
    max-width: 90%;
  }

  .terms-conditions .section-title {
    font-size: 1.8rem;
  }

  .terms-conditions .sub-heading {
    font-size: 1.3rem;
  }

  .terms-conditions h5 {
    font-size: 1.1rem;
    margin-bottom: -1.3rem;
  }

  .terms-conditions p,
  .terms-conditions ul li {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .terms-conditions {
    padding: 2rem 0;
  }

  .terms-conditions .section-title {
    font-size: 1.5rem;
  }

  .terms-conditions .sub-heading {
    font-size: 1.5rem;
    margin-bottom: -1rem;
  }

  .terms-conditions h5 {
    font-size: 1.1rem;
    margin-bottom: -1.3rem;
  }

  .terms-conditions p,
  .terms-conditions ul li {
    font-size: 0.9rem;
  }
}





/*--------------------------------------------------
Privacy and Security Section Styles 
--------------------------------------------------*/

.privacy-security {
  padding: 3rem 0;
  background-color: #f9f9f9;
  margin: 0;
}

.privacy-security .wrapper {
  max-width: 70%;
  margin: 0 auto;
  text-align: left;
}

.privacy-security .section-title {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
}

.privacy-security .sub-heading {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 0rem;
  color: #292929;
}

.privacy-security p {
  font-size: 0.9rem;
  padding-top: 0.5rem;
  margin-bottom: 1rem;
  color: #525151;
  line-height: 1.6;
  text-align: justify;
}

.privacy-security h5 {
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

.privacy-security h6 {
  font-size: 1rem;
}

.privacy-security ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.privacy-security ul li {
  margin-bottom: 0.5rem;
  color: #444;
}

/* Prevents affecting global styles */
.privacy-security * {
  box-sizing: border-box;
  word-wrap: break-word;
}

.privacy-security strong {
  font-weight: 600;
  color: #3f3e3e; /* Darker shade for emphasis */
}


/* Responsive Design */
@media (max-width: 768px) {
  .privacy-security .wrapper {
    max-width: 90%;
  }

  .privacy-security .section-title {
    font-size: 1.8rem;
  }

  .privacy-security .sub-heading {
    font-size: 1.3rem;
  }

  .privacy-security p,
  .privacy-security ul li {
    font-size: 0.5rem;
  }
}

@media (max-width: 480px) {
  .privacy-security {
    padding: 2rem 0;
  }

  .privacy-security .section-title {
    font-size: 1.5rem;
  }

  .privacy-security .sub-heading {
    font-size: 1.2rem;
  }

  .privacy-security p,
  .privacy-security ul li {
    font-size: 0.9rem;
  }
}






/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 62rem) {
  .header-area .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li ul li:last-child {
    display: inline-block;
  }
  .header-area {
    background-color: #212741;
  }
  .slide-inner .header-text {
    width: 80%;
  }
  .simple-cta {
    text-align: center;
  }
  section.simple-cta .buttons {
    justify-content: center;
  }
  section.about-us .naccs .menu div,
  section.service-details .naccs .menu div {
    margin-right: 0.9375rem;
    font-size: 0.9375rem;
    padding: 0.9375rem 1.25rem;
  }
  section.about-us .right-content {
    margin-left: 0rem;
    margin-top: 3.75rem;
  }
  section.calculator .left-image {
    display: none;
  }
  .testimonials .item img {
    max-width: 12.5rem;
    right: 3.125rem;
  }
  section.partners .item {
    margin: 0.9375rem;
  }
  section.top-section .accordions {
    margin-left: 0rem;
    margin-top: 2.8125rem;
  }
  .what-we-do .left-content {
    margin-right: 0rem;
    margin-bottom: 2.8125rem;
  }
  .main-services .left-image {
    margin-right: 0rem;
    margin-bottom: 1.875rem;
  }
  .main-services .right-text-content {
    margin-left: 0rem;
  }
  .main-services .right-image {
    margin-left: 0rem;
    margin-top: 1.875rem;
  }
  section.service-details ul.nacc li .left-image {
    position: relative;
    margin-right: 0rem;
    transform: translateY(0rem);
  }
  section.service-details ul.nacc li .left-image img {
    border-radius: 0.9375rem;
  }
  section.service-details ul.nacc li .right-content {
    padding: 3.125rem;
    margin-left: 0rem;
  }
  section.service-details ul.nacc li .right-content h4 {
    margin-right: 0rem;
  }
  section.service-details ul.nacc li.active {
    display: inline-block;
  }
  section.service-details ul.nacc li {
    display: none;
  }
  section.map .info-item {
    margin-top: 1.875rem;
  }
}