/* =========================
   GENERAL
========================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background-color: #F3E7D3;

    color: #4B2E1E;

    font-family: Georgia, serif;

}



/* =========================
   HR
========================= */


hr.style-seven {

    height: 30px;

    overflow: visible;

    border-style: solid;

    border-color: #6F4528;

    border-width: 1px 0 0 0;

    border-radius: 20px;

    margin: 40px 8%;

}


hr.style-seven:before {

    display: block;

    content: "";

    height: 30px;

    margin-top: -31px;

    border-style: solid;

    border-color: #6F4528;

    border-width: 0 0 1px 0;

    border-radius: 20px;

}




/* =========================
   HEADER
========================= */


.head {

    text-align: center;

}



.sub {

    font-size: 90px;

    color: #4B2E1E;


    background: linear-gradient(

        135deg,

        #E8D2B5,

        #F1DEC8

    );


    padding: 35px;


    width: 70%;


    margin: 80px auto 0;


    border: 2px solid #A67C52;


    border-radius: 30px;


    box-shadow:

    0 10px 25px rgba(75,46,30,0.25);


    transition: 0.4s ease;

}




.sub:hover {


    transform: translateY(-8px);


}




.p {


    font-size: 40px;


    width: 50%;


    color: #4B2E1E;


    background-color: #EEDDC8;


    padding: 25px;


    margin: 30px auto 50px;


    border: 2px solid #C19A78;


    border-radius: 60px;


    box-shadow:

    0 10px 25px rgba(75,46,30,0.2);


    transition: 0.4s ease;


}



.p:hover {


    transform: translateY(-4px);


}




/* =========================
   NAVIGATION
========================= */


.nav {


    display: flex;


    justify-content: center;


    align-items: center;


    gap: 17px;


    margin: 30px auto 50px;


}



.nav a {


    color: #FFF8E7;


    background-color: #4B2E1E;


    text-decoration: none;


    font-size: 22px;


    font-weight: bold;


    padding: 12px 25px;


    border: 2px solid #6F4528;


    border-radius: 12px;


    transition: 0.3s ease;


}




.nav a:hover {


    background-color: #D2B48C;


    color: #4B2E1E;


    transform: translateY(-4px);


}




/* =========================
   FEATURED BOOKS
========================= */


.featured {


    text-align: center;


    padding: 50px 20px;


}



.featured h2 {


    font-size: 50px;


    color: #4B2E1E;


    background-color: #E8D2B5;


    width: 600px;


    max-width: 90%;


    margin: 4px auto 50px;


    padding: 15px;


    border: 2px solid #A67C52;


    border-radius: 30px;


    box-shadow:

    0 10px 25px rgba(75,46,30,0.25);


}



.books-container {


    display: flex;


    justify-content: center;


    align-items: stretch;


    flex-wrap: wrap;


    gap: 30px;


}




.book-card {


    width: 250px;


    padding: 25px;


    background: linear-gradient(

        145deg,

        #F1DEC8,

        #E3C5A8

    );


    border: 2px solid #A67B5B;


    border-radius: 20px;


    text-align: center;


    transition: 0.4s ease;


}




.book-card:hover {


    transform: translateY(-10px) scale(1.02);


}




.book-card h3 {


    color: #4B2E1E;


    background-color: #E2C6A8;


    padding: 12px;


    border-radius: 10px;


    font-size: 25px;


}



.book-card p {


    color: #6B4A35;


    font-size: 18px;


}
/* =========================
   BOOK CATEGORIES
========================= */


aside {

    width: 300px;

    max-width: 90%;

    margin: 70px auto;

    padding: 25px;


    background-color: #E8D2B5;


    border: 2px solid #8B6245;

    border-radius: 20px;


    box-shadow:
    0 8px 20px rgba(75,46,30,0.2);


    text-align: center;

}



.book {


    color: #FFF8E7;


    background-color: #4B2E1E;


    padding: 15px;


    border-radius: 12px;


    font-size: 28px;

}



aside ul {


    list-style: none;


    padding: 0;


    margin-top: 20px;


}



