/*VARIABLES*/
/*SASS SECTION*/
header .nav-container {
  width: 100% !important;
  position: relative !important;
}
header .nav-container .navbar {
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.001) !important;
  backdrop-filter: blur(1rem) !important;
  background-clip: padding-box !important;
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.1);
  border: 0px solid transparent;
  padding: 0.2rem 0.7rem !important;
  width: 100% !important;
  height: 4.4rem;
  z-index: 9;
  position: fixed;
}
header .nav-container .logo {
  position: absolute !important;
  width: 9.1rem !important;
  top: -4.2rem !important;
  left: 6rem !important;
  display: flex !important;
  justify-content: start !important;
  image-rendering: auto !important;
  cursor: pointer !important;
}
header .nav-container #menuBtn {
  display: flex;
  color: #091818;
  justify-content: flex-end;
  position: fixed;
  left: 93%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000000000000000000000000;
  cursor: pointer;
}
header .nav-container .navbar-nav li a {
  position: relative;
  color: #091818;
  padding: 0.7rem 1.4rem !important;
  text-decoration: none;
  font-size: 1.5rem;
  font-family: "trirong light";
  font-weight: 400;
  z-index: 9999;
  cursor: pointer;
}
header .nav-container .navbar-nav li a:hover {
  color: rgb(31, 0, 30);
}
header .nav-container ul {
  list-style: none;
  overflow: hidden;
  display: block;
}
header .nav-container ul li {
  display: inline-block;
}
header .nav-container .side-nav {
  height: 100% !important;
  width: 0;
  position: fixed !important;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.001);
  backdrop-filter: blur(0.9rem) !important;
  background-clip: padding-box;
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.1);
  border: 5px solid transparent rgb(255, 255, 255);
  border-radius: 0.3rem;
  overflow-x: hidden !important;
  overflow-y: hidden;
  padding-top: 10px !important;
  transition: 0.5s;
  z-index: 2 !important;
}
header .nav-container .side-nav a {
  padding: 6px 6px 6px 27px !important;
  text-decoration: none;
  text-align: start !important;
  font-size: 2.2rem !important;
  font-family: "trirong thin" !important;
  font-weight: 600 !important;
  position: relative;
  left: 1rem !important;
  top: 100px !important;
  color: rgb(0, 56, 58) !important;
  display: block !important;
  transition: 0.6s;
  outline: none !important;
  cursor: pointer;
}
header .nav-container .side-nav a:hover {
  color: rgb(18, 0, 2) !important;
  font-size: 3rem !important;
  outline: none !important;
}
header .nav-container .side-nav .btn-close {
  position: absolute !important;
  left: 20% !important;
  transform: translateX(-78%);
  top: 60px !important;
  right: 0px;
  font-size: 3rem !important;
  outline: none !important;
  z-index: 999 !important;
  padding: 1rem !important;
  margin: 0 !important;
}
header .nav-container .side-footer {
  font-family: "trirong thin";
  width: 100%;
  font-weight: 900;
  font-size: 0.9rem;
  color: #091818;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  align-self: flex-end;
  position: absolute;
  top: 90%;
  padding-top: 28px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
header .nav-container .side-footer p {
  justify-content: center;
  align-self: center;
}

#body {
  transition: margin-left 0.5s !important;
  padding: 0 0 !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

/*
a[href="#home"]:target ~ #home {
    display: block;
}
*/
/*VARIABLES*/
#landing .landing-right, #landing2 .landing-right, #landing3 .landing-right, .card .landing-right, .error-left .landing-right {
  position: absolute !important;
  cursor: pointer;
}
#landing .landing-right a, #landing2 .landing-right a, #landing3 .landing-right a, .card .landing-right a, .error-left .landing-right a {
  text-decoration: none;
  color: #091818;
  border: 1px solid #013d49;
  display: inline-block;
  padding: 1.3rem 0 !important;
  width: 11.9rem !important;
  position: absolute;
  margin-top: 1rem !important;
  bottom: 1.9rem !important;
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
  z-index: 1;
  transition: 1s;
}
#landing .landing-right a span, #landing2 .landing-right a span, #landing3 .landing-right a span, .card .landing-right a span, .error-left .landing-right a span {
  width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(0rem);
  background-clip: padding-box;
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.1);
  border: 0 solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: 1s;
}
#landing .landing-right .btn-1 a:hover span, #landing2 .landing-right .btn-1 a:hover span, #landing3 .landing-right .btn-1 a:hover span, .card .landing-right .btn-1 a:hover span, .error-left .landing-right .btn-1 a:hover span {
  width: 100%;
  padding: 0;
}
#landing .landing-right .btn-1 a:hover, #landing2 .landing-right .btn-1 a:hover, #landing3 .landing-right .btn-1 a:hover, .card .landing-right .btn-1 a:hover, .error-left .landing-right .btn-1 a:hover {
  color: rgb(1, 30, 30);
  font-family: "trirong thin";
  font-weight: 600;
  text-align: center;
  font-size: 1.9rem;
  margin-top: 0;
  cursor: pointer;
}

/*VARIABLES*/
/* ABOUT-US SECTION START*/
#aboutUs {
  position: relative !important;
  width: 100% !important;
  height: 105vh !important;
  background-image: linear-gradient(75deg, rgba(16, 29, 64, 0.5), rgba(255, 255, 255, 0.15)), url(/images/BANKY8.jpg);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
#aboutUs .aboutUs {
  height: 100vh !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 98% !important;
  justify-content: center !important;
  align-content: end !important;
  position: relative !important;
}
#aboutUs .aboutUs h1 {
  font-family: "antic didone" !important;
  font-weight: 500 !important;
  font-size: 2.3rem;
  color: rgb(252, 247, 253);
  text-align: center !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(0.99rem) !important;
  background-clip: padding-box !important;
  padding: 0.7rem !important;
  margin-top: 6rem !important;
  margin-bottom: -1.6rem;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* SERVICE INDUSTRIES SECTION START*/
#Gallery {
  height: 115vh;
  width: 100% !important;
  position: relative !important;
  background: linear-gradient(127deg, #aab8c2, #F9FAF5) !important;
  z-index: 1;
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
}
#Gallery::before {
  content: " " !important;
  position: absolute !important;
  top: -4rem !important;
  left: 0 !important;
  width: 50% !important;
  height: 100vh !important;
  border-bottom-right-radius: 100% !important;
  background: linear-gradient(225deg, #aab8c2 0%, #aab8c2 75%, #aab8c2 100%) !important;
  backdrop-filter: blur(3rem) !important;
  background-clip: border-box !important;
  z-index: -1 !important;
  animation: move-up 2s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#Gallery::after {
  content: " " !important;
  position: absolute !important;
  bottom: 0rem !important;
  right: 0 !important;
  width: 39% !important;
  height: 70vh !important;
  border-top-left-radius: 100% !important;
  background: linear-gradient(125deg, rgba(170, 184, 194, 0.4666666667) 0%, rgba(170, 184, 194, 0.4666666667) 75%, rgba(170, 184, 194, 0.4666666667) 100%) !important;
  backdrop-filter: blur(1rem) !important;
  background-clip: border-box !important;
  z-index: -2 !important;
  animation: move-up 4s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#Gallery .Gallery {
  height: 122.5vh !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 98.5% !important;
  place-content: center !important;
}
#Gallery .Gallery h1 {
  font-family: "antic didone";
  font-weight: 500 !important;
  font-size: 1.9rem;
  color: #091818;
  padding-top: 6rem;
  margin-bottom: -0.5rem !important;
  margin-top: 8rem !important;
}
#Gallery .Gallery .gallery {
  height: 90%;
  width: 100% !important;
  display: flex !important;
  margin-top: 2% !important;
  margin-bottom: 0rem !important;
  box-sizing: border-box;
}
#Gallery .Gallery .gallery .active {
  flex-basis: 50% !important;
}
#Gallery .Gallery .gallery:hover .active {
  flex-basis: 0 !important;
}
#Gallery .Gallery .image-box {
  margin: 0 1% !important;
  flex-grow: 1 !important;
  flex-basis: 0 !important;
  transition: 1s !important;
  position: relative !important;
}
#Gallery .Gallery .image-box img {
  width: 100% !important;
  height: 100%;
  object-fit: cover !important;
  transition: 1s !important;
}
#Gallery .Gallery .image-box:hover {
  flex-basis: 50% !important;
}
#Gallery .Gallery .image-box:nth-child(1):hover {
  flex-basis: 50% !important;
}
#Gallery .Gallery .image-box .overlay {
  width: 100%;
  height: 90vh;
  position: absolute !important;
  top: 0% !important;
  cursor: pointer;
  background: linear-gradient(rgba(12, 34, 48, 0.2), rgba(1, 7, 8, 0.9));
  opacity: 0 !important;
  transition: 1s !important;
}
#Gallery .Gallery .image-box .overlay:hover {
  opacity: 1 !important;
}
#Gallery .Gallery .image-box .overlay h2 {
  color: rgb(255, 255, 255) !important;
  font-family: "antic didone" !important;
  font-weight: 500 !important;
  font-size: 2.7rem;
  position: static !important;
  display: flex !important;
  justify-content: center !important;
  padding: 2rem !important;
}
#Gallery .Gallery .image-box .overlay p {
  color: white !important;
  font-family: "trirong thin" !important;
  font-weight: 600 !important;
  font-size: 2rem;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

/* SCROLLING TEXT BANNER START*/
#continuous-scroll .cont-scroll {
  position: relative;
  width: 100%;
  height: 15vh;
  overflow: hidden;
  margin: 0;
  border-top: 6px solid #122023;
  border-bottom: 6px solid #122023;
}
#continuous-scroll .cont-scroll div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(127deg, #aabdc2, #F9FAF5);
}
#continuous-scroll .cont-scroll div:nth-child(2) {
  background: linear-gradient(127deg, #aab8c2, #F9FAF5);
  max-height: 100%;
  clip-path: circle(180px at center);
}
#continuous-scroll .cont-scroll div h1 {
  position: absolute;
  top: 68%;
  left: 0;
  transform: translateY(-32%);
  font-family: "antic didone";
  font-weight: 500;
  font-size: 3rem;
  color: #091818;
  white-space: nowrap;
  cursor: default;
  display: inline-block;
  will-change: transform;
  animation: animate 30s linear infinite;
}
#continuous-scroll .cont-scroll div:nth-child(2) h1 {
  -webkit-text-stroke: 2px rgba(39, 27, 43, 0.592);
  color: transparent;
}

