/*=====================================================
    Co-operative Urban & Thrift Credit Society Ltd.
    Author : ChatGPT
======================================================*/

/*-----------------------
    Google Font
------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    --primary:#0A4D8C;
    --secondary:#F5B041;
    --dark:#0d1b2a;
    --light:#f8f9fa;
    --white:#ffffff;
    --text:#555;
    --shadow:0 10px 30px rgba(0,0,0,.08);

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    color:var(--text);
    background:#fff;

}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

.section-padding{
    padding:90px 0;
}

h1,h2,h3,h4,h5{
    color:#222;
    font-weight:700;
}

p{
    line-height:1.8;
}

/*==========================
        Navbar
===========================*/

.navbar{

    background:rgba(10,77,140,.95);
    backdrop-filter:blur(10px);
    padding:15px 0;
    transition:.4s;

}

.navbar-brand{

    color:#fff !important;
    font-size:24px;

}

.nav-link{

    color:#fff !important;
    margin-left:20px;
    font-weight:500;
    position:relative;

}

.nav-link::after{

    content:"";
    position:absolute;
    width:0;
    height:2px;
    background:var(--secondary);
    left:0;
    bottom:-5px;
    transition:.4s;

}

.nav-link:hover::after{

    width:100%;

}

/*==========================
        Hero
===========================*/

.hero{

    background:url("../images/hero.jpg") center/cover no-repeat;
    position:relative;
    min-height:100vh;

}

.overlay{

    position:absolute;
    inset:0;
    background:rgba(5,30,60,.75);

}

.hero .container{

    position:relative;
    z-index:2;

}

.hero h1{

    color:#fff;
    font-size:60px;
    line-height:1.2;
    margin-bottom:20px;

}

.hero h1 span{

    color:var(--secondary);

}

.hero h5{

    color:#F5B041;
    letter-spacing:2px;
    margin-bottom:15px;

}

.hero p{

    color:#eee;
    font-size:18px;
    margin-bottom:35px;

}

.btn-warning{

    background:var(--secondary);
    border:none;
    color:#fff;
    padding:14px 35px;
    border-radius:40px;
    transition:.4s;

}

.btn-warning:hover{

    background:#d68910;
    transform:translateY(-3px);

}

.btn-outline-light{

    border-radius:40px;
    padding:14px 35px;

}

/*==========================
        About
===========================*/

#about img{

    border-radius:20px;
    box-shadow:var(--shadow);

}

.info-box{

    background:#fff;
    border-radius:15px;
    padding:25px;
    margin-top:20px;
    box-shadow:var(--shadow);
    transition:.4s;

}

.info-box:hover{

    transform:translateY(-10px);

}

.info-box i{

    font-size:40px;
    color:var(--primary);
    margin-bottom:15px;

}

/*==========================
        Services
===========================*/

.services{

background:#f5f8fc;

}


.service-card{

    background:#fff;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    transition:.4s;
    box-shadow:var(--shadow);
    height:100%;

}

/* SERVICE CARD HOVER FIX */


.service-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,0.25);

    color:inherit;

}



.service-card:hover h4{

    color:#0A4D8C;

}



.service-card:hover p{

    color:#666;

}



.service-card:hover i{

    color:#F5B041;

}

.service-card i{
    display:inline-block;
    width:80px;
    height:80px;
    background:#eef5ff;
    border-radius:50%;
    line-height:80px;
    font-size:35px;
    color:var(--primary);
    margin-bottom:20px;

}

.service-card h4{

    margin-bottom:15px;

}

/*==========================
    Why Choose
===========================*/

#why{

    background:#fff;

}

#why .col-md-4{

    padding:20px;
    font-weight:600;
    color:#333;

}

/*==============================
        GALLERY
==============================*/


.gallery-filter button{

border:none;

background:#0A4D8C;

color:white;

padding:10px 25px;

border-radius:30px;

margin:5px;

transition:.3s;

}


.gallery-filter button:hover,
.gallery-filter .active{

background:#F5B041;

}



.gallery-card{

position:relative;

overflow:hidden;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}



