/* ============================================
   TOOL PAGE
   File: css/pages/tool.css
============================================ */

/* ===========================
   PAGE
=========================== */

body{
    background:#0A1628;
    color:#ffffff;
}

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

.page-heading{
    margin:60px 0 50px;
}

.page-heading .section-title{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    font-weight:700;
    color:#D4AF37;
    margin-bottom:12px;
}

.page-heading .section-subtitle{
    display:inline-block;
    padding-left:18px;
    border-left:4px solid #D4AF37;

    font-size:1.2rem;
    color:#AEBBD1;
}

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

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,320px));
    justify-content:center;
    gap:28px;
}

/* ===========================
   CALCULATOR CARD
=========================== */

.calc-card{

    display:flex;
    flex-direction:column;

    width:100%;
    min-height:320px;

    padding:32px;

    background:linear-gradient(145deg,#13284B,#0D1F3C);

    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;

    transition:.35s ease;
    cursor:pointer;
}

.calc-card:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 18px rgba(212,175,55,.18);
}

/* ===========================
   ICON
=========================== */

.calc-card-icon{

    font-size:48px;
    color:#D4AF37;

    margin-bottom:24px;
}

/* ===========================
   TITLE
=========================== */

.calc-card-title{

    margin:0 0 16px;

    font-family:'Playfair Display',serif;
    font-size:2rem;
    font-weight:700;
    line-height:1.25;

    color:#ffffff;
}

/* ===========================
   DESCRIPTION
=========================== */

.calc-card-desc{

    flex:1;

    margin:0 0 30px;

    font-family:'Inter',sans-serif;
    font-size:1.05rem;
    line-height:1.7;

    color:#AEBBD1;
}

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

.btn-calc{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:180px;
    height:50px;

    border:1px solid rgba(212,175,55,.45);
    border-radius:50px;

    background:transparent;

    color:#D4AF37;

    font-size:1rem;
    font-weight:700;

    text-decoration:none;

    transition:.3s ease;
}

.btn-calc i{
    transition:transform .3s ease;
}

.btn-calc:hover{

    background:#D4AF37;

    color:#0A1628;

    border-color:#D4AF37;
}

.btn-calc:hover i{
    transform:translateX(6px);
}

/* ===========================
   CALCULATOR CONTAINER
=========================== */

#calculator-container{
    margin-top:70px;
}

/* ===========================
   CALL TO ACTION
=========================== */

.cta-section{

    margin-top:90px;

    padding:90px 20px;

    background:#102344;

    text-align:center;
}

.cta-section .container{

    max-width:1000px;
    margin:auto;
}

.cta-section h2{

    font-family:'Playfair Display',serif;
    font-size:3.2rem;

    color:#ffffff;

    margin-bottom:20px;
}

.cta-section p{

    max-width:800px;

    margin:0 auto 45px;

    font-size:1.25rem;
    line-height:1.7;

    color:#D6DCE8;
}

.cta-buttons{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

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

@media (max-width:1200px){

    .dashboard-grid{
        grid-template-columns:repeat(auto-fit,minmax(260px,300px));
    }

}

@media (max-width:992px){

    .page-heading .section-title{
        font-size:2.5rem;
    }

    .dashboard-grid{
        grid-template-columns:repeat(auto-fit,minmax(250px,290px));
    }

}

@media (max-width:768px){

    .page-heading{
        margin:40px 0;
    }

    .page-heading .section-title{
        font-size:2rem;
    }

    .page-heading .section-subtitle{
        font-size:1rem;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
        justify-items:center;
    }

    .calc-card{

        width:100%;
        max-width:420px;

        min-height:auto;

        padding:24px;
    }

    .calc-card-title{
        font-size:1.5rem;
    }

    .calc-card-desc{
        font-size:.95rem;
    }

    .btn-calc{
        width:100%;
    }

    .cta-section{
        padding:70px 20px;
    }

    .cta-section h2{
        font-size:2.2rem;
    }

    .cta-section p{
        font-size:1.1rem;
    }

}