/* =========================
   CONNECT SECTION
========================= */

.connect-section{
    padding:80px 0;

    background:#3e95a8;

    text-align:center;

    overflow:hidden;
}

/* SUBTITLE */

.connect-subtitle{
    display:inline-block;

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

    color:#fff;

    margin-bottom:12px;

    letter-spacing:1px;
}

/* TITLE */

.connect-title{
    font-size:42px;
    font-weight:600;

    color:#111;

    margin-bottom:20px;
}

.connect-title span{
    color:#ff7a00;
}

/* DESCRIPTION */

.connect-desc{
    max-width:720px;

    margin:auto;

    font-size:16px;

    line-height:1.9;

    color:#f5f5f5;
}

/* SOCIAL AREA */

.connect-socials{
    margin-top:50px;

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

    gap:55px;

    flex-wrap:wrap;
}

/* ICON BOX */

.social-box{
    width:82px;
    height:82px;

    border-radius:50%;

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

    background:rgba(255,255,255,0.12);

    border:3px solid rgba(255,255,255,0.75);

    box-shadow:0 0 20px rgba(255,255,255,0.30);

    transition:0.35s ease;

    text-decoration:none;
}

/* ICON */

.social-box img{
    width:38px;
    height:38px;

    object-fit:contain;
}

/* HOVER */

.social-box:hover{
    transform:translateY(-5px);

    box-shadow:0 0 28px rgba(255,255,255,0.55);
}

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

@media(max-width:991px){

    .connect-section{
        padding:70px 0;
    }

    .connect-title{
        font-size:36px;
    }

    .connect-desc{
        font-size:15px;
    }

    .connect-socials{
        gap:40px;
    }

    .social-box{
        width:75px;
        height:75px;
    }

    .social-box img{
        width:34px;
        height:34px;
    }

}

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

@media(max-width:576px){

    .connect-section{
        padding:60px 0;
    }

    .connect-subtitle{
        font-size:14px;
    }

    .connect-title{
        font-size:30px;

        margin-bottom:16px;
    }

    .connect-desc{
        font-size:14px;

        line-height:1.8;

        padding:0 10px;
    }

    .connect-socials{
        margin-top:35px;

        gap:24px;
    }

    .social-box{
        width:68px;
        height:68px;
    }

    .social-box img{
        width:30px;
        height:30px;
    }

}