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

.footer-premium{

    position: relative;

    margin-top:120px;

    background:linear-gradient(135deg,#08142d 0%,#0b234f 60%,#123b84 100%);

    color:#fff;

    overflow:hidden;

    padding-top:170px;

}

/*==================================================
                Wave
==================================================*/

.footer-premium::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:120px;

    background:#fff;

    border-radius:0 0 50% 50%;

    transform:translateY(-60px);

}

/*==================================================
                Shapes
==================================================*/

.footer-premium::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

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

    top:-260px;

    left:-180px;

}

/*==================================================
                Container
==================================================*/

.footer-premium .container{

    position:relative;

    z-index:5;

}

/*==================================================
                Top Footer
==================================================*/

.footer-top{

    padding-bottom:70px;

}

/*==================================================
                Brand
==================================================*/

.footer-brand{

    padding-left:30px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    color:#fff;

    margin-bottom:28px;

}

.logo-circle{

    width:85px;

    height:85px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    color:#fff;

    background:linear-gradient(135deg,#0d6efd,#3fb7ff);

    box-shadow:
        0 0 25px rgba(13,110,253,.45),
        0 0 60px rgba(13,110,253,.18);

    transition:.45s;

}

.footer-logo:hover .logo-circle{

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

}

.footer-logo h3{

    margin:0;

    font-size:32px;

    font-weight:800;

    color:#fff;

}

.footer-logo span{

    display:block;

    margin-top:5px;

    color:#b9c7ea;

    font-size:14px;

    letter-spacing:.5px;

}

.footer-brand p{

    margin-top:25px;

    color:#d4ddf2;

    line-height:2.2;

    font-size:15px;

    max-width:420px;

}

/*==================================================
            Social
==================================================*/

.footer-social{

    display:flex;

    gap:18px;

    margin-top:35px;

}

.footer-social a{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#fff;

    font-size:22px;

    position:relative;

    overflow:hidden;

    transition:.4s;

}

/* Instagram */

.footer-social .instagram{

    background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);

    box-shadow:0 10px 25px rgba(221,42,123,.35);

}

/* Telegram */

