/* Modern Typography & Base Styles */

* {

    box-sizing: border-box;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    line-height: 1.6;

    color: #333;

    scroll-behavior: smooth;

}



.HeroSection {

    font-size: 62.5%;

}



.spinner-container {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background-color: #262626;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: all 1s;

    z-index: 300;

}





.display .spinner-container {

    opacity: 0;

    visibility: hidden;

}



.circles {

    width: 8rem;

    height: 8rem;

    position: relative;

    opacity: 0;

    visibility: hidden;

    animation: displayCircles 4s;

}



@keyframes displayCircles {

    0% {

        opacity: 0;

        visibility: hidden;

    }



    25% {

        opacity: 1;

        visibility: visible;

    }



    90% {

        opacity: 1;

        visibility: visible;

    }



    100% {

        opacity: 0;

        visibility: hidden;

    }

}



.circles div {

    animation: circles 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

    transform-origin: 4rem 4rem;

}



.circles div::after {

    content: "";

    position: absolute;

    width: 0.7rem;

    height: 0.7rem;

    border-radius: 50%;

    background-color: #c29525;

    margin: -0.4rem 0 0 -0.4rem;

}



.circles div:nth-child(1) {

    animation-delay: -0.036s;

}



.circles div:nth-child(1)::after {

    top: 6.3rem;

    left: 6.3rem;

}



.circles div:nth-child(2) {

    animation-delay: -0.072s;

}



.circles div:nth-child(2)::after {

    top: 6.8rem;

    left: 5.6rem;

}



.circles div:nth-child(3) {

    animation-delay: -0.108s;

}



.circles div:nth-child(3)::after {

    top: 7.1rem;

    left: 4.8rem;

}



.circles div:nth-child(4) {

    animation-delay: -0.144s;

}



.circles div:nth-child(4)::after {

    top: 7.2rem;

    left: 4rem;

}



.circles div:nth-child(5) {

    animation-delay: -0.18s;

}



.circles div:nth-child(5)::after {

    top: 7.1rem;

    left: 3.2rem;

}



.circles div:nth-child(6) {

    animation-delay: -0.216s;

}



.circles div:nth-child(6)::after {

    top: 6.8rem;

    left: 2.4rem;

}



.circles div:nth-child(7) {

    animation-delay: -0.252s;

}



.circles div:nth-child(7)::after {

    top: 6.3rem;

    left: 1.7rem;

}



.circles div:nth-child(8) {

    animation-delay: -0.288s;

}



.circles div:nth-child(8)::after {

    top: 5.6rem;

    left: 1.2rem;

}



@keyframes circles {

    0% {

        transform: rotate(0);

    }



    100% {

        transform: rotate(360deg);

    }

}





.header {

    width: 100%;

    height: 100vh;

    position: relative;

    perspective: 100rem;

}



.img-wrapper {

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.8);

    overflow: hidden;

}



.img-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.5;

    animation: scale 25s;

}





@keyframes scale {

    0% {

        transform: scale(1.3);

    }



    100% {

        transform: scale(1);

    }

}



.banner {

    position: absolute;

    top: 40%;

    left: 15%;

}



.banner h1 {

    font-family: "Baloo Da 2", serif;

    font-size: 8rem;

    font-weight: 300;

    color: #fff;

    width: 100%;

    line-height: 9rem;

    letter-spacing: 0.2rem;

    text-shadow: 0.3rem 0.3rem rgba(0, 0, 0, 0.4);

    opacity: 0;

    animation: moveBanner 1s 0.5s forwards;

    overflow: hidden;

}



.banner p {

    font-family: "Josefin Slab", serif;

    font-size: 4rem;

    color: #fff;

    width: 100%;

    letter-spacing: 0.1rem;

    margin-bottom: 1.5rem;

    text-shadow: 0.3rem 0.2rem rgba(0, 0, 0, 0.4);

    opacity: 0;

    animation: moveBanner 1s 0.7s forwards;

    overflow: hidden;

}



.banner button,

