@font-face {
  font-family: 'Amazon';
  src: url('../assets/fonts/Amazon\ Ember.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Amazon", sans-serif;
}

body {
      background-color: #ffffff;
}

a {
      text-decoration: none;
      color: inherit;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

/* hero section */

.hero {
      margin-top: 60px;
}

.hero__container {
      display: flex;
      justify-content: start;
      align-items: end;
      gap: 30px;
      width: 100%;
      padding-bottom: 40px;
}

.hero1 {
      width: 39%;
      height: 100%;
}

.hero2 {
      width: 29%;
      height: 100%;
}

.hero3 {
      width: 30%;
      height: 100%;
}

.hero1 h1 {
      font-size: 3rem;
      font-weight: 700;
      color: #000;
      line-height: 3.4rem;
      max-width: 500px;
}

.hero1 p {
      font-size: 1.2rem;
      font-weight: 300;
      color: #84848f;
      line-height: 1.5rem;
      max-width: 500px;
      margin: 30px 0;
}

.hero1 .hero__buttons {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 10px;
}

.hero1 a button {
      background-color: #000;
      color: #ffffff;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.hero__buttons .bg-white {
      background-color: #ffffff;
      color: #000;
      border: #e7e7f2 1px solid;
      font-weight: 500;
}

.hero1 a button:hover {
      background-color: #72b7e4;
      color: #ffffff;
}

.hero__text {
      margin-top: 30px;
      margin-bottom: 20px;
      height: 50%;
}

.hero__image {
      height: 50%;
}

.hero__image .itemm__img {
      width: 100%;
      height: 100%;
      border-radius: 30px;
      overflow: hidden;
      transition: transform 0.3s ease;
}

.inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 30px;
}

.inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.inner:hover img {
  transform: scale(1.05);
}

.hero1 img {
      width: 100%;
      height: 100%;
      border-radius: 30px;
      margin-top: 30px;
}

.hero2 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 30px;
}

.hero3 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 30px;
}

.hero2 .top {
      margin-bottom: 25px;
      height: 440px;
}

.hero2 .bottom {
      height: 390px;
}

.hero3 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 30px;
}

.hero3 .top {
      margin-bottom: 25px;
      height: 220px;
}

.hero3 .bottom {
      height: 610px;
}

.nav-center-panel {
  display: none;
}

.sliders__hero {
  position: relative;
  overflow: hidden;
  display: none;
  width: 50%;
}

#slider__hero {
  touch-action: pan-y;
  will-change: transform;
}

.hero__items {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.hero__item {
  flex: 0 0 100%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.hero__item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 30px;
}

.sliders-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: #000;
  color: white;
  border: none;
  font-size: 1.5rem;
  padding: 15px 15px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sliders-btn:hover {
      background-color: #72b7e4;
      transition: transform 0.4s ease;
}

.sliders-btn.prev { left: 0px;  }
.sliders-btn.next { right: 0px; }

.sliders-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.badges {
      background-color: #ffffff;
}

.badges__container {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      max-width: 1440px;
      margin: 0 auto;
      padding: 20px 20px;
      width: 100%;
}

.badge {
      display: flex;
      align-items: center;
      gap: 10px;
}

.badge h3 {
      font-size: .9rem;
      font-weight: 700;
}

.badge p {
      font-size: .8rem;
      font-weight: 500;
      margin-top: 5px;
}

.badge-icon {
      background-color: #72b7e4;
      border-radius: 10px;
      font-size: 1.8rem;
}

.badge-icon i {
      color: #ffffff;
      padding: 10px;
}

.services {
      padding: 130px 0;
      background-color: #f6f7fa;
}

.service {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 30px;
      width: 100%;
}

.hero__texts {
      width: 60%;
}

.hero__texts h1 {
      font-size: 3.2rem;
      font-weight: 700;
      color: #000;
      line-height: 3rem;
}

.hero__texts p {
      font-size: 1.2rem;
      font-weight: 300;
      color: #84848f;
      line-height: 1.5rem;
      max-width: 600px;
      margin: 20px 0 30px 0;
}

.service__buttons {
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: flex-end;
      width: 40%;
}

.service__buttons a button {
      background-color: #000;
      color: #ffffff;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.service__buttons a .bg-white {
      background-color: #ffffff;
      color: #000;
      border: #e7e7f2 1px solid;
      transition: background-color 0.3s ease;
      font-weight: 500;
}

.service__buttons a button:hover {
      background-color: #72b7e4;
      color: #ffffff;
}

.comments {
      margin-top: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 30px;
      width: 100%;
}

.comment {
      width: 33.33%;
}

.comment__author {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
}

.comment__author img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
}

.comment__text p {
      font-size: 1.1rem;
}

.passport {
      margin-top: 120px;
      margin-bottom: 120px;
}

.passport__text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
}

.passport__text h2 {
      font-size: 3.2rem;
      font-weight: 700;
      color: #000;
}

