/*=========================================
        PREMIUM FOOTER
=========================================*/

.premium-footer{

    position:relative;

    width:100%;

    overflow:hidden;

    color:#000;

    padding:40px 0 0;

    background:
    linear-gradient(
        rgba(18,32,85,.82),
        rgba(39,53,139,.88)
    ),
    url("images/footer-bg.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}


/*=========================================
        OVERLAY
=========================================*/

.footer-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(39,53,139,.75),
        rgba(7,71,166,.55)
    );

}


/*=========================================
        CONTAINER
=========================================*/

.footer-container{

    width:90%;

    max-width:1400px;

    margin:auto;

    position:relative;

    z-index:10;

    display:grid;

    grid-template-columns:
    1.4fr
    1fr
    1fr
    1.2fr;

    gap:0px;

    padding-bottom:20px;

}


/*=========================================
        LOGO
=========================================*/

.footer-logo{

    width:180px;

    margin-bottom:25px;

    transition:.5s;

}

.footer-logo:hover{

    transform:scale(1.05);

}


/*=========================================
        ABOUT
=========================================*/

.footer-about p{

    font-size:17px;

    line-height:30px;

    color:#000;

    margin-bottom:35px;

}


/*=========================================
        HEADINGS
=========================================*/

.premium-footer h3{

    font-size:28px;

    margin-bottom:35px;

    position:relative;

    display:inline-block;

    font-weight:700;

}

.premium-footer h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:70px;

    height:4px;

    background:#173b91;

    border-radius:30px;

    transition:.4s;

}

.premium-footer h3:hover::after{

    width:100%;

}


/*=========================================
        LINKS
=========================================*/

.footer-links ul,
.footer-products ul{

    list-style:none;
    margin-right: 50px;

}

.footer-links li,
.footer-products li{

    margin-bottom:18px;

}

.footer-links a,
.footer-products a{

    color:#000;

    text-decoration:none;

    font-size:17px;

    transition:.35s;

    display:inline-block;

    position:relative;

}


/* Animated Arrow */

.footer-links a::before,
.footer-products a::before{

    /* content:"➜"; */

    color:#173b91;

    margin-right:12px;

    opacity:0;

    transition:.35s;

}


.footer-links a:hover,
.footer-products a:hover{

    color:#173b91;

    transform:translateX(12px);

}

.footer-links a:hover::before,
.footer-products a:hover::before{

    opacity:1;

}


/*=========================================
        CONTACT
=========================================*/

.info{

    display:flex;

    align-items:flex-start;

    margin-bottom:-3px;

}

.info i{

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    display:flex;

    justify-content:center;

    align-items:center;

    /* margin-right:15px; */

    color:#27358b;

    font-size:18px;

    transition:.4s;

}

.info:hover i{

    transform:rotate(360deg);

    background:#fff;

    color:#27358b;

}

.info span{

    font-size:16px;

    line-height:39px;

    color:#000;

}
/*=========================================
        SOCIAL ICONS
=========================================*/

.footer-social{

    display:flex;

    gap:18px;

    margin-top:25px;

}

.footer-social a{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#000;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.20);

    transition:.5s;

    backdrop-filter:blur(5px);

    overflow:hidden;

    position:relative;

}

.footer-social a i{

    font-size:20px;

    transition:.5s;

}

.footer-social a:hover{

    transform:translateY(-8px) rotate(360deg) scale(1.1);

}

/* Facebook */

.facebook:hover{

    background:#1877F2;

    box-shadow:0 10px 25px rgba(24,119,242,.45);

}

/* Instagram */

.instagram:hover{

    background:linear-gradient(
        45deg,
        #FEDA75,
        #FA7E1E,
        #D62976,
        #962FBF,
        #4F5BD5);

    box-shadow:0 10px 25px rgba(214,41,118,.45);

}

/* LinkedIn */

.linkedin:hover{

    background:#0A66C2;

    box-shadow:0 10px 25px rgba(10,102,194,.45);

}

/* YouTube */

.youtube:hover{

    background:#FF0000;

    box-shadow:0 10px 25px rgba(255,0,0,.45);

}


/*=========================================
        BUTTON
=========================================*/

.footer-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:30px;

    padding:15px 34px;

    border-radius:40px;

    background:#173b91;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

}

.footer-btn i{

    transition:.4s;

}

.footer-btn:hover{

    background:#000;

    color:#27358b;

    transform:translateY(-8px);

    box-shadow:0 12px 35px rgba(0,0,0,.35);

}

.footer-btn:hover i{

    transform:translateX(8px);

}


/*=========================================
        BOTTOM BAR
=========================================*/

.footer-bottom{

    position:relative;

    z-index:10;

    border-top:1px solid rgba(255,255,255,.15);

    padding:21px 0;

}

.footer-bottom-content{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:0px;

    flex-direction:column;

}

.footer-bottom p{

    color:#000;

    font-size:15px;

    margin-bottom: 0px;

}