aside li {


    background-color: #F5EBDD;


    color: #4B2E1E;


    margin: 10px 0;


    padding: 12px;


    border-radius: 10px;


    font-size: 19px;


    transition: 0.3s ease;


}



aside li:hover {


    background-color: #D2B48C;


    transform: translateX(8px);


}





/* =========================
   BEST SELLERS
========================= */


.best {


    width: 300px;


    max-width: 90%;


    margin: 60px auto 20px;


    padding: 15px 25px;


    text-align: center;


    background-color: #E8D2B5;


    color: #4B2E1E;


    font-size: 40px;


    border: 2px solid #A67C52;


    border-radius: 20px;


}





/* =========================
   TABLE
========================= */


table {


    width: 80%;


    margin: 50px auto;


    border-collapse: collapse;


    background-color: #F5EBDD;


    border-radius: 15px;


    overflow: hidden;


    box-shadow:

    0 8px 20px rgba(75,46,30,0.2);


}




th {


    background-color: #4B2E1E;


    color: #FFF8E7;


    padding: 18px;


    font-size: 22px;


}



td {


    color: #4B2E1E;


    padding: 15px;


    text-align: center;


    border-bottom: 1px solid #C8A98D;


    font-size: 18px;


}



tr:nth-child(even) {


    background-color: #E8D2B5;


}



tr:hover {


    background-color: #D2B48C;


}







/* =========================
   WHY CHOOSE US
========================= */


.why {


    width: 500px;


    max-width: 90%;


    margin: 60px auto;


    padding: 30px;


    background-color: #FAEBDD;


    border: 2px solid #8B6245;


    border-radius: 25px;


    box-shadow:

    0 8px 20px rgba(75,46,30,0.2);


    transition: 0.4s ease;


}



.why:hover {


    transform: translateY(-8px);


}



.us {


    text-align: center;


    font-size: 40px;


    color: #6F4528;


}



.us1 {


    padding-left: 35px;


}



.us1 li {


    background-color: #DEB887;


    color: #6F4528;


    padding: 15px;


    margin: 12px 0;


    border: 1px solid #CD853F;


    border-radius: 12px;


    font-size: 19px;


    transition: 0.3s ease;


}



.us1 li:hover {


    background-color: #CD853F;


    color: #2F1B10;


    transform: translateX(8px);


}
/* =========================
   ORDER FORM
========================= */


.order {

    text-align: center;

    color: #4B2E1E;

    font-size: 50px;

    margin: 70px auto 25px;

}



.for {

    width: 450px;

    max-width: 90%;


    margin: 30px auto;


    padding: 35px;


    background: linear-gradient(

        145deg,

        #E8D2B5,

        #F1DEC8

    );


    border: 3px solid #6F4528;


    border-radius: 20px;


    box-shadow:

    0 10px 25px rgba(75,46,30,0.3);


}



.for label {

    color: #4B2E1E;

    font-weight: bold;

    font-size: 17px;

}



.for input {


    width: 250px;


    padding: 11px;


    margin-left: 10px;


    border: 2px solid #A67C52;


    border-radius: 8px;


    background-color: #FFF8EE;


    color: #4B2E1E;


}



.for input:focus {


    outline: none;


    border-color: #4B2E1E;


}




.fav {


    color: #4B2E1E;


    margin-top: 25px;


}




.for select {


    width: 100%;


    padding: 12px;


    border: 2px solid #A67C52;


    border-radius: 8px;


    background-color: #FFF8EE;


    color: #4B2E1E;


}





.for textarea {


    width: 100%;


    height: 110px;


    padding: 12px;


    border: 2px solid #A67C52;


    border-radius: 8px;


    background-color: #FFF8EE;


    resize: vertical;


}





.for button {


    width: 100%;


    padding: 13px;


    background-color: #6F4528;


    color: #FFF8EE;


    border: none;


    border-radius: 10px;


    font-size: 18px;


    font-weight: bold;


    cursor: pointer;


    transition: 0.3s ease;


}



.for button:hover {


    background-color: #4B2E1E;


    transform: translateY(-3px);


}






/* =========================
   FOOTER
========================= */


