.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding: clamp(120px,12vw,150px) 6vw 80px;
  background:
    radial-gradient(ellipse 800px 600px at -5% 30%, rgba(167,11,11,0.2), transparent 60%),
    linear-gradient(150deg, #0a0e1f 0%, #050609 55%, #12040a 100%);
  overflow:hidden;
}
 
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(to bottom, transparent 0 37px, rgba(255,255,255,0.02) 38px);
  pointer-events:none;
}
 
.grid{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1320px;
  margin:0 auto;
  width:100%;
  align-items:center;
}
 
/* ============ LEFT: COPY ============ */
.copy{ max-width:520px; }
 
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#e94a44; font-weight:500; margin-bottom:22px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:#e94a44; }
 
h1{
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight:500;
  line-height:1.18;
  margin-bottom:22px;
}
h1 em{
  font-style: italic;
  background: linear-gradient(100deg, #f0413d, #a70b0b 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
 
.sub{
  font-size:16px;
  line-height:1.85;
  color:#adadb8;
  margin-bottom: 34px;
}
 
.cta-wrap{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 44px; }
 
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500;
  padding: 15px 12px 15px 26px;
  border-radius: 44px;
  text-decoration:none;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.btn-primary{
  background: linear-gradient(150deg, #e2241f, #a70b0b);
  color:#fff;
  box-shadow: 0 14px 30px -10px rgba(167,11,11,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 20px 36px -8px rgba(167,11,11,0.7); }
.btn-secondary{
  background: rgba(255,255,255,0.06);
  color:#fff;
  border: 1.5px solid rgba(255,255,255,0.25);
  padding: 15px 26px;
}
.btn-secondary:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); transform: translateY(-3px); }
.btn .arrow{
  width:27px; height:27px; border-radius:50%;
  background: linear-gradient(140deg,#fff,#e6e6e6);
  color:#a70b0b;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; flex-shrink:0;
}
.btn-secondary .arrow{ background: rgba(255,255,255,0.18); color:#fff; }
 
/* divider row of trust logos / mini stats */
.trust{
  display:flex; gap:34px; flex-wrap:wrap;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.trust .stat b{
  display:block; 
  font-size:26px; font-weight:500; color:#fff; line-height:1;
  margin-bottom:5px;
}
.trust .stat span{ font-size:12px; color:#8a8a97; letter-spacing:.02em; }
 
/* ============ RIGHT: BOOK MOSAIC (not a fan) ============ */
.mosaic{
  position:relative;
  height: 560px;
}
 
.blob{
  position:absolute;
  width: 460px; height:460px;
  right:-40px; top:30px;
  background: radial-gradient(circle, rgba(167,11,11,0.28), transparent 70%);
  filter: blur(20px);
  z-index:0;
}
 
.mgrid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 14px;
  height:100%;
  z-index:1;
}
 
.mcover{
  border-radius: 10px;
  background-size:cover;
  background-position:center;
  background-color:#12172a;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform .4s ease, box-shadow .4s ease;
}
.mcover:hover{
  transform: translateY(-8px);
  box-shadow: 0 28px 50px -12px rgba(167,11,11,0.5), 0 0 0 1px rgba(255,255,255,0.14);
  z-index:5;
}
.mcover.placeholder{
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; color:#7a7a88; text-align:center; padding:8px;
  border: 1.5px dashed rgba(255,255,255,0.14);
      cursor: pointer; opacity: 1;
}
 
.m1{ grid-column: 1 / 3; grid-row: 1 / 5; }
.m2{ grid-column: 3 / 5; grid-row: 1 / 4; }
.m3{ grid-column: 3 / 4; grid-row: 4 / 7; }
.m4{ grid-column: 4 / 5; grid-row: 4 / 7; }
.m5{ grid-column: 1 / 3; grid-row: 5 / 7; }
 
/* floating stat card, overlapping the mosaic */
.float-card{
  position:absolute;
  left: -30px;
  bottom: 30px;
  background: rgba(10,14,31,0.9);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 16px 20px;
  display:flex; align-items:center; gap:14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  z-index:6;
}
.float-card .ring{
  width:44px; height:44px; border-radius:50%;
  background: conic-gradient(#e2241f 0% 92%, rgba(255,255,255,0.12) 92% 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
.float-card .ring::after{
  content:"98%"; width:34px; height:34px; border-radius:50%;
  background:#0a0e1f; display:flex; align-items:center; justify-content:center; color: #fff;
}
.float-card b{ display:block; font-size:14px; }
.float-card span{ font-size:11.5px; color:#8a8a97; }
 
.badge-top{
  position:absolute;
  top: -18px; right: 40px;
  background: linear-gradient(150deg, #e2241f, #a70b0b);
  padding: 10px 18px;
  border-radius: 30px;
  font-size:12.5px; font-weight:500;
  box-shadow: 0 14px 30px -10px rgba(167,11,11,0.6);
  z-index:6;
  color: #fff;
}
 b.text-whtie {
    color: #fff;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .grid{ grid-template-columns:1fr; gap:50px; }
  .copy{ max-width:100%; text-align:center; }
  .eyebrow{ margin-inline:auto; }
  .cta-wrap, .trust{ justify-content:center; }
  .mosaic{ height:420px; max-width:520px; margin:0 auto; }
  .float-card{ left:10px; bottom:-10px; }
  .badge-top{ right:10px; }
}
 
@media (max-width: 560px){
  .mosaic{ height:340px; }
  .mgrid{ gap:8px; }
  .float-card{ padding:10px 14px; gap:10px; }
  .float-card b{ font-size:12.5px; }
  .float-card span{ font-size:10.5px; }
  .btn{ font-size:13px; padding:12px 10px 12px 20px; }
  .btn-secondary{ padding:12px 20px; }
  .trust{ gap:22px; }
}



  .cta{
    max-width:1100px;
    margin:0 auto;
    background:
      radial-gradient(500px 260px at 90% 0%, rgba(201,162,39,0.10), transparent 65%),
      #171f27;
    border:1px solid #2a333c;
    border-radius:18px;
    padding:56px 60px;
    display:grid;
    grid-template-columns:220px 1fr auto;
    align-items:center;
    gap:44px;
  }
 
  .frame{
    width:220px; height:220px;
    border-radius:14px;
    background-color:#12181f;
    background-image:url('PASTE-YOUR-IMAGE-URL-HERE.jpg');
    background-size:cover;
    background-position:center;
    border:1px solid #2a333c;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
  }
  .frame::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(11,14,18,0) 40%, rgba(11,14,18,.55) 100%);
  }
 
  .copy .eyebrow-row{
    display:flex; align-items:center; gap:10px; margin-bottom:12px;
  }
  .copy .bar{ width:26px; height:2px; background:#c9a227; }
  .copy .eyebrow{
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:#e8c765; font-weight:600;
  }
  .copy h2{
    font-size:32px;
    line-height:1.15;
    color:#f2ecdd;
    margin:0 0 12px 0;
    font-weight:500;
  }
  .copy h2 em{ font-style:italic; color:#c9a227; }
  .copy p{
    color:#98a1ac;
    font-size:14.5px;
    line-height:1.6;
    margin:0;
    max-width:420px;
  }
 
  .cta-action{ text-align:right; }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#c9a227;
    color:#141008;
    padding:15px 28px;
    border-radius:6px;
    font-weight:500;
    font-size:14px;
    text-decoration:none;
    white-space:nowrap;
    transition:background .2s ease, transform .2s ease;
  }
  .btn:hover{ background:#e8c765; transform:translateY(-1px); }
  .btn svg{ width:15px; height:15px; }
  .micro{
    display:block;
    margin-top:10px;
    color:#98a1ac;
    font-size:11.5px;
  }
 
  @media (max-width: 860px){
    .cta{
      grid-template-columns:1fr;
      text-align:center;
      padding:40px 28px;
    }
    .frame{ margin:0 auto; }
    .copy p{ margin:0 auto; }
    .cta-action{ text-align:center; }
  }
  section#about-us h6 {
        color: #fff;
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 500;
  }


 #new-added .eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

#new-added .eyebrow .line{
  width:34px;
  height:2px;
  background:#8f0d0d;
}

#new-added .eyebrow span{
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#8f0d0d;
  font-weight:600;
}

#new-added .headline{
  font-optical-sizing:auto;
  font-size:clamp(32px,4vw,48px);
  line-height:1.08;
  text-align: center;
  margin-bottom: 70px !important;
 
}

#new-added .headline em{
  font-style:italic;
  color:#8f0d0d;
}

#new-added .grid{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:40px;
  align-items:stretch;
}

@media (max-width:920px){
  #new-added .grid{
    grid-template-columns:1fr;
  }
}

/* ---- Book stack ---- */

#new-added .stack-panel{
  position:relative;
  min-height:480px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 10px 0;
}

#new-added .stack-img{
  width:100%;
  max-width:520px;
  height:auto;
  object-fit:contain;
}

