/* tutorial: https://www.youtube.com/watch?v=wARbgs5Fmuw */
/* This allows responsive font scaling to be easily manipulated with a default set (mobile) and one Desktop scaling w/ Media query. */
:root {
  --ff-body: "Varela", sans-serif;

  /* Recommended Clamp: 
     Start at 3rem minimum.
     Grow by 6% of the screen width (6vw).
     Cap at 8rem maximum.
  */
  --fs-xl: clamp(3rem, 6vw + 1rem, 8rem);
  --fs-headline: 2.6rem;
  --fs-lg: 1.9rem;
  --fs-md: 1.55rem;
  --fs-sm: 1.4rem;
  --fs-xs: 1.0rem;
}

/* DESKTOP SCALING (Min width 40em) */
@media (min-width: 60em) {
  :root {
    /* Desktop Clamp: 
       Slightly larger minimum for desktop screens 
    */
    --fs-xl: clamp(5rem, 8vw + 1rem, 10rem);
    --fs-headline: 4.5rem;
    --fs-lg: 3.0rem;
    --fs-md: 2.0rem;
    --fs-sm: 1.4rem;
    --fs-xs: 1.2rem;
  }
}

/************************/
/* for the body/html */
html{
    font-size: 75%;
}
body {
    font-size: var(--fs-md) !important;
    color: #7A7766!important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    width: 100%;
    background-color: #ffffff !important;
    overflow-x: hidden !important;

}a{
    text-decoration: none !important;
    color: #7A7766 !important;
}
.h1-custom {
    font-family: "Titan One";
   font-size: var(--fs-xl) !important;
}
.h2-custom {
   font-family: "Titan One";
   font-size: var(--fs-headline) !important;
}

/* All h3 headers. */
.h3-custom {
   font-family: "Titan One";
   font-size: var(--fs-md) !important;
   color: #5F6F88;
}


/************************/
/* Navigation SECTION */
.navbar-custom {
    font-family: "Varela", sans-serif;
    background-color: #ffffff !important;
    padding: 15px !important;
}

.nav-link {
    font-size: var(--fs-sm) !important;
    color: #000000 !important;
    text-shadow: -10px 10px 25px rgb(0, 0, 0);
}

.nav-link:hover, a:hover, .finalContainer .fa-brands:hover{
    color: #5F6F88 !important;
}



.introContainer {
    padding: 25px !important;
    min-height: 100vh;
    min-height: 100svh;
    font-size: var(--fs-lg);
}
.secondContainer {
    padding: 25px !important;
    min-height: 60vh;
    min-height: 60svh;
    font-size: var(--fs-lg);
}.thirdContainer {
    padding: 25px !important;
    min-height: 60vh;
    min-height: 60svh;
    font-size: var(--fs-lg);
}.fourthContainer{
    padding: 25px !important;
    min-height: 40vh;
    min-height: 40svh;
    font-size: var(--fs-lg);
}.dashboardContainer {
    text-align: center;
    padding: 12px !important;
    min-height: 100vh;
    min-height: 100svh;
}.finalContainer{
    text-align: center !important;
    min-height: 30vh;
    min-height: 30svh;
}

.projectImage{
    margin-top: 25px;
    max-width: 100%;
    max-height: 500px;
    border-radius: 16px;
}
.dashboardContainer .row{
    margin-top: 100px !important;
}
.imageRow{
    margin-top: 25px !important;
}

/* --- Travel API Section Styles --- */
.api-form-card {
    min-height: 100% !important;
    border-radius: 16px;
    background-color: #f8f9fa !important; 
}
.btn-analyze {
    font-family: 'Varela', sans-serif;
    background-color: #7A7766 !important;
    color: white !important;
    padding: 6px !important;
}

.api-result-card {
    min-height: 100% !important;
    background-color: #f8f9fa !important; 
    border-radius: 16px;
    border: 2px dashed #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 1. DEFAULT STATE: Visible -- A MUST for if SCRIPT.JS is not loaded server side, and keeps text from loading. We want the text to always load by default first. */
.introContainer, .secondContainer, .thirdContainer, .fourthContainer, .dashboardContainer, .finalContainer {
  opacity: 1; 
  transform: translateY(0);
  transition: opacity 1.2s ease-out, transform 0.6s ease-out;
}

/* 2. If the js script is able to run, it immediately hides it before the users knows, and applies the animations */ 
.js-hidden {
  opacity: 0 !important;
  transform: translateY(100px) !important;
}.introContainer.visible, .secondContainer.visible, .thirdContainer.visible, .fourthContainer.visible, .dashboardContainer.visible, .finalContainer.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/************************/
/* Footer Section */
.footer-custom {
    background-color: rgb(255, 255, 255);
    text-align: center;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.footer-custom a {
    color: #7A7766 !important;
}

.footer-custom a:hover {
    color: #5F6F88 !important;
}

.btn.btn-social-icon {
    width: 50px;
    height: 50px;
    padding: 0;
}

.btn.btn-rounded {
    border-radius: 20px;
}