.passport__text p {
      font-size: 1.1rem;
      font-weight: 500;
      color: #84848f;
      line-height: 1.5rem;
      max-width: 465px;
      margin: 10px 0;
      text-align: center;
}

.passport__text p span {
      font-weight: 700;
      color: #000;
}

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

.passport__left {
      width: 55%;
      background-color: #f8ae1d;
      border-radius: 40px;
      height: 650px;
}

.passport__right {
      width: 45%;
      position: relative;
}

.passport__left img {
      width: 48.5%;
      margin-top: 85px;
      margin-left: 110px;
      margin-bottom: 5px;
}

.abs {
      position: absolute;
      left: -130px;
      top: -275px;
      width: 100%;
}

.pass__item {
      border: #dadaf6 1px solid;
      border-radius: 20px;
      padding: 30px;
      display: flex;
      align-items: start;
      gap: 40px;
      background-color: #fff;
      width: 100%;
      margin-bottom: 25px;
}

.pass__item__number {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 15px 22px;
      font-size: 1.6rem;
      background-color: #fff;
}

.pass__item__img img {
      width: 100px;
      height: 100px;
}

.color1 { background-color: #eff7e6; color: #166341; }
.color2 { background-color: #fff5d6; color: #c57a00 }
.color3 { background-color: #e7f4df; color: #145e3e; }

.pass__item__details h3 {
      font-size: 1.5rem;
      font-weight: 800;
      margin-bottom: .5rem;
}

.pass__item__details p {
      color: #84848f;
      max-width: 600px;
      font-size: 17px;
}

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

.passport__button a button {
      background-color: #000;
      color: #ffffff;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.passport__button a .bg-white {
      background-color: #ffffff;
      color: #000;
      border: #dadaf6 1px solid;
      font-weight: 500;
}

.passport__button a button:hover {
      background-color: #72b7e4;
      color: #ffffff;
}

.prime {
      margin-top: 80px;
      margin-bottom: 80px;
}

.prime hr {
      border: solid 1px #dadaf6;
}

.prime__title {
      margin-top: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.prime__text h2 {
      font-size: 3.2rem;
      font-weight: 600;
      color: #000;
}

.prime__buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
}

.prime__buttons a button {
      background-color: #000;
      color: #ffffff;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.prime__buttons a .bg-white {
      background-color: #ffffff;
      color: #000;
      border: solid 1px #dadaf6;
      font-weight: 500;
}

.prime__buttons a button:hover {
      background-color: #72b7e4;
      color: #ffffff;
}

.prime__services {
      margin-top: 30px;
}

.prime__services__top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 35px;
      width: 100%;
}

.prime__services__top .prime__item {
      width: 50%;
      height: 520px;
      border-radius: 30px;
      position: relative;
      overflow: hidden;
}

.prime__services__top .prime__item a img {
      width: 100%;
      object-fit: cover;
      height: 100%;
      border-radius: 30px;
      transition: transform 0.3s ease;
}

.prime__item__price {
      position: absolute;
      top: 20px;
      right: 20px;
      background-color: #ffffff;
      border-radius: 30px;
      padding: 10px;
}

.prime__card {
      position: absolute;
      bottom: 20px;
      left: 20px;
      right: 20px;
      background-color: #ffffff;
      border-radius: 30px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: transform 0.8s ease;
}

.prime__card h5 {
      font-size: 1.3rem;
      font-weight: 400;
      transition: transform 0.8s ease;
}

.prime__card i {
      font-size: 2.2rem;
      font-weight: 400;
      transition: transform 0.8s ease;
}

.prime__item:hover .prime__card {
  background-color: #000;
}

.prime__item:hover .prime__card h5,
.prime__item:hover .prime__card i {
      color: #fff;
}

.prime__services__center {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 35px;
      width: 100%;
      margin-top: 35px;
}

.prime__services__center .prime__item {
      width: 50%;
      height: 420px;
      border-radius: 30px;
      position: relative;
      overflow: hidden;
}

.prime__services__center .prime__item a img {
      width: 100%;
      object-fit: cover;
      height: 100%;
      border-radius: 30px;
      transition: transform 0.3s ease;
}

.prime__services__bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 35px;
      width: 100%;
      margin-top: 35px;
}

.prime__services__bottom .prime__item {
      width: 50%;
      height: 325px;
      border-radius: 30px;
      position: relative;
      overflow: hidden;
}

.inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 30px;
}

.prime__services__bottom .prime__item a img {
      width: 100%;
      object-fit: cover;
      height: 100%;
      border-radius: 30px;
      transition: transform 0.3s ease;
}

.prime__item:hover .inner img {
  transform: scale(1.05);
}

.our {
      padding: 130px 40px 500px 40px;
      background-color: #f6f7fa;
}

.our h2 {
      font-size: 3.2rem;
      font-weight: 600;
      color: #000;
}

.our__slider {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  padding: 0 40px;
}