#new-added .device{
  position:absolute;
  left:6%;
  bottom:26px;
  width:150px;
  height:210px;
  background:linear-gradient(160deg,#1c2036,#0d0f1c);
  border-radius:14px;
  padding:10px;
  box-shadow:0 30px 50px -20px rgba(21,26,46,.45);
  transform:rotate(-6deg);
  z-index:1;
}

#new-added .device .screen{
  width:100%;
  height:100%;
  border-radius:6px;
  background:linear-gradient(150deg,#f6efe4,#e9dcc7);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  text-align:center;
}

#new-added .device .screen p{
  font-weight:500;
  font-size:13px;
  line-height:1.25;
  color:#03071E;
  margin:0;
}

#new-added .book{
  position:absolute;
  bottom:26px;
  border-radius:3px 8px 8px 3px;
  box-shadow:10px 18px 34px -14px rgba(21,26,46,.5);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px 14px;
  color:#fff;
}

#new-added .book:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:8px;
  background:rgba(0,0,0,.18);
  border-radius:3px 0 0 3px;
}

#new-added .book.b1{
  left:20%;
  width:120px;
  height:250px;
  background:linear-gradient(155deg,#2e4a4a,#16292b);
  transform:rotate(-4deg);
  z-index:2;
}

#new-added .book.b1 .kicker{
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:6px;
}

