/*====================================================
 HVAC HANDBOOK
 PART 1 - WRAPPER + BOOK
====================================================*/

.handbook-section{

    padding:10px 20px;

    background:#f4f7fb;

}

/*----------------------------------------------------
MAIN WRAPPER
----------------------------------------------------*/

.handbook-wrapper{

    max-width:1320px;

    margin:0 auto;

    display:grid;

    grid-template-columns:190px 1fr 250px;

    column-gap:20px;

    align-items:center;

    padding:18px 24px;

    min-height:280px;

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:linear-gradient(135deg,#07235B 0%,#0B4AA6 100%);

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}

/*----------------------------------------------------
BACKGROUND SHAPES
----------------------------------------------------*/

.handbook-wrapper::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-110px;

    right:-110px;

}

.handbook-wrapper::after{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    bottom:-75px;

    left:-75px;

}

/*----------------------------------------------------
BOOK COLUMN
----------------------------------------------------*/

.book-column{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:240px;

    z-index:5;

}

.book-column::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    filter:blur(25px);

    z-index:-1;

}

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

.book-cover{

    width:230px;

    max-width:none;

    display:block;

    position:relative;

    z-index:3;

    filter:drop-shadow(0 22px 35px rgba(0,0,0,.45));

    transition:.35s ease;

}

.book-cover:hover{

    transform:translateY(-4px);

}

/*----------------------------------------------------
NEW BADGE
----------------------------------------------------*/

.new-badge{

    position:absolute;

    top:15px;

    left:-8px;

    width:74px;

    height:74px;

    border-radius:50%;

    background:#ff9800;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    font-size:12px;

    font-weight:700;

    line-height:1.1;

    z-index:20;

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

}

.new-badge span{

    display:block;

    font-size:9px;

    font-weight:600;

    margin-top:2px;

}
/*====================================================
 HVAC HANDBOOK
 PART 2 - CONTENT
====================================================*/

/*----------------------------------------------------
CONTENT COLUMN
----------------------------------------------------*/

.content-column{

    position:relative;

    z-index:10;

}

/*----------------------------------------------------
TOP LABEL
----------------------------------------------------*/

.guide-label{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(255,255,255,.12);

    color:#ffffff;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

/*----------------------------------------------------
TITLE
----------------------------------------------------*/

.content-column h2{

    margin:0;

    font-size:44px;

    line-height:1.08;

    font-weight:800;

    color:#ffffff;

}

.content-column h2 span{

    display:block;

    color:#FFD44A;

}

/*----------------------------------------------------
DESCRIPTION
----------------------------------------------------*/

.content-column p{

    margin:18px 0 25px;

    max-width:640px;

    color:#d9e8ff;

    font-size:15px;

    line-height:1.8;

}

/*----------------------------------------------------
FEATURES
----------------------------------------------------*/

.feature-row{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:15px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

}

.feature-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.3s;

}

.feature-icon i{

    color:#ffffff;

    font-size:22px;

}

.feature-item:hover .feature-icon{

    background:#FFD44A;

    color:#07235B;

    transform:translateY(-3px);

}

.feature-item strong{

    display:block;

    font-size:14px;

    color:#ffffff;

    margin-bottom:2px;

}

.feature-item span{

    display:block;

    font-size:12px;

    color:#b9d0ff;

    font-weight:400;

}

/*====================================================
 HVAC HANDBOOK
 PART 3 - PURCHASE CARD
====================================================*/

/*----------------------------------------
PURCHASE COLUMN
----------------------------------------*/

.purchase-column{

    position:relative;

    z-index:10;

    width:100%;

    max-width:340px;

    justify-self:end;

}

.purchase-box{

    width:100%;

    background:#ffffff;

    border-radius:18px;

    padding:30px 28px;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    text-align:center;

}

/*----------------------------------------
RATING
----------------------------------------*/

.stars{

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

    color:#FFD700;

}

.stars span{

    color:#ffffff;

}

.rating-text{

    color:#ffffff;

}

/*----------------------------------------
PRICE
----------------------------------------*/

.price{

    margin-bottom:22px;

}

.old-price{

    display:block;

    color:rgba(255,255,255,.70);

    font-size:18px;

    text-decoration:line-through;

    margin-bottom:8px;

}

.current-price{

    display:block;

    color:#ffffff;

    font-size:54px;

    font-weight:900;

    line-height:1;

    letter-spacing:-1px;

}

