/*=========================================
 Tech Career Academy
 Author : Shahbaz
=========================================*/

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

/*=========================
 RESET
=========================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:#0f172a;
    background:#fff;
    overflow-x:hidden;
    line-height:1.7;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

/*=========================
 VARIABLES
=========================*/

:root{

--primary:#0d6efd;

--secondary:#0f172a;

--light:#f8fafc;

--white:#ffffff;

--text:#64748b;

--border:#e5e7eb;

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

--radius:12px;

}

/*=========================
 TOP BAR
=========================*/

.top-bar{

background:#0d6efd;

padding:10px 0;

font-size:14px;

color:#fff;

}

.top-left a{

color:#fff;

margin-right:20px;

}

.top-left i{

margin-right:6px;

}

.top-right{

text-align:right;

}

.top-right a{

color:#fff;

margin-left:15px;

transition:.3s;

}

.top-right a:hover{

opacity:.8;

}

/*=========================
 NAVBAR
=========================*/

.navbar{

background:#fff;

padding:14px 0;

box-shadow:0 2px 15px rgba(0,0,0,.06);

z-index:999;

}

.logo{

height:65px;

}

.navbar-nav .nav-link{

font-size:15px;

font-weight:600;

margin-left:15px;

color:#0f172a;

position:relative;

transition:.3s;

}

.navbar-nav .nav-link:hover{

color:#0d6efd;

}

.navbar-nav .nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#0d6efd;

transition:.3s;

}

.navbar-nav .nav-link:hover::after{

width:100%;

}

.navbar .btn{

padding:10px 24px;

border-radius:8px;

font-weight:600;

}

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

.hero-section{

position:relative;

overflow:hidden;

}

.hero-section .carousel-item{

height:680px;

}

.hero-section .carousel-item img{

width:100%;

height:680px;

object-fit:cover;

}

/* Overlay */

.hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.45));

display:flex;

align-items:center;

z-index:5;

}

/* Hero Content */

.hero-content{

color:#fff;

}

.hero-badge{

display:inline-block;

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

padding:10px 22px;

border-radius:50px;

backdrop-filter:blur(8px);

font-size:14px;

margin-bottom:25px;

}

.hero-content h1{

font-size:58px;

font-weight:700;

line-height:1.2;

margin-bottom:20px;

}

.hero-content p{

font-size:18px;

color:#f1f1f1;

max-width:650px;

}

/* Hero Buttons */

.hero-buttons{

margin-top:35px;

}

.hero-buttons .btn{

padding:14px 30px;

border-radius:10px;

margin-right:15px;

font-weight:600;

}

/*=========================
 TRUST BOX
=========================*/

