@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

html,
body {
  font-family: Nunito;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Animations */
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.navbar {
  background: #ffffff;
  animation: fadein 1s ease;
  box-shadow: 0.5px 0.5px 10px #000000;
}

.fade-in {
  animation: fadein 1s ease;
}

img {
  pointer-events: none !important;
}

.line-1 {
  position: relative;
  top: 50%;
  width: 21.5em;
  margin: 0 auto;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  font-size: 30px;
  font-weight: bold;
  font-family: arial;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  background-image: linear-gradient(
    to bottom,
    #f56300,
    #fd8900,
    #ffae00,
    #fcd200,
    #f4f50b
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animation */
.anim-typewriter {
  animation: typewriter 4s steps(44) 1s 1 normal both,
    blinkTextCursor 500ms steps(44) infinite normal;
}

/* Key Frames */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 21.5em;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: #000000;
  }
  to {
    border-right-color: transparent;
  }
}

@keyframes slide-in-left {
  20% {
    opacity: 0;
  }
  60% {
    transform: translateX(-45%);
  }
  75% {
    transform: translateX(-52%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%);
  }
}

@keyframes slide-in-right {
  20% {
    opacity: 0;
  }
  60% {
    transform: translateX(45%);
  }
  75% {
    transform: translateX(52%);
  }
  100% {
    opacity: 1;
    transform: translateX(50%);
  }
}

@keyframes slide-left-right-infinite {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
}
/* Key Frames End*/

.wrapper-1 {
  margin: 90px;
}

.wrapper-2 {
  margin-top: 150px;
}

.wrapper-3 {
  margin-top: 130px;
}

.wrapper-4 {
  margin-top: 100px;
}

.wrapper-5 {
  background-image: radial-gradient(
    circle,
    #ceb6d6,
    #afa1c6,
    #8e8db6,
    #6a7ba5,
    #436992
  );
  margin-top: 130px;
  padding: 100px 0;
}

.management-title {
  font-family: Archivo Black;
  letter-spacing: 1px;
  font-size: 50px;
}

.ceo_image {
  margin-left: 40%;
  transform: translateX(-200%);
  opacity: 0;
}

.coo_image {
  margin-right: 40%;
  transform: translateX(200%);
  opacity: 0;
}

.card {
  height: 560px;
  border: 1px solid #e0e3eb;
}

.card-title {
  background-image: linear-gradient(
    to bottom,
    #9f8ca6,
    #827794,
    #646481,
    #46516e,
    #263f5a
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Archivo Black;
}

.card-text {
  font-size: 15px;
}

.card-view {
  font-size: 13px;
  font-weight: bold;
}

.card-view:hover {
  color: red;
}

.product-title {
  background-image: linear-gradient(
    to bottom,
    #9f8ca6,
    #827794,
    #646481,
    #46516e,
    #263f5a
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Archivo Black;
}

.product-desc {
  text-align: start;
}

.join-us {
  background-image: linear-gradient(
    to bottom,
    #d0bbd8,
    #a59ab9,
    #7a7a99,
    #505c79,
    #263f5a
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Archivo Black;
}

.join-us:hover {
  border-bottom: 3px solid #7a7a99;
}

.ceo-title {
  text-align: start;
}

.coo_title {
  text-align: end;
}

/* icons */
.bi-caret-left:before {
  font-size: 30px;
  margin-right: 5px;
  animation: slide-left-right-infinite 2s linear infinite;
}

.bi-caret-right:before {
  font-size: 30px;
  margin-left: 5px;
  animation: slide-left-right-infinite 2s linear infinite;
}

.bi-box-arrow-in-right:before {
  font-size: 23px;
  -webkit-text-stroke: 0.2px;
  margin-right: 5px;
}

.bi-box-arrow-in-right:hover {
  color: #4d4d4d;
}
/* icons end */

/* Footer ================================================================================= */
.social-icons-f:hover,
.social-icons-c:hover,
.social-icons-e:hover {
  background: #d9d9d9 !important;
}

body:has(.social-icons-f:hover) .social-facebook {
  fill: #1e222f !important;
}

body:has(.social-icons-c:hover) .social-contact {
  fill: #1e222f !important;
}

body:has(.social-icons-e:hover) .social-email {
  fill: #1e222f !important;
}

/* Footer End ============================================================================= */

/* Media Queries */
@media only screen and (max-width: 850px) {
  .wrapper-1 {
    margin: 50px 20px;
  }

  .product-desc {
    text-align: center;
  }

  .wrapper-2 {
    margin-top: 70px;
  }

  .wrapper-3 {
    margin-top: 80px;
  }

  .wrapper-3 p {
    font-size: 20px !important;
  }

  .line-1 {
    font-size: 18px;
  }

  .wrapper-4 {
    margin-top: 50px;
  }

  .wrapper-5 {
    margin-top: 80px;
    padding: 50px 0;
  }

  .management-title {
    font-size: 35px;
  }

  .ceo_title,
  .coo_title {
    margin-top: 10px;
    text-align: center;
  }
}

@media only screen and (max-width: 763px) {
  .bi-caret-left,
  .bi-caret-right {
    display: none;
  }

  .card {
    height: auto;
  }
}

@media only screen and (max-width: 450px) {
  .management-title {
    font-size: 27px;
  }
}
/* Media Queries End */