/* Fonts */

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #444444;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #545454;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #014AAD;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
 
}
@media (max-width: 767px) {
  .navmenu {
    background-color: #014AAD; /* Change to your desired custom color */
  }
}
/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */


  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #e96b56;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #444444;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #014AAD;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);

}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);

}

/* Underline effect on hover and active state */
.navmenu ul li a:hover::after,
.navmenu ul li a.active::after {
  content: '';
  position: absolute;
  bottom: 15px; /* Reduce space between underline and text */
  left: 0;
  width: 70%;
margin-left: 17px;
  text-align: center;
  height: 5px; /* Set underline thickness */
  background-color: #fff; /* Match the color to your preference */
  transition: all 0.3s ease-in-out; /* Smooth transition on hover */
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;

  box-shadow: 0px 0px 20px 0px color-mix(in srgb, var(--default-color), transparent 90%);
}

.header .topbar {
 
  
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 575px) {
	.mhide {display:none;}
	.header .topbar .contact-info i{color: #000080 !important;font-size: 0.88rem !important;}
	.header .topbar{height:55px;text-align:center;}
.topbar .d-flex{display:block !important;}
.topbar .contact-info{padding-bottom:5px;}
  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  
  transition: 0.3s;
  margin-left: 5px;
}

.header .topbar .social-links a:hover {
  color: var(--accent-color);
}

.header .branding {
  padding: 10px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 26px;
  padding: 0 0 0 8px;
  margin: 11px 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-left: 8px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
  
    padding: 18px 15px;
    font-size: 14px;

    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
 
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color:#014AAD;
height:350px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: #000;
    padding: 10px 20px;
 
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #ffff;
  --default-color: #000;
  --heading-color: #ffffff;
  color: #000;
  background-color: var(--background-color);
  font-size: 14px;
  padding-top: -50px;
  padding-bottom: 20px;
  position: relative;
}

.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 70px 0;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  background-color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  transition: 0.3s;
  border-radius: 50px;
}
.overlay-text {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* Text color */
  font-size: 54px; /* Text size */
  font-weight: bold; /* Text weight */
  text-align: center; /* Center the text */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for better visibility */
}
.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}
.footer-video {
  height: 400px;
  width: 100%; /* Adjust the height as needed */
  object-fit: cover;
  background-position: center;
}
@media (max-width: 768px) {
  .footer-video {
    width: 100%; /* Adjust the width for mobile devices */
    height: auto; /* Allow the height to adjust automatically */
  }
}
.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px 8px;
  width: 100%;
  background-color: var(--contrast-color);
  color: var(--background-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -9px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

.footer .footer-top {
  padding-top: 10px;
}
.footer-contact {
  padding-left: 20px;
  /* Add padding for spacing */
  white-space: normal; /* Ensure the text wraps normally */
  word-wrap: break-word; /* Break long words if necessary */
  overflow-wrap: break-word; /* Ensure compatibility with different browsers */
}
.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 20;
  margin: 0;
}

.footer .footer-links ul i {
  margin-right: 2px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-about a {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 600;

}

.footer .footer-contact p {
  margin-bottom: 5px;
}
.footer .copyright {
  /* Existing styles */
  width: 100%;
}

.footer .copyright {
  padding-top: 25px;
  margin-left: 0px;
  padding-right: 0px;
  margin-right: 0px !important;
  background-color: #014AAD;
  color: #fff;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex; /* Enable flexbox for the container */
  justify-content: space-between; /* Distribute content horizontally */
}

.footer .copyright p {
  margin-bottom: 0;
  margin-right: 0px !important;
}

.footer .credits {
  margin-top: 6px;
  margin-right: 0px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}




/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 175px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}
.mobile-nav-toggle {
  color: #fff; /* Set desired white color for the icon */
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: #fff;
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}


/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding: 0;
}

.hero .carousel {
  width: 100%;
  min-height: 82vh;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  position: relative;
  z-index: 1;
  overflow: hidden;
}



.hero video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;

  background-size: cover;
  height: 100% !important;
  object-fit: cover;
  z-index: 1;
}

.hero .carousel-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}


.hero .carousel-item:before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-item::before {
  content: "";

  position: absolute;
  inset: 0;
}



.hero .carousel-container {
  position: absolute;
  inset: 90px 64px 64px 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 3;
}

.hero .carousel-item h2 {
  margin-bottom: 30px;
  font-size: 78px !important;
  font-weight: 700;
  animation: fadeInDown 1s both;
}
.carousel-container .paragraph {
  opacity: 0;  /* Initially hidden */
  text-align: right !important; /* Right align */
}
@media screen and (max-width: 576px) { /* Target screens less than or equal to 768px wide (adjust as needed) */
  .carousel-container h2 {
    font-size: 22px;
    text-align: center; /* Set your desired font size for mobile */
  }
}

