/* CONFIGURATION */
/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lato:wght@300;400;700&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ANIMATION */
@keyframes fade-in {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes fade-out {
   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }
}

@keyframes slide-up {
   0% {
      transform: translateY(100%);
   }

   100% {
      transform: translateY(0%);
   }
}

@keyframes slide-down {
   0% {
      transform: translateY(0%);
   }

   100% {
      transform: translateY(100%);
   }
}

@keyframes carousel_ani {
   0% {
      opacity: .4
   }

   100% {
      opacity: 1
   }
}

/* Main */
* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Montserrat', sans-serif;
   text-decoration: none;
   list-style: none;
}

/* Scrolling Bar */
::-webkit-scrollbar {
   width: 0;
}

::-webkit-scrollbar-track {
   background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
   background: #888;
}

::-webkit-scrollbar-thumb:hover {
   background: #555;
}


/* Navbar */
.header {
   position: fixed;
   top: 0;
   width: 100%;
   /* box-shadow: 0 4px 20px rgba(68, 91, 111, 0.1);
   background-color: rgba(255, 255, 255, 0.3) !important; */
   z-index: 1;
}

nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 30px;
   height: 7.5vh;
}

.logo_url {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);

   transition: 0.3s;
}

.menu {
   display: flex;
   justify-content: center;
   align-items: center;

   z-index: 999;
}

.menu-icon {
   display: none;
}

#menu-toggle {
   display: none;
}

#menu-toggle:checked~.menu {
   transform: scale(1, 1);
}

/* Welcoming Banner */
section.welcome_banner {
   position: relative;
   margin-bottom: 35px;
   width: 100%;
   min-height: 100vh;
}

.background::before {
   content: "";
   display: block;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: calc(100%);
   background: linear-gradient(rgba(34, 34, 34, 0.3), rgba(18, 67, 98, 0.3));
   background-repeat: no-repeat;
   background-position: 50% 100%;
   background-size: 100%;
   transition: 1s;
}

.carousel {
   position: relative;
}

.carousel-item {
   animation-name: carousel_ani;
   animation-duration: 1.5s;
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
   z-index: 1;
}

.background {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   /* Ensure the background is behind the content */
}

.computer_background {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Maintain aspect ratio and cover the entire container */
}

/* Responsive phone_background video */
.phone_background {
   width: 100%;
   height: auto;
   /* Maintain aspect ratio */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -1;
   /* Ensure video is behind other content */
   object-fit: cover;
   /* Maintain aspect ratio and cover the entire container */
}


.mouse-icon-container {
   position: absolute;
   left: 50%;
   bottom: 30px;
   transform: translateX(-50%);
   z-index: 999;
}

.mouse-icon {
   width: 40px;
   height: 70px;
   border: 2px solid #FFF;
   cursor: pointer;
   border-radius: 20px;
   position: relative;
   margin: 0 auto;
   animation: scrollDown 1.5s infinite;
}

.mouse-icon::after {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   width: 4px;
   height: 20px;
   background-color: #FFF;
   border-radius: 2px;
   transform: translateX(-50%);
   animation: scrollBar 1.5s infinite;
}