.our__content {
      margin-top: 30px;
      display: flex;
      gap: 25px;
      transition: transform 0.4s ease;
      will-change: transform;
      width: 100%;
}

.our__item {
  width: 380px;
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  transition: transform 0.3s, box-shadow 0.3s;
}

.our__item:hover {
      transform: translateY(-10px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

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

.our__top h3 {
      font-size: 1.4rem;
      font-weight: 600;
      transition: box-shadow 0.3s ease;
}

.our__top i {
      font-size: 2.3rem;
      transition: box-shadow 0.3s ease;
}

.our__item p {
      font-size: 1.1rem;
      line-height: 1.6rem;
      color: #84848f;
      margin-bottom: 50px;
      transition: box-shadow 0.3s ease;
}

.our__icon {
      background-color: #dadaf6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 5px;
      border-radius: 5px;
      width: 40px;
      height: 40px;
}

.our__icon i {
      font-size: 1.8rem;
      transition: box-shadow 0.3s ease;
}

.our__bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
}

.our__buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
}

.our__buttons a button {
      background-color: #000;
      color: #ffffff;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.our__buttons a .bg-white {
      background-color: #ffffff;
      color: #000;
      border: solid 1px #e7e7f0;
      font-weight: 500;
}

.our__buttons a button:hover {
      background-color: #72b7e4;
      color: #ffffff;
}

#slider {
  touch-action: pan-y;
  will-change: transform;
}

#slider img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: #000;
  color: white;
  border: none;
  font-size: 1.5rem;
  padding: 15px 15px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slide-btn:hover {
      background-color: #72b7e4;
      transition: transform 0.4s ease;
}

.slide-btn.prev { left: 10px;  }
.slide-btn.next { right: 10px; }
.slide-btn:disabled { opacity: 0.3; cursor: default; }

.hello {
      position: relative;
}

.hello__container {
      position: absolute;
      top: -300px;
      right: 20px;
      left: 20px;
      border-radius: 30px;
      background-image: 
      radial-gradient(circle at center, rgba(13, 71, 161, 1), rgba(33, 150, 243, 0.6)),
      url('../assets/images/bg-bring.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
}

.hello__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 110px 40px 110px 40px;
      position: relative;
}

.hello__content h3 {
      text-align: center;
      font-size: 2.8rem;
      color: #fff;
      max-width: 500px;
}

.hello__content p {
      text-align: center;
      font-size: 1.1rem;
      color: #fff;
      max-width: 400px;
      margin: 20px 0;
}

.hello__content .img1 {
      position: absolute;
      height: 400px;
      width: 400px;
      object-fit: cover;
      top: -120px;
      left: -75px;
}

.hello__content .img2 {
      position: absolute;
      height: 350px;
      width: 350px;
      object-fit: cover;
      bottom: -140px;
      right: 30px;
}

.hello__buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
}

.hello__buttons a button {
      background-color: #fff;
      color: #000;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.hello__buttons a .bg-white {
      background-color: transparent;
      color: #fff;
      border: solid 1px #dadaf6;
      transition: background-color 0.3s ease;
      font-weight: 500;
}

.hello__buttons a button:hover {
      background-color: #000;
      color: #ffffff;
}

.hello__buttons a .bg-white:hover {
      border: solid 1px #000;
}

.posts {
      margin-top: 400px;
}

.posts__title {
      margin-top: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.post__text h2 {
      font-size: 3.2rem;
      font-weight: 600;
      color: #000;
}

.post__buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
}

.post__buttons a button {
      background-color: #000;
      color: #ffffff;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.post__buttons a .bg-white {
      background-color: #ffffff;
      color: #000;
      border: solid 1px #dadaf6;
      font-weight: 500;
}

.post__buttons a button:hover {
      background-color: #72b7e4;
      color: #ffffff;
}

.posts__content {
      display: flex;
      align-items: flex-start;
      gap: 30px;
      width: 100%;
      margin-top: 30px;
}

.post__item {
      width: 33.33%;
}

.post__item img {
      width: 100%;
      height: 350px;
      object-fit: cover;
      border-radius: 30px;
      margin-bottom: 15px;
      transition: transform 0.3s ease;
}

.post__item .inner {
      width: 100%;
      height: 350px;
      overflow: hidden;
      border-radius: 30px;
}

.post__item:hover .inner img {
  transform: scale(1.05);
}

.title__date {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      margin-top: 30px;
}

.title__date h4 {
      font-size: 1.3rem;
      font-weight: 500;
}

.title__date p {
      font-weight: 200;
}

.post__item h5 {
      font-size: 1.5rem;
      margin-bottom: 15px;
      font-weight: 500;
      transition: transform 0.5s ease;
}

.post__item:hover h5 {
      color: #2196F3;
}

.post__item h6 {
      font-size: 1rem;
      color: #84848f;
      font-weight: 400;
}

.sliders__post {
  position: relative;
  overflow: hidden;
  display: none;
  width: 100%;
  margin-top: 30px;
}

