body{
        font-family: "montserrat", sans-serif; 
        margin: 0;
        padding: 0;
        background-image: url('https://raw.githubusercontent.com/Revou-FSSE-Jun25/milestone-1-ingenioust91/refs/heads/main/assets/background.png'); 
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

/* -------------css for landing page------------*/
    .navigation-bar {
        position: fixed;
        height : 10%;
        width: 100%;
        background-color: white;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
        display: grid;
        grid-template-columns: 15% 60% 15%;
        align-content: center;
        padding-left: 5%;
        padding-right: 5%;
        z-index: 9999; 
    }

    /* .navigation-bar.solid {
        background-color: rgba(255, 255, 255);
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
    } */

    .navigation-bar .logo {
        justify-self: left;
        height: 2rem;
    }

    .navigation-bar .hamburger {
        visibility:hidden;
        height: 2rem;
        justify-self: end;
    }
    
    .navigation-bar nav {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    nav a {
        font-size: clamp(0.9rem, 0.7rem + 0.5vw, 1.25rem);
        padding-right: 30px;
        color:black;
        text-decoration: none;
    }

    #navigation-mobile{
        display: flex;
        justify-content: space-between;
        position: fixed;
        z-index: 9999; 
        top: 10%;
        height : 20%;
        width: 100%;
        background-color: rgba(255, 255, 255);
        visibility: hidden;
    }

    #navigation-mobile ul {
        list-style-type: none;
        text-align: left;
        font-size: clamp(0.9rem, 0.7rem + 0.5vw, 1.25rem);
        line-height: 2rem;
    }

    #navigation-mobile .closebutton {
        margin-right: 5%;
    }

    .landing-page {
        height: 100dvh;
        display: grid;
        grid-template-rows: 90% 10%;
    }

    header .main-banner {
        align-content: center;
        margin-left: 10%;
        margin-right: 10%;
    }

    h1 {
        text-align: center;
        font-size: clamp(1.8rem, 1.2rem + 3.2vw, 3.75rem);
        font-weight:bold;
    }

    header h2 {
        text-align: center;
        font-size: clamp(1rem, 0.85rem + 1vw, 1.6rem);
        font-weight: bold;
    }

    header h3 {
        background-color: black;
        color: white;
        text-align: center;
        font-size: clamp(0.6rem, 0.5rem + 0.6vw, 1rem);
        font-weight: bold;
        margin: 0;
        align-content: center;
    }

/*-------------end of css for landing page-------------*/

    p { font-size: clamp(0.6rem, 0.75rem + 0.6vw, 1rem);}

    .block-text{
        display: inline;
        padding-left: 25px;
        padding-right: 25px;
        background-color: black;
        color:white;
        border-radius: 50px;
    }

    button{
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 50px;
        background-color:#a9ff39;
        color: black;
        font-family: montserrat;
        font-weight: bold;
        font-size: clamp(1rem, 0.85rem + 1vw, 1.6rem);
        border: none;
        cursor: pointer;
        margin: auto;
    }

    .button1:hover {
        background-color: white;
    }
        
    h2, h3{
        font-weight: bold;
        text-align: center;
    }

    .body-text{
        font-size: clamp(0.6rem, 0.75rem + 0.6vw, 1rem); 
        font-weight: normal;
        text-align: center;
    }

/* ---------------CSS for service section--------------- */
    #service-section {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        height: 100dvh;
        margin-left: 10%;
        margin-right: 10%;
    }

    #service-section h4 {
        align-content: center;
    }

    .service-grid {
        height: 100%;
        display: grid;
        grid-template-rows: 25% 25% 25% 25%;
        grid-template-columns: 50% 25% 25%;
        justify-content: center;
        gap: 3% 2%;
    }

    .service-1 {
        align-self: center;
        font-size: clamp(1rem, 0.8rem + 1vw, 1.6rem);
    }

    .service-grid section:nth-of-type(1){
        grid-row : 2/4;
    }

    .service-grid section:nth-of-type(2){
        grid-row : 2/3;
    }

    .service-grid section:nth-of-type(3){
        grid-row : 2/3;
    }

    .service-grid section:nth-of-type(4){
        grid-row : 3/4;
    }

    .service-grid section:nth-of-type(5){
        grid-row : 3/4;
    }

    .service-grid section:nth-of-type(6){
        grid-column: 1/4;
        grid-row : 4/5;
    }

    .service-1 h2 {
        margin: 0;
        text-align: left;  
    }

    .service-2 {
        border-radius: 10px;
        background-color: white;
        align-content: center;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
    }

     .service-2 h3 {
        margin: 0;
     }   

    .service-2 .my-flex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .image-service {
        width: 30%;
    }

    #service-section h4 {
        height: 10%;
        margin: 0;
    }

