/* =========================
   GLOBAL
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#e7e7e7;
    overflow-x:hidden;
}

/* =========================
   HEADER
========================= */

header{
    background:#fff;
    padding:15px 25px;
}

.header-wrapper{
    max-width:1600px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.logo-section img{
    max-height:80px;
    width:auto;
}

.support-box{
    background:#f7f7f7;
    padding:15px 25px;
    border-radius:10px;
    text-align:center;
}

.support-box p{
    font-size:16px;
    margin-bottom:8px;
}

.support-item{
    color:#0a66c2;
    margin-top:5px;
    font-size:16px;
}

.support-item i{
    margin-right:8px;
}

.top-line{
    height:4px;
    background:#0a74bc;
}

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

.cards-section{
    max-width:1100px;
    margin:80px auto;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:35px;
    padding:0 15px;
}

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

.result-card{
    width:330px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;

    box-shadow:
    0 8px 20px rgba(0,0,0,.12);

    transition:all .35s ease;

    animation:fadeUp .8s ease forwards;
    opacity:0;
}

.result-card:nth-child(2){
    animation-delay:.2s;
}

.result-card:nth-child(3){
    animation-delay:.4s;
}

.result-card:hover{
    transform:translateY(-8px);

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

/* =========================
   CARD TOP
========================= */

.card-top{
    padding:25px;
    color:#fff;
    min-height:280px;
}

.orange .card-top{
    background:linear-gradient(
    135deg,
    #f58b6f,
    #f86c71
    );
}

.green .card-top{
    background:linear-gradient(
    135deg,
    #56db73,
    #53cd90
    );
}

.blue .card-top{
    background:linear-gradient(
    135deg,
    #2595c8,
    #36a9cb
    );
}

.card-top h2{
    font-size:18px;
    line-height:1.3;
    font-weight:700;
    margin-bottom:18px;
}

.card-top p{
    font-size:14px;
    line-height:1.6;
}

.highlight{
    margin-top:25px;
    font-size:15px;
    font-weight:600;
}

.year{
    margin-top:45px;
    font-size:62px;
    font-weight:300;
    line-height:1;
}

/* =========================
   CARD BUTTONS
========================= */

.card-bottom{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.card-bottom a{
    text-decoration:none;
    color:#444;

    font-size:14px;
    font-weight:500;

    text-align:center;

    padding:18px 10px;

    border:1px solid #ececec;

    transition:.3s;
}

.card-bottom a:hover{
    background:#f8f8f8;
    color:#0a66c2;
}

.full-btn{
    grid-column:span 2;
}

.single{
    grid-template-columns:1fr;
}

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

.home-btn{
    position:fixed;

    right:50px;
    bottom:50px;

    width:85px;
    height:85px;

    border:none;
    border-radius:50%;

    background:#f7931e;
    color:#fff;

    font-size:30px;

    cursor:pointer;

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

    transition:.3s;

    animation:pulse 2s infinite;
}

.home-btn:hover{
    transform:scale(1.08);
}

/* =========================
   ANIMATION
========================= */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes pulse{

    0%{
        box-shadow:
        0 0 0 0 rgba(247,147,30,.6);
    }

    70%{
        box-shadow:
        0 0 0 20px rgba(247,147,30,0);
    }

    100%{
        box-shadow:
        0 0 0 0 rgba(247,147,30,0);
    }

}

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

@media(max-width:992px){

    .cards-section{
        gap:25px;
    }

    .result-card{
        width:280px;
    }

}

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

@media(max-width:768px){

    header{
        padding:15px;
    }

    .header-wrapper{
        flex-direction:column;
        text-align:center;
    }

    .logo-section img{
        max-width:260px;
    }

    .cards-section{
        margin:40px auto;
    }

    .result-card{
        width:100%;
        max-width:340px;
    }

    .card-top{
        min-height:auto;
    }

    .year{
        font-size:50px;
    }

    .home-btn{
        width:70px;
        height:70px;
        right:20px;
        bottom:20px;
        font-size:24px;
    }

}

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

@media(max-width:480px){

    .card-bottom{
        grid-template-columns:1fr;
    }

    .full-btn{
        grid-column:auto;
    }

}

.btn-wrapper{
    position:relative;
}

.new-badge{
    position:absolute;
    top:347px;
    left:50%;
    transform:translateX(-50%);

    background:#dc2626;
    color:#fff;

    font-size:12px;
    font-weight:600;

    padding:3px 10px;
    border-radius:5px;

    z-index:10;

    animation:flashBadge 1s infinite;
}

/* Flashing Animation */

@keyframes flashBadge{

    0%{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

    50%{
        opacity:.4;
        transform:translateX(-50%) scale(1.15);
    }

    100%{
        opacity:1;
        transform:translateX(-50%) scale(1);
    }

}

 /* FOOTER */

        footer {
            background: #252832;
            color: white;
            padding: 20px;
        }

        .footer-wrap {
            max-width: 1400px;
            margin: auto;

            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px;
        }

        .footer-links a {
            color: white;
            text-decoration: none;
            margin-left: 15px;
        }