.post__items {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

.post__item2 {
  flex: 0 0 100%;
  overflow: hidden;
  transition: transform 0.3s ease;
  height: 300px;
  position: relative;
}

.post__item2 img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 30px;
}

.post__item2 .title__dates {
      background-color: #f6f7fa;
      width: 100%;
      border-radius: 0 0 30px 30px;
      padding: 10px 20px;
      position: absolute;
      bottom: -2px;
      left: 0px;
      right: 0px;
}

.post__item2 .title__dates span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
}

.post__item2 .title__dates h4 {
      font-size: 1.2rem;
      font-weight: 500;
}

.post__item2 .title__dates p {
      font-weight: 200;
}

.post__item2 .title__dates h5 {
      font-size: 1rem;
      margin-bottom: 10px;
      font-weight: 500;
      transition: transform 0.5s ease;
}

.sliderss-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: #000;
  color: white;
  border: none;
  font-size: 1.5rem;
  padding: 15px 15px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sliderss-btn:hover {
      background-color: #72b7e4;
      transition: transform 0.4s ease;
}

.sliderss-btn.prev { left: 0px;  }
.sliderss-btn.next { right: 0px; }

.sliderss-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.works {
      background-color: #f6f7fa;
}

.works__container {
      margin-top: 130px;
}

.works__title {
      padding-top: 130px;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.work__text h2 {
      font-size: 3.2rem;
      font-weight: 600;
      color: #000;
}

.work__buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
}

.work__buttons a button {
      background-color: #000;
      color: #ffffff;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.work__buttons a .bg-white {
      background-color: #ffffff;
      color: #000;
      border: solid 1px #dadaf6;
      font-weight: 500;
}

.work__buttons a button:hover {
      background-color: #72b7e4;
      color: #ffffff;
}

.works__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      width: 100%;
      margin-top: 30px;
      padding-bottom: 300px;
}

.work__item {
      width: 40%;
}

.work__items {
      width: 20%;
}

.work__items img {
      width: 100%;
      height: 248px;
      object-fit: cover;
      border-radius: 25px;
      margin-bottom: 20px;
      transition: transform 0.3s ease;
}

.work__item img {
      width: 100%;
      height: 520px;
      object-fit: cover;
      border-radius: 30px;
      margin-bottom: 30px;
      transition: transform 0.3s ease;
}

.work__item .inner {
      width: 100%;
      height: 520px;
      margin-bottom: 30px;
      overflow: hidden;
      border-radius: 30px;
}

.work__items .inner {
      width: 100%;
      height: 248px;
      margin-bottom: 20px;
      overflow: hidden;
      border-radius: 25px;
}

.work__item:hover .inner img {
  transform: scale(1.05);
}