#new-added .book.b1 h4{
  font-size:15px;
  line-height:1.15;
  margin:0;
  font-weight:500;
}

#new-added .book.hero{
  left:44%;
  width:168px;
  height:330px;
  background:linear-gradient(170deg,#1a2140 0%,#0c0f21 65%,#ef6420 165%);
  z-index:4;
  transform:rotate(1deg);
  padding:18px 16px;
}

#new-added .book.hero .rings{
  position:absolute;
  top:26px;
  right:20px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid rgba(239,100,32,.7);
}

#new-added .book.hero .rings:after{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  border:2px solid rgba(239,100,32,.4);
}

#new-added .book.hero .kicker{
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.7;
  margin-bottom:8px;
}

#new-added .book.hero h3{
  font-weight:500;
  font-size:23px;
  line-height:1.05;
  margin:0 0 6px;
}

#new-added .book.hero h3 span{
  color:#C31313;
}

#new-added .book.hero p{
  font-size:9px;
  letter-spacing:.04em;
  opacity:.6;
  margin:0;
  line-height:1.4;
}

#new-added .book.stacked{
  left:33%;
  bottom:26px;
  width:220px;
  height:52px;
  background:linear-gradient(90deg,#0e1424,#1c2540);
  border-radius:5px;
  z-index:5;
  display:flex;
  align-items:center;
  padding:0 18px;
  box-shadow:0 20px 30px -10px rgba(21,26,46,.5),0 0 0 6px #faf8f4;
}

#new-added .book.stacked span{
  font-weight:500;
  font-size:13px;
  letter-spacing:.02em;
  color:#f4ece0;
}

#new-added .book.stacked2{
  left:33%;
  bottom:2px;
  width:220px;
  height:36px;
  background:linear-gradient(90deg,#2a3252,#151a2e);
  border-radius:5px;
  z-index:5;
  box-shadow:0 14px 22px -10px rgba(21,26,46,.4);
}

/* ---- Stat panels ---- */

#new-added .stats{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:22px;
}

@media (max-width:640px){
  #new-added .stats{
    grid-template-columns:1fr;
  }
}

#new-added .panel{
  border-radius:18px;
  padding:38px 34px 32px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

#new-added .panel.primary{
  background:linear-gradient(150deg,#C31313 0%,#8f0d0d 100%);
  color:#f8f2df;
}

#new-added .panel.secondary{
  background:#e9e6df;
  color:#03071E;
}

#new-added .dotgrid{
  position:absolute;
  top:26px;
  right:26px;
  display:grid;
  grid-template-columns:repeat(3,10px);
  gap:9px;
}

#new-added .dotgrid span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
}

#new-added .panel.secondary .dotgrid span{
  background:#c9c3b6;
}