.bannerBTN {

    width: auto;

    min-width: 18rem;

    max-width: 22rem;

    height: auto;

    padding: 1rem 2.5rem;

    background-color: #c29525;

    border: 2px solid #c29525;

    border-radius: 8px;

    font-family: "Muli", serif;

    font-size: 1.5rem;

    font-weight: 600;

    text-transform: uppercase;

    color: #fff;

    text-shadow: 0.1rem 0.1rem rgba(0, 0, 0, 0.2);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    cursor: pointer;

    opacity: 0;

    animation: moveBanner 1s 0.9s forwards;

    overflow: hidden;

    transition: all 0.3s ease-in-out;

    text-decoration: none;

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    letter-spacing: 0.5px;

    line-height: 1.2;

    text-align: center;

}



.banner button:hover,

.bannerBTN:hover {

    color: #fff;

    background-color: #c29525;

    filter: drop-shadow(0 0.5rem 0.7rem #c29525);

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);

}



@keyframes moveBanner {

    0% {

        transform: translateY(40rem) rotateY(-20deg);

    }



    100% {

        transform: translateY(0) rotateY(0);

        opacity: 1;

    }

}







.p-y-2 {

    padding-top: 28px;

    padding-bottom: 28px;

}



.p-y-3 {

    padding-top: 45px;

    padding-bottom: 45px;

}



.m-b-1 {

    margin-bottom: 18px;

}



.m-t-1 {

    margin-top: 18px;

}



.main_counter_area {



    background-size: cover;

    overflow: hidden;

}



.main_counter_area .main_counter_content .single_counter {

    background: #c29525;

    color: #fff;

}



.main_counter_area .main_counter_content .single_counter i {

    font-size: 36px;

}



.underline {

    width: 12rem;

    height: 0.3rem;

    background-color: #c29525;

    margin: 1vh auto;

}



.test-card {

    height: 100%;

}





.hamburger-menu {

    width: 3rem;

    height: 3rem;

    position: fixed;

    top: 5rem;

    right: 5rem;

    z-index: 200;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    cursor: pointer;

    transition: right 0.7s;

}



.change .hamburger-menu {

    right: 33rem;

}



.line {

    width: 100%;

    height: 0.2rem;

    background-color: #fff;

    box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, 0.2);

}



.change .line {

    background-color: rgba(0, 0, 0, 0.8);

}



.change .line-1 {

    transform: rotate(45deg) translate(0.3rem, 0.8rem);

}



.change .line-2 {

    opacity: 0;

    visibility: hidden;

}



.change .line-3 {

    transform: rotate(-45deg) translate(0.3rem, -0.8rem);

}



.hamburger-menu span {

    position: absolute;

    left: 5rem;

    width: 10rem;

    height: 4rem;

    background-color: #e2b646;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-family: "Baloo Da 2" serif;

    font-size: 1.6rem;

    letter-spacing: 0.1rem;

    opacity: 0;

    visibility: hidden;

    transition: all 0.2s;

}



.change .hamburger-menu:hover span {

    opacity: 1;

    visibility: visible;

}



.hamburger-menu span::before {

    content: "";

    position: absolute;

    border-left: 1rem solid transparent;

    border-right: 1rem solid #e2b646;

    border-bottom: 1rem solid transparent;

    border-top: 1rem solid transparent;

    top: 50%;

    left: -2rem;

    transform: translateY(-50%);

}



.sidebar {

    width: 40rem;

    height: 100vh;

    position: fixed;

    top: 0;

    right: -40rem;

    background-color: #fff;

    transition: right 0.5s;

    z-index: 100;

}



.change .sidebar {

    right: 0;

}



.menu {

    position: absolute;

    top: 40%;

    left: 50%;

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

}



.menu-item {

    text-align: center;

}



.menu-links {

    font-family: "Baloo Da 2", serif;

    font-size: 4rem;

    color: #555;

    position: relative;

    display: inline-block;

    white-space: nowrap;

}



.menu-links::before {

    content: attr(data-content);

    position: absolute;

    top: 0;

    left: 0;

    color: #c29529;

    width: 0;

    overflow: hidden;

    white-space: nowrap;

    transition: width 0.3s ease-in-out;

    z-index: 0;

}



.menu-links:hover::before {

    width: 100%;

}



.social-media {

    position: absolute;

    bottom: 3rem;

    width: 100%;

    display: flex;

    justify-content: center;

}