.trust-box{

display:flex;

gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

.trust-item{

width:150px;

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

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

backdrop-filter:blur(8px);

padding:18px;

border-radius:12px;

text-align:center;

color:#fff;

transition:.3s;

}

.trust-item:hover{

transform:translateY(-6px);

}

.trust-item i{

font-size:30px;

margin-bottom:10px;

color:#FFD43B;

}

/*=========================
 ADMISSION FORM
=========================*/

.admission-box{

background:#fff;

padding:35px;

border-radius:18px;

box-shadow:0 20px 50px rgba(0,0,0,.18);

}

.admission-box h3{

text-align:center;

font-size:28px;

font-weight:700;

margin-bottom:10px;

}

.admission-box p{

text-align:center;

color:#777;

margin-bottom:25px;

}

.admission-box .form-control,

.admission-box .form-select{

height:52px;

border-radius:10px;

margin-bottom:18px;

box-shadow:none;

}

.admission-box .btn{

height:52px;

border-radius:10px;

font-weight:600;

}

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

.btn-primary{

background:#0d6efd;

border:none;

}

.btn-primary:hover{

background:#0b5ed7;

}

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

@media(max-width:991px){

.top-right{

text-align:left;

margin-top:10px;

}

.hero-section .carousel-item,

.hero-section .carousel-item img{

height:900px;

}

.hero-content{

text-align:center;

margin-bottom:40px;

}

.hero-content h1{

font-size:40px;

}

.hero-buttons .btn{

margin-bottom:15px;

}

.trust-box{

justify-content:center;

}

}

@media(max-width:576px){

.logo{

height:55px;

}

.hero-content h1{

font-size:30px;

}

.hero-content p{

font-size:15px;

}

.hero-section .carousel-item,

.hero-section .carousel-item img{

height:950px;

}

.hero-badge{

font-size:12px;

}

.trust-item{

width:100%;

}

.hero-buttons .btn{

display:block;

width:100%;

margin-bottom:15px;

}

}
/*==========================
 HERO FEATURES
===========================*/

.hero-features{

margin-top:-70px;

position:relative;

z-index:20;

padding-bottom:70px;

}

.feature-box{

background:#fff;

padding:35px 25px;

text-align:center;

border-radius:15px;

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

transition:.3s;

height:100%;

}

.feature-box:hover{

transform:translateY(-10px);

}

.feature-box i{

font-size:42px;

color:#0d6efd;

margin-bottom:20px;

}

.feature-box h3{

font-size:34px;

font-weight:700;

margin-bottom:10px;

}

.feature-box p{

color:#666;

margin:0;

}
@media (max-width: 576px){

.hero-overlay{
    padding: 30px 20px;
    align-items: flex-start;
}

.hero-content{
    margin-top: 20px;
}

.hero-badge{
    margin-bottom:15px;
}

.hero-content h1{
    font-size:32px;
    margin-bottom:15px;
}

.hero-content p{
    font-size:15px;
    margin-bottom:20px;
}

.hero-buttons{
    margin-top:20px;
}

.trust-box{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:25px;
}

.trust-item{
    width:100%;
    padding:12px 8px;
}

.trust-item i{
    font-size:22px;
}

.trust-item h6{
    font-size:13px;
    margin:5px 0;
}

.trust-item span{
    font-size:11px;
}

.hero-section .carousel-item,
.hero-section .carousel-item img{
    height:780px;
}

}

/*=========================================
POPULAR COURSES
=========================================*/

.popular-courses{
    padding:90px 0;
    background:#f8fafc;
}

.section-title .sub-title{
    display:inline-block;
    background:#e8f1ff;
    color:#0d6efd;
    padding:8px 20px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
}

.section-title h2{
    font-size:42px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:15px;
}

.section-title p{
    color:#64748b;
    max-width:650px;
    margin:auto;
}


/*==========================
COURSE CARD
==========================*/

.course-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

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

    transition:.35s ease;

    height:100%;

}

.course-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

/*==========================
IMAGE
==========================*/

.course-image{

    position:relative;

    overflow:hidden;

}

.course-image img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.5s;

}

.course-card:hover .course-image img{

    transform:scale(1.08);

}

/*==========================
BADGE
==========================*/

.course-badge{

    position:absolute;

    top:15px;

    left:15px;

    background:#0d6efd;

    color:#fff;

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:600;

}

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

.course-content{

    padding:22px;

}

.course-content h4{

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

    color:#0f172a;

}

.course-rating{

    color:#f59e0b;

    font-size:15px;

    margin-bottom:18px;

}

.course-rating span{

    color:#555;

    margin-left:5px;

}

/*==========================
LIST
==========================*/

.course-content ul{

    padding:0;

    margin:0;

}

.course-content ul li{

    list-style:none;

    margin-bottom:12px;

    color:#555;

    font-size:15px;

}

.course-content ul li i{

    width:25px;

    color:#0d6efd;

}

/*==========================
BUTTONS
==========================*/

