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

/* Reset browser defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent horizontal scroll */
html,
body {
    width: 100%;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
}





/* HEADER */
ul li a {
    text-decoration: none;
    color: rgb(11, 11, 11);
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: transparent;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.header-nav a {
    color: #fff;
    transition: 0.3s ease;
}

/* When SCROLLED */
header.scrolled {
    position: fixed;
    background: linear-gradient(177deg, rgba(255, 255, 255, 1), rgba(255, 247, 234, 1));
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


header.scrolled .header-nav a {
    color: #000 !important;
}


header.scrolled .menu-toggle span {
    background: #000 !important;
}


header.scrolled .quote-btn a {
    background: rgba(242, 179, 68, 1);
    color: #000;
}

header.scrolled .quote-btn a i {
    background: #000;
    color: #fff;
}

header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}


.header-nav ul {
    display: flex;
    gap: 40px;
    list-style: none;
    align-items: center;
    margin: 0;
}

.logo {
    border-radius: 100px;
}

.header-cnt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* transition: 0.3 ease-in-out; */
}



.underline-btn {
    position: relative;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
}

.underline-btn::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -4px;
    left: 50%;
    background-color: rgb(255, 255, 255);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.underline-btn:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* When active — animate the X */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* === NAVIGATION === */
.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
}

.quote-btn a {
    text-decoration: none;
    color: black;
    background: rgba(242, 179, 68, 1);
    padding: 10px 22px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.quote-btn a i {
    background: #fff;
    color: #000;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
}

.quote-btn a:hover {
    background: #e6a53d;
    /* slightly darker yellow */
    color: #fff;
    /* text color change */
    transform: translateY(-3px);
    /* small lift effect */
}

.quote-btn a:hover i {
    background: #000;
    /* invert icon background */
    color: #fff;
    /* icon color change */
    transform: scale(1.1);
    /* small zoom effect */
}

/* HERO */
#hero {
    background: url(../images/hero_banner.png) no-repeat center center/cover;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    /* margin: 0; */
    padding: 0;
    background-size: cover;
    background-position: center;
    animation: heroSlide 12s infinite ease-in-out;
}

/* @keyframes heroSlide {
    0% {
        background-image: url("../images/hero\ banner.png");
    }

    33% {
        background-image: url("../images/hero_banner2.png");
    }

    66% {
        background-image: url("../images/hero_banner3.png");
    }

    100% {
        background-image: url("../images/hero\ banner.png");
    }
} */


.hero-content {
    max-width: 800px;
    /* padding: 0px 116px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 244px;
}

.hero-content h1 {
    font-size: 54px;
    font-weight: 600;
}

.hero-content h2 {
    font-size: 40px;
    font-weight: 500;
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 52px;
}

.hero-btn {
    text-decoration: none;
    color: white;
    background: solid 1px white;
    border: solid 1px white;
    width: fit-content;
    padding: 11px 21px;
    border-radius: 10px;
    font-weight: 600;
}

.hero-btn i {
    /* background: white; */
    color: black;
    border-radius: 100px;
    width: 26px;
    height: 26px;
}

.explore-btn a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fffefe;
    padding: 12px 28px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.explore-btn a i {
    background: #fff;
    /* ✅ White circle behind icon */
    color: black;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.explore-btn a:hover {
    background: rgba(255, 255, 255, 0.15);
    /* light glow */
    transform: translateY(-2px);
}

/* Icon movement on hover */
.explore-btn a:hover i {
    background: black;
    color: white;
    transform: translateX(4px);
    /* smooth slide */
}


/* FEATURED PRODUCTS */

#Featured-Products {
    padding: 90px 0px;
}

.Featured-heading {
    display: flex;
    justify-content: center;
}

.Featured-heading h3 {
    font-weight: 600;
}

.products {
    margin-top: 40px;
}

button.slick-next.slick-arrow {
    position: absolute;
    right: -47px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100px;
    padding: 5px 7px;
    border: solid 1px rgb(221, 219, 220);
    color: rgb(6, 38, 67);
}

button.slick-prev.slick-arrow {
    position: absolute;
    left: -47px;
    top: 50% !important;
    z-index: 5;
    transform: translateY(-50%);
    border-radius: 100px;
    padding: 5px 7px;
    border: solid 1px rgb(221, 219, 220);
}


