/*==============================
            FOOTER
===============================*/

.footer{
    position: relative;
    background: #062f34;
    color: #d7e4e7;
    padding: 65px 0 25px;
    overflow: hidden;
}

/* Background circles */

.footer::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(19,183,197,.05);
    top:-120px;
    left:-120px;
}

.footer::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(179,106,72,.05);
    right:-140px;
    bottom:-140px;
}

/* Top Gradient */

.footer-top-border{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#13b7c5,#b36a48);
}


/*==============================
        TITLE
===============================*/

.footer-title{
    color:#fff;
    font-size:24px;
    font-weight:700;
    margin-bottom:30px;
    position:relative;
}

.footer-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:60px;
    height:4px;
    border-radius:30px;
    background:linear-gradient(90deg,#13b7c5,#b36a48);
}


/*==============================
      DESCRIPTION
===============================*/

.footer-desc{
    color:#b7c7ca;
    font-size:15px;
    line-height:1.9;
    margin:25px 0;
}


/*==============================
      CONTACT
===============================*/

.contact-item{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:22px;
    transition:.35s;
}

.contact-item:hover{
    transform:translateX(8px);
}

.contact-icon{
    width:54px;
    height:54px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#0b454a;
    color:#13b7c5;
    font-size:20px;
    transition:.35s;
}

.contact-item:hover .contact-icon{
    background:linear-gradient(135deg,#13b7c5,#0c9ca9);
    color:#fff;
    transform:rotate(-8deg);
}

.contact-item small{
    display:block;
    color:#8ea2a7;
    font-size:13px;
    margin-bottom:3px;
}

.contact-item h6{
    color:#fff;
    font-size:18px;
    font-weight:600;
    margin:0;
}


/*==============================
      LINKS
===============================*/

.footer-links{
    list-style:none;
    margin:0;
    padding:0;
}

.footer-links li{
    margin-bottom:14px;
}

.footer-links a{
    color:#c4d2d5;
    text-decoration:none;
    display:flex;
    align-items:center;
    transition:.35s;
}

.footer-links a i{
    color:#13b7c5;
    margin-right:10px;
    transition:.35s;
}

.footer-links a:hover{
    color:#13b7c5;
    transform:translateX(8px);
}

.footer-links a:hover i{
    transform:translateX(4px);
}


/*==============================
     NEWSLETTER
===============================*/

.newsletter-box{
    background:#083d42;
    padding:22px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.06);
}

.newsletter-box p{
    color:#bdd0d3;
    margin-bottom:18px;
}

.newsletter-form{
    display:flex;
    align-items:center;
    gap:10px;
}

.newsletter-form input{
    flex:1;
    height:50px;
    /* padding:0 10px; */
    border:none;
    border-radius:12px;
}

.newsletter-form button{
    width:65px;
    height:50px;
    border:none;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#13b7c5;
    color:#fff;
    font-weight:600;
}

.newsletter-form button:hover{
    transform:translateY(-3px);
}


/*==============================
     SOCIAL
===============================*/

.social-icons{
    display:flex;
    gap:12px;
    margin:28px 0;
}

.social-icons a{
    width:46px;
    height:46px;
    border-radius:12px;
    background:#0b454a;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    transition:.35s;
}

.social-icons a:hover{
    background:linear-gradient(135deg,#13b7c5,#b36a48);
    transform:translateY(-6px);
}


/*==============================
      QR BUTTON
===============================*/

.qr-btn{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding:15px;
    border-radius:14px;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    background:linear-gradient(90deg,#13b7c5,#0b9ca8);
    transition:.35s;
}

.qr-btn:hover{
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(19,183,197,.25);
}


/*==============================
      DIVIDER
===============================*/

.footer-line{
    border:none;
    height:1px;
    background:rgba(255,255,255,.08);
    margin:50px 0 25px;
}


/*==============================
      FOOTER BOTTOM
===============================*/

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.copyright{
    color:#9fb2b6;
    font-size:14px;
}

.policy-links{
    display:flex;
    gap:25px;
}

.policy-links a{
    color:#c6d4d7;
    text-decoration:none;
    transition:.35s;
}

.policy-links a:hover{
    color:#13b7c5;
}

.recaptcha-text{
    color:#93a8ad;
    font-size:13px;
    margin-top:18px;
    line-height:1.8;
}

.recaptcha-text a{
    color:#13b7c5;
    text-decoration:none;
}


/*==============================
      RESPONSIVE
===============================*/

@media(max-width:991px){

.footer{
    text-align:center;
}

.footer-title::after{
    left:50%;
    transform:translateX(-50%);
}

.contact-item{
    justify-content:center;
    text-align:left;
}

.social-icons{
    justify-content:center;
}

.footer-bottom{
    flex-direction:column;
}

.policy-links{
    justify-content:center;
}

.newsletter-form{
    flex-direction:column;
}

.newsletter-form button{
    width:100%;
    height:50px;
    margin-top:10px;
}

.qr-btn{
    margin-top:20px;
}

}

@media(max-width:576px){

.footer{
    padding:55px 0 20px;
}

.footer-title{
    font-size:22px;
}

.contact-icon{
    width:48px;
    height:48px;
    font-size:18px;
}

.social-icons a{
    width:42px;
    height:42px;
}

}