/* =========================================================
   CUSTOM FONTS
   ========================================================= */
@font-face{
  font-family: 'Brightwon';
  src: url('fonts/BRIGHTWON.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'JMH Typewriter';
  src: url('fonts/JMH_Typewriter-Thin.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'JMH Typewriter';
  src: url('fonts/JMH_Typewriter.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'JMH Typewriter';
  src: url('fonts/JMH_Typewriter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'JMH Typewriter';
  src: url('fonts/JMH_Typewriter-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --color-bg-dark:      #1c140d;
  --color-bg-darker:    #120c08;
  --color-gold:         #9F7D58;
  --color-gold-light:   #B08E68;
  --color-gold-deep:    #9c7136;
  --color-cream:        #f4ecdb;
  --color-cream-soft:   #e4d8c0;
  --color-topbar:       #F5DDB0;
  --color-topbar-dark:  #d9bb80;
  --color-muted:        #c9b89a;
  --color-paper:        #efefef;
  --bg-color: #1a0f0a;
  --accent-gold: #c5a880;
  --text-muted: #dcd1c4;
            
            /* Desktop / Standard Laptop Settings */
            --card-width: 260px;
            --card-height: 390px;
            --gap-1: 200px;
            --gap-2: 380px;
            --gap-3: 540px;
            --wrapper-height: 500px;

  --font-display: 'Brightwon', 'Playfair Display', 'Georgia', serif;
 --tpaper-card-bg: url('images/b8bed9e7-bb95-46e8-a849-e4e688405afc-2026-06-18\ 1.png'); 

}

*{ box-sizing: border-box; }

body{
  font-family: var(--font-body);
  background: var(--color-bg-dark);
  color: var(--color-cream);
  overflow-x: hidden;
  font-family:'JMH Typewriter', 'Cormorant Garamond', serif;
}

a{ text-decoration: none; }

.main-title,
.section-title h2,
.portfolio-heading h2,
.portfolio-title,
.testimonials-title,
.connect-title,
.footer-heading,
.card-content1 h3,
.card-content2 h3,
.card-content3 h3,
.offer-paper h2,
.contact-content h2,
.service-card h4,
.paper-content h4{
  font-family: 'Brightwon', 'Playfair Display', 'Georgia', serif;
}

/* =========================================================
   TOP BAR
   ========================================================= */
.top-bar{
  background: linear-gradient(180deg, var(--color-topbar), var(--color-topbar));
  color: #3a2a16;
  font-size: 1rem;
  padding: 9px 0;
  letter-spacing: .2px;
}

.top-bar-item{
  display: inline-flex;
  align-items: center;
  margin-right: 28px;
  font-weight: 500;
}

.top-bar .icon-circle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3a2a16;
  color: var(--color-topbar);
  font-size: .65rem;
  margin-right: 8px;
}

.follow-text{
  margin-right: 10px;
  font-weight: 500;
  letter-spacing: .3px;
}

.social-circle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #3a2a16;
  color: #3a2a16;
  margin-left: 6px;
  font-size: .78rem;
  transition: all .2s ease;
}
.social-circle:hover{
  background: #3a2a16;
  color: var(--color-topbar);
}

/* =========================================================
   HERO WRAPPER  (shared dark background image for nav + hero)
   ========================================================= */
.hero-wrapper{
  position: relative;
  background-color: var(--color-bg-dark);
  background-image: url('images/Group 1707489079.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  min-height: 100vh;
}

/* decorative clouds */
.deco-cloud{
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.deco-cloud-left{
  left: -40px;
  bottom: 249px;
  width: 150px;
}
.deco-cloud-right-top{
  right: -10px;
  top: 90px;
  width: 180px;
}

/* ===================================
Large Screens (1600px and above)
=================================== */

@media (min-width: 1600px) {

  .deco-cloud-left{
    left: 17px;
        bottom: 651px;
    width: 320px;
  }

  .deco-cloud-right-top{
    right: 109px;
        top: 115px;
        width: 340px;
  }

}

/* =========================================================
   NAVBAR
   ========================================================= */
.main-nav{
  position: relative;
  z-index: 5;
  padding: 18px 0;
}

.brand-logo{
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-logo img{
  width: 170px;      
  height: auto;
  display: block;
}
.brand-amp{
  color: var(--color-gold);
  font-style: italic;
}
.brand-sub{
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: 5px;
  color: var(--color-gold-light);
  margin-top: 2px;
}
.brand-est{
  font-size: .56rem;
  letter-spacing: 2px;
  color: var(--color-muted);
  margin-top: 3px;
}

.main-nav-links{
  gap: 1px;
}
.main-nav-links .nav-link{
  color: var(--color-cream-soft) !important;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 16px !important;
  position: relative;
  transition: color .2s ease;
}
.main-nav-links .nav-link:hover,
.main-nav-links .nav-link.active{
  color: var(--color-gold-light) !important;
}
.main-nav-links .nav-link.active::after{
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 1px;
  background: var(--color-gold);
}

.dropdown-menu{
  background: var(--color-bg-darker);
  border: 1px solid rgba(200,150,79,.25);
  border-radius: 4px;
}
.dropdown-item{
  color: var(--color-cream-soft);
  font-size: .9rem;
  padding: 8px 18px;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: rgba(200,150,79,.15);
  color: var(--color-gold-light);
}

.call-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  background:url("images/Group\ 1707489153.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  color:#2a1c0e;
  font-weight:600;
  font-size:.88rem;
  padding:12px 26px;
  margin-left:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  white-space:nowrap;
  transition:.2s ease;
}

.call-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.4);
}
.call-btn i{ font-size: .85rem; }

/* =========================================================
   HERO CONTENT
   ========================================================= */
.hero-section{
  position: relative;
  z-index: 3;
  padding: 50px 0 170px;
  padding-bottom: 40px; 

}

.hero-left{ position: relative; z-index: 4; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  font-size: .8rem;
  letter-spacing: 3px;
  font-weight: 600;
  color: var(--color-cream-soft);
  margin-bottom: 18px;
}
.eyebrow-dot{
  width: 11px;
  height: 11px;
  background: var(--color-gold);
  margin-right: 10px;
  display: inline-block;
}

.hero-left {
    padding-right: 40px;
}



.hero-heading{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.05rem + 2.6vw, 2.8rem);
  line-height: 1.28;
  color: var(--color-cream);
  margin-bottom: 22px;
}
.text-gold{ color: var(--color-gold); }

.hero-quote{
  border-left: 3px solid var(--color-gold);
  padding-left: 18px;
  margin-bottom: 18px;
}
.hero-quote p{
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--color-cream-soft);
  margin-bottom: 0;
}
.hero-quote strong{ color: var(--color-gold); font-weight: 900; }

.hero-sub-text{
  font-size: 1.3rem;
  line-height: 1.65;
  color: var(--color-cream-soft);
  margin-bottom: 30px;
}



.hero-btn-group{
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: center;
}

.btn-ribbon{
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 14px 38px;
  border: 1px solid rgba(220,178,115,.65);
  color: var(--color-topbar);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .3px;
  background: rgba(255,255,255,.03);
  transition: .3s ease;
  overflow: visible;
}

/* torn left edge */
.btn-ribbon::before{
  content:"";
  position:absolute;
  left:-14px;
  top:-1px;
  width:18px;
  height:calc(100% + 2px);
  background:var(--color-bg-dark);
  clip-path:polygon(
    100% 0,
    40% 8%,
    100% 16%,
    35% 28%,
    100% 42%,
    45% 55%,
    100% 70%,
    35% 85%,
    100% 100%
  );
  border-right:1px solid rgba(220,178,115,.65);
}

/* torn right edge */
.btn-ribbon::after{
  content:"";
  position:absolute;
  right:-14px;
  top:-1px;
  width:18px;
  height:calc(100% + 2px);
  background:var(--color-bg-dark);
  clip-path:polygon(
    0 0,
    60% 8%,
    0 16%,
    65% 28%,
    0 42%,
    55% 55%,
    0 70%,
    65% 85%,
    0 100%
  );
  border-left:1px solid rgba(220,178,115,.65);
}

.btn-ribbon:hover{
  background:var(--color-gold);
  color:#2a1c0e;
}

/* =========================================================
   RIGHT SIDE — SCROLL + FORM
   ========================================================= */
.hero-right{
  position: relative;
  z-index: 4;
  min-height: 560px;
}

.scroll-wrap{
  position: relative;
  max-width: 430px;
  margin: 0 auto;
}

.scroll-bg-img{
      width: 594px !important;
    display: block;
    filter: drop-shadow(0 25px 35px rgba(0, 0, 0, .45));
    height: 631px;
    max-width: 615px;
    margin-left: 11px;
}

.scroll-form-content{
  position: absolute;
  top: 23%;
  left: 35%;
  right: 1%;
}

.scroll-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: #94724A;
  font-size: 33px;
  line-height: 1.25;
  margin-bottom: 18px;
  text-align: center;
}

.quote-form .form-floating-line{
  margin-bottom: 16px;
}
.form-control-line{
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(42,28,14,.4);
  padding: 6px 2px;
  font-family: var(--font-body);
  font-size: .88rem;
  color: #2a1c0e;
  outline: none;
}
.form-control-line::placeholder{
  color: rgba(42,28,14,.65);
  font-style: italic;
}
.form-control-line:focus{
  border-bottom-color: var(--color-gold-deep);
}

.quote-submit-btn{
  margin: 6px auto 0;
  background: none;
  font-family:var(--font-body)
  border: none;
  font-weight: 900;
  font-size: 1.1rem;
  color: #84745A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.quote-submit-btn:hover{ color: var(--color-gold-deep); }

.form-feedback{
  font-size: .8rem;
  margin-top: 8px;
  color: #5a7a3a;
  min-height: 1em;
}
.form-feedback.error{ color: #a13b2b; }

.feather-inkpot-img{
  position: absolute;
  width: 46%;
  right: -6%;
  bottom: -6%;
  z-index: 3;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.4));
}

/* typewriter — bottom right of hero, partially cropped by viewport edge */
.deco-typewriter{
 position: absolute;
    right: -128px;
    bottom: 273px;
    width: 316px;
    z-index: 2;
    pointer-events: none;
}

/* =========================================================
   BRAND / AS SEEN ON STRIP
========================================================= */

.brands-strip{
    position: relative;
    background: url("images/Group 1707489159.png") no-repeat center;
    background-size: cover;
    padding: 40px 0 30px;
    margin-top: -50px;
    overflow: hidden;
}

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

.brand-strip-logo{
    width: 100%;
    max-width: 1100px;
    height: auto;

    display: block;
    margin: -50px auto 0;

    object-fit: contain;

    opacity: .85;
    transition: all .3s ease;
    cursor: pointer;
}

.brand-strip-logo:hover{
    opacity: 1;
    transform: scale(1.03);
}

/* ==========================
      Large Laptop
========================== */

@media (max-width:1200px){

    .brands-strip{
        padding: 35px 0 25px;
        margin-top: -40px;
    }

    .brand-strip-logo{
        max-width: 950px;
        margin-top: -40px;
    }

}

/* ==========================
         Laptop
========================== */

@media (max-width:992px){

    .brands-strip{
        padding: 30px 0 20px;
        margin-top: -30px;
    }

    .brand-strip-logo{
        max-width: 750px;
        margin-top: -25px;
    }

}

/* ==========================
          Tablet
========================== */

@media (max-width:768px){

    .brands-strip{
        padding: 25px 0 20px;
        margin-top: -20px;
    }

    .brand-strip-logo{
        width: 92%;
        max-width: 600px;
        margin-top: -15px;
    }

}

/* ==========================
          Mobile
========================== */

@media (max-width:576px){

    .brands-strip{
        padding: 20px 0 15px;
        margin-top: -110px;
    }

    .brand-strip-logo{
        width: 95%;
        max-width: 100%;
        margin-top: 0;
    }

    .brand-strip-logo:hover{
        transform: none;
    }

}
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px){
  .main-nav-links{ margin: 18px 0; }
  .call-btn{ margin: 10px 0 0; }
  .hero-heading{ font-size: 1.8rem; }
  .hero-right{ margin-top: 60px; min-height: auto; }
  .deco-typewriter{ width: 160px; }
  .deco-cloud-left{ width: 150px; }
  .deco-cloud-right-top{ width: 170px; top: 10px; }
  .hero-section{ padding-bottom: 120px; }
}