.image-row {
    display: flex;
    flex-wrap: wrap;
    /* allows automatic wrapping */
    gap: 20px;
}

.image-row img {
    /* width: calc(20% - 20px); */
    max-width: 100%;
    height: auto;
}

.product-name {
    text-align: center;
    font-weight: 600;
    display: flex;
    justify-content: center;
}

.item {
    background: rgba(249, 241, 232, 1);
    padding: 10px 10px;
    width: auto;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    text-align: center;
    min-height: 237px;
    justify-content: center;
    gap: 15px;
}

.item p {
    font-weight: 600;
}

.products-slider img {
    height: 155px;
    object-fit: contain;
    margin-bottom: 10px;
}

.product-slide .slick-slide {
    margin: 0 15px;
    /* spacing between slides */
}



.prdct-category {
    background: rgba(249, 241, 232, 1);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    min-height: 280px;
    padding: 20px;
    overflow: hidden;
}

.prdct-category img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

/* about */
.about-title h3 {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 20px;
}

.about-title p {
    font-weight: 500;
}

.about-title {
    margin-bottom: 60px;
}

.stats-box {
    display: flex;
    gap: 20px;
}

.icon {
    background: rgba(242, 179, 68, 1);
    padding: 10px 10px;
    border-radius: 12px;
}

.status p {
    margin: 0;
}

.status p {
    font-weight: 600;
    font-size: 25px;
}

.status span {
    font-weight: 500;
}

.achievments {
    display: flex;
    gap: 60px;
    margin-bottom: 50px;
}

.status-img img {
    width: 100%;
}

.more-btn a {
    text-decoration: none;
    color: black;
    border: solid 1px rgba(242, 179, 68, 1);
    padding: 10px 24px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.more-btn a i {
    background: rgba(242, 179, 68, 1);
    /* white background */
    color: #000;
    /* black arrow */
    border-radius: 50%;
    /* make it circular */
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.more-btn a:hover {
    background: rgba(242, 179, 68, 1);
    color: #000;
    transition: 0.3s ease;
}

.more-btn a:hover i {
    background: #000;
    color: #fff;
    transition: 0.3s ease;
    transform: translateX(4px);
}


section#about-intro {
    padding: 70px 0px;
}

/* INDUSTRIES WE SERVE */
.Industries {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 30px;
}

#Industries-Serve {
    padding: 80px 0px;
    background: linear-gradient(151deg, rgba(243, 244, 246, 1), rgba(255, 255, 255, 1));
}

.Industries h3 {
    font-weight: 600;
}

.industry-catgry {
    position: relative;
    background: #fff;
    border: solid 1px rgba(242, 179, 68, 0.25);
    box-shadow: 0px 5px 18px rgba(0, 0, 0, 0.02);
    border-radius: 16px;
    padding: 30px;
    z-index: 1;
    transition: transform 0.3s ease;
    min-height: 309px;
}

.industry-catgry:hover {
    transform: translateY(-5px);
    border: solid 1px rgba(242, 179, 68, 1);
    box-shadow: 0px 8px 16px rgb(232, 232, 232);

}

.srvc-image img {
    width: 100%;
}

.industry-catgry:hover img {
    transform: scale(1.05);
    transition: 0.3s ease;
}

.industry-catgry img {
    transition: 0.3s ease;
}

#Industries-Serve {
    position: relative;
    padding: 80px 0;
    /* padding-bottom: 266px; */
}

#Industries-Serve::before {
    content: "";
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    /* height: 300px; */
    background: radial-gradient(circle,
            rgba(242, 179, 68, 0.25) 0%,
            rgba(242, 179, 68, 0) 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}

/* Orange glow between 5th & 6th */
#Industries-Serve::after {
    content: "";
    position: absolute;
    bottom: 41%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 600px;
    height: 300px;
    background: radial-gradient(circle,
            rgba(242, 179, 68, 0.25) 0%,
            rgba(242, 179, 68, 0) 70%);
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
}

.industry-catgry img {
    background: rgba(25, 47, 72, 1);
    padding: 10px 10px;
    border-radius: 12px;
    margin-bottom: 40px;
}

