* {
    padding: 0; 
    margin: 0; 
} 

body {
    font-family: plus-jakarta-sans, sans-serif; 
    box-sizing: border-box; 
}

/* NAVBAR */

/* #nav {
    display: flex; 
    justify-content: space-between;
    height: 50px;
    align-items: center; 
    color: black;
}  */

/* .logo img {
    height: 50px; 
    width: auto; 
} */

.navbar-layout {
    position: relative;
    display: flex;
    align-items: center;
    height: 100px;
}

/* Center logo absolutely */
.navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Menu aligned right */
.menuOptions {
    margin-left: auto;
}

.menuOptions a {
    color: black;
    font-weight: 500;
    text-decoration: none;
}

.callInfo {
    font-family: manrope, sans-serif;
}

.callNumber {
    font-size: 12px;
    font-weight: bold;
}

.callText {
    font-size: 9px;
}



/* HERO */ 

#hero {
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    gap: 50px;
    height: 100vh; 
    padding: 0 5rem; 
    background: url("bg-image.avif");
    background-size: cover;
    color: #eee;
}

.heroBigText {
    font-size: 5rem; 
    font-weight: 500;
    line-height: 130%;
    margin: 0;
}

.heroSmallText {
    margin: 0;
}

 .solutions {
    display: flex; 
    width: 15%;
    justify-content: space-around;
    align-items: center;
    padding: 3px 3px;
    background-color: greenyellow; 
    color: black;   
}  

/* .solutionsText { 
    padding: 5px; 
    font-size: .6rem;
} */

/* .solutionsArrow {
    background-color: black; 
    color: greenyellow; 
    cursor: pointer;
    border-radius: 20px;
} */

/* Statistics */ 

#statistics {
    height: 60vh;  
}

#statistics header {
    padding: 50px; 
    font-size: 2rem;
}

.stats {
    display: flex; 
    justify-content: space-around; 
} 

.dataNumber {
    text-align: center; 
    color: #333;
    font-size: 4rem;
} 

.dataText {
    color: #555; 
    font-size: 1.3rem;
}

/* SPECIALIZATION */ 

#specialization {
    height: 80vh; 
    display: flex; 
    justify-content: space-between;
    padding: 0 100px;
} 

.spText {
    display: flex; 
    flex-direction: column; 
    width: 30%; 
    gap: 20px;
} 

.spTextHeader {
    font-size: 3rem; 
    margin: 0;
} 

.spText img {
    width: 50px; 
    height: 50px;
}

.spContact {
    display: flex; 
    background-color: greenyellow; 
    color: black;  
    padding: 3px 3px;
    width: 60%;
    justify-content: space-around;
    align-items: center;
} 

/* .spContactText { 
    padding: 5px; 
    font-size: .7rem;
} */

/* .spContactArrow {
    background-color: black; 
    color: greenyellow; 
    cursor: pointer;
    padding: 3px 5px; 
    border-radius: 20px;
}  */

/* .spImg {
    width: 30%; 
    height: 500px; 
    overflow: hidden; 
}

.spImg img {
    height: 200%; 
    width: auto; 
    object-position: bottom;
    
} */

.spImgLabel {
    text-align: center; 
    font-size: 1.5em;
} 

.spImgInner {
    height: 400px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.spImgInner > div {
    flex: 1;
    overflow: hidden;
}

.spImgInner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* SERVICES */ 

#services {
    height: 100vh; 
    padding: 0 200px; 
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
}

.servicesHeader {
    font-size: 2rem; 
    text-align: center;
}

.serviceCards {
    display: flex; 
    gap: 30px;
}

.cardHeader {
    font-size: 1.5rem;
} 

.cardBody {
    color: #222;
} 

/* VISION */ 

#vision {
    height: 90vh;  
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: column; 
    background-image: url("wheat.png"); 
    background-size: cover;
}

.visionImg {
    width: 38%; 
    height: 280px; 
    overflow: hidden;  
} 

#vision img {
    height: 100%; 
    width: 100%;
} 

.visionTextHeader {
    font-size: 1.7rem; 
    line-height: 120%;
}

.visionTextBody {
    font-size: 4rem; 
    line-height: 110%;
} 

.visionLabel {
    line-height: 120%; 
    letter-spacing: -1px;
}

/* CHOOSE */ 

#choose {
    display: flex; 
    flex-direction: column;
    justify-content: space-around; 
    align-items: center; 
    font-family: archivo, sans-serif; 
    font-weight: 400;
} 

.vh-120 {
    height: 120vh;
}

.chooseText {
    width: 100%;
    display: flex;
    justify-content: space-between;
} 

.chooseLeftHeader {
    font-size: 2.5rem;
} 

.chooseLeftBody {
    font-size: 1.5rem; 
    letter-spacing: -1px; 
    line-height: 95%;
}

.chooseRight {
    font-size: 3.5rem;
} 

/* LOCATION */ 

#location {
    height: 90vh; 
}

.locationInfo {
    display: flex; 
    flex-direction: column;
}

.locationDetailsContainer {
    display: flex; 
    flex-direction: column; 
    background-color: #e5e5e5; 
    font-size: 1.2rem;
}

.locationDetails {
    display: flex; 
}

.locationImage { 
    width: 98%; 
    height: auto;
}

