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

footer{

    background:linear-gradient(
        135deg,
        #071426,
        #0B1F3A
    );

    color:#dfe7ef;

    position:relative;

    overflow:hidden;

    padding-top:90px;

}


/* Decorative Background */

footer::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(200,165,82,.06);

    top:-220px;

    right:-180px;

}

footer::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    left:-140px;

    bottom:-120px;

}


/* ==========================================================
   GRID
========================================================== */

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:55px;

    position:relative;

    z-index:2;

}


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

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

}

.footer-logo img{

    width:65px;

}

.footer-logo h2{

    color:#fff;

    margin-bottom:4px;

}

.footer-logo span{

    color:#c5c5c5;

    font-size:.85rem;

}


/* ==========================================================
   COMPANY
========================================================== */

.footer-column p{

    line-height:1.9;

    color:#bfc8d3;

    margin-bottom:30px;

}


/* ==========================================================
   HEADINGS
========================================================== */

.footer-column h3{

    color:#fff;

    margin-bottom:25px;

    font-size:1.3rem;

    position:relative;

}

.footer-column h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:45px;

    height:3px;

    background:var(--secondary);

}


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

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:16px;

}

.footer-column a{

    color:#d5dce5;

    transition:.35s;

}

.footer-column a:hover{

    color:var(--secondary);

    padding-left:6px;

}


/* ==========================================================
   CONTACT
========================================================== */

.footer-contact li{

    display:flex;

    gap:15px;

    align-items:flex-start;

}

.footer-contact i{

    color:var(--secondary);

    margin-top:4px;

    width:18px;

}


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

.social-icons{

    display:flex;

    gap:14px;

}

.social-icons a{

    width:46px;

    height:46px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    transition:.35s;

}

.social-icons a:hover{

    background:var(--secondary);

    transform:translateY(-6px);

}


/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter{

    margin-top:80px;

    position:relative;

    z-index:2;

}

.newsletter-content{

    background:#fff;

    border-radius:28px;

    padding:55px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    box-shadow:0 30px 80px rgba(0,0,0,.12);

}

.newsletter-tag{

    display:inline-block;

    color:var(--secondary);

    font-weight:600;

    margin-bottom:12px;

}

.newsletter h2{

    color:var(--primary);

    margin-bottom:15px;

    font-size:2.3rem;

}

.newsletter p{

    color:#666;

    max-width:550px;

    line-height:1.8;

}

.newsletter-form{

    display:flex;

    gap:15px;

    min-width:420px;

}

.newsletter-form input{

    flex:1;

    padding:18px 22px;

    border:none;

    border-radius:50px;

    background:#f4f6fa;

    font-size:1rem;

    outline:none;

}

.newsletter-form button{

    padding:18px 34px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    background:var(--secondary);

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.newsletter-form button:hover{

    transform:translateY(-4px);

}

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

.footer-bottom{

    margin-top:60px;

    padding:30px 0;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    position:relative;

    z-index:2;

}

.footer-bottom p{

    color:#c7d0db;

    margin:0;

}

.footer-bottom-right{

    display:flex;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.footer-bottom-right span{

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

}

.footer-bottom-right a{

    color:#dfe7ef;

    transition:.3s;

}

.footer-bottom-right a:hover{

    color:var(--secondary);

}


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

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    font-size:1.2rem;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 18px 40px rgba(0,0,0,.25);

    transition:.35s;

    opacity:0;

    visibility:hidden;

    transform:translateY(25px);

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-8px);

}


/* ==========================================================
   NEWSLETTER EFFECTS
========================================================== */

.newsletter-content{

    position:relative;

    overflow:hidden;

}

.newsletter-content::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(200,165,82,.08);

    top:-100px;

    right:-70px;

}

.newsletter-form input{

    transition:.3s;

}

.newsletter-form input:focus{

    background:#fff;

    box-shadow:0 0 0 3px rgba(200,165,82,.2);

}

.newsletter-form button{

    box-shadow:0 12px 30px rgba(200,165,82,.35);

}

.newsletter-form button:hover{

    background:#b98f37;

}


/* ==========================================================
   FOOTER HOVER EFFECTS
========================================================== */

.footer-column li{

    transition:.3s;

}

.footer-column li:hover{

    transform:translateX(6px);

}

.footer-contact li:hover{

    transform:none;

}

.footer-contact i{

    transition:.3s;

}

.footer-contact li:hover i{

    transform:scale(1.2);

}


/* ==========================================================
   SELECTION
========================================================== */

footer ::selection{

    background:var(--secondary);

    color:#fff;

}


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

@media(max-width:992px){

.footer-grid{

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

gap:45px;

}

.newsletter-content{

flex-direction:column;

text-align:center;

}

.newsletter-form{

min-width:100%;

width:100%;

}

.newsletter p{

margin:auto;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}


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

@media(max-width:768px){

footer{

padding-top:70px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-column h3::after{

left:50%;

transform:translateX(-50%);

}

.footer-logo{

justify-content:center;

}

.social-icons{

justify-content:center;

}

.footer-contact li{

justify-content:center;

}

.newsletter-content{

padding:35px 25px;

}

.newsletter h2{

font-size:2rem;

}

.newsletter-form{

flex-direction:column;

min-width:100%;

}

.newsletter-form input,

.newsletter-form button{

width:100%;

}

.footer-bottom-right{

justify-content:center;

}

}


/* ==========================================================
   EXTRA SMALL
========================================================== */

@media(max-width:480px){

.newsletter h2{

font-size:1.6rem;

}

.newsletter p{

font-size:.95rem;

}

.footer-bottom{

padding-bottom:20px;

}

.back-to-top{

width:50px;

height:50px;

right:20px;

bottom:20px;

}

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#b98f37;

}


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

.footer-column,
.newsletter,
.footer-bottom{

animation:footerFade .8s ease;

}

@keyframes footerFade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.footer-column a:focus,
.newsletter-form input:focus,
.newsletter-form button:focus,
.back-to-top:focus{

outline:2px solid var(--secondary);

outline-offset:3px;

}