.industry-catgry h5 {
    font-weight: 600;
}

/* WHY CHOOSE */
section#why-choose {
    padding: 80px 0px;
}

.why-content {
    background: rgba(242, 179, 68, 1);
    padding: 41px 53px;
    border-radius: 20px;
    /* 👈 moves section upward */
    position: relative;
    z-index: 2;
    /* ensures it stays above background or overlap */
}


.why-heading {
    font-weight: 600;
    color: #000;
    margin-bottom: 40px;
    display: flex;
    text-align: center;
    justify-content: center;
}

.why-desc {
    color: #333;
    max-width: 600px;
}

.choose-box {
    text-align: center;
    border-radius: 12px;
    padding: 20px;
}

.view-btn a {
    text-decoration: none;
    color: black;
    display: flex;
    justify-content: center;
    margin-top: 100px;
    margin-left: 20px;
    background: rgba(242, 179, 68, 1);
    width: fit-content;
    padding: 21px 34px;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.view-btn a:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 16px rgb(224, 223, 223);
    background: #fce4b7;
}

.icon-bg {
    background: linear-gradient(180deg, #ffe28a, #d7ad3ccc);
    border-radius: 12px;
    padding: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 6px 15px rgba(255, 209, 83, 0.5);
    border: solid 1px white;
    box-shadow: inset 3px 3px 8px rgb(245 239 239 / 76%), inset -3px -3px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(255, 209, 83, 0.5);
    transition: transform 0.3s ease;
}

.icon-bg i {
    font-size: 24px;
    color: #0a2b3b;
}

.icon-bg:hover {
    transform: translateY(-5px);
}


.choose-box h5 {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 17px;
}

.choose-box p {
    margin: 0;
    font-size: 14px;
    color: #111;
    font-weight: 600;
}

.why-img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.img-desc {
    font-weight: 500;
}

.choose {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
}

.ps-line {
    position: relative;
}

.ps-line::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 154px;
    background: rgba(255, 255, 255, 0.32);
    left: 0;
}

.ps-line::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 154px;
    background: rgba(255, 255, 255, 0.32);
    right: 0;
}

.divider-1 {
    height: 2px;
    width: 94%;
    margin: 14px auto 0;
    background: rgba(255, 255, 255, 0.32) !important;
    border: none;
    border-radius: 2px;
}

/* OUR BRANDS */
.brands-hding {
    font-weight: 600;
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
}

#brands {
    padding: 86px 0px;
}

.brand-type {
    text-align: center;
}

.brand-type img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
}

.brand-type img:hover {
    transform: scale(1.05);
}


/* Certification & Compliance */

.Certification-hding {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 70px;
}

.Certification-hding h3 {
    font-weight: 600;
}

#Certification {
    padding: 80px 0px;
}

.Compliance-img {
    width: 100%;
    display: block;
    margin: 0 auto;
    /* centers the image */
    object-fit: contain;
}