.gallery-card img{

height:280px;

object-fit:cover;

transition:.5s;

}



.gallery-card:hover img{

transform:scale(1.15);

}



.gallery-overlay{

position:absolute;

inset:0;

background:

rgba(10,77,140,.75);

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.4s;

}



.gallery-overlay i{

font-size:45px;

color:white;

}



.gallery-card:hover .gallery-overlay{

opacity:1;

}



.gallery-item{

transition:.4s;

}


/*==========================
        Contact
===========================*/

#contact{

    background:#fff;

}

form{

    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:var(--shadow);

}

.form-control{

    border-radius:12px;
    padding:15px;

}

.form-control:focus{

    border-color:var(--primary);
    box-shadow:none;

}

.btn-primary{

    background:var(--primary);
    border:none;
    padding:12px 35px;
    border-radius:30px;

}

.btn-primary:hover{

    background:#063663;

}

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


.footer{

    background:#081f38;

    color:#fff;

    padding-top:60px;

}



.footer h4{

    color:#F5B041;

    margin-bottom:20px;

    font-size:20px;

}



.footer p{

    color:#ddd;

    line-height:1.8;

}



.footer ul{

    list-style:none;

    padding:0;

}



.footer ul li{

    margin-bottom:10px;

    color:#ddd;

}



.footer a{

    text-decoration:none;

    color:#ddd;

    transition:.3s;

}



.footer a:hover{

    color:#F5B041;

}



/* Social Icons */


.footer-social a{


    width:40px;

    height:40px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    background:#fff;

    border-radius:50%;

    margin-right:8px;

}



.footer-social i{

    color:#081f38;

}



.footer-social a:hover{

    background:#F5B041;

}



.footer-social a:hover i{

    color:#fff;

}



/* Contact Icons */


.footer i{

    color:#F5B041;

    margin-right:8px;

}



/* Bottom */


.footer-bottom{


    margin-top:40px;

    padding:20px;

    background:#041321;

    text-align:center;


}



.footer-bottom p{

    margin:0;

    color:#fff;

}



/*==========================
    Back To Top
===========================*/

#topBtn{

    position:fixed;
    right:20px;
    bottom:20px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    cursor:pointer;
    display:none;
    z-index:999;
    transition:.4s;

}

#topBtn:hover{

    background:var(--secondary);

}

/*==========================
    WhatsApp Button
===========================*/

.whatsapp{

    position:fixed;
    left:20px;
    bottom:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    z-index:999;
    box-shadow:0 10px 20px rgba(0,0,0,.2);
    transition:.3s;

}

.whatsapp:hover{

    transform:scale(1.1);
    color:#fff;

}

/*==========================
    Section Title
===========================*/

.text-center h2{

    position:relative;
    display:inline-block;
    margin-bottom:20px;

}

.text-center h2::after{

    content:"";
    position:absolute;
    width:60%;
    height:4px;
    background:var(--secondary);
    left:20%;
    bottom:-10px;
    border-radius:20px;

}

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

@media(max-width:991px){

.hero{

text-align:center;

}

.hero h1{

font-size:42px;

}

.section-padding{

padding:70px 0;

}

.nav-link{

margin-left:0;
padding:10px 0;

}

}

@media(max-width:768px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.btn-lg{

display:block;
width:100%;
margin-bottom:15px;

}

.info-box{

margin-bottom:20px;

}

.service-card{

margin-bottom:20px;

}

}

@media(max-width:576px){

.hero h1{

font-size:28px;

}

.navbar-brand{

font-size:20px;

}

.section-padding{

padding:60px 0;

}

h2{

font-size:28px;

}

}

/* ===============================
 HERO SLIDER
================================ */


.hero-slider{

height:100vh;


}


.heroSwiper,
.swiper-slide{

height:100%;

}

/*==========================
      PARTICLE BACKGROUND
===========================*/


.hero-slider{

    position:relative;

    height:100vh;

    overflow:hidden;

}



#particles-js{

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    z-index:3;

    pointer-events:none;

}



.heroSwiper,
.swiper-slide{

    height:100%;

}



