/* poppins-fonts-imported-here */
@font-face {
    font-family: poppins-300;
    src: url('../fonts/Poppins-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: poppins-400;
    src: url('../fonts/PoppinsRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: poppins-500;
    src: url('../fonts/PoppinsMedium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: poppins-600;
    src: url('../fonts/PoppinsSemibold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: poppins-700;
    src: url('../fonts/PoppinsBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Global-css-here */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    list-style: none;
    overflow-x: hidden;
}


:root {
    /* Colors */
    --white-color: #fff; /* white color */
    --black-color: #000; /* black color */
    --void-color: #020E28; /* void color */
    --yellow-color: #E1AC0A; /* yellow color */
    --azure-color: #007DFF; /* azure color */
    --mermaid-blues-color: #004377; /* mermaid-blues color */
    --gray-color: #e1e1e1; /* gray-color */
    --container-width: 1170px;
}

/* few-reusable-css-code-here */

section{
    width: 100%;
}
.scroll-progress{
    width: 0;
    height: 5px;
    z-index: 1;
    background-color: var(--yellow-color);
    transition: width 0.2 all;
    position: fixed;
    top: 0;
    left: 0;
}
.scroll-top-btn{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--yellow-color);
    position: fixed;
    bottom: -60px; /* Initial position */
    right: 20px;
    transition: bottom 0.3s ease-in-out; /* Add fade animation */
}
.scroll-top-btn.show {
    bottom: 20px; /* Show button */
}

.btn{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 182px;
    height: 45px;
    color: var(--white-color);
    border: none;
    font-size: 16px;
    font-family: poppins-700;
    text-transform: capitalize;
    border-radius: 23px;
    background-image: linear-gradient(107deg, #fdbd00 0%, #007dff 100%, #007dff 100%);
}
.heading-yellow{
    color: var(--yellow-color);
}

/* Pre-header-css-here */
.pre-header {
    background-color: var(--void-color);
    height: 70px;
}

.pre-header__container {
    width: var(--container-width);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    gap: 20px;
}

.pre-header__contact,
.pre-header__email {
    display: flex;
    align-items: center;
}

.pre-header__icon {
    width: 16px;
    height: 16px;
    margin-right: 18px;
}

.pre-header__divider {
    width: 1px;
    height: 20px;
    background-color: var(--gray-color);
}

.pre-header__info {
    font-size: 16px;
    letter-spacing: 0px;
    color: var(--gray-color);
    font-family: poppins-400;
}

/* main-header-css-here */


.main-header {
    background-color: var(--white-color);
    height: 104px;
        
}

.main-header__container {
    width: var(--container-width);
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.main-header__nav-btn-wrapper {
    display: flex;
    align-items: center;
}

.main-header__nav {
    display: flex;
}

.main-header__nav-item {
    margin-right: 20px;
}

.main-header__nav-link {
    color: var(--void-color);
    font-size: 16px;
    font-family: poppins-700;
    text-transform: uppercase;
    position: relative;
    transition: color 0.3s ease;
}

.main-header__nav-link:hover {
    color: var(--yellow-color);
}

.main-header__nav-link::after {
    content: ''; 
    position: absolute;
    left: 0;
    bottom: 0; 
    width: 0;
    height: 2px; 
    background-color: var(--yellow-color); 
    transition: all 0.2s;
}

.main-header__nav-link:hover::after {
    width: 100%;
}
.main-header__nav-link.active {
    color: var(--yellow-color);
}
.main-header__nav-link.active::after {
    content: ''; 
    position: absolute;
    left: 0;
    bottom: -1px; 
    width: 100%;
    height: 2px; 
    background-color: var(--yellow-color); 
}
.toggle{
    display: none;
}
.main-header__btn {
    margin-left: 20px;
}

/* Banner-section-css-here */
.banner {
    width: 100%;
    height: 700px;
    background-image: url('../assets/images/shutterstock_1415888657.png');
    background-size: cover;
    background-position: left;
    background-color: var(--void-color);
    
}

.banner-wrapper {
    width: 100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.banner-container {
    width: var(--container-width);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.banner-left,
.banner-right {
    width: 50%;
}

.banner-content {
    padding-right: 50px; /* Adjust as needed */
}
.banner-heading {
    color: var(--white-color);
    font-size: 64px;
    font-family: poppins-700;
}
.heading-azure {
    color: var(--azure-color);
}
.banner-paragraph {
    color: var(--gray-color);
    font-size: 29px;
    font-family: poppins-400;
    width: 500px;
}
.banner-right__img {
    width: 100%;
    height: auto; /* To maintain aspect ratio */
}
.banner-slider {
    width: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    margin-top: 20px;
}
.circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid var(--white-color);
}


/* card-section-CSS-here */

.card-wrapper{
    background-color: var(--white-color);
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-container{
    width: var(--container-width);
    margin: auto;
    display: flex;
    justify-content: space-between;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.card{
    width: 33.33%;
    height: 220px;
    background-color: var(--white-color);
    border-right: 1px solid var(--gray-color);
}
.card:nth-child(3) {
    border-right: none;
}
.card-header{
    display: flex;
    padding: 30px 30px 15px 30px;
    align-items: center;
    
}
.card-icon{
    margin-right: 50px;
    
}
.card-heading{
    color: var(--black-color);
    font-size: 30px;
    line-height: 38px;
    font-family: poppins-700;
    overflow: hidden;
}
.card-paragraph{
    color: var(--black-color);
    font-size: 16px;
    font-family: poppins-400;
    padding: 0px 10px 0px 30px;
}

/* why-anncar-section-CSS-here */
.why-anncar__wrapper {
    background-color: var(--white-color);
    height: 450px;
}

.why-anncar__container {
    width: var(--container-width);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 75px;
}

.why-anncar__heading {
    color: var(--mermaid-blues-color);
    font-size: 35px;
    font-family: poppins-700;
    text-transform: uppercase;
    text-align: left;
}

.why-anncar__divider {
    background-color: var(--azure-color);
    height: 2px;
    width: 120px;
    margin-top: 10px;
}

.why-anncar__paragraph {
    width: 526px;
    color: var(--black-color);
    font-size: 16px;
    font-family: poppins-400;
    margin-top: 24px;
}


/* bg-with-card-section-CSS-here */

.bg-with-card__wrapper {
    height: 730px;
    background-image: url('../assets/images/shutterstock_1059408791.png');
    background-position: center;
    background-size: cover;
    background-color: var(--void-color);
}

.bg-with-card__container {
    width: var(--container-width);
    margin: auto;
    display: flex;
    align-items: baseline;
    gap: 200px;
}

.bg-with-card__column {
    display: flex;
    flex-direction: column;
    margin-top: 40px;

}

.bg-with-card__column:nth-child(2){
    margin-top: 30px;

}

.bg-with-card__heading {
    color: var(--white-color);
    font-size: 30px;
    font-family: poppins-700;
    text-transform: uppercase;
    margin-top: 14px;
}

.bg-with-card__divider {
    background-color: var(--azure-color);
    height: 2px;
    width: 120px;
    margin-top: 6px;
}

.bg-with-card__paragraph {
    width: 470px;
    color: var(--white-color);
    font-size: 16px;
    font-family: poppins-400;
    margin-top: 16px;
}

.bg-with-card__link {
    text-transform: uppercase;
    font-style: italic;
    color: var(--white-color);
}

.arrow-icon {
    width: 5px;
    height: 10px;
    margin-left: 5px;
}


/* top-brands-sell-section-html-here */

.brands__wrapper {
    background-color: var(--white-color);
}

.brands__container {
    width: var(--container-width);
    margin: auto;
    height: 650px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brands__left, .brands__right {
    width: 50%;
}

.brands__heading {
    color: var(--mermaid-blues-color);
    font-size: 35px;
    font-family: poppins-700;
    text-transform: uppercase;
}

.brands__heading-yellow {
    color: var(--yellow-color);
}

.brands__divider {
    width: 210px;
    height: 2px;
    background-color: var(--azure-color);
    margin-top: 6px;
}

.brands__identity {
    display: flex;
    flex-wrap: wrap;
}

.brands__identity-item {
    width: calc(50% - 20px);
    margin-bottom: 10px;
}

.brands__identity-heading {
    color: var(--black-color);
    font-size: 20px;
    font-family: poppins-700;
    margin-top: 30px;
}

.brands__identity-paragraph {
    color: var(--black-color);
    width: 220px;
    font-size: 14px;
    font-family: poppins-400;
    margin-top: 10px;
}

/* pre-footer-css-here */

.pre-footer__wrapper {
    height: 547px;
    background-image: url('../assets/images/shutterstock_1208324539.png');
    background-color: var(--void-color);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.pre-footer__container {
    width: var(--container-width);
    margin: auto;
    display: flex;
    justify-content: space-between;
    height: 547px;
    align-items: center;
    position: relative;
}

.pre-footer__left-img {
    width: 830px;
    height: 371px;
}

.pre-footer__right-box {
    width: 760px;
    height: 244px;
    background-color: var(--void-color);
    border: 2px solid var(--azure-color);
    position: absolute;
    right: 0;
    top: 27%;
}

.pre-footer__heading {
    color: var(--azure-color);
    font-size: 35px;
    font-family: poppins-700;
    text-transform: uppercase;
    padding: 50px 0px 0px 40px;
}

.pre-footer__paragraph {
    width: 720px;
    color: var(--white-color);
    font-size: 16px;
    font-family: poppins-400;
    padding: 0px 0px 0px 40px;
}

.pre-footer__btn {
    width: 152px;
    height: 37px;
    border: none;
    font-size: 16px;
    font-family: poppins-700;
    text-transform: uppercase;
    border-radius: 18px;
    background-color: var(--azure-color);
    margin: 10px 0px 0px 40px;
}

.pre-footer__btn-link {
    color: var(--white-color);
}

/* footer-css-here */
.footer-wrapper{
    background-color: var(--void-color);
}
.footer-logo__container{
    width: var(--container-width);
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    
}
.footer-nav__container{
    width: var(--container-width);
    margin: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 55px;
    margin-bottom: 30px;
    
}
.social-heading{
    color: var(--white-color);
    font-size: 20px;
    font-family: poppins-500;
    text-transform: uppercase;
}
.social-paragraph{
    width: 249px;
    color: var(--gray-color);
    font-size: 14px;
    font-family: poppins-400;
    margin-top: 25px;
}
.footer-social__icon{
    width: 120px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;


}

.contact-heading, .link-heading, .btn-heading{
    color: var(--white-color);
    font-size: 20px;
    font-family: poppins-500;
    text-transform: capitalize;
    margin-bottom: 25px;
}
.call-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 140px;
}
.info-text{
    color: var(--gray-color);
    font-size: 14px;
    font-family: poppins-400;
}
.email-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 250px;
    margin-top: 10px;
}
.location-info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 340px;
    margin-top: 10px;
}
.useful-list{
    margin-bottom: 10px;
}
.useful-link{
    color: var(--gray-color);
    font-size: 14px;
    font-family: poppins-400;
    transition: 0.3s;
}
.useful-link:hover{
    color: var(--yellow-color);
}
.btn-paragraph{
    width: 240px;
    color: var(--gray-color);
    font-size: 14px;
    font-family: poppins-400;
    margin-bottom: 16px;
}

.btn-link{
    color: var(--white-color);
}

/* copyright-section-html-here */
.copyright-wrapper{
    height: 40px;
    background-color: var(--black-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.copyright-text{
    color: var(--gray-color);
    font-size: 14px;
    font-family: poppins-400;
}

/* about-page-css-here */



.section-1, .section-2, .section-3, .section-4{
    width: 100%;
    height: 100vh;
    background-color: var(--azure-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 5px solid var(--void-color) ;
}