* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: Arial, sans-serif;

}



body,

html {

  width: 100%;

  height: 100%;

  box-sizing: border-box;

}



.slideshow-container {

  position: relative;

  max-width: 100%;

  height: 650px;

  margin: auto;

  overflow: hidden;

}



.slide {

  display: none;

  width: 100%;

  height: 100%;

  position: absolute;

}



.slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(80%);

}



.text {

  position: absolute;

  top: 40%;

  left: 50%;

  transform: translateX(-50%);

  /* background: rgba(0, 0, 0, 0.6); */

  color: white;

  padding: 15px 40px;

  text-align: center;

  z-index: 999;

  border: 1px solid white;

  border-bottom: none;

  opacity: 0;

  animation: slideUp 1s ease-out forwards;

}

@keyframes slideUp {

  from {

    transform: translate(-50%, 150px);

    opacity: 0;

  }

  to {

    transform: translate(-50%, 0);

    opacity: 1;

  }

}

.text p {

  font-size: 14px;

}

.text h1 {

  font-size: 70px;

  margin-bottom: 20px;

}

.text a button {

  background-color: #336aea;

  color: #fff;

  padding: 20px 40px;

  text-decoration: none;

  border: none;

  font-size: 14px;

  font-weight: bold;

}

.fade {

  animation: fadeEffect 0.5s ease-in-out;

}



@keyframes fadeEffect {

  from {

    opacity: 0.4;

  }



  to {

    opacity: 1;

  }

}



.prev,

.next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(0, 0, 0, 0.5);

  color: white;

  padding: 10px;

  cursor: pointer;

  border: none;

  font-size: 18px;

  z-index: 1000;

}



.prev {

  left: 10px;

}



.next {

  right: 10px;

}



.dots {

  text-align: center;

  padding: 10px;

}



.dot {

  height: 10px;

  width: 10px;

  margin: 0 5px;

  background: gray;

  border-radius: 50%;

  display: inline-block;

  cursor: pointer;

}



.active {

  background: black;

}

.black-overlay {

  width: 100%;

  background-color: rgba(0, 0, 0, 0.8) /* A semi-transparent black */;

  height: 100%;

  position: absolute;

  top: 0;

}

/* header section start */

header {

  width: 100%;

  /* height: 200px; */

  /* background-color: #fff; */

  position: absolute;

  top: 0;

  left: 0;

  z-index: 999;

  /* background-color: red; */

  border-bottom: 1px solid rgb(70, 69, 69);

}

.header-top {

  background-color: #111;

  height: 60px;

  max-width: 1300px;

  margin: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 10px;

  font-size: 14px;

}

.header-top-inner {

  display: flex;

  gap: 10px;

  align-items: center;

  color: #fff;

}

.header-top-inner:nth-child(2) {

  display: flex;

  gap: 50px;

  align-items: center;

}

.header-top-inner p {

  color: #fff;

  font-size: 14px;

}

.header-top-inner p i {

  color: #336aea;

}

.header-right {

  display: flex;

  gap: 20px;

}

.header-right a {

  color: #fff;

  text-decoration: none;

}

.header-right a:hover {

  color: #336aea;

  transition: 0.3s;

}

.header-right a i {

  font-size: 16px;

}

/* header section end */



/* nav-sections start */

nav {

  /* background-color: rgb(214, 177, 177); */

  max-width: 1300px;

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 10px;

  margin-top: 30px;

  margin-bottom: 15px;

  /* border-bottom: 1px solid rgb(70, 69, 69); */

}

.logo img {

  width: 100px;

  height: 60px;

  object-fit: cover;

}

.nav-item {

  display: flex;

  gap: 40px;

  align-items: center;

}

.nav-item a {

  text-decoration: none;

  color: #fff;

  font-size: 16px;

  position: relative;
  text-transform: uppercase;


}

.nav-item a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -5px;

  width: 100%;

  height: 3px;

  background-color: #336aea;

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.3s ease;

}

.nav-item a:hover::after {

  transform: scaleX(1);

  transform-origin: left;

}