@media (max-width: 575.98px){
  .top-bar-item{ font-size: .72rem; margin-right: 14px; }
  .top-bar .container > div{ flex-direction: column; gap: 8px; }
  .hero-heading{ font-size: 1.9rem; }
  .hero-btn-group{ flex-direction: column; }
  .btn-ribbon{ justify-content: center; }
  .scroll-wrap{ max-width: 320px; }
  .deco-typewriter{ display: none; }
  .deco-cloud-left, .deco-cloud-right-top{ opacity: .5; width: 110px; }
}


/* ===================================
SECTION
=================================== */

.why-section{

    position:relative;
    min-height:auto;
    background:url("images/Group 1707489307.png");
    background-size:cover;
    background-position:center;
    padding:70px 0 70px;
    overflow:hidden;
    margin-bottom: -135px;
}



/* ===================================
HEADING
=================================== */


.main-title{

    font-size:clamp(28px, 18px + 4.5vw, 55px);
    font-weight:700;
    color:#5f4b37;
    margin-bottom:5px;

}


.main-title span{

    color:#b18d61;

}



.subtitle{

    font-size:clamp(15px, 12px + 1vw, 20px);
    color:#5E4B36;

    margin-bottom:35px;

}



/* ===================================
CONTENT
=================================== */


.content-row{

    position:relative;
    z-index:5;
    margin-top: -195px;

}