.hero .carousel-item h2 span {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero .carousel-item h2 {
    font-size: 34px;
  }
}

.hero .carousel-item p {
  animation: fadeInDown 1s both 0.2s;
}

@media (min-width: 1024px) {

  .hero h2,
  .hero p {
    max-width: 60%;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);

  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  animation: fadeInUp 1s both 0.4s;
}

.hero .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 15%;
  transition: 0.3s;
  opacity: 0.4;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

@media (min-width: 1024px) {

  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 5%;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  color: var(--default-color);
  font-size: 48px;
  line-height: 1;
}

.hero .carousel-indicators li {
  list-style-type: none;
  cursor: pointer;
  background: var(--accent-color);
  overflow: hidden;
  border: 0;
  width: 12px;
  height: 12px;
  border-radius: 50px;
  margin-bottom: 180px;
  opacity: 0.2;
}

.hero .carousel-indicators li.active {
  opacity: 1;
}

@media (max-height: 768px),
(max-width: 1024px) {
  .hero .carousel-indicators li {
    margin-bottom: 20px;
  }
}

.hero .featured {
  margin-top: -150px;
  padding-top: 30px;
  padding-bottom: 30px;
  position: relative;
  z-index: 2;
}

@media (max-height: 768px),
(max-width: 1024px) {
  .hero .featured {
    margin-top: 0;
  }
}

.hero .featured-item {
  background-color: var(--contrast-color);
  box-shadow: 0px 0 25px 0 color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 40px 30px;
  transition: all 0.3s ease-in-out;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

.hero .featured-item:before {
  content: "";
  position: absolute;
  background: var(--accent-color);
  inset: 100% 0 0 0;
  transition: all 0.3s;
  z-index: -1;
}

.hero .featured-item .icon {
  margin-bottom: 10px;
}

.hero .featured-item .icon i {
  color: var(--accent-color);
  font-size: 36px;
  transition: ease-in-out 0.3s;
}

.hero .featured-item h4 {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.hero .featured-item h4 a {
  color: var(--heading-color);
  transition: ease-in-out 0.3s;
}

.hero .featured-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
  transition: ease-in-out 0.3s;
}

.hero .featured-item:hover h4 a,
.hero .featured-item:hover .icon i,
.hero .featured-item:hover p {
  color: var(--contrast-color);
}

.hero .featured-item:hover:before {
  background: var(--accent-color);
  inset: 0;
  border-radius: 0px;
}



/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}
.about p{
  text-align: justify !important;
}
.about .content .fst-italic {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

.about .content p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.services .service-item:hover .icon {
  background: var(--contrast-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item i {
  color: var(--accent-color);
  display: block;
  font-size: 44px;
  float: left;
  line-height: 0;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 48px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  margin-left: 60px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
 
  font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  box-shadow: 0px 2px 12px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  position: relative;
  height: 100%;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.skills .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.skills .content p:last-child {
  margin-bottom: 0;
}

.skills .content ul {
  list-style: none;
  padding: 0;
}

.skills .content ul li {
  padding-bottom: 10px;
}

.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--default-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
 
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  position: relative;
  border-radius: 5px;
  transition: 0.5s;
  padding: 30px;
  height: 100%;
}

@media (max-width: 468px) {
  .team .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.team .team-member .pic {
  overflow: hidden;
  width: 150px;
  border-radius: 50%;
  flex-shrink: 0;
}

.team .team-member .pic img {
  transition: ease-in-out 0.3s;
}

.team .team-member:hover {
  transform: translateY(-10px);
}

.team .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 468px) {
  .team .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.team .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  bottom: 0;
  left: 0;
}

@media (max-width: 468px) {
  .team .team-member span::after {
    left: calc(50% - 25px);
  }
}

.team .team-member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.team .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 468px) {
  .team .team-member .social {
    justify-content: center;
  }
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 36px;
  height: 36px;
}

.team .team-member .social a i {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  margin: 0 2px;
}

.team .team-member .social a:hover {
  background: var(--accent-color);
}

.team .team-member .social a:hover i {
  color: var(--contrast-color);
}

.team .team-member .social a+a {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  padding: 120px 0;
}

.pricing .section-title {
  margin-bottom: 40px;
}

.pricing .pricing-item {
  box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 60px 40px;
  height: 100%;
  position: relative;
  border-radius: 15px;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
  text-align: center;
}

.pricing .icon {
  margin: 30px auto 20px auto;
  width: 70px;
  height: 70px;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.pricing .icon i {
  color: var(--background-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
  line-height: 0;
}

.pricing .icon::before {
  position: absolute;
  content: "";
  height: 86px;
  width: 86px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.pricing .icon::after {
  position: absolute;
  content: "";
  height: 102px;
  width: 102px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-2px);
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-weight: 700;
  margin-bottom: 25px;
  text-align: center;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
  font-weight: 400;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;

  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  z-index: 10;
  border: 3px solid var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured {
    transform: scale(1.15);
  }
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/

.blog-posts {
  padding-top: 30px;
}

.blog-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
}

.blog-posts .post-img {
  max-height: 440px;
  margin: -30px -30px 0 -30px;
  overflow: hidden;
}

.blog-posts .title {
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-posts .meta-top ul li+li {
  padding-left: 20px;
}

.blog-posts .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-posts .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-posts .content {
  margin-top: 20px;
}

.blog-posts .content .read-more {
  text-align: right;
}

.blog-posts .content .read-more a {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 30px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 4px;
}

.blog-posts .content .read-more a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-top: 30px;
  padding-bottom: 0;
}

.blog-details .article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding-top: 30px;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding-top: 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog-comments .reply-form p {
  font-size: 14px;
}

.blog-comments .reply-form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog-comments .reply-form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.blog-comments .reply-form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

.contact .info-item h3 {
  font-size: 20px;
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  margin: 30px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}


.my-gradient {
  background: linear-gradient(90deg, #5de0e6, #014AAD);
  /* Other styles for your element */
  width: 100%;
  height: 200px;
}

#about p{
  text-align: justify !important;
  margin-left: 170px;
}
@media (max-width: 768px) {
  #about p {
    text-align: center !important;
    margin-left: 0 !important;
  }
}

#services p{
  text-align: justify !important;
  margin-left: 170px;
}
@media (max-width: 768px) {
  #services p {
    text-align: center !important;
    margin-left: 0 !important;
  }

  @media (max-width: 768px) {
    #carouselExampleControlsNoTouching {
        margin-left: -180px; 
  /* Set margin-left to 0 for smaller screens */
    }
    #services .button-container {

margin-top: -240px !important;
    }
    .carousel-item img {
      width: 100%;
      height: auto;
      max-width: 60%;
      max-height: 90%;
  }
   @media (max-width: 768px) {
   #packages .carousel-inner {
      margin-left: 100px !important; /* Reset margin-left for smaller screens */
    }
    @media (max-width: 768px) {
      .button-with-arrows {
          padding: 5px 5px !important;
          font-size: 0.8rem !important;
      }
      .button-container {
          margin-left: 8px; /* Adjusted for mobile responsiveness */
          text-align: center; /* Center the buttons on mobile */
      }
  }
    #packages .button-container {
      margin-left: 50px !important;
      margin-top: -90px; 
      padding: 5px;/* Center the button container horizontally */
      margin-right: auto;
      text-align: center; /* Align the buttons to the center */
    }
  }
  
  }

}