@keyframes animate {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* TESTIMONIAL SECTION START*/
#testimonial-section {
  height: 102vh;
  width: 100% !important;
  position: relative !important;
  background: linear-gradient(127deg, #aac2bf, #e7fbf7) !important;
  z-index: 1;
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
}
#testimonial-section::before {
  content: " " !important;
  position: absolute !important;
  top: -4rem !important;
  left: 0 !important;
  width: 50% !important;
  height: 100vh !important;
  border-bottom-right-radius: 100% !important;
  background: linear-gradient(225deg, rgba(170, 194, 194, 0.4392156863) 0%, rgba(170, 194, 189, 0.5254901961) 75%, #aac2c2 100%) !important;
  backdrop-filter: blur(3rem) !important;
  background-clip: border-box !important;
  z-index: -1 !important;
  animation: move-up 2s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#testimonial-section::after {
  content: " " !important;
  position: absolute !important;
  bottom: 0rem !important;
  right: 0 !important;
  width: 39% !important;
  height: 70vh !important;
  border-top-left-radius: 100% !important;
  background: linear-gradient(125deg, rgba(170, 194, 190, 0.4666666667) 0%, rgba(170, 194, 191, 0.4666666667) 75%, rgba(170, 194, 193, 0.4666666667) 100%) !important;
  backdrop-filter: blur(1rem) !important;
  background-clip: border-box !important;
  z-index: -2 !important;
  animation: move-up 4s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#testimonial-section .testimonial-section {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 100% !important;
  place-content: center center !important;
}
#testimonial-section .testimonial-section h2 {
  font-family: "antic didone";
  font-weight: 500 !important;
  font-size: 3rem;
  color: #091818;
  padding-top: 4.8rem !important;
}
#testimonial-section .testimonial-section .testimony {
  width: 90%;
  max-width: 800px;
  margin: auto !important;
  padding-top: 0.8rem;
}
#testimonial-section .testimonial-section .testimony .testimonial-text {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1rem);
  background-clip: padding-box;
  color: #091818;
  width: 100%;
  height: 300px;
  position: relative;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid transparent rgb(255, 255, 255);
}
#testimonial-section .testimonial-section .testimony .user-text {
  font-family: "trirong thin";
  font-weight: 600 !important;
  font-size: 1.9rem;
  color: #091818;
  width: 90% !important;
  text-align: center !important;
  line-height: 30px;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: none !important;
}
#testimonial-section .testimonial-section .testimony .user-text.fas {
  font-size: 30px !important;
  margin-bottom: 50px !important;
  margin-top: 20px !important;
}
#testimonial-section .testimonial-section .testimony .user-text .ceoName {
  display: block !important;
  font-size: 2rem;
  margin-top: 20px;
  font-family: "antic didone";
  font-weight: 500 !important;
  color: #091818;
  text-transform: uppercase !important;
}
#testimonial-section .testimonial-section .testimony .user-text.active-text {
  display: block !important;
  animation: moveup 0.5s linear forwards;
}
@keyframes moveup {
  0% {
    margin-top: 25px;
  }
  100% {
    margin-top: 0px;
  }
}
#testimonial-section .testimonial-section .testimony .testimonial-pic {
  margin-top: 0px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}
#testimonial-section .testimonial-section .testimony .user-pic {
  width: 55px !important;
  padding: 8px !important;
  border-radius: 45% !important;
  margin-bottom: 2rem;
  cursor: pointer;
}
#testimonial-section .testimonial-section .testimony .user-pic.active-pic {
  width: 55px !important;
  border: 2px solid #091818 !important;
  padding: 1rem !important;
  margin-top: 0.3rem !important;
}
#testimonial-section .testimonial-right {
  display: grid !important;
  grid-template-rows: 100% !important;
  justify-items: center !important;
  align-items: center !important;
}
#testimonial-section .testimonial-right img {
  display: block !important;
  position: absolute;
  height: 93.6vh;
  width: 40%;
  object-fit: cover;
  bottom: 0;
  right: -2rem;
  z-index: 0;
}

/*VARIABLES*/
#blog-list {
  height: 102vh !important;
  width: 100% !important;
  position: relative !important;
  background: linear-gradient(127deg, #aab8c2, #F9FAF5) !important;
  z-index: 1;
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
}
#blog-list::before {
  content: " " !important;
  position: absolute !important;
  top: -4rem !important;
  left: 0 !important;
  width: 50% !important;
  height: 100vh !important;
  border-bottom-right-radius: 100% !important;
  background: linear-gradient(225deg, #aab8c2 0%, #aab8c2 75%, #aac2c2 100%) !important;
  backdrop-filter: blur(3rem) !important;
  background-clip: border-box !important;
  z-index: -1 !important;
  animation: move-up 2s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#blog-list::after {
  content: " " !important;
  position: absolute !important;
  bottom: 0rem !important;
  right: 0 !important;
  width: 39% !important;
  height: 70vh !important;
  border-top-left-radius: 100% !important;
  background: linear-gradient(125deg, #aab8c2 0%, #aab8c2 75%, rgba(170, 194, 193, 0.4666666667) 100%) !important;
  backdrop-filter: blur(1rem) !important;
  background-clip: border-box !important;
  z-index: -2 !important;
  animation: move-up 4s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#blog-list .card-container {
  padding: 1rem !important;
}
#blog-list .card-container .card {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(1rem) !important;
  background-clip: padding-box !important;
  width: 100%;
  height: 282px;
  position: relative !important;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2) !important;
  border: 5px solid transparent rgb(255, 255, 255) !important;
}