.course-btn{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.course-btn .btn{

    flex:1;

    border-radius:8px;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.course-btn .btn-primary:hover{

    transform:translateY(-3px);

}

.course-btn .btn-danger:hover{

    transform:translateY(-3px);

}

/*==========================
VIEW ALL
==========================*/

.popular-courses .btn-outline-primary{

    border-radius:30px;

    padding:12px 35px;

    font-weight:600;

}

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

@media(max-width:991px){

.section-title h2{

font-size:34px;

}

.course-image img{

height:200px;

}

}

@media(max-width:767px){

.popular-courses{

padding:60px 0;

}

.section-title h2{

font-size:28px;

}

.course-content{

padding:18px;

}

.course-content h4{

font-size:20px;

}

.course-btn{

flex-direction:column;

}

.course-btn .btn{

width:100%;

}

}
/*=====================================================
 WHY CHOOSE TECH CAREER ACADEMY
======================================================*/

.why-choose{
    padding:90px 0;
    background:#f8fbff;
}

/*==================================
 Section Heading
===================================*/

.section-badge{

    display:inline-block;
    padding:8px 20px;
    background:#eaf2ff;
    color:#0d6efd;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;

}

.section-title{

    font-size:42px;
    font-weight:700;
    color:#0f172a;
    line-height:1.3;
    margin-bottom:18px;

}

.section-title span{

    color:#0d6efd;

}

.section-description{

    color:#64748b;
    font-size:16px;
    line-height:1.8;
    max-width:700px;
    margin:auto;

}

/*==================================
 Why Card
===================================*/

.why-card{

    background:#fff;
    border-radius:18px;
    padding:35px 30px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.35s ease;
    position:relative;
    overflow:hidden;
    height:100%;
    border:1px solid transparent;

}

/* Top Border Animation */

.why-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#0d6efd,#4f46e5);
    transform:scaleX(0);
    transition:.4s;

}

.why-card:hover::before{

    transform:scaleX(1);

}

/* Hover */

.why-card:hover{

    transform:translateY(-12px);
    border-color:#dbeafe;
    box-shadow:0 18px 45px rgba(13,110,253,.18);

}

/*==================================
 Icon
===================================*/

.why-icon{

    width:75px;
    height:75px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0d6efd,#2563eb);
    margin-bottom:25px;
    transition:.35s;

}

.why-icon i{

    color:#fff;
    font-size:30px;

}

.why-card:hover .why-icon{

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

}

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

.why-card h4{

    font-size:22px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:15px;
    transition:.3s;

}

.why-card:hover h4{

    color:#0d6efd;

}

/*==================================
 Description
===================================*/

.why-card p{

    color:#64748b;
    line-height:1.8;
    margin:0;

}

/*==================================
 Counter Box
===================================*/

.counter-box{

    background:#fff;
    text-align:center;
    padding:30px 20px;
    border-radius:16px;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
    transition:.35s;

}

.counter-box:hover{

    transform:translateY(-8px);

}

.counter-box h3{

    font-size:38px;
    color:#0d6efd;
    font-weight:700;
    margin-bottom:8px;

}

.counter-box p{

    margin:0;
    color:#64748b;
    font-weight:500;

}

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

@media(max-width:991px){

.section-title{

font-size:34px;

}

.why-card{

padding:28px;

}

}

@media(max-width:767px){

.why-choose{

padding:60px 0;

}

.section-title{

font-size:28px;

}

.section-description{

font-size:15px;

}

.why-card{

text-align:center;

}

.why-icon{

margin:0 auto 20px;

}

.counter-box{

margin-bottom:15px;

}

}/*=========================================
 WHY CARD SCROLL ANIMATION
=========================================*/

.why-card{

opacity:1;

transform:translateY(0);

transition:.35s ease;

}

.counter-box::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transition:.8s;

}

.counter-box:hover::before{

left:100%;

}

/* Icon Pulse */

.why-icon{

animation:pulse 3s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(13,110,253,.5);

}

70%{

box-shadow:0 0 0 18px rgba(13,110,253,0);

}

100%{

box-shadow:0 0 0 0 rgba(13,110,253,0);

}

}

/*==================================================
 OUR LEARNING PROCESS
==================================================*/

.learning-process{
    padding:90px 0;
    background:#ffffff;
    position:relative;
}

/*==========================
 Timeline
==========================*/

.timeline{
    position:relative;
    max-width:1200px;
    margin:60px auto 0;
}

/* Center Line */

.timeline::before{

    content:'';
    position:absolute;
    left:50%;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(
        #0d6efd,
        #4f46e5
    );
    transform:translateX(-50%);

}

/* Timeline Item */

.timeline-item{

    position:relative;
    width:50%;
    padding:20px 50px;

}

/* Left */

.timeline-item.left{

    left:0;
    text-align:right;

}

/* Right */

.timeline-item.right{

    left:50%;

}

/*==========================
 Timeline Icon
==========================*/