.work__items a:hover .inner img {
  transform: scale(1.05);
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox.open { 
      display: flex; 
}

.lightbox__inner {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lbIn .2s ease;
}
.lightbox__inner img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

.lightbox__close {
  position: absolute;
  top: 18px; right: 22px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 34px;
  cursor: pointer;
  line-height: 1;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #72b7e4;
  border: none;
  color: #fff;
  font-size: 42px;
  width: 50px; height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease;
}
.lightbox__nav:hover { background: #2196F3; }
.lightbox__nav.prev { left: 20px; }
.lightbox__nav.next { right: 20px; }

@keyframes lbIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.lb-no-scroll { overflow: hidden; }


.bottom__footer {
      background-color: #1e1e24;
      padding: 100px 0px 0px 0px;
}

.footer__top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
}

.footer__top__text {
      width: 80%;
}

.footer__top__text h2 {
      font-size: 2.6rem;
      color: #fff;
      max-width: 550px;
      margin-bottom: 20px;
}

.footer__buttons {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 20px;
}

.footer__top__text a button {
      background-color: #fff;
      color: #000;
      padding: 15px 30px;
      border: none;
      border-radius: 5rem;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
}

.footer__top__text a .bg-white {
      background-color: transparent;
      color: #fff;
      border: #fff 1px solid;
      font-weight: 500;
}

.footer__top__text a button:hover {
      background-color: #72b7e4;
      color: #ffffff;
}

.footer__top__text a .bg-white:hover {
      border: #72b7e4 1px solid;
}

.footer__img {
      position: relative;
}

.footer__img img {
      width: 390px;
}

.footer__img .img1 {
      position: absolute;
      top: -370px;
      right: 0px;
}

/* .footer__img .img2 {
      position: absolute;
      top: -270px;
      right: 0px;
} */

/* media query */

@media (min-width: 1920px) {

      .container {
            max-width: 1400px;
            padding: 0 40px;
      }

      .hero {
            padding-top: 40px;
            padding-bottom: 40px;
            margin-bottom: 30px;
      }

      .badges__container {
            max-width: 1400px;
            padding: 20px 40px;
      }

      .hello__container {
            background-color: #2196F3;
            position: absolute;
            top: -300px;
            right: 50px;
            left: 50px;
            border-radius: 30px;
      }
}

@media (max-width: 1400px) {

      .hello__content .img1 {
            position: absolute;
            height: 400px;
            width: 400px;
            object-fit: cover;
            top: -160px;
            left: -55px;
      }
}

@media (max-width: 1200px) {

      .hero1 h1 {
            font-size: 2.6rem;
      }

      .hero__texts {
            width: 100%;
      }

      .hero1 a button {
            padding: 15px 30px;
            font-size: 1rem;
      }

      .sliders-btn {
            font-size: 1.3rem;
            padding: 12px;
      }

      .service__slider {
            width: 100%;
      }

      .slider-btn {
            font-size: 1.3rem;
            padding: 12px;
      }

      .comments {
            flex-wrap: wrap;
      }

      .comment {
            width: 100%;
      }

      .passport__content {
            flex-direction: column;
            align-items: center;
            justify-content: center;
      }

      .passport__text {
            align-items: start;
      }

      .passport__text p {
            text-align: left;
      }

      .passport__left {
            width: 80%;
            height: 700px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
      }

      .passport__left img {
            width: 45%;
            margin-left: 0px;
      }

      .passport__right {
            width: 70%;
            height: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
      }

      .abs {
            left: 0;
            top: -50px;
      }

      .passport__button {
            align-items: center;
      }

      .our {
            padding: 130px 20px 500px 20px;
      }

      .slide-btn {
            font-size: 1.3rem;
            padding: 12px;
      }

      .hello__content .img1 {
            height: 400px;
            width: 400px;
            top: -120px;
            left: -50px;
      }

      .hello__content .img2 {
            height: 300px;
            width: 300px;
            bottom: -110px;
            right: 10px;
      }

      .posts__content {
            gap: 20px;
      }

      .sliderss-btn {
            font-size: 1.3rem;
            padding: 12px;
      }

      .works__content {
            gap: 20px;
      }
}

@media (max-width: 1100px) {

      .hero__texts h1 {
            font-size: 3rem;
            line-height: 3rem;
      }

      .service {
            flex-direction: column;
            align-items: start;
            gap: 10px;
            width: 100%;
      }

      .service__buttons {
            margin-bottom: 2rem;
            display: block;
            width: 100%;
      }

      .passport__text h2 {
            font-size: 3rem;
      }

      .prime__title {
            flex-direction: column;
            align-items: flex-start;
            gap: 30px;
      }

      .prime__buttons {
            margin-bottom: 20px;
      }

      .prime__text h2 {
            font-size: 3rem;
      }

      .prime__services__top {
            gap: 15px;
      }

      .prime__services__center {
            gap: 15px;
            margin-top: 15px;
      }

      .prime__services__bottom {
            gap: 15px;
            margin-top: 15px;
      }

      .prime__services__top .prime__item {
            height: 360px;
      }

      .prime__services__center .prime__item {
            height: 280px;
      }

      .prime__services__bottom .prime__item {
            height: 200px;
      }

      .prime__item__price {
            font-size: .8rem;
      }

      .prime__card h5 {
            font-size: 1rem;
      }

      .prime__card i {
            font-size: 1.9rem;
      }

      .hello__content .img1 {
            height: 300px;
            width: 300px;
            top: -120px;
            left: -70px;
      }

      .posts__content {
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
      }

      .post__item {
            width: 48%;
      }

      .work__item img {
            height: 400px;
      }

      .work__item .inner {
            height: 400px;
      }

      .footer__img img {
            width: 300px;
      }

      .footer__img .img1 {
            position: absolute;
            top: -300px;
            right: 0px;
      }

      .footer__img .img2 {
            position: absolute;
            top: -200px;
            right: 0px;
      }
}

@media (max-width: 1100px) {

      .hero__container {
            justify-content: space-between;
            gap: 15px;
      }

      .hero1 h1 {
            font-size: 2.2rem;
            line-height: 3rem;
            max-width: fit-content;
      }

      .hero1 {
            width: 35%;
      }

      .hero2 {
            width: 33%;
      }

      .hero3 {
            width: 32%;
      }

      .hero2 .top {
            margin-bottom: 10px;
            height: 360px;
      }

      .hero2 .bottom {
            height: 310px;
      }

      .hero3 .top {
            margin-bottom: 10px;
            height: 190px;
      }

      .hero3 .bottom {
            height: 480px;
      }

      .passport__left img {
            width: 50%;
      }

      .prime__text h2 {
            font-size: 3rem;
      }

      .our h2 {
            font-size: 3rem;
      }

      .our__content {
            gap: 18px;
      }

      .sliders__post {
            display: block;
      }

      .post__text h2 {
            font-size: 3rem;
      }

      .work__text h2 {
            font-size: 3rem;
      }

}

@media (max-width: 1000px) {

      /* .hero1 {
            width: 50%;
      } */

      /* .hidden {
            display: none;
      }

      .sliders__hero {
            display: block;
      } */

      .works__content {
            flex-wrap: wrap;
            gap: 10px;
      }

      .work__item {
            width: 49%;
      }

      .work__items {
            display: flex;
            align-items: center;
            gap: 20px;
            width: 100%;
      }

      .work__items img {
            width: 100%;
            height: 248px;
            object-fit: cover;
            border-radius: 25px;
            margin-bottom: 15px;
      }

      .work__item img {
            width: 100%;
            height: 350px;
      }

      .work__item .inner {
            height: 350px;
      }

}

@media (max-width: 900px) {

      .hero__container {
            justify-content: start;
            gap: 15px;
      }

      .hero1 {
            width: 60%;
      }

      /* .sliders__hero {
            width: 30%;
      } */

      .hero1 .hero__buttons {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
      }

      /* .hero2 {
            width: 50%;
      } */

      .badges__container {
            flex-wrap: wrap;
      }

      .badge h3 {
            font-size: .8rem;
      }

      .badge-icon {
            font-size: 1.4rem;
      }

      .service__item a img {
            height: 300px;
      }

      .service__overlay h3 {
            font-size: 1.2rem;
      }

      .service__overlay i {
            font-size: 1.2rem;
      }

      .passport__left {
            width: 90%;
            height: 500px;
      }

      .passport__left img {
            width: 50%;
      }

      .passport__right {
            width: 80%;
      }

      .pass__item__img img {
            width: 70px;
            height: 70px;
      }

      .hello__content .img1 {
            height: 270px;
            width: 270px;
            top: -120px;
            left: -50px;
      }

      .hello__content .img2 {
            height: 200px;
            width: 200px;
            bottom: -80px;
            right: 10px;
      }

      .posts__title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
      }

      /* .post__item {
            width: 60%;
      } */

      .footer__img img {
            width: 250px;
      }

      .footer__img .img1 {
            position: absolute;
            top: -280px;
            right: 0px;
      }

      .footer__img .img2 {
            position: absolute;
            top: -200px;
            right: 0px;
      }
}