.heroSwiper{

    position:relative;

    z-index:1;

}



.hero-overlay{

    position:absolute;

    inset:0;

    z-index:1;

}



.hero-slider .container{

    position:relative;

    z-index:4;

}



.hero-content{

    position:relative;

    z-index:5;

}


.swiper-slide{

background-size:cover;

background-position:center;

position:relative;

display:flex;

align-items:center;

}



.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(0,30,70,.85),
rgba(0,0,0,.35)
);

}



.hero-content{

position:relative;

z-index:2;

color:white;

max-width:750px;

}



.hero-content h5{

color:#F5B041;

font-size:22px;

letter-spacing:3px;

}



.hero-content h1{

font-size:60px;

color:white;

font-weight:800;

line-height:1.2;

}



.hero-content h1 span{

color:#F5B041;

}



.hero-content p{

font-size:20px;

color:#eee;

margin:25px 0;

}



.swiper-button-next,
.swiper-button-prev{

color:#F5B041;

}



.swiper-pagination-bullet{

background:white;

opacity:.7;

}



.swiper-pagination-bullet-active{

background:#F5B041;

}



/* Mobile */

@media(max-width:768px){


.hero-content{

text-align:center;

padding:20px;

}


.hero-content h1{

font-size:34px;

}


.hero-content p{

font-size:16px;

}


.swiper-button-next,
.swiper-button-prev{

display:none;

}


}

/*================================
    COUNTER SECTION
================================*/


.counter-section{

background:

linear-gradient(
135deg,
#0A4D8C,
#062b50
);

padding:70px 0;

}



.counter-box{

background:

rgba(255,255,255,.12);

backdrop-filter:blur(15px);

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

border-radius:20px;

padding:35px 20px;

text-align:center;

color:white;

transition:.4s;

}



.counter-box:hover{

transform:translateY(-10px);

background:

rgba(255,255,255,.20);

}




.counter-box i{

font-size:45px;

color:#F5B041;

margin-bottom:20px;

}




.counter-box h2{

font-size:30px;

font-weight:800;

color:white;

}




.counter-box p{

color:#eee;

font-size:18px;

margin:0;

}




@media(max-width:768px){


.counter-box h2{

font-size:30px;

}


}

/*=================================
    CALCULATOR SECTION
==================================*/


.calculator-section{

background:#f5f8fc;

}



.calculator-card{

background:white;

padding:35px;

border-radius:25px;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

}



.calculator-card h3{

color:#0A4D8C;

margin-bottom:25px;

}



.calculator-card h3 i{

color:#F5B041;

margin-right:10px;

}



.calculator-card label{

font-weight:600;

margin-top:15px;

margin-bottom:8px;

display:block;

}



.calculator-card input{

height:50px;

border-radius:10px;

}



.result-box{

margin-top:25px;

padding:20px;

background:

linear-gradient(
135deg,
#0A4D8C,
#063663
);

color:white;

border-radius:15px;

font-size:18px;

}



.result-box strong{

display:block;

font-size:30px;

color:#F5B041;

margin-top:10px;

}


/*=================================
    TESTIMONIAL SECTION
=================================*/


.testimonial-section{

background:#f5f8fc;

}



.testimonial-card{

background:white;

padding:35px 25px;

border-radius:25px;

text-align:center;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

transition:.4s;

}



.testimonial-card:hover{

transform:translateY(-10px);

}



.testimonial-card img{

width:90px;

height:90px;

object-fit:cover;

border-radius:50%;

margin:0 auto 20px;

border:4px solid #F5B041;

}



.testimonial-card h4{

color:#0A4D8C;

margin-bottom:10px;

}



.stars{

color:#F5B041;

font-size:22px;

margin-bottom:15px;

letter-spacing:3px;

}



.testimonial-card p{

font-style:italic;

color:#666;

}



.testimonialSwiper .swiper-pagination{

position:relative;

margin-top:30px;

}



.testimonialSwiper 
.swiper-pagination-bullet-active{

background:#0A4D8C;

}

