@font-face {
    font-family: ViolanceThriller;
    src: url(./fonts/ViolanceThriller.otf),
        url(./fonts/ViolanceThriller.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: SlytherisBloodie;
    src: url(./fonts/SlytherisBloodie.otf),
        url(./fonts/SlytherisBloodie.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: atwriter; 
    src: url(./fonts/atwriter.ttf);        
    font-weight: normal;
    font-style: normal;
}


/* =========================
   DESIGN SYSTEM
========================= */

:root{
  --bg:#0f1115;
  --surface:#16181f;
  --card:#1c1f27;
  --accent:#c1121f;
  --accent-soft:rgba(193,18,31,0.1);
  --text:#f5f5f5;
  --muted:#9ca3af;
  --border:rgba(255,255,255,0.08);
  --radius:14px;
  --max-width:1200px;
  --text-dark: #f5f5f5;
  --white: #1c1f27;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'atwriter',sans-serif;
  background:url("./img/b_.webp");
  color:var(--text);
  background-size:contain;
  /* background-repeat: no-repeat; */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position: relative;
}

i {
  margin-left: 5px;
}

/* =========================
   LAYOUT
========================= */

.container{
  max-width:var(--max-width);
  margin:auto;
  padding:3.6vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.section-title{
  font-family:'atwriter',sans-serif;
  font-size:3rem;
  margin-bottom:24px;
  letter-spacing:-0.5px;
  align-self: center;
}

.section-sub{
  color:var(--muted);
  max-width:650px;
  margin-bottom:40px;
}

.header {
  height: 50px;
  width: 100%;
  background-color: #c1121f;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  z-index: 10;
}
.header a i{
  color: #f5f5f5;
}
#count {
  margin-right:50px;
}
.cta2{
  margin-left: 10px;
  display:flex;
  align-items:center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding:1px;
  border-radius:50%;
  background:var(--accent);
  color:white;
  font-weight:600;
  border:1px solid var(--text);
  cursor:pointer;
  transition:.3s ease;
  font-size: 1rem;
}

.cta2:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(228, 197, 199, 0.35);
}
/* =========================
   HERO
========================= */

.hero{
  padding: 50px 40px 0;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  min-height:100vh;
  gap:80px;
  position: relative;
}

.hero h1{
  font-family:'ViolanceThriller',serif;
  font-size:7rem;
  line-height:1.05;
  letter-spacing:-1px;
}

.hero h1 span{
  color:var(--accent);  
}

.subtitle{
  margin:24px 0;
  font-size:1.5rem;
  color:var(--muted);
  max-width:520px;
}
.strong {
  font-weight: 900;
  font-size: 2vw;
}
.ends {
  color: var(--accent);
  font-size: 1.2rem;
}

.cta{
  font-family:'atwriter',sans-serif;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 32px;
  border-radius:50px;
  background:var(--accent);
  color:white;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:.3s ease;
  font-size: 1rem;
}

.cta:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(193,18,31,.35);
}



/* Book mockup */
.cover{
  position: relative;
  animation: floating 4s ease-in-out infinite;
}
.book{
  width:380px;
  height:500px;  
}

.booktag{
  width: 250px;
  position: absolute;
  top: -20%;
  right: -25%;
}
/*  */
@keyframes floating {
  0% { transform: translate(0,  0px); }
  50%  { transform: translate(0, 15px); }
  100%   { transform: translate(0, -0px); }   
}

/* =========================
   MARQUE
========================= */

.marque {
  position: relative;
}
.deco{
  position: absolute;
  width: 150px;
}
.d1{
  left: 10%;
  bottom: 0;
}
.d2 {
  right: 5%;
}
.wrapper,
.wrapper2 {
  margin-top: 0;
  width: 50%;
  max-width: 1536px;
  margin-inline: auto;
  height: 100px;  
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}
.wrapper2 {
    width: 60%;
}
@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

@keyframes scrollRight {
  to {
    right: -200px;
  }
}