@media (max-width: 800px) {

      .promo h5 {
            font-size: .6rem;
      }

      .hero1 a button {
            padding: 15px 30px;
            font-size: 1rem;
      }

      .sliders__hero {
            width: 100%;
      }

      .service__items {
            gap: 20px;
            padding: 0px 20px;
      }

      .service__item {
            width: 50%;
            min-width: calc(50% - 10px);
      }

      .comment__author img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
      }

      .comment__text p {
            font-size: .9rem;
      }

      .passport__left img {
            width: 44%;
      }

      .passport__right {
            height: 400px;
            margin-top: 30px;
      }

      .hello__content .img1 {
            height: 250px;
            width: 250px;
            top: -160px;
            left: -40px;
      }

      .hello__content .img2 {
            height: 180px;
            width: 180px;
            bottom: -70px;
            right: 10px;
      }

      .works__content {
            gap: 5px;
            padding-bottom: 100px;
      }

      .work__items {
            width: 70%;
      }

      .footer__img img {
            width: 300px;
      }

      .footer__img .img1 {
            position: absolute;
            top: -280px;
            right: 0px;
      }

      /* .footer__img .img2 {
            position: absolute;
            top: -200px;
            right: 0px;
      } */

      .footer__top__text h2 {
            font-size: 2.5rem;
            color: #fff;
            max-width: 450px;
            margin-bottom: 20px;
      }

      .footer__top__text a button {
            background-color: #fff;
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
      }
}

@media (max-width: 760px) {

      .hero__container {
            flex-wrap: wrap;
            width: 100%;
            gap: 20px;
      }

      .hero1 {
            width: 55%;
      }

      .hero2 {
            width: 40%;
      }

      .hero2 .top {
            margin-bottom: 25px;
            height: 360px;
      }

      .hero2 .bottom {
            height: 350px;
      }

      .hero3 {
            width: 100%;
            display: flex;
            gap: 20px;
      }

      .hero3 .top {
            height: 300px;
      }

      .hero3 .bottom {
            height: 300px;
      }

      .hero1 h1 {
            font-size: 2.5rem;
            line-height: 3rem;
            max-width: fit-content;
      }

      .hero1 p {
            margin: 15px 0;
      }
}