.current-price small{

    font-size:18px;

    font-weight:600;

}

/*----------------------------------------
BUY BUTTON
----------------------------------------*/

.buy-button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    height:60px;

    padding:0 20px;

    border-radius:14px;

    background:#ff9800;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    white-space:nowrap;

    transition:.3s;

    box-shadow:0 10px 20px rgba(255,152,0,.35);

}

.buy-button:hover{

    background:#f57c00;

    transform:translateY(-3px);

}

/*----------------------------------------
SECURE BOX
----------------------------------------*/

.secure{

    margin-top:20px;

    padding-top:18px;

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

    color:#ffffff;

}

.secure strong{

    color:#ffffff;

    font-size:15px;

    font-weight:700;

}

.paypal-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:10px;

    color:#ffffff;

    font-size:14px;

    font-weight:500;

}

.paypal-logo{

    width:95px;

    height:auto;

    display:block;

    margin:0 auto;

}

/*----------------------------------------
RESPONSIVE
----------------------------------------*/

@media(max-width:1100px){

.handbook-wrapper{

    grid-template-columns:1fr;

    text-align:center;

    gap:30px;

}

.book-column{

    order:1;

}

.content-column{

    order:2;

}

.purchase-column{

    order:3;

}

.feature-row{

    justify-content:center;

}

.content-column p{

    max-width:100%;

}

}

@media(max-width:768px){

.handbook-section{

    padding:20px 15px;

}

.handbook-wrapper{

    padding:20px;

}

.book-cover{

    width:170px;

}

.content-column h2{

    font-size:32px;

}

.feature-row{

    flex-direction:column;

    align-items:center;

}

.current-price{

    font-size:34px;

}

.buy-button{

    font-size:16px;

}

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

/* -------------------- Tablets -------------------- */

@media (max-width:1200px){

.handbook-wrapper{

    grid-template-columns:180px 1fr 280px;

    gap:20px;

    padding:20px;

}

.book-cover{

    width:200px;

}

.content-column h2{

    font-size:38px;

}

.content-column p{

    font-size:15px;

}

.feature-row{

    gap:18px;

}

.purchase-column{

    max-width:280px;

}

}

/* -------------------- Small Tablets -------------------- */

@media (max-width:992px){

.handbook-wrapper{

    grid-template-columns:1fr;

    text-align:center;

    gap:30px;

    padding:30px 25px;

}

.book-column{

    justify-content:center;

    width:100%;

}

.book-cover{

    width:220px;

}

.new-badge{

    left:calc(50% - 120px);

    top:0;

}

.content-column{

    text-align:center;

}

.content-column p{

    max-width:100%;

}

.feature-row{

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

}

.purchase-column{

    max-width:360px;

    width:100%;

    margin:0 auto;

}

}

/* -------------------- Phones -------------------- */

@media (max-width:768px){

.handbook-section{

    padding:20px 15px;

}

.handbook-wrapper{

    border-radius:18px;

    padding:25px 20px;

    gap:25px;

}

.guide-label{

    font-size:10px;

}

.content-column h2{

    font-size:32px;

    line-height:1.2;

}

.content-column p{

    font-size:15px;

    line-height:1.7;

}

.book-cover{

    width:180px;

}

.new-badge{

    width:60px;

    height:60px;

    font-size:10px;

}

.feature-row{

    flex-direction:column;

    align-items:center;

    gap:18px;

}

.feature-item{

    width:100%;

    justify-content:center;

}

.purchase-column{

    width:100%;

    max-width:100%;

}

.purchase-box{

    padding:25px;

}

.current-price{

    font-size:46px;

}

.buy-button{

    width:100%;

    font-size:16px;

    white-space:normal;

    text-align:center;

}

}

/* -------------------- Small Phones -------------------- */

@media (max-width:480px){

.handbook-section{

    padding:15px 10px;

}

.handbook-wrapper{

    padding:20px 15px;

}

.book-cover{

    width:150px;

}

.content-column h2{

    font-size:28px;

}

.content-column p{

    font-size:14px;

}

.feature-icon{

    width:50px;

    height:50px;

}

.feature-icon i{

    font-size:22px;

}

.feature-item strong{

    font-size:16px;

}

.feature-item span{

    font-size:13px;

}

.current-price{

    font-size:38px;

}

.buy-button{

    font-size:15px;

    padding:14px;

}

.stars{

    font-size:16px;

}

}