#new-added .dotgrid span:nth-child(9){
  opacity:.55;
}

#new-added .dotgrid span:nth-child(8){
  opacity:.75;
}

#new-added .panel .num{
  font-weight:700;
  font-size:56px;
  line-height:1;
  margin:6px 0 18px;
  letter-spacing:-0.01em;
}

#new-added .panel.secondary .num{
  color:#8f0d0d;
}

#new-added .panel h3{
  font-weight:600;
  font-size:21px;
  line-height:1.2;
  margin:0 0 14px;
}

#new-added .panel p{
  font-size:14.5px;
  line-height:1.6;
  margin:0 0 26px;
  max-width:34ch;
}

#new-added .panel.primary p{
  color:rgba(253,243,234,.88);
}

#new-added .panel.secondary p{
  color:#4a4636;
}

#new-added .btn{
  align-self:flex-start;
  margin-top:auto;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.01em;
  padding:13px 22px;
  border-radius:9px;
  border:none;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}

#new-added .btn:hover{
  transform:translateY(-2px);
}

#new-added .panel.primary .btn{
  background:#fff;
  color:#8f0d0d;
  box-shadow:0 10px 20px -8px rgba(0,0,0,.35);
}

#new-added .panel.secondary .btn{
  background:#C31313;
  color:#fff;
  box-shadow:0 10px 20px -8px rgba(239,100,32,.5);
}

#new-added .brandmark{
  margin-top:56px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8a8577;
}

#new-added .brandmark b{
  color:#03071E;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  font-size:14px;
}


#ebook-services{
    box-sizing:border-box;
    margin:0;
    color:#03071E;
  }
  #ebook-services *{box-sizing:border-box;}
 
  #ebook-services .wrap{
    padding: 80px 0px;
    text-align:center;
  }
  #ebook-services h1{
    font-size:clamp(26px,3.4vw,38px);
    line-height:1.28;
    font-weight:500;
    color: #fff;
    margin:0 auto 26px;
  }
  #ebook-services .intro{
    max-width:900px;
    margin:0 auto 46px;
    font-size:15px;
    line-height:1.75;
    color:#ffff;
  }
 
  #ebook-services .cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    text-align:left;
    margin-bottom:48px;
  }
  @media (max-width:980px){
    #ebook-services .cards{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:600px){
    #ebook-services .cards{grid-template-columns:1fr;}
  }
 
  #ebook-services .card{
    border-radius:6px;
    padding:34px 26px 30px;
    background:#eeeeee;
    color:#03071E;
  }
  button.black-button1.bton {
    background: #db322f !important;
}
  #ebook-services .card.active{
    background:#C31313;
    color:#ffffff;
  }
  #ebook-services .num{
    display:block;
    font-size:34px;
    font-weight:500;
    text-align:left;
    margin-bottom:18px;
  }
  #ebook-services .card.active .num{color:#fff;}
  #ebook-services .card:not(.active) .num{color:#C31313;}
 
  #ebook-services .card h3{
    font-size:19px;
    font-weight:700;
    margin:0 0 16px;
  }
  #ebook-services .card p{
    font-size:13.5px;
    line-height:1.65;
    margin:0;
  }
  #ebook-services .card.active p{color:rgba(255,255,255,.92);}
  #ebook-services .card:not(.active) p{color:#333;}
 
  #ebook-services .btn{
    display:inline-block;
    background:#C31313;
    color:#fff;
    font-weight:700;
    font-size:14px;
    border:none;
    padding:15px 30px;
    border-radius:6px;
    cursor:pointer;
  }

   #audiobook-faq{
    box-sizing:border-box;
    background:#03071E;
    color:#ffffff;
    padding:90px 70px;
  }
  #audiobook-faq *{box-sizing:border-box;}
 
  #audiobook-faq .wrap{
    
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:60px;
    align-items:center;
  }
  @media (max-width:900px){
    #audiobook-faq .wrap{grid-template-columns:1fr;}
  }
 
  /* Left column */
  #audiobook-faq .left h1{
    font-size:clamp(26px,3.2vw,38px);
    font-weight:500;
    line-height:1.25;
    margin:0 0 24px;
  }
  #audiobook-faq .left p{
    font-size:15px;
    line-height:1.75;
    color:#c3c2cc;
    max-width:460px;
    margin:0 0 34px;
  }
  #audiobook-faq .btn{
    display:inline-block;
    background:#C31313;
    color:#fff;
    
    font-size:14px;
    border:none;
    padding:15px 30px;
    border-radius:6px;
    cursor:pointer;
    text-decoration:none;
    margin-bottom:56px;
  }
 
  #audiobook-faq .nav-row{
    display:flex;
    gap:14px;
  }
  #audiobook-faq .nav-btn{
    width:52px;height:52px;
    border-radius:50%;
    background:#ffffff;
    border:none;
    color:#03071E;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, color .2s ease;
  }
  #audiobook-faq .nav-btn:hover{
    background:#C31313;
    color:#fff;
  }
 
  /* Right column - slider card */
  #audiobook-faq .card{
    background:#ffffff;
    color:#03071E;
    border-radius:6px;
    overflow:hidden;
    position:relative;
  }
  #audiobook-faq .slides{
    position:relative;
  }
  #audiobook-faq .slide{
    display:none;
    padding:0 0 40px;
  }
  #audiobook-faq .slide.active{
    display:block;
    animation:fadeIn .4s ease;
  }
  @keyframes fadeIn{
    from{opacity:0; transform:translateX(12px);}
    to{opacity:1; transform:translateX(0);}
  }
  #audiobook-faq .slide img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    display:block;
  }
  #audiobook-faq .slide h3{
    font-size:22px;
    font-weight:500;
    line-height:1.3;
    margin:28px 36px 18px;
  }
  #audiobook-faq .slide p{
    font-size:14.5px;
    line-height:1.75;
    color:#3a3a3a;
    margin:0 36px;
  }
 
  #audiobook-faq .dots{
    display:flex;
    justify-content:center;
    gap:8px;
    padding:20px 0 26px;
  }
  #audiobook-faq .dot{
    width:8px;height:8px;
    border-radius:50%;
    background:#e1ddd6;
    cursor:pointer;
    border:none;
    padding:0;
  }
  #audiobook-faq .dot.active{
    background:#C31313;
    width:22px;
    border-radius:5px;
    transition:width .2s ease;
  }