.social-media i {

    font-size: 2.2rem;

    margin: 3rem;

    width: 4.5rem;

    height: 4.5rem;

    background-color: #777;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    transition: background-color 0.3s;

}



.social-media i:hover {

    background-color: #c29525;

}



a {

    text-decoration: none;

}



.language-btn {

    position: fixed;

    right: 5rem;

    bottom: 10rem;

    width: 4.5rem;

    height: 4.5rem;

    background-color: #e2b646;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 2rem;

    color: #fff;

    box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.2);

    border-radius: 0.3rem;

}



.language-btn i,

.scroll-btn i {

    color: #fff !important;

    line-height: 1 !important;

    margin: 0 !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

}



.scroll-btn {

    position: fixed;

    right: 5rem;

    bottom: 5rem;

    width: 4.5rem;

    height: 4.5rem;

    background-color: #e2b646;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 2rem;

    color: #fff;

    box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.2);

    border-radius: 0.3rem;

}



.language-btn:hover,

.scroll-btn:hover {

    background-color: #e2b646;



}





.counter {

    padding-top: 50px;

    padding-bottom: 50px;

    background-color: #dfdede;

}



.main_counter_area .main_counter_content .single_counter {

    background: #c29525;

    color: #fff;

}



.main_counter_area .main_counter_content .single_counter i {

    font-size: 36px;

}



.Content-Section {

    margin-top: 0;

    padding-top: 60px;

    padding-bottom: 40px;

}



.Content-Section h2 {

    color: #2c3e50;

    font-weight: 700;

    margin-bottom: 1.5rem;

}



.Content-Section .lead {

    color: #555;

    line-height: 1.8;

    font-size: 1.1rem;

}



.PlansButton {

    color: #fff;

    background: #c29525;

    border: 2px solid #c29525;

    transition: ease-in-out 0.3s;

}