.timeline-icon{

    position:absolute;
    top:35px;
    width:70px;
    height:70px;
    background:linear-gradient(135deg,#0d6efd,#2563eb);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 30px rgba(13,110,253,.25);
    z-index:10;
    transition:.35s;

}

/* Left */

.timeline-item.left .timeline-icon{

    right:-35px;

}

/* Right */

.timeline-item.right .timeline-icon{

    left:-35px;

}

.timeline-icon i{

    color:#fff;
    font-size:28px;

}

.timeline-item:hover .timeline-icon{

    transform:rotate(15deg) scale(1.08);

}

/*==========================
 Timeline Card
==========================*/

.timeline-content{

    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #eef2ff;

}

.timeline-content:hover{

    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(13,110,253,.15);

}

.timeline-content span{

    display:inline-block;
    background:#eaf2ff;
    color:#0d6efd;
    padding:6px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;

}

.timeline-content h4{

    font-size:24px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:15px;

}

.timeline-content p{

    color:#64748b;
    line-height:1.8;
    margin:0;

}

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

@media(max-width:991px){

.timeline::before{

left:35px;

}

.timeline-item{

width:100%;
padding-left:90px;
padding-right:20px;
margin-bottom:35px;

}

.timeline-item.left,
.timeline-item.right{

left:0;
text-align:left;

}

.timeline-item.left .timeline-icon,
.timeline-item.right .timeline-icon{

left:0;

}

}

@media(max-width:576px){

.learning-process{

padding:60px 0;

}

.timeline-content{

padding:22px;

}

.timeline-content h4{

font-size:20px;

}

.timeline-icon{

width:55px;
height:55px;

}

.timeline-icon i{

font-size:22px;

}

}
.timeline-icon{

transition:.35s;

}

.timeline-item:hover .timeline-icon{

transform:rotate(15deg)
scale(1.12);

background:linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

}
.timeline-content{

position:relative;

overflow:hidden;

}

.timeline-content::before{

content:"";

position:absolute;

left:0;

top:0;

width:4px;

height:0;

background:#0d6efd;

transition:.4s;

}

.timeline-content:hover::before{

height:100%;

}
.timeline-content:hover{

box-shadow:

0 25px 50px

rgba(13,110,253,.18);

}
.timeline-icon{

animation:pulse 3s infinite;

}

@keyframes pulse{

0%{

box-shadow:

0 0 0 0

rgba(13,110,253,.5);

}

70%{

box-shadow:

0 0 0 18px

rgba(13,110,253,0);

}

100%{

box-shadow:

0 0 0 0

rgba(13,110,253,0);

}

}

.step-badge{

display:inline-flex;

align-items:center;

justify-content:center;

width:55px;

height:55px;

background:#0d6efd;

color:#fff;

border-radius:50%;

font-size:20px;

font-weight:700;

margin-bottom:20px;

}
.course-badge{

    animation:badgeMove 2.5s infinite ease-in-out;

}

@keyframes badgeMove{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

100%{

transform:translateY(0);

}

}


/* Course Card Border Effect */

.course-card{

position:relative;

}

.course-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(90deg,#0d6efd,#00c6ff);

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.course-card:hover::before{

transform:scaleX(1);

}


/* Image Overlay */

.course-image::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:linear-gradient(to top,rgba(0,0,0,.35),transparent);

opacity:0;

transition:.4s;

}

.course-card:hover .course-image::after{

opacity:1;

}


/* Title Animation */

.course-content h4{

transition:.3s;

}

.course-card:hover h4{

color:#0d6efd;

}


/* List Animation */

.course-content ul li{

transition:.3s;

}

.course-card:hover ul li{

padding-left:6px;

}


/* Icon Animation */

.course-content ul li i{

transition:.3s;

}

.course-card:hover ul li i{

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

color:#0d6efd;

}


/* Rating */

.course-rating{

display:flex;

align-items:center;

justify-content:space-between;

font-weight:600;

}

.course-rating span{

background:#fff4d6;

color:#d97706;

padding:4px 10px;

border-radius:30px;

font-size:13px;

}


/* Button */

.course-btn .btn{

overflow:hidden;

position:relative;

z-index:1;

}

.course-btn .btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

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

transition:.45s;

z-index:-1;

}

.course-btn .btn:hover::before{

left:0;

}


/* Card Hover */

.course-card:hover{

transform:translateY(-12px) scale(1.02);

}


/* Image */

.course-card:hover img{

filter:brightness(.95);

}


/* Shadow */

.course-card:hover{

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

}


/* View All Button */

.popular-courses .btn-outline-primary{

transition:.35s;

}

.popular-courses .btn-outline-primary:hover{

background:#0d6efd;

color:#fff;

transform:translateY(-3px);

}


/* Smooth Fade */

.course-card{

animation:fadeUp .7s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*==================================================
 FOOTER
 Tech Career Academy
==================================================*/

.footer{

    background:#0b1120;
    color:#cbd5e1;
    padding:90px 0 30px;
    position:relative;
    overflow:hidden;

}

.footer::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#0d6efd,#3b82f6,#06b6d4);

}

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

.footer-logo{

    height:70px;
    margin-bottom:25px;

}

/*==================================
ABOUT
==================================*/

.footer-about p{

    font-size:15px;
    line-height:1.9;
    color:#94a3b8;
    margin-bottom:30px;

}