/*=================================
    FLOATING ENQUIRY FORM
=================================*/


.enquiry-btn{

position:fixed;

right:25px;

bottom:100px;

background:#F5B041;

color:white;

border:none;

padding:15px 25px;

border-radius:50px;

font-weight:600;

z-index:999;

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

transition:.3s;

}



.enquiry-btn:hover{

transform:translateY(-5px);

background:#d68910;

}



.enquiry-popup{

position:fixed;

right:-400px;

bottom:20px;

width:350px;

background:white;

border-radius:20px;

box-shadow:

0 20px 50px rgba(0,0,0,.2);

z-index:1000;

transition:.5s;

overflow:hidden;

}



.enquiry-popup.active{

right:20px;

}



.enquiry-header{

background:#0A4D8C;

color:white;

padding:18px 20px;

display:flex;

justify-content:space-between;

align-items:center;

}



.enquiry-header h4{

color:white;

margin:0;

}



.enquiry-header button{

border:none;

background:none;

color:white;

font-size:22px;

}



#enquiryForm{

padding:25px;

}



#enquiryForm input,
#enquiryForm select,
#enquiryForm textarea{

margin-bottom:15px;

border-radius:12px;

padding:12px;

}



@media(max-width:576px){


.enquiry-popup{

width:90%;

right:-100%;

}


.enquiry-popup.active{

right:5%;

}



.enquiry-btn{

right:15px;

bottom:90px;

padding:12px 18px;

}



}

/*=================================
    DOWNLOAD SECTION
=================================*/


.download-section{

background:#f5f8fc;

}



.download-card{

background:white;

padding:35px 25px;

border-radius:25px;

text-align:center;

height:100%;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

transition:.4s;

}



.download-card:hover{

transform:translateY(-10px);

}



.download-card i{

font-size:45px;

color:#F5B041;

margin-bottom:20px;

}



.download-card h4{

color:#0A4D8C;

margin-bottom:15px;

}



.download-card p{

font-size:14px;

color:#666;

margin-bottom:25px;

}



.download-card .btn{

border-radius:30px;

padding:10px 30px;

}

/*=================================
        NOTICE BOARD
=================================*/


.notice-section{

background:white;

}



.notice-card{

display:flex;

gap:20px;

background:#fff;

padding:25px;

border-radius:20px;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}



.notice-card:hover{

transform:translateY(-8px);

}




.notice-date{

min-width:80px;

height:90px;

background:#0A4D8C;

color:white;

border-radius:15px;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

font-weight:600;

}



.notice-date span{

font-size:35px;

line-height:35px;

color:#F5B041;

}



.notice-content h4{

font-size:20px;

color:#0A4D8C;

}



.notice-content p{

font-size:14px;

color:#666;

}



.notice-link{

color:#F5B041;

font-weight:600;

}



@media(max-width:576px){


.notice-card{

flex-direction:column;

}


.notice-date{

width:90px;

}


}

/*=================================
    CHAIRMAN SECTION
=================================*/


.chairman-section{

background:#f5f8fc;

}



.chairman-image img{

border-radius:25px;

box-shadow:

0 15px 40px rgba(0,0,0,.15);

}



.message-box{

background:white;

padding:40px;

border-radius:25px;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

}



.message-box h3{

color:#0A4D8C;

margin-bottom:20px;

}



.message-box h5{

color:#F5B041;

margin-top:25px;

}



.message-box span{

font-size:14px;

color:#777;

}




/*=================================
    COMMITTEE
=================================*/



.team-card{

background:white;

text-align:center;

padding:30px 20px;

border-radius:25px;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

transition:.4s;

}



.team-card:hover{

transform:translateY(-10px);

}



.team-card img{

width:130px;

height:130px;

object-fit:cover;

border-radius:50%;

margin:auto;

border:5px solid #F5B041;

}



.team-card h4{

margin-top:20px;

color:#0A4D8C;

}



.team-card p{

color:#777;

}



.social-icons a{

color:#0A4D8C;

font-size:20px;

margin:0 8px;

transition:.3s;

}