@media (max-width: 768px) {
  .about-us .content {
    margin-left: -40px !important;
    font-size: 21px; 
    line-height: 2.5;/* Remove left margin for smaller screens */
    text-align: justify; /* Align text to justify on smaller screens */
  }
}
@media (max-width: 768px) {
  footer .container {
    margin-left: 0 !important; /* Reset left margin */
    text-align: center; /* Center align the content */
  }

  footer .item.mission {
    margin-top: 20px; /* Adjust top margin */
    max-width: 100%; 
  padding-left: 43px;/* Set maximum width to full width */
    text-align: justify; /* Justify align the text */
    letter-spacing: 0.3px;
    font-family: Glacial Indifference;
  }
  footer .social-links{
    margin-left: 60px;
   
  }
  footer .social-links a{
    padding: 12px;
  }
}


/* Ensuring the carousel and its items have the correct height */
#services .carousel-inner {
  height: auto; 
/* Allow the inner div to adjust height based on content */
}

#services .carousel-item {
  height: 400px; /* Set the desired height for each carousel item */
}

#services .carousel-item img {
  height: 100%; /* Make the image take the full height of the carousel item */
  width: 120%;
 /* Maintain full width */
  object-fit: cover; /* Ensure the image covers the area without distortion */
  background-size: cover;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  #services .carousel-item {
      height: 200px; /* Reduce height further on mobile */
  }

  #services .carousel-item img {
      height: 100%; /* Ensure images still take the full height of the carousel item */
      width: 100%; /* Maintain full width */
      object-fit: cover; 
      background-size: cover;/* Maintain aspect ratio */
  }
}