.points {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.points>div:last-child {
    flex: 1;
    padding-bottom: 25px;
    background-image: repeating-linear-gradient(to right,
            rgba(0, 0, 0, 0.4) 0,
            rgba(0, 0, 0, 0.4) 2px,
            transparent 4px,
            transparent 8px);
    background-repeat: repeat-x;
    background-position: bottom left;
    background-size: auto 1px;
}


.points:last-child {
    border-bottom: none;
    /* remove line for last item */
}

.points p {
    margin-bottom: 3px;
    font-weight: 600;
    font-size: 18px;
}

.points span {
    font-weight: 500;
    color: rgba(59, 59, 59, 1);
}

/* Ready to Work With Us? */
.newsletter p {
    font-weight: 500;
}

.newsletter {
    padding: 0px 100px;
}

.newsletter-cnt {
    background: rgba(242, 179, 68, 1);
    padding: 32px 35px;
    border-radius: 15px;
    position: relative;
    z-index: 2;
    margin-bottom: -60px;
}

.contact-btn a {
    text-decoration: none;
    color: black;
    background: rgb(255, 253, 249);
    padding: 10px 22px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.contact-btn a:hover {
    background: #000;
    color: #fff;
}

.contact-btn a i {
    background: rgba(242, 179, 68, 1);
    color: #000;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
}

.contact-btn a:hover i {
    background: rgba(242, 179, 68, 1);
    color: #000;
    transform: translateX(5px);
}

.contact-btn a:hover {
    background: #000;
    color: #fff;

}


.contact-btn a:hover i {
    background: rgba(242, 179, 68, 1);
    color: #000;
    transform: translateX(5px);
}

.contact-btn {
    margin-top: 30px;
}


.newsletter-cnt h3 {
    font-weight: 600;
}

footer {
    background-color: #0a2540;
    color: #fff;
    padding: 143px 0 40px;
    margin-top: -60px;
    /* move footer up */
    position: relative;
    z-index: 1;
}


.footer-logo {
    width: 90px;
    margin-bottom: 15px;
}

.footer-about h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.footer-about p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.footer-links h5,
.footer-contact h5 {
    font-weight: 600;
    margin-bottom: 15px;
}

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

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

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.footer-links ul li a:hover {
    color: #f5b544;
}

.footer-contact p {
    font-size: 14px;
    margin-bottom: 6px;
}

.footer-contact a {
    color: #f5b544;
    text-decoration: none;
}

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

.footer-social a {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.09);
    color: #fefefe;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    border: solid 1px rgba(255, 255, 255, 0.46);
}

.footer-social a:hover {
    background: #fff;
    color: #000;
}

.footer-social a:hover {
    color: #f5b544;
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-bottom span {
    color: #f5b544;
}

.footer-bottom a {
    text-decoration: none;
}


.ftr-cnt {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.ftr-cnt h4 {
    margin-top: 25px;
}

/* =========ABOUT PAGE======== */
#hero-about {
    background: url(../images/hero-2.png);
    height: 83vh;
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */

}

.about-content h1 {
    margin-top: 339px;
}

#about {
    padding: 80px 0px;
}

.underline-title {
    position: relative;
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 38px;
}

.underline-title::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 135px;
    height: 2px;
    background: rgba(242, 179, 68, 1);
    border-radius: 2px;
}

.about-hding {
    font-weight: 600;
    margin-bottom: 20px;
}

.about-img-wrap {
    position: relative;
    overflow: hidden;
}

.about-img-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: url(../images/backroundimage.png) no-repeat;
    background-size: contain;
    z-index: -1;
}

.about-image {
    width: 100%;
    animation: floatImage 2s ease-in-out infinite;
}

@keyframes floatImage {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* MISSION VISSION */
.mission-image {
    width: 100%;
    height: 76%;
    object-fit: cover;
    border-radius: 12px;
}

.mv-section {
    background: rgba(242, 179, 68, 0.2);
    padding: 21px 25px;
    border-radius: 12px;
    transition: all 0.4s ease-in-out;
}

.mv-section:hover {
    box-shadow: 0px 6px 16px rgb(209, 206, 206);
    background: rgba(242, 179, 68, 1);
    color: white;
    transform: translateY(-8px);
}

.mv-section:hover p,
.mv-section:hover span {
    color: #fff !important;
    transition: color 0.4s ease-in-out;
}

.mv-section p {
    font-size: 20px;
    font-weight: 600;
}

.mv-section span {
    color: rgba(69, 66, 66, 1);
}

/* .mv-section span:hover {
    color: white;
    transform: translateY(-8px);
} */

.mv-section {
    margin-bottom: 25px;
    /* gap between boxes */
}

.mv-section {
    background: rgba(242, 179, 68, 0.2);
    padding: 21px 25px;
    border-radius: 12px;
}

.mv-section p {
    font-size: 20px;
    font-weight: 600;
}

.mv-section span {
    color: rgba(69, 66, 66, 1);
}

.mission-img-wrap {
    position: relative;
}

.mission-img-wrap {
    height: 100%;
    min-height: 100%;
}

.mv-conent {
    left: 42px;
    position: absolute;
    bottom: 169px;
    color: white;
}

.mv-conent p {
    font-size: 20px;
    font-weight: 600;
}


/* Our Core Values */
#Our-Core-Values {
    padding: 80px 48px;
    background: rgba(25, 47, 72, 1);
    padding-bottom: 100px;
}

