@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

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

.footer{
    background:linear-gradient(
        135deg,
        #0d3f95 45%,
        #071f4f 100%
    );

    color:#ffffff;
    font-family: 'Poppins';

    padding:50px 40px 5px;

    position:relative;
    overflow:hidden;
    text-align: left;
}

.footer *{
    box-sizing:border-box;
}

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

.footer-container{
    max-width:1350px;

    margin:0 auto;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:90px;

    padding-bottom:25px;

    border-bottom:1px solid rgba(255,255,255,.10);
}

/* ==================================================
   LEFT SIDE
================================================== */

.footer-left{
    flex:1;
    max-width:500px;
}

/* ==================================================
   LOGO
================================================== */

.footer-logo{
    display:flex;
    align-items:flex-start;
    gap:22px;
}

.footer-logo img{
    width:90px;
    height:90px;

    object-fit:contain;

    background:#ffffff;

    padding:12px;

    border-radius:22px;

    flex-shrink:0;
}

.footer-logo h2{
    font-size:36px;
    font-weight:600;
    line-height:1;

    margin:0 0 15px;
}

.footer-logo p{
    max-width:400px;

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

    line-height:1.9;

    font-size:17px;

    margin:0;
}

/* ==================================================
   RIGHT SIDE
================================================== */

.footer-right{
    flex:1.5;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:30px;
}

/* ==================================================
   COLUMNS
================================================== */

.footer-column{
    display:flex;
    flex-direction:column;
}

.footer-column h3{
    font-size:22px;
    font-weight:700;

    margin:0 0 28px;
}

.footer-column a{
    color:rgba(255,255,255,.75);

    text-decoration:none;

    margin-bottom:18px;

    font-size:16px;

    transition:.3s ease;
}

.footer-column a:hover{
    color:#ffffff;
    transform:translateX(5px);
}

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

.footer-column i{
    width:24px;
    margin-right:8px;

    color:#5ea5ff;
}

/* ==================================================
   COPYRIGHT
================================================== */

.footer-bottom{
    height:50px;

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

    text-align:center;

    font-size:15px;
    color:rgba(255,255,255,.60);
}

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

@media(max-width:1100px){

    .footer-container{
        flex-direction:column;
        gap:60px;
    }

    .footer-right{
        width:100%;
    }
}

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

@media(max-width:768px){

    .footer{
        padding:70px 25px 20px;
    }

    .footer-logo{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-logo h2{
        font-size:42px;
    }

    .footer-right{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer-column h3{
        margin-bottom:20px;
    }
}


/* =====================================
   BACK TO TOP
===================================== */

.back-to-top{
    position:fixed;

    right:30px;
    bottom:30px;

    width:58px;
    height:58px;

    border-radius:50%;

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

    background:linear-gradient(
        135deg,
        #1d76ec,
        #4fa4ff
    );

    color:#fff;

    text-decoration:none;

    font-size:20px;

    box-shadow:
    0 10px 30px rgba(29,118,236,.30);

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    z-index:9999;
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    transform:translateY(-5px);

    box-shadow:
    0 15px 35px rgba(29,118,236,.40);
}

.back-to-top i{
    transition:.3s ease;
}

.back-to-top:hover i{
    transform:translateY(-3px);
}