/* ==========================================
   Applies to every element on the page
   ========================================== */

/* Makes width/height calculations easier */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ==========================================
   Main page
   ========================================== */

body {
    margin: 0;                              /* Remove browser default margins */
    font-family: "Outfit";        /* Default font */
    background-color: #f6f2fe;              /* Light purple background */
    font-family: "Calibri";
    background-color: #ffffff;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Tahoma";
    font-weight: 550;  
    color: #0F172A;
              
}

a {
    border: none; 
    font-weight: bold;
    font-family: "Calibri";
    box-shadow: none;
    transition: 
    background-color 0.2s ease,
    transform 0.2s ease;

} 


a:hover {

    transform: translateY(-2px);
}

section {
    scroll-margin-top: 100px;
}

.section-title {
    text-align: center;
    margin-top: 20px;
    font-size: 25px;
}



/* ==========================================
   Navigation Bar
   ========================================== */

header {
    display: flex;                          /* Put children next to each other */
    justify-content: space-between;
    font-family: "Plus Jakarta Sans";  
    align-items: center;                    /* Vertically center everything */
    gap: 40px;                              /* Space between logo section and navigation */
    font-weight: 600;
    padding: 15px 30px;                     /* Space inside navbar */
    background-color: #ffffff;
    border-bottom: 1px solid #cdcdd4;
    position: sticky;
    top: 0;
    z-index: 1000;

}



/* ==========================================
   Logo Section
   ========================================== */


/* Holds the logo and hospital name */
.logo-section {
    display: flex;
    align-items: center;                    /* Centers logo and text vertically */
    gap: 10px;                              /* Space between logo and text */
    padding-left: 6px;
}

/* Hospital logo */
.corner-logo {
    width: 50px;
    height: 50px;
    filter: invert(30%) sepia(93%) saturate(3750%) hue-rotate(253deg) brightness(83%) contrast(104%);
    opacity: 75%;
}


/* ==========================================
   Hospital Name
   ========================================== */

.hospital-name h5 {
    margin: 2px;
    font-size: 10px;
    color: #A7A7A9;
}
.hospital-name h2 {
    margin: 2px;
    font-size: 22px;
    color: #0F172A;
}

.hospital-name p {
    margin: 2px;
    font-size: 15px;
    color: #4A2DBF;
    
}


/* ==========================================
   Navigation Buttons Section
   ========================================== */

/* Gives the navigation its own area */
.navbar {                               /* Take up remaining horizontal space */
    display: flex; 
    justify-content: space-evenly;
    padding-left: 10px;    
           
}


/* ==========================================
   Navigation Links
   ========================================== */

.nav-links { 
    display: flex;                          /* Put links in one row */
    align-items: center;
    gap: 20px;                              /* Space between buttons */                      /* Remove bullet points */
    margin: 0;
    padding: 0;
}


/* ==========================================
   Navigation Buttons
   ========================================== */