.values-hding {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    margin-bottom: 40px;
}

.values-icon {
    background: #1c579a;
    width: fit-content;
    padding: 10px 13px;
    border-radius: 100px;
    margin-bottom: 11px;
}

.core-values {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
}

.value-box {
    background: rgba(38, 61, 87, 1);
    color: white;
    padding: 20px 25px;
    border-radius: 12px;
    flex: 1 1 calc(20% - 24px);
    max-width: calc(20% - 24px);
    transition: 0.4s all ease;
}

.value-box:hover {
    background: linear-gradient(183deg, rgba(38, 61, 87, 1) 0%, rgb(45 99 142) 100%);
    border: solid 1px rgb(200, 198, 198);
    transform: translateY(-8px);
}

.value-box h5 {
    font-size: 18px;
    margin-bottom: 16px;
    font-weight: 600;
}

.value-box p {
    font-size: 15px;
    margin-bottom: 20px;
}

/* .read-btn a{
    color: white;
    text-decoration: none;
   border: solid 1px white;
   border-radius: 100px;
   padding: 6px 15px;
   font-size: 14px;
} */

/* image-animation */
.image-conatiner {
    background: url(../images/animation_img1.png);
    height: 90vh;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    position: relative;
    transition: opacity 1s ease-in-out;
    background-position: center;
    animation: slideShow 10s infinite;

}

#image-animation {
    padding: 80px 0px;
}

.animation-content {
    color: white;
    position: absolute;
    top: 44%;
    left: 5%;
    position: absolute;
}

@keyframes slideShow {
    0% {
        background-image: url('../images/animation_img1.png');
    }

    25% {
        background-image: url('../images/animaton_img2.png');
    }

    50% {
        background-image: url('../images/animation_img3.png');
    }
}

.animation-content p {
    font-size: 25px;
    font-weight: 600;
    background: rgba(205, 205, 205, 0.5);
    width: fit-content;
    padding: 10px 10px;
    border-radius: 12px;
}

.animation-content h1 {
    font-weight: 600;
    line-height: 1.6;
}

/* QUALITY AND POLICY */
#quality-plcy {
    background: rgba(247, 247, 247, 1);
    padding: 70px 0px;
}

.quality-hding {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-bottom: 50px;
}

.quality-hding h3 {
    font-weight: 600;
    margin-bottom: 20px;
}

.policy-content {
    margin-bottom: 26px;
}



.policy-content p {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(25, 47, 72, 1);
}

.policy-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*  Health, Safety, and Environment (HSE) Policies */
#hse-policy {
    padding: 70px 0px;
}

.hse-hding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.hse-hding h3 {
    font-weight: 600;
    margin-bottom: 20px;
}

.hse-img {
    width: 90%;
}

.hse-content p {
    font-size: 20px;
    font-weight: 600;
}

.hse-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hse-policies {
    margin-bottom: 20px;
    color: rgba(25, 47, 72, 1);
    font-weight: 500;
}

.hse-section {
    margin-bottom: 30px;
}

#hse-policy {
    background: linear-gradient(179deg, rgba(255, 255, 255, 1), rgba(255, 242, 218, 1));
    position: relative;
    padding: 70px 0;
}

#hse-policy::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 178px;
    background: linear-gradient(179deg, rgba(255, 242, 218, 1), rgba(255, 242, 218, 1));
    z-index: -1;
}

/* ================PRODUCTS PAGE============== */

#hero-products {
    background: url(../images/products_banner.png);
    height: 83vh;
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */
}

.products-content h1 {
    margin-top: 339px;
}

.product-hding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 0px;
}

#products-services {
    background: linear-gradient(179deg, rgba(255, 255, 255, 1), rgba(255, 247, 234, 1));
}

.product-hding h3 {
    font-weight: 600;
}

.product-hding p {
    font-weight: 500;
}

.category-heading h5 {
    font-weight: 600;
    color: rgba(21, 44, 79, 1);
}

.heading-highlite {
    font-weight: 600;
}

/* Industrial & Commercial Equipment */

#ps-section {
    padding: 80px 0px;
    background: linear-gradient(187deg, rgba(255, 255, 255, 1), rgba(255, 251, 244, 1));
}

