@import "tailwindcss";


/* fonts */
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");

/* for all */
* {
  font-family: "Afacad", sans-serif;
  color: var(--text-color);
}

body {
  margin-top: 120px;
  background-color: var(--secondary-color);
  color: #fff;
  transition: 0.3s;
}
body.light-mode {
  --main-color: #206a83;
  --secondary-color: #e7f9ff;
  --bg-color: #15556a;
  --text-color: #dee8eb;
  --text-bg: #b4e5e5;
  --btn-color: #e7f9ff;
  --p-color: #1e3137;
  --glass-bg: rgba(14, 246, 204, 0.15);
  --glass-border: rgba(14, 246, 204, 0.3);
  --active-color: #e7a20c;
}
:root {
  --main-color: #96b7da;
  --secondary-color: #1b2223;
  --bg-color: #3a4f50;
  --text-color: #f4fefd;
  --text-bg: #0f2929;
  --btn-color: #1b2223;
  --p-color: #c1d1cd;
  --glass-bg: rgba(14, 246, 204, 0.15);
  --glass-border: rgba(14, 246, 204, 0.3);
  --active-color: #e7a20c;
}
input,
select,
button {
  border: none;
  outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--main-color);
}
.general-btn {
  background-color: var(--main-color);
  padding: 7px 20px;
  border: none;
  border-radius: 5px;
  color: var(--btn-color);
  font-weight: 500;
  transition: 0.3s;
  cursor: pointer;
}

.general-btn:hover {
  letter-spacing: 2px;
}
.container {
  width: 95%;
  margin: auto;
  max-width: 1350px;
}

@media (max-width: 1350px) {
  .container {
    width: 90%;
  }
}
.active {
  color: var(--active-color) !important;
}

/* Start Header */
header {
  background-color: var(--bg-color);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  .header-nav {
    form {
      margin-top: 5px;
      display: flex;
      align-items: center;
      padding: 0px;
      border: none;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      outline: none;
      transition: box-shadow 0.3s ease;
      input {
        font-size: 15px;
        padding: 5px 15px 5px 10px;
        background: var(--bg-color);
        outline: none;
        border: none;
        color: var(--text-color);
      }

      button {
        height: 55px;
        width: 60px;
        background: var(--main-color);
        font-size: 18px;
        cursor: pointer;
        border-radius: 8px;
        color: #1b2223;
      }
    }
    .dark-mode-btn {
      background-color: var(--bg-color);
      cursor: pointer;
      i {
        font-size: 20px;
        transition: 0.3s;
      }
      i:hover {
        scale: 1.2;
      }
    }
  }
  .signin-btn {
    border: 1px solid;
  }
  .signin-btn:hover {
    background-color: var(--active-color);
    color: white !important;
  }
}
.active-signin {
  border: none;
  background-color: var(--active-color);
  color: white !important;
}
header .container .header-nav a {
  position: relative;
}
header .container .header-nav a i {
  color: #c1d1cd;
  font-size: 25px;
}
header .container .header-nav a span {
  background-color: var(--active-color);
  line-height: 0;
  padding: 10px 5px;
  border-radius: 10px;
  position: absolute;
  top: -10px;
  right: -15px;
  z-index: 2;
}
.select {
  outline: none;
  border: none;
  border-radius: 8px;
  background: var(--bg-color);
  backdrop-filter: blur(10px);
  font-size: 18px;
  cursor: pointer;
  color: var(--text-color);
}
.select-box::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4;
  width: 2px;
  height: 100%;
  background: #b9b9b9;
}
.menue-mobile {
  background-color: var(--bg-color);
}
/* Start main */
.main-1 {
  .text-content {
    margin: 0 auto;

    .left-side {
      h2 {
        color: var(--main-color);
        span {
          color: #c8c3c3;
        }
      }

      .maintext {
        p {
          color: var(--p-color);
          width: 100%;
        }
        span {
          color: var(--main-color);
        }
        .general-btn {
          background-color: var(--main-color);
          border: none;
          border-radius: 5px;
          color: var(--btn-color);
          font-weight: 500;
          transition: 0.3s;
          cursor: pointer;
        }

        .general-btn:hover {
          letter-spacing: 2px;
        }

        .sotial-icon {

          i {
            color: var(--p-color);
            cursor: pointer;
            transition: 0.3s;
          }

          i:hover {
            scale: 1.2;
            color: var(--main-color);
          }
        }
      }
    }
    .img-glow-wrapper {
      position: relative;
      height: auto;

      .glow-shadow {
        position: absolute;
        top: 0;
        left: 0;
        filter: blur(45px);
        opacity: 0.5;
        animation: flashGlow 3s infinite;
        z-index: 0;
        pointer-events: none;
      }
      .circle-background {
        position: absolute;
        background-color: var(--main-color);
        z-index: 0;
        box-shadow: 15px 15px 25px rgba(2, 124, 224, 0.5);
      }
      .main-img {
        position: relative;
        z-index: 1;
      }
    }
  }
}