section.main-privacy {
    color: #fff;
    padding: 40px 0px;
}
   #genres{
    box-sizing:border-box;
    position:relative;
    padding:90px 32px 100px;
    background-image:
      linear-gradient(180deg, rgba(3,7,30,.78), rgba(3,7,30,.86)),
      url('YOUR-BACKGROUND-IMAGE.jpg');
    background-size:cover;
    background-position:center;
    color:#ffffff;
    overflow:hidden;
  }
  #genres *{box-sizing:border-box;}
 
  #genres .wrap{
    max-width:1240px;
    margin:0 auto;
    position:relative;
  }
 
  #genres h2{
    text-align:center;
    font-size:clamp(28px,3.8vw,42px);
    font-weight:500;
    margin:0 0 56px;
  }
 
  #genres .carousel{
    position:relative;
  }
 
  #genres .track-clip{
    overflow:hidden;
  }
 
  #genres .track{
    display:flex;
    gap:26px;
    transition:transform .45s ease;
  }
 
  #genres .card{
    flex:0 0 calc((100% - 52px)/3);
    background:#ffffff;
    color:#03071E;
    border-radius:4px;
    padding:36px 30px 34px;
    transition:background .25s ease, color .25s ease, transform .25s ease;
    cursor:default;
  }
  @media (max-width:920px){
    #genres .card{flex:0 0 calc((100% - 26px)/2);}
  }
  @media (max-width:640px){
    #genres .card{flex:0 0 100%;}
  }
 
  #genres .card.active,
  #genres .card:hover{
    background:#C31313;
    color:#ffffff;
    transform:translateY(-6px);
  }
 
  #genres .icon{
    width:44px;height:44px;
    margin-bottom:26px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  #genres .icon svg{
    width:100%;height:100%;
    stroke:#03071E;
    fill:none;
    stroke-width:1.6;
    transition:stroke .25s ease;
  }
  #genres .card.active .icon svg,
  #genres .card:hover .icon svg{
    stroke:#ffffff;
  }
 
  #genres .card h3{
    font-size:20px;
    font-weight:800;
    margin:0 0 16px;
  }
  #genres .card p{
    font-size:13.5px;
    line-height:1.7;
    margin:0;
    color:#4a4a4a;
    transition:color .25s ease;
  }
  #genres .card.active p,
  #genres .card:hover p{
    color:rgba(255,255,255,.92);
  }
 
  #genres .arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;height:52px;
    border-radius:50%;
    background:#ffffff;
    border:none;
    color:#03071E;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    transition:background .2s ease, color .2s ease;
  }
  #genres .arrow:hover{
    background:#C31313;
    color:#fff;
  }
  #genres .arrow.prev{ left:-26px; }
  #genres .arrow.next{ right:-26px; }
  @media (max-width:640px){
    #genres .arrow.prev{ left:0; }
    #genres .arrow.next{ right:0; }
  }



  @media (max-width: 1366px){
    #text-banner::before {
    width: 200px;
    height: 200px;
    left: -60px;
    top: 80px;
}
#text-banner::after {
    width: 180px;
    height: 120px;
    right: -20px;
    top: 100px;
}
#about-us::before {
    width: 230px;
    height: 190px;
    left: 40px !important;

}
#about-us .img-wrapper:after {
    width: 480px;
    height: 480px;
}
#ebook-services {
    padding: 0 50px;
}
   
  }

