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

footer{

    background:#030b36;

    color:#fff;

    position:relative;
}

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

.footer-container{

    padding:80px 8% 50px;

    display:grid;

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

    gap:40px;
}

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

.footer-company img{

    width:220px;

    margin-bottom:20px;
}

.footer-company p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:25px;
}

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

.social-icons{

    display:flex;

    gap:15px;
}

.social-icons a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:white;

    transition:.3s;
}

.social-icons a:hover{

    background:#4f46e5;

    transform:translateY(-5px);
}

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

.footer-links h3,
.footer-products h3,
.footer-contact h3{

    margin-bottom:25px;

    font-size:22px;
}

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

.footer-links ul,
.footer-products ul{

    display:flex;

    flex-direction:column;

    gap:15px;
}

.footer-links a,
.footer-products a{

    color:#cbd5e1;

    transition:.3s;
}

.footer-links a:hover,
.footer-products a:hover{

    color:#6c63ff;

    padding-left:8px;
}

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

.footer-contact-item{

    display:flex;

    gap:15px;

    margin-bottom:20px;
}

.footer-contact-item i{

    color:#6c63ff;

    font-size:20px;

    margin-top:4px;
}

.footer-contact-item p{

    color:#cbd5e1;

    line-height:1.7;
}

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

.newsletter{

    margin-top:25px;
}

.newsletter form{

    display:flex;

    margin-top:15px;
}

.newsletter input{

    flex:1;

    border:none;

    padding:15px;

    border-radius:50px 0 0 50px;

    outline:none;
}

.newsletter button{

    border:none;

    background:#4f46e5;

    color:white;

    padding:15px 25px;

    border-radius:0 50px 50px 0;

    cursor:pointer;

    transition:.3s;
}

.newsletter button:hover{

    background:#6c63ff;
}

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

.copyright{

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

    padding:20px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;
}

.copyright p{

    color:#cbd5e1;
}

.copyright-links{

    display:flex;

    gap:20px;
}

.copyright-links a{

    color:#cbd5e1;

    transition:.3s;
}

.copyright-links a:hover{

    color:#6c63ff;
}

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

@media(max-width:991px){

.footer-container{

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

}

@media(max-width:768px){

.footer-container{

    grid-template-columns:1fr;

    text-align:center;
}

.social-icons{

    justify-content:center;
}

.newsletter form{

    flex-direction:column;
}

.newsletter input{

    border-radius:12px;

    margin-bottom:10px;
}

.newsletter button{

    border-radius:12px;
}

.copyright{

    flex-direction:column;
}

}

/* ===================================
   INSTAGRAM
=================================== */

.footer-social h4 {
    margin-bottom: 15px;
}

.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;
    text-decoration: none;

    font-size: 15px;

    transition: all 0.3s ease;
}

.instagram-link i {
    font-size: 26px;

    background: linear-gradient(
        45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

.instagram-link:hover {
    transform: translateY(-2px);
}

.instagram-link:hover i {
    transform: scale(1.1);
}