.blog-list {
  list-style: none;
  padding: 2rem !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.blog-list li {
  margin: 1rem;
  flex-basis: 50%;
}

.blog-list a {
  text-decoration: none;
}

.blog-list img {
  width: 100% !important;
  height: 61vh !important;
  max-width: 120vw !important;
  border-radius: 5px;
}

.blog-list h1 {
  font-family: "antic didone";
  font-weight: 500 !important;
  font-size: 3.9rem;
  margin: 2.6rem auto -0.5rem !important;
  text-align: center !important;
  color: #091818 !important;
  text-decoration: none !important;
  display: block;
}

.blog-list h2 {
  font-family: "antic didone";
  font-weight: 600 !important;
  font-size: 1.89rem;
  padding: 1rem !important;
  margin: 0.5rem 0 0 0;
  color: #091818 !important;
  text-decoration: none !important;
}

.blog-list p {
  font-family: "trirong thin";
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  color: #091818 !important;
  margin: 0.5rem 0 0 0;
  padding: 0.5rem !important;
}
.blog-list p small {
  font-family: "trirong thin";
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  color: #091818 !important;
  padding: 0.5rem !important;
}

/*VARIABLES*/
@font-face {
  font-family: "antic didone";
  src: url("../fonts/anticdidone-regular-webfont.woff2") format("woff2"), url("../fonts/anticdidone-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "trirong thin";
  src: url("../fonts/trirong-thin-webfont.woff2") format("woff2"), url("../fonts/trirong-thin-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "trirong light";
  src: url("../fonts/trirong-light-webfont.woff2") format("woff2"), url("../fonts/trirong-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "trirong extralight";
  src: url("../fonts/trirong-extralight-webfont.woff2") format("woff2"), url("../fonts/trirong-extralight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
.footer-right {
  display: grid !important;
  grid-template-rows: 100% !important;
  justify-items: center !important;
  align-items: center !important;
}
.footer-right img {
  display: block !important;
  position: absolute;
  height: 64.2vh;
  width: 40%;
  object-fit: cover;
  bottom: 0;
  right: 0;
  z-index: 1 !important;
}

.footer-glass {
  background: linear-gradient(127deg, #A7CBD5, rgba(224, 251, 252, 0.2274509804)) !important;
  background-size: auto, contain, auto !important;
  height: 65vh;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
  display: grid;
  grid-template-columns: 1fr !important;
  place-content: center center !important;
  padding-top: 0rem !important;
  padding-left: 0rem !important;
}
.footer-glass::before {
  content: " " !important;
  position: absolute !important;
  top: -4rem !important;
  left: 0 !important;
  width: 54% !important;
  height: 100vh !important;
  border-bottom-right-radius: 100% !important;
  background: linear-gradient(5deg, rgba(167, 201, 213, 0.4666666667) 0%, rgba(167, 203, 213, 0.4666666667) 75%, rgba(167, 203, 213, 0.4666666667) 100%) !important;
  backdrop-filter: blur(3rem) !important;
  background-clip: border-box !important;
  z-index: -1 !important;
  animation: move-up 2s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
.footer-glass::after {
  content: " " !important;
  position: absolute !important;
  bottom: 0rem !important;
  right: 0 !important;
  width: 39% !important;
  height: 70vh !important;
  border-top-left-radius: 100% !important;
  background: linear-gradient(125deg, rgba(167, 203, 213, 0.4392156863) 0%, rgba(167, 203, 213, 0.4392156863) 75%, rgba(167, 203, 213, 0.4392156863) 100%) !important;
  backdrop-filter: blur(0rem) !important;
  background-clip: border-box !important;
  z-index: -10000000000000000 !important;
  animation: move-up 4s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}

footer-content {
  width: 100%;
  text-align: center;
  color: #222;
}

.footer-content h2 {
  font-family: "antic didone";
  font-weight: 500 !important;
  font-size: 5.3rem !important;
  color: #091818;
  padding: 0 0 0 0 !important;
  margin: 2rem 0rem 0rem 3rem !important;
  text-align: start !important;
  line-height: 5.3rem !important;
}

.social-icons {
  list-style: none !important;
  display: flex;
  justify-content: flex-start;
  gap: 0.8rem !important;
  margin-left: 2.6rem !important;
  padding-top: 0.4rem !important;
}

.social-icons li a {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-size: 1.7rem;
  box-shadow: 0 2px 12px rgba(90, 120, 255, 0.1);
  transition: background 0.2s, transform 0.2s;
  display: inline-block !important;
  text-align: center !important;
  margin: 0 !important;
  padding-top: 0.99rem !important;
}

.social-icons li a:hover {
  background: linear-gradient(120deg, #b1f3fa 40%, #e1c1fe 100%);
  transform: scale(1.1);
  color: #014d57;
}

#footer2 {
  width: 100% !important;
  height: 10vh !important;
  position: relative !important;
  background: linear-gradient(127deg, #A7CBD5, rgba(224, 251, 252, 0.2274509804)) !important;
  backdrop-filter: blur(1rem) !important;
  background-clip: padding-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 0.5rem !important;
  margin-top: 2.2rem !important;
  z-index: 1 !important;
}
#footer2 .footer-D {
  position: absolute !important;
  display: flex !important;
  justify-content: space-between !important;
}
#footer2 .footer-D h3 {
  font-family: "trirong thin" !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #091818 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  text-transform: uppercase;
}
#footer2 .footer-D h3:nth-child(2) {
  font-size: 1.8rem !important;
  color: rgb(1, 42, 46) !important;
  text-align: center !important;
  z-index: 999999999 !important;
  margin-top: -0.7rem !important;
}

/*VARIABLES*/
@font-face {
  font-family: "trirong thin";
  src: url("../fonts/trirong-thin-webfont.woff2") format("woff2"), url("../fonts/trirong-thin-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "antic didone";
  src: url("../fonts/anticdidone-regular-webfont.woff2") format("woff2"), url("../fonts/anticdidone-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "italiana";
  src: url("../fonts/italiana-regular-webfont.woff2") format("woff2"), url("../fonts/italiana-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
.error-page {
  display: grid;
  height: 100vh !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
  overflow: hidden !important;
  background: linear-gradient(120deg, #e0e7ff 0%, #f9fafb 60%, #ffe0f1 100%);
  grid-template-columns: 2fr 1fr !important;
  grid-gap: 3rem !important;
}
.error-page .error-left h1 {
  font-family: "trirong thin" !important;
  font-size: 3.7rem !important;
  font-weight: 600 !important;
  color: #091818;
  line-height: 1.3 !important;
  padding: 2rem 1.3rem 1rem 1.3rem !important;
  margin: 1rem !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(0.5rem) !important;
  background-clip: padding-box !important;
  color: #091818;
  width: 100% !important;
  height: 350px !important;
  position: relative !important;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid transparent rgb(255, 255, 255);
  border-radius: 20px !important;
}
.error-page .error-left a {
  text-decoration: none;
  color: #091818;
  border: 1px solid #013d49;
  display: inline-block;
  padding: 1.3rem 0 !important;
  width: 11.9rem !important;
  position: absolute;
  margin-top: 1rem !important;
  margin-left: 1.8rem !important;
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center !important;
  z-index: 1;
  transition: 1s;
}
.error-page .error-left a span {
  width: 0%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(0rem);
  background-clip: padding-box;
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.1);
  border: 0 solid transparent;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: 1s;
}
.error-page .error-left .btn-1 a:hover span {
  width: 100%;
  padding: 0;
}
.error-page .error-left .btn-1 a:hover {
  color: rgb(1, 30, 30);
  font-family: "trirong thin";
  font-weight: 600;
  text-align: center;
  font-size: 1.5rem;
  margin-top: 0;
  cursor: pointer;
}
.error-page .error-right {
  padding: 0 0 0.5rem 0.5rem !important;
  height: 100vh !important;
  width: 100% !important;
  border-radius: 30px !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 100% !important;
  place-content: start center !important;
}
.error-page .error-right video {
  position: absolute !important;
  height: 100vh !important;
  width: 96% !important;
  object-fit: contain !important;
  border-radius: 25px !important;
  padding: 1rem !important;
}

/* Elegant Blog Post CSS - 2025 Trends */
/* ----------- Root Variables for Easy Theme Change ----------- */
:root {
  --primary-bg: rgba(245, 248, 255, 0.98);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --accent: #234284;
  --text-main: #3b3b3b;
  --text-muted: #8590ad;
  --shadow: 0 4px 32px 0 rgba(54, 80, 255, 0.05), 0 1.5px 4px 0 rgba(21, 40, 88, 0.08);
}

/* Font faces omitted for brevity; retain as is */
/* ----------- Overall Article Styling ----------- */
article {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  background: linear-gradient(50deg, rgba(255, 255, 255, 0.95) 35%, rgba(224, 231, 255, 0.7) 100%);
  color: var(--text-main);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* ----------- Glassmorphic Profile Container ----------- */
.profile-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  backdrop-filter: blur(15px) saturate(140%);
  border: var(--border);
  padding: 2.5rem;
  margin-bottom: 2rem;
  align-items: flex-start;
  border-radius: 2rem;
  box-sizing: border-box;
}

/* ----------- Image and Video ----------- */
.profile-picture {
  min-width: 200px;
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem !important;
}

.profile-picture img {
  width: 300px;
  height: 300px;
  margin: 2.2rem !important;
  padding: 0.2rem !important;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #f6d7b1;
  box-shadow: 0 3px 30px 0 rgba(68, 106, 234, 0.09);
  transition: transform 0.2s;
  max-width: 75vw;
  max-height: 75vw;
}

.profile-picture img:hover {
  transform: scale(1.045) rotate(5deg);
}

.profile-picture video {
  width: 280px;
  border-radius: 22px;
  box-shadow: 0 2px 12px rgba(34, 66, 132, 0.09);
  border: 2px solid #e8fcff;
  background: #fafaff;
  max-width: 75vw;
}

/* ----------- Main Text and Header ---------- */
.profile-header {
  flex: 2 1 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-header h2 {
  font-family: "antic didone" !important;
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 1.1px;
  line-height: 1.12;
  color: #010b27 !important;
  margin-bottom: 0.8rem;
  padding: 1.2rem 0.2rem !important;
  word-break: break-word;
}

.profile-header p {
  font-size: 1.8rem;
  font-family: "trirong thin" !important;
  font-weight: 700;
  line-height: 1.27;
  margin: 1rem 0;
  padding: 1.5rem !important;
  color: var(--text-main);
  letter-spacing: 0.04em;
  word-break: break-word;
}

.profile-header ul {
  margin: 0.6rem 0 !important;
  padding: 0.6rem 0 !important;
}

.profile-header ul li {
  font-size: 1.4rem;
  color: rgb(2, 35, 41) !important;
  font-family: "trirong thin" !important;
  font-weight: 600 !important;
  margin-bottom: 0.2rem !important;
  margin-left: 1.5rem !important;
  padding: 0.3rem 0 !important;
  display: block !important;
  word-break: break-word;
}

/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  article {
    padding: 1.5rem !important; /* Reduced padding */
  }
  .profile-container {
    gap: 1.5rem !important; /* Smaller gap */
    padding: 1.8rem !important; /* Reduced padding */
    border-radius: 1.5rem !important; /* Slightly smaller border radius */
    flex-direction: column !important; /* Stack elements vertically */
    align-items: center !important;
  }
  .profile-picture {
    min-width: 150px !important; /* Smaller minimum width */
    flex: 1 1 100% !important; /* Full width */
    gap: 0.8rem !important; /* Smaller gap */
  }
  .profile-picture img {
    width: 200px !important; /* Smaller image size */
    height: 200px !important;
    margin: 1.5rem !important; /* Reduced margin */
    padding: 0.1rem !important;
    border-width: 2px !important; /* Thinner border */
    max-width: 80vw !important; /* Adjusted max width */
    max-height: 80vw !important;
  }
  .profile-picture video {
    width: 200px !important; /* Smaller video size */
    border-radius: 16px !important; /* Smaller border radius */
    max-width: 80vw !important;
  }
  .profile-header {
    flex: 1 1 100% !important; /* Full width */
    text-align: center !important; /* Center text */
  }
  .profile-header h2 {
    font-size: 2rem !important; /* Smaller heading */
    padding: 0.8rem 0.1rem !important;
    margin-bottom: 0.6rem !important;
  }
  .profile-header p {
    font-size: 6.2rem !important; /* Smaller paragraph */
    margin: 0.8rem 0 !important;
    padding: 0.4rem 0 !important;
  }
  .profile-header ul {
    margin: 0.6rem 0 !important;
    padding: 0.6rem 0 !important;
  }
  .profile-header ul li {
    font-size: 0.95rem !important; /* Smaller list font */
    margin-left: 1rem !important;
    margin-bottom: 0.3rem !important;
    padding: 0.2rem 0 !important;
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (max-width: 37.5em) {
  article {
    width: 100% !important;
    height: 100% !important;
    padding: 1rem !important; /* Minimal padding */
  }
  article .profile-container {
    gap: 1rem !important; /* Tighter gap */
    padding: 1.2rem !important; /* Minimal padding */
    border-radius: 1rem !important; /* Smaller border radius */
    flex-direction: column !important;
    align-items: center !important;
  }
  article .profile-picture {
    min-width: 200px !important; /* Smaller minimum width */
    flex: 1 1 100% !important;
    gap: 0.5rem !important; /* Tighter gap */
  }
  article .profile-picture img {
    width: 190px !important; /* Smaller image size */
    height: 190px !important;
    margin: 1rem !important; /* Minimal margin */
    padding: 0.1rem !important;
    border-width: 1.5px !important; /* Thinner border */
    max-width: 90vw !important; /* Adjusted max width */
    max-height: 90vw !important;
  }
  article .profile-picture video {
    width: 200px !important; /* Smaller video size */
    border-radius: 12px !important; /* Smaller border radius */
    max-width: 90vw !important;
  }
  article .profile-header {
    flex: 1 1 100% !important;
    text-align: center !important;
  }
  article .profile-header h2 {
    font-size: 5rem !important; /* Smaller heading */
    padding: 0.6rem 0.1rem !important;
    margin-bottom: 0.4rem !important;
  }
  article .profile-header p {
    font-size: 6rem !important; /* Smaller paragraph */
    margin: 0.5rem 0 !important;
    padding: 0.3rem 0 !important;
  }
  article .profile-header ul {
    margin: 0.4rem 0 !important;
    padding: 0.4rem 0 !important;
  }
  article .profile-header ul li {
    font-size: 1rem !important; /* Smaller list font */
    margin-left: 0.8rem !important;
    margin-bottom: 0.2rem !important;
    padding: 0.1rem 0 !important;
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  #aboutUs {
    height: 80vh !important;
    background-size: contain !important; /* Adjust image size for better fit */
    background-position: top center !important; /* Shift focus to top for visibility */
  }
  .aboutUs {
    height: 80vh !important;
    grid-template-columns: 90% !important; /* Slightly reduce width for better margins */
  }
  .aboutUs h1 {
    font-size: 1.8rem !important; /* Smaller font size for tablets */
    padding: 0.8rem !important; /* Reduce padding */
    margin-top: 4rem !important; /* Adjust margin for better spacing */
    margin-bottom: -1rem !important;
    backdrop-filter: blur(0.8rem) !important; /* Slightly less blur for performance */
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (max-width: 37.5em) {
  #aboutUs {
    height: 90vh !important; /* Shorter height for mobile */
    background-size: cover !important; /* Ensure image fits within viewport */
    background-position: top center !important;
  }
  .aboutUs {
    height: 60vh !important;
    grid-template-columns: 80% !important; /* Further reduce width for mobile */
  }
  .aboutUs h1 {
    font-size: 2rem !important; /* Smaller font for mobile readability */
    padding: 0.6rem !important; /* Tighter padding */
    margin-top: -2.5rem !important; /* Reduced margin for compact layout */
    margin-bottom: 8rem !important;
    border-width: 1px !important; /* Thinner border for smaller screens */
    backdrop-filter: blur(0.6rem) !important; /* Optimize blur for mobile performance */
  }
}
/* Elegant Blog Post CSS - 2025 Trends */
/* ----------- Root Variables for Easy Theme Change ----------- */
:root {
  --primary-bg: rgba(245, 248, 255, 0.98);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --accent: #234284;
  --text-main: #3b3b3b;
  --text-muted: #8590ad;
  --shadow: 0 4px 32px 0 rgba(54, 80, 255, 0.05), 0 1.5px 4px 0 rgba(21, 40, 88, 0.08);
  --radius: 28px;
  --border: 0.5px solid rgba(131, 145, 169, 0.10);
  --highlight: linear-gradient(90deg, #ffdbad 0, #e8fcff 100%);
  --font-header: "Satoshi", "Segoe UI", "Montserrat", sans-serif;
  --font-body: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
}

@font-face {
  font-family: "antic didone";
  src: url("../fonts/anticdidone-regular-webfont.woff2") format("woff2"), url("../fonts/anticdidone-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "trirong thin";
  src: url("../fonts/trirong-thin-webfont.woff2") format("woff2"), url("../fonts/trirong-thin-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "trirong light";
  src: url("../fonts/trirong-light-webfont.woff2") format("woff2"), url("../fonts/trirong-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "trirong extralight";
  src: url("../fonts/trirong-extralight-webfont.woff2") format("woff2"), url("../fonts/trirong-extralight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/* ----------- Overall Article Styling ----------- */
article {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  background: linear-gradient(50deg, rgba(255, 255, 255, 0.95) 35%, rgba(224, 231, 255, 0.7) 100%);
  color: var(--text-main);
  position: relative;
  z-index: 1;
}

/* ----------- Glassmorphic Profile Container ----------- */
.profile-container {
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(50deg, rgba(255, 255, 255, 0.95) 35%, rgba(224, 231, 255, 0.7) 100%);
  gap: 2.5rem;
  align-items: flex-start;
}

/* ----------- Image and Video ----------- */
.profile-picture {
  min-width: 330px;
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.profile-picture img {
  width: 310px;
  height: 310px;
  object-fit: cover;
  border-radius: 50%;
  border: 3.5px solid #f6d7b1;
  box-shadow: 0 3px 30px 0 rgba(68, 106, 234, 0.09);
  transition: transform 0.2s;
}

.profile-picture img:hover {
  transform: scale(1.045) rotate(5deg);
}

.profile-video {
  width: 100% !important;
  max-width: 850px !important;
  height: 450px !important;
  border-radius: 8px;
  background: #fafaff;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----------- Main Text and Header ---------- */
.profile-header {
  flex: 2 1 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Profile-content h2 {
  font-family: "antic didone" !important;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.15;
  color: #010b27 !important;
  margin-bottom: 0.8rem;
  text-align: center !important;
}

.Profile-content p {
  font-size: 2rem;
  font-weight: 600;
  font-family: "trirong thin";
  line-height: 1.2;
  margin-bottom: 1.2rem;
  color: var(--text-main);
  letter-spacing: 0.02em;
  padding: 1.5rem !important;
  margin: 1rem !important;
}

/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  article {
    padding: 0.8rem !important; /* Slightly reduced padding */
  }
  .profile-container {
    gap: 1.5rem !important; /* Smaller gap between elements */
    flex-direction: column !important; /* Stack elements vertically */
    align-items: center !important;
  }
  .profile-picture {
    min-width: 200px !important; /* Allow smaller minimum width */
    flex: 1 1 100% !important; /* Full width for profile picture */
  }
  .profile-picture img {
    width: 220px !important; /* Smaller image size for tablets */
    height: 220px !important;
    border-width: 2.5px !important; /* Thinner border */
  }
  .profile-video {
    max-width: 100% !important; /* Full width video */
    height: 300px !important; /* Adjusted height for tablets */
  }
  .profile-header {
    flex: 1 1 100% !important; /* Full width for header */
    text-align: center !important;
  }
  .Profile-content h2 {
    font-size: 1.8rem !important; /* Smaller header font */
    margin-bottom: 0.6rem !important;
  }
  .Profile-content p {
    font-size: 1.4rem !important; /* Smaller paragraph font */
    padding: 1rem !important; /* Reduced padding */
    margin: 0.8rem !important;
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (max-width: 37.5em) {
  article {
    padding: 0.5rem !important;
    min-height: 120vh !important; /* allow page to grow with content */
    padding-bottom: 3rem !important; /* extra space at bottom so final text isn't cut off */
  }
  .profile-container {
    gap: 1rem !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 120vh !important; /* allow container to expand */
    padding-bottom: 3rem !important; /* extra spacing for content overflow */
  }
  .profile-picture {
    min-width: 250px !important;
    flex: 1 1 100% !important;
  }
  .profile-picture img {
    width: 250px !important;
    height: 150px !important;
    border-width: 2px !important;
    box-shadow: 0 2px 20px 0 rgba(68, 106, 234, 0.07) !important;
  }
  .profile-video {
    max-width: 100% !important;
    height: 200px !important;
    border-radius: 6px !important;
  }
  .profile-header {
    flex: 1 1 100% !important;
  }
  .Profile-content h2 {
    font-size: 2.4rem !important;
    margin-bottom: 0.5rem !important;
  }
  .Profile-content p {
    font-size: 1.2rem !important;
    padding: 0.8rem !important;
    margin: 0.5rem !important;
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  .footer-right img {
    height: 50vh !important; /* Smaller image height */
    width: 50% !important; /* Wider image to maintain visibility */
    object-fit: contain !important; /* Ensure full image visibility */
  }
  .footer-glass {
    height: 50vh !important; /* Reduced height for tablets */
    aspect-ratio: 4/3 !important; /* Adjusted aspect ratio */
  }
  .footer-glass::before {
    width: 60% !important; /* Wider pseudo-element for better coverage */
    height: 80vh !important;
    backdrop-filter: blur(2rem) !important; /* Reduced blur for performance */
  }
  .footer-glass::after {
    width: 45% !important;
    height: 50vh !important;
    backdrop-filter: blur(0rem) !important;
  }
  .footer-content h2 {
    font-size: 3.5rem !important; /* Smaller font size */
    line-height: 3.5rem !important;
    margin: 1.5rem 0rem 0rem 2rem !important; /* Adjusted margins */
  }
  .social-icons {
    gap: 0.6rem !important; /* Smaller gap */
    margin-left: 2rem !important;
    padding-top: 0.3rem !important;
  }
  .social-icons li a {
    width: 38px !important; /* Smaller icons */
    height: 38px !important;
    font-size: 1.4rem !important;
    padding-top: 0.8rem !important;
  }
  #footer2 {
    height: 8vh !important; /* Shorter footer */
    margin-top: 1.5rem !important;
    padding-bottom: 0.3rem !important;
  }
  #footer2 .footer-D h3 {
    font-size: 0.9rem !important; /* Smaller font */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #footer2 .footer-D h3:nth-child(2) {
    font-size: 1.4rem !important;
    margin-top: -0.5rem !important;
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (min-width: 37.5em) and (max-width: 37.7em) {
  .footer-right img {
    height: 60vh !important; /* Further reduced image height */
    width: 100% !important; /* Wider for small screens */
    object-fit: cover !important;
    right: -9.7rem !important;
    z-index: -1 !important;
  }
  .footer-glass {
    height: 62vh !important; /* Compact height for mobile */
    aspect-ratio: 3/2 !important; /* Adjusted for mobile */
  }
  .footer-glass::before {
    width: 70% !important; /* Wider pseudo-element */
    height: 60vh !important;
    backdrop-filter: blur(1.5rem) !important; /* Further reduced blur */
  }
  .footer-glass::after {
    width: 50% !important;
    height: 40vh !important;
    backdrop-filter: blur(0rem) !important;
  }
  .footer-content h2 {
    font-size: 5.4rem !important;
    line-height: 4.8rem !important;
    margin: 0 0 0 0.4rem !important;
    position: relative !important;
    top: 42% !important; /* pulls the heading up */
    transform: translateY(-40%) !important;
  }
  .social-icons {
    position: relative;
    gap: 0.5rem !important; /* Tighter gap */
    left: -6rem !important;
    top: 7rem !important;
    justify-content: center !important; /* Center icons for mobile */
  }
  .social-icons li a {
    width: 45px !important; /* Smaller icons */
    height: 45px !important;
    font-size: 1.7rem !important;
  }
  #footer2 {
    height: 12vh !important; /* Minimal footer height */
    top: 8.2rem !important;
    margin-bottom: 0rem !important;
    padding-bottom: 0.2rem !important;
  }
  #footer2 .footer-D {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important; /* horizontally center children */
    align-items: center !important; /* vertically center children */
    width: 100% !important;
  }
  #footer2 .footer-D h3 {
    position: relative !important;
    width: auto !important;
    font-size: 1rem !important;
    margin: 0 !important; /* reset margins so centering works */
    text-align: center !important; /* center text inside the h3 */
    right: -1.5rem !important; /* remove previous offset */
    left: -0.3rem !important;
    top: 0rem !important; /* pulled up a bit */
  }
  #footer2 .footer-D h3:nth-child(2) {
    font-size: 1.6rem !important;
    margin-top: 0rem !important;
  }
}
/* Media Query for Mobile Phones (400px and below) */
@media screen and (max-width: 25em) {
  .footer-right img {
    height: 60vh !important; /* Further reduced image height */
    width: 100% !important; /* Wider for small screens */
    object-fit: cover !important;
    right: -9.7rem !important;
    z-index: -1 !important;
  }
  .footer-glass {
    height: 62vh !important; /* Compact height for mobile */
    aspect-ratio: 3/2 !important; /* Adjusted for mobile */
  }
  .footer-glass::before {
    width: 70% !important; /* Wider pseudo-element */
    height: 60vh !important;
    backdrop-filter: blur(1.5rem) !important; /* Further reduced blur */
  }
  .footer-glass::after {
    width: 50% !important;
    height: 40vh !important;
    backdrop-filter: blur(0rem) !important;
  }
  .footer-content h2 {
    font-size: 5.4rem !important;
    line-height: 4.8rem !important;
    margin: 0 0 0 0.4rem !important;
    position: relative !important;
    top: 42% !important; /* pulls the heading up */
    transform: translateY(-40%) !important;
  }
  .social-icons {
    position: relative;
    gap: 0.5rem !important; /* Tighter gap */
    left: -6rem !important;
    top: 7rem !important;
    justify-content: center !important; /* Center icons for mobile */
  }
  .social-icons li a {
    width: 45px !important; /* Smaller icons */
    height: 45px !important;
    font-size: 1.7rem !important;
  }
  #footer2 {
    height: 12vh !important; /* Minimal footer height */
    top: 7rem !important;
    margin-bottom: 0rem !important;
    padding-bottom: 0.2rem !important;
  }
  #footer2 .footer-D {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important; /* horizontally center children */
    align-items: center !important; /* vertically center children */
    width: 100% !important;
  }
  #footer2 .footer-D h3 {
    position: relative !important;
    width: auto !important;
    font-size: 1rem !important;
    margin: 0 !important; /* reset margins so centering works */
    text-align: center !important; /* center text inside the h3 */
    right: -1.5rem !important; /* remove previous offset */
    left: -0.3rem !important;
    top: -0.7rem !important; /* pulled up a bit */
  }
  #footer2 .footer-D h3:nth-child(2) {
    font-size: 1.6rem !important;
    margin-top: 0rem !important;
  }
}
/* Media Query for Tablets (768px and below) */
/* Media Query for Mobile Phones (480px and below) */
@media screen and (min-width: 37.5em) and (max-width: 37.7em) {
  #Gallery {
    height: 78vh !important;
    width: 100% !important;
    position: relative !important;
    background: linear-gradient(127deg, #aab8c2, #F9FAF5) !important;
    z-index: 1;
    aspect-ratio: 16/10 !important;
    overflow: hidden !important;
  }
  #Gallery .Gallery {
    height: 78vh !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 98.8% !important;
    place-content: center !important;
  }
  #Gallery .Gallery h1 {
    font-family: "antic didone";
    font-weight: 500 !important;
    font-size: 2rem !important;
    color: #091818;
    padding: 0.3rem !important;
    line-height: 2.4rem !important;
    margin-bottom: 0.4rem !important;
    margin-top: -1.7rem !important;
  }
  #Gallery .Gallery .image-box {
    margin: 0 1% !important;
    flex-grow: 1 !important;
    flex-basis: 0 !important;
    transition: 1s !important;
    position: relative !important;
  }
  #Gallery .Gallery .image-box img {
    width: 100% !important;
    height: 136.5% !important;
    object-fit: cover !important;
    transition: 1s !important;
  }
  #Gallery .overlay {
    width: 100% !important;
    height: 27vh !important;
    position: absolute !important;
    top: 0% !important;
    cursor: pointer;
    background: linear-gradient(rgba(12, 34, 48, 0.2), rgba(1, 7, 8, 0.9));
    opacity: 0 !important;
    transition: 1s !important;
  }
  #Gallery .overlay:hover {
    opacity: 1 !important;
  }
  #Gallery .overlay h2 {
    color: rgb(255, 255, 255) !important;
    font-family: "antic didone" !important;
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    padding: 2rem !important;
  }
  #Gallery .overlay p {
    color: white !important;
    font-family: "trirong thin" !important;
    font-weight: 600 !important;
    font-size: 1.7rem !important;
    position: absolute !important;
    top: 69% !important;
    transform: translateY(-31%);
  }
}
/* Media Query for Mobile Phones (400px and below) */
@media screen and (max-width: 25em) {
  #Gallery {
    height: 87vh !important;
    width: 100% !important;
    position: relative !important;
    background: linear-gradient(127deg, #aab8c2, #F9FAF5) !important;
    z-index: 1;
    aspect-ratio: 16/10 !important;
    overflow: hidden !important;
  }
  #Gallery .Gallery {
    height: 86vh !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 98.8% !important;
    place-content: center !important;
  }
  #Gallery .Gallery h1 {
    font-family: "antic didone";
    font-weight: 500 !important;
    font-size: 2rem !important;
    color: #091818;
    padding: 0.3rem !important;
    line-height: 2.4rem !important;
    margin-bottom: 0.4rem !important;
    margin-top: 0 !important;
  }
  #Gallery .Gallery .image-box {
    margin: 0 1% !important;
    flex-grow: 1 !important;
    flex-basis: 0 !important;
    transition: 1s !important;
    position: relative !important;
  }
  #Gallery .Gallery .image-box img {
    width: 100% !important;
    height: 146% !important;
    object-fit: cover !important;
    transition: 1s !important;
  }
  #Gallery .overlay {
    width: 100% !important;
    height: 35vh !important;
    position: absolute !important;
    top: 0% !important;
    cursor: pointer;
    background: linear-gradient(rgba(12, 34, 48, 0.2), rgba(1, 7, 8, 0.9));
    opacity: 0 !important;
    transition: 1s !important;
  }
  #Gallery .overlay:hover {
    opacity: 1 !important;
  }
  #Gallery .overlay h2 {
    color: rgb(255, 255, 255) !important;
    font-family: "antic didone" !important;
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    padding: 2rem !important;
  }
  #Gallery .overlay p {
    color: white !important;
    font-family: "trirong thin" !important;
    font-weight: 600 !important;
    font-size: 1.7rem !important;
    position: absolute !important;
    top: 69% !important;
    transform: translateY(-31%);
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  #testimonial-section {
    height: 100vh !important; /* Reduced height for tablets */
    aspect-ratio: 4/3 !important; /* Adjusted aspect ratio */
  }
  #testimonial-section::before {
    width: 60% !important; /* Wider pseudo-element */
    height: 80vh !important;
    backdrop-filter: blur(2rem) !important; /* Reduced blur for performance */
  }
  #testimonial-section::after {
    width: 45% !important;
    height: 50vh !important;
    backdrop-filter: blur(0.8rem) !important;
  }
  .testimonial-section h2 {
    font-size: 2.1rem !important; /* Smaller font size */
    padding-top: 3rem !important;
  }
  .testimonial-section .testimony {
    width: 95% !important; /* Slightly wider for better fit */
    max-width: 600px !important;
    padding-top: 0.5rem !important;
  }
  .testimonial-section .testimony .testimonial-text {
    height: 250px !important; /* Smaller testimonial box */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15) !important; /* Lighter shadow */
  }
  .testimonial-section .testimony .user-text {
    font-size: 1.4rem !important; /* Smaller font */
    line-height: 24px !important;
    width: 85% !important;
  }
  .testimonial-section .testimony .user-text.fas {
    font-size: 24px !important;
    margin-bottom: 30px !important;
    margin-top: 15px !important;
  }
  .testimonial-section .testimony .user-text .ceoName {
    font-size: 1.4rem !important;
    margin-top: 15px !important;
  }
  .testimonial-section .testimony .testimonial-pic {
    margin-bottom: 1.5rem !important;
  }
  .testimonial-section .testimony .user-pic {
    width: 45px !important; /* Smaller profile picture */
    padding: 6px !important;
  }
  .testimonial-section .testimony .user-pic.active-pic {
    width: 50px !important;
    padding: 0.8rem !important;
    margin-top: 0.2rem !important;
  }
  .testimonial-right img {
    height: 70vh !important; /* Smaller image height */
    width: 50% !important; /* Wider for better visibility */
    object-fit: contain !important; /* Ensure full image visibility */
    right: -1rem !important;
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (min-width: 37.5em) and (max-width: 37.7em) {
  #testimonial-section {
    height: 68vh !important; /* Further reduced height */
    aspect-ratio: 3/2 !important; /* Adjusted for mobile */
  }
  #testimonial-section::before {
    width: 70% !important; /* Wider pseudo-element */
    height: 60vh !important;
    backdrop-filter: blur(1.5rem) !important; /* Further reduced blur */
  }
  #testimonial-section::after {
    width: 50% !important;
    height: 40vh !important;
    backdrop-filter: blur(0.5rem) !important;
  }
  .testimonial-section {
    margin-top: 1.8rem !important; /* moved down by ~5rem */
  }
  .testimonial-section h2 {
    font-size: 2.7rem !important; /* Smaller font */
    font-weight: 600 !important;
    margin-top: -2.8rem !important;
  }
  .testimonial-section .testimony {
    width: 90% !important;
    max-width: 400px !important;
    padding-top: 0.3rem !important;
  }
  .testimonial-section .testimony .testimonial-text {
    height: 340px !important; /* Smaller testimonial box */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1) !important; /* Lighter shadow */
  }
  .testimonial-section .testimony .user-text {
    font-size: 1.6rem !important; /* Smaller font */
    font-weight: 600 !important;
    line-height: 20px !important;
    width: 80% !important;
  }
  .testimonial-section .testimony .user-text.fas {
    font-size: 20px !important;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
  }
  .testimonial-section .testimony .user-text .ceoName {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
  }
  .testimonial-section .testimony .testimonial-pic {
    margin-bottom: -3.5rem !important;
  }
  .testimonial-section .testimony .user-pic {
    position: relative !important;
    width: 35px !important; /* Smaller profile picture */
    padding: 4px !important;
    left: 6.9rem !important;
    z-index: 99 !important;
  }
  .testimonial-section .testimony .user-pic.active-pic {
    width: 40px !important;
    padding: 0.6rem !important;
    margin-top: 0.1rem !important;
  }
  .testimonial-right img {
    height: 50vh !important; /* Further reduced image height */
    width: 70% !important; /* Wider for small screens */
    object-fit: cover !important;
    right: -8rem !important;
    top: 7rem !important;
    z-index: -1 !important;
  }
}
/* Media Query for Mobile Phones (400px and below) */
@media screen and (max-width: 25em) {
  #testimonial-section {
    height: 84vh !important; /* Further reduced height */
    aspect-ratio: 3/2 !important; /* Adjusted for mobile */
  }
  #testimonial-section::before {
    width: 70% !important; /* Wider pseudo-element */
    height: 60vh !important;
    backdrop-filter: blur(1.5rem) !important; /* Further reduced blur */
  }
  #testimonial-section::after {
    width: 50% !important;
    height: 40vh !important;
    backdrop-filter: blur(0.5rem) !important;
  }
  .testimonial-section {
    margin-top: 1.8rem !important; /* moved down by ~5rem */
  }
  .testimonial-section h2 {
    font-size: 2.7rem !important; /* Smaller font */
    font-weight: 600 !important;
    margin-top: -2.8rem !important;
  }
  .testimonial-section .testimony {
    width: 90% !important;
    max-width: 400px !important;
    padding-top: 0.3rem !important;
    margin-top: 1rem !important;
  }
  .testimonial-section .testimony .testimonial-text {
    height: 340px !important; /* Smaller testimonial box */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1) !important; /* Lighter shadow */
  }
  .testimonial-section .testimony .user-text {
    font-size: 1.6rem !important; /* Smaller font */
    font-weight: 600 !important;
    line-height: 20px !important;
    width: 80% !important;
  }
  .testimonial-section .testimony .user-text.fas {
    font-size: 20px !important;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
  }
  .testimonial-section .testimony .user-text .ceoName {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    margin-top: 10px !important;
  }
  .testimonial-section .testimony .testimonial-pic {
    top: 2rem !important; /* push down by 1rem */
    margin-bottom: 0 !important; /* remove negative bottom margin */
  }
  .testimonial-section .testimony .user-pic {
    position: relative !important;
    width: 35px !important; /* Smaller profile picture */
    padding: 4px !important;
    left: 6.9rem !important;
    z-index: 99 !important;
  }
  .testimonial-section .testimony .user-pic.active-pic {
    width: 40px !important;
    padding: 0.6rem !important;
    margin-top: -0.6rem !important;
  }
  .testimonial-right img {
    height: 65.9vh !important; /* Further reduced image height */
    width: 70% !important; /* Wider for small screens */
    object-fit: cover !important;
    right: -8rem !important;
    top: 4rem !important;
    z-index: -1 !important;
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  #continuous-scroll .cont-scroll {
    height: 12vh !important; /* Reduced height for tablets */
    border-top: 4px solid #122023 !important; /* Thinner border */
    border-bottom: 4px solid #122023 !important;
  }
  #continuous-scroll .cont-scroll div {
    height: 15vh !important; /* Adjusted container height */
  }
  #continuous-scroll .cont-scroll div:nth-child(2) {
    clip-path: circle(120px at center) !important; /* Smaller clip-path circle */
  }
  #continuous-scroll .cont-scroll div h1 {
    font-size: 2rem !important; /* Smaller font size */
    top: -150px !important; /* Adjusted positioning */
    animation: animate 30s linear infinite !important; /* Faster animation for smaller screens */
  }
  #continuous-scroll .cont-scroll div:nth-child(2) h1 {
    -webkit-text-stroke: 1.5px !important; /* Thinner stroke */
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (max-width: 37.5em) {
  #continuous-scroll {
    --scroll-height: 10vh;
    --scroll-container-height: 20vh;
    --scroll-container-background: linear-gradient(127deg, #aabdc2 , #F9FAF5);
    --scroll-container-border-radius: circle(80px at center);
    --scroll-text-color: #091818;
    --scroll-text-size: 2.8rem;
    --scroll-text-stroke: 2px;
    --scroll-text-stroke-color: rgba(39, 27, 43, 0.592);
    --scroll-animation-duration: 46s;
  }
  #continuous-scroll .cont-scroll {
    position: relative !important;
    width: 100% !important;
    height: var(--scroll-height) !important;
    overflow: hidden !important;
    margin: 0;
    border-top: 6px solid #122023;
    border-bottom: 6px solid #122023;
  }
  #continuous-scroll .cont-scroll > div {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: var(--scroll-container-height) !important;
    background: var(--scroll-container-background);
  }
  #continuous-scroll .cont-scroll > div:nth-child(2) {
    background: var(--scroll-container-background);
    max-height: var(--scroll-container-height) !important;
    border-radius: var(--scroll-container-border-radius);
  }
  #continuous-scroll .cont-scroll > div h1 {
    position: absolute !important;
    top: 26% !important;
    left: 0 !important;
    transform: translateY(-74%);
    font-family: "antic didone";
    font-weight: 500;
    font-size: var(--scroll-text-size);
    color: var(--scroll-text-color);
    white-space: nowrap;
    line-height: normal;
    cursor: default;
    will-change: transform;
    animation: animate 30s linear infinite !important;
  }
  #continuous-scroll .cont-scroll > div:nth-child(2) h1 {
    -webkit-text-stroke: var(--scroll-text-stroke) !important;
    -webkit-text-stroke-color: var(--scroll-text-stroke-color) !important;
    color: transparent !important;
  }
}
@keyframes animate {
  0% {
    transform: translateX(-80%) translateY(-74%);
  }
  50% {
    transform: translateX(50%) translateY(-74%);
  }
  100% {
    transform: translateX(-90%) translateY(-74%);
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  #blog-list {
    height: 80vh !important; /* Reduced height for tablets */
    aspect-ratio: 4/3 !important; /* Adjusted aspect ratio */
  }
  #blog-list::before {
    width: 60% !important; /* Wider pseudo-element */
    height: 80vh !important;
    backdrop-filter: blur(2rem) !important; /* Reduced blur for performance */
  }
  #blog-list::after {
    width: 45% !important;
    height: 50vh !important;
    backdrop-filter: blur(0.8rem) !important;
  }
  #blog-list .card {
    height: 220px !important; /* Smaller card height */
    margin: 1.2rem !important; /* Reduced margin */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15) !important; /* Lighter shadow */
    border-width: 3px !important; /* Thinner border */
  }
  .blog-list {
    padding: 1.5rem !important; /* Reduced padding */
    flex-direction: column !important; /* Stack items vertically */
  }
  .blog-list li {
    flex-basis: 100% !important; /* Full width for list items */
    margin: 0.8rem !important;
  }
  .blog-list img {
    height: 40vh !important; /* Smaller image height */
    max-width: 100vw !important; /* Adjusted max width */
    border-radius: 4px !important;
  }
  .blog-list h1 {
    font-size: 2.5rem !important; /* Smaller font size */
    margin: 1.8rem auto -0.3rem !important;
  }
  .blog-list h2 {
    font-size: 1.5rem !important; /* Smaller heading */
    padding: 0.8rem !important;
    margin: 0.3rem 0 0 0 !important;
  }
  .blog-list p {
    font-size: 1.3rem !important; /* Smaller paragraph */
    padding: 0.4rem !important;
    margin: 0.3rem 0 0 0 !important;
  }
  .blog-list p small {
    font-size: 1.1rem !important; /* Smaller small text */
    padding: 0.4rem !important;
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (min-width: 37.5em) and (max-width: 37.7em) {
  #blog-list {
    height: 175vh !important;
    aspect-ratio: unset !important;
  }
  #blog-list .card-container {
    padding: 0.3rem !important;
    margin-bottom: 1rem !important;
  }
  #blog-list .card-container .card {
    height: 620px !important;
  }
  .blog-list {
    padding: 0.3rem !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .blog-list li {
    margin: 0.5rem 0 !important;
    flex-basis: 7% !important;
    max-width: 100% !important;
  }
  .blog-list img {
    height: 45vh !important;
    max-width: 100vw !important;
  }
  .blog-list h1 {
    font-size: 2.7rem !important;
    font-weight: 600 !important;
    margin: 1rem auto 0 !important;
  }
  .blog-list h2 {
    font-size: 1.9rem !important;
    padding: 0.4rem !important;
    text-align: center !important;
  }
  .blog-list p {
    font-size: 1.8rem !important;
    padding: 0.2rem !important;
    text-align: center !important;
  }
  .card-body p small {
    font-size: 1.4rem !important;
    padding: 0.2rem !important;
  }
  .card a {
    font-size: 3.88rem !important;
    padding: 2.3rem 2.8rem !important;
  }
}
/* Media Query for Mobile Phones (400px and below) */
@media screen and (max-width: 25em) {
  #blog-list {
    height: 235vh !important;
    aspect-ratio: unset !important;
  }
  #blog-list .card-container {
    padding: 0.3rem !important;
    margin-bottom: 1rem !important;
  }
  #blog-list .card-container .card {
    height: 620px !important;
  }
  .blog-list {
    padding: 0.3rem !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .blog-list li {
    margin: 0.5rem 0 !important;
    flex-basis: 7% !important;
    max-width: 100% !important;
  }
  .blog-list img {
    height: 45vh !important;
    max-width: 100vw !important;
  }
  .blog-list h1 {
    font-size: 2.7rem !important;
    font-weight: 600 !important;
    margin: 1rem auto 0 !important;
  }
  .blog-list h2 {
    font-size: 1.9rem !important;
    padding: 0.4rem !important;
    text-align: center !important;
  }
  .blog-list p {
    font-size: 1.8rem !important;
    padding: 0.2rem !important;
    text-align: center !important;
  }
  .card-body p small {
    font-size: 1.4rem !important;
    padding: 0.2rem !important;
  }
  .card a {
    font-size: 3.88rem !important;
    padding: 2.3rem 2.8rem !important;
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  .error-page {
    height: 80vh !important; /* Reduced height for tablets */
    grid-template-columns: 1fr !important; /* Single column layout */
    grid-gap: 1.5rem !important; /* Smaller gap */
  }
  .error-left h1 {
    font-size: 2.5rem !important; /* Smaller font size */
    height: 250px !important; /* Smaller container height */
    padding: 1.5rem 1rem 0.8rem 1rem !important; /* Reduced padding */
    margin: 0.8rem !important;
    border-radius: 15px !important; /* Smaller border radius */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15) !important; /* Lighter shadow */
    border-width: 1.5px !important; /* Thinner border */
  }
  .error-left a {
    width: 9rem !important; /* Smaller button width */
    padding: 1rem 0 !important;
    margin-top: 0.8rem !important;
    margin-left: 1.2rem !important;
    font-size: 1.2rem !important; /* Smaller font */
  }
  .error-left .btn-1 a:hover {
    font-size: 1.2rem !important;
  }
  .error-right {
    height: 40vh !important; /* Reduced height for video section */
    padding: 0 0 0.3rem 0.3rem !important; /* Reduced padding */
  }
  .error-right video {
    height: 40vh !important; /* Smaller video height */
    width: 100% !important; /* Full width */
    padding: 0.8rem !important;
    border-radius: 15px !important; /* Smaller border radius */
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (max-width: 480px) {
  .error-page {
    height: 60vh !important; /* Further reduced height */
    grid-template-columns: 1fr !important;
    grid-gap: 1rem !important; /* Tighter gap */
  }
  .error-left h1 {
    font-size: 1.8rem !important; /* Smaller font size */
    height: 200px !important; /* Smaller container height */
    padding: 1rem 0.8rem 0.6rem 0.8rem !important; /* Minimal padding */
    margin: 0.5rem !important;
    border-radius: 10px !important; /* Smaller border radius */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1) !important; /* Lighter shadow */
    border-width: 1px !important; /* Thinner border */
  }
  .error-left a {
    width: 7rem !important; /* Smaller button width */
    padding: 0.8rem 0 !important;
    margin-top: 0.5rem !important;
    margin-left: 0.8rem !important;
    font-size: 1rem !important; /* Smaller font */
  }
  .error-left .btn-1 a:hover {
    font-size: 1rem !important;
  }
  .error-right {
    height: 30vh !important; /* Further reduced height */
    padding: 0 0 0.2rem 0.2rem !important; /* Minimal padding */
  }
  .error-right video {
    height: 30vh !important; /* Smaller video height */
    width: 100% !important;
    padding: 0.5rem !important;
    border-radius: 10px !important; /* Smaller border radius */
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 48em) {
  ::-webkit-scrollbar {
    width: 0.8rem !important; /* Thinner scrollbar */
  }
  ::-webkit-scrollbar-track {
    border-radius: 0.8rem !important;
    margin-block: 0.05rem !important;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 0.8rem !important;
    height: 0.8rem !important;
  }
  #landing, #landing2, #landing3 {
    height: 85vh !important; /* Reduced height */
    aspect-ratio: 4/3 !important; /* Adjusted aspect ratio */
  }
  #landing::before, #landing2::before, #landing3::before {
    width: 60% !important; /* Wider pseudo-element */
    height: 80vh !important;
    backdrop-filter: blur(1.2rem) !important; /* Reduced blur */
    z-index: -1 !important;
  }
  #landing::after, #landing2::after, #landing3::after {
    width: 45% !important;
    height: 50vh !important;
    backdrop-filter: blur(0.7rem) !important;
    z-index: -1 !important;
  }
  #landing .landing-right, #landing2 .landing-right, #landing3 .landing-right {
    grid-template-columns: 95% !important; /* Slightly wider content area */
  }
  #landing .landing-right h1, #landing2 .landing-right h1, #landing3 .landing-right h1 {
    font-size: 2.8rem !important; /* Smaller font */
    margin-top: 3.5rem !important;
    padding-top: 0.6rem !important;
    padding-left: 1rem !important;
    padding-bottom: 0.6rem !important;
    border-top: rgba(12, 49, 57, 0.2745098039) 0.4rem solid !important;
    border-bottom: rgba(12, 49, 57, 0.2745098039) 0.1rem solid !important;
  }
  #landing .landing-right #icon .fa-regular.fa-circle-play.fa-circle-play, #landing .landing-right #icon1 .fa-regular.fa-circle-play.fa-circle-play, #landing .landing-right #icon2 .fa-regular.fa-circle-play.fa-circle-play, #landing2 .landing-right #icon .fa-regular.fa-circle-play.fa-circle-play, #landing2 .landing-right #icon1 .fa-regular.fa-circle-play.fa-circle-play, #landing2 .landing-right #icon2 .fa-regular.fa-circle-play.fa-circle-play, #landing3 .landing-right #icon .fa-regular.fa-circle-play.fa-circle-play, #landing3 .landing-right #icon1 .fa-regular.fa-circle-play.fa-circle-play, #landing3 .landing-right #icon2 .fa-regular.fa-circle-play.fa-circle-play {
    font-size: 4rem !important; /* Smaller icon */
    margin-top: 0.8rem !important;
  }
  #landing .landing-right .audio-player h2, #landing2 .landing-right .audio-player h2, #landing3 .landing-right .audio-player h2 {
    font-size: 1.8rem !important; /* Smaller font */
    padding-bottom: 0.3rem !important;
  }
  #landing .landing-right .sub-landing, #landing2 .landing-right .sub-landing, #landing3 .landing-right .sub-landing {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.2rem !important;
  }
  #landing .landing-right .sub-landing2, #landing2 .landing-right .sub-landing2, #landing3 .landing-right .sub-landing2 {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    padding-bottom: 0.8rem !important;
  }
  #landing .landing-right ul li, #landing2 .landing-right ul li, #landing3 .landing-right ul li {
    font-size: 1.3rem !important; /* Smaller font */
    left: 2rem !important;
  }
  #landing .image-box img, #landing .image-box2 img, #landing2 .image-box img, #landing2 .image-box2 img, #landing3 .image-box img, #landing3 .image-box2 img {
    height: 60vh !important; /* Smaller image height */
    max-width: 90% !important; /* Adjusted max width */
    object-fit: contain !important; /* Ensure full image visibility */
    right: 0 !important;
  }
  .border-white {
    border: 6px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.3) !important; /* Lighter shadow */
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (max-width: 37.5em) {
  ::-webkit-scrollbar {
    width: 0.5rem !important;
  }
  ::-webkit-scrollbar-track {
    border-radius: 0.5rem !important;
    margin-block: 0.03rem !important;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 0.5rem !important;
    height: 0.5rem !important;
  }
  #landing {
    height: 89vh !important;
    aspect-ratio: 3/2 !important;
  }
  #landing::before {
    width: 70% !important;
    height: 80vh !important;
    backdrop-filter: blur(1rem) !important;
    z-index: -1 !important;
  }
  #landing::after {
    width: 50% !important;
    height: 40vh !important;
    backdrop-filter: blur(0.5rem) !important;
    z-index: -1 !important;
  }
  #landing .landing-right {
    grid-template-columns: 90% !important;
  }
  #landing .landing-right h1 {
    font-size: 2.8rem !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
    left: -1.5rem !important;
    border-top: rgba(12, 49, 57, 0.2745098039) 0.5rem solid !important;
    border-bottom: rgba(12, 49, 57, 0.2745098039) 0.2rem solid !important;
  }
  #landing #icon .fa-regular.fa-circle-play.fa-circle-play,
  #landing #icon1 .fa-regular.fa-circle-play.fa-circle-play,
  #landing #icon2 .fa-regular.fa-circle-play.fa-circle-play {
    font-size: 6rem !important;
    z-index: 999 !important;
    position: relative !important;
    cursor: pointer !important;
    transform: translateY(4.6rem) !important;
    margin-top: 0.5rem;
  }
  #landing .audio-player h2 {
    display: none !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    margin-top: -1.8rem !important;
    padding-bottom: 0.1rem !important;
  }
  #landing .sub-landing {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.1rem !important;
  }
  #landing .sub-landing2 {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    padding-bottom: 0.2rem !important;
  }
  #landing ul li {
    font-size: 1rem !important;
    left: 1.5rem !important;
  }
  #landing .image-box img,
  #landing .image-box2 img {
    display: block;
    position: relative !important;
    height: 84vh !important;
    width: 100% !important;
    max-width: 350px !important;
    object-fit: cover !important;
    right: 100% !important;
    transform: translateX(-41%) !important;
    top: 6% !important;
  }
  #landing .border-white {
    border: 4px solid #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.2), 0 3px 6px -3px rgba(0, 0, 0, 0.2) !important;
  }
  #landing3 {
    height: 85vh !important;
    aspect-ratio: 3/2 !important;
  }
  #landing3::before {
    width: 70% !important;
    height: 80vh !important;
    backdrop-filter: blur(1rem) !important;
    z-index: -1 !important;
  }
  #landing3::after {
    width: 50% !important;
    height: 40vh !important;
    backdrop-filter: blur(0.5rem) !important;
    z-index: -1 !important;
  }
  #landing3 .landing-right {
    grid-template-columns: 90% !important;
  }
  #landing3 .landing-right h1 {
    font-size: 2.8rem !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
    left: -1.5rem !important;
    border-top: rgba(12, 49, 57, 0.2745098039) 0.5rem solid !important;
    border-bottom: rgba(12, 49, 57, 0.2745098039) 0.2rem solid !important;
  }
  #landing3 #icon .fa-regular.fa-circle-play.fa-circle-play,
  #landing3 #icon1 .fa-regular.fa-circle-play.fa-circle-play,
  #landing3 #icon2 .fa-regular.fa-circle-play.fa-circle-play {
    font-size: 6rem !important;
    z-index: 999 !important;
    position: relative !important;
    cursor: pointer !important;
    top: 60% !important;
    transform: translateY(-70%) !important;
    margin-top: 0.5rem;
  }
  #landing3 .audio-player h2 {
    display: none !important;
    position: relative !important;
    font-size: 1.5rem !important;
    top: -1.6rem !important;
    padding-bottom: 0.1rem !important;
  }
  #landing3 .sub-landing {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.1rem !important;
  }
  #landing3 .sub-landing2 {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    padding-bottom: 0.2rem !important;
  }
  #landing3 ul li {
    font-size: 1rem !important;
    left: 1.5rem !important;
  }
  #landing3 .image-box img,
  #landing3 .image-box2 img {
    display: block;
    position: relative;
    height: 84vh !important;
    width: 100% !important;
    max-width: 350px !important;
    object-fit: cover !important;
    right: -57% !important;
    transform: translateX(-43%) !important;
    top: 10%;
  }
  #landing3 .image-box #landing2 img,
  #landing3 .image-box #landing3 img,
  #landing3 .image-box2 #landing2 img,
  #landing3 .image-box2 #landing3 img {
    display: block;
  }
  #landing3 .image-box .border-white,
  #landing3 .image-box2 .border-white {
    border: 4px solid #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.2), 0 3px 6px -3px rgba(0, 0, 0, 0.2) !important;
  }
  #landing2 {
    height: 85vh !important;
    aspect-ratio: 3/2 !important;
  }
  #landing2::before {
    width: 70% !important;
    height: 80vh !important;
    backdrop-filter: blur(1rem) !important;
    z-index: -1 !important;
  }
  #landing2::after {
    width: 50% !important;
    height: 40vh !important;
    backdrop-filter: blur(0.5rem) !important;
    z-index: -1 !important;
  }
  #landing2 .landing-right {
    grid-template-columns: 90% !important;
  }
  #landing2 .landing-right h1 {
    font-size: 2.7rem !important;
    margin-top: 1rem !important;
    left: -1.5rem !important;
    border-top: rgba(12, 49, 57, 0.2745098039) 0.5rem solid !important;
    border-bottom: rgba(12, 49, 57, 0.2745098039) 0.2rem solid !important;
  }
  #landing2 .audio-player #icon .fa-regular.fa-circle-play.fa-circle-play,
  #landing2 .audio-player #icon1 .fa-regular.fa-circle-play.fa-circle-play,
  #landing2 .audio-player #icon2 .fa-regular.fa-circle-play.fa-circle-play {
    font-size: 6rem !important;
    z-index: 999 !important;
    position: relative !important;
    cursor: pointer !important;
    top: 60% !important;
    transform: translateY(2%) !important;
  }
  #landing2 .audio-player h2 {
    display: none !important;
    position: relative !important;
    font-size: 1.5rem !important;
    top: -1.6rem !important;
    padding-bottom: 0.1rem !important;
  }
  #landing2 .sub-landing {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    padding-top: 0.6rem !important;
    padding-bottom: 0.1rem !important;
  }
  #landing2 .sub-landing2 {
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    padding-bottom: 0.2rem !important;
  }
  #landing2 ul li {
    font-size: 1rem !important;
    left: 1.5rem !important;
  }
  #landing2 .image-box img,
  #landing2 .image-box2 img {
    display: block;
    position: relative;
    height: 93vh !important;
    width: 100% !important;
    max-width: 350px !important;
    object-fit: cover !important;
    right: -38% !important;
    transform: translateX(0%) !important;
    top: -4.8rem !important;
  }
  #landing2 .image-box #landing2 img,
  #landing2 .image-box #landing3 img,
  #landing2 .image-box2 #landing2 img,
  #landing2 .image-box2 #landing3 img {
    display: block;
  }
  #landing2 .image-box .border-white,
  #landing2 .image-box2 .border-white {
    border: 4px solid #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, 0.2), 0 3px 6px -3px rgba(0, 0, 0, 0.2) !important;
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 768px) {
  #landing .landing-right a, #landing2 .landing-right a, #landing3 .landing-right a, .card .landing-right a, .error-left .landing-right a {
    padding: 1rem 0 !important; /* Reduced padding */
    width: 9rem !important; /* Smaller button width */
    margin-top: -2.5rem !important; /* Adjusted margin */
    font-size: 1.2rem !important; /* Smaller font */
    border-width: 0.8px !important; /* Thinner border */
  }
  #landing .landing-right a span, #landing2 .landing-right a span, #landing3 .landing-right a span, .card .landing-right a span, .error-left .landing-right a span {
    box-shadow: 8px 8px 8px rgba(45, 55, 68, 0.08) !important; /* Lighter shadow */
  }
  #landing .landing-right .btn-1 a:hover, #landing2 .landing-right .btn-1 a:hover, #landing3 .landing-right .btn-1 a:hover, .card .landing-right .btn-1 a:hover, .error-left .landing-right .btn-1 a:hover {
    font-size: 1.4rem !important; /* Smaller hover font */
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (min-width: 35em) and (max-width: 37.5em) {
  #landing .landing-right a, #landing2 .landing-right a, #landing3 .landing-right a, .card .landing-right a, .error-left .landing-right a {
    right: 11rem !important;
    padding: 1.5rem 0 !important; /* Minimal padding */
    width: 10rem !important; /* Smaller button width */
    margin-bottom: 3rem !important; /* Adjusted margin */
    font-size: 1.7rem !important; /* Smaller font */
    border-width: 0.6px !important; /* Thinner border */
  }
  #landing .landing-right a span, #landing2 .landing-right a span, #landing3 .landing-right a span, .card .landing-right a span, .error-left .landing-right a span {
    box-shadow: 6px 6px 6px rgba(45, 55, 68, 0.06) !important; /* Lighter shadow */
  }
  #landing .landing-right .btn-1 a:hover, #landing2 .landing-right .btn-1 a:hover, #landing3 .landing-right .btn-1 a:hover, .card .landing-right .btn-1 a:hover, .error-left .landing-right .btn-1 a:hover {
    font-size: 1.2rem !important; /* Smaller hover font */
  }
}
/* Media Query for Mobile Phones (400px and below) */
@media screen and (max-width: 25em) {
  #landing .landing-right a, #landing2 .landing-right a, #landing3 .landing-right a, .card .landing-right a, .error-left .landing-right a {
    right: 11rem !important;
    padding: 1.5rem 0 !important; /* Minimal padding */
    width: 10rem !important; /* Smaller button width */
    margin-bottom: 0.5rem !important; /* Adjusted margin */
    font-size: 1.7rem !important; /* Smaller font */
    border-width: 0.6px !important; /* Thinner border */
  }
  #landing .landing-right a span, #landing2 .landing-right a span, #landing3 .landing-right a span, .card .landing-right a span, .error-left .landing-right a span {
    box-shadow: 6px 6px 6px rgba(45, 55, 68, 0.06) !important; /* Lighter shadow */
  }
  #landing .landing-right .btn-1 a:hover, #landing2 .landing-right .btn-1 a:hover, #landing3 .landing-right .btn-1 a:hover, .card .landing-right .btn-1 a:hover, .error-left .landing-right .btn-1 a:hover {
    font-size: 1.2rem !important; /* Smaller hover font */
  }
}
/* Media Query for Tablets (768px and below) */
@media screen and (max-width: 48em) {
  header .nav-container .navbar {
    padding: 0.15rem 0.5rem !important; /* Reduced padding */
    height: 3.5rem !important; /* Smaller height */
    box-shadow: 8px 8px 8px rgba(45, 55, 68, 0.08) !important; /* Lighter shadow */
    backdrop-filter: blur(0.8rem) !important; /* Reduced blur for performance */
  }
  header .nav-container .logo {
    width: 8rem !important; /* Smaller logo */
    top: -0.5rem !important;
    left: 2rem !important; /* Adjusted position */
  }
  header .nav-container #menuBtn {
    left: 90% !important; /* Adjusted position */
    font-size: 1.2rem !important; /* Smaller icon size */
  }
  header .nav-container .navbar-nav li a {
    padding: 0.5rem 1rem !important; /* Reduced padding */
    font-size: 1.2rem !important; /* Smaller font */
  }
  header .nav-container ul li {
    display: block !important; /* Stack menu items vertically */
    margin: 0.3rem 0 !important; /* Adjusted spacing */
  }
}
/* Media Query for Mobile Phones (480px and below) */
@media screen and (max-width: 37.5em) {
  header .nav-container .navbar {
    width: 100% !important;
    padding: 0.1rem 0.1rem !important; /* Minimal padding */
    height: 5rem !important; /* Smaller height */
    box-shadow: 6px 6px 6px rgba(45, 55, 68, 0.06) !important; /* Lighter shadow */
    backdrop-filter: blur(0.5rem) !important; /* Further reduced blur */
  }
  header .nav-container .logo {
    width: 8rem !important; /* Smaller logo */
    height: 13.5rem !important;
    top: -4.2rem !important;
    left: -0.8rem !important; /* Adjusted position */
  }
  header .nav-container #menuBtn {
    left: 90% !important; /* Adjusted position */
    font-size: 2rem !important; /* Smaller icon size */
    margin: 0rem !important;
    padding: -0.7rem !important;
    z-index: -3 !important;
  }
  header .nav-container .navbar-nav li a {
    display: flex !important;
    align-items: center !important;
    padding: 3.1rem -3rem -3rem 0.5rem !important; /* move content right by 2.5rem */
    margin: 0 !important; /* remove margin */
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.1 !important;
    z-index: 9999999 !important;
    left: auto !important;
    right: -1.1rem !important;
  }
  header .nav-container:hover {
    color: #011e1c !important;
  }
  header .nav-container ul li {
    display: inline-block !important;
  }
  header .nav-container .side-nav .btn-close {
    position: relative !important;
    left: 28% !important;
    transform: translateX(-70%);
    top: 70px !important;
    right: 0px;
    font-size: 3rem !important;
    outline: none !important;
    z-index: 999 !important;
    padding: 1rem !important;
    margin: 0 !important;
  }
}
/* FONTS*/
@font-face {
  font-family: "trirong thin";
  src: url("../fonts/trirong-thin-webfont.woff2") format("woff2"), url("../fonts/trirong-thin-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "trirong light";
  src: url("../fonts/trirong-light-webfont.woff2") format("woff2"), url("../fonts/trirong-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "trirong extralight";
  src: url("../fonts/trirong-extralight-webfont.woff2") format("woff2"), url("../fonts/trirong-extralight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "antic didone";
  src: url("../fonts/anticdidone-regular-webfont.woff2") format("woff2"), url("../fonts/anticdidone-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "italiana";
  src: url("../fonts/italiana-regular-webfont.woff2") format("woff2"), url("../fonts/italiana-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "cinzel";
  src: url("../fonts/cinzel-variablefont_wght-webfont.woff2") format("woff2"), url("../fonts/cinzel-variablefont_wght-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "nixie one";
  src: url("../fonts/nixieone-regular-webfont.woff2") format("woff2"), url("../fonts/nixieone-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "cinzel decorative";
  src: url("../fonts/cinzeldecorative-regular-webfont.woff2") format("woff2"), url("../fonts/cinzeldecorative-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
* {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

html {
  scroll-behavior: smooth !important;
}

body, html {
  overflow-x: hidden !important;
  font-size: 65% !important;
  min-height: 100vh !important;
}

/* CUSTOM SCROLLBAR*/
::-webkit-scrollbar {
  width: 1.1rem !important;
}

::-webkit-scrollbar-track {
  background: rgba(230, 255, 244, 0.5529411765) !important;
  border-radius: 1rem !important;
  margin-block: 0.1rem !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#D5EAF5, rgba(16, 29, 64, 0.8431372549));
  border-radius: 1rem !important;
  height: 1rem !important;
}

/* LANDING PAGE 1*/
#landing {
  position: relative !important;
  width: 100%;
  height: 100.1vh;
  aspect-ratio: 16/10;
  background: linear-gradient(127deg, #A7CBD5, rgba(224, 251, 252, 0.2274509804));
  z-index: 1 !important;
  overflow: hidden;
}
#landing::before {
  content: " ";
  position: absolute;
  top: -4rem;
  left: 0;
  width: 50%;
  height: 100vh;
  border-bottom-right-radius: 100%;
  background: linear-gradient(225deg, rgba(167, 201, 213, 0.4666666667) 0%, rgba(167, 203, 213, 0.4666666667) 75%, rgba(167, 203, 213, 0.4666666667) 100%);
  backdrop-filter: blur(1.7rem);
  background-clip: border-box;
  z-index: -1 !important;
  animation: move-up 2s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#landing::after {
  content: " ";
  position: absolute;
  bottom: 0rem;
  right: 0;
  width: 39%;
  height: 70vh;
  border-top-left-radius: 100%;
  background: linear-gradient(125deg, rgba(167, 203, 213, 0.4392156863) 0%, rgba(167, 203, 213, 0.4392156863) 75%, rgba(167, 203, 213, 0.4392156863) 100%);
  backdrop-filter: blur(1rem);
  background-clip: border-box;
  z-index: -2 !important;
  animation: move-up 4s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#landing .landing-right {
  height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: 90%;
  place-content: start center;
}
#landing .landing-right h1 {
  position: relative;
  font-family: "antic didone";
  font-weight: 500;
  font-size: 4.2rem;
  color: #091818;
  margin-top: 5.6rem !important;
  padding-top: 0.9rem;
  padding-left: 1.4rem;
  padding-bottom: 0.9rem;
  background-color: rgba(199, 236, 254, 0.2);
  border-bottom: 0.2rem solid rgba(12, 49, 57, 0.2745098039);
  border-top: rgba(12, 49, 57, 0.2745098039) 0.6rem solid;
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
#landing .landing-right .audio-player h2 {
  font-family: "trirong thin" !important;
  font-weight: 600 !important;
  font-size: 2.3rem !important;
  color: #091818 !important;
  transform: translateY(0.3rem);
  white-space: wrap !important;
}
#landing .landing-right .audio-player #icon2 .fa-regular.fa-circle-play.fa-circle-play {
  font-size: 6rem !important;
  color: rgba(19, 41, 47, 0.8588235294) !important;
  cursor: pointer !important;
  top: 100% !important;
  transform: translateY(0%) !important;
  margin-top: 1rem !important;
  position: relative !important;
  z-index: 9999 !important;
}
#landing .landing-right .sub-landing {
  position: relative;
  font-family: "trirong thin";
  font-weight: 800;
  font-size: 2.3rem;
  color: #091818;
  padding-top: 1rem !important;
  padding-bottom: 0.3rem !important;
  white-space: wrap !important;
}
#landing .landing-right .sub-landing2 {
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 2rem;
  padding-bottom: 1rem !important;
  color: #091818;
}
#landing .landing-right ul li {
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 1.6rem;
  color: #091818;
  list-style: none;
  position: static;
  left: 3rem !important;
  white-space: wrap !important;
  z-index: 9999;
}
#landing .image-box {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  justify-items: center;
  align-items: center;
}
#landing .image-box img {
  display: block;
  height: 95.5vh;
  max-width: 100%;
  object-fit: cover;
  bottom: 0rem;
  left: 140%;
  transform: translateY(2rem) translateX(121%);
  z-index: -1 !important;
}

/*LANDING PAGE 2 */
#landing2 {
  position: relative;
  width: 100%;
  height: 100.1vh;
  aspect-ratio: 16/10;
  background: linear-gradient(127deg, #CCE3DD, #F9FAF5);
  z-index: 1 !important;
  overflow: hidden;
}
#landing2::before {
  content: " " !important;
  position: absolute !important;
  top: -4rem !important;
  left: 0 !important;
  width: 50% !important;
  height: 100vh !important;
  border-bottom-right-radius: 100% !important;
  background: linear-gradient(225deg, #CCE3DD 0%, #CCE3DD 75%, #CCE3DD 100%) !important;
  backdrop-filter: blur(0.7rem) !important;
  background-clip: border-box !important;
  z-index: -1 !important;
  animation: move-up 2s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#landing2::after {
  content: " " !important;
  position: absolute !important;
  bottom: 0rem !important;
  right: 0 !important;
  width: 39% !important;
  height: 70vh !important;
  border-top-left-radius: 100% !important;
  background: linear-gradient(125deg, rgba(204, 227, 221, 0.4666666667) 0%, rgba(204, 227, 221, 0.4666666667) 75%, rgba(204, 227, 221, 0.4666666667) 100%) !important;
  backdrop-filter: blur(0rem) !important;
  background-clip: border-box !important;
  z-index: -2 !important;
  animation: move-up 4s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#landing2 .landing-right {
  height: 100vh !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 90% !important;
  place-content: start center !important;
}
#landing2 .landing-right h1 {
  position: relative;
  font-family: "antic didone";
  font-weight: 500;
  font-size: 4.3rem;
  color: #091818;
  margin-top: 5.6rem !important;
  padding-top: 0.9rem;
  padding-left: 1.4rem;
  padding-bottom: 0.9rem;
  background-color: rgba(204, 227, 221, 0.8);
  border-bottom: rgba(5, 37, 44, 0.368627451) 0.2rem solid;
  border-top: rgba(5, 37, 44, 0.368627451) 0.6rem solid;
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
#landing2 .landing-right .audio-player h2 {
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 2.3rem;
  color: #091818;
  padding-top: 0rem !important;
  padding-bottom: 0.3rem !important;
  white-space: wrap !important;
}
#landing2 .landing-right #icon1 .fa-regular.fa-circle-play.fa-circle-play {
  font-size: 6rem !important;
  color: rgba(19, 41, 47, 0.8588235294) !important;
  cursor: pointer !important;
  margin-top: 1rem !important;
}
#landing2 .landing-right .sub-landing {
  font-family: "trirong thin";
  font-weight: 800;
  font-size: 2.3rem;
  color: #091818;
  padding-top: 1rem !important;
  padding-bottom: 0.4rem !important;
  white-space: wrap !important;
}
#landing2 .landing-right .sub-landing2 {
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 2rem;
  padding-bottom: 1rem !important;
  color: #091818;
}
#landing2 .landing-right ul li {
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 1.6rem;
  color: #091818;
  list-style: none;
  position: static !important;
  left: 3rem !important;
  white-space: wrap !important;
}
#landing2 .image-box2 {
  display: grid;
  grid-template-rows: 100%;
  justify-items: center;
  align-items: center;
}
#landing2 .image-box2 img {
  display: block;
  position: absolute;
  height: 111vh;
  max-width: 100%;
  object-fit: cover;
  bottom: 0;
  right: -8rem;
  z-index: 9;
}