/* CSS for the scroll animation */
@keyframes scrollDown {
   0% {
      opacity: 1;
      transform: translateY(0);
   }

   50% {
      opacity: 0.5;
      transform: translateY(10px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Responsive video container */
.phone_background_container {
   position: relative;
   overflow: hidden;
   padding-bottom: 56.25%;
   /* Aspect ratio 16:9 */
}

/* Adjust video size for different screen sizes */
@media (max-width: 768px) {
   .computer_background {
      display: none;
   }

   .phone_background {
      height: 100vh;
      /* Fill viewport height on smaller screens */
   }
}

.slide-text {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
   text-align: center;
   color: rgb(255, 255, 255);
   animation: fade-in 5s;
}

.text.heading {
   font-family: 'Dancing Script', sans-serif;
   font-size: 90px;
   /* font-style: italic; */
   text-shadow: 0 0 3px rgb(0, 0, 0);
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.text.heading:lang(tc) {
   font-style: normal;
}

.text.subheading {
   font-family: 'Urbanist', sans-serif;
   text-transform: uppercase;
   font-size: 70px;
   font-weight: 800;
   text-shadow: 0 0 3px #000;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/* "Select" Section */

section.select {
   display: flex;
   justify-content: center;
   /* Horizontally center the items */
   align-items: center;
   /* Vertically center the items */
   flex-direction: column;
   height: 100vh;
}

.section-header {
   text-align: center;
   text-transform: uppercase;
   font-size: 1em;
   padding: 10px;

   user-select: none;
   color: white;
}

.service-selection {
   display: flex;
   justify-content: center;
   flex-direction: row;
   margin-bottom: 20px;
}

.upload_file {
   width: 300px;
   height: 300px;
   background: #be9191;
   margin: 0 10px;
   background-size: 50% auto;
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   position: relative;
}

.redirect {
   width: 100%;
   height: 50px;
   font-size: 24px;
   color: #fff;
   text-decoration: none;
   background-color: rgba(110, 110, 110, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.35s;
}

.redirect:hover {
   background-color: #be9191;
   color: #3f3f3f;
}

.title {
   text-transform: uppercase;
   padding: 10px 0;
   background: rgba(255, 255, 255, 0.5);
   text-align: center;
   font-size: 1em;
   width: 100%;

   user-select: none;
}

.back-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   background-color: #333;
   color: #fff;
   border-radius: 50%;
   text-align: center;
   line-height: 40px;
   font-size: 20px;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s, visibility 0.3s;
}

.back-to-top.visible {
   opacity: 1;
   visibility: visible;
}

.back-to-top.highlight {
   background-color: #ffcc00;
   color: #333;
}

.back-to-top:hover {
   background-color: #555;
}

a {
   color: #fff;
   text-decoration: none;
}

.footer {
   background-color: #004658;
   color: #fff;
}

.footer-content {
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
   padding: 40px 15px 450px;
   position: relative;
}

.footer-content-column {
   box-sizing: border-box;
   float: left;
   padding-left: 15px;
   padding-right: 15px;
   width: 100%;
   color: #fff;
}

.footer-content-column ul li a {
   color: #fff;
   text-decoration: none;
}

.footer-logo-link {
   display: inline-block;
}

.footer-menu {
   margin-top: 30px;
}

.footer-menu-name {
   color: #fffff2;
   font-size: 15px;
   font-weight: 900;
   letter-spacing: .1em;
   line-height: 18px;
   margin-bottom: 0;
   margin-top: 0;
   text-transform: uppercase;
}

.footer-menu-list {
   list-style: none;
   margin-bottom: 0;
   margin-top: 10px;
   padding-left: 0;
}

.footer-menu-list li {
   margin-top: 5px;
}

.footer-call-to-action-description {
   color: #fffff2;
   margin-top: 10px;
   margin-bottom: 20px;
}

.footer-call-to-action-button:hover {
   background-color: #fffff2;
   color: #00bef0;
}

.button:last-of-type {
   margin-right: 0;
}

.footer-call-to-action-button {
   background-color: #027b9a;
   border-radius: 21px;
   color: #fffff2;
   display: inline-block;
   font-size: 11px;
   font-weight: 900;
   letter-spacing: .1em;
   line-height: 18px;
   padding: 12px 30px;
   margin: 0 10px 10px 0;
   text-decoration: none;
   text-transform: uppercase;
   transition: background-color .2s;
   cursor: pointer;
   position: relative;
}

.footer-call-to-action {
   margin-top: 30px;
}

.footer-call-to-action-title {
   color: #fffff2;
   font-size: 14px;
   font-weight: 900;
   letter-spacing: .1em;
   line-height: 18px;
   margin-bottom: 0;
   margin-top: 0;
   text-transform: uppercase;
}

.footer-call-to-action-link-wrapper {
   margin-bottom: 0;
   margin-top: 10px;
   color: #fff;
   text-decoration: none;
}

.footer-call-to-action-link-wrapper a {
   color: #fff;
   text-decoration: none;
}

.footer-social-links {
   bottom: 0;
   height: 54px;
   position: absolute;
   right: 0;
   width: 236px;
}

.footer-social-amoeba-svg {
   height: 54px;
   left: 0;
   display: block;
   position: absolute;
   top: 0;
   width: 236px;
}

.footer-social-amoeba-path {
   fill: #027b9a;
}

.footer-social-link.linkedin {
   height: 26px;
   left: 3px;
   top: 11px;
   width: 26px;
}

.footer-social-link {
   display: block;
   padding: 10px;
   position: absolute;
}

.hidden-link-text {
   position: absolute;
   clip: rect(1px 1px 1px 1px);
   clip: rect(1px, 1px, 1px, 1px);
   -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
   clip-path: inset(0px 0px 99.9% 99.9%);
   overflow: hidden;
   height: 1px;
   width: 1px;
   padding: 0;
   border: 0;
   top: 50%;
}

.footer-social-icon-svg {
   display: block;
}

.footer-social-icon-path {
   fill: #fffff2;
   transition: fill .2s;
}

.footer-social-link.twitter {
   height: 28px;
   left: 62px;
   top: 3px;
   width: 28px;
}

.footer-social-link.youtube {
   height: 24px;
   left: 123px;
   top: 12px;
   width: 24px;
}

.footer-social-link.github {
   height: 34px;
   left: 172px;
   top: 7px;
   width: 34px;
}

.footer-copyright {
   background-color: #027b9a;
   color: #fff;
   padding: 15px 30px;
   text-align: center;
}

.footer-copyright-wrapper {
   margin-left: auto;
   margin-right: auto;
   max-width: 1200px;
}

.footer-copyright-text {
   color: #fff;
   font-size: 13px;
   font-weight: 400;
   line-height: 18px;
   margin-bottom: 0;
   margin-top: 0;
}

.brand {
   color: #00bef0;
   text-transform: uppercase;
}

.socials {
   display: flex;
   justify-content: center;
   margin-top: 10px;
}

.social {
   margin: 0 10px;
   /* background: #419b96;
   border-radius: 10px; */
   padding: 10px;
}

.social-link {
   transition: 0.5s;
}

.social-link.YouTube:hover {
   color: #ff0000;
}

.social-link.Facebook:hover {
   color: #1632e6;
}

.social-link.Instagram:hover {
   color: #8a49a1
}

.social-link.Email:hover {
   color: #342b37
}


/* Media Query For different screens */
@media (min-width:320px) and (max-width:479px) {

   /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
   .footer-content {
      margin-left: auto;
      margin-right: auto;
      max-width: 1230px;
      padding: 40px 15px 1050px;
      position: relative;
   }

   .service-selection {
      margin: 10px;
      flex-direction: column;
      align-items: center;
   }

   .upload_file {
      margin: 10px 0;
   }
}

@media (min-width:480px) and (max-width:599px) {

   /* smartphones, Android phones, landscape iPhone */
   .footer-content {
      margin-left: auto;
      margin-right: auto;
      max-width: 1230px;
      padding: 40px 15px 1050px;
      position: relative;
   }

   .service-selection {
      margin: 10px 0px;
      flex-direction: column;
   }
}

@media (min-width:600px) and (max-width: 800px) {

   /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */
   .footer-content {
      margin-left: auto;
      margin-right: auto;
      max-width: 1230px;
      padding: 40px 15px 1050px;
      position: relative;
   }

}

@media (min-width:801px) {
   /* tablet, landscape iPad, lo-res laptops ands desktops */

}

@media (min-width:1025px) {
   /* big landscape tablets, laptops, and desktops */

}

@media (min-width:1281px) {
   /* hi-res laptops and desktops */

}

@media (min-width: 760px) {
   .footer-content {
      margin-left: auto;
      margin-right: auto;
      max-width: 1230px;
      padding: 40px 15px 450px;
      position: relative;
   }

   .footer-wave-svg {
      height: 50px;
   }

   .footer-content-column {
      width: 24.99%;
   }
}

@media (min-width: 568px) {
   /* .footer-content-column {
       width: 49.99%;
   } */
}



/* switch language menu */

/* Dropdown container */
.dropdown {
   position: relative;
}

.menu_icon {
   width: 1.5rem;
}

/* Dropdown trigger item */
.option {
   display: flex;
   align-items: center;
   cursor: pointer;
   background-color: #eeeeee;
   padding: 10px;
   transition: 0.3s;
   border-radius: 5px;
}

.option.dropdown {
   border-radius: 5px 5px 0 0;
}

.option:hover {
   background-color: #FFF;
}

.drop_item,
.login_icon {
   padding: 10px;
   transition: 0.2s;
   border-radius: 5px;
   cursor: pointer;
   background-color: rgba(240, 240, 240, 0.5);
}

.drop_item:hover,
.login_icon:hover,
.dropdown:hover .drop_item {
   border-radius: 5px 5px 0 0;
   background-color: #f0f0f0;
}

.drop_item span {
   font-size: 16px;
   letter-spacing: 0.05px;
   font-weight: 700;
}

/* Dropdown content */
.drop_content {
   position: absolute;
   top: 100%;
   left: 0;
   width: 230px;
   background-color: #FFF;
   padding: 10px;
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
   border-radius: 0 0 5px 5px;
}

/* Show dropdown content on hover */
.dropdown:hover .drop_content {
   max-height: 500px;
   /* Adjust the max-height value as needed */
   opacity: 1;
   pointer-events: auto;
}

.lang_icon {
   height: 30px;
   margin-right: 10px;
}

/* Dropdown language item */
.changeLanguage {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
   padding: 10px;
   cursor: pointer;
   font-size: 16px;
   transition: 0.3s;
}

/* Hover effect on dropdown language items */
.changeLanguage:hover {
   background-color: #ccc;
}

/* Hide submenu when cursor leaves both parent li and submenu */
.dropdown:not(:hover) .drop_content,
.dropdown:not(:hover) .drop_content:hover {
   opacity: 0;
   pointer-events: none;
}