@media (max-width: 600px) {

      .hidden2 {
            display: none;
      }

      .hero1 .hero__buttons {
            display: block;
            width: 100%;
      }

      .hero1 a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
            width: 100%;
            margin-top: 10px;
      }

      .hero1 h1 {
            font-size: 2.2rem;
            max-width: fit-content;
      }

      .hero__texts h1 {
            font-size: 2.5rem;
            line-height: 2.4rem;
            max-width: fit-content;
      }

      .hero__texts p {
            font-size: 1rem;
            max-width: fit-content;
            margin: 8px 0;
      }

      .service__buttons {
            display: block;
            width: 100%;
      }

      .service__buttons a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
            width: 100%;
      }

      .service__overlay h3 {
            font-size: 1rem;
      }

      .service__overlay i {
            font-size: 1.2rem;
      }

      .comment__author h3 {
            font-size: 1rem;
      }

      .comment__author span {
            font-size: .9rem;
      }

      .passport__text h2 {
            font-size: 2.5rem;
            line-height: 2.4rem;
            max-width: fit-content;
      }

      .passport__text p {
            font-size: 1rem;
            max-width: fit-content;
      }

      .passport__left {
            width: 100%;
            height: 500px;
      }

      .passport__left img {
            width: 52%;
      }

      .passport__right {
            width: 90%;
            margin-top: 30px;
      }

      .pass__item {
            padding: 20px;
            gap: 20px;
      }

      .pass__item__number {
            font-size: 1.2rem;
            padding: 10px 16px;
      }

      .pass__item__details h3 {
            font-size: 1.1rem;
      }

      .pass__item__details p {
            font-size: 12px;
      }

      .passport__button {
            display: block;
            width: 100%;
            margin-top: 30px;
      }

      .passport__button a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
            margin-top: 10px;
            width: 100%;
      }

      .prime__text h2 {
            font-size: 2.5rem;
      }

      .prime__buttons {
            display: block;
            width: 100%;
      }

      .prime__buttons a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
            margin-top: 10px;
            width: 100%;
      }

      .our h2 {
            font-size: 2.5rem;
            text-align: left;
      }

      .our__buttons {
            display: block;
            width: 100%;
      }

      .our__buttons a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
            margin-top: 10px;
            width: 100%;
      }

      .hello__content h3 {
            font-size: 2.2rem;
      }

      .hello__content p {
            font-size: .9rem;
            max-width: fit-content;
      }

      .hello__buttons a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
      }

      .hello__content .img1 {
            height: 180px;
            width: 180px;
            top: -100px;
            left: -30px;
      }

      .hello__content .img2 {
            height: 160px;
            width: 160px;
            bottom: -70px;
            right: 10px;
      }

      .posts__content {
            gap: 30px;
      }

      .post__text h2 {
            font-size: 2.5rem;
      }

      .post__item img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 20px;
      }

      .post__item .inner {
            width: 100%;
            height: 220px;
            overflow: hidden;
            border-radius: 20px;
      }

      .post__buttons {
            display: block;
            width: 100%;
      }

      .post__buttons a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
            width: 100%;
            margin-top: 10px;
      }

      .post__item {
            width: 100%;
      }

      .works__container {
            margin-top: 20px;
      }

      .works__title {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
      }

      .work__text h2 {
            font-size: 2.5rem;
      }

      .work__buttons {
            display: block;
            width: 100%;
      }

      .work__buttons a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
            width: 100%;
            margin-top: 10px;
      }

      .works__content {
            flex-wrap: wrap;
            gap: 10px;
      }

      .work__item {
            width: 48%;
      }

      .work__items {
            gap: 20px;
            width: 100%;
      }

      .footer__top {
            flex-direction: column;
            gap: 10px;
            align-items: flex-start;
            width: 100%;
      }

      .footer__top__text {
            width: 100%;
      }

      .footer__buttons {
            display: block;
            width: 100%;
      }

      .footer__buttons a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: 1rem;
            width: 100%;
            margin-top: 10px;
      }

      .footer__img {
            display: block;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
      }
      
      .footer__img img {
            width: 200px;
      }

      .footer__img .img1 {
            position: relative;
            top: 30px;
      }

      /* .footer__img .img2 {
            position: absolute;
            top: -200px;
            right: -550px;
      } */
}

@media (max-width: 590px) {

      .hero__item img {
            height: 300px;
      }

      .service__item a img {
            height: 240px;
            border-radius: 15px;
      }

      .our__content {
            gap: 10px;
      }

      .our__item {
            width: 220px;
            border-radius: 20px;
            padding: 10px 20px;
      }

      .our__top {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            justify-content: flex-start;
            gap: 10px;
            margin-bottom: 20px;
      }

      .our__top h3 {
            font-size: 1rem;
      }

      .our__top i {
            font-size: 1.8rem;
            transition: box-shadow 0.3s ease;
      }

      .our__item p {
            font-size: .9rem;
            line-height: 1.2rem;
            color: #84848f;
            margin-bottom: 20px;
      }

      .our__icon {
            width: 25px;
            height: 25px;
      }

      .our__icon i {
            font-size: 1.5rem;
      }

      .slide-btn.prev { left: 0px;  }
      .slide-btn.next { right: 0px; }

      .prime__services__top .prime__item {
            height: 200px;
      }

      .prime__services__center .prime__item {
            height: 200px;
      }

      .prime__services__bottom .prime__item {
            height: 200px;
      }

      .prime__item__price {
            font-size: .7rem;
      }

      .prime__card {
            padding: 5px;
            border-radius: 15px;
      }

      .prime__card h5 {
            font-size: .9rem;
      }

      .prime__card i {
            font-size: 1.7rem;
      }

      .works__content {
            display: flex;
            padding-bottom: 100px;
      }

      .work__item {
            height: 200px;
            margin-bottom: 40px;
      }

      .work__item img {
            height: 200px;
      }

      .work__items {
            height: 200px;
      }

      .work__items img {
            height: 200px;
      }

      .footer__top__text {
            width: 100%;
      }
}