.footer-social .telegram{

    background:linear-gradient(135deg,#27A7E7,#4FC3F7);

    box-shadow:0 10px 25px rgba(39,167,231,.35);

}

/* Github */

.footer-social .github{

    background:linear-gradient(135deg,#222,#555);

    box-shadow:0 10px 25px rgba(0,0,0,.35);

}

/* Linkedin */

.footer-social .linkedin{

    background:linear-gradient(135deg,#0077b5,#0A66C2);

    box-shadow:0 10px 25px rgba(10,102,194,.35);

}

/* Shine Effect */

.footer-social a::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.footer-social a:hover::before{

    left:170%;

}

.footer-social a:hover{

    transform:translateY(-8px) rotate(10deg);

}

/*==================================================
            Widget Title
==================================================*/

.footer-widget h4{

    position:relative;

    font-size:22px;

    font-weight:800;

    margin-bottom:30px;

    color:#fff;

}

.footer-widget h4::after{

    content:"";

    position:absolute;

    right:0;

    bottom:-10px;

    width:55px;

    height:4px;

    border-radius:50px;

    background:linear-gradient(90deg,#ffc107,#ff9800);

}



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

.footer-widget ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footer-widget ul li{

    margin-bottom:18px;

}

.footer-widget ul li:last-child{

    margin-bottom:0;

}

.footer-widget ul li a{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#d5def5;

    font-size:15px;

    transition:.35s;

    position:relative;

}

/* Bullet */

.footer-widget ul li a::before{

    content:"";

    width:9px;

    height:9px;

    border-radius:50%;

    background:linear-gradient(135deg,#ffc107,#ff9800);

    box-shadow:0 0 12px rgba(255,193,7,.5);

    transition:.35s;

}

.footer-widget ul li a:hover{

    color:#fff;

    transform:translateX(-8px);

}

.footer-widget ul li a:hover::before{

    transform:scale(1.5);

}

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

.footer-widget address{

    font-style:normal;

    margin:0;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:22px;

}

.contact-item:last-child{

    margin-bottom:0;

}

.contact-item .icon{

    width:52px;

    height:52px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:20px;

    flex-shrink:0;

    transition:.35s;

}

.contact-item:hover .icon{

    transform:rotate(-10deg) scale(1.1);

}

/* Colors */

.phone{

    background:linear-gradient(135deg,#0d6efd,#46b6ff);

}

.email{

    background:linear-gradient(135deg,#00b894,#55efc4);

}

.location{

    background:linear-gradient(135deg,#ff9800,#ffc107);

}

.contact-item a,

.contact-item span{

    color:#d5def5;

    text-decoration:none;

    line-height:1.9;

    transition:.35s;

}

.contact-item:hover a,

.contact-item:hover span{

    color:#fff;

}

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

.newsletter-card{

    margin-top:40px;

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

    border:1px solid rgba(255,255,255,.12);

    border-radius:32px;

    padding:45px;

    backdrop-filter:blur(18px);

    box-shadow:

        0 20px 45px rgba(0,0,0,.18);

    position:relative;

    overflow:hidden;

}

/* Top Gradient */

.newsletter-card::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:100%;

    height:6px;

    background:linear-gradient(90deg,#0d6efd,#7b61ff,#ffc107);

}

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

.newsletter-content{

    display:flex;

    align-items:center;

    gap:22px;

}

.newsletter-icon{

    width:90px;

    height:90px;

    border-radius:26px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    color:#fff;

    background:linear-gradient(135deg,#0d6efd,#7b61ff);

    box-shadow:

        0 15px 35px rgba(13,110,253,.35);

}

.newsletter-content h3{

    font-size:30px;

    font-weight:800;

    margin-bottom:10px;

}

.newsletter-content p{

    color:#d6def4;

    line-height:2;

    margin:0;

}

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

.newsletter-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.newsletter-input{

    position:relative;

}

.newsletter-input i{

    position:absolute;

    top:50%;

    right:22px;

    transform:translateY(-50%);

    color:#8a94ab;

    font-size:20px;

}

.newsletter-input input{

    width:100%;

    height:62px;

    border:none;

    outline:none;

    border-radius:60px;

    background:#fff;

    padding:0 58px 0 20px;

    font-size:15px;

    transition:.35s;

}

.newsletter-input input:focus{

    box-shadow:

        0 0 0 5px rgba(13,110,253,.18);

}

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

.newsletter-form button{

    position:relative;

    overflow:hidden;

    height:62px;

    border:none;

    border-radius:60px;

    background:linear-gradient(135deg,#ffc107,#ff9800);

    color:#222;

    font-size:16px;

    font-weight:800;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    cursor:pointer;

    transition:.35s;

    box-shadow:

        0 15px 35px rgba(255,193,7,.35);

}

/* Shine */

.newsletter-form button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.newsletter-form button:hover::before{

    left:170%;

}

.newsletter-form button:hover{

    transform:translateY(-5px);

    box-shadow:

        0 20px 45px rgba(255,193,7,.45);

}

.newsletter-form button i{

    transition:.35s;

}

.newsletter-form button:hover i{

    transform:translateX(-6px);

}




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

.footer-bottom{

    margin-top:70px;

    padding:30px 0;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom .copyright{

    color:#cdd7ef;

    font-size:15px;

}

.footer-bottom .developer{

    display:flex;

    align-items:center;

    gap:8px;

    color:#dce5f8;

    font-size:15px;

}

.footer-bottom .developer strong{

    color:#fff;

    font-weight:700;

}

.footer-bottom .developer i{

    color:#ff4d6d;

    font-size:18px;

    animation:heartBeat 1.8s infinite;

}

/*==================================================
            Glow Line
==================================================*/

.footer-bottom::before{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:3px;

    border-radius:50px;

    background:linear-gradient(90deg,#0d6efd,#7b61ff,#ffc107);

    top:-2px;

}

/*==================================================
                Hover Effects
==================================================*/

.footer-widget ul li a,
.contact-item,
.footer-social a,
.newsletter-form button{

    transition:all .35s ease;

}

.footer-widget{

    transition:.35s;

}

.footer-widget:hover{

    transform:translateY(-4px);

}

.logo-circle{

    animation:floatLogo 5s ease-in-out infinite;

}

.newsletter-icon{

    animation:floatMail 4s ease-in-out infinite;

}

/*==================================================
                Animations
==================================================*/

@keyframes floatLogo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatMail{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes heartBeat{

    0%{

        transform:scale(1);

    }

    30%{

        transform:scale(1.25);

    }

    60%{

        transform:scale(1);

    }

    100%{

        transform:scale(1);

    }

}

/*==================================================
            Responsive
==================================================*/

@media (max-width:1200px){

    .footer-brand{

        padding-left:0;

    }

}

@media (max-width:992px){

    .footer-premium{

        padding-top:140px;

    }

    .footer-top{

        text-align:center;

    }

    .footer-logo{

        justify-content:center;

    }

    .footer-brand p{

        margin:25px auto;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-widget h4::after{

        right:50%;

        transform:translateX(50%);

    }

    .contact-item{

        justify-content:center;

    }

    .newsletter-card{

        padding:35px;

    }

    .newsletter-content{

        margin-bottom:35px;

        justify-content:center;

        text-align:center;

    }

}

@media (max-width:768px){

    .footer-premium{

        padding-top:110px;

    }

    .logo-circle{

        width:70px;

        height:70px;

        font-size:32px;

    }

    .footer-logo h3{

        font-size:26px;

    }

    .newsletter-content{

        flex-direction:column;

    }

    .newsletter-icon{

        width:75px;

        height:75px;

        border-radius:22px;

        font-size:30px;

    }

    .newsletter-content h3{

        font-size:24px;

    }

    .newsletter-form{

        gap:15px;

    }

    .newsletter-input input{

        height:56px;

    }

    .newsletter-form button{

        height:56px;

        font-size:15px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:576px){

    .footer-premium{

        padding-top:90px;

    }

    .footer-top{

        padding-bottom:40px;

    }

    .footer-widget{

        margin-bottom:40px;

    }

    .newsletter-card{

        padding:25px;

        border-radius:24px;

    }

    .footer-social{

        gap:12px;

    }

    .footer-social a{

        width:48px;

        height:48px;

        font-size:19px;

    }

    .footer-widget h4{

        font-size:20px;

    }

    .footer-brand p{

        font-size:14px;

    }

    .footer-bottom{

        margin-top:40px;

        padding:22px 0;

    }

}

/*==================================================
            Selection
==================================================*/

.footer-premium ::selection{

    background:#ffc107;

    color:#222;

}