.foot {


    background: linear-gradient(

        to right,

        #3B2417,

        #4B2E1E,

        #3B2417

    );


    color: #FFF8EE;


    text-align: center;


    padding: 25px;


    margin-top: 70px;


    font-size: 17px;


    letter-spacing: 1px;


    border-top: 4px solid #A67C52;


}





/* =========================
   RESPONSIVE
========================= */


@media (max-width:700px) {



    .sub {


        font-size: 50px;


        width: 90%;


        padding: 25px;


    }




    .p {


        width: 80%;


        font-size: 25px;


    }




    .nav {


        flex-wrap: wrap;


    }





    .featured h2 {


        font-size: 38px;


    }




    .books-container {


        flex-direction: column;


        align-items: center;


    }





    table {


        width: 95%;


        font-size: 14px;


    }




    th {


        font-size: 16px;


    }




    td {


        padding: 10px;


    }





    .for {


        width: 90%;


    }




    .for input {


        width: 100%;


        margin: 10px 0;


    }



}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 700px) {

    body {
        overflow-x: hidden;
    }

    /* HEADER */

    .sub {
        width: 90%;
        font-size: 48px;
        padding: 20px 10px;
        margin: 40px auto 20px;
    }

    .p {
        width: 85%;
        font-size: 22px;
        padding: 15px;
        margin: 20px auto 35px;
    }


    /* NAVIGATION */

    .nav {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin: 25px auto 35px;
    }

    .nav a {
        font-size: 15px;
        padding: 9px 14px;
    }


    /* FEATURED BOOKS */

    .featured {
        padding: 30px 10px;
    }

    .featured h2 {
        width: 90%;
        max-width: 100%;
        font-size: 32px;
        padding: 15px 10px;
        margin-bottom: 30px;
    }

    .books-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .book-card {
        width: 90%;
        max-width: 320px;
        padding: 20px;
    }

    .book-card h3 {
        font-size: 22px;
    }

    .book-card p {
        font-size: 16px;
    }


    /* CATEGORY */

    aside {
        width: 85%;
        margin: 40px auto;
        padding: 20px;
    }

    .book {
        font-size: 23px;
    }

    aside li {
        font-size: 17px;
        padding: 10px;
    }


    /* BEST SELLERS */

    .best {
        width: 85%;
        font-size: 30px;
        padding: 12px;
    }

    table {
        width: 94%;
        font-size: 13px;
    }

    th {
        font-size: 14px;
        padding: 10px 5px;
    }

    td {
        font-size: 13px;
        padding: 10px 4px;
    }


    /* WHY CHOOSE US */

    .why {
        width: 88%;
        padding: 20px;
        margin: 40px auto;
    }

    .us {
        font-size: 30px;
    }

    .us1 {
        padding-left: 25px;
    }

    .us1 li {
        font-size: 16px;
        padding: 12px;
    }


    /* ORDER */

    .order {
        font-size: 35px;
        margin-top: 45px;
    }

    .for {
        width: 90%;
        max-width: 400px;
        padding: 25px 18px;
    }

    .for label {
        display: block;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .for input {
        width: 100%;
        margin: 5px 0 15px;
    }

    .for select {
        width: 100%;
    }

    .for textarea {
        width: 100%;
        height: 120px;
    }

    .for button {
        width: 100%;
    }


    /* HR */

    hr.style-seven {
        margin: 30px 5%;
    }


    /* FOOTER */

    .foot {
        font-size: 14px;
        padding: 20px;
    }
}


/* =========================
   SMALL PHONES
========================= */

@media (max-width: 400px) {

    .sub {
        font-size: 38px;
        padding: 18px 8px;
    }

    .p {
        font-size: 18px;
    }

    .nav {
        gap: 5px;
    }

    .nav a {
        font-size: 13px;
        padding: 8px 10px;
    }

    .featured h2 {
        font-size: 27px;
    }

    .book-card {
        width: 92%;
    }

    .best {
        font-size: 26px;
    }

    table {
        width: 96%;
    }

    th,
    td {
        font-size: 11px;
        padding: 8px 3px;
    }

    .us {
        font-size: 26px;
    }

    .order {
        font-size: 30px;
    }

    .for {
        width: 94%;
        padding: 20px 12px;
    }
}