/* Gobal style */
html { 
    font-size: 16px ;
    font-family: "Mulish", sans-serif ;
}

body { 
    margin: 0;
    padding: 0;
    width: 100%;
}

@media only screen and (max-width:768px) {
    .body { 
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
        max-width: 100%;
    }
}



/* Navigation bar */
.top_nav { 
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
}

.top_nav .nav_logo { 
    width: 15%;
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: left;
    align-items: center;
}

.top_nav .nav_logo img { 

    width: 90% ;
    height: 90%;
    object-fit: contain;
    padding: 0;
    padding-left: 2rem;
}

.top_nav .nav_list { 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: "Mulish";
    font-size: 13px ;
    color: #364049;
    width: 100%;
    padding-left: 4rem;
    
}

.top_nav .nav_list ul { 
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
    align-items: center;
    padding: 1rem;
}

.top_nav .nav_list li { 
    list-style-type: none;
    align-items: center;
    cursor: pointer;
}




.top_nav .nav_icon {
    display: flex;
    width: 80%;
    flex-direction: row;
    column-gap: 1.5rem;
    align-items: center;
    padding-right: 1.5rem;
}



.top_nav .nav_icon button { 
    border: none;
    cursor: pointer;
    appearance: none;
    background-color: inherit;
}

.nav_icon .btn_search { 
    margin-left: auto;
}


.dropdown_menu select { 
    border:  none;
    outline: none;
    color: #364049;
    font-family: "Mulish";
}

#menu_toggle { 
    display: none;
}

.top_nav .hidden_menu .menu_box { 
    display: none;
}


/* For hidden menu hidden in normal status */
@media only screen and (min-width: 768px) { 
    .top_nav .hamburger_menu { 
        display: none;
    }

   



}




/* ...for small screen size...  */

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

    .top_nav { 
        padding: 1rem 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

     .top_nav .nav_list { 
        display: none;
     }

     .top_nav .nav_logo { 
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        width: 40%;
     }


     .top_nav .nav_icon .dropdown_menu { 
        display: none;
     }

     .top_nav .nav_icon { 
        width: 30%;
     }

     .top_nav .nav_logo img { 
        padding: 0;
        width: 40%;
        object-fit: contain;
    
     }

     .top_nav .nav_icon { 
        column-gap: 0.8rem;
     }


     /* Hamburger menu */

     .top_nav .hamburger_menu { 
        display: flex;
        justify-content: start ;
        align-items: center;
        width: 30%;
     }

     .top_nav .checkbtn { 
        cursor: pointer;
        display: flex;
        padding-left: 1rem;
        justify-content: center;
        align-items: center;
     }

     .top_nav .checkbtn img { 
       object-fit: contain;
       width: 100%;
       height: 100%;
     }
     
     .top_nav input { 
        display: none;  /* hidden checkbox by default */
     }

     .top_nav .h_menu_content { 
        display: none;  /* hidden dropdwon menu by default */ 
     }

     #check:checked ~ .h_menu_content {  
        /*  above selector will made the element display with 2 condition 
        1. checkbox is checked 
        2. elements after (id:check) and under same parent element 
          */
        display: block; /*  display the dropdown menu   */
        position: absolute;
        top: 4.7rem;
        background-color: white ;
        padding: 1rem;
        left: 0.025rem;
        width: 280px;
     
     }

     .top_nav .h_menu_content ul { 
        list-style-type: none;  /*remove bullet point in list*/
        padding: 0;
     }

     .top_nav .h_menu_content ul li a  { 
        text-decoration: none;
        line-height: 4;
        color: #364049;
        font-family: "Mulish";
        cursor: pointer;
     }

     #check:checked + .checkbtn  { 
        content: url("images/img_close.png");
     }

} 




/* Main Content */


/* Banner */

.banner { 
    display: flex;
    flex-direction: row;
    flex-shrink: 1;
    width: 100%;
}

.banner .banner_img { 
    width: 50%;
}

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

.banner .banner_text { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f0f1f3;
    width: 50%;
    /*padding: 3rem;*/
    color: #364049;
    line-height: 1.8rem;
}

.banner .banner_text h1 { 
    display: flex;
    font-size: 3.75rem;
    white-space: nowrap;
    
}

.banner .banner_text p { 
    width: 60%;
    font-size: 16px;
}

.banner .banner_text h3 { 
    color:   #ff7f50;
    font-size: 18px;
}

.banner .banner_text button { 
    border: 1px solid  #ff7f50 ;
    border-radius: 2rem;
    padding: 1rem 3rem;
    font-family: "Mulish";
    font-size: 0.8rem;
    cursor: pointer;
    margin-bottom: 2rem;
}

.banner .banner_text button:hover { 
    background-color: #ff7f50;
    color: white;
}

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

    .banner { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100% ;
    }

    .banner .banner_text { 
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }


    .banner .banner_text button { 
        margin-bottom: 2rem;
    }

    .banner .banner_img { 
        width: 100%;
    }

}






/* Quotation */

.quotation { 
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10rem 5rem;
}

.quotation h1 { 
    font-size: 1.75rem;
    width: 60%;
    font-family: "Space Grotesk", sans-serif;
    color: #364049;
}

.quotation h4 { 
    color: #364049;
}


.quotation h4 a { 
    text-decoration: none;
    color: #ff7f50;
}