.itemLeft,
.itemRight {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 70px;
  background-color: #1c1f27;
  border-radius: 15px;
  position: absolute;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

.itemLeft {
  left: max(calc(115px * 8), 100%);
  animation-name: scrollLeft;
}

.itemRight {
  right: max(calc(115px * 8), 100%);
  animation-name: scrollRight;
}


.item1 {
  animation-delay: calc(30s / 8 * (8 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 8 * (8 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 8 * (8 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 8 * (8 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 8 * (8 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 8 * (8 - 6) * -1);
}

.item7 {
  animation-delay: calc(30s / 8 * (8 - 7) * -1);
}

.item8 {
  animation-delay: calc(30s / 8 * (8 - 8) * -1);
}



/* =========================
   ABOUT BOOKS
========================= */


.books{
  width:340px;
  height:450px;   
}


.about {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
}
.about p {
  font-size: 1.2rem;
  color: #f4f4f4;
}

.d3 {
  right: 1%;
  bottom: 15%;
}

.hot {
  position: relative;
}
.hand {
  position: absolute;
  width: 80px;
  top: 0;
}
/* =========================
   CORE
========================= */

.container2 {
  padding: 2rem 24px;
}

.core {
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding:0 10%; */
  gap: 1rem;
}
.core .gflex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 45%;
}
.coretext {
  padding: 60px;
  width: 55%;
}

/* =========================
   CARD STYLE
========================= */

.card,
.card1{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:40px;
  transition:.3s ease;
}
.card1 {
  padding:20px 40px;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.15);
}

/* =========================
   ABOUT AUTHOR
========================= */

.mimi {
  border-radius: 15px;
}
.d6{
  top: -60px;
  left: 0;
}

/* =========================
   GRID
========================= */

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}
/* =========================
   BONUS
========================= */

.cb{
  display: flex;
  align-items: center;
  justify-content: center;
}

.bon {
  /* height: 250px; */
  width: 100%;
}

.cardss {
  width: 280px;
  height: 350px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;  
}


/* =========================
   FORMS
========================= */

.d4 {
  width: 200px;
  top: 0;
  left: 5%;
  z-index: 10;
}
input, select{
  width:100%;
  padding:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  margin-bottom:16px;
  font-size:15px;
}

input:focus, select:focus{
  outline:none;
  border-color:var(--accent);
}



/* =========================
   REVIEW
========================= */
.cont {
  max-width: 1200px;
  margin: auto;
  margin-top: 5rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rem;
}
.container__left h1 {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--primary-color);
}

.container__left p {
  color: var(--text-dark);
  margin-bottom: 1rem;
}



.container__right {
  display: grid;
  gap: 2rem;
  position: relative;
}
.d5 {
  right: 0;
  top: -200px;
  width: 200px;
}
.cardd {
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  background-color: var(--white);
  border-radius: 1rem;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.cardd img {
  max-width: 75px;
  border-radius: 100%;
}

.card__content {
  display: flex;
  gap: 1rem;
}

.card__content span i {
  font-size: 2rem;
  color: var(--primary-color);
}

.card__details p {
  font-style: italic;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.card__details h4 {
  text-align: right;
  color: var(--primary-color);
  font-size: 1rem;
  font-weight: 500;
}

@media (width < 1200px) {
  .cont {
    gap: 3rem;
  }
}

@media (width < 900px) {
  .cont {
    grid-template-columns: repeat(1, 1fr);
  }

  .container__right {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width < 750px) {
  .container__right {
    grid-template-columns: repeat(1, 1fr);
  }
}





/* =========================
   OTHER BOOKS
========================= */

/* .cob {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
} */

.bonus{
  width: 100%;
  height: 250px;
}
.cards {
  width: 200px;
  height: 300px;
  /* background:url("./sign.jpg"); */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  text-align: center;
  padding: 0;
  color: white;
  overflow: hidden;
  position: relative;
}
.other {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* =========================
   PROGRESS
========================= */
a {
  text-decoration: none;
  color: #f5f5f5;
}
.progress{
  height:6px;
  background:#222;
  border-radius:20px;
  overflow:hidden;
  margin-top:10px;
}

.progress-bar{
  height:100%;
  width:0%;
  background:var(--accent);
}

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

footer{
  text-align:center;
  padding:60px 24px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:14px;
}

.foot{
  text-decoration: underline;
}

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

@media(max-width:900px){
  .header {
    padding: 0 8%;
    display: flex;
    flex-direction: column;
  }
  #count {
    font-size: .8rem;
    margin-right:10px;
  }
  .header p{
    font-size: .8rem;
  }
  .header a i{
    font-size: 1rem;
  }
  .cta2 {
    width: 20px;
    height: 20px;
    margin-left: 1px;
  }
  .section-title{    
    font-size:8.5vw;
    margin-bottom:24px;
    letter-spacing:-0.5px;    
  }

  /* HERO */


  .hero{
    grid-template-columns:1fr;
    text-align:center;
    padding: 100px 8%;
    gap: 10px;
  }
  .hero h1{    
    font-size:20vw;    
    letter-spacing:1px;
  }
  .subtitle{
    margin:10px 0;
    font-size:4.5vw;    
  }

  .strong {    
    font-size: 8vw;
  }
  .ends {   
    font-size: 4.5vw;
  }
  .cta {
    font-size: 4vw;
  }

  #countdown,
  #progressBar {
    font-size: 4.5vw;
  }


  .book{
    margin:auto;
    width:250px;
    height:350px; 
  }

  .booktag{
    width:120px;   
    top: -10%;
    right: -7%;
  }
  .grid-2,.grid-3{
    grid-template-columns:1fr;
  }


  /* MARQUE */

  .deco{    
    width: 100px;
  }

  .wrapper,
  .wrapper2 {
    margin-top: -45px;
  }
  .itemLeft,
  .itemRight {
    
    width: 80px;
    height: 40px;
    font-size: 2.3vw;
  }
  .itemLeft {
    left: max(calc(65px * 8), 100%);   
  }

  .itemRight {
    right: max(calc(65px * 8), 100%);    
  }
  .d1{
    left: 5%;
  }
  .d2 {
    right: 5%;
    top: -100px;
  }


  /* ABOUT BOOKS */

  .books {
    width:200px;
    height:300px;
  }
  .about {
    flex-direction: column;
    gap: 1rem;
    padding: 0 8%;
  }
  .about p{
    font-size: 3.5vw;
  }
  .card{
    font-size: 2.5vw;
    padding: 10px;
  }
  .cc {
    width: 110px;
  }
  .grid-3 {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .d3 {
    right: 1%;
    bottom: 10%;
    width: 80px;
  }
  .hand {   
    width: 30px;
    top: -10px;
    right: 0;
  }


  

  /* CORE */


  .core {
    flex-direction: column;
    padding: 0 8%;
  }
  .coretext {
    width: 100%;
    padding: 0 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .coretext button {
    font-size: 3.5vw;
  }
  .core .gflex {
    width: 100%;
  }
  .card1{
    padding: 20px;
  }
  .card1 h3 {
    font-size: 4vw;
  }
  .card1 p {
    font-size: 3.5vw;
  }
  .container2 {
    padding:2rem 0;
  }


  /* AUTHOR */

  .aa {
    margin-top: 4rem;
  }
  .mimi{
    width: 225px;
  }
  .s2{
    margin-bottom: 0;
  }


  /* FORM */

  #order {
    padding: 2rem 8%;
  }
  #order h2 {
    font-size: 5.5vw;
    text-align: center;
  }
  #order .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  #order .cta {
    font-size: 3.3vw;
  }
  .d4 {
    width: 135px;
    top: 10px;
    left: 5%;
    z-index: 10;
  }



  /* BONUS */
  .bonus_text h2 {
    text-align: center;
  }
  .ab p {
    font-size: 4.5vw;
    text-align: center;
  }
  .ab .section-sub {
    margin-bottom: 1rem;
  }
  .g3 {
    padding: 0 8%;
  }
  .cards {
    width: 130px;
    height: 180px;
    font-size: 2vw;
  }
  .bonus {
    width: 100%;
    height: 150px;
  }


  /* REVIEW */

  .container__left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .container__left h1 {
    font-size: 6vw;
    text-align: center;
  }
  .cont {
    padding: 0 8%;
    margin-top: 5rem;
  }
  .card__details p{
    font-size: 3.3vw;
  }
  .card__details h4{
    font-size: 4vw;
  }
  .d5 {
    right: 0;
    top: -70px;
    width: 100px;
  }

  .ob {
    padding: 10% 8%;
  }
  .ob h2{
    text-align: center;
  }
  .ob p{
    text-align: center;
  }
}