@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root{
  --blue:rgb(0,57,119);
  --blue-1:#002126;
  --dark: #242020;
  --orange:#E22D2D;
  --white:#fff;
}
body{
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #fbfcff !important;
}
.navbar .btn{
  font-size: 1rem !important;
}
.btn{
  padding: 0.75rem 1.25rem !important;
}
.btn-sm{
  padding: 0.5rem 1rem !important;
}
.btn-blue{
  background-color: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
}
.btn-outline{
  border: 1px solid !important;
  color: currentColor;
}
.btn-blue:hover{
  background-color: #fff;
  color: var(--blue);
  border: 1px solid var(--blue);
}
.btn-orange{
  background-color: var(--orange);
  border: 1px solid var(--orange);
  color: var(--white);
}
.btn-orange:hover{
  background-color: var(--white);
  border: 1px solid var(--orange);
  color: var(--orange);
}
.btn-block{
  width: 100%;
}
.footer{
  background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, rgb(0 110 145) 0px, rgb(4, 32, 51) 100%);
  color: white;
}
.hero-section{
  min-height: 500px;
  display: flex;
  align-items: center;
  background-image: url('../../img/bg-hero-img.jpg');
  background-size: cover;
  position: relative;
  color: var(--white);
}
.hero-section *{
  position: relative;
}
.hero-section::before{
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to right, rgba(0, 110, 145,0.8) 0px, rgba(4, 32, 51,0.8) 25%, transparent 100%);
}
.hero-section h1{
  font-size: 3rem;
  color: var(--white);
}
.navbar .nav-item{
  margin-left: 1.5rem;
}
.text-yellow{
  color: #ffc107;
}
.text-orange{
  color: var(--orange);
}
.hero-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap:1rem;
  flex-wrap: wrap;
}
.hero-links a,.hero-links span{
  background: linear-gradient(to right, var(--orange), var(--blue)) !important;
  display: inline-block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: #fff;
  border-radius: 0.5rem;
  font-size: 1rem;
  border: 1px solid #fff6;
}
.line-tabs{
  gap: 1.5rem;
}
.line-tabs .nav-link{
  color: var(--dark);
  padding: 0.75rem 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}
