*,
::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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section.a div {
  width: 50%;
}

section.a img {
  width: 100%;
}

.text-a {
  padding: 8px;
}

.text-a p {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 32px;
}

section.a p:nth-child(2) {
  font-weight: 800;
}

.text-a p:nth-child(2) {
  color: #fdc220;
}

@media (max-width: 991.98px) {
  section.a p {
    font-size: 23px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767.98px) {
  section.a p {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

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

/* Section b */
section.b {
  padding: 16px;
  background-color: #e6e6e6;
}

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

section.b p:nth-child(2) {
  font-size: 32px;
  color: #fdc220;
}

section.b div div {
  text-align: center;
  margin-top: 32px;
}

section.b a {
  font-size: 30px;
  font-weight: 500;
  background-color: #fdc220;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 32px;
  display: inline-block;
  margin-bottom: 16px;
}

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

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

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

/* Section c */
section.c {
  display: flex;
  align-items: center;
  justify-content: center;
}

section.c div {
  width: 50%;
}

section.c div:nth-child(1) {
  padding-top: 8px;
  padding-bottom: 8px;
}

section.c div:nth-child(2) {
  align-self: end;
}

section.c p {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 32px;
}

section.c p:nth-child(2) {
  color: #fdc220;
  font-weight: 700;
}

section.c img {
  width: 100%;
}

@media (max-width: 991.98px) {
  section.c p {
    font-size: 23px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767.98px) {
  section.c p {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

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

/* Section d */
section.d {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e5e5e5;
  padding: 0 !important;
}

section.d div {
  width: 50%;
}

section.d div:nth-child(1) {
  align-self: end;
}

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

section.d img {
  width: 100%;
}

section.d p {
  font-size: 32px;
  font-weight: 500;
}

section.d p:nth-child(2) {
  color: #fdc220;
  font-weight: 800;
}

@media (max-width: 991.98px) {
  section.d p {
    font-size: 23px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767.98px) {
  section.d p {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

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

/* 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(6) {
  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;
}

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

@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 {
  display: flex;
  align-items: center;
  padding: 0;
}

section.f div {
  width: 50%;
}

section.f div:nth-child(2) {
  align-self: flex-start;
}

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

section.f img {
  width: 100%;
}

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

section.f p:nth-child(2) {
  font-size: 55px;
  font-weight: 800;
  color: #4c8bfd;
}

section.f p:nth-child(3) {
  font-size: 44px;
  font-weight: 800;
}

@media (max-width: 991.98px) {
  section.f p {
    font-size: 23px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767.98px) {
  section.f p {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

@media (max-width: 575.98px) {
  section.f p {
    font-size: 12.5px;
    margin-bottom: 0px !important;
  }

  section.f p:nth-child(2) {
    font-size: 23px;
  }

  section.f p:nth-child(3) {
    font-size: 18px;
  }
}

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

/* section.g div{
  width: 50%;
} */

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

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

section.g img {
  width: 100%;
}

section.g p {
  font-size: 32px;
  font-weight: 500;
  color: #fff;
  text-align: right;
}

section.g p:nth-child(2) {
  font-size: 44px;
  font-weight: 900;
  color: rgb(238, 65, 65);
}

section.g p:nth-child(5) {
  background-color: #fff;
  border-radius: 32px;
  width: fit-content;
  margin-left: auto;
  padding: 10px 20px;
  color: #0e3b90;
}

section.g p:nth-child(6) {
  color: #ffbb00;
}

@media (max-width: 991.98px) {
  section.g p {
    font-size: 23px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767.98px) {
  section.g p {
    font-size: 16px;
    margin-bottom: 8px;
  }
}

@media (max-width: 575.98px) {
  section.g p {
    font-size: 13px;
    margin-bottom: 8px !important;
  }

  section.g p:nth-child(2) {
    font-size: 23px;
  }

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

  section.g p:nth-child(5) {
    border-radius: 32px;
    padding: 1px 4px;
  }

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

/* Section h */
section.h {
  background-color: #0f344f;
  color: #fff;
  border-bottom: 8px solid #fff;
}

section.h div {
  padding: 32px;
}

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

section.h p:nth-child(1) {
  font-size: 44px;
  font-weight: 800;
}

@media (max-width: 575.98px) {
  section.h div {
    padding: 16px;
  }

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

  section.h p:nth-child(1) {
    font-size: 32px;
  }
}

/* Section i */
section.i {
  background-color: #0f344f;
  color: #fff;
  text-align: center;
  padding: 32px;
}

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

section.i p:nth-child(1),
section.i p:nth-child(2) {
  font-size: 44px;
  font-weight: 800;
  color: #fdc220;
}

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

  section.i p:nth-child(1),
  section.i p:nth-child(2) {
    font-size: 32px;
  }
}

/* Section j */
section.j {
  color: #0f344f;
  display: flex;
  align-items: center;
  padding: 0;
}

section.j img {
  width: 100%;
}

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

section.j div:nth-child(2) {
  align-self: flex-end;
  width: 30%;
}

section.j p {
  font-size: 32px;
  font-weight: 500;
}

section.j p:nth-child(1) {
  font-size: 32px;
  font-weight: 800;
}

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

  section.j div:nth-child(1) {
    width: 60%;
  }

  section.j div:nth-child(2) {
    width: 40%;
  }
}

@media (max-width: 575.98px) {
  section.j p {
    font-size: 15px !important;
    margin: 0;
  }

  section.j div:nth-child(1) {
    padding: 8px;
    width: 50%;
  }

  section.j div:nth-child(2) {
    width: 50%;
  }

  section.j p:nth-child(1) {
    margin-bottom: 8px;
  }
}

/* Section k */
section.k {
  display: flex;
  align-items: center;
  background-color: #0f344f;
  color: #fff;
  padding: 32px;
}

section.k div:nth-child(1) {
  border-left: 5px solid #fff;
  width: 40%;
  padding: 16px;
}

section.k div:nth-child(2) {
  width: 60%;
  padding: 16px;
}

section.k p {
  font-size: 32px;
  font-weight: 500;
}

section.k div:nth-child(1) p {
  font-size: 40px;
  font-weight: 800;
}

section.k div:nth-child(1) p:nth-child(3) {
  background-color: #fff;
  color: #0f344f;
  border-radius: 32px;
  width: fit-content;
  padding: 6px 32px;
  font-size: 32px;
  margin: auto;
}

@media (max-width: 991.98px) {
  section.k div {
    width: 50% !important;
  }
  section.k div:nth-child(1) p {
    font-size: 35px;
  }
}

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

  section.k p {
    font-size: 14px;
  }

  section.k div:nth-child(1) p {
    font-size: 16px;
    font-weight: 800;
  }

  section.k div:nth-child(1) p:nth-child(3) {
    padding: 3px 16px;
    font-size: 20px;
  }
}

/* Section l */
section.l {
  display: flex;
  align-items: center;
  background-color: #20364d;
  text-align: center;
}

section.l img {
  width: 100%;
}

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

section.l div {
  width: 50%;
}

section.l div:nth-child(2) p {
  font-weight: 800;
}

section.l div:nth-child(2) p:nth-child(3) {
  color: #fdc220;
}

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

section.l div:nth-child(1) p {
  margin-bottom: 32px;
}

section.l div:nth-child(1) p:nth-child(1) {
  color: #20364d;
  background-color: #fdc220;
  width: fit-content;
  margin: auto;
  border-radius: 8px;
  padding: 0 10px;
  margin-bottom: 22px;
  font-weight: 600;
}

section.l div:nth-child(1) p:nth-child(2) {
  color: #fdc220;
  font-weight: 800;
}

@media (max-width: 575.98px) {
  section.l div:nth-child(1) p {
    font-size: 16px;
    margin-bottom: 8px !important;
  }

  section.l div:nth-child(2) p {
    font-size: 16px;
    margin: 0;
  }
}

/* Section m */
section.m {
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 32px;
  font-weight: 500;
}

section.m img {
  width: 100%;
}

section.m div:nth-child(1) {
  align-self: flex-end;
  width: 25%;
}

section.m div:nth-child(2) {
  width: 75%;
  padding: 32px;
}

section.m div:nth-child(2) p {
  margin-bottom: 32px;
}

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

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

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

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

  section.m div:nth-child(2) p {
    margin-bottom: 8px;
  }

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

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

/* Section n */
section.n {
  background-color: #fdc220;
  font-size: 24px;
  font-weight: 500;
}

section.n p {
  margin: 8px;
}

section.n div:nth-child(1) {
  text-align: center;
  border-bottom: 5px solid #fff;
  padding: 16px 16px 0;
  margin-bottom: 32px;
}

section.n div:nth-child(1) p:nth-child(2) {
  font-weight: 900;
}

section.n div:nth-child(1) p:nth-child(3) {
  margin-bottom: 32px;
}

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

section.n div:nth-child(2) p {
  color: #4b5055;
  margin: 0;
  font-weight: 400;
  font-size: 28px;
}

section.n ul {
  padding: 0;
}

section.n li {
  font-weight: 600;
}

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

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

  section.n div:nth-child(2) p {
    font-size: 18px;
  }

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

  section.n div:nth-child(1) p {
    margin: 0px !important;
  }
}

/* Section o */
section.o {
  background-color: #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
}

section.o div {
  background-color: #43b7a7;
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 10px 20px;
}

section.o p {
  color: #fff;
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 0px;
}

section.o p:nth-child(2) {
  font-weight: 500;
  font-size: 23px;
}

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

  section.o p:nth-child(2) {
    font-size: 16px;
  }
}

/* Section p */
section.p {
  display: flex;
  align-items: center;
}

section.p img {
  width: 100%;
}

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

section.p div:nth-child(2) {
  width: 70%;
}

section.p ul {
  list-style: square;
  /* list-style-image: url("./assets/images/bullet-image.jpg"); */
  padding-top: 16px;
  padding-bottom: 16px;
  margin-bottom: 0;
  padding-right: 16px;
}

section.p li {
  font-weight: 500;
  font-size: 32px;
  margin-bottom: 16px;
}

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

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

  section.p li:nth-child(4) {
    margin-bottom: 0;
  }
}

/* Section q */
section.q {
  background-color: #e6e6e6;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  padding: 32px;
}

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

section.q p:nth-child(1) {
  color: #43b7a7;
}

section.q p:nth-child(2) {
  color: #bf7826;
  font-weight: 800;
  border-bottom: 2px solid #43b7a7;
  width: fit-content;
  margin: auto;
}

@media (max-width: 575.98px) {
  section.q p:nth-child(1) {
    font-size: 24px;
  }

  section.q {
    padding: 16px;
  }
}


/* Doctor Section */
section.doctor {
  display: flex;
  align-items: center;
  background-color: #e6e6e6;
}

section.doctor img{
  width: 100%;
}

section.doctor .first-child{
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

section.doctor .last-child{
  width: 40%;
}

section.doctor div div{
  border: 2px solid #fff;
  border-radius: 9px;
  background-color: #43b7a7;
  width: 500px;
  padding: 28px 16px;
  text-align: center;
  margin-bottom: 12px;
  position: relative;
}

section.doctor div div p{
margin: 0;
font-weight: 500;
color: #fff;
font-size: 24px;
}

.bi {
  color: #fff;
  color: #bf7826;
  font-size: 24px;
  position: absolute;
  top: -8px;
  left: -7px;
 }



@media (max-width: 991.98px) { 
  section.doctor div div{
    width: 400px;
    padding: 28px 16px;

  }

  section.doctor .first-child{
    width: 50%;
  }
  
  section.doctor .last-child{
    width: 50%;
  }

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



@media (max-width: 767.98px) { 
  section.doctor div div{
    width: 300px;
    padding: 28px 16px;

  }

  section.doctor .first-child{
    width: 50%;
  }
  
  section.doctor .last-child{
    width: 50%;
  }

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

 


@media (max-width: 575.98px) { 
  section.doctor div div{
    width: 160px;
    padding: 6px;

  }

  section.doctor .first-child{
    width: 50%;
  }
  
  section.doctor .last-child{
    width: 50%;
  }

  section.doctor div div p{
    font-size: 12px;
    }

    .bi {
      font-size: 18px;
     }
 }









/* Section r */
section.r {
  padding-top: 32px;
  background-color: #e6e6e6;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}

section.r span {
  color: red;
}

section.r a {
  background-color: #fdc220;
  padding: 10px 20px;
  border-radius: 9px;
  width: fit-content;
  margin: auto;
  text-decoration: none;
  display: inline-block;
  font-weight: 700;
  font-size: 22px;
  color: #212529;
  margin-bottom: 32px;
}

/* Section s */
section.s {
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  margin-top: 32px;
}

section.s p {
  text-align: center;
  border: 2px solid #fff;
  margin: auto;
  background-color: #43b7a7;
  color: #fff;
  width: fit-content;
  padding: 4px 28px;
  border-radius: 9px;
}

/* Section t */
section.t {
  margin-top: 32px;
  display: flex;
  align-items: center;
  font-size: 66px;
  font-weight: 800;
  text-align: end;
  color: #6a5854;
  border-bottom: 3px solid #43b7a7;
}

section.t div:nth-child(1) {
  width: 20%;
}
section.t div:nth-child(2) {
  width: 80%;
}

section.t img {
  width: 100%;
}

@media (max-width: 575.98px) {
  section.t div {
    width: 50% !important;
    text-align: center;
  }

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

/* Section u */
section.u {
  margin-top: 32px;
  text-align: center;
  font-size: 66px;
  font-weight: 800;
  color: #6a5854;
}

section.u .u-image {
  display: flex;
  align-self: center;
  justify-content: space-between;
  width: 100%;
}

section.u .u-image div {
  padding: 64px;
}

section.u img {
  width: 100%;
}

@media (max-width: 991.98px) {
  section.u .u-image div {
    padding: 32px;
  }
}

@media (max-width: 767.98px) {
  section.u .u-image div {
    padding: 16px;
  }

  section.u {
    font-size: 45px;
  }
}

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

/* Comment Section */
section.comment {
  margin-top: 32px;
}

section.comment h2 {
  margin-bottom: 32px;
  font-weight: 500;
}

section.comment .comment-text {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

section.comment .comment-text div {
  display: flex;
  flex-direction: column;
  /* background-color: #f0f2f5; */
  /* border-radius: 16px; */
  /* padding: 16px; */
}

section.comment .comment-text div div {
  background-color: #f0f2f5;
  border-radius: 16px;
  padding: 16px;
}

section.comment .comment-text img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  align-self: flex-start;
}

section.comment .comment-text p {
  margin-bottom: 8px;
  font-weight: 500;
}

section.comment .comment-text p:nth-child(1) {
  font-weight: 700;
}

section.comment .like {
  color: #0d6efd;
  padding-right: 8px;
  padding-top: 2px;
}








/* Footer */
footer p {
  height: 100px;
  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;
  }
}