@media (max-width: 767px) {
  .hero .hero-video {
    width: 100%;
    height: auto;
  }

  .hero .carousel-container {
    padding: 20px;
    text-align: center;
  }

  .hero .carousel-container h2 {
    font-size: 1.5rem;
  }
  .hero .carousel-container span {
    font-size: 1.5rem;
  }

  .hero .carousel-container p {
    font-size: 1rem;
    text-align: center;
  }

  .hero .text-light {
    font-size: 1.5rem;
  }

  .hero .text-dark {
    font-size: 1rem;
  }
}
#clients .content2 p{
  text-align: left!important;
  margin-left:18%;
}
#clients h3{
margin-left: 20px !important;
letter-spacing: 2px;


}
@media (max-width: 768px) {
  #clients p {
    text-align: justify !important;
    margin-left: 0px !important;
  }
  #clients h3{
    margin-left: -1% !important;
    text-align: justify;
  }
}
@media (max-width: 576px) {
  #clients p {
    text-align: left !important;
    margin-left: 0 !important;
  }
  
}
#clients i{
  color:#014AAD;
}

#packages .content2 p{
  text-align: left !important;
  margin-left: 120px;
}

@media (max-width: 768px) {
  #packages p {
    text-align: center !important;
    font-size: 17px !important;
    margin-left: 0px !important;
  }
  #packages h3{
    margin-left: -1% !important;
    text-align: center;
  }
}
@media (max-width: 576px) {
  #packages p {
    text-align: center !important;
    margin-left: 0 !important;
  }
}
#packages i{
  color: #6359EC;
}
.feedback h5 {
  margin-top: -70%;
}

#about-us .content2 p{
  text-align: justify!important;
  margin-left:18%;
}

@media (max-width: 768px) {
  #about-us p {
    text-align: center !important;
    font-size: 17px !important;
    margin-left: 0px !important;
  }
  #about-us h3{
    margin-left: -1% !important;
    text-align: center;
  }
}
@media (max-width: 576px) {
  #about-us p {
    text-align: center !important;
    margin-left: 0 !important;
  }
}
#contact-us button{
  margin-left: 34%;
}

@media (max-width: 768px) {
  #contact-us button {
   
    margin-left: 85px !important;
  }
  
}
@media (max-width: 576px) {
  #contact-us button {
   
    margin-left: 85px !important;
  }
  .overlay-text {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Text color */
    font-size: 24px; /* Text size */
    font-weight: bold; /* Text weight */
    text-align: center; /* Center the text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow for better visibility */
  }
}

.flex-container {
  display: flex;  justify-content: flex-end !important;  }
.cop{
  background-color: #014AAD;
  color:#fff;
}
.cop{
  margin-bottom: -20px;
  padding-left: 85px !important;
  background-color: #014AAD;
  color:#fff;
}


/* Container for social icons */
.social-icons {
  position: fixed;
  left: 10;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px; 
  z-index: 1000;
}


.hidden {
  display: none;
}

 section {
  /* Set the background image */
  background-image: url('../img/gradient.png');
  background-size: cover; /* Cover the entire section */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Prevent the background image from repeating */
  padding: 100px 0; /* Adjust the padding as needed */

  /* Additional styling */
 /* Text color */
}
section h3{

  color:#000;
}
section p{

  color:#000;
}


  /* CSS for styling the plus and minus icons */
  .fa-circle-plus::before {
    content: "\f055"; /* Font Awesome plus icon */
  }
  .fa-circle-minus::before {
    content: "\f056"; /* Font Awesome minus icon */
  }
  #clients .content1 {
    display: none;
   
    padding: 20px;
   background-color: #fff;
    color:#000;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-top: 10px;
    margin-left:220px !important;
    width: 400px; /* Adjust width as needed */
  }
  #clients .content1.active {
    display: block;
  }
  #clients .content2 p{
 
    border: 1px solid transparent; /* Initially set border to transparent */
    padding: 5px;
  }
.benefit-plus{
  cursor: pointer;
}

.nowrap-text {
  white-space: nowrap;
  padding-left: 70px; /* Adjust padding as needed */
  margin-left: 5rem;  /* Adjust margin as needed */
}

#packages .content1
{
  border-radius: 20px;
  background-color: #fff;
    color:#000;
    padding: 10px;
    border: 1px solid #ccc;
    margin-top: 10px;
    margin-left:230px !important;
    width: 400px; /* Adjust width as needed */
}




.letter-spacing-1 {
  letter-spacing: 1px;
}

.word-spacing-1 {
  word-spacing: 0.1em;
}

.custom-font-size {
  font-size: 17.4px; /* Adjust as needed */
}



footer .container {
  display: flex;
  padding-top: 40px;
  flex-direction: row;
  flex-wrap: nowrap;
}

footer .item {
  flex: 1;
  border:none;
  height: 10%;
  width: 50%;
  padding: 10px;
  text-align: left;
}
footer .item p{
 font-size: 15px;
 padding-right: 10px;
  text-align:justify;
}

footer .item h5{
  font-size: 14px;
}
footer .item a{
  text-decoration: none;
  color: #000;
}@media (max-width: 768px) {
  footer .container{
    display: grid;
    padding-right: 0;
    margin-right: 0;
  }
  .item {
    flex: 0 0 100%;
    text-align: center;
    margin: 10px 0;
  }
}