/* FAQ */ 

#faq {
    height: 100vh;
    background-color: #2a834f;
    color: white; 
    font-family: outfit, sans-serif;
}

.faqTextHeader {
    font-size: 3rem;
    font-weight: bold;
}

.faqTextBody {
    font-size: 20px;
}

.accordion {
    font-family: outfit, sans-serif;
}

#contact {
    height: 80vh; 
    background-image: url("contact_bg.png"); 
    background-size: cover;
    font-family: archivo, sans-serif;
}

.contactHeader {
    font-size: 4rem; 
    color: white; 
    line-height: 100%;
}

.contactBody {
    color: white; 
    font-size: 1.3rem; 
    line-height: 100%;
} 

.contactButton {
    color: white; 
    border: none;
}

/* INPUT SHELL (looks like input) */
.contactInputSection {
    display: flex;
    align-items: center;
    width: 50%;
    height: 56px;
    background: white;
    border-radius: 50px;
    padding: 6px;
}

/* REAL INPUT */
.contactInputSection input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    font-size: 0.9rem;
    padding: 0 16px;
    background: transparent;
    color: #000;
}

.contactInputSection input::placeholder {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* PILL BUTTON INSIDE */
.contactPill {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 0 16px;
    background-color: greenyellow;
    border: none;
    border-radius: 40px;
    cursor: pointer;
}

/* ARROW */
.contactPill img {
    height: 100%;
    padding: 10px;
    background: black;
    border-radius: 50%;
}

.contactPill span {
    font-size: .8rem; 
}

/* FOOTER */ 

footer {
    height: 60vh; 
    background-color: #1e1f17;
    color: white;
}

/* Footer logo only */
.footerLogo img {
    height: 42px;
    width: auto;
}

/* Social icons under logo */
.desc > div:last-child img {
    height: 50px;
    width: auto;
    margin-right: 12px;
}

/* Explore & contact icons */
.explore img {
    height: 10px;
}

.footerContact img {
    height: 13px;
}


.desc {
    gap: 20px; 
    font-size: .9rem;
}

.exploreHeader, .footerContactHeader { 
    font-size: 1.2rem;  
    /* border-bottom: 5px solid #2a834f; */
}

.exploreBody {
    font-size: .9rem; 
    color: #e5e5e5;
}

/* hr {
    height: 10px;
    color: #2a834f;
} */

/* .explore img {
    height: 10px;
}

.footerContact img {
    height: 13px;
} */

.footerContact {
    font-size: .9rem;
}

.contactInput input, input:focus {
    height: 50px;
    width: 270px;
    font-size: .8rem;
    border: 0;
    outline: none;
    border-bottom-left-radius: 10px; 
    border-top-left-radius: 10px;
}

.sendCont {
    height: 50px; 
    width: 50px;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px;
}

#copyright {
    height: 10vh; 
    background-color: #1f1e17; 
    color: #a5a49a; 
    font-size: .8rem;
}

@media (max-width: 768px) {

    /* GLOBAL SAFETY */
    body {
        overflow-x: hidden;
    }

    section {
        height: auto !important;
        padding: 40px 20px !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* NAVBAR */
    .menuOptions {
        display: none;
    }

    /* HERO */
    #hero {
        padding: 40px 20px;
    }

    .heroBigText {
        font-size: 2.2rem;
        width: 100% !important;
        line-height: 1.2;
    }

    .heroSmallText {
        width: 100% !important;
        font-size: 1rem;
    }

    .solutions {
        width: fit-content;
        padding: 6px 12px;
    }

    /* STATISTICS */
    .dataNumber {
        font-size: 2.5rem;
    }

    .dataText {
        font-size: 1rem;
    }

    /* SPECIALIZATION */
    #specialization {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }

    .spText,
    .spImg {
        width: 100%;
    }

    .spImg img {
        height: auto;
    }

    /* SERVICES */
    #services {
        padding: 40px 20px;
    }

    .serviceCards {
        flex-direction: column;
        gap: 20px;
    }

    /* VISION */
    #vision {
        padding: 40px 20px;
    }

    .visionContent {
        flex-direction: column;
        gap: 20px;
    }

    .visionImg {
        width: 100%;
        height: auto;
    }

    .visionTextBody {
        font-size: 2.2rem;
    }

    /* CHOOSE */
    .chooseLeft,
    .chooseRight {
        width: 100%;
        text-align: center;
    }

    .chooseRight {
        font-size: 2rem;
        margin-top: 20px;
    }

    /* LOCATION */
    .locationContainer {
        flex-direction: column;
        gap: 20px;
    }

    .locationInfo,
    .locationImage {
        width: 100%;
    }

    /* CONTACT */
    #contact {
        height: auto;
        padding: 40px 20px;
    }

    .contactContent {
        width: 100% !important;
    }

    .contactHeader {
        font-size: 2.2rem;
    }

    .contactBody {
        font-size: 1rem;
    }

    .contactButton {
        width: 100% !important;
    }

    /* FOOTER */
    footer {
        height: auto;
        padding: 40px 20px;
    }

    footer .col-6 {
        width: 100%;
    }

    footer .row {
        gap: 30px;
    }

    #copyright {
        height: auto;
        padding: 15px;
        flex-direction: column;
        text-align: center;
        gap: 6px;
    }
}