/* ================================================================================General Styles==================================================================================================== */
* {box-sizing: border-box;margin: 0;padding: 0;}
@media (max-width: 3000px) 
{
html {scroll-behavior: smooth;font-size: 1.5vw;}
body { font-family: 'Inter', sans-serif;font-size: 1rem;background-color: #545454;line-height: 1.5;text-align: left; overflow-x: hidden;}
h1 {font-size: 2.5rem;color: #fff ; line-height:1.2 ; font-weight:lighter;}
h2{font-size: 2rem; margin-bottom: 2rem; font-weight: lighter;color: #fff}
h3{font-weight: lighter; font-size: 1.8rem;color: #fff}
h4{font-weight: lighter; font-size: 1.5rem;color: #fff}
h5 , h6 {font-weight: lighter;color: #fff}
p {font-size: 1.2rem; font-weight: lighter;line-height: 2rem; color: #fff ;margin-bottom: 1.5rem;}
section {padding: 3vw 5%; background-color: #b42324; color: #fff; margin: 5vh 5vw;  text-align: left; box-shadow: 0 0.3vw 0.5vw rgba(0, 0, 0, 0.5);  transition: background-color 0.3s ease, color 0.3s ease;}
body, h1, h2, h3, h4, h5, h6, p, a, li, button, input, textarea {font-family: 'Inter', sans-serif; font-weight: 400;}
/* ------------------------------------------- Footer styles ------------------------------------------- */
footer {background-color: #b42324; color: #fff; padding: 3vh 2vw; text-align: center; box-shadow: 0 0.4vw 0.6vw rgba(0,0,0,0.1);}
footer p {font-size: 0.9rem; margin: 0; font-weight: lighter;}
/* ---------------------------- Social Icons ---------------------------- */   
.social-icon {width: 2.5vw; max-width: 2rem; height: auto;display: inline-block; margin: 1vh; transition: 0.3s ease-in-out;}
.social-icon:hover{filter: brightness(50%);}
/* ================================================================================ Home Page Styling ==================================================================================================== */
/* ---------------------------- Slogan styling ----------------------------*/
#slogan {color: #fff; font-size: 3.5rem ;opacity: 0; animation: fade-in-out 10s ease-in-out infinite;  text-align: left; font-weight: bold; font-family: 'Inter', sans-serif;}
/* Animation Effect (showing the slogan) */
#slogan.show {opacity: 1;transform: translateY(0);}
@keyframes fade-in-out {0%, 100% {opacity: 0; transform: translateY(-20px);} 50% {opacity: 1; transform: translateY(0);}}
/* ---------------------------- Full-screen intro background image ---------------------------- */
.hero {background-image: url('../images/img_11.jpg'); height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative;}
.hero::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 0;} /* Dark overlay effect for readability */
.navbar {position: fixed; top: 0; width: 100%; padding: 1vh 2vw; display: flex; justify-content: space-between; align-items: center; background-color: transparent; transition: background-color 0.5s ease; z-index: 1000;}
.navbar.scrolled {background: rgba(128, 128, 128, 0.9);} /* Navbar Styling */
/* ---------------------------------- Logo ------------------------------- */
.Globe_logo {width: 12rem; max-width: 11rem; min-width: 5rem; height: auto;}
/*  ------------------------------------------------------------------------------------ Hamburger Menu ------------------------------------------------------------------------------------ */
.menu-container {cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; height: 2.5vh; width: 4vw; z-index: 1001;}
.hamburger {cursor: pointer; display: flex; flex-direction: column; justify-content: space-around; height: 2.5vh; width: 4vw;}
.hamburger div {height: 0.1vh; width: 100%; background-color: white; transition: all 0.3s ease;} 
.menu-text {color: white; font-size: 1.8vw; margin-top: 1vh; text-align: center; font-weight: lighter;}
.menu-items {position: fixed; right: 2vw; top: 7vh; background-color: #b42324;padding: 1vh 1.5vw;font-weight: lighter; opacity: 0; visibility: hidden;transition: opacity 0.5s ease, visibility 0.5s ease; z-index: 1002;} /* Menu Dropdown Styling */
.menu-items a {color: white; text-decoration: none; display: block; padding: 1vh 0; font-size: 1.5vw;}
.menu-items a:hover {background-color: #666;}
.menu-active {opacity: 1; visibility: visible; z-index: 1002;} /* Show menu items */
.text-overlay {position: absolute; bottom: 10vh; left: 2vw; color: white; font-size: 4vw; font-weight: lighter; max-width: 50vw;} /* Text Overlay on the background */
/* ------------------------------------------------------------------------------------ Project Slideshow ------------------------------------------------------------------------------------ */
#project-slider {text-align: center; background-color: #b42324; overflow: hidden; position: relative;width: 100%;}
.gallery-slider {width: 100%; margin: 0;} /* Slider Container */
.gallery-img-holder {position: relative; text-align: center; padding: 0; display: inline-block; overflow: hidden; transition: transform 0.3s ease-in-out;} /* Image Wrapper */
.gallery-img-holder:hover .gallery-img {transform: scale(1.1); cursor: pointer; filter: brightness(85%);}  /* Zoom-in effect and cursor change */
.gallery-img-holder::after {content: "\f002"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3vw;  color: white; opacity: 0; transition: opacity 0.3s ease-in-out;} /* Magnify Icon Effect */
.gallery-img-holder:hover::after {opacity: 1;} /* Show the icon on hover */
.gallery-img {width: 100%; height: 55vh; object-fit: cover; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;} /* Image Sizing */
.slick-slide {transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; opacity: 0.8; transform: scale(0.9); } /* Default Styling for All Slides */
.slick-center {opacity: 1 !important; transform: scale(1.1);} /* Make Center Image Fully Visible and Larger */
.slick-list {padding: 2vh 0 !important;} /* Fix Spacing Between Slides */
/* ---------------------------- Navigation Controls ---------------------------- */
.slider-controls {position: relative;top: 2vh;left: 50%;transform: translateX(-50%);display: flex;align-items: center; justify-content: center; margin-bottom: 3vh; gap: 1vw;}
.slick-prev, .slick-next {position: relative;top: 50%;transform: translateY(-50%);background-color: #b42324;color: white; border: none;font-size: 1.5vw;cursor: pointer;border-radius: 20%;display: flex; justify-content: center; align-items: center;transition: background 0.3s ease-in-out; z-index: 10;width: 3vw; height: 3vw;} /* Navigation Buttons */
.slick-prev {left: -4vw;}
.slick-next {right: -4vw;}
.slide-number {font-size: 1rem;color: #ffffff;font-weight: bold;}
/* ------------------------------------------------------------------------------------ Project Video ------------------------------------------------------------------------------------ */
.video-container {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
.video-container video {width: 100%;height: 100%;object-fit: cover;box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);}
/*============================Contact Manager===================================*/
.manager-card {background-color: #545454; padding: 2vw; text-align: center; box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out;border-radius: 1.5vw;}
.manager-card:hover {transform: scale(1.05);}
.manager-image {width: 15rem  !important; height: 15rem  !important; border-radius: 50%; object-fit: cover; margin-bottom: 1vh;max-width: 25rem  !important; max-height: 25rem  !important;}
.manager-info a {color: #ffffff;text-decoration: none;font-size: 1.2rem;}
.manager-info a:hover {text-decoration: underline;}
/* ------------------------------------------- Bullet points -------------------------------------------*/
ul {list-style-type: disc; padding-left: 2vw;margin-bottom: 2vh;}
ul li {margin-bottom: 1vh; font-size: 1.2rem; color: #fff; font-weight: lighter;}
ul li::marker {color: #fff;}
a:hover {color: #2c3e50; transition: color 0.3s ease-in-out;}
/* ================================================================================ About Us Page Styling ==================================================================================================== */
/* ---------------------------- Full-screen intro background image ---------------------------- */
.hero_aboutus {background-image: url('../images/motor_sport_4.jpg'); height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative;}
.hero_aboutus::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 0;} /* Dark overlay effect for readability */
.inline_image-container {margin: 0; display: flex; align-items: center; padding: 4vw; }
.inline_image-image {width: auto; height: auto; max-width: 30vw; margin: 0;}
.inline_image-text {width: 65vw; color: white; background-color: #b42324; padding: 3vw; box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.5);}
/* ✅ ---------------------------------------------------------------- Full-Screen Background Styling ---------------------------------------------------------------- */
.fullscreen_background_section_mission {position: relative; width: 100vw; height: 130vh ! important; background-image: url('../images/About_Us/mission.jpg');
    background-size: cover; background-position: center center; background-repeat: no-repeat;display: flex;
    flex-direction: column;align-items: center;justify-content: center;color: #fff;overflow: hidden;margin: 0;padding: 0; box-shadow: none;}
.fullscreen_background_overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);} /* ✅ Dark Overlay (Covers Entire Section) */
.fullscreen_background_overlay_title {text-align: center;font-size: 2.5vw; font-weight: lighter;margin-bottom: 2vh;} /* ✅ Title Fix */
.fullscreen_background_content {width: 75vw; position: relative;z-index: 2;background-color: #b42324; padding: 3vw;box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.2);
    display: flex;flex-direction: column;justify-content: center;text-align: left;margin-top: 8vh;transform: translateX(10vw);}
/* ✅ ---------------------------------------------------------------- Full Container Styling (Centered) ---------------------------------------------------------------- */
.image_up_container {width: 100rem;max-width: 100vw;display: flex;flex-direction: column;align-items: center;justify-content: center;margin: auto; padding: 2vw;
    margin-top: 10vh;margin-bottom: 10vh; overflow: hidden;position: relative;background: #545454;transform: translateX(-10vw);}
.container_image {position: relative;width: 100%;height: 65vh;overflow: hidden;display: flex;justify-content: center;margin-bottom: 2vh;} /* Image Styling (Centered) */
.container_image img {width: 100%;height: 100%;object-fit: cover; display: block;}
.container_content {width: 100%;background: #b42324;display: flex;padding: 5%;flex-direction: column; align-items: center;max-width: 100vw; text-align: left;}
.container_content p {max-width: 90%;}
/* ✅ ---------------------------------------------------------------- Contact Button Container Centered ---------------------------------------------------------------- */
.contact-button-container {width: 100%; display: flex; justify-content: center;padding: 5vh; box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.2);}
.contact-button {display: inline-flex; align-items: center; justify-content: center; background: #b42324; color: white; font-size: 2vw; font-weight: bold;
    text-decoration: none;padding: 1.8vw 2.5vw;transition: background 0.3s ease;border: none;cursor: pointer;}
.contact-button:hover {background: rgba(67, 61, 61, 0.329);}
.contact-button .arrow {font-size: 3.5vw;margin-left: 0.5vw;}
/* ------------------------------------- Scrollable section styling  -------------------------------------- */
.scroll-container{height: 100vh; width: 100vw; margin:0}
.scrollable-section {margin: 0 auto; height: 100%; /* Fixed height to make it scrollable*/ overflow-y: auto; /*Enable vertical scrollbar */background-color: #545454; /* Transparent background */padding: 2vw; box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1);}
.scrollable-section::-webkit-scrollbar {width: 0.8vw;}
.scrollable-section::-webkit-scrollbar-track {background: #e0e0e0;}
.scrollable-section::-webkit-scrollbar-thumb {background: #b42324; border-radius: 1vw;}
.scrollable-section::-webkit-scrollbar-thumb:hover {background: #b42324;}
/* ------------------------------------- Intro Page section styling  -------------------------------------- */
.hero_services {background-image: url('../images/services/45.jpg'); height: 100vh; width: 100vw; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative;}
.hero_services::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 0;}
.fullscreen_background_section_products {position: relative;width: 100vw;height: 190vh ;background-image: url('../images/services/Multistory.jpg'); background-size: cover;
    background-position: center center; background-repeat: no-repeat;display: flex;flex-direction: column;align-items: center;justify-content: center; color: rgb(0, 0, 0);
    overflow: hidden; margin: 0;padding: 0; box-shadow: none;}
.fullscreen_background_section_project {position: relative;width: 100vw;height: 170vh;background-image: url('../images/services/19.jpg'); background-size: cover;
        background-position: center center;background-repeat: no-repeat;display: flex;flex-direction: column;align-items: center;justify-content: center;color: rgb(0, 0, 0);
        overflow: hidden;margin: 0;padding: 0; box-shadow: none;}
.fullscreen_background_content_scrollable {position: relative; z-index: 2;color: rgb(0, 0, 0) !important;width: 60vw;padding: 3vw;box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.2);
            display: flex;flex-direction: column;justify-content: center;text-align: left;margin-top: 8vh; transform: translateX(15vw);}
/* ---------------------------- Full-screen intro background image ---------------------------- */
.hero_projects {background-image: url('../images/motor_sport_22.jpg'); height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative;}
.hero_projects::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 0;}
/* ================================================================================ Projects Page Styling ==================================================================================================== */
/* -------------------------------------------- Project Slideshows Styling and their Navigation Buttons ------------------------------------------- */
.project-wrapper {display: flex; align-items: center; justify-content: space-between; gap: 1vw; margin: 2vw 2vh;padding: 1vw 1vh;background-color: #545454;flex-wrap: nowrap;}
.slideshow-container_multiscope {position: relative;width: 100vw; height: 40vh; max-width: 1000px; max-height: 500px;justify-content: center; align-items: center; display: flex;overflow: hidden; flex-direction: column; margin: 0;}
.project-wrapper_multiscopes {display: flex; align-items: center; justify-content: space-between; gap: 1vw; margin: 0vw 0vh;padding: 1vw 1vh;background-color: #545454; flex-direction:row;width: 100%;}
.slideshow-container_multiscope .slide:first-child {display: block;}
.project {width: 100%; margin:1vw 1vh; padding: 2vw 2vh; background-color: #b42324;text-align: left; box-shadow: 0 0 1vw rgba(134, 25, 25, 0.1);}
.slideshow-container {position: relative;width: 100%; height: 55vh; max-height: 500px;justify-content: center; align-items: center; display: flex;overflow: hidden; flex-direction: column; margin: 0;}
.slide {display: none; height: 100%;width:100%; text-align: center; position: absolute;}
.slideshow-container .slide:first-child {display: block;}
.slide img {flex-shrink: 0;max-width: 100%;max-height: 100%;object-fit:cover;}
.logo {max-height: 15vh;max-width: 15vw; display: block; margin: 0 auto;}
.project-section {display: flex; flex-direction: column;align-items: center;margin-bottom: 1vh;} 
.ccc_wrapper {display: flex; justify-content: center; align-items: center; gap: 10vw; text-align: center; width: 100%;}
/* ================================================================================ Certificates Page Styling ==================================================================================================== */
.certificates-container {display: flex;flex-wrap: wrap;justify-content: center;gap: 10px;}
.certificates-container img {width: 35vw; height: auto;transition: transform 0.3s;}
.certificates-container img:hover {transform: scale(1.05);}
/* ---------------------------- Full-screen intro background image ---------------------------- */
.hero_certificates {background-image: url('../images/proj_23.JPG') no-repeat center center / cover !important; min-height: 100vh !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; position: relative !important;}
.hero::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 0;}

.products { display: flex; }
.products img {max-width: 25rem; }
.products p {width: 40vw;} }
/* ================================================================================ For 1280 px ==================================================================================================== */
@media (max-width: 1300px) { 
    html {font-size: 1.5vw;}
    .video-container {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
    .video-container video {width: 100%;height: 100%;object-fit: cover;box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);}
    .project-wrapper_multiscopes {display: flex; align-items: center; justify-content: space-between; gap: 0.1vw;margin: 1vw 1vh;padding:1vw 1vh;background-color: #545454;flex-direction:column; width: 100%;}
    .slideshow-container_multiscope {position: relative;  width: 100%; height: 55vh; justify-content: center; align-items: center; display: flex;overflow: hidden; flex-direction: column; margin: 0;}
    .menu-container { height: 2.5rem; width: 4rem;}
    .hamburger {height: 2.5rem; width: 4rem;}
    .hamburger div {height: 0.1rem; width: 100%;} 
    .menu-text {font-size: 1.8rem; margin-top: 1rem; text-align: center; font-weight: lighter;}
    .menu-items {position: fixed; right: 2rem; top: 7rem; padding: 1rem 1.5rem;} 
    .menu-items a { padding: 1rem 0; font-size: 1.5rem;}
    .text-overlay { bottom: 10rem; left: 2rem; font-size: 4rem; max-width: 50rem;} 
    #slogan {font-size: 3rem }
    .inline_image-container {margin: 0; }
    .inline_image-text { margin:0; width: 80vw;}
    .fullscreen_background_content {width: 85vw;transform: translateX(5vw);}
    .project-wrapper {flex-direction: column;gap: 2vh;}
    .slideshow-container {width: 100%;height: 55vh;max-height: 400px;}
    .slide img {width: 100%;height: 100%;object-fit: cover;}
    .logo {max-height: 12vh;max-width: 15vw;}
    .ccc_wrapper {flex-direction:row;gap: 5vh;}
    .inline_image-text {width: 65vw;}
    .contact {padding: 1.5vw;}
    .manager-card {background-color: #545454; padding: 2vw; text-align: center; box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out;border-radius: 1.5vw}
    .manager-card:hover {transform: scale(1.05);}
    .manager-image {width: 15vw; height: 15vw; border-radius: 50%; object-fit: cover; margin-bottom: 1vh;max-width: 12rem; max-height: 12rem;}
    .manager-info a {color: #ffffff;text-decoration: none;font-size: 1.1rem;}
    .manager-info a:hover {text-decoration: underline;}   
    .scroll-container{height: 90vh; width: 100vw; margin:0}
    .certificates-container {gap: 10px;}
    .certificates-container img {width: 80vw;}
    .products { display: flex; flex-direction: column;}
    .products img {max-width: 20rem; max-height:25vh;}
    .produts p {width: auto;}
}
/* ================================================================================ For 760 px ==================================================================================================== */
@media (max-width: 760px) {html {font-size: 2.5vw;}
p {font-size: 1.2rem;}
.logo {max-height: 20vh;max-width: 20vw;}
.menu-container { height: 2.5rem; width: 4rem;}
.hamburger {height: 2.5rem; width: 4rem;}
.hamburger div {height: 0.1rem; width: 100%;} 
.menu-text {font-size: 1.8rem; margin-top: 1rem; text-align: center; font-weight: lighter;}
.menu-items {position: fixed; right: 2rem; top: 7rem; padding: 1rem 1.5rem;} 
.menu-items a { padding: 1rem 0; font-size: 1.5rem;}
.text-overlay { bottom: 10rem; left: 2rem; font-size: 4rem; max-width: 50rem;} 
#slogan {font-size: 3rem }
.contact-button {font-size: 1.4rem;}
.contact-button .arrow {font-size: 3rem;}
.fullscreen_background_content {width: 30rem;transform: translateX(2vw);}
.inline_image-text {width: 36rem; }
.inline_image-container {margin: 0; display:block; align-items: column; padding: 0; }
.inline_image-image {width:0 ; height: 0; }
.image_up_container {width:36rem;max-width: 40rem;}
.fullscreen_background_section_mission {height: 65rem;}
.fullscreen_background_section_products {position: relative;width: 100vw;height: 95rem;}
.fullscreen_background_content_scrollable { width: 35rem;}
.slideshow-container_multiscope {position: relative;  width: 100%; height: 55vh; justify-content: center; align-items: center; display: flex;overflow: hidden; flex-direction: column; margin: 0;}
.products { display: flex; flex-direction: column;}
.products img {max-width: 20rem; max-height:25vh;}
.produts p {width: auto;}}

@media (max-width: 460px) {html {font-size: 3vw;}
.inline_image-text {width: 30rem; }
footer p {font-size: 1rem;}}