.PlansButton:hover {

    color: #fff;

    background-color: #c29525;

    filter: drop-shadow(0 0.5rem 0.7rem #c29525)

}



/* Modern Card Design Improvements */

.card {

    transition: all 0.3s ease;

    border: none;

    border-radius: 12px;

    overflow: hidden;

    background: #fff;

}



.card:hover {

    transform: translateY(-8px);

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;

}



.card-body {

    padding: 2rem 1.5rem;

}



.card-title {

    font-weight: 600;

    color: #2c3e50;

    margin-bottom: 1rem;

    font-size: 1.3rem;

}



.card-text {

    color: #555;

    line-height: 1.7;

    font-size: 0.95rem;

}



.card-footer {

    padding: 1.5rem;

    background-color: transparent;

    border-top: none;

}



.Section-Slider {

    background-color: #dfdede;

    padding-bottom: 60px;

}





.testimonials-section {

    color: #fff;

    font-weight: 500;

    background-color: #c29529;

}



@media (max-width: 1400px) {

    .banner h1 {

        font-size: 6rem;

        line-height: 7rem;

    }



    .banner p {

        font-size: 3rem;

    }



    .banner button,

    .bannerBTN {

        min-width: 16rem;

        max-width: 20rem;

        padding: 0.9rem 2rem;

        font-size: 1.3rem;

    }



    .menu-link {

        font-size: 3rem;

    }

}



/* Improved Mobile Responsiveness */

@media (max-width: 1000px) {

    .banner h1 {

        font-size: 5rem;

        line-height: 6rem;

        text-shadow: 0.2rem 0.2rem rgba(0, 0, 0, 0.4);

    }



    .banner p {

        font-size: 2.5rem;

        text-shadow: 0.1rem 0.1rem rgba(0, 0, 0, 0.4);

    }



    .banner button,

    .bannerBTN {

        min-width: 14rem;

        max-width: 18rem;

        padding: 0.85rem 1.8rem;

        font-size: 1.1rem;

    }

    

    .card {

        margin-bottom: 2rem;

    }

    

    .main_counter_area .main_counter_content .single_counter {

        margin-bottom: 1.5rem;

    }



    /*

    .line {

        width: 50%

    }



    .hamburger-menu {

        width: 1.5rem;

        height: 1.5rem;

        top: 3rem;

        right: 3rem;

    }



    .line {

        height: 0.1rem;

    }

    */

    .menu-links {

        font-size: 3rem !important;

    }



    .language-btn {

        right: 2.5rem;

        font-size: 20px;

        bottom: 9rem;

        width: 3rem;

        height: 3rem;

    }



    .scroll-btn {

        right: 2.5rem;

        font-size: 20px;

        width: 3rem;

        height: 3rem;

    }

}



@media (max-width: 700px) {

    .banner h1 {

        font-size: 4rem;

        line-height: 5rem;

    }



    .banner p {

        font-size: 2rem;

    }



    .banner button,

    .bannerBTN {

        min-width: 12rem;

        max-width: 16rem;

        padding: 0.75rem 1.5rem;

        font-size: 1rem;

    }

    

    .card-body {

        padding: 1.5rem 1rem;

    }

    

    .Content-Section .lead {

        font-size: 1rem;

    }

    

    .main_counter_area .main_counter_content .single_counter h2 {

        font-size: 2.5rem;

    }

}



@media (max-width: 480px) {

    .banner h1 {

        font-size: 3rem;

        line-height: 4rem;

    }



    .banner p {

        font-size: 1.6rem;

    }



    .banner button,

    .bannerBTN {

        min-width: 10rem;

        max-width: 14rem;

        padding: 0.7rem 1.3rem;

        font-size: 0.9rem;

        letter-spacing: 0.3px;

    }

}



@media (max-width:590px) {

    .sidebar {

        width: 100%;

        right: -100%;

    }



    .change .hamburger-menu {

        right: 80%;

    }

}





.Footer {

    background-color: #212529;

    padding: 4rem 0 2rem;

    position: relative;

    color: #e0e0e0;

}



.Footer .container,

.Footer .container-fluid {

    background-color: #212529;

    padding: 2rem 0;

}



.Footer h2 {

    color: #e2b646;

    font-weight: 700;

    margin-bottom: 1rem;

    font-size: 1.5rem;

}



.Footer p {

    color: #e0e0e0;

    font-size: 1.05rem;

    line-height: 1.8;

    margin-bottom: 1.5rem;

}



.Footer p a {

    color: #fff !important;

}



.Footer a {

    color: #fff;

    text-decoration: none;

    transition: color 0.3s ease;

}



.Footer a:hover {

    color: #e2b646;

}



.Footer .ratio iframe {

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}



.Footer i {

    color: #c29525;

    margin-right: 0.5rem;

}



/* Section Title Improvements */

.Section-Title-Container h2 {

    color: #2c3e50 !important;

}



#AboutUsTitle h2,

#Mechanic-Content-Title h2 {

    color: #2c3e50 !important;

}



#TestTitle span {

    color: #fff !important;

}



#TestTitle h2 {

    color: #2c3e50;

    font-weight: 700;

    letter-spacing: -0.5px;

}



.Section-Title-Container .text-muted,

#AboutUsTitle .text-muted,

#Mechanic-Content-Title .text-muted {

    color: #c29525 !important;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 0.9rem;

}



/* Icon Improvements */

.card-body i {

    color: #c29525;

    margin-bottom: 1rem;

    transition: all 0.3s ease;

}



.card:hover .card-body i {

    transform: scale(1.1);

    color: #e2b646;

}



/* Image Improvements */

img.shadow {

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;

    transition: all 0.3s ease;

}



img.shadow:hover {

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;

}



@media (max-width:800px) {

    .banner {

        top: 30%;

        left: 15%;

    }

    

    .Footer h2 {

        font-size: 1.3rem;

    }

    

    .Footer p {

        font-size: 1rem;

    }

}



.Section-AboutUs {

    background: #fff;

    padding-top: 60px;

}



.Section-AboutUs .container {

    padding-bottom: 150px;

}



.Section-AboutUs h2 {

    color: #2c3e50;

    font-weight: 700;

}



.Section-AboutUs .lead {

    color: #555;

    line-height: 1.8;

    font-size: 1.1rem;

}



.Section-AboutUs img {

    transition: transform 0.3s ease;

}



.Section-AboutUs img:hover {

    transform: scale(1.02);

}