.social-icons a:hover{

color:#F5B041;

}

/*=================================
        BRANCH SECTION
=================================*/


.branch-section{

background:#f5f8fc;

}



.branch-card{

background:white;

padding:35px 25px;

border-radius:25px;

box-shadow:

0 10px 30px rgba(0,0,0,.08);

text-align:center;

height:100%;

transition:.4s;

}



.branch-card:hover{

transform:translateY(-10px);

}



.branch-icon{

width:80px;

height:80px;

background:#0A4D8C;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 20px;

font-size:35px;

}



.branch-card h4{

color:#0A4D8C;

margin-bottom:20px;

}



.branch-card p{

font-size:15px;

color:#666;

}



.branch-card p i{

color:#F5B041;

margin-right:8px;

}



.branch-card .btn{

border-radius:30px;

margin-top:15px;

}



/* Google Map */


.map-section iframe{

width:100%;

height:450px;

border:0;

display:block;

}


/*=================================
        FAQ SECTION
=================================*/


.faq-section{

background:#f5f8fc;

}



.accordion-item{

border:none;

margin-bottom:15px;

border-radius:15px !important;

overflow:hidden;

box-shadow:

0 8px 25px rgba(0,0,0,.08);

}



.accordion-button{

font-weight:600;

font-size:17px;

padding:20px;

color:#0A4D8C;

background:white;

}



.accordion-button:not(.collapsed){

background:#0A4D8C;

color:white;

box-shadow:none;

}



.accordion-button:focus{

box-shadow:none;

}



.accordion-body{

padding:25px;

line-height:1.8;

color:#666;

background:white;

}

/*=================================
        PAGE LOADER
=================================*/



#pageLoader{

position:fixed;

inset:0;

background:

linear-gradient(
135deg,
#062b50,
#0A4D8C
);

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

transition:.6s;

}



#pageLoader.hide{

opacity:0;

visibility:hidden;

}




.loader-content{

text-align:center;

color:white;

}



.loader-logo{

width:90px;

height:90px;

border-radius:50%;

background:#F5B041;

color:white;

font-size:35px;

font-weight:800;

display:flex;

align-items:center;

justify-content:center;

margin:auto;


animation:

pulseLogo 1.5s infinite;

}



.loader-content h3{

margin-top:20px;

color:white;

letter-spacing:1px;

}




.loader-line{

width:150px;

height:4px;

background:white;

margin:20px auto;

border-radius:10px;

overflow:hidden;

position:relative;

}



.loader-line::after{

content:"";

position:absolute;

height:100%;

width:50%;

background:#F5B041;

left:-50%;

animation:

loadingMove 1.2s infinite;

}





@keyframes pulseLogo{


0%{

transform:scale(1);

}


50%{

transform:scale(1.15);

}


100%{

transform:scale(1);

}


}




@keyframes loadingMove{


0%{

left:-50%;

}


100%{

left:100%;

}


}


/*=================================
        CUSTOM CURSOR
=================================*/



.custom-cursor{

width:40px;

height:40px;

border:2px solid #F5B041;

border-radius:50%;

position:fixed;

top:0;

left:0;

pointer-events:none;

z-index:999999;

transform:translate(-50%,-50%);

transition:

width .3s,
height .3s,
background .3s;

}



.cursor-dot{

width:8px;

height:8px;

background:#0A4D8C;

border-radius:50%;

position:fixed;

top:0;

left:0;

pointer-events:none;

z-index:999999;

transform:translate(-50%,-50%);

}





/* Hover Effect */


.cursor-hover{

width:70px;

height:70px;

background:

rgba(245,176,65,.25);

border-color:#0A4D8C;

}





/* Mobile Disable */


@media(max-width:768px){


.custom-cursor,
.cursor-dot{

display:none;

}


}

/*=================================
        DARK MODE
=================================*/



body{

transition:.4s;

}



/* Button */


.theme-btn{

width:45px;

height:45px;

border-radius:50%;

border:none;

background:#F5B041;

color:white;

font-size:18px;

cursor:pointer;

}





/* Dark Theme */