.socials {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  z-index:-1;
}

.fixed-left {
  position: fixed;
  left: 0;
  top: 50%;
  z-index:1;
  margin-left: -32px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}

.icon-container {
  position: relative;
  display: flex; 
  justify-content: flex-end;
  align-items: center;
  margin: 10px 0;
  padding-left: 10px;
  padding-right: 7px;
  margin-top: -7px;
  width: 70px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  transition: all 0.2s linear; /* Transition for width change */
}

.icon-container i {
  font-size: 1rem;
  color: #014AAD;
  margin-top: 8px;
  padding: 05px;
  
  margin-bottom: 8px;
background-color:#fff;
  text-align: right;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.icon-container .icon-name {
  display: none;
  margin-right: 10px;
text-align: right;
  font-size: 1.2rem;
  color: #fff;
}
.icon-container:hover i {
  transform: rotate(360deg);
  transition-duration: 1.0s; 
}
.icon-container:hover .icon-name {
  display: inline;
  
 
}

/* Increase width of WhatsApp icon container */
.icon-container.whatsapp-expand:hover {
  width: 120px;
  padding-left: 160px; /* Increased width on hover */
}
/* Increase width of WhatsApp icon container */
.icon-container.facebook-expand:hover {
width: 120px;
padding-left: 160px; /* Increased width on hover */
}
/* Increase width of WhatsApp icon container */
.icon-container.location-expand:hover {
width: 120px;
padding-left: 160px; /* Increased width on hover */
}

/* Increase width of WhatsApp icon container */
.icon-container.instagram-expand:hover {
width: 120px;
padding-left: 160px; /* Increased width on hover */
}   /* Increase width of WhatsApp icon container */
.icon-container.youtube-expand:hover {
width: 120px;
padding-left: 160px; /* Increased width on hover */
}
/* Increase width of WhatsApp icon container */
.icon-container.pinterest-expand:hover {
width: 120px;
padding-left: 160px; /* Increased width on hover */
}





/* Icon name colors on hover */
.icon-container .fa-whatsapp:hover ~ .icon-name { color: #25d366; }
.icon-container .fa-pinterest:hover ~ .icon-name { color: #bd081c; }
.icon-container .fa-facebook:hover ~ .icon-name { color: #1877f2; }
.icon-container .fa-instagram:hover ~ .icon-name { color: #d6249f; }
.icon-container .fa-youtube:hover ~ .icon-name { color: #ff0000; }
.icon-container .fa-map-marker-alt:hover ~ .icon-name { color: #34a853; }



@font-face {
  font-family: 'Yeseva One';
  src: url('YesevaOne-Regular.ttf') format('truetype');
}
.yeseva{
  font-family: Yeseva One ;
}


@font-face {
  font-family: 'Fontspring Demo';
  src: url('../fonts/Univers-47-Condensed-Light_FontYukle/font.otf') format('opentype');
}
.univers{
  font-family: Fontspring Demo;
}
@font-face {
  font-family: 'Glacial Indifference';
  src: url('../fonts/glacial-indifference/font.otf') format('opentype');
}
@font-face {
  font-family: 'The Seasons';
  src: url('../fonts/The-Seasons-Font/font.otf') format('opentype');
}
.seasons{
  font-family: The Seasons;
}

@media (max-width: 768px) {
  .logo {
    transform: scale(0.7); /* Reduce transform scale for smaller screens */
  }
}

@media (max-width: 576px) {
  .logo {
    transform: scale(0.7); /* Reduce transform scale for smaller screens */
  }
}

@media (max-width: 768px) {
 

  .banner-video video {
    width: 100%;
    object-fit: cover;
    background-size: right right;
    height: auto;
  }
  .banner-content p{
    font-weight: bold; 
    font-size: 21px !important;
  }
  #about .wet{
    margin-top: 20px;
   margin-left: -120px !important;
  }
  #about p{
    text-align: center!important;
    padding-right: 16px;
  
  }
  .feedback .carousel
  {
    margin-left: 20px;
   
  }

  .clients .bene{
padding-right: 38px;
  }
  .clients .pot{
    padding-right:10px !important;
    text-align: justify;
  }
  .button-container {
    margin-left: 100px;
    

  }
  footer img{
    margin-left: -10px !important;
  }
  footer .mission{
  text-align: justify;
    margin-left: -350px;
  }
  footer .hrs{
    margin-left: 90px !important;
  }
  footer .addr{
    margin-left: 90px;
  }
  footer .know{
    margin-left: 50px !important;
  }
  .cop .cpy{
    padding-left: 30px;
  }
  .cop .faq{

    padding-left: -340px !important;
  }
}


@media (max-width: 768px) {
  .content {
      margin-left: 0;
  }
  .pl-5 {
      padding-left: 1rem !important;
  }
  .ml-5 {
      margin-left: 1rem !important;
  }
}
@media (max-width: 768px) {
  .content {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .content {
    margin-left: 0;
  }
form{
  margin-left: -20px;
}
form input{
  margin-left: 60px !important;
}
  .form-control {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .btn {
    width: 100%;
    max-width: 200px;

    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  footer .container {
      margin-left: 5px; /* Adjust as needed */
      margin-right: 5px; /* Adjust as needed */
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  footer .item {
      margin-top: 20px; /* Adjust as needed */
  }
}

@media screen and (max-width: 768px) {
  .mission {
      margin-left: -285px; /* Adjust as needed */
      text-align: center;
  }
  .addr{
    margin-left: 30px;
  }
}

@media screen and (max-width: 768px) {
  .cop {
      font-size: 11px; /* Adjust as needed */
  }
  .cop .faq{
  padding-top: 20px;

  }
}

@media screen and (max-width: 768px) {
  section.about-us .container .row .content p {
      text-align: center;
      line-height: 1.6;
      font-size: 1.25rem;
      padding: 9px;
      margin: 0;
  }
}

@media screen and (max-width: 768px) {
  .feedback .container .row .content {
      margin-left: 0; /* Remove left margin */
  }

  .feedback .container .row .carousel {
      margin-left: -40px;
      margin-right: auto; /* Center the carousel */
      max-width: 80%; /* Adjust the maximum width as needed */
  }
}

@media screen and (max-width: 768px) {
  .caro {
      margin-left: -50px !important;
      margin-right: auto; /* Center the carousel */
      max-width: 150%; /* Adjust the maximum width as needed */
  }
  .caro2 {
    margin-left: -2px !important;
    margin-right: auto; /* Center the carousel */
    max-width: 100%; /* Adjust the maximum width as needed */
}
  .sessions{
    margin-left: 50px !important;
  }

}
@media screen and (max-width: 768px) {
  .sessions .content1 {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .sessions #expandableContent6 {
      margin-left: -3px !important;
      text-align: justify; /* Remove left margin */
  }
  .sessions #expandableContent7 {
    margin-left: -3px !important;
    text-align: justify; /* Remove left margin */
}
.sessions #expandableContent8 {
  margin-left: -3px !important;
  text-align: justify; /* Remove left margin */
}

.pack{
  margin-left: 40px;
}
}

@media screen and (max-width: 768px) {
  .pack #expandableContent1 {
      margin-left: -20px !important;
      text-align: justify; /* Remove left margin */
  }
  .pack #expandableContent2 {
    margin-left: -20px !important;
    text-align: justify; /* Remove left margin */
}
.pack #expandableContent3 {
  margin-left: -20px !important;
  text-align: justify; /* Remove left margin */
}
.pack #expandableContent4 {
  margin-left: -20px !important;
  text-align: justify; /* Remove left margin */
}
.pack #expandableContent5 {
  margin-left: -20px !important;
  text-align: justify; /* Remove left margin */
}


}

@media screen and (max-width: 768px) {
  .services .content {
      margin-left: 0 !important; /* Remove left margin */
      padding-left: 0 !important; /* Remove left padding */
  }
  .services .content p{
    text-align: justify !important;
  }
  button{
    margin-left: 40px !important ;
    padding-left: 40px;
  }

.about{
  margin-top: -60px;
}
  .about .content {
    margin-left: 0 !important; /* Remove left margin */
    padding-left: 0 !important; /* Remove left padding */
}
.about .content p{
  text-align: justify !important;
}
}

@media screen and (max-width: 768px) {
  .banner {
    margin-bottom: -70px;
      position: relative;
      height: 100vh; /* Adjust the height as needed */
  }
#bene{
  margin-left: -130px !important;
  padding-left: -130px !important;
}
  .banner-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  .banner-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background-position: center bottom;
  }

  .banner-content {
      position: absolute;
      top: 50%;
     
      left: 82%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #ffffff; /* Adjust text color */
  }

  .banner-content h1 {
      font-size: 2rem; /* Adjust font size */
      margin-bottom: 1rem;
      margin-left: 90px;
  }

  .banner-content p {
      font-size: 1.2rem; /* Adjust font size */
      margin-bottom: 0.5rem;
      line-height: 1.4;
      margin-left: 60px !important;
  }
}