#ps-section .col-md-5 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ps-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

#Equipment-Supply {
    padding: 80px 0px;
    background: rgba(25, 47, 72, 1);

}

.equipment-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}

.equipment-content h5 {
    color: white;
}

.equipment-content p {
    color: #fbf3f3;
}

#Marine_Equipment {
    padding: 80px 0px;
    background: rgba(255, 245, 225, 1);
}

.marine-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#fitness-equipment {
    padding: 80px 0px;
    background: linear-gradient(187deg, rgba(255, 255, 255, 1), rgba(255, 251, 244, 1));
}

.fitness-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* why-choose-gulfworld */

#why-choose-gulfworld {
    padding: 60px 0;
}

#why-choose-gulfworld h3 {
    font-weight: 600;
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 60px 0;
}

.why-grid {
    display: block;
    margin-top: 30px;
}

.why-box {
    width: 100%;
    border: 1px solid #d8d8d8;
    border-radius: 14px;
    padding: 12px 16px;
    cursor: pointer;
    transition: 0.3s ease;
    background: #fff;
    margin-bottom: 14px;
}

.why-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.why-box i {
    font-size: 14px;
    transition: 0.3s ease;
}

.why-box.active i {
    transform: rotate(180deg);
}

.why-details {
    display: none;
    padding-top: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.why-box.active .why-details {
    display: block;
}

.why-box p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #1C2E46;
}

.why-box:hover {
    border-color: #46431c;
    background: #f8faff;
}

/* ========SERVICE PAGE=========== */
#hero-service {
    background: url(../images/service.png);
    height: 83vh;
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */
}

.service-content h1 {
    margin-top: 339px;
}

.Operations-hding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
}

#Operations {
    padding: 80px 0px;
}

.Operations-content p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.Operations-content span {
    font-size: 15px;
}

.operations-head {
    padding: 25px 28px 24px 29px;
    background: rgba(245, 245, 245, 1);
    border-radius: 12px;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.fade {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.fade.show {
    opacity: 1;
}

.operations-head img {
    width: 100%;
    margin-bottom: 20px;
}

.operations-box {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 10px;
    border: solid 1px rgba(187, 187, 187, 1);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 25px;
}

.operations-box.active {
    border-color: #194f88;
    /* highlight border */
    background: rgba(25, 79, 136, 0.1);
}

.operations-box p {
    font-weight: 600;
    color: rgba(25, 47, 72, 1);
}

/* Performance Evaluation */
.Performance-hding {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    margin-bottom: 40px;
}

#Performance-Evaluation {
    background: url(../images/background_evaluation.png);
    padding: 96px 0px;
    /* background-attachment: fixed; */
}

.kpis {
    color: white;
}

.kpis p {
    font-size: 20px;
    font-weight: 500;
}

.Performance-content {
    background: linear-gradient(187deg, rgba(253, 251, 251, 1), rgba(255, 249, 238, 1));
    padding: 29px 24px;
    border-radius: 12px;
    min-height: 195px;
}

.Performance-content p {
    font-weight: 600;
}

/* operations-overview*/
.employee-operations p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.employee-operations {
    border: solid 1px rgba(242, 179, 68, 1);
    border-radius: 12px;
    padding: 19px 27px;
    min-height: 276px;
    transition: all 0.3s ease;
}

.employee-operations:hover {
    border-color: #e6a53d;
    background: rgba(242, 179, 68, 0.08);
    transform: translateY(-6px);
    box-shadow: 0px 8px 18px rgba(0, 0, 0, 0.12);

}

#operations-overview {
    padding: 70px 0px;
}

.employe-perfomence {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  
}

.employe-perfomence h4 {
    font-weight: 600;
    margin-bottom: 20px;
    font-size: 22px;
    color: #373a48;

}

.employe-perfomence p {
    line-height: 25px;
    color: #2b2b2b;
}


.overview {
    background: rgba(249, 241, 232, 1);
    border: solid 1px rgba(216, 209, 209, 1);
    border-radius: 12px;
    padding: 27px 13px;
    margin-bottom: 20px;
      transition: all 0.35s ease;
}
.overview:hover {
    transform: translateY(-10px);
    box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.12);
}