.nav-item a:hover {

  color: #336aea;

  transition: 0.3s;

}

.nav-item2 {

  display: flex;

  align-items: center;

  gap: 20px;

  color: #fff;

}

.call {

  background-color: #336aea;

  color: #fff;

  padding: 15px 15px;

  border-radius: 50%;

  font-size: 16px;

  text-decoration: none;

}

.call i {

  font-size: 20px;

}

.number p:nth-child(1) {

  font-size: 13px;

  margin-bottom: 5px;

}

.nav-toggle {

  display: none;

}

.nav-toggle i {

  font-size: 30px;

  color: #fff;

}

.sidenav {

  height: 100%;

  width: 0;

  position: fixed;

  top: 0;

  right: 0;

  background-color: #fff;

  overflow-x: hidden;

  transition: 0.5s;

  z-index: 9;

}



.sidenav a {

  padding: 8px 8px 8px 32px;

  text-decoration: none;

  font-size: 20px;

  color: #111;

  display: block;

  transition: 0.3s;

  cursor: default;
  text-transform:capitalize;


}



.sidenav a:hover {

  color: #111 !important;

}



.sidenav span i {

  font-size: 50px;

  color: #111;

  cursor: default;

}
/* Dropdown Container in Sidenav */
.sidenav-dropdown {
  width: 100%;
}