/* ===================================
AUTHOR IMAGE
=================================== */

.photo-wrapper{

    position:relative;

    width:174%;

    max-width:880px;

    margin:auto;

}



.paper-frame{

    width:100%;

    max-width:873px;

    margin-left:-150px;

    display:block;

}



/* ===================================
PAPER CARDS
=================================== */


.paper-card{

    background-size:100% 100%;

    background-repeat:no-repeat;


    padding:25px 35px;


    margin-bottom:15px;


    position:relative;


    display:flex;


    align-items:center;


    gap:20px;


    min-height:220px;

}



/* Card Backgrounds */


.card-one{

    background-image:url("images/1.png");

    transform:rotate(-2deg);
    position: relative;
    z-index: 2;

}




.card-two{
    background-image: url(images/3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
    z-index: 1;
    margin-top: -133px;
    margin-left: -41px;
    padding: 68px 50px 80px;
    min-height: 372px;
    overflow: hidden;
    box-sizing: border-box;
    transform: rotate(2deg);
}



.card-three{

    background-image:url("images/2.png");
    transform:rotate(-3deg);
   z-index: -1;
    margin-top: -163px;
    margin-left: 32px;


}





/* Card Image */


.card-image{

    width:100px;

    height:100px;

    object-fit:cover;

    flex-shrink:0;

}




/* Card Text 1*/


.card-content1{

    position:relative;

    z-index:2;
    

}




.card-content1 h3{

    font-size:clamp(19px, 15px + 1.5vw, 28px);
    font-weight:400;
    color:#5E4B36;
    margin-bottom:8px;
    transform: rotate(354deg);

}



.card-content1 p{

    font-size:17px;
    line-height:1.4;
    color:#66584b;
    margin:0;
    transform: rotate(354deg);


}


/* Card Text2 */


.card-content2{

    position:relative;

    z-index:1;

}




.card-content2 h3{

    font-size:clamp(19px, 15px + 1.5vw, 28px);
    font-weight:400;

    color:#5E4B36;

    margin-bottom:8px;

}



.card-content2 p{

    font-size:17px;

    line-height:1.4;

    color:#66584b;

    margin:0;

}

/* Card Text3 */


.card-content3{

    position:relative;

    z-index:2;

}




.card-content3 h3{

    font-size:clamp(19px, 15px + 1.5vw, 28px);
    font-weight:400;

    color:#5E4B36;

    margin-bottom:8px;
    transform: rotate(354deg);

}



.card-content3 p{

    font-size:17px;

    line-height:1.4;

    color:#66584b;

    margin:0;
    transform: rotate(354deg);

}



/* ===================================
READ BUTTON
=================================== */


.read-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;


    width:180px;

    height:60px;


    background-image:url("images/Group 1707489153.png");

    background-size:100% 100%;

    background-repeat:no-repeat;


    color:#fff;

    text-decoration:none;


    font-size:20px;

    font-weight:600;


    margin-left:40px;


    position:relative;

    z-index:2;

}



.read-btn::before{

    display:none;

}



.read-btn:hover{

    color:#fff;

}



/* ===================================
DECORATIONS
=================================== */


.ink-left{

    position:absolute;

    left:-80px;

    top:100px;

    width:400px;

}



.ink-right{

    position:absolute;

    right:-50px;

    top:180px;

    width:400px;

}



.clock-img{

    position: absolute;
    left: -147px;
    bottom: 52px;
    width: 346px;
    z-index: 2;

}



.typewriter-img{

    position:absolute;

    right:-20px;

    bottom:-10px;

    width:290px;
    z-index: 2;

}


/*====================================
            MOBILE
====================================*/

@media (max-width:767px){

    .why-section{
        padding:40px 0;
        margin-top:0;
        margin-bottom:0;
    }

    /* Desktop ka negative margin remove */
    .content-row{
        margin-top:0 !important;
    }

    .photo-wrapper{
        width:100%;
        max-width:320px;
        margin:50px auto 30px !important;
    }

    .paper-frame{
        width:100%;
        max-width:100%;
        margin-left:0;
        display:block;
    }

    .paper-card{
        flex-direction:column;
        text-align:center;
        min-height:auto;
        padding:25px 20px;
        margin-top: -50px;
    }

    .card-one,
    .card-three{
        margin:0 0 20px;
        transform:none !important;
    }

    .card-two{
        min-height:250px;   /* Apni requirement ke hisaab se 420, 450, 500 */
        padding:50px 25px 60px;
        background-size:100% 100%;
        background-repeat:no-repeat;
        background-position:center;
    
   }

    .card-content1 h3{
        transform:rotate(354deg);
        font-size:24px;
        margin-top:10px;
    }


    .card-content2 h3{
        transform:none !important;
        font-size:24px;
        margin-top:40px;

    }
    .card-content3 h3{
        transform:rotate(354deg);
        font-size:24px;
        margin-top:14px;
    }

    .card-content1 p{
        transform:rotate(354deg);
        font-size:15px;
        line-height:1.6;

    }
    .card-content2 p{
        transform:none;
        font-size:15px;
        line-height:1.6;
    }
    .card-content3 p{
        transform:rotate(354deg);
        font-size:15px;
        line-height:1.6;
        
    }

    .card-image{
        width:75px;
        height:75px;
    }

    .read-btn{
        width:170px;
        height:56px;
        margin:20px auto 0;
    }

    .ink-left,
    .ink-right,
    .clock-img,
    .typewriter-img{
        display:none;
    }

}

/*====================================
          SMALL MOBILE
====================================*/

@media (max-width:480px){

    .photo-wrapper{
        max-width:260px;
        margin-top:-100px !important;
    }

    .card-image{
        width:65px;
        height:65px;
    }

    .card-content1 h3,
    .card-content2 h3,
    .card-content3 h3{
        font-size:20px;
    }

    .card-content1 p,
    .card-content2 p,
    .card-content3 p{
        font-size:14px;

    }

}

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