/* ---------------end of CSS for service section--------------- */

/* ---------------CSS for project section--------------- */
    #project-section {
        height: 100dvh;
        display: flex;
        margin-left: 15%;
        margin-right: 15%;
        justify-content: center;
        flex-direction: column;
    }

    #project-section h2 {
        height: 15dvh;
        margin: 0;
        align-content: center;
    }

    .scrollbar {
        height: 70dvh; 
    }

    .project-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 2%;
        height: 100%;
    }

    .border-project{
        flex: 1 1 0;
        border-radius: 20px;
        background-color: white;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        display: block;
    }

    .border-project p,
    .border-project h3,
    .border-project a {
        padding-left: 8%;
        padding-right: 8%;
        text-align: center;
        display: block;
    }

    .image-project {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

/* ---------------end of CSS for project section--------------- */

/* ---------------CSS for contact section--------------- */
    #contact-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 25%;
        margin-right: 25%;
    }

    #contact-section h2 {
        margin-top: 0;
    }

    #cust-name, #cust-email, #cust-project{
        font-family: montserrat; 
        font-size: 10px;
        background: none;
        border: 0px;
        width: 100%;
    }

    hr{ height: 1px; border-width:0; background-color: gray}

    #submit-form {
        display: flex;
    }

/* ---------------end of CSS for contact section--------------- */

/* ---------------CSS for footer--------------- */
.footer-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer h4 {
    text-align: center;
    font-size: 12px;
}
footer i {
    font-size:30px;
    color: black;
    padding-left: 5px;
    padding-right: 5px;
}

/* ---------------end of CSS for footer--------------- */

/* ---------------responsive CSS--------------- */
@media only screen and (max-width: 992px) {

/* css for landing page */
    .navigation-bar .hamburger {
        visibility:visible;
    }

    #navigation-mobile{
        visibility: hidden;
    }

    header h1, header h2 {
    text-align: start;
    }

    .navigation-bar nav {
        visibility: hidden;
    }

/* css for service section */
    #service-section {
        margin-left: 15%;
        margin-right: 15%;
    }

    .service-grid {
        display: grid;
        margin-left: 10%;
        margin-right: 10%;
        height: 55%;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 50% 50%;
        align-content: center;
        justify-content: center;
        gap: 3% 2%;
    }

    .service-grid section:nth-of-type(1){
        grid-column : 1/3;
        grid-row: 1/2;
    }

/* css for project section */
    #project-section {
        overflow: hidden;
        margin-left: 10%;
        margin-right: 10%;
    }

    .border-project {
        min-width: 50vw;
        max-width: 70vw;
        scroll-snap-align: start;
    }

    .scrollbar {
        height: 60%;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
    }

    .project-flex {
        display: flex;
        height: 100%;
        justify-content: center;
        width: max-content;
        animation: slideX 12s linear infinite;
    }

    #project-section h2 {
        margin-bottom: 5%;
        margin-top: 10%;
    }

/* css for contact section */
    #contact-section {
        margin-left: 15%;
        margin-right: 15%;
    }
        
}

@media only screen and (max-width: 576px) {

    #service-section {
        margin-left: 15%;
        margin-right: 15%;
    }

/* css for project section */
    .border-project {
        min-width: 40vw;
    }

    #project-section h2 {
        margin-bottom: 5%;
        margin-top: 10%;
    }

}