body.dark-mode{

background:#111827;

color:#e5e7eb;

}





body.dark-mode 
.navbar{

background:#111827 !important;

}




body.dark-mode 
section{

background:#111827;

}





body.dark-mode 
.counter-box,
body.dark-mode 
.calculator-card,
body.dark-mode 
.testimonial-card,
body.dark-mode 
.download-card,
body.dark-mode 
.notice-card,
body.dark-mode 
.message-box,
body.dark-mode 
.team-card,
body.dark-mode 
.branch-card,
body.dark-mode 
.faq-section .accordion-item{

background:#1f2937;

color:#e5e7eb;

}




body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4{

color:white;

}




body.dark-mode p{

color:#d1d5db;

}




body.dark-mode 
.accordion-button{

background:#1f2937;

color:white;

}




body.dark-mode 
.accordion-body{

background:#1f2937;

color:#d1d5db;

}

/*=================================
      DARK MODE HERO FIX
=================================*/


body.dark-mode .hero-slider{

background:#111827;

}



body.dark-mode .hero-content h1,
body.dark-mode .hero-content h5,
body.dark-mode .hero-content p{

color:white;

}



/* Outline Button Fix */

body.dark-mode .hero-content .btn-outline-light{

color:white;

border-color:white;

background:transparent;

}



body.dark-mode .hero-content .btn-outline-light:hover{

background:white;

color:#111827;

}



/* Primary Warning Button */

body.dark-mode .hero-content .btn-warning{

background:#F5B041;

color:#111827;

border-color:#F5B041;

}

body.dark-mode .bg-light{

    background:#111827 !important;

}

body.dark-mode #contact{

    background:#111827 !important;

}

body.dark-mode .form-control{

    background:#1f2937;

    border-color:#374151;

    color:white;

}


body.dark-mode .form-control::placeholder{

    color:#9ca3af;

}

.services{

background:#f5f8fc;

}

/* ============================
   DARK MODE SERVICES CARD FIX
============================ */


body.dark-mode .services{

    background:#111827 !important;

}


body.dark-mode .service-card{

    background:#1f2937 !important;
    color:white !important;

}



body.dark-mode .service-card h4{

    color:white !important;

}



body.dark-mode .service-card p{

    color:#d1d5db !important;

}



body.dark-mode .service-card i{

    color:#F5B041 !important;

}



/* Hover */

body.dark-mode .service-card:hover h4{

    color:white !important;

}


body.dark-mode .service-card:hover p{

    color:#d1d5db !important;

}


body.dark-mode .service-card:hover i{

    color:#F5B041 !important;

}


/* DARK MODE FOOTER */


body.dark-mode .footer{

background:#050914 !important;

}



body.dark-mode .footer h4{

color:#F5B041 !important;

}



body.dark-mode .footer p,
body.dark-mode .footer li,
body.dark-mode .footer a{

color:#d1d5db !important;

}



body.dark-mode .footer-bottom{

background:#020617 !important;

}



/*==========================
        DARK MODE
===========================*/


body.dark-mode .footer{


    background:#050914 !important;


}



body.dark-mode .footer-bottom{


    background:#020617 !important;


}



body.dark-mode .footer p,
body.dark-mode .footer li,
body.dark-mode .footer a{


    color:#d1d5db !important;


}



body.dark-mode .footer h4{


    color:#F5B041 !important;


}



/* Mobile */


@media(max-width:768px){


.footer{

    text-align:center;

}


.footer-social{

    margin-top:20px;

}


}

/*==========================
   GLASSMORPHISM SERVICE CARD
===========================*/


.service-card{

    background:rgba(255,255,255,0.15);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,0.25);

    border-radius:25px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.15);

    transition:.4s;

}



.service-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,0.25);

    box-shadow:

    0 20px 40px rgba(0,0,0,.25);

}

body.dark-mode .service-card{


    background:

    rgba(255,255,255,0.08);


    border-color:

    rgba(255,255,255,0.15);


}



body.dark-mode .service-card:hover{


    background:

    rgba(255,255,255,0.15);


}