/* Animation */
@keyframes flashGlow {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes scalePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
/* Start main--2 */
.main-2 {
  background-color: var(--text-bg);
  .text-content {
    .right-side-main2 {
      color: var(--p-color);
    }

    .p-2-main2 {
      margin-bottom: 40px;
    }
    .p-1-main2,
    .p-2-main2 {
      color: var(--p-color);
    }
    .p-1-main2 span,
    .p-2-main2 span {
      color: var(--main-color);
    }
    .general-btn:hover {
      letter-spacing: 2px;
    }
  }
}
/* Start services */
.services {
  .services_box {
    .services_card {
      background-color: var(--text-bg);
      box-shadow: 0 0 8px rgba(2, 124, 224, 0.6);
      cursor: pointer;
      transition: 0.3s;
      i {
        color: var(--main-color);
        cursor: pointer;
      }
      p {
        font-size: 17px;
        color: var(--p-color);
      }
    }
    .services_card:hover {
      scale: 1.08;
      box-shadow: 0 4px 12px rgba(2, 124, 224, 0.9);
    }
  }
}
/* Start reviews */
.reviews {
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .review_box {
    .review_card {
      padding: 15px;
      border: 1px solid var(--main-color);
      border-radius: 8px;
      margin: 0 12px;
      i {
        float: right;
        font-size: 120px;
        position: relative;
        bottom: 20px;
        color: var(--text-bg);
      }
      .card_top {
        img {
          width: 80px;
          border-radius: 50%;
          margin-bottom: 10px;
        }
      }
      .card {
        p {
          color: var(--p-color);
          margin: 10px 0 10px 0;
          text-align: justify;
          line-height: 22px;
        }
      }
    }
  }
}
.reviews .review_box .review_card .card .review_icon i {
  font-size: 16px;
  float: left;
  margin-top: 30px;
  color: var(--main-color);
  padding: 0 1px;
}

/* Start Contact us */
.contact-us {
  .text-content-contact-us {
    .left-side-contact-us {
      .row {
        position: relative;
        background-color: var(--text-bg);
        padding: 20px;
        border-radius: 15px;
        margin-bottom: 40px;
        cursor: pointer;
        transition: 0.3s;
        p {
          color: var(--p-color);
          font-size: 25px;
        }
      }
      .row:hover {
        scale: 1.1;
        box-shadow: 0 4px 12px rgba(2, 124, 224, 0.5);
      }
    }
    .right-sidde-contact-us {
      iframe {
        border-radius: 20px;
      }
    }
  }
}

/* ____proucts_______________________________________________________________ */
.main-products {
  .featured_boks {
    .featured_book_box {
      padding-bottom: 35px;
      height: 60vh;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      overflow: hidden;
      overflow-x: scroll;

      .featured_book_card {
        text-align: center;
        padding: 5px;
        border-radius: 9px;
        box-shadow: 0px 4px 12px rgba(2, 124, 224, 0.6);
        margin: auto 20px;
        transition: 0.3s;
        .featurde_book_img {
          display: flex;
          align-items: center;
          justify-content: center;

        }
        .featurde_book_tag {
          h2 {
            margin: 12px;
          }
          .writer {
            font-weight: 500;
            color: #919191;
          }
          .categories {
            color: var(--p-color);
            margin-top: 8px;
          }
          .book_price {
            color: var(--p-color);
            margin-top: 8px;
            font-weight: bold;
            margin-bottom: 25px;
          }
          .book_price sub {
            color: var(--p-color);
            text-decoration: line-through;
            font-weight: 100;
            padding: 0 5px;
            del {
              color: var(--p-color);
            }
          }
          .f_btn {
            background-color: var(--main-color);
            padding: 7px 20px;
            border: none;
            border-radius: 5px;
            color: var(--btn-color);
            font-size: 20px;
            font-weight: 500;
            transition: 0.3s;
            cursor: pointer;
          }
        }
      }
      .featured_book_card:hover {
        scale: 1.045;
        box-shadow: 0 0 5px #089da1;
      }
    }
  }
}
/* Scrol grid */
::-webkit-scrollbar {
  width: 7px;
  height: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: var(--main-color);
  border-radius: 10px;
}
/* Start box view */
.books-view {
  margin: 60px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  .arrivals {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .arrivals_box {
      width: 90%;
      align-items: center;
      justify-content: center;
      .arrivals_card {
        width: 250px;
        height: 460px;
        text-align: center;
        border-radius: 9px;
        cursor: pointer;
        transition: 0.3s;
        .arrivals_booksimages {
          img {
            border-top-left-radius: 9px;
            border-top-right-radius: 9px;
            width: 99%;
            height: 370px;
            object-fit: cover;
            object-position: center;
          }
        }
        .arrivals_tag {
          p {
            color: var(--p-color);
            font-size: 20px;
            margin: 8px 0;
          }
          .arrivals_icon {
            i {
              color: var(--main-color);
              margin-bottom: 18px;
            }
          }
          .arrivals_btn {
            background-color: var(--main-color);
            padding: 7px 20px;
            border: none;
            border-radius: 5px;
            color: var(--btn-color);
            font-size: 20px;
            font-weight: 500;
            transition: 0.3s;
            cursor: pointer;
            i {
              color: orange;
              font-size: 20px;
            }
          }
          .arrivals_btn:hover {
            opacity: 0.9;
          }
        }
      }
    }
    a {
      color: var(--p-color);
      margin-top: 18%;
      font-size: 20px;
      padding: 10px 15px;
      border: 1px solid var(--main-color);
      border-radius: 5px;
      transition: 0.3s;
    }
    a:hover {
      background-color: var(--main-color);
      color: var(--text-color);
    }
  }
}
/* flip product */
/* Container perspective */
.flip-container {
  perspective: 1000px;
  width: 250px;
  height: 460px;
}

/* Inner wrapper that flips */
.flip-container .flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Flip on hover */
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

/* Front and back faces */
.flip-container .front,
.flip-container .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0px 4px 12px rgba(2, 124, 224, 0.6);
}