@media(max-width:991px){


.main-title{

    font-size:45px;

}


.subtitle{

    font-size:18px;

}



.paper-card{

    flex-direction:column;

    text-align:center;

    padding:25px;

}



.card-image{

    width:90px;

    height:90px;

}



.card-content h3{

    font-size:24px;

}



.card-content p{

    font-size:16px;

}



.read-btn{

    margin-left:0;

}


}

/* ===================================
Large Desktop (1600px - 2560px)
=================================== */

@media (min-width:1600px){

    .container{
        max-width:1800px !important;
    }

    .why-section{
        padding:70px 0 80px;
        margin-top: -426px;
        margin-bottom:-340px;
    }

    .content-row{
        margin-top:-350px;
        align-items:center;
    }

    /* Left Image */
    .photo-wrapper{
        width:100%;
        max-width:900px;
        margin:auto;
    }

    .paper-frame{
        max-width: 1407px;
        width: 165%;
        margin-left: -235px;
    }

    /* Cards */
    .paper-card{
        min-height:335px;
        padding:35px 45px;
        width: 990px;
    }

    .card-one{
        margin-left:0;
        z-index:3;
    }

    .card-two{
        margin-top:-110px;
        margin-left:-25px;
        min-height:300px;
        padding:75px 45px 55px;
        z-index:2;
    }

    .card-three{
        margin-top:-183px;
        margin-left:20px;
        z-index:1;
    }

    /* Typography */
    .card-content1 h3,
    .card-content2 h3,
    .card-content3 h3{
        font-size:34px;
    }

    .card-content1 p,
    .card-content2 p,
    .card-content3 p{
        font-size:19px;
        line-height:1.6;
    }

    /* Decorations */
    .clock-img{
        width: 534px;
        left: -180px;
        bottom: 200px;
    }

    .typewriter-img{
        width:400px;
        bottom: 168px;
        right:20px;
    }

    .read-btn{
        margin-left:30px;
    }

    .ink-right {
            position: absolute;
        right: -145px;
        top: 180px;
        width: 1000px;
}
}

.recommended-section{
    position:relative;
    background:url('images/Backgroud\ Image.png');
    background-size:cover;
    background-position:center;
    padding:100px 0 0;
    overflow:hidden;
}

.section-title h2{
    font-size:clamp(32px, 18px + 6vw, 72px);
    color:#fff;
}

.section-title h2 span{
    color:#9F7D58;
}

.paper-heading1{
   display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image:url("images/998192b5463ba3b8293d5520e77b328e4a89f885.png");
     background-position: center;
    background-repeat: no-repeat;
    background-size: 119% 120%;
    padding: 15px 35px;
    transform: rotate(-2deg);
    color: #5E4B36;
    position: relative;
    width: auto;
  
}

/* Left Decorative Image */
.left-decoration{
    position: absolute;
    left: -250px;
    top: 244px;
    width: 503px;
    height: auto;
    z-index: 0;
    transform: rotate(1deg);
    pointer-events: none;
}

/* ===================================
ORNAMENT IMAGE
=================================== */

.ornament-line{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}


.ornament-line img{

    width:220px;

    height:auto;

    display:block;

}
/* ===================================
BOOK BACKGROUND
=================================== */

.book-scroll{

    background-image:url("images/6a1bf2f3de0f2adc46f2db8b425263da71372d59.png");

    background-size:100% 100%;

    background-position:center;

    background-repeat:no-repeat;


    padding:45px 40px;

    position:relative;


    min-height:380px;

}

/* Left Decorative Image */
.right-decoration{
    position: absolute;
    right: -97px;
    top: 1686px;
    width: 255px;
    height: auto;
    z-index: 0;
    transform: rotate(35deg);
    pointer-events: none;
    
}

.leftp-decoration{
    position: absolute;
    left: -97px;
    top: 2150px;
    width: 305px;
    height: auto;
    z-index: 0;
    transform: rotate(35deg);
    pointer-events: none;
    
}

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

.books-wrapper{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:5px;
}


.book{
    object-fit:cover;
    box-shadow:0 10px 20px rgba(0,0,0,.4);
}


/* Left & Right books */

.b4,
.b6{
    width:160px;
    height:240px;
}



/* Center big book */

.b5{
    width:180px;
    height:300px;
    z-index:2;
}

/* =====================================================
   LARGE SCREENS (1600px+)
===================================================== */

@media (min-width:1600px){

    .recommended-section{
        padding:120px 0 40px;
    }

    .section-title h2{
        font-size:4.5rem;
    }

    .paper-heading1{
        width:600px;
        padding:18px 30px;
        font-size:1.6rem;
    }

    .left-decoration{
        width:650px;
        left:-320px;
        top:220px;
    }

    .right-decoration{
        width:320px;
        right:-140px;
        top:1500px;
    }

    .leftp-decoration{
        width:360px;
        left:-140px;
        top:1950px;
    }

    .book-scroll{
        min-height: 519px;
        padding: 60px 50px;
        max-width: 878px;
    }

    .b4, .b6{
        width:190px;
        height:280px;
    }

    .b5{
        width:220px;
        height:340px;
    }

    .ornament-line img{
        width:280px;
    }
}

/* ===================================
CONTENT PAPER
=================================== */

.paper-content{

    background-image:url("images/Group\ 1707489198.png");

    background-size:100% 100%;

    background-repeat:no-repeat;


    padding:35px 45px;

    margin-top:-10px;
    height: 240px;

}


.paper-content h4{
    color:#5b4330;
    font-size:clamp(20px, 14px + 2vw, 34px);
}

.paper-content p{
    color:#5E4B36;
    margin:0;
    font-size: 18px;
    font-weight: 600;
}

.paper-heading{

    display:flex;
    justify-content:center;
    align-items:center;
    width:1411px;
    height:250px;
    background-image:url("images/Group\ 1707489308.png");
    background-size:116% 100%;
    background-position:center;
    background-repeat:no-repeat;
    margin:0 auto;
    
    
}

.services-section{
    padding:10px 0;
}

.services-section .container{
    max-width: 1600px;
}

/* COMMON CARD */


.service-card{

    background-size:100% 100%;
    background-repeat:no-repeat;
    background-position:center;

    border-radius:22px;

    text-align:center;

    padding:35px 20px;

    height:100%;
    width:220px;

    min-height:300px;

    position:relative;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

}



/* DIFFERENT BACKGROUNDS */

.marketing-card{
    background-image:url("images/10.png");
}


.editing-card{
    background-image:url("images/4.png");
}