.line-tabs .nav-link.active{
  background-color: transparent !important;
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}
.nav-line-content{
  background-color: #00a6f411;
  padding: 1.5rem;
  border-radius: 0.75rem;
}
.subcategories-list{
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
}
.subcategories-list li{
  height: 100%;
}
.subcategories-list a{
  text-decoration: none;
  padding: 0.75rem 1rem;
  background-color: #fff;
  border-radius: 0.5rem;
  display: block;
  width: 100%;
  border: 1px solid #0369a122;
  color: var(--dark);
  transition: 0.5s ease all;
}
.subcategories-list a span{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.subcategories-list a:hover{
  color: var(--blue);
  transform: scale(1.02);
}
.footer-socials{
  display: flex;
  gap: 1rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-socials li a{
  font-size: 0.8rem;
  color: #fff;
}
footer{
  line-height: 2;
}
footer a{
  color: #fff;
  text-decoration: none;
}
.border-faded{
  border-color: #fff1 !important;
}
footer h3{
  font-size: 1.25rem;
}
.footer-logo{
  filter: brightness(0) invert(1);
}
.section-image-card{
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
}
.section-image-card img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.fancy-list{
  list-style: none;
  padding: 0;
}
.fancy-list li{
  line-height: 2.2;
  position: relative;
  padding-left: 1.5rem;
}
.fancy-list li::before{
  content: '';
  height: 1rem;
  width: 1rem;
  position: absolute;
  left: 0;
  top:0.5rem;
  background-image: url('../../img/fancy-check.png');
  background-size: contain;
  background-position: center;
}
.fancy-testimonial{
  background-color: #00a6f422;
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid #00a6f433;
  display: flex;
  gap: 1rem;
}
.ft-left{
  width: 6rem;
}
.ft-left small,.ft-left span{
  display: block;
}
.ft-left .stars{
  color: orangered;
  font-size: 0.75rem;
  letter-spacing: 2px;
  margin-top: 0.5rem;
}
.ft-left small{
  font-size: 0.875rem;
  font-style: italic;
  color: 16161633;
}
.ft-right{
  width: calc(100% - 7rem);
}
.actual-testimonial{
  font-style: italic;
  position: relative;
  font-weight: 300;
  font-size: 1.0625rem;
}
.actual-testimonial::before{
  content: '\201C';
  font-size: 3rem;
  position: absolute;
  left: -1.75rem;
  top: -0.25rem;
  line-height: 1;
  color: #161616;
  font-family: sans-serif;
  color: var(--blue);
}
.pricing-card{
  background-color: var(--blue);
  box-shadow: 0 0 20px #0001;
  padding: 1.5rem;
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
  border: 1px solid #fffc;
  color: var(--blue-1);
}
.pricing-card *{
  position: relative;
}
.pricing-card::before{
  content: '';
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0 0 6rem 0;
}
.pricing-card-header{
  text-align: center;
}
.pricing-card-header h3{
  font-size: 1.5rem;
}
.pricing-card-header .pc-price span{
  font-size: 1.5rem;
  color: var(--blue);
  font-weight: 700;
}
.pricing-card-header .pc-price small{
  font-size: 0.75rem;
}
.pricing-card .btn{
  margin: 0 0 1rem 0;
}
.package-card-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.package-card-list li{
  line-height: 2;
  position: relative;
  padding-left: 1.5rem;
}
.package-card-list li::before{
  content: '';
  height: 0.875rem;
  width: 0.875rem;
  position: absolute;
  left: 0;
  top: 0.5rem;
  background-image: url('../../img/pc-check.png');
  background-position: center;
  background-size: contain;
}
.testimonials{
  background-image: url('../../img/testimonials.jpg'), radial-gradient(60.63% 60.63% at 57.15% 51.07%, rgba(0, 110, 145) 0px, rgba(4, 32, 51) 100%);
  background-size: cover;
  background-blend-mode: multiply;
}
.testimonials h2{
  color: #fff;
}
.swiper-wrapper{
  height: unset;
}
.testimonials-card{
  margin-top: 3rem;
  background-color: #0004;
  border: 1px solid #fff2;
  padding: 2.5rem 2rem 1.5rem;
  border-radius: 0.75rem;
  color: #fff;
  backdrop-filter:blur(20px);
}
.testimonials-summary{
  margin-top: 1rem;
  background-color: #0001;
  border: 1px solid #fff2;
  padding: 1.5rem 1.5rem 2rem;
  border-radius: 0.75rem;
  color: #fff;
  backdrop-filter:blur(20px);
  text-align: center;
}
.testimonials-img{
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  margin-top: -4.5rem;
  background-color: #0002;
  border: 1px solid #fff2;
  padding: 0.25rem;
}
.testimonials-img img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.testimonial-content{
  margin-top: 0.5rem;
}
.testimonials-footer{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.tef-name{
  width: 60%;
}
.tef-name p{
  margin-bottom: 0;
}
.tef-name small{
  font-size: 0.75rem;
  color: #eeea;
  display: block;
}
.tef-rating{
  color: orangered;
  font-size: 0.75rem;
}
.swiper-pagination-bullet{
  background-color: #fff !important;
}
.testimonials-summary img{
  display: block;
  margin: 0 auto 1rem;
}
.single-question-hero{
  min-height: unset;
}
.testimonial-card{
  background-color: var(--white);
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.swiper-pagination-bullet{
  background-color: var(--blue) !important;
}
.testimonial-card .testimonial-stars{
  font-size: 0.875rem;
  letter-spacing: 4px;
}
.testimonial-card .testimonial-text{
  font-style: italic;
  color: rgb(33 37 41 / 75%);
}

@media screen and (max-width:999px) {
  body{
    font-size: 14px;
  }
  .hero-section{
    padding-top: 3rem !important;
  }
  .hero-section img{
    margin-top: 1rem;
  }
  .hero-section h1{
    font-size: 1.75rem;
  }
  .subcategories-list{
    grid-template-columns: repeat(1, 1fr);
  }
  .subcategories-list a span {
    -webkit-line-clamp: unset;
  }
  .fancy-testimonial{
    flex-direction: column;
    gap: 0.75rem;
  }
  .fancy-testimonial{
    gap: 0;
  }
  .ft-left,.ft-right{
    width: 100%;
  }
  .ft-left small, .ft-left span{
    display: inline-block !important;
    margin-left: 0.25rem;
  }
  .actual-testimonial::before{
    top: -4rem;
  }
  .fancy-testimonial{
    margin-bottom: 0.75rem;
  }
  .line-tabs{
    gap: 1rem;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: auto;
  }
  .line-tabs::-webkit-scrollbar{
    display: none;
  }
  .navbar-collapse.collapse,.navbar-collapse.collapsing{
    height: 100vh !important;
    padding-right: 1rem;
    position: fixed !important;
    display: block;
    width: 300px;
    max-width: 100%;
    top: 0;
    background-color: #002126dd;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: 0.25s ease left;
    transform-origin: left;
    left: -100%;
    z-index: 15;
    box-shadow: 0 0 10px #0002;
  }
  .navbar .nav-link,.navbar .btn{
    width: 100%;
    display: block;
  }
  .navbar-dark.navbar .nav-link{
    color: var(--white) !important;
  }
  .dropdown-menu{
      box-shadow: none !important;
      padding: 0 !important;
      box-shadow: none;
      border:none !important;
      border-radius: 0 !important;
      background-color: transparent;
  }
  .dropdown-item{
      padding: 0.25rem 0 !important;
      color: var(--white) !important;
      font-size: 0.9rem !important;
      max-width: 100%;
      overflow: hidden;
  }
  .navbar-collapse .btn{
      margin-bottom: 0.5rem;
  }
  .navbar-collapse.collapsing{
      left: -50%;
      transition: none;
  }
  .navbar-collapse.show,.navbar-collapse.collapsing{
      left: 0;
  }
  .navbar-toggler{
      border: none;
      box-shadow: none !important;
      outline: none;
      position: relative;
  }
  .close-mobile-menu{
      height: 2rem;
      width: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      line-height: 1;
      background-color: transparent;
      box-shadow: none;
      border: none;
      outline: none;
      color: var(--dark);
      font-weight: 200 !important;
      position: absolute;
      right: 0.25rem;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
    }
    .navbar-dark .navbar-toggler{
      filter: brightness(0) invert(0);
    }
}