/*==================================
GOOGLE RATING
==================================*/

.footer-rating{

    display:flex;
    align-items:center;
    gap:15px;
    background:rgba(255,255,255,.05);
    padding:15px;
    border-radius:12px;
    margin-bottom:30px;
    border:1px solid rgba(255,255,255,.08);

}

.footer-rating img{

    width:42px;

}

.footer-rating h5{

    color:#fff;
    margin:0;
    font-size:18px;
    font-weight:600;

}

.footer-rating span{

    color:#94a3b8;
    font-size:13px;

}

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

.footer-social{

    display:flex;
    gap:12px;

}

.footer-social a{

    width:45px;
    height:45px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.35s;

}

.footer-social a:hover{

    background:#0d6efd;
    transform:translateY(-5px);

}

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

.footer h4{

    color:#fff;
    font-size:22px;
    margin-bottom:25px;
    font-weight:600;

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

.footer-links ul,
.footer-contact ul{

    list-style:none;
    margin:0;
    padding:0;

}

.footer-links ul li{

    margin-bottom:14px;

}

.footer-links ul li a{

    color:#94a3b8;
    text-decoration:none;
    transition:.35s;
    display:inline-block;

}

.footer-links ul li a:hover{

    color:#0d6efd;
    transform:translateX(8px);

}

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

.footer-contact ul li{

    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:22px;

}

.footer-contact ul li i{

    width:42px;
    height:42px;
    background:rgba(13,110,253,.15);
    color:#0d6efd;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:17px;
    flex-shrink:0;

}

.footer-contact ul li span,
.footer-contact ul li a{

    color:#94a3b8;
    text-decoration:none;
    line-height:1.8;
    transition:.35s;

}

.footer-contact ul li a:hover{

    color:#0d6efd;

}

/*==================================================
 GOOGLE MAP BUTTON
==================================================*/

.footer-map-btn{

    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
    background:#0d6efd;
    color:#fff;
    padding:14px 24px;
    border-radius:10px;
    text-decoration:none;
    transition:.35s;
    font-weight:600;

}

.footer-map-btn:hover{

    background:#2563eb;
    color:#fff;
    transform:translateY(-4px);

}

.footer-map-btn i{

    font-size:18px;

}

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

.footer-divider{

    margin:70px 0 30px;
    border-color:rgba(255,255,255,.08);

}

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

.footer-bottom{

    padding:25px 0;
    align-items:center;

}

.footer-bottom p{

    margin:0;
    color:#94a3b8;
    font-size:15px;

}

.footer-bottom ul{

    display:flex;
    justify-content:end;
    gap:25px;
    margin:0;
    padding:0;
    list-style:none;

}

.footer-bottom ul li a{

    color:#94a3b8;
    text-decoration:none;
    transition:.35s;

}

.footer-bottom ul li a:hover{

    color:#0d6efd;

}

/*==================================================
 DEVELOPER
==================================================*/

.developer{

    margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#64748b;
    font-size:14px;

}

.developer a{

    color:#0d6efd;
    text-decoration:none;
    font-weight:600;

}

.developer a:hover{

    color:#3b82f6;

}

.developer i{

    color:#ef4444;
    margin:0 5px;
    animation:heartbeat 1.5s infinite;

}

/*==================================================
 HEART ANIMATION
==================================================*/

@keyframes heartbeat{

    0%{

        transform:scale(1);

    }

    25%{

        transform:scale(1.2);

    }

    50%{

        transform:scale(1);

    }

    75%{

        transform:scale(1.2);

    }

    100%{

        transform:scale(1);

    }

}

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

@media(max-width:991px){

.footer{

padding:70px 0 30px;

}

.footer-about,
.footer-links,
.footer-contact{

text-align:center;

}

.footer-rating{

justify-content:center;

}

.footer-social{

justify-content:center;

}

.footer-contact ul li{

justify-content:center;
text-align:left;

}

.footer-bottom{

text-align:center;

}

.footer-bottom ul{

justify-content:center;
flex-wrap:wrap;
margin-top:15px;

}

}

@media(max-width:576px){

.footer-logo{

height:60px;

}

.footer h4{

font-size:20px;

}

.footer-rating{

flex-direction:column;
text-align:center;

}

.footer-social a{

width:42px;
height:42px;

}

.footer-map-btn{

width:100%;
justify-content:center;

}

.footer-bottom ul{

gap:15px;
font-size:14px;

}

.developer{

font-size:13px;

}

}