.footer-policy{

    display:flex;

    align-items:center;

    gap:15px;

}

.footer-policy a{

    color:#000;

    text-decoration:none;

    transition:.3s;

}

.footer-policy a:hover{

    color:#173b91;

}


/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1100px){

.footer-container{

grid-template-columns:repeat(2,1fr);

gap:0px;

}

}

@media(max-width:768px){

.footer{

padding-top:70px;

}

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

margin:auto auto 25px;

display:block;

}

.footer-social{

justify-content:center;

}

.footer-links a,

.footer-products a{

display:inline-block;

}

.info{

/* justify-content:center; */

text-align:left;

}

.footer-btn{

margin:auto;

}

.footer-bottom-content{

flex-direction:column;

text-align:center;

}

.footer-policy{

justify-content:center;

}

}
/*=========================================
        PREMIUM BACKGROUND EFFECT
=========================================*/

.premium-footer::before{

    content:"";

    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:0;

    background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(83,199,255,.10), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.08), transparent 35%);

    animation:bgMove 15s linear infinite;

    z-index:1;

}

@keyframes bgMove{

0%{

transform:translateX(0);

}

50%{

transform:translateX(-40px);

}

100%{

transform:translateX(0);

}

}


/*=========================================
        FLOATING LIGHTS
=========================================*/

.premium-footer::after{

content:"";

position:absolute;

width:250px;
height:250px;

background:rgba(83,199,255,.12);

border-radius:50%;

filter:blur(90px);

right:-60px;
top:40px;

animation:glowMove 8s ease-in-out infinite;

z-index:1;

}

@keyframes glowMove{

0%{

transform:translateY(0);

}

50%{

transform:translateY(40px);

}

100%{

transform:translateY(0);

}

}


/*=========================================
        HOVER EFFECT
=========================================*/

.footer-about,
.footer-links,
.footer-products,
.footer-contact{

transition:.4s;

position:relative;

z-index:5;

}

.footer-about:hover,
.footer-links:hover,
.footer-products:hover,
.footer-contact:hover{

transform:translateY(-8px);

}


/*=========================================
        LOGO
=========================================*/

.footer-logo{

filter:drop-shadow(0 0 20px rgba(255,255,255,.15));

transition:.5s;

}

.footer-logo:hover{

transform:scale(1.08);

filter:drop-shadow(0 0 30px #173b91);

}


/*=========================================
        HEADING
=========================================*/

.premium-footer h3{

transition:.4s;

}

.premium-footer h3:hover{

color:#173b91;

letter-spacing:1px;

}


/*=========================================
        LINK UNDERLINE
=========================================*/

.footer-links a,
.footer-products a{

position:relative;

}

.footer-links a::after,
.footer-products a::after{

content:"";

position:absolute;

left:0;
bottom:-5px;

width:0;

height:2px;

background:#173b91;

transition:.35s;

}

.footer-links a:hover::after,
.footer-products a:hover::after{

width:100%;

}


/*=========================================
        CONTACT
=========================================*/

.info{

transition:.4s;

}

.info:hover{

padding-left:10px;

}


/*=========================================
        COPYRIGHT
=========================================*/

.footer-bottom{

background:rgba(0,0,0,.18);

backdrop-filter:blur(5px);

}

.footer-bottom p{

letter-spacing:.5px;

}

.footer-policy span{

color:rgba(255,255,255,.4);

}


/*=========================================
        SCROLL ANIMATION
=========================================*/

.footer-about,
.footer-links,
.footer-products,
.footer-contact{

animation:fadeUp .9s ease forwards;

opacity:0;

}

.footer-about{

animation-delay:.2s;

}

.footer-links{

animation-delay:.4s;

}

.footer-products{

animation-delay:.6s;

}

.footer-contact{

animation-delay:.8s;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*=========================================
        SELECTION
=========================================*/

::selection{

background:#173b91;

color:#fff;

}

.premium-footer{
    position:relative;
    overflow:hidden;
    color:#000;
}

.footer-bg{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-2;
}

.footer-overlay{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background:linear-gradient(
        rgba(10,25,70,.75),
        rgba(39,53,139,.80)
    );

    z-index:-1;
}

.footer-container,
.footer-bottom{
    position:relative;
    z-index:2;
}
.premium-footer{
    /* background:
        linear-gradient(rgba(10,25,70,.75), rgba(39,53,139,.80)),
        url("assests/ChatGPT Image Aug 6, 2026, 03_23_52 PM.png") center/cover no-repeat ; */
       background:#e4fbff;
}


.footer-links ul li a,
.footer-products ul li a{
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links ul li a i,
.footer-products ul li a i{
    color: #173b91; /* Gold */
    width: 18px;
    font-size: 14px;
    transition: 0.3s;
}

.footer-links ul li a:hover i,
.footer-products ul li a:hover i{
    transform: translateX(4px);
    color: #000;
}