/*==================================================
=            FACEBOOK SECTION                      =
==================================================*/

.footer-facebook{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin:60px 0;
}

.fb-card{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:320px;
    border-radius:26px;
    padding:45px;
    background:#171d27;
    border:1px solid rgba(255,255,255,.06);
    transition:.35s;
}

.fb-card:hover{
    transform:translateY(-6px);
    box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.fb-page{
    background:
    radial-gradient(circle at top right,#2684ff55 0%,transparent 55%),
    linear-gradient(135deg,#1d2736,#11161e);
}

.fb-group{
    background:
    radial-gradient(circle at top right,#00b8ff44 0%,transparent 55%),
    linear-gradient(135deg,#182535,#11161e);
}

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

.fb-left{
    width:48%;
    position:relative;
    z-index:5;
}

.fb-subtitle{
    display:inline-block;
    margin-bottom:18px;
    padding:7px 14px;
    border-radius:40px;
    background:#1877F2;
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.fb-left h2{
    margin:0 0 18px;
    color:#fff;
    font-size:34px;
    font-weight:700;
    line-height:1.25;
}

.fb-left p{
    margin:0;
    color:#9aa7b8;
    line-height:1.8;
    font-size:15px;
}

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

.fb-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:30px;
    height:50px;
    padding:0 28px;
    border-radius:60px;
    background:#1877F2;
    color:#fff;
    font-weight:600;
    text-decoration:none;
    transition:.35s;
}

.fb-btn:hover{
    background:#2c88ff;
    transform:translateY(-2px);
}

.fb-btn:after{
    content:"→";
    margin-left:12px;
    transition:.3s;
}

.fb-btn:hover:after{
    transform:translateX(5px);
}

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

.fb-right{
    position:relative;
    width:48%;
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
}

.fb-right img{
    position:relative;
    z-index:5;
    max-width:100%;
    max-height:260px;
    transition:.45s;
}

.fb-card:hover .fb-right img{
    transform:scale(1.04);
}

/*================ BIG CIRCLE =================*/

.fb-circle{
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    background:rgba(24,119,242,.10);
    right:-70px;
    bottom:-90px;
}

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

.fb-logo{
    position:absolute;
    top:25px;
    right:25px;
    width:64px;
    height:64px;
    border-radius:50%;
    background:#1877F2;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    box-shadow:0 12px 35px rgba(24,119,242,.45);
    z-index:8;
}

/*================ DECOR =================*/

.fb-card:before{
    content:"";
    position:absolute;
    left:-120px;
    top:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.02);
}

.fb-card:after{
    content:"";
    position:absolute;
    right:-120px;
    bottom:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.02);
}

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

.footer{
    margin-top:70px;
    background:#11161e;
    border-top:1px solid rgba(255,255,255,.06);
}

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

.footer-top{

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

    gap:40px;

    padding:55px 0;

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

}

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

.footer-logo{

    display:flex;
    align-items:center;

    gap:18px;

}

.footer-logo img{

    width:70px;
    height:70px;
    object-fit:contain;

}

.footer-logo h3{

    margin:0;

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.footer-logo span{

    display:block;

    margin-top:6px;

    color:#8e99aa;

    font-size:14px;

}

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

.footer-links{

    display:flex;

    gap:35px;

}

.footer-links a{

    color:#b6c3d2;

    text-decoration:none;

    font-size:15px;

    transition:.3s;

    position:relative;

}

.footer-links a:hover{

    color:#fff;

}

.footer-links a:after{

    content:"";

    position:absolute;

    left:0;
    bottom:-7px;

    width:0;

    height:2px;

    background:#1877F2;

    transition:.3s;

}

.footer-links a:hover:after{

    width:100%;

}

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

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:#1b222d;

    color:#d5dce8;

    font-size:18px;

    transition:.35s;

}

.footer-social a:hover{

    background:#1877F2;

    color:#fff;

    transform:translateY(-4px);

}

/*================ TOP.GE =================*/

.footer-center{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:35px 0;

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

}

.footer-center img{

    transition:.3s;

}

.footer-center img:hover{

    transform:scale(1.05);

}

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

.footer-bottom{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:28px 0;

    color:#7d8999;

    font-size:14px;

    letter-spacing:.3px;

}
/*==================================================
=              PREMIUM EFFECTS                     =
==================================================*/

/* Card Glow */

.fb-card{

    isolation:isolate;

}

.fb-card::before{

    animation:floatGlow 8s linear infinite;

}

.fb-card::after{

    animation:floatGlow2 10s linear infinite;

}

/*================ HOVER =================*/

.fb-card:hover{

    border-color:rgba(24,119,242,.35);

}

.fb-card:hover .fb-circle{

    transform:scale(1.15);

    opacity:.9;

}

.fb-circle{

    transition:.6s;

}

/*================ IMAGE =================*/

.fb-right img{

    filter:

    drop-shadow(0 30px 40px rgba(0,0,0,.45));

}

.fb-card:hover img{

    transform:

    translateY(-8px)

    scale(1.05);

}

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

.fb-logo{

    transition:.45s;

}

.fb-card:hover .fb-logo{

    transform:

    rotate(-8deg)

    scale(1.08);

}

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

.fb-btn{

    overflow:hidden;

    position:relative;

}

.fb-btn:before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.25),

    transparent

    );

    transition:.8s;

}