/* Front face */
.flip-container .front {
  z-index: 2;
  transform: rotateY(0deg);
}

/* Back face */
.flip-container .back {
  background-color: var(--main-color);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  .arrivals_tag {
    p {
      color: var(--btn-color) !important;
    }
    .more {
      font-size: 26px !important;
      font-weight: 700 !important;
    }
    .add-btn {
      margin-top: 20px;
      background-color: var(--active-color);
      padding: 7px 20px;
      border: none;
      border-radius: 5px;
      color: var(--btn-color);
      font-size: 20px;
      font-weight: 500;
      transition: 0.3s;
      cursor: pointer;
    }
  }
}

/*Blog*/
.blog {
  width: 100%;
  margin: 70px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* h1 {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
  } */
  .blog_box {
    width: 95%;
    margin: 0 auto;
    /* gap: 10px; */
    .blog_card {
      margin: 0 auto;
      width: 100%;
      height: 500px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
      border-radius: 8px;
      .blog_img {
        width: 100%;
        height: 300px;
        overflow: hidden;
        img {
          border-radius: 8px;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
      .blog_tag {
        padding: 20px;
        h2 {
          color: var(--main-color);
        }
        p {
          color: var(--p-color);
          margin-top: 10px;
          text-align: justify;
          line-height: 22px;
        }
        .blog_icon {
          margin-top: 30px;
          padding: 0 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: var(--main-color);
          cursor: pointer;
          i {
            color: var(--main-color);
          }
        }
      }
    }
  }
}
/* Start footer */
footer {
  margin-top: 20px;
  padding: 20px;
  background-color: var(--bg-color);
  .footer-container {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    margin: auto;
    .logo {
      display: flex;
      gap: 10px;
      align-items: center;
      img {
        width: 40px;
      }
      p {
        font-size: 27px;
        font-weight: bold;
        letter-spacing: 2px;
        color: var(--text-color);
      }
    }
    .nav-menu {
      display: flex;
      align-items: center;
      gap: 50px;
    }
  }
}
.banner {
  width: 100%;
  height: 50vh;
  background-image: url(booksimages/banner.jpg);
  background-size: cover;
  background-position: center;
  .banner_btn {
    background-color: var(--main-color);
    padding: 7px 20px;
    border: none;
    border-radius: 5px;
    color: var(--btn-color);
    font-size: 20px;
    font-weight: 500;
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    top: 70%;
    left: 7%;
  }
  .banner_btn:hover {
    background-color: var(--bg-color);
    color: var(--p-color);
  }
}
/*____cart items_______________________________________ */
.smal-container {
  width: 80%;
}
.cart-page {
  margin: 80px auto;
  table {
    width: 100%;
    border-collapse: collapse;
    tr {
      th {
        width: 55%;
        font-size: 20px;
        text-align: left;
        padding: 5px 20px;
        color: #fff;
        background: var(--active-color);
        font-weight: normal;
      }
    }
    .with-baground {
      td {
        margin-top: 10px;
        padding: 5px 20px;
        /* background-color: var(--text-bg); */
      }
    }

    td {
      padding: 10px 5px;
      input {
        border-radius: 10px;
        font-size: 18px;
        color: var(--main-color);
        width: 40px;
        height: 30px;
        padding: 5px;
      }
      a {
        color: var(--active-color);
        font-size: 14px;
      }
      .cart-info {
        /* background-color: var(--text-bg); */
        display: flex;
        flex-wrap: wrap;

        img {
          width: 105px;
          height: 150px;
          object-position: center;
          margin-right: 10px;
        }
        p {
          font-size: 25px;
          font-weight: 600;
          color: var(--main-color);
        }
        small {
          color: var(--p-color);
          font-size: 14px;
        }
        a {
          padding: 3px 7px;
          font-size: 14px;
          font-weight: 500;
          color: rgb(255, 255, 255);
          background: var(--active-color);
          border-radius: 4px;
        }
      }
    }
  }
  .total-price {
    display: flex;
    justify-content: flex-end;
    table {
      border-top: 3px solid var(--active-color);
      width: 100%;
      max-width: 400px;
      td {
        strong {
          color: var(--main-color);
        }
        .total {
          color: var(--active-color);
        }
        span {
          color: var(--active-color);
        }
        color: var(--p-color);
      }
    }
  }
}
td:last-child {
  text-align: right;
}
th:last-child {
  text-align: center;
}
/* ______Account page _________________________________ */
.account-page {
  background-color: var(--text-bg);
  /* margin-top: 180px; */
  padding: 50px 0;
  .container-acc {
    margin: auto;
    width: 50%;
    padding: 50px 0;
  }
  .col-2 {
    .form-container {
      background-color: rgb(226, 237, 238);
      width: 300px;
      height: 400px;
      position: relative;
      text-align: center;
      padding: 20px 0;
      margin: auto;
      border-radius: 9px;
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      span {
        font-weight: bold;
        padding: 0 10px;
        color: #555;
        cursor: pointer;
        width: 100px;
        display: inline-block;
      }
      .form-btn {
        display: inline-block;
        form {
          max-width: 300px;
          pad: 0 20px;
          position: absolute;
          top: 130px;
          transition: 1s;
          input {
            font-size: 14px;
            color: black;
            width: 90%;
            height: 30px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
          }
          .sub-btn {
            font-size: 16px;
            padding: 10px;
            border-radius: 20px;
            background-color: #206a83;
            width: 90%;
            border: none;
            cursor: pointer;
            margin: 10px 0;
            transition: 0.3s;
          }
          .sub-btn:hover {
            opacity: 0.9;
          }
          a {
            color: black;
            font-size: 14px;
            transition: 0.3s;
          }
          a:hover {
            color: var(--active-color);
          }
        }
      }
    }
  }
}
#loginForm {
  left: -300px;
}
#regForm {
  left: 0;
}
#indecator {
  width: 100px;
  border: none;
  background-color: var(--main-color);
  height: 3px;
  margin-top: 8px;
  transform: translateX(100px);
  transition: 1s;
}
/* Fore product */

.product-container {
  margin: auto;
  background: var(--main-color);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}

.product-container img {
  max-width: 300px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.product-details {
  flex: 1;
}

.product-details h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--btn-color);
}

.product-details p {
  margin: 10px 0;
  color: var(--btn-color);
}

.product-details .price {
  font-size: 22px;
  color: var(--active-color);
  font-weight: bold;
}

.product-details button {
  background-color: var(--active-color);
  padding: 7px 20px;
  border: none;
  border-radius: 5px;
  color: var(--btn-color);
  font-size: 20px;
  font-weight: 500;
  transition: 0.3s;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 16px;
}

.product-details button:hover {
  background-color: chocolate;
}