.nav-links a {

    background: none;                       /* Remove default button background */
    padding: 10px;
    font-size: 17px;
    cursor: pointer;                      /* Cursor becomes a hand */
    display: inline-block;
    
    font-family: "Calibri";
    transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
.active {
    color: #4A2DBF;
    text-decoration: underline; 
    text-underline-offset: 10px;
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness 0.2s ease;
    transform: translateY(-2px);
    font-weight: 700;
}
 
.inactive {
    color: #64748B;
    font-weight:500;
    text-decoration: none;

}
.nav-links a:hover {
    color: #4A2DBF;             /* Changes text color */
    border: none;
    text-decoration: underline; /* Displays the underline */
    text-underline-offset: 10px;
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness 0.2s ease;
    transform: translateY(-2px);
}

/* ==========================================
   Log in Button
   ========================================== */

.login-div {                      
    margin-left: 40px;

}

.login-button {
    background-color: #4A2DBF;                       
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.login-button:hover {
    background-color: #3F249E;
}

/* ==========================================
   Hero Section
   ========================================== */

.hero {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color:  #f6f3ff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


.hero-learn-logo {
    width: 22px;
    height: 25px;
    filter: invert(30%) sepia(93%) saturate(3750%) hue-rotate(253deg) brightness(83%) contrast(104%);

}
.left-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}
.hero-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-left: 70px;

}
.hero-text h1 {
    color: #463f62;
    margin: 2px;
    font-size: 45px;
}

.hero-text h3 { 
    margin: 2px;
    font-size: 45px;
}
.hero-text p {
    line-height: 1.5;
    width: 350px;
}

.hero-buttons {
    display: flex; 
    gap: 20px;
}


.assessment-button {
    margin-left: 70px;
    width: fit-content;
    height:fit-content;
    background-color: #4A2DBF;                       
    font-size: 18px;
    color: #ffffff;
    padding: 15px 25px;
    font-weight: 500;
    border-radius: 4px;
    display: flex;
    align-items: center;
    
}
.assessment-button:hover {
    background-color: #3F249E;
}
.learn-button {
    width: fit-content;
    height: fit-content;
    background-color: #ffffff;   
    padding: 15px 25px;                    
    font-size: 18px;
    color: #4A2DBF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    border: 1px solid #4A2DBF;
    transition: 
        background-color 0.2s ease,
        transform 0.2s ease;
    
    
}

.learn-button:hover {
    background-color: #e3dcff;
    transform: translateY(-2px);
}


.hospital-image {
    width: 500px;
    height: auto;
    display: block;
    border-radius: 8px;
    margin-right:50px;
    position: relative;
    z-index: 2;
    border: 1px solid #000000;
}






/* ==========================================
   Features Section
   ========================================== */

.three-feature-cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    margin-top: 0px;
    padding-bottom: 20px;
}

.feature-card {
    width: 250px;
    min-height: 200px;
    padding: 20px;
    border: 1px solid #bbbbbb;
    border-radius: 4px;    
    box-sizing: border-box;
    text-align: center;
    align-items: center;
}

.feature-card h3 {
    font-size: 14px;
}

.feature-card p {
    max-width: 200px;
    font-size: 12.5px;
    margin: 0 auto;
    line-height: 1.5;
    text-align: center;
}

/* ==========================================
   Journey Section
   ========================================== */

.journey-section {
    padding: 10px 0px;
    background-color:  #f6f3ff;

}
.journey-content {
    display: flex;
    justify-content: center;
    align-items: center;    
    gap: 30px




}

.journey-section h3 {
    margin: 0px;
    margin-top: 10px;
}
.journey-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px 60px;
    gap: 7px;


}

.journey-icon-text-div {
    display: flex;
    align-items: center;
    margin-left: 100px;
    align-items: flex-start;

}

.journey-step-text h4,.journey-step-text p {
    margin: 2.5px;
}


.journey-step-text p {
    margin-left:25px;
    color: #7c7979;
    font-weight: bold;
    font-size:15px;
}
.journey-step-text {

    width: 300px;

    background-color: #FFFFFF;
    border:  1px solid #4A2DBF;
    border-radius: 8px;

    display: flex;
    flex-direction: column;

    gap: 2.5px;
    padding: 10px;
}

.journey-step-text h4 {
    display: flex;
    align-items: center;

}

.computer{
    width: 730px;
    height: 530px;
    margin-top: 30px;
    transform: translatex(-30px);
    margin-left: 10px;
}

/* ==========================================
   Mission Section
   ========================================== */
.mission-section {
    margin-bottom: 20px;
    margin-top: 20px;
}
.mission-section h1{
    margin-bottom: 5px;
    line-height: 1.5;

}
.mission-title {
    margin-left: 70px;
    font-size: 37px;
}

.purple-text {
    color: #4A2DBF;
}

.mission-descript {
    margin-top: 30px    ;
    margin-left:75px;
    color: #7c7979;
    font-weight: bold;
    font-size:16px;
    width: 520px;
    line-height: 1.5;
}
.all-mission-text-div {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    transform: translateX(-5px);

    
}
.mission-icon-text-div {
    display: flex;
    margin-left: 80px;
    align-items: flex-start;

    gap:5px;
}

.mission-icon {
    transform: translateY(5px);
}  

.mission-step-text h4,.mission-step-text p {
    margin: 2.5px;
    line-height: 1.25;
    letter-spacing: 0.25px;
}