.overview img {
    width: 100%;
}


/* ======CONTACT====== */
#contact-banner {
    background: linear-gradient(182deg, rgba(25, 47, 72, 1), rgba(60, 114, 174, 1));
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.info-item {
    display: flex;
    align-items: center;
}

.info-item i {
    background: linear-gradient(176deg, rgba(242, 179, 68, 1), rgb(192 142 53));
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}

.info-item a {
    color: #060606;
    text-decoration: none;
}


.Contact-content {
    color: white;
}

.Contact-content h3 {
    font-weight: 600;
}

.contact-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -150px;
    /* Lifts over banner */
    padding-bottom: 145px;
}

.contact-wrapper {
    width: 85%;
    background: #fff;
    border-radius: 12px;
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}

/* LEFT CARD */
.contact-info-card {
    background: #fffaf0;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.contact-info-card h3 {
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}



.map-box img {
    width: 100%;
    border-radius: 10px;
    margin-top: 15px;
}

/* FORM */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 1.5px solid #c7c7c7;
    font-size: 14px;
    margin-bottom: 28px;
    outline: none;
}

.contact-form textarea {
    height: 80px;
    resize: none;
}

.send-btn {
    background: #F1C77C;
    padding: 14px 35px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.send-btn:hover {
    background: #e3b769;
    box-shadow: 0px 6px 16px rgb(226, 226, 226);
    transform: translateY(-2px);
}

.info-item p {
    margin-bottom: 20px;

}


/* ======FIXED ICONS======= */

.fixed-icons {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

/* WhatsApp Button */
.whatsapp-icon,
.call-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 28px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* WhatsApp Color */
.whatsapp-icon {
    background: rgba(242, 179, 68, 1);
}

/* Call Button Color */
.call-icon {
    background: rgb(58 94 135);
}

/* Hover Animation */
.whatsapp-icon:hover,
.call-icon:hover {
    transform: scale(1.12);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25);
}


/*===============CATLOGUE PAGE================== */


#hero-catlogue {
    background: url(../images/catlogue_banner.png);
    height: 83vh;
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    padding: 0;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-attachment: fixed; */
}

.catlogue-content h1 {
    margin-top: 339px;
}

.catlogue-page {
    background: #f5f5f5;

}

/* LEFT SIDE */
.cat-head {
    padding: 15px 20px;
    border: none;
    border-bottom: 1px solid #d5d5d5;
    cursor: pointer;
    transition: 0.3s ease;
    background: #fff;
    color: #333;
}

.cat-head:hover,
.category-list .list-group-item:hover {
    background: #0a2e55;
    color: white;
    padding-left: 30px;
}

.category-list .list-group-item {
    padding: 15px 20px;
    border: none;
    border-bottom: 1px solid #d5d5d5;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 16px;
    background: #fff;
    color: #333;
}

.category-list .list-group-item:hover {
    background: #0a2e55;
    color: white;
    padding-left: 30px;
}

.category-list li:hover a {
    color: #ffffff !important;
    /* hover → black */
}

.category-list li.active a {
    color: #fff !important;
    /* active → white */
}

.category-list li a {
    color: #000;
    /* normal → black */
    text-decoration: none;
    transition: 0.3s;
}

.category-list li:hover a {
    color: #000;
    /* hover → black */
}

.category-list li.active {
    background: #012a55;
    /* or your blue shade */
}

/* RIGHT SIDE PRODUCT CARD */
.product-card {
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    padding: 25px;
    border-radius: 12px;
    transition: 0.3s ease;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    min-height: 364px;
}

.product-card:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.product-card .product-img {
    height: 160px;
    /* FIXED HEIGHT */
    object-fit: contain;
    width: 100%;
    display: block;
    margin: 0 auto 15px;
}

.product-card h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.product-card p {
    font-size: 15px;
    color: #555;
}

.category-sticky {
    position: sticky;
    top: 140px;
    /* this is correct for your layout */
    z-index: 5;
}

.product-section .row {
    align-items: flex-start;
}

.category-list .list-group-item.active {
    background: #0a2e55 !important;
    color: white !important;
    padding-left: 30px;
    font-weight: 600;
}