/* Clickable Toggle */
.sidenav-toggle {
  padding: 8px 32px;
  font-size: 20px;
  color: #111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* Dropdown Icon Animation */
.sidenav-toggle i {
  transition: transform 0.3s ease;
}

.sidenav-toggle.open i {
  transform: rotate(180deg);
}

/* Hidden by Default */
.sidenav-dropdown-menu {
  display: none;
  flex-direction: column;
  padding-left: 48px;
  background-color: #f9f9f9;
}

/* Active Dropdown */
.sidenav-dropdown-menu.active {
  display: flex;
}

/* Dropdown Links */
.sidenav-dropdown-menu a {
  color: #111;
  font-size: 18px;
  padding: 6px 0;
  text-decoration: none;
  display: block;
  text-transform: sentence-case;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 250px;
  z-index: 1000;
  top: 100%;
  left: 0;
  /* border-radius: 4px; */
}

.dropdown-menu a {
  color: #111;
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

.dropdown-menu a:hover {
  /* background-color: #444; */
  color: #007bff;
}

.dropdown:hover .dropdown-menu {
  display: block;
}
@media screen and (max-height: 450px) {

  .sidenav {

    padding-top: 15px;

  }

  .sidenav a {

    font-size: 16px;

  }

  .navbar-toggle .toggle-icon {

    cursor: default !important;

  }

}

/* nav-sections end */

.service-section {

  /* background-color: blue; */

  padding: 50px;

  background-image: url("/images/bg-shape-tm-1.png");

  background-position: center;

  background-size: cover;

  background-repeat: no-repeat;

}

.service {

  max-width: 1300px;

  margin: 0 auto;

  /*  */

  padding: 0px 10px;

  /* background-color: red; */

  display: flex;

  flex-direction: column;

  /* justify-content: center;

  align-items: center; */

}

.services-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 20px;

  align-items: center;

  margin-top: 60px;



  /* background-color: red; */

}

.service-card {

  background: white;

  padding: 20px;

  width: 200px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  text-align: center;

  transition: 0.3s;

  border-top: 4px solid #007bff;

  background-image: url(../images/ser.png);

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 15px;

}

.service-card:hover {

  transform: translateY(-5px);

}

.service-icon img {

  width: 60px;

  font-size: 40px;

  color: #007bff;

  margin-bottom: 10px;

}

.service-title {

  font-size: 18px;

  font-weight: bold;

  color: #333;

}

.cta {

  margin-top: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: nowrap;

  gap: 20px;

}

.cta p {

  font-size: 16px;

  color: #333;

  font-weight: bold;

  opacity: 0.8;

  word-spacing: 2px;

}

.cta a {

  background: #007bff;

  color: white;

  padding: 10px 20px;

  text-decoration: none;

  font-weight: bold;

  display: inline-block;

  font-size: 13px;

}



.membership-section {

  /* background-color: #7f0a0a; */

  /* height: 400px; */

  background-image: url("/images/membership.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  color: #fff;

  padding: 40px;

  margin-top: 10px;

}

.membership-top {

  /* text-align: center; */

  /* background-color: red; */

  display: flex;

  flex-direction: column;



  align-items: center;

}

.memeber-top-inner {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;

}

.memeber-top-inner h4 {

  color: #336aea;

  text-transform: uppercase;

  font-size: 15px;

  letter-spacing: 2px;

}

.line {

  width: 45px;

  height: 3px;

  background-color: #007bff;

}

.membership-top h1 {

  font-size: 40px;

}

.membership-card-container {

  max-width: 1300px;

  margin: 0 auto;

  padding: 0px 10px;

  margin-top: 50px;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 20px;

}

.membership-card {

  width: 300px;

  /* background-color: #92b2d6; */

  /* height: 550px; */

  padding: 20px;

  border: 1px solid #fff;

  /* position: relative; */

}

.membership-card-top {

  text-align: center;

  line-height: 1.5;

}

.membership-services {

  /* background-color: rgb(8, 248, 108); */

  /* margin-bottom: 50px; */

}

.membership-list {

  border-top: 1px solid gray;

  padding: 8px 0px;

  display: flex;

  justify-content: space-between;

  /* margin-bottom: 8px; */

  margin-top: 10px;

}

.membership-list p {

  font-size: 13px;

}

.membership-list i {

  color: rgb(7, 255, 7);

}

.membership-button a button {

  width: 100%;

  padding: 15px;

  margin-top: 30px;

  background-color: #007bff;

  color: #fff;

  border: none;

  font-weight: bold;

  cursor: pointer;

  

}

.commitment {

  height: 500px;

  /* background-color: red; */

  background-image: url("/images/bg\ 4.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  color: #fff;

  padding: 10px;

}

.commiment-inner {

  /* background-color: red; */

  height: 100%;

  border: 1px solid #9e9d9d;

}

.comitment-content {

  max-width: 1300px;

  height: 100%;

  /* background-color: red; */

  margin: 0 auto;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  line-height: 1.5;

  padding: 5px;

}

.comitment-content h1 {

  font-size: 50px;

  margin-bottom: 15px;

}

.comitment-content p {

  font-size: 18px;

  font-weight: 500;

  /* width: 60%; */

}

.comitment-content a button {

  padding: 15px 40px;

  margin-top: 20px;

  background-color: #336aea;

  border: none;

  color: #fff;

  font-size: 16px;

  font-weight: 540;

  cursor: pointer;

}

.comitment-content a button:hover {

  background-color: #fff;

  color: #111;

  transition: 0.5s;

}

.testimonial {

  max-width: 1300px;

  padding: 10px 10px;

  margin: 0 auto;

  /* height: 700px; */

  /* background-color: red; */

  margin-top: 50px;

}

.testimonial-head {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  text-transform: uppercase;

  color: #336aea;

  font-size: 14px;

}

.testimonial-head2 {

  text-align: center;

  line-height: 1.5;

}

.testimonial-head2 h1 {

  font-size: 40px;

  font-weight: bold;

  margin-top: 20px;

  margin-bottom: 10px;

}

.testimonial-head2 p {

  font-size: 18px;

  font-weight: 540;

  opacity: 0.8;

}

.testimonial-card-container {

  margin-top: 60px;

  display: flex;

  justify-content: space-between;

  gap: 10px;

  flex-wrap: wrap;

}

.testimonial-card {

  width: 350px;

  height: 500px;

  /* background-color: blue; */

}

.review-card-box {

  /* background-color: #e91e63; */

  color: gray;

  /* height: auto; */

  padding: 30px;

  border-radius: 10px;

  /* max-width: 300px; */

  font-family: Arial, sans-serif;

  font-size: 14px;

  position: relative;

  text-align: center;

  font-size: 18px;

  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}

.review-card-box::after {

  content: "";

  position: absolute;

  bottom: -20px; /* Moves it outside the box */

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 0;

  border-left: 15px solid transparent;

  border-right: 15px solid transparent;

  border-top: 20px solid #fff;

  /* Matches the background */

}

.review-card-box:hover::after {

  content: "";

  position: absolute;

  bottom: -20px; /* Moves it outside the box */

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 0;

  border-left: 15px solid transparent;

  border-right: 15px solid transparent;

  border-top: 20px solid #336aea;

}

.review-card-box p {

  font-size: 15px;

  line-height: 1.5;

  /* color: gray; */

}

.review-card-box:hover {

  background-color: #336aea;

  color: #fff;

}

.user {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  margin-top: 40px;

}

.user img {

  width: 50px;

  margin-bottom: 10px;

}

.star {

  margin-top: 5px;

}

.star i {

  color: #8b8000;

}

.us-based {

  height: 400px;

  background-image: url("/images/7.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  padding: 10px;

}

.us-based-inner {

  max-width: 1300px;

  height: 100%;

  /* background-color: red; */

  margin: 0 auto;

  /* border: 1px solid gray; */

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #fff;

}

.us-header {

  /* background-color: red; */

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #fff;

  border-bottom: none;

  color: #fff;

}

.us-header h1 {

  font-size: 40px;

}

.us-based-inner p {

  /* word-spacing: 2px; */

  /* opacity: 0.8;/ */

  line-height: 1.5;

}

.contact-us {

  /* height: 600px; */

  /* background-color: red; */

  background-image: url("/images/shape-tm-12.png");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  padding: 50px;

  margin-top: 50px;

}

.contact-inner {

  max-width: 1300px;

  height: 100%;

  /* background-color: red; */

  margin: 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

}

.contact-left {

  /* background-color: green; */

  /* height: 50%; */

  width: 50%;

  padding: 10px;

}

.contact-right {

  /* background-color: yellow; */

  width: 50%;

}

.form-container {

  width: 100%;

  background-color: #336aea;

  height: 100%;

  background-image: url("/images//bg-shape-tm-5.webp");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border-radius: 18px;

  padding: 50px;

}

.form-container h1 {

  color: #fff;

  font-size: 28px;

  margin-bottom: 10px;

}

.form-container p {

  color: #fff;

  font-size: 15px;

  margin-bottom: 20px;

  opacity: 0.8;

}

form {

  /* background-color: violet; */

  margin-top: 50px;

}

.form-1st {

  display: flex;

  justify-content: space-between;

  gap: 20px;

}

.form-1st input {

  width: 50%;

  padding: 25px 15px;

  /* margin-right: 10px; */

  border: none;

  outline: none;

}

.form-2nd {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 20px;

  margin-top: 30px;

}

.form-2nd input {

  width: 100%;

  padding: 25px 15px;

  border: none;

  outline: none;

}

.form-2nd input:nth-child(2) {

  padding: 40px 15px;

}

form button {

  background-color: #111;

  color: white;

  padding: 15px 20px;

  border: none;

  cursor: pointer;

  font-size: 18px;

  /* font-weight: bold; */

  margin-top: 20px;

  width: 100%;

}

form button:hover {

  background-color: #fff;

  transition: 0.5s;

  color: #111;

}

.contact-right {

  padding: 55px;

}



.contact-right-top {

  display: flex;

  align-items: center;

  gap: 20px;

  margin-bottom: 20px;

}

.contact-right-top p {

  font-size: 14px;

  font-weight: bold;

  opacity: 0.8;

  color: #336aea;

}

.contact-right h1 {

  color: #111;

  font-size: 40px;

  margin-bottom: 10px;

  font-weight: 990;

  opacity: 0.8;

  margin-bottom: 20px;

}

#contact-info {

  font-size: 16px;

  line-height: 1.7;

  opacity: 0.8;

  color: gray;

}

.appointment a button img {

  width: 30px;

}

.appointment {

  display: flex;

  justify-content: space-between;

  margin-top: 30px;

  align-items: center;

}

#call {

  font-size: 16px;

  line-height: 1.7;

  /* opacity: 0.9; */

  color: gray;

}

#call b {

  color: #111;

}

.appointment a {

  text-decoration: none;

}

.appointment a button {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 17px;

  padding: 12px;

  background-color: #fff;

  border: none;

  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

  cursor: pointer;

}

footer {

  background-image: url("/images/8.jpg");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  padding: 50px;

  margin-top: 20px;

}

.footer-box {

  max-width: 1300px;

  height: 100%;

  /* background-color: red; */

  margin: 0 auto;

  /* background-color: red; */

  display: flex;

  justify-content: space-between;

  margin-top: 60px;

  flex-wrap: wrap;

  /* align-items: center; */

}

.footer-logo img {

  width: 100px;

  height: 60px;

  object-fit: cover;

}

.footer-inner {

  width: 200px;

  /* background-color: gray; */

  color: #fff;

}

.footer-inner p {

  font-size: 15px;

  margin-bottom: 10px;

  margin-top: 10px;

  line-height: 1.5;

  opacity: 0.7;

}

.footer-social {

  display: flex;

  gap: 20px;

  margin-top: 20px;

}

.footer-social a {

  text-decoration: none;

  font-size: 18px;

  padding: 10px;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: rgb(45, 45, 45);

  border-radius: 50%;

}

.footer-social a i {

  color: #fff;

}

.footer-social a:hover {

  background-color: #336aea;

  transition: 0.5s;

}

.footer-inner ul {

  display: flex;

  flex-direction: column;

  gap: 20px;

  margin-top: 20px;

}

.line2{

  width: 100%;

  height: 2px;

  background-color: rgb(175, 174, 174);

  margin: 10px 0px;



}

.footer-inner ul li{

  list-style: none;

}

.footer-inner ul li a {

  text-decoration: none;

  color: gray;

  font-size: 16px;

  position: relative;

}

.footer-inner ul li a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -5px;

  width: 100%;

  height: 3px;

  background-color: #336aea;

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.3s ease;

}

