/*==================================================
GOOGLE FONT
==================================================*/

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

/*==================================================
ROOT
==================================================*/

:root{

--primary:#D10024;
--dark:#15161D;
--white:#ffffff;
--light:#F8F8F8;
--text:#2B2D42;
--border:#E4E7ED;
--transition:.3s ease;

}

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

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

body{

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

}

a{
text-decoration:none;
transition:var(--transition);
}

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

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

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

.top-bar{

background:var(--dark);
padding:10px 0;
font-size:14px;
color:#fff;

}

.top-contact{

display:flex;
align-items:center;
gap:25px;

}

.top-contact li{

display:flex;
align-items:center;

}

.top-contact i{

color:var(--primary);
margin-right:8px;

}

.top-links{

display:flex;
justify-content:flex-end;
gap:25px;

}

.top-links a{

color:#fff;

}

.top-links a:hover{

color:var(--primary);

}


@keyframes fade{

from{

opacity:0;
transform:translateY(15px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.mega-grid{

display:grid;

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

gap:30px;

}

.mega-grid h5{

font-size:18px;
font-weight:700;

margin-bottom:15px;

color:var(--primary);

}

.mega-grid a{

display:block;

padding:8px 0;

color:#666;

transition:.3s;

}

.mega-grid a:hover{

color:var(--primary);
padding-left:8px;

}

/*==================================================
OFFER BAR
==================================================*/

.offer-strip{

background:linear-gradient(90deg,#D10024,#ff2d55);

padding:12px 0;

color:#fff;

font-size:15px;
font-weight:600;

text-align:center;

}

.offer-strip span{

font-weight:700;

}

/*==================================================
MOBILE MENU
==================================================*/

.mobile-toggle{

display:none;

font-size:28px;

cursor:pointer;

}

@media(max-width:991px){

.mobile-toggle{

display:block;

}

.main-menu{

display:none;

}

.mega-menu{

display:none!important;

}

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

.newsletter-section{
    background:#f7f7f7;
    padding:70px 0;
    border-top:1px solid #e4e7ed;
}

.newsletter-box{
    max-width:750px;
    margin:auto;
    text-align:center;
}

.newsletter-box h2{
    font-size:34px;
    font-weight:700;
    color:#15161D;
    margin-bottom:15px;
}

.newsletter-box p{
    color:#8d99ae;
    margin-bottom:35px;
    font-size:16px;
}

.newsletter-form{
    display:flex;
    justify-content:center;
}

.newsletter-form input{
    width:100%;
    max-width:520px;
    height:55px;
    border:1px solid #e4e7ed;
    border-radius:40px 0 0 40px;
    padding:0 20px;
    outline:none;
}

.newsletter-form button{
    width:180px;
    border:none;
    background:#D10024;
    color:#fff;
    font-weight:600;
    border-radius:0 40px 40px 0;
    transition:.3s;
}

.newsletter-form button:hover{
    background:#15161D;
}

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

.footer{
    background:#15161D;
    color:#ffffff;
    padding:70px 0 40px;
}

.footer-title{
    color:#ffffff;
    font-size:22px;
    font-weight:700;
    margin-bottom:25px;
    position:relative;
}

.footer-title::after{
    content:"";
    width:60px;
    height:3px;
    background:#D10024;
    position:absolute;
    left:0;
    bottom:-10px;
}

.footer p{
    color:#b9babc;
    line-height:28px;
}

.footer-contact{
    margin-top:25px;
}

.footer-contact li{
    margin-bottom:15px;
    color:#b9babc;
}

.footer-contact i{
    color:#D10024;
    width:25px;
}

.footer-links li{
    margin-bottom:15px;
}

.footer-links a{
    color:#b9babc;
    transition:.3s;
}

.footer-links a:hover{
    color:#D10024;
    padding-left:8px;
}

.footer-social{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.footer-social a{
    width:45px;
    height:45px;
    background:#2B2D42;
    color:#ffffff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
    font-size:18px;
}

.footer-social a:hover{
    background:#D10024;
}
.footer-page-bar{
    margin-top:40px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
}

.footer-page-links{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:0;
}

.footer-page-links a{
    color:#aaa;
    text-decoration:none;
    font-size:14px;
    padding:0 18px;
    border-right:1px solid rgba(255,255,255,.25);
    transition:.3s;
}

.footer-page-links a:first-child{
    padding-left:0;
}

.footer-page-links a:last-child{
    border-right:none;
    padding-right:0;
}

.footer-page-links a:hover{
    color:#D10024;
}

.footer-company{
    margin-top:22px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    color:#888;
    font-size:13px;
}

.footer-company strong{
    color:#fff;
    font-size:14px;
}

@media(max-width:576px){

    .footer-page-links{
        flex-direction:column;
        gap:10px;
    }

    .footer-page-links a{
        border-right:none;
        padding:0;
    }

    .footer-company{
        flex-direction:column;
        gap:4px;
    }

}
.payment-icons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.payment-icons i{
    font-size:38px;
    color:#ffffff;
    opacity:.85;
}

.payment-icons i:hover{
    color:#D10024;
}

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

.copyright{
    background:#111318;
    color:#b9babc;
    padding:18px 0;
    font-size:14px;
}

/*==================================================
BACK TO TOP
==================================================*/

#backTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#D10024;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    display:none;
    z-index:999;
    transition:.3s;
}

#backTop:hover{
    background:#15161D;
}

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

@media(max-width:991px){

.footer{
    text-align:center;
}

.footer-title::after{
    left:50%;
    transform:translateX(-50%);
}

.footer-social,
.payment-icons{
    justify-content:center;
}

.newsletter-form{
    flex-direction:column;
    gap:15px;
}

.newsletter-form input{
    max-width:100%;
    border-radius:40px;
}

.newsletter-form button{
    width:100%;
    border-radius:40px;
    height:55px;
}

}

@media(max-width:576px){

.newsletter-box h2{
    font-size:26px;
}

.footer{
    padding:50px 0 30px;
}

.payment-icons i{
    font-size:30px;
}

}
/*==============================
HERO SECTION
==============================*/