@media (max-width: 500px) {

      .container {
            padding: 0 10px;
      }

      .hero {
            margin-top: 10px;
      }

      .hero__container {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
            width: 100%;
      }

      .hero1 {
            width: 100%;
      }

      .hero__image {
            height: 200px;
      }

      .hero__image img {
            height: 200px;
            object-fit: cover;
            border-radius: 20px;
      }

      .hero2 {
            width: 100%;
            display: flex;
            gap: 15px;
            margin-top: 35px;
      }

      .hero2 .top {
            margin-bottom: 25px;
            height: 200px;
            width: 50%;
      }

      .hero2 .bottom {
            height: 200px;
            width: 50%;
      }

      .hero3 {
            width: 100%;
            display: flex;
            gap: 15px;
            margin-top: -20px;
      }

      .hero3 .top {
            height: 200px;
            width: 50%;
      }

      .hero3 .bottom {
            height: 200px;
            width: 50%;
      }

      .hero1 h1 {
            font-size: 2.2rem;
            max-width: fit-content;
      }

      .hero1 p {
            font-size: 1rem;
            line-height: 1.5rem;
            max-width: fit-content;
      }

      .passport__text h2 {
            font-size: 2.2rem;
            line-height: 2.4rem;
            max-width: fit-content;
      }

      .passport__left img {
            width: 65%;
      }

      .passport__right {
            width: 95%;
            margin-top: 10px;
      }

      .services {
            padding: 60px 0;
            background-color: #f6f7fa;
      }

      .hero__texts h1 {
            font-size: 2.2rem;
            max-width: fit-content;
      }

      .hero__texts p {
            font-size: 1rem;
            max-width: fit-content;
            margin: 20px 0;
      }

      .service__overlay h3 {
            font-size: .9rem;
      }

      .service__overlay i {
            font-size: 1rem;
      }

      .hello__buttons {
            flex-wrap: wrap;
      }

      .prime__services__top .prime__item {
            width: 100%;
      }

      .prime__services__center .prime__item {
            width: 100%;
      }

      .prime__services__bottom .prime__item {
            width: 100%;
      }

      .prime__item__price {
            position: absolute;
            top: 20px;
            right: 10px;
            border-radius: 20px;
      }

      .prime__card {
            position: absolute;
            bottom: 20px;
            left: 10px;
            right: 10px;
            border-radius: 25px;
            padding: 8px 15px;
      }

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

      /* .footer__top__text a button {
            background-color: #fff;
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: .7rem;
      } */
}

/* @media (max-width: 420px) {

      .footer__buttons {
            display: block;
            width: 100%;
      }

      .footer__buttons a button {
            padding: 13px 25px;
            border-radius: 4rem;
            font-size: .8rem;
            width: 100%;
            margin-top: 10px;
      }
} */

@media (max-width: 400px) {

      .hero1 h1 {
            font-size: 2rem;
      }

      .hero1 a button {
            padding: 10px 20px;
            border-radius: 4rem;
            font-size: 1rem;
      }

      .hero__texts h1 {
            font-size: 2rem;
      }
}

@media (max-width: 400px) {

      .passport__left {
            background-color: #f8ae1d;
            height: 300px;
      }

      .passport__left img {
            width: 45%;
      }

      .passport__right {
            height: 250px;
            margin-top: 25px;
      }

      .passport__button {
            flex-wrap: wrap;
            justify-content: flex-start;
      }

      .passport__button a button {
            padding: 13px 20px;
            border-radius: 4rem;
            font-size: 1rem;
      }

      .prime__text h2 {
            font-size: 2.2rem;
      }

      .prime__buttons {
            flex-wrap: wrap;
            justify-content: flex-start;
      }

      .our h2 {
            font-size: 2.2rem;
      }

      .our__buttons {
            flex-wrap: wrap;
            justify-content: flex-start;
      }

      .post__text h2 {
            font-size: 2.2rem;
      }

      .work__text h2 {
            font-size: 2.2rem;
      }

      .footer__top__text h2 {
            font-size: 2.2rem;
            max-width: fit-content;
      }

      .pass__item {
            padding: 10px;
      }

      .pass__item__details h3 {
            font-size: .9rem;
      }
}

@media (max-width: 360px) {

      .prime__services__top {
            flex-direction: column;
            align-items: start;
      }

      .prime__services__center {
            flex-direction: column;
            align-items: start;
      }

      .prime__services__bottom {
            flex-direction: column;
            align-items: start;
      }
}