.formatting-card{
    background-image:url("images/1\ copy.png");
}


.cover-card{
    background-image:url("images/10.png");
}


.audio-card{
    background-image:url("images/4.png");
}


.ebook-card{
    background-image:url("images/1\ copy.png");
}


/* CONTENT ABOVE BORDER */

.service-card img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin-bottom:20px;

    position:relative;

    z-index:2;

}



.service-card h4{

    font-size:22px;

    line-height:1.2;

    color:#8d6841;

    position:relative;

    z-index:2;

}



.service-card p{

    color:#666;

    font-size:17px;

    position:relative;

    z-index:2;

}



.service-card a{

    color:#8d6841;

    text-decoration:none;

    font-weight:600;

    position:relative;

    z-index:2;

}



/* RESPONSIVE */

@media(max-width:992px){

    .service-card{
        min-height:330px;
    }

}


@media(max-width:576px){

    .service-card h4{
        font-size:18px;
    }

}



.top-books-section{
    padding-top:80px;
}

.paper-board{
    position:relative;
    max-width:1200px;
    margin:auto;

    background:url('images/Group\ 1707489246.png');
    background-size:100% 100%;
    background-repeat:no-repeat;

    padding:80px 70px;
}

/* ---------------------------------- 
PORTFOLIOOOOOOOOOOOOOOOOOOOOOOO 
------------------------------------*/


.portfolio-heading{
    text-align:center;
    margin-bottom:40px;
}

.portfolio-heading h2{
    font-size:clamp(32px, 18px + 6vw, 72px);
    color:#4c3528;
    margin:0;
}

.portfolio-heading span{
    color:#8d6a49;
}

.ornament{
    width:220px;
    height:25px;
    margin:auto auto 20px;
    background:url('images/Group\ 1707489264.png') center no-repeat;
    background-size:contain;
}

/* -----------------------
BOOK GRID
------------------------ */

.books-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
}

.books-grid .book{
    width:220px;
    box-shadow:0 15px 35px rgba(0,0,0,.45);
    border:8px solid #fff;
}

.rotate-left{
    transform:rotate(-12deg);
}

.rotate-right{
    transform:rotate(12deg);
}