.quotation h4 a:visited, a:active, link { 
    text-decoration: none;
}


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

    .quotation{ 
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5rem;
        color: #364049;
    }

    .quotation h1 { 
        font-size: 28px ;
        font-family: "Space Grotesk", sans-serif;
        line-height: 1.5;
    }

    .quotation h4 { 
        width: 70%;
    }
}






/* Map Section */

.map_section { 
    display: flex;
    flex-direction: row;
    width: 100%;
}

.map_section .map_text h2 { 
    color: #ff7f50;
}

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

.map_section .map { 
    width: 50%;
}


.map_section .map_text { 
    width: 50%;
    background-color: #f0f1f3;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.map_section .map_text p { 
    line-height: 2;
    width: 70%;
    color: #364049;
}



.map_text .map_search { 
    border: 1px solid  #403f3d; 
    display: block;
    background: transparent url("images/img_search.png") no-repeat center left 0.5rem ;
    padding: 0.5rem 1.9rem ;
    background-size: 1rem;
    border-radius: 2rem;
}

@media only screen and (max-width: 768px) { 
    .map_section{ 
        display: flex;
        flex-direction: column;
    }

    .map_section .map { 
        width: 100%;
        height: 100%;
    }

    .map_section .map img { 
        object-fit: cover;
        width: 100%;
        height: 100%;
        display: block;

    }
    
    .map_section .map_text { 
        width: 100%;
        padding: 0;
    }

    .map_section .map_text p { 
        width: 80%;
        
    }

    .map_section .map_text { 
        padding-bottom: 2rem;
    }
}





/* Subscribtion section */

.subscribtion { 
    display: flex;
    flex-direction: row;
    width: 100%;
}

.subscribtion .subscribtion_text { 
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #364049;
}

.subscribtion_text p { 
    width: 75%;
    line-height: 2;
}

.subscribtion .subscribtion_img { 
    width: 50%;
}

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

.signup #useremail { 
    padding: 0.5rem;
    border-radius: 1rem;
    outline: none;
    border: 2px solid #403f3d;

}

.signup button { 
    padding: 0.6rem;
    background: transparent;
    border: none;
    background-color: #ff7f50;
    color: white;
    cursor: pointer;
    border-radius: 1rem;
}

@media only screen and (max-width: 768px) { 
    .subscribtion { 
        padding: 8rem 0;
    }
}







/* Booksuggest */

.hr_line { 
    width: 95%;
    margin: 2rem auto;
}

.booksuggest { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2rem auto; 
    padding: 5rem 1rem;
    row-gap: 2rem  ;
}

.booksuggest h2 { 
    color: #364049;
    font-family: "Space Grotesk", sans-serif;
    font-weight: bolder
}

.booksuggest .book_container { 
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0.5rem;
}

.booksuggest .book_detail img { 
    width: 90%;
    height: 90%;
    object-fit: cover;
    border: 0.1rem solid #9a9a9a;
}

.book_container .book_detail { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 1.5rem;
}

.book_container .book_detail h3 { 
    padding: 0;
    margin: 0;
    font-size: small;
    color: #364049;
    font-family: "Mulish", sans-serif;
}

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

    .booksuggest { 
        padding: 0 ;
        margin: 0;
    }
    .booksuggest .book_container { 
        display: flex;
        flex-direction: column;
        row-gap: 5rem ;
        grid-template-columns: none;
        width: 50%;
        height: 50%;
    }


    .book_detail img { 
        width: 50%;
        height: 50%;
    }
}



/* Other organization*/

.other_organization { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5rem 0;
    margin-bottom: 2rem;
}

.other_organization h2 { 
    color: #364049;
    font-family: "Space Grotesk", sans-serif;
}

.other_organization .org_list { 
    display: grid;
    padding: 1rem;
    width: 80%;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2rem;
    justify-items: center;
}

@media only screen and (max-width: 768px) { 
    .other_organization .org_list { 
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 4rem;
        column-gap: 4rem;
    }
}





/* Footer */

footer { 
    display: flex;
    flex-direction: column;
    background-color: #f0f1f3;
    padding-top: 5rem;
}

footer .footer_top { 
    display: flex;
    flex-direction: row;
}



footer .footer_left { 
    width: 40%;
    display: flex;
    flex-direction: column ;
    row-gap: 2rem  ;
    justify-content: center;
    align-items: center;
}

footer .footer_left .footer_logo { 
    width: 50%;
    display: flex;
    justify-content: center;
}


footer .footer_left .footer_logo img{ 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer_left .media_list { 
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 1.5rem;
}

footer .footer_right { 
    width: 60%;
}


footer .footer_bottom { 
   margin: 1.8rem auto;
    width: 80%;
}


footer .footer_bottom ol { 
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    padding: 0;
}

.footer_bottom  li { 
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-weight: lighter;
    font-family: "Mulish", sans-serif ;
    font-size: 0.875rem;
    color: #364049;
}

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

    footer { 
        width: 100%;
    }

    footer .footer_right { 
        width: 50%;
    }

    footer .footer_left { 
        width: 50%;

    }

    footer .footer_right p { 
        width: 60%;
    }

    footer .footer_bottom { 
        width: 90%;
    }

    footer .footer_bottom ol { 
        column-gap: 2rem;
    }

    footer .footer_bottom ol li { 
        text-align: center;
    }
}