*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Tajawal", sans-serif !important;
  /* height: 5000px; */
}

/* Navbar */
nav.navbar {
  background-color: #e6e6e6 !important;
}

.navbar-collapse {
  flex-grow: 0;
}

@media (max-width: 991px) {
  .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }

  .navbar-nav {
    flex-direction: column-reverse;
  }
}

nav a {
  /* color: #5f6579 !important; */
  color: #070707 !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

nav a:hover {
  color: #000 !important;
}

a.navbar-brand {
  color: #0d6efd !important;
  font-weight: 500 !important;
  font-size: 20px !important;
}

.nav-link {
  padding: 16px !important;
}

/* Form & Offer */
.form-and-offer {
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin-top: 32px;
  margin-bottom: 32px;
}

/* Form */
.form-container,
.offer-container {
  width: 50%;
  overflow: hidden;
}

.form-container {
  padding: 16px;
  background-color: #20364b;
  border-radius: 16px;
  position: relative;
  order: 1;
}

.form-container h2 {
  text-align: center;
  color: #fdc220;
}
.form-container h3 {
  text-align: center;
  color: #fff;
  margin-bottom: 22px;
}

select,
option {
  cursor: pointer !important;
}

input,
textarea,
select,
option {
  font-size: 18px !important;
  color: #212529 !important;
}

.btn-and-loader-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.text-warning {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: 0.2s;
}

.btn_loader {
  cursor: not-allowed !important;
  background-color: #5f6579 !important;
}

.success-overlay {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 0;
  overflow: hidden;
  color: #fff;
  transition: 0.4s;
  position: absolute;
  background-color: #20364b;
  z-index: 9999999;
  left: 0;
  top: 0;
}

.success-overlay img {
  width: 75px;
}

.success-overlay h2 {
  color: #fff;
}

/* Offer */
.offer-container {
  background-color: #fdc220;
  border-radius: 16px;
  border: 1px solid #20364b;
  padding: 16px;
}

.offer-container h2 {
  color: #20364b;
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 32px;
}

/* Counter */

/* .countr_box {
  
} */

.h1 {
  font-size: 66px;
  font-weight: 700;
  color: #3c4043;
}

.time {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.unit span {
  display: block;
}

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  width: 100px;
  height: 100px;
  transition: 0.3s;
  backdrop-filter: blur(5px);
  color: #000;
  overflow: hidden;
  /* padding: 15px 15px 10px; */
  background-color: #f8f9fa;
  position: relative;
}

.unit span:first-child {
  font-size: 35px;
  font-weight: bold;
  flex: 1;
  display: flex;
  align-items: center;
  color: #212529;
}

.unit span:last-child {
  font-size: 13px;
  height: fit-content;
  width: 100%;
  text-align: center;
  padding-top: 10px;
  position: absolute;
  bottom: 8px;
}

@media (max-width: 575.98px) {
  .unit {
    width: 70px;
    height: 70px;
  }

  .unit span:last-child {
    bottom: 2px;
  }
  .price {
    font-size: 16px !important;
  }
}

@media (max-width: 991px) {
  .form-and-offer {
    flex-direction: column;
    gap: 32px;
  }

  .form-container,
  .offer-container {
    width: 100%;
  }

  .offer-container {
    order: 1 !important;
  }
}

.product-in-offer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.product-in-offer img {
  width: 100%;
}

.product-in-offer p {
  font-size: 20px;
  font-weight: 500;
}

.product-in-offer span {
  text-decoration: line-through;
  color: #7e859bb7;
}

p.tail {
  text-align: center;
  margin: 0;
  margin-top: 16px;
}

/* payment method */
.payment-method {
  /* margin-bottom: 32px; */
  margin-top: 32px;
}

.payment-method h2 {
  font-size: 40px;
  font-weight: 800;
  color: #292929;
  text-align: end;
  margin-bottom: 8px;
  padding: 16px;
  padding-top: 0;
  position: relative;
  width: fit-content;
  margin-left: auto;
  z-index: 999;
}

.payment-method h2::before {
  content: "";
  position: absolute;
  width: 200px;
  background-color: #fdc220;
  height: 19px;
  left: 11px;
  bottom: 12px;
  z-index: -1;
}

.payment-method img {
  width: 100%;
}

@media (max-width: 575.98px) {
  .payment-method h2 {
    font-size: 32px;
    padding-right: 12px;
  }

  .payment-method h2::before {
    width: 164px;
  }
}

/* Section A */
section.a {
  text-align: center;
  background-color: #20364b;
  color: #fff;
  padding-top: 32px;
  padding-bottom: 32px;
}

section.a h1 {
  background-color: #fdc220;
  color: #20364b;
  width: fit-content;
  margin: auto;
  border-radius: 6px;
  padding: 3px 12px;
  font-weight: 800;
  font-size: 45px;
  margin-bottom: 16px;
}

section.a h2 {
  font-weight: 500;
}

section.a span {
  color: #fdc220;
}

/* Section B */
section.b {
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  align-items: center;
}

section.b div:nth-child(1) {
  width: 30%;
}

section.b div:nth-child(2) {
  width: 70%;
  padding-left: 16px;
}

section.b h2 {
  font-weight: 500;
  /* font-size: 32px; */
  margin-bottom: 32px;
}

section.b span {
  font-weight: 800;
}

section.b img {
  border: 3px solid #20364b;
  width: 100%;
  border-radius: 16px;
}

@media (max-width: 767.98px) {
  section.b h2 {
    font-size: 22px;
  }
}

@media (max-width: 575.98px) {
  section.b h2 {
    font-size: 16px;
    margin-bottom: 16px;
  }
}

/* Section C */
section.c {
  text-align: center;
  margin-top: 32px;
}

section.c h2 {
  font-size: 40px;
  font-weight: 800;
  color: #292929;
  text-align: end;
  padding: 16px;
  padding-top: 0;
  position: relative;
  width: fit-content;
  margin: auto;
  z-index: 999;
}

section.c h2::before {
  content: "";
  position: absolute;
  width: 269px;
  background-color: #fdc220;
  height: 19px;
  left: 11px;
  bottom: 12px;
  z-index: -1;
}

@media (max-width: 575.98px) {
  section.c h2 {
    font-size: 29px;
  }

  section.c h2::before {
    width: 197px;
  }
}

/* Section D */
section.d {
  background-color: #fdc220;
  margin-top: 16px;
  font-size: 32px;
  font-weight: 500;
}

section.d div {
  padding: 32px;
}

section.d li {
  font-weight: 800;
}

section.d p {
  color: rgb(82, 82, 82);
  font-weight: 500;
  font-size: 24px;
  margin-bottom: 8px;
}

@media (max-width: 575.98px) {
  section.d p {
    font-weight: 500;
    font-size: 16px;
  }

  section.d li {
    font-size: 24px;
  }

  section.d ul {
    padding-left: 0;
  }
}

/* Section E */
section.e {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

section.e div:nth-child(1) {
  width: 70%;
  padding-top: 32px;
}

section.e div:nth-child(2) {
  width: 30%;
}

section.e img {
  width: 100%;
}

section.e p {
  font-weight: 500;
}

section.e p:nth-child(7) {
  color: red;
}

section.e a {
  font-weight: 600;
  background-color: #fdc220;
  color: #fff;
  text-decoration: none;
  padding: 8px 35px;
  border-radius: 32px;
  display: inline-block;
  margin-bottom: 16px;
}

section.e a:hover {
  background-color: #ffbb00;
}

section.e span:nth-child(1) {
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px 10px;
  font-weight: 600;
}

section.e span:nth-child(2) {
  background-color: #fdc220;
  border-radius: 5px;
  padding: 5px 10px;
  margin-right: 16px;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  section.e {
    font-size: 20px;
  }

  section.e div:nth-child(1) {
    padding-top: 22px;
  }
}

@media (max-width: 575.98px) {
  section.e {
    font-size: 14px;
  }

  section.e p {
    margin-bottom: 8px;
  }

  section.e div:nth-child(1) {
    padding-top: 16px;
  }

  section.e a {
    margin-bottom: 8px;
  }
}

/* Section F */
section.f {
  padding: 0;
  margin-top: 32px;
}

section.f div:nth-child(1) {
  background-color: #e44154;
  text-align: center;
}

section.f div:nth-child(2) {
  background-image: url("./assets/images/b.jpg");
  width: 100% !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #5eb5a2;
  background-position: bottom left;
}

section.f h1 {
  color: #fff;
  padding-top: 32px;
  padding-bottom: 32px;
  margin: 0;
}

section.f p {
  color: #fff;
  font-weight: 500;
  font-size: 32px;
}

section.f article {
  width: 80%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

@media (max-width: 576px) {
  section.f h1 {
    padding-top: 32px;
    padding-bottom: 32px;
    font-size: 22px;
    font-weight: 500;
  }

  section.f p {
    font-size: 16px;
  }
}

/* Expert Opinion */
.expert-opinion {
  color: #5eb5a2;
  text-align: center;
  font-weight: 800;
  padding: 32px 0;
  background-color: #eaf3f0;
  margin-bottom: 0;
  position: relative;
  z-index: 999;
  box-shadow: 0px 11px 32px -25px rgba(0, 0, 0, 0.75);
}

/* Section G */
section.g {
  padding: 0;
  display: flex;
  align-items: center;
  background-color: #eaf3f0;
}

section.g img {
  width: 100%;
}

section.g div:nth-child(1) {
  align-self: flex-end;
  padding-top: 8px;
  width: 30%;
}

section.g div:nth-child(2) {
  /* padding-right: 32px; */
  padding-top: 32px;
  padding-bottom: 32px;
  width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.g ul {
  padding-right: 55px;
}

section.g li {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 8px;
}

@media (max-width: 991.98px) {
  section.g li {
    font-size: 18px;
  }
}

@media (max-width: 767.98px) {
  section.g li {
    font-size: 16px;
  }

  section.g ul {
    padding: 0;
    margin: 0;
    padding-right: 32px;
  }
}

@media (max-width: 575.98px) {
  section.g li {
    font-size: 13px;
    margin-bottom: 6px;
  }

  section.g div {
    width: 50% !important;
  }

  section.g div:nth-child(2) {
    padding: 16px 0px 16px 0;
  }

  section.g ul {
    padding-right: 20px;
  }
}

/* Section I */
section.i {
  margin-top: 32px;
  text-align: center;
  background-color: #ffd0c6;
  padding: 0;
}

section.i h1 {
  font-weight: 600;
  padding-top: 32px;
  padding-bottom: 32px;
  color: #425776;
}

section.i h3 {
  font-weight: 600;
  padding-top: 32px;
  padding-bottom: 32px;
  background-color: #99c4f9;
  margin: 0;
  color: #425776;
}

@media (max-width: 767.98px) {
  section.i h3 {
    font-size: 22px;
  }
}

@media (max-width: 575.98px) {
  section.i h1 {
    font-size: 24px;
  }

  section.i h3 {
    font-size: 15px;
  }
}

/* Section J */
section.j {
  background-color: #99c4f9;
  padding-bottom: 32px;
  padding-left: 0;
  padding-right: 0;
}

section.j p {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

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

.five {
  text-align: center;
}

@media (max-width: 991.98px) {
  section.j p {
    font-size: 18px;
  }
}
@media (max-width: 767.98px) {
  section.j p {
    font-size: 16px;
  }
}
@media (max-width: 575.98px) {
  section.j p {
    font-size: 14px;
    font-weight: 500;
  }
}

/* Section K */
.plus-sec {
  text-align: center;
}

.plus-sec h1 {
  background-color: #ffd0c6;
  width: fit-content;
  margin: auto;
  font-weight: 600;
  padding: 10px 20px;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  color: #425776;
}

/* Section L */
section.l {
  margin-top: 32px;
  margin-bottom: 32px;
}
section.l p {
  font-weight: 500;
  font-size: 32px;
}

section.l img {
  width: 40px;
}

@media (max-width: 991.98px) {
  section.l img {
    width: 40px;
  }

  section.l p {
    font-size: 24px;
  }
}

@media (max-width: 767.98px) {
  section.l img {
    width: 30px;
  }

  section.l p {
    font-size: 18px;
  }
}

@media (max-width: 575.98px) {
  section.l img {
    width: 20px;
  }

  section.l p {
    font-size: 15px;
  }
}

/* Section M */
section.m {
  background-color: #425776;
  padding-top: 32px;
  padding-bottom: 32px;
  padding-right: 32px;
}

section.m h1 {
  text-align: center;
  color: #82dcef;
  margin-bottom: 32px;
}

section.m p {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}

section.m span {
  color: #425776;
  background-color: #ffd0c6;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

@media (max-width: 991.98px) {
  section.m p {
    font-size: 22px;
  }

  section.m span {
    width: 30px;
    height: 30px;
  }

  section.m h1 {
    font-size: 28px;
  }
}

@media (max-width: 767.98px) {
  section.m p {
    font-size: 18px;
  }

  section.m span {
    width: 25px;
    height: 25px;
  }

  section.m h1 {
    font-size: 28px;
  }
}

@media (max-width: 575.98px) {
  section.m p {
    font-size: 16px;
  }

  section.m span {
    width: 25px;
    height: 25px;
  }

  section.m h1 {
    font-size: 24px;
    font-weight: 800;
  }

  section.m {
    padding: 16px;
  }
}

/* Section N */
section.n {
  padding-left: 0;
  display: flex;
  align-items: center;
  /* background-image: linear-gradient(#99c4f9, #b8d6fc); */
  background-color: #99c4f9;
}

section.n p {
  font-size: 24px;
  font-weight: 500;
  color: #425776;
}

section.n p:nth-child(6) {
  margin-top: 32px;
  color: #fff;
  margin-bottom: 0;
}

section.n div:nth-child(1) {
  padding-top: 16px;
  align-self: flex-end;
}

section.n div:nth-child(2) {
  padding: 16px;
  padding-left: 0;
}

@media (max-width: 991.98px) {
  section.n p {
    font-size: 18px;
  }
}

@media (max-width: 767.98px) {
  section.n p {
    font-size: 16px;
  }

  section.n img {
    width: 100%;
  }

  section.n div:nth-child(1) {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  section.n p {
    font-size: 13px;
    margin-bottom: 4px;
  }

  section.n div:nth-child(1),
  section.n div:nth-child(2) {
    width: 50%;
    padding-right: 0;
  }

  section.n p:nth-child(6) {
    margin-top: 8px;
  }
}

/* Section P */
section.p {
  margin-top: 32px;
  text-align: center;
  background-image: url(./assets/images/e.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  /* height: 1080px; */
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

section.p h1 {
  margin-bottom: 40px;
  background-color: #c5ffc2;
  font-weight: 800;
  color: #000;

  border-top-width: 50px;
  border-right-width: 50px;
  border-bottom-width: 50px;
  border-left-width: 50px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #0000;
  border-right-color: #fff;
  border-bottom-color: #0000;
  border-left-color: #fff;

  height: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 13px;
}

section.p div {
  width: 60%;
}

section.p p {
  font-size: 24px;
  font-weight: 600;
}

@media (max-width: 991.98px) {
  section.p p {
    font-size: 16px;
    font-weight: 500;
  }
}

@media (max-width: 767.98px) {
  section.p h1 {
    font-weight: 600;
    margin-bottom: 32px;
    border-top-width: 40px;
    border-right-width: 40px;
    border-bottom-width: 40px;
    border-left-width: 40px;
    padding: 0px 8px;
  }

  section.p p {
    font-size: 15px;
  }

  section.p div {
    width: 70%;
  }
}

@media (max-width: 575.98px) {
  section.p h1 {
    font-weight: 600;
    margin-bottom: 24px;
    border-top-width: 25px;
    border-right-width: 25px;
    border-bottom-width: 25px;
    border-left-width: 25px;
    padding: 0px 6px;
  }

  section.p p {
    margin-bottom: 6px;
  }
}

/* Section Q */
section.q {
  margin-top: 32px;
  text-align: center;
}
section.q h1 {
  color: #fff;
  background-color: #000;
  padding-top: 16px;
  padding-bottom: 16px;
}
section.q h2 {
  color: #000;
  font-weight: 600;
  margin-bottom: 16px;
}

section.q img {
  width: 100%;
}

@media (max-width: 767.98px) {
  section.q h2 {
    font-size: 23px;
  }
}

@media (max-width: 575.98px) {
  section.q {
    padding: 0;
  }

  section.q h2 {
    font-size: 16px;
  }

  section.q h1 {
    font-size: 24px;
  }
}

/* Section R */
section.r {
  margin-top: 32px;
  background-color: #c5ffc2;
  padding: 16px;
  padding-top: 0;
}

section.r h1 {
  width: fit-content;
  margin: auto;
  background-color: #fafafc;
  padding: 10px 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-bottom: 32px;
}

section.r svg {
  color: #f9e000;
}

.one,
.two,
.three {
  background-color: #fafafc;
  border-radius: 22px;
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 45px;
  position: relative;
}

.one div:nth-child(1),
.two div:nth-child(1),
.three div:nth-child(1) {
  align-self: flex-start;
}

.two div:nth-child(2) {
  padding-right: 16px;
}

section.r h4 {
  color: #b8b8b8;
}
.one,
.three {
  flex-direction: row-reverse;
}

section.r img {
  width: 100px;
  height: 100px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 50%;
  padding: 3px;
}

section.r p {
  font-weight: 500;
}

.one::before,
.three::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: transparent;
  left: 40px;
  bottom: -50px;

  border-top-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  border-left-width: 25px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #fafafc;
  border-right-color: #0000;
  border-bottom-color: #0000;
  border-left-color: #0000;
}

.two::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: transparent;
  right: 40px;
  bottom: -50px;

  border-top-width: 25px;
  border-right-width: 25px;
  border-bottom-width: 25px;
  border-left-width: 25px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #fafafc;
  border-right-color: #0000;
  border-bottom-color: #0000;
  border-left-color: #0000;
}

@media (max-width: 767.98px) {
  section.r h1 {
    font-size: 28px;
  }
}

@media (max-width: 575.98px) {
  section.r h1 {
    font-size: 18px;
    font-weight: 600;
  }

  section.r img {
    width: 75px;
    height: 75px;
  }
}

/* Section T */
section.t {
  margin-top: 16px;
  padding: 0;
}

section.t h1 {
  background-color: #006afe;
  color: #fff;
  margin-bottom: 0;
  padding: 16px;
  text-align: center;
}

section.t h2 {
  color: #006afe;
  background-color: #f4f4ea;
  padding: 16px;
  padding-bottom: 0;
  text-align: center;
  margin: 0;
  font-weight: 600;
}

section.t .t-tt div p span img {
  width: 30px;
  height: 30px;
}

section.t .cc img {
  width: 100%;
  filter: drop-shadow(5px 5px 0px #f4cb01);
}

section.t p {
  font-weight: 500;
}

section.t .t-tt {
  background-color: #f4f4ea;
  padding: 16px;

  display: flex;
  align-items: center;
}

section.t p {
  font-size: 32px;
}

.t-tt div:nth-child(1) {
  width: 70%;
}

.t-tt div:nth-child(2) {
  width: 30%;
}

@media (max-width: 991.98px) {
  section.t p {
    font-size: 18px;
  }

  .t-tt div:nth-child(1) {
    width: 70%;
  }

  .t-tt div:nth-child(2) {
    width: 30%;
  }

  section.t .t-tt div p span img {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 767.98px) {
  section.t p {
    font-size: 16px;
  }

  .t-tt div:nth-child(1) {
    width: 70%;
  }

  .t-tt div:nth-child(2) {
    width: 30%;
  }

  section.t .t-tt div p span img {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 575.98px) {
  section.t h1 {
    font-size: 24px;
  }

  section.t h2 {
    font-size: 14px;
  }

  section.t p {
    font-size: 11px;
  }

  .t-tt div:nth-child(1) {
    width: 70%;
  }

  .t-tt div:nth-child(2) {
    width: 30%;
  }

  section.t .t-tt div p span img {
    width: 20px;
    height: 20px;
  }
}

/* Section U */
section.u {
  text-align: center;
  background-color: #f4cb01;
  padding: 16px;
}

section.u div {
  border-bottom: 3px solid #fff;
  width: fit-content;
  margin: auto;
}

section.u h1 {
  color: #006afe;
  font-weight: 800;
}

section.u h2 {
  color: #425776;
}

section.u img {
  width: 100%;
}

@media (max-width: 575.98px) {
  section.u h2 {
    font-size: 16px;
  }
}

/* Section W */
section.w {
  text-align: center;
  padding: 0;
}

section.w img {
  width: 100%;
}

section.w h1 {
  background-color: #f4cb01;
  color: #fff;
  font-weight: 600;
  padding: 16px;
}

@media (max-width: 575.98px) {
  section.w h1 {
    font-size: 16px;
  }
}

/* Footer */
footer p {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  background-color: #e6e6e6;
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

@media (max-width: 575.98px) {
  footer p {
    font-size: 14px;
  }
}