.footer-inner ul li a:hover::after {

  transform: scaleX(1);

  transform-origin: left;

}

.footer-bottom{

  max-width: 1300px;

  margin: 0 auto;

  margin-top: 50px;

}

.dottet-line{

  max-width: 1300px;

  height: 2px;

  /* background-color: rgb(175, 174, 174); */

  margin: 10px 0px;

  border: 1px dotted gray;

}

.footer-bottom p{

  text-align: center;

  color: #fff;

  font-size: 14px;

  line-height: 1.5;

  opacity: 0.8;

}

@media screen and (max-width: 768px) {

  .header-top {

    display: none;

  }

  .nav-item {

    display: none;

  }

  .nav-toggle {

    display: block;

  }

  .text {

    width: 90%;

  }



  .text h1 {

    font-size: 40px;

  }

  .services-container {

    flex-direction: column;

    align-items: center;

  }

  .service-card {

    width: 90%;

  }

  .cta {

    text-align: center;

    flex-direction: column;

    align-items: center;

  }

  .service-section {

    padding: 0;

  }

  .membership-card-container {

    flex-direction: column;

    align-items: center;

  }

  .membership-card {

    width: 100%;

  }

  .comitment-content h1 {

    font-size: 30px;

  }

  .testimonial-card-container {

    flex-direction: column;

    align-items: center;

  }

  .contact-inner {

    flex-direction: column;

    align-items: center;

    /* padding: ; */

  }

  .contact-left {

    width: 100%;

  }

  .contact-right {

    width: 100%;

  }

  .contact-us {

    padding: 0;

  }

  .form-container,

  .contact-right {

    padding: 30px;

  }

  .appointment {

    flex-direction: column;

    align-items: center;

  }

  footer {

    padding: 10px;

  }

}