/* ==========================================================
   ACMOBOOK FOOTER
   PART 1
========================================================== */

.footer{
    position:relative;
    margin-top:180px;
    padding-top:30px;
    background:#fff;
    border-top:1px solid #EEF2F7;
}

/*==========================================================
CTA
==========================================================*/

.footer-cta{
    position:relative;
    margin-top:-90px;
    margin-bottom:80px;
}

.footer-cta-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    padding:60px;

    background:
    linear-gradient(
        135deg,
        #5B5CFF 0%,
        #6C63FF 40%,
        #18C8FF 100%
    );

    color:#fff;

    box-shadow:
    0 35px 80px rgba(91,92,255,.25);

}

.footer-cta-card::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-80px;
    top:-80px;

    border-radius:50%;

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

}

.footer-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(20px);

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.footer-cta-card h2{

    font-size:42px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:18px;

}

.footer-cta-card p{

    font-size:17px;

    line-height:1.8;

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

    max-width:620px;

}

.footer-cta-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-cta-buttons .btn{

    height:58px;

    border-radius:16px;

    font-weight:700;

    font-size:15px;

    transition:.35s;

}

.footer-cta-buttons .btn-primary{

    background:#fff;

    color:#5B5CFF;

    border:none;

}

.footer-cta-buttons .btn-primary:hover{

    transform:translateY(-4px);

}

.footer-cta-buttons .btn-outline-primary{

    border:2px solid
    rgba(255,255,255,.45);

    color:#fff;

}

.footer-cta-buttons .btn-outline-primary:hover{

    background:#fff;

    color:#5B5CFF;

}

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

.footer-main{

    padding-bottom:70px;

}

.footer-brand{

    padding-right:35px;

}

.footer-logo{

    font-size:42px;

    font-weight:900;

    margin-bottom:16px;

}

.footer-tagline{

    font-size:18px;

    font-weight:700;

    color:#5B5CFF;

    margin-bottom:14px;

}

.footer-desc{

    color:#64748b;

    line-height:1.9;

    font-size:16px;

    max-width:470px;

    margin-bottom:35px;

}

/*==========================================================
HIGHLIGHTS
==========================================================*/

.footer-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.footer-highlights span{

    padding:10px 18px;

    border-radius:999px;

    background:#f8fafc;

    border:1px solid #edf2f7;

    color:#334155;

    font-size:14px;

    font-weight:600;

    transition:.30s;

}

.footer-highlights span:hover{

    transform:translateY(-3px);

    background:
    linear-gradient(
    135deg,
    #5B5CFF,
    #18C8FF);

    color:#fff;

}

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

.footer-column{

    padding-left:25px;

}

.footer-column h5{

    font-size:17px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:28px;

}

.footer-column a{

    display:block;

    text-decoration:none;

    color:var(--muted, #64748b);

    margin-bottom:16px;

    transition:color var(--transition-fast, .18s),
               transform var(--transition-fast, .18s);

    font-size:15px;

    padding:4px 0;

}

.footer-column a:focus-visible{

    outline:none;

    color:var(--primary, #5B5CFF);

    box-shadow:var(--focus-ring, 0 0 0 3px rgba(108,99,255,.35));

    border-radius:4px;

}

.footer-column a:hover{

    color:#5B5CFF;

    transform:translateX(6px);

}

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

.footer-social{

    display:flex;

    gap:14px;

    margin-top:35px;

}

.footer-social a{

    width:50px;
    height:50px;

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

    border-radius:50%;

    text-decoration:none;

    color:var(--muted, #64748b);

    background:var(--surface, #fff);

    border:1px solid var(--border-light, #E8EDF5);

    box-shadow:var(--shadow-xs, 0 2px 6px rgba(15,23,42,.04));

    transition:transform var(--transition, .35s),
               background var(--transition, .35s),
               color var(--transition, .35s),
               box-shadow var(--transition, .35s);

}

.footer-social a:focus-visible{

    outline:none;

    box-shadow:var(--focus-ring, 0 0 0 3px rgba(108,99,255,.35));

}

.footer-social a:hover{

    color:#fff;

    background:
    linear-gradient(
    135deg,
    #5B5CFF,
    #18C8FF);

    transform:
    translateY(-6px);

    box-shadow:
    0 20px 45px rgba(91,92,255,.25);

}

/*==========================================================
QUOTE
==========================================================*/

.footer-quote{

    position:relative;

    margin:10px 0 40px;

    padding:40px 20px;

    text-align:center;

    border-top:1px solid #EEF2F7;

    border-bottom:1px solid #EEF2F7;

}

.footer-quote p{

    margin:0;

    color:#64748b;

    font-size:20px;

    font-style:italic;

    font-weight:500;

}

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

.footer-bottom{

    padding-bottom:45px;

    color:#64748b;

    font-size:15px;

}

.footer-bottom .row{

    align-items:center;

}

.footer-bottom a{

    color:#5B5CFF;

    text-decoration:none;

}

.footer-bottom a:hover{

    text-decoration:underline;

}

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

@media(max-width:991px){

.footer{

    margin-top:90px;

}

.footer-cta{

    margin-top:-55px;

}

.footer-cta-card{

    padding:40px 32px;

    text-align:center;

}

.footer-cta-card h2{

    font-size:32px;

}

.footer-cta-buttons{

    margin-top:30px;

}

.footer-brand{

    padding-right:0;

    text-align:center;

}

.footer-desc{

    margin-left:auto;
    margin-right:auto;

}

.footer-highlights{

    justify-content:center;

}

.footer-social{

    justify-content:center;

}

.footer-column{

    padding-left:0;

    text-align:center;

    margin-top:35px;

}

.footer-column a:hover{

    transform:none;

}

.footer-bottom{

    text-align:center;

}

.footer-bottom .text-lg-end{

    margin-top:15px;

}

}

@media(max-width:576px){

.footer{

    margin-top:70px;

}

.footer-cta-card{

    padding:30px 24px;

    border-radius:24px;

}

.footer-badge{

    font-size:12px;

}

.footer-cta-card h2{

    font-size:28px;

}

.footer-cta-card p{

    font-size:15px;

}

.footer-cta-buttons .btn{

    width:100%;

    min-height:48px;

}

.footer-logo{

    font-size:34px;

}

.footer-tagline{

    font-size:16px;

}

.footer-desc{

    font-size:15px;

}

.footer-highlights{

    gap:10px;

}

.footer-highlights span{

    font-size:13px;

    padding:8px 14px;

}

.footer-social a{

    width:46px;

    height:46px;

}

.footer-quote{

    padding:30px 10px;

}

.footer-quote p{

    font-size:17px;

}

.footer-bottom{

    font-size:14px;

}

}

/* Tablet breakpoint */

@media(min-width:577px) and (max-width:991px){

.footer-main .row{

    row-gap:40px;

}

.footer-column{

    margin-top:0;

}

}