/*LANDING PAGE 3 */
.border-white {
  border: 9px solid #ffffff !important;
  border-bottom: 3px solid #ffffff !important;
  z-index: 4 !important;
  background-color: rgba(1, 59, 48, 0.0588235294);
  box-shadow: 0 -6px 12px -6px rgba(0, 0, 0, 0.45), 0 6px 12px -6px rgba(0, 0, 0, 0.45); /* bottom shadow */
}

#landing3 {
  position: relative;
  width: 100%;
  height: 101vh;
  aspect-ratio: 16/10;
  background: linear-gradient(127deg, #aab8c2, #F9FAF5);
  z-index: 1 !important;
  overflow: hidden;
}
#landing3::before {
  content: " " !important;
  position: absolute !important;
  top: -4rem !important;
  left: 0 !important;
  width: 50% !important;
  height: 100vh !important;
  border-bottom-right-radius: 100% !important;
  background: linear-gradient(225deg, #aab8c2 0%, #aab8c2 75%, #aab8c2 100%) !important;
  backdrop-filter: blur(3rem) !important;
  background-clip: border-box !important;
  z-index: -1 !important;
  animation: move-up 2s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#landing3::after {
  content: " " !important;
  position: absolute !important;
  bottom: 0rem !important;
  right: 0 !important;
  width: 39% !important;
  height: 70vh !important;
  border-top-left-radius: 100% !important;
  background: linear-gradient(125deg, rgba(130, 167, 190, 0.4666666667) 0%, rgba(170, 184, 194, 0.4666666667) 75%, rgba(170, 184, 194, 0.4666666667) 100%) !important;
  backdrop-filter: blur(1rem) !important;
  background-clip: border-box !important;
  z-index: -2 !important;
  animation: move-up 4s infinite alternate;
}
@keyframes move-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(4rem);
  }
}
#landing3 .landing-right {
  height: 100vh !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 90% !important;
  place-content: start center !important;
}
#landing3 .landing-right h1 {
  position: relative;
  font-family: "antic didone";
  font-weight: 500;
  font-size: 4.1rem;
  color: #091818;
  margin-top: 5.6rem !important;
  padding-top: 0.9rem !important;
  padding-left: 1.4rem !important;
  padding-bottom: 0.9rem !important;
  border-bottom: rgba(5, 37, 44, 0.368627451) 0.2rem solid !important;
  border-top: rgba(5, 37, 44, 0.368627451) 0.6rem solid !important;
  border-top-left-radius: 0.1rem !important;
  border-bottom-left-radius: 0.1rem !important;
}
#landing3 .landing-right .audio-player h2 {
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 2.3rem;
  color: #091818;
  padding-top: 0rem !important;
  padding-bottom: 0.3rem !important;
  white-space: wrap !important;
}
#landing3 .landing-right .audio-player #icon .fa-regular.fa-circle-play.fa-circle-play {
  font-size: 6rem !important;
  color: rgba(4, 33, 39, 0.952) !important;
  cursor: pointer !important;
  padding: 0rem !important;
  margin-top: 1rem !important;
}
#landing3 .landing-right .sub-landing {
  font-family: "trirong thin";
  font-weight: 800;
  font-size: 2.3rem;
  color: #091818;
  padding-top: 1rem !important;
  padding-bottom: 0.4rem !important;
  white-space: wrap !important;
}
#landing3 .landing-right .sub-landing2 {
  font-family: "trirong thin";
  font-weight: 600;
  font-size: 2rem;
  padding-bottom: 1rem !important;
  color: #091818;
}
#landing3 .landing-right ul li {
  font-family: "trirong thin";
  font-weight: 800;
  font-size: 1.6rem;
  color: #091818;
  list-style: none;
  position: static !important;
  left: 3rem !important;
}
#landing3 .image-box2 {
  display: grid;
  grid-template-rows: 100%;
  justify-items: center;
  align-items: center;
}
#landing3 .image-box2 img {
  display: block;
  position: absolute;
  height: 95.4vh;
  max-width: 100%;
  object-fit: cover;
  bottom: 0;
  right: -1rem;
  z-index: 9;
}

/*# sourceMappingURL=style.css.map */