.fb-btn:hover:before{

    left:120%;

}

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

.footer-logo img{

    transition:.35s;

}

.footer-logo:hover img{

    transform:rotate(-6deg) scale(1.08);

}

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

.footer-social a{

    box-shadow:

    inset 0 0 0 1px rgba(255,255,255,.04);

}

.footer-social a:hover{

    box-shadow:

    0 10px 25px rgba(24,119,242,.35);

}

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

.footer-links a{

    transition:.3s;

}

.footer-links a:hover{

    padding-left:6px;

}

/*================ TOP.GE =================*/

.footer-center img{

    opacity:.85;

}

.footer-center img:hover{

    opacity:1;

}

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

.footer-bottom{

    position:relative;

}

.footer-bottom:before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:120px;

    height:2px;

    background:

    linear-gradient(

    90deg,

    transparent,

    #1877F2,

    transparent

    );

}

/*==================================================
=                 ANIMATIONS                       =
==================================================*/

@keyframes floatGlow{

    0%{

        transform:

        translate(0,0)

        rotate(0deg);

    }

    50%{

        transform:

        translate(15px,-15px)

        rotate(8deg);

    }

    100%{

        transform:

        translate(0,0)

        rotate(0deg);

    }

}

@keyframes floatGlow2{

    0%{

        transform:

        translate(0,0);

    }

    50%{

        transform:

        translate(-12px,18px);

    }

    100%{

        transform:

        translate(0,0);

    }

}

/*================ SCROLL APPEAR =================*/

.fb-card{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

        translateY(30px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

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

/*************** 1400px ***************/

@media (max-width:1400px){

    .fb-left h2{

        font-size:30px;

    }

    .fb-card{

        padding:35px;

    }

}

/*************** 1200px ***************/

@media (max-width:1200px){

    .footer-facebook{

        gap:20px;

    }

    .fb-left{

        width:55%;

    }

    .fb-right{

        width:45%;

    }

    .fb-right img{

        max-height:220px;

    }

}

/*************** 992px ***************/

@media (max-width:992px){

    .footer-facebook{

        grid-template-columns:1fr;

    }

    .fb-card{

        min-height:300px;

    }

    .footer-top{

        flex-direction:column;

        text-align:center;

    }

    .footer-logo{

        justify-content:center;

    }

    .footer-links{

        justify-content:center;

        flex-wrap:wrap;

    }

    .footer-social{

        justify-content:center;

    }

}

/*************** 768px ***************/

@media (max-width:768px){

    .fb-card{

        flex-direction:column;

        text-align:center;

        padding:35px 25px;

    }

    .fb-left{

        width:100%;

    }

    .fb-right{

        width:100%;

        justify-content:center;

        margin-top:35px;

    }

    .fb-right img{

        max-height:200px;

    }

    .fb-circle{

        width:250px;

        height:250px;

        right:50%;

        transform:translateX(50%);

        bottom:-80px;

    }

    .fb-left h2{

        font-size:28px;

    }

    .fb-btn{

        margin:auto;

        margin-top:25px;

    }

}

/*************** 576px ***************/

@media (max-width:576px){

    .footer-facebook{

        margin:40px 0;

    }

    .fb-card{

        border-radius:18px;

        padding:28px 20px;

    }

    .fb-left h2{

        font-size:24px;

    }

    .fb-left p{

        font-size:14px;

    }

    .fb-right img{

        max-height:170px;

    }

    .fb-logo{

        width:54px;

        height:54px;

        font-size:22px;

    }

    .footer-top{

        padding:40px 0;

    }

    .footer-links{

        flex-direction:column;

        gap:18px;

    }

    .footer-links a{

        font-size:16px;

    }

    .footer-social a{

        width:44px;

        height:44px;

    }

    .footer-center{

        padding:25px 0;

    }

    .footer-bottom{

        padding:22px 15px;

        text-align:center;

        line-height:1.7;

    }

}