/* -----------------------
PORTFOLIO
------------------------ */


 /* --- 2K and 4K Screens Optimization --- */
        @media (min-width: 1400px) {
            :root {
                --card-width: 320px;
                --card-height: 480px;
                --gap-1: 260px;
                --gap-2: 500px;
                --gap-3: 720px;
                --wrapper-height: 600px;
            }
        }
        @media (min-width: 1920px) {
            :root {
                --card-width: 400px;
                --card-height: 600px;
                --gap-1: 340px;
                --gap-2: 660px;
                --gap-3: 960px;
                --wrapper-height: 760px;
            }
        }

        /* --- Mobile Screens Responsiveness (< 768px) --- */
        @media (max-width: 767px) {
            :root {
                --card-width: 135px;
                --card-height: 200px;
                --gap-1: 75px;
                --gap-2: 135px;
                --gap-3: 185px;
                --wrapper-height: 270px;
            }
            .portfolio-title {
                font-size: 38px !important; /* Scaled cleanly for small phones */
                margin-bottom: 25px !important;
            }
            .nav-tabs-custom {
                gap: 8px !important;
                margin-bottom: 35px !important;
            }
            .tab-item {
                padding: 6px 14px !important;
                font-size: 13px !important;
            }
        }

       

        .portfolio-container {
            width: 100%;
            max-width: 2400px;
            margin: 0 auto;
            text-align: center;
            padding: 0 15px;
        }

        /* --- Heading Details (Western Vintage Font - Brightwon, 400, Regular, 52px, 100%) --- */
        .portfolio-title {
            font-family: var(--font-display);
            font-size: 52px;
            font-weight: 400;
            line-height: 100%;
            margin-bottom: 45px;
            letter-spacing: 1.5px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
        }
        .portfolio-title span {
            color: var(--accent-gold);
            font-weight: inherit;
        }
        
        /* Ornamental top line from image s44.jpg */
        .portfolio-title::before {
            content: "";
            display: block;
            width: 340px;
            height: 20px;
            margin: 0 auto 15px auto;
            opacity: 0.7;
            background-image: url("images/Group\ 1707489264.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        /* --- Button Details (JMH Typewriter, 700 Bold, 16px) --- */
        .nav-tabs-custom {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 55px;
            flex-wrap: wrap;
            border: none;
        }

        .tab-item {
            font-family: var(--font-body);
            font-size: 16px;
            font-weight: 700;
            color: var(--text-muted);
            cursor: pointer;
            padding: 8px 24px;
            transition: all 0.25s ease-in-out;
            user-select: none;
            border: none;
            background: transparent;
            position: relative;
            z-index: 1;
        }

        /* Button background paint brush image stroke */
        .tab-item.active {
            color: #1a0f0a;
        }

        .tab-item.active::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--accent-gold);
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='35' viewBox='0 0 120 35'><path d='M0 6 C 25 2, 55 7, 120 4 L 116 31 C 85 34, 35 28, 0 30 Z' fill='%23c5a880'/></svg>");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: -1;
            transform: skewX(-5deg);
            filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.35));
        }

        /* --- 3D Carousel Showcase Slider --- */
        .showcase-wrapper {
            position: relative;
            height: var(--wrapper-height);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            width: 100%;
        }

        .book-card {
            position: absolute;
            width: var(--card-width);
            height: var(--card-height);
            background-size: cover;
            background-position: center;
            border-radius: 4px;
            opacity: 0;
            pointer-events: none;
            z-index: 0;
        }

        /* Realistic book print shadows overlay */
        .book-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 4px;
        }

        /* 3D Focal States based on active indices */
        .book-card.pos-center {
            transform: translateX(0) scale(1.15);
            opacity: 1;
            z-index: 5;
            pointer-events: auto;
            filter: blur(0px);
        }

        .book-card.pos-left-1 {
            transform: translateX(calc(-1 * var(--gap-1))) scale(0.95);
            opacity: 0.85;
            z-index: 4;
            filter: blur(1.5px);
        }

        .book-card.pos-right-1 {
            transform: translateX(var(--gap-1)) scale(0.95);
            opacity: 0.85;
            z-index: 4;
            filter: blur(1.5px);
        }

        .book-card.pos-left-2 {
            transform: translateX(calc(-1 * var(--gap-2))) scale(0.85);
            opacity: 0.55;
            z-index: 3;
            filter: blur(2.5px);
        }

        .book-card.pos-right-2 {
            transform: translateX(var(--gap-2)) scale(0.85);
            opacity: 0.55;
            z-index: 3;
            filter: blur(2.5px);
        }

        .book-card.pos-left-3 {
            transform: translateX(calc(-1 * var(--gap-3))) scale(0.75);
            opacity: 0.25;
            z-index: 2;
            filter: blur(4.5px);
        }

        .book-card.pos-right-3 {
            transform: translateX(var(--gap-3)) scale(0.75);
            opacity: 0.25;
            z-index: 2;
            filter: blur(4.5px);
        }

        /* --- Navigation Dashed Bars/Indicators --- */
        .custom-indicators {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 25px;
        }

        .indicator-dot {
            width: 35px;
            height: 5px;
            background-color: rgba(255, 255, 255, 0.25);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .indicator-dot.active {
            background-color: var(--accent-gold);
            width: 48px;
        }


        


        .testimonials-section {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            text-align: center;
            padding: 0 20px;
        }

        .testimonials-sub {
            font-family: var(--font-body);
            font-size: 24px;
            color: var(--accent-gold);
            margin-bottom: 20px;
            font-weight: 400;
        }

        .testimonials-title {
            font-family: var(--font-display);
            font-size: 48px;
            font-weight: 400;
            line-height: 120%;
            margin-bottom: 60px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            letter-spacing: 0.5px;
        }

        .testimonials-title span.serif-italic {
color: #B08E68;
        }

        .testimonials-title span.gold-text {
            color: var(--accent-gold);
        }

        /* --- Carousel Container Track --- */
        .carousel-wrapper {
            position: relative;
            max-width: 1240px; /* Adjusting width to fit 3 cards perfectly with gaps */
            margin: 0 auto;
            overflow: hidden;
            padding: 30px 10px;
        }

        .testimonials-track {
            display: flex;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            gap: 20px;
        }

        /* --- Individual Paper Card --- */
        .tpaper-card {
            background-image: var(--tpaper-card-bg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            color: #2b2520;
            /* Dynamic formula taake 3 cards base container me space maintain karein */
            width: calc((100% - 40px) / 3); 
            flex-shrink: 0; 
            padding: 35px 25px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            text-align: left;
            border-radius: 4px;
            transition: transform 0.5s ease;
        }


        .card-left-col {
            flex: 1;
            padding-right: 15px;
        }

        .author-avatar {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #9e8d77;
            margin-bottom: 15px;
            display: block;
        }

        .author-name {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
            color: #1a1512;
        }

        .testimonial-text {
            font-size: 13px;
            line-height: 145%;
            color: #4a4038;
            margin: 0;
        }

        .card-right-col {
            width: 100px;
            flex-shrink: 0;
        }

        .book-thumbnail {
            width: 100%;
            height: 150px;
            object-fit: cover;
            box-shadow: 3px 5px 12px rgba(0,0,0,0.35);
            border-radius: 2px;
        }

        /* --- Bottom Indicators --- */
        .testimonial-indicators {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 40px;
        }

        .t-dot {
            width: 40px;
            height: 5px;
            background-color: #3d2d24;
            border-radius: 2px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .t-dot.active {
            background-color: #fff;
        }

        /* Responsive Settings */
        @media (max-width: 992px) {
            /* Tablets par 2 cards dikhein ge */
            .tpaper-card {
                width: calc((100% - 20px) / 2);
            }
        }

        @media (max-width: 768px) {
            .testimonials-title {
                font-size: 32px;
            }
            /* Mobiles par single card display hoga layout responsive rakhne ke liye */
            .tpaper-card {
                width: 100%;
                padding: 20px;
            }
        }


.portfolio-book-img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    border-radius:8px;
}

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


.contact-vintage-section{
    padding:40px 0 80px;
    position:relative;
        margin-top: -120px;

}

.contact-content h2{
    font-size:clamp(34px, 20px + 7vw, 80px);
    color:#fff;
    line-height:1;
    margin-bottom:30px;
}

.contact-content h2 span{
    display:block;
    color:#c9a16d;
}

.contact-content input,
.contact-content textarea{
    width:100%;
    background:transparent;
    border:1px solid #8f673f;
    color:#fff;
    padding:18px;
    margin-bottom:15px;
}

.contact-content textarea{
    height:140px;
    resize:none;
}

.ribbon-btn{
    width:200px;              /* image ke hisaab se */
    height:56px;

    background:url("images/Group 1707489153.png") no-repeat center;
    background-size:100% 100%;

    border:none;
    outline:none;

    color:#fff;
    font-size:20px;
    font-family:'Cormorant Garamond', serif;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    padding:0;
}

.books-stack{
           max-width: 1029px;
    width: 162%;
}

/* Left Decorative Image */
.vleft-decoration{
        position: absolute;
    left: -121px;
    top: 665px;
    width: 304px;
    height: auto;
    z-index: 1;
    transform: rotate(300deg);
    pointer-events: none;
}


/* =========================
   OFFER SECTION
========================= */

.offer-strip{
    position:relative;
    padding:42px 0 0px;
    overflow:hidden;
    margin-top: -137px;
    background:url("images/Group\ 1707489131.png") center center/100% 100% no-repeat;
}

.offer-paper{
    width:100%;
    padding:70px 30px;
    transform:rotate(5deg);

}

.offer-paper h2{
    font-family:var(--font-display);
    font-size:clamp(28px, 18px + 4vw, 58px);
    color:#3f2a1d;
    margin-bottom:15px;
    line-height:1;
}

.offer-paper p{
    max-width:850px;
    font-size:22px;
    color:#5d4330;
    line-height:1.4;
    margin-bottom:30px;
}

.offer-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:240px;
    height:50px;

    color:#fff;
    font-weight:600;
    text-decoration:none;

    background:url("images/Group\ 1707489153.png") center center/100% 100% no-repeat;
}

.offer-typewriter{
    position: absolute;
    right: -72px;
    bottom: -81px;
    width: 500px;
    z-index: 3;
    transform: rotate(12deg);
}



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

.custom-footer{
    position:relative;
    overflow:hidden;
    font-family:'Cormorant Garamond', serif;
    color:#fff;
}

.footer-overlay{

    position:relative;

    background:
    linear-gradient(rgba(17,10,7,.35),
    rgba(17,10,7,.35)),
    url("images/Backgroud Image.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    padding:70px 0 55px;
}

.footer-overlay .container{
    max-width: 1200px;
}
/*==============================
            LOGO
===============================*/

.footer-logo img{

    max-width:210px;
    display:block;
}

/*==============================
        LEFT CONTENT
===============================*/

.footer-text{

    margin-top:25px;

    max-width:400px;

    color:#ffffff;

    font-size:17px;

    line-height:1.7;

    font-weight:400;
}

.connect-title{

    margin-top:35px;

    margin-bottom:18px;

    font-size:46px;

    font-weight:600;

    color:#c89a63;
}

/*==============================
        SUBSCRIBE
===============================*/

.subscribe-box{

    position:relative;

    width:100%;

    max-width:430px;

    display:flex;

    align-items:center;
}

.subscribe-box input{

    width: 152%;
    height: 134px;
    border: none;
    outline: none;
    background:url("images/998192b5463ba3b8293d5520e77b328e4a89f885.png");
    background-repeat: no-repeat;
    background-size: 80% 92%;
    padding: 1px 182px 11px 71px;
    font-size: 17px;
    color: #666;
    margin-left: -62px;
}

.subscribe-box input::placeholder{

    color:#777;
}

.subscribe-box button{

    position:absolute;

    right:-4px;

    width:155px;

    height:62px;

    border:none;

    outline:none;

    cursor:pointer;

    color:#fff;

    font-size:17px;

    font-weight:600;

    background:url("images/Group 1707489153.png");

    background-repeat:no-repeat;

    background-size:100% 100%;
}

.small-note{

    margin-top:18px;

    max-width:370px;

    color:#fff;

    font-size:15px;

    line-height:1.6;
}

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

.footer-heading{

    margin-bottom:28px;

    color:#fff;

    font-size:36px;

    font-weight:600;

    line-height:1;
}

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

.footer-links{

    list-style:none;

    padding:0;

    margin:0;
}

.footer-links li{

    position:relative;

    padding-left:22px;

    margin-bottom:14px;
}


    .footer-links li::before{
    content: "✓";
    position: absolute;
    left: 0;
    top: 4px;

    width: 16px;
    height: 16px;

    border: 1.5px solid #c89a63;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #c89a63;
    font-size: 7px;
    font-weight: 700;

    background: transparent; /* No fill */
}

.footer-links li a{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    transition:.3s;
}

.footer-links li a:hover{

    color:#c89a63;
}

/*==============================
        CONTACT
===============================*/

.contact-info{

    margin-top:5px;
}

.contact-row{

    display:flex;

    margin-bottom:14px;
}

.contact-row span{

    width:90px;

    color:#fff;

    font-size:19px;

    font-weight:700;

    flex-shrink:0;
}

.contact-row p{

    margin:0;

    color:#c89a63;

    font-size:19px;

    line-height:1.6;
}

/*==============================
        PAYMENT
===============================*/

.payment-methods{

    margin-top:28px;
}

.payment-methods img{

    width:290px;

    max-width:100%;

    display:block;
}

/*==============================
        SOCIAL
===============================*/

.social-icons{

    display:flex;

    gap:18px;

    margin-top:25px;
}

.social-icons a{

    width:42px;

    height:42px;

    border:1px solid rgba(255,255,255,.35);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    transition:.3s;
}

.social-icons a:hover{

    background:#c89a63;

    border-color:#c89a63;

    color:#fff;
}

/*==============================
        DISCLAIMER
===============================*/

.footer-disclaimer{

    margin-top:60px;

    padding-top:28px;

    border-top:1px solid rgba(255,255,255,.15);
}

.footer-disclaimer p{

    margin:0;

    text-align:center;

    color:#d8d8d8;

    font-size:15px;

    line-height:1.9;
}

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

.footer-bottom{
    position: relative;
    background: url("images/Vector.png") repeat-x center top;
    padding: 30px 0;
    overflow: hidden;
        margin-bottom: -55px;
    margin-top: 50px;

    
    
}



/*==============================
        BOTTOM CONTENT
===============================*/

.bottom-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.bottom-content p{
    margin: 0;
    color: #fff;
    font-size: 16px;
    letter-spacing: .4px;
    font-weight: 500;
}

.bottom-links{
    display: flex;
    align-items: center;
    gap: 18px;
}

.bottom-links span{
    color: rgba(255,255,255,.8);
    font-size: 15px;
}

.bottom-links a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: .3s;
}

.bottom-links a:hover{
    color: #2d1d10;
}

/*====================================
        LARGE DEVICES
=====================================*/

@media (max-width:1200px){

    .footer-heading{
        font-size:36px;
    }

    .connect-title{
        font-size:40px;
    }

    .subscribe-box{
        max-width:390px;
    }

    .subscribe-box button{
        width:145px;
    }

}

/*====================================
        TABLET
=====================================*/

@media (max-width:991px){

    .footer-overlay{
        padding:60px 0 45px;
    }

    .footer-logo{
        text-align:center;
    }

    .footer-logo img{
        margin:auto;
    }

    .footer-text{
        max-width:100%;
        text-align:center;
    }

    .connect-title{
        text-align:center;
        font-size:38px;
    }

    .subscribe-box{
        margin:auto;
    }

    .small-note{
        text-align:center;
        max-width:100%;
    }

    .footer-heading{
        margin-top:15px;
        font-size:34px;
    }

    .payment-methods{
        justify-content:center;
    }

    .social-icons{
        justify-content:center;
    }

    .footer-disclaimer{
        margin-top:45px;
    }

    .bottom-content{
        flex-direction:column;
        text-align:center;
    }

}

/*====================================
        MOBILE
=====================================*/

@media (max-width:767px){

    .footer-overlay{
        padding:50px 0 35px;
    }

    .footer-logo img{
        width:180px;
    }

    .footer-text{
        font-size:16px;
        line-height:1.7;
    }

    .connect-title{
        font-size:32px;
        margin-top:25px;
    }

    .footer-heading{
        font-size:30px;
        margin-bottom:20px;
    }

    .footer-links li{
        margin-bottom:10px;
    }

    .footer-links li a{
        font-size:17px;
    }

    .contact-row{
        flex-direction:column;
        gap:4px;
    }

    .contact-row span{
        width:100%;
        font-size:17px;
    }

    .contact-row p{
        font-size:17px;
    }

    .payment-methods img{
        width:240px;
    }

    .social-icons{
        gap:14px;
    }

    .social-icons a{
        width:40px;
        height:40px;
        font-size:17px;
    }

    .subscribe-box{
        flex-direction:column;
    }

    .subscribe-box input{
        width:100%;
        height:58px;
        padding:0 25px;
        background-size:100% 100%;
    }

    .subscribe-box button{
        position:relative;
        right:auto;
        margin-top:12px;
        width:180px;
        height:55px;
    }

    .footer-disclaimer{
        margin-top:35px;
        padding-top:20px;
    }

    .footer-disclaimer p{
        font-size:14px;
        line-height:1.8;
    }

    .bottom-content p{
        font-size:14px;
    }

    .bottom-links{
        flex-wrap:wrap;
        justify-content:center;
        gap:12px;
    }

    .bottom-links a{
        font-size:14px;
    }

}

/*====================================
        EXTRA SMALL
=====================================*/

@media (max-width:480px){

    .footer-heading{
        font-size:28px;
    }

    .connect-title{
        font-size:28px;
    }

    .subscribe-box button{
        width:160px;
    }

    .payment-methods img{
        width:210px;
    }

    .bottom-links{
        flex-direction:column;
        gap:8px;
    }

    .bottom-links span{
        display:none;
    }

}

/* =========================================================
   ADDITIONAL MOBILE / TABLET RESPONSIVE FIXES
   (kept last on purpose — these override earlier fixed
   width/height rules at small screen widths)
   ========================================================= */

img{ max-width: 100%; height: auto; }

/* ---------- HERO ---------- */
@media (max-width: 767.98px){
  .hero-wrapper{ background-size: cover; min-height: auto; }
}
@media (max-width: 991.98px){
  .scroll-bg-img{ width: 100%; max-width: 480px; }
}
@media (max-width: 575.98px){
  .scroll-bg-img{ max-width: 532px;
        padding-left: -20px;
        margin-left: -101px }
  .scroll-wrap{ max-width: 300px; }
  .scroll-form-content{top: 22%;left: 12%;right: 9%; }
  .scroll-title{ font-size: 1.05rem; margin-bottom: 12px; }
  .form-control-line{ font-size: .82rem; }
  .quote-submit-btn{ font-size: 1rem; }
  .feather-inkpot-img{ width: 36%; }
  .hero-section{ padding-bottom: 90px; }
}

/* ---------- WHY SECTION / AUTHOR ---------- */
@media (max-width: 991.98px){
  .why-section{ padding: 50px 0; text-align: center; }
  .photo-wrapper{ width: 100%; max-width: 380px; margin: 0 auto 30px; }
  .paper-frame{ margin-left: 0; max-width: 100%; }
  .ink-left, .ink-right{ display: none; }
  .clock-img{ width: 150px; left: -10px; bottom: -10px; }
  .typewriter-img{ width: 120px; right: -10px; bottom: -5px; }
  .read-btn{ margin: 20px auto 0; }
}
@media (max-width: 575.98px){
  .clock-img, .typewriter-img{ display: none; }
  .paper-card{ padding: 22px;  margin-top: -108px; height: 185px;}
  .photo-wrapper{
    margin-bottom: -50px;
  }
  .card-image{ width: 80px; height: 80px; }
  .read-btn{ width: 150px; height: 50px; font-size: 16px; }
}

/* ---------- RECOMMENDED / BOOK SCROLL ---------- */
@media (max-width: 991.98px){
  .recommended-section{ padding: 60px 0 0; }
  .section-title h2{ text-align: center; }
  .paper-heading1{ width: 100%; max-width: 340px; padding: 12px 18px; }
  .left-decoration, .right-decoration{ display: none; }
  .book-scroll{ padding: 30px 18px; min-height: auto; }
  .books-wrapper{ flex-wrap: wrap; gap: 10px; }
  .b4, .b6{ width: 110px; height: 165px; }
  .b5{ width: 130px; height: 195px; }
  .paper-content{ height: auto; padding: 22px 18px; text-align: center; }
}
@media (max-width: 575.98px){
  .paper-heading1{ max-width: 260px; padding: 10px 14px; font-size: .85rem; }
  .b4, .b6{ width: 85px; height: 128px; }
  .b5{ width: 100px; height: 150px; }
}

/* ---------- BANNER STRIP ---------- */
@media (max-width: 991.98px){
  .paper-heading{ width: 100%; height: 160px; background-size: cover; }
}
@media (max-width: 575.98px){
  .paper-heading{ height: 110px; }
}

/* ---------- SERVICES ---------- */
@media (max-width: 991.98px){
  .service-card{ width: 170px; min-height: 260px; padding: 25px 14px; }
  .service-card img{ width: 55px; height: 55px; }
}
@media (max-width: 575.98px){
  .service-card{ width: 100%; max-width: 280px; margin: 0 auto 20px; }
}

/* ---------- TOP BOOKS / PORTFOLIO BOARD ---------- */
@media (max-width: 991.98px){
  .top-books-section{ padding-top: 50px; }
  .paper-board{ padding: 50px 25px; }
  .books-grid .book{ width: 150px; }
}
@media (max-width: 575.98px){
  .books-grid{ gap: 16px; }
  .books-grid .book{ width: 42%; }
  .rotate-left, .rotate-right{ transform: none; }
  .portfolio-tabs button{ font-size: 14px; }
  .portfolio-tabs button.active{ padding: 8px 18px; }
}

/* ---------- CONTACT ---------- */
@media (max-width: 991.98px){
  .contact-vintage-section{ padding: 70px 0 50px; text-align: center; }
  .books-stack{ margin-top: 30px; }
}
@media (max-width: 575.98px){
  .ribbon-btn{ width: 100%; padding: 14px 0; }
}

/* ---------- OFFER STRIP ---------- */
@media (max-width: 991.98px){
  .offer-strip{ padding: 50px 0 70px; }
  .offer-paper{ padding: 40px 30px; transform: rotate(2deg); text-align: center; }
  .offer-paper p{ max-width: 100%; }
  .offer-typewriter{ width: 160px; right: -40px; bottom: -50px; opacity: .55; }
}
@media (max-width: 575.98px){
  .offer-paper{ padding: 28px 16px; transform: none; }
  .offer-btn{ width: 100%; min-width: 0; }
  .offer-typewriter{ display: none; }
}

/* ---------- FOOTER ---------- */
@media (max-width: 991.98px){
  .footer-overlay{ padding: 30px 0 60px; text-align: center; }
  .footer-text{ margin: 18px auto; }
  .subscribe-box{ margin: 0 auto; }
}
@media (max-width: 767.98px){
  .subscribe-box input{
    padding: 14px 16px;
    background-size: 100% 100%;
    margin-left: 0;
    height: 48px;
  }
  .subscribe-box button{
    background-size: 100% 100%;
    margin-left: 0;
  }
  .contact-row{ justify-content: center; }
  .payment-methods{ justify-content: center; }
  .social-icons{ justify-content: center; }
}
@media (max-width: 575.98px){
  .contact-row span{ min-width: 70px; font-size: 16px; }
  .contact-row p{ font-size: 16px; }
}