@media (max-width: 480px){
   .mosaic {
        width: 100%;
    }
    #about-us .img-wrapper:after {
        width: 330px;
        height: 340px;
        left: 34px;
        top: 80px;
    }
    #about-us .img-wrapper img {
    position: relative;
    display: table;
    margin: auto;
}
.solution-sec-wrap .container-fluid {
    padding: 60px 0px;

}
section#award-winning {
    padding: 0px 0px;
}
#featured-books {
    padding: 0px 15px 0px;
}
#text-banner::before, #text-banner::after{
  display: none;
}
section#text-banner h3{
  text-align: center;
}
section#text-banner h3 br {
  display: none !important;
}
   #text-banner .right-text {
        float: none;
        margin-top: 40px;
    }
    #text-banner .link-btns {
    align-items: center;
    display: table;
    margin: auto;
    margin-bottom: 40px;
}
#text-banner .text-wrapper h3 {
    font-size: 30px;
    line-height: 40px;
}
section#text-banner .img-fluid {
    max-width: 100%;
    height: auto;
    margin-bottom: -50px;
}
 #contact .text-wrapper {
    padding-right: 0px;
    text-align: left;
}
#contact .contact-item {
    width: 100%;
}
#about-feature .feature-parent.active {
    margin: 20px 0px 20px 0px;
}
#about-us .img-wrapper:after{
  display: none;
}
#key-features .feature-parent .feature-item {
    width: 100%;
    margin: 10px 0px;
}
.feature-parent.d-flex{
  display: block !important;
}
#key-features {
    padding: 30px 0;
}
  
#about-us {
    padding: 30px 0;
}
section#key-features .text-wrapper {
    margin-top: 30px;
}
button.bton {
    background: transparent !important;
    border: 2px solid #fff;
    border-radius: 5px !important;
    padding: 12px 20px;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    transition: 0.5s;
    margin-top: 0px;
    position: relative;
    margin-right: 8px;
    font-family: "Poppins" !important;
    text-transform: capitalize;
}
#service-home-banner {
    height: 500px;

}
#service-home-banner .text-wrapper h1 {
    font-size: 50px !important;
    line-height: 60px !important;
    margin: 0;
    text-transform: capitalize !important;
    position: relative;
}
section#service-home-banner h1 span br {
display: none;
}
p{
  font-size: 14px !important;
}
br{
  display: none;
}
h1 {
    font-size: 50px !important;
    line-height: 60px !important;

}
h2, #ebook-services h1 {
    font-size: 45px !important;
    line-height: 55px !important;
}
#about-us-2 h2 {
    font-size: 39px !important;
    line-height: 49px !important;
}
#about-us-2 .img-bg img{
  width: 100%;
}
    #ebook-services {
        padding: 0 20px;
    }
    #new-added .headline {
    font-size: 45px !important;
    line-height: 55px !important;
    margin: 0 !important;
}
section#new-added {
    padding: 0px 20px;
}
#featured-books h2 {
    font-size: 45px !important;
    line-height: 55px !important;
}
#faqs h2 {
    font-size: 45px !important;
    line-height: 55px !important;
    text-align: center;
}
footer.footer-section {
    background: linear-gradient(45deg, #c81414 20%, #a70b0b 60%);
    padding: 60px 20px 0px 20px;
    position: relative;
    z-index: 9;
}
}