.mission-step-text h4 {
    color: #3F249E;
    font-size:20px;
    font-weight: 550;
}
.mission-step-text p {
    color: #7c7979;
    font-weight: 550;
    font-size:17px;
}
.mission-step-text {
    margin: 0px 0px;
    width: 330px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.mission-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transform: translateY(-20px);
    gap: 0px;

}
.mission-image-wrapper {

    margin-top: 35px;
    transform: translateX(-60px);
}

.mission-volunteer-image {
    width: 550px;
    height: 550px;
    border-radius: 8px;
    border: 1px solid #000000;
    display: block;
    z-index: 2;
    position: relative;
}



/* ==========================================
   FAQ Section
   ========================================== */
.FAQ-section {
    padding-top: 5px;
    padding-bottom: 30px;
    background-color:  #f6f3ff;
}

.FAQ-title-text{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    gap: 0px;
}

.FAQ-title-text .section-title {
    margin-bottom: 0;
}
.FAQ-title-text h3,
.FAQ-title-text p {
    margin: 0px;
    padding: 0px;
    
}

.FAQ-descript {
    color: #7c7979;
    font-weight: bold;
    font-size:20px; 
    line-height: 1.5;
    text-align: center;
}

.FAQ-content {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.FAQ-dropdowns {
    margin-right: 75px;
    display: flex;
    flex-direction: column;
    gap: 30px;

}
/* Container styling */
.FAQ-dropdown {
    border: 1px solid #bbbbbb;
    width: 650px;
    border-radius: 8px;
    background-color: #ffffff;
}
.FAQ-dropdown-title {
    display: flex;
    align-items: center;
    gap: 15px;

}

/* Header style and layout */
summary {
    color: #162A63;
    font-size: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

/* Inside text box styling */
.FAQ-content-box {
    padding: 15px;
    padding-top:0px;
    background-color: #ffffff;
    border-radius: 8px;
}

.FAQ-content-box p {
    font-size: 16px;
    margin: 0;
    padding: 15px 30px;
    background-color: #f6f3ff;
    border-radius: 8px;

}

.FAQ-contact-p-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.FAQ-contact-us-button {
    background-color: #4A2DBF;                       
    font-size: 14px;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.FAQ-contact-us-button:hover{
    background-color: #3F249E;
}

/* Arrow transition effect */
.arrow {
  transition: transform 0.2s ease;
}

/* Rotates the arrow 180 degrees when open */
details[open] .arrow {
  transform: rotate(180deg);
}

.question-image {
    width: 450px;
    height: 325px;
    display: block;
    border-radius: 8px;
    border: 1px solid #000000;

    margin-left:50px;
    margin-top: 10px;


}

/* ==========================================
   Footer
   ========================================== */
.footer-content {
    padding: 30px 15px;
    background-color: #162A63;

}
.footer-four-separations {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;

}

.footer-line {
    opacity: 75%;
    height: 400px;
    width: 2px;
    background: linear-gradient(to bottom, 
        #d4c4fb 0%,
        #5d00ff 50%,
        #d4c4fb 100%);
    margin: 0px 15px;
} 


.footer-title {
    display: flex;
    align-items: start;                    /* Centers logo and text vertically */
    gap: 10px;                              /* Space between logo and text */
    padding-left: 6px;
}

.footer-title h2 {
    color: #ffffff;
    font-weight: 500;
    font-size: 25px;
}

.footer-title p {
    color: #A77BFF;
    font-weight: 700;
    margin-top: 5px;
}
/* Hospital logo */
.footer-corner-logo {
    width: 75px;
    height: auto 0;
    filter: brightness(0) saturate(100%)
            invert(58%)
            sepia(47%)
            saturate(1458%)
            hue-rotate(218deg)
            brightness(103%)
            contrast(101%);
    opacity: 85%;
}

.footer-hospital-div {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.footer-title-underline {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    border-radius: 8px;
    margin-top: 40px;
    margin-left: 5px;
    background: linear-gradient(to right, #b794f4, #6b46c1);
}

.common-spirit-div {
    margin-top: 10px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: 300px;

}
.common-spirit-div h2 {
    color: #A77BFF;
    font-weight: 600;
    font-size: 16px;
    margin: 12px 0px;

}

.common-spirit-div p {
    color: #ffffff;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.8;
    margin: 0px;
}
.footer-left-icons {
    display: flex;
    justify-content: start;
    gap: 15px;
    margin-left: 10px;
}


.footer-user-icon {
    height: 25px;
    width: 21px;
    box-sizing: border-box;
    filter: invert(100%);
}

.footer-developer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
    margin-top: 20px;
}


.footer-developer-icon {
    height: 35px;
    width: auto;
    box-sizing: border-box;
    filter: brightness(0) saturate(100%)
            invert(58%)
            sepia(47%)
            saturate(1458%)
            hue-rotate(218deg)
            brightness(103%)
            contrast(101%)
            drop-shadow(0 0 0.4px #A77BFF);
}

.footer-developer h5 {
    font-size: 12px;
    color: #ffffff;
    font-weight: 100;
    width: 250px;
    line-height: 1.7;
}
.footer-developer span {
    color: #A77BFF;
    font-weight: 700;
}

.footer-quick-links{
    display: flex;
    justify-content: start;
    flex-direction: column;
}

.footer-image-div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.footer-section-title {
    display: flex;
    justify-content: flex-start;
    align-items:center;
    gap: 10px;
    margin: 10px 20px;
}
.footer-icon {
    box-sizing: border-box;
    filter: brightness(0) saturate(100%)
            invert(58%)
            sepia(47%)
            saturate(1458%)
            hue-rotate(218deg)
            brightness(103%)
            contrast(101%)
            drop-shadow(0 0 0.4px #A77BFF);
}
.footer-section-title h4 {
    font-size: 14px;
    color: #ffffff;
    font-weight: 700;
}


.footer-right-icon {
    box-sizing: border-box;
    filter: brightness(0) saturate(100%)
            invert(58%)
            sepia(47%)
            saturate(1458%)
            hue-rotate(218deg)
            brightness(103%)
            contrast(101%)
            drop-shadow(0 0 0.4px #A77BFF);
}

.footer-location-icon {
    height: auto;
    width: 23px;
}

.footer-phone-icon {
    height: auto;
    width: 25px;
}

.footer-email-icon {
    height: auto;
    width: 25px;
}

.footer-time-icon {
    height: auto;
    width: 28px;
}
.footer-links {
    
    display: flex;
    margin: 20px 15px;
    justify-content: flex-start;
    flex-direction: column;
    gap: 20px;

}

.footer-links a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    background: none;                       /* Remove default button background */
    padding: 10px;
    font-size: 14px;
    cursor: pointer;  
    gap: 10px;
    color: #ffffff;                       /* Cursor becomes a hand */
    font-family: "Calibri";
    transition:
    background-color 0.2s ease,
    transform 0.2s ease;

}
.footer-links a:hover {
    color: #4A2DBF;             /* Changes text color */
    border: none;
    text-decoration-thickness: 2px;
    transition: text-decoration-thickness 0.2s ease;
    transform: translateX(-2px);
}

.footer-contact-us {

    width: 250px
}
.footer-contact-us a {

    font-size: 14px
}

.horizontal-footer-line {
    margin-top: 15px;
    opacity: 75%;
    height: 2px;
    width: 1300px;

    background: linear-gradient(to right, 
        #d4c4fb 0%,
        #5d00ff 50%,
        #d4c4fb 100%);

    transform: translateX(-10px);
} 
.bottom-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;

    padding: 14px 20px;
    font-size: 13px;
}

.bottom-footer-separator {
    opacity: 0.4;
}
.bottom-footer-left-div { 
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 7px;
}
.footer-secure-icon {

    height: 17px;
    width: auto 0;
    box-sizing: border-box;
    filter: brightness(0) saturate(100%)
            invert(58%)
            sepia(47%)
            saturate(1458%)
            hue-rotate(218deg)
            brightness(103%)
            contrast(101%)
            drop-shadow(0 0 0.4px #A77BFF);
}
.bottom-footer h5 {
    color: #ffffff;
    font-weight: normal;
}

.bottom-footer a {
    text-decoration: none;
    color: #ffffff;
    font-weight: normal;
    font-size: 12px
}

.bottom-footer a:hover {
    color: #4A2DBF; 
    background-color: none;            /* Changes text color */
    border: none;
    text-decoration-line: underline;
    text-underline-offset: 5px;
    text-decoration-color: #4A2DBF;
    text-decoration-thickness: 2px;
    transition: text-decoration-thickness 0.2s ease;
    transform: translateY(-2px);
}