#expandableContent1{
  text-align: justify  ;
}
#expandableContent2{
  text-align: justify;
}
#expandableContent3{
  text-align: justify;
}
#expandableContent4{
  text-align: justify;
}
#expandableContent5{
  text-align: justify;
}
#expandableContent6{
  text-align: justify;
}
#expandableContent7{
  text-align: justify;
}
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
}
.button-container {
  margin-top: -80px; /* Keep this if you still want the container to be shifted upward */
  left: -37px;
  top: 0;
  z-index: 2;
  position: relative; /* Change to relative positioning */
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center the child elements horizontally */
}
#packages .button-container {
  margin-top: -80px; /* Keep this if you still want the container to be shifted upward */
  left: -20px;
  top: 0;
  z-index: 2;
  position: relative; /* Change to relative positioning */
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center the child elements horizontally */
}
.button-with-arrows {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 55px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}


.left-arrow {
  margin-right: 35px;
  padding-left: 28px;
}

.right-arrow {
  margin-left: 35px;
  padding-right: 28px;
}

@media (max-width: 768px) {
  .button-container {
      position: relative;
      top: unset;
      margin-left:-40px;
      transform: none;
      display: flex;
      justify-content: center;
      margin-top: 1px; /* Adjust margin as needed */
  }

  .button-with-arrows {
      margin: 0 5px; /* Adjust margin as needed */
  }
  

.page-title{
  background-color: #ffff;
}

.social-links i:hover{
  color:#014AAD;
}

link[rel="icon"] {
  width: 62px;
  height: 62px;
}


.barlow {
  font-family: "Barlow Condensed";
  font-weight: 400;
  font-style: normal;
}




@media (max-width: 768px) {
  
    #about-us .abt{
     padding-left: 70px;
    }
    #about-us .abt-des{
      margin-left: 70px !important;
      font-size: 15px !important;
    }
    .contact-us .contact-form input{
      margin-left: 50px !important;
    }
    .contact-us .contact-form button{
     margin-left: 82px !important;
    }
    .contact-us textarea{
      margin-left: 50px !important;
    }
    .packages .sessions{
      margin-left: 20px !important;
    }
    footer .mission{
      text-align: center !important;
     font-size: 3px !important;
     padding: 5px;
    }
}

@media (max-width: 768px) {  /* Target screens smaller than 768px (common breakpoint for mobiles) */
  .feedback .button-container {
    width: 50%;  /* Reduce container width to 50% */
padding-left: 44% !important;  /* Center the container horizontally */
    margin-right: auto;

    width: 20px;
  }
  .feedback .button-container .left-arrow{
    padding: 2px;
    padding-left: 3px !important;
    text-align: center;
  }
  .feedback .button-container .right-arrow{
    padding: 2px;
    text-align: center !important;
  }
  #carouselExampleControlsNoTouching{
    height: 300px;
    margin-left: -02px;
    z-index: 1;
    width: 400px;
  }
}

.links-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Optional: Align items to the start of the container */
}

.links-container a {
  margin-bottom: 10px; /* Add space between links */
}
/* Your existing CSS styles */






/* Mobile Styles Starts here */
@media only screen and (max-width:480px) 
{
  .header .logo img {
    max-height: 50px;
    margin: 10px;
  }
  .header .logo {
    display: inline-block !important;
  }
  .social > .fixed-left {
    top: calc(50% + 50px);
  }
  .about .content {
    margin-top: 0px;
    padding-left: 12px !important;
  }
  .about > .container > .row {
    padding-top: 1rem !important;
  }
  .about > .container > .row > div:first-child {
    margin-bottom: 30px !important;
  }
  .about > .container > .row > div > h3 + p {
    padding-top: 0.2rem !important;
  }
  #about p {
    padding-right: 0px;
  }
  .services, .services > .container > .row > div > h3.yeseva {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
  .services {
    padding-bottom: 0px !important;
  }
  .services + section {
    padding-top: 0px !important;
    padding-bottom: 40px !important;
  }
  .services + section > .container > .row > div > h3.yeseva {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }
  .services + section #carouselExampleControlsNoTouching {
    width: 270px;
    margin-left: auto;
    margin-right: auto;
  }
  .services + section #carouselExampleControlsNoTouching .button-container {
    margin-left: 75px !important;
  }
  .services + section #carouselExampleControlsNoTouching > .carousel-inner {
    margin-left: 0px !important;
  }
  .services + section #carouselExampleControlsNoTouching .button-container .button-with-arrows {
    margin-left: 20px !important;
    margin-top: 25px;
  }
  #clients {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #clients > .container > .row {
    margin-left: 0px;
    margin-right: 0px;
  }
  #clients p br {
    display: none;
  }
  #clients .content2 p {
    margin: 0 !important;
    font-size: 20px !important;
   
  }
  #clients > .container > .row > .order-lg-1, #packages > .container > .row > .order-lg-1 {
    margin-top: 2rem !important;
  }
  #clients > .container > .row > .order-lg-2 {
    margin-top: 10px !important;
  }
  #packages {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  #packages > .container > .row > .order-lg-2 {
    margin-top: 0px;
    padding-top: 0px !important;
  }
  #packages > .container > .row > .order-lg-2 > .order-lg-2 {
    margin-left: 0px !important;
  }
  
  #packages > .feedback {
    margin-top: 0px !important;
  }
  #packages > .feedback .order-2 {
    margin-left: auto !important;
    max-width: 100% !important;
  }
  #packages > .feedback .order-1 > div {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  #packages > .feedback .order-1 > div > h3 {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  #packages > .feedback .order-2 #carouselExampleControls {
    margin: 0px !important;
    padding-top: 0px !important;
  } 
  #packages > .feedback .order-2 #carouselExampleControls > .carousel-inner {
    margin: 0px !important;
  }
  #packages > .feedback .order-2 #carouselExampleControls > .carousel-inner img {
    max-height: 70%;
    height: 275px;
    object-fit: cover;
    margin: 0 auto !important;
  }
  #packages > .feedback .order-2 #carouselExampleControls .button-container {
    margin-top: 25px;
    margin-left: auto !important;
    padding: 0px !important;
    width: 100% !important;
  }
  #packages > .feedback .order-2 #carouselExampleControls .button-container > .button {
    margin-left: 10px !important;
  }
  #about-us {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  #about-us > .container > .row > .order-lg-1 > div {
    padding-top: 0px !important;
    margin-top: 1rem !important;
  }
  #about-us > .container > .row > .order-lg-1 {
    margin: 0px !important;
    padding-right: 0px;
    padding-left: 0px !important;
  }
  #about-us > .container > .row > .order-lg-1 p img {
    max-width: 270px;
  }
  #about-us > .container > .row > .order-lg-2 {
    margin: -110px 0px 0px !important;
  }
  #about-us > .container > .row > .order-lg-2 > .abt-des {
    margin: 0px !important;
  }
  #contact-us > .container > .row > .order-1 {
    margin: 1.5rem 0px 0px !important;
    padding-top: 0px !important;
  }
  #contact-us > .container > .row > .order-2 {
    margin-top: 0px;
  }
  .contact-us .contact-form {
    margin-left: 0px !important;
  }
  .contact-us .contact-form input, .contact-us .contact-form textarea {
    margin: 0px !important;
    width: 100% !important;
    padding: 10px 20px !important;
    margin: 0 auto !important;
  }
  .contact-us .contact-form input + span {
    padding: 0px;
  }
  .contact-us .contact-form textarea {
    height: 120px;
  }
  #contact-us.contact-us .contact-form button.btn {
    margin-left: auto !important;
    margin-right: auto !important;
    display: table;
  }
  #contact-us {
    padding-top: 0px !important;
    padding-bottom: 3rem !important;
  }
  .footer .video-container {
    position: relative;
  }
  .footer .video-container .overlay-text {
    top: 50%;
  }
  .footer > footer > .barlow {
    padding-left: 0px;
  }
  .footer > footer > .barlow > p {
    text-align: center !important;
    padding-left: 0px !important;
  }
  .footer > footer > .barlow > span {
    justify-content: center !important;
  }
  .footer > footer > div:first-child {
    align-items: flex-start;
    padding-top: 25px;
    padding-bottom: 30px;
  }
  .footer > footer > div:first-child > .item {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    height: auto !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .footer > footer > div:first-child > .item.glacial p {
    white-space: wrap !important;
  }
  .footer > footer > div:first-child > .item.know > .d-flex {
    grid-column-gap: 10px;
  }
  .footer > footer > div:first-child > .item.know > br {
    display: none;
  }
  .footer > footer > div:first-child > .item:last-child {
    padding-top: 1.5rem !important;
  }
  .footer > footer > div:first-child > .item:last-child .social-links {
    margin: 0px !important;
  }
  .banner-content {
    top: 58% !important;
    left: 0 !important;
    transform: translate(-0%, -50%) !important;
    width: 100%;
  }
  .banner-content h1 {
    font-size: 1.8em !important;
    white-space: wrap !important;
    width: 100%;
    position: static !important;
    margin: 0px !important;
    padding: 0px !important;
    transform: none !important;
  }
  .banner-content p {
    transform: none !important;
    margin-left: 0px !important;
    width: 100% !important;
    padding-top: 10px;
    text-align: center;
    left: 0px !important;
  }
 

}
/* Mobile Styles Ends here */
}



/* Media query for mobile responsiveness */
@media (max-width: 768px) {
  .banner-video video {
      display: none; /* Hide the video on mobile devices */
  }
  .banner-img {
      display: block; /* Show the image on mobile devices */
      object-fit: cover; /* Ensure the image covers the entire container */
      width: 100%;
      height: 100%;
  }
 
}
/* Media query for mobile responsiveness */
@media (max-width: 768px) {
  .banner-text {
      font-size: 0.9rem !important; /* Reduce font size for smaller screens */
  }
}