@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Note: Kaushan Script and Urbanist were imported in the old CSS but never
   actually used anywhere on the site (every heading rendered in the body

   
   font). Removed to cut an unnecessary font request. */



* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    overflow-x: hidden;

}



:root {

    --main-color: #3368b8;

    --main-color-hover: #1e385f;



    --main2-color: #727272;



    --dark-text: #333;

    --dark-text-hover: #777;



    --light-color: #efefef;

    /* ============================================================
       TYPE SCALE — single source of truth for every heading.
       Every page now uses these instead of one-off font-size /
       font-weight rules, or Bootstrap's .display-* utilities.
       ============================================================ */
    --h1-size: 2.75rem;
    --h1-weight: 800;
    --h2-size: 2.25rem;
    --h2-weight: 700;
    --h3-size: 1.5rem;
    --h3-weight: 600;
    --h4-size: 1.25rem;
    --h4-weight: 600;
    --h5-size: 1.05rem;
    --h5-weight: 600;
    --h6-size: 0.95rem;
    --h6-weight: 600;
    --heading-line-height: 1.3;
}

/* ============================================================
   BASE HEADINGS
   Previously the site had no global h1-h6 rules at all, so every
   section defined its own one-off size/weight, and the same class
   name (e.g. .section-title) was silently redefined per page.
   These base rules make every heading consistent by default;
   pages only need to override colour/spacing when a section truly
   needs it, not font-size or font-weight.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    line-height: var(--heading-line-height);
    margin: 0 0 0.6em;
    /* Deliberately no color here — headings should inherit colour from
       context (e.g. .text-white / .text-light containers on dark
       backgrounds) exactly as they did before this rule existed.
       Only font-size/weight were inconsistent; colour wasn't the bug. */
}

h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); }
h5 { font-size: var(--h5-size); font-weight: var(--h5-weight); }
h6 { font-size: var(--h6-size); font-weight: var(--h6-weight); }

/* Canonical "section title" used above every content section site-wide.
   Replaces three separate page-specific redefinitions of .section-title
   that used to give three different sizes/weights/colours for the exact
   same class name. Add .inverse only when the section sits on a dark /
   image background and needs white text. */
.section-title {
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    color: var(--main-color);
    text-align: center;
    margin-bottom: 15px;
}

.section-title.inverse {
    color: #fff;
}

.section-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: var(--dark-text-hover);
}

@media (max-width: 768px) {
    :root {
        --h1-size: 2rem;
        --h2-size: 1.7rem;
        --h3-size: 1.3rem;
    }
}

body {

    font-family: 'Montserrat', sans-serif;

    background-color: var(--main-bg);

    min-height: 100vh;

    width: 100%;

    overflow-x: hidden;



    display: flex;

    align-items: center;

    flex-direction: column;

    justify-content: space-between;

}





header,

main,

footer {

    width: 100%;

}



/* Basics */



.bg-light {

    background-color: #f5f9fd !important;

}



.text-main {

    color: var(--main-color);

}



.text-main2 {

    color: var(--main-color-hover);

}



.bg-main2 {

    background: var(--main-color);

}



.btn-main {

    background-color: var(--main-color);

}



.btn-main:hover {

    background-color: var(--main-color-hover);

}



.text-justify {

    text-align: justify;

}



a {

    text-decoration: none;

    color: var(--dark-text);

    transition: all 0.3s ease-in-out;

}



.stars {

    color: #fbbf24;

    font-size: 1.2rem;

    margin-bottom: 20px;

}



.topbar {

    height: 50px;

}



.topnav {

    height: 60px;

}



.top-header-phone small.fa {

    transition: all 0.4s ease-in-out;

}



.top-header-phone:hover {

    background-image: linear-gradient(135deg, var(--main-color), var(--main-color-hover)) !important;

    color: var(--light-color) !important;

}



.top-header-phone:hover small.fa {

    transform: rotate(360deg) !important;

    color: var(--light-color) !important;

}



a:hover {

    color: var(--dark-text-hover);

}



/* navigation bar */

nav .logo {

    width: 120px;

}



.btn {

    font-weight: 500;

    transition: .5s;

}



.btn-sm-square {

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    font-weight: normal;

}



.navbar {

    /* backdrop-filter: blur(15px); */

    /* border-bottom: 1px solid #eaf1fa99; */

}



.navbar-light .navbar-nav .nav-link {

    margin-right: 40px;

    padding: 25px 0;

    color: #FFFFFF;

    font-size: 13px;

    font-weight: 600 !important;

    text-transform: uppercase;

    outline: none;

}



.dropdown-item {

    color: #787878;

    padding: 9px 14px;

    text-transform: capitalize;

    font-size: 14px;

    border-radius: 6px;

    /* border-left: 4px solid transparent; */

    transition: all 0.3s ease-in-out;

}



.dropdown-item:hover {

    background-color: #f3f8ff;

    /* border-color: var(--main-color); */

}



.navbar-light .navbar-nav .nav-link:hover,

.navbar-light .navbar-nav .nav-link.active {

    color: var(--main-color);

}



@media (max-width: 991.98px) {

    .navbar-light .navbar-nav .nav-link {

        margin-right: 0;

        padding: 10px 0;

    }



    .navbar-light .navbar-nav {

        /* border-top: 1px solid #EEEEEE; */

        background-color: #ffffffee;

        backdrop-filter: blur(14px);

    }

}



.navbar-light .navbar-brand,

.navbar-light a.btn {

    height: 75px;

}



.navbar-light .navbar-nav .nav-link {

    color: var(--main2-color);

    letter-spacing: 0.5px;

    font-weight: 500;

}



.navbar-light.sticky-top {

    top: -100px;

    transition: .5s;

}



@media (min-width: 992px) {



    .navbar .dropdown-menu {

        display: none;

        border: none;

        border-radius: 0 0 5px 5px;

        padding: 6px;

        margin-top: -5px !important;

    }



    .navbar .dropdown:hover>.dropdown-menu {

        display: block;

    }



    .navbar .dropdown:hover>.dropdown-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);

    }

}



.header-brochure-btn {

    height: 36px;

    padding: 0 16px !important;

    border-radius: 30px;

    background: linear-gradient(135deg,

            var(--main-color),

            var(--main-color-hover));

    color: #fff !important;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    transition: .3s ease;

    box-shadow: 0 8px 20px rgba(51, 104, 184, 0.18);

}



.header-brochure-btn:hover {

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 12px 24px rgba(51, 104, 184, 0.24);

}



.header-brochure-btn i {

    font-size: 15px;

}



@media(max-width:1192px) {



    .navbar-light .navbar-nav .nav-link {

        margin-right: 34px;

    }

}



@media(max-width:991px) {



    .header-brochure-btn {

        width: 100%;

        justify-content: center;

        height: 48px;

    }

}



/* hero design */



.main {

    display: flex-col;

    width: 100%;

    text-align: center;

    padding: 10px;

}



.carousel {

    position: relative;

    overflow: hidden;

    /* border-radius: 1rem; */

    max-width: 100%;

    height: calc(100vh - 50px - 60px);

}



.slide {

    position: absolute;

    inset: 0;

    background-color: var(--main-color);

    background-size: cover;

    background-position: center;

    opacity: 0;

    transform: translateX(100%);

    transition: all var(--transition-duration) ease-in-out;

    display: flex;

    align-items: flex-end;

}



.slide.active {

    opacity: 1;

    transform: translateX(0);

    z-index: 1;

}



.slide.exit-left {

    transform: translateX(-100%);

}



.slide.exit-right {

    transform: translateX(100%);

}



.overlay {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at center, rgba(11, 13, 15, 0.1), rgba(0, 0, 0, 0.7)),

        linear-gradient(to top, rgba(1, 9, 56, 0.7), transparent);

}



.slide-content {

    padding: 2rem;

    z-index: 2;

    max-width: 700px;

    margin-bottom: 30px;

}



.slide-content h2 {

    font-size: 2rem;

    margin-bottom: 0.5rem;

}



.slide-content p {

    font-size: 1rem;

    color: #ddd;

    margin-bottom: 1rem;

}



.controls {

    position: absolute;

    bottom: 1rem;

    left: 0;

    right: 0;

    padding: 0 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 10;

}



.dots {

    display: flex;

    gap: 0.5rem;

}



.dot {

    width: 12px;

    height: 12px;

    border-radius: 9999px;

    background-color: rgba(255, 255, 255, 0.5);

    cursor: pointer;

    transition: all 0.3s ease;

}



.dot.active {

    width: 32px;

    background-color: var(--main-color);

}



.arrows {

    display: flex;

    gap: 0.5rem;

}



.arrow-btn {

    padding: 0.5rem 0.8rem;

    border-radius: 8px;

    border: 0.1px solid rgba(255, 255, 255, 0.2);

    background-color: rgba(255, 255, 255, 0.01);

    color: white;

    font-size: 0.8rem;

    cursor: pointer;

    transition: background 0.3s;

}



.arrow-btn:hover {

    background-color: rgba(255, 255, 255, 0.1);

}



.hero-title {

    font-size: clamp(30px, 2.2vw, 40px) !important;

    line-height: 1.3;

    letter-spacing: .4px;

}

/* Homepage banner heading only — matched to the geometric, heavy-weight
   look of the PRISMOLINE logo wordmark. Scoped to #carousel so it doesn't
   touch the shared .hero-title used on about.php. */
#carousel .hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.5;
}



.hero-badge {

    display: inline-block;

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(6px);

    padding: 10px 18px;

    border-radius: 6px;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);

}



.hero-subtitle {

    font-size: 14px !important;

    color: #fff;

    letter-spacing: .5px;

}



.animate-title,

.animate-subtitle {

    opacity: 0;

    transform: translateY(30px);

}



@keyframes heroFadeUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.animate-title {

    animation: heroFadeUp 0.9s ease forwards;

}



.animate-subtitle {

    animation: heroFadeUp 0.9s ease forwards;

    animation-delay: .4s;

}



.hero-cta .btn {

    border-radius: 50px;

    padding: 12px 24px;

    font-weight: 600;

    letter-spacing: .3px;

    font-size: clamp(0.9rem, 0.6rem + 0.6vw, 1.15rem);

    /* responsive font */

    transition: all .35s ease;

    position: relative;

    overflow: hidden;

}



.cta-btn-primary {

    background: linear-gradient(135deg, #1e385f, #3368b8);

    border: none;

    color: #fff;

    box-shadow: 0 8px 20px #3368b81c;

    animation: pulseGlow 3s infinite;

}



.cta-btn-primary:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 28px #3368b862;

}



.cta-btn-secondary {

    border: 2px solid var(--main-color);

    color: var(--main-color);

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(6px);

}



.cta-btn-secondary:hover {

    background: var(--main-color);

    border-color: var(--main-color);

    color: #fff;

    transform: translateY(-4px);

}



@keyframes pulseGlow {

    0% {

        box-shadow: 0 0 0 0 #3368b886;

    }



    70% {

        box-shadow: 0 0 0 12px rgba(255, 153, 51, 0);

    }



    100% {

        box-shadow: 0 0 0 0 rgba(255, 153, 51, 0);

    }

}



@media (max-width: 1368px) {

    .slide-content {

        padding: 1.6rem;

        max-width: 550px;

    }

}



@media (max-width: 992px) {

    .topbar {

        height: 0px;

    }



    .topnav {

        height: 70px;

    }



    .carousel {

        height: calc(100vh - 70px);

    }

}



@media (max-width: 768px) {

    .slide-content {

        padding: 1.5rem;

    }



    .slide-content h1 {

        font-size: 1.5rem;

    }



    .slide-content p {

        font-size: 0.9rem;

    }

}



@media (max-width: 480px) {



    .slide-content h1 {

        font-size: 1.2rem;

    }



    .slide-content p {

        display: none;

    }



    .hero-cta .btn {

        font-size: 12px;

        padding: 10px 15px;

        font-weight: 500;

    }

}



@media (max-width: 400px) {

    .hero-title {

        line-height: 1.2;

        letter-spacing: .4px;

    }

}



.index-about-section {

    position: relative;

    padding: 100px 0;

    overflow: hidden;

    min-height: 50vh;

    background: linear-gradient(135deg, #0b1220, #14233a, #1e385f);



    .about-bg-shape {

        position: absolute;

        border-radius: 50%;

        filter: blur(120px);

        opacity: 0.25;

    }



    .about-bg-shape.one {

        width: 350px;

        height: 350px;

        background: var(--main-color);

        top: -120px;

        left: -120px;

    }



    .about-bg-shape.two {

        width: 400px;

        height: 400px;

        background: #6ea8ff;

        bottom: -150px;

        right: -150px;

    }



    .about-bg {

        position: absolute;

        top: -500px;

        height: 100%;



        img {

            height: 100%;

            width: 400%;

            opacity: 0.1;

        }

    }



    .about-image {

        position: relative;

        border-radius: 24px;

        overflow: hidden;

        /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); */

        transform: translateY(0);

        transition: 0.4s ease;

        transform: rotate(270deg);

    }



    /* .about-image:hover {

        transform: translateY(-8px);

    } */



    /* .about-image img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        display: block;

    } */



    .about-content {

        position: relative;

        color: #fff;

    }



    .about-tag {

        display: inline-block;

        padding: 6px 14px;

        font-size: 13px;

        letter-spacing: 1px;

        text-transform: uppercase;

        background: rgba(255, 255, 255, 0.08);

        border: 1px solid rgba(255, 255, 255, 0.15);

        border-radius: 30px;

        margin-bottom: 15px;

    }



    .about-content h2 {

        font-size: 2.4rem;

        font-weight: 700;

        margin-bottom: 20px;

        line-height: 1.3;

    }



    .about-content p {

        color: rgba(255, 255, 255, 0.78);

        line-height: 1.8;

        margin-bottom: 15px;

        text-align: justify;

    }



    .about-actions {

        margin-top: 25px;

        display: flex;

        gap: 15px;

        flex-wrap: wrap;

    }



    .btn-primary-custom {

        background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

        color: #fff;

        padding: 12px 22px;

        border-radius: 30px;

        text-decoration: none;

        font-weight: 500;

        transition: 0.3s ease;

        /* box-shadow: 0 10px 25px rgba(51, 104, 184, 0.35); */

    }



    .btn-primary-custom:hover {

        transform: translateY(-3px);

        color: #fff;

    }



    .btn-outline-custom {

        border: 1px solid rgba(255, 255, 255, 0.25);

        color: #fff;

        padding: 12px 22px;

        border-radius: 30px;

        text-decoration: none;

        transition: 0.3s ease;

    }



    .btn-outline-custom:hover {

        background: rgba(255, 255, 255, 0.1);

        transform: translateY(-3px);

    }



    .fade-up {

        opacity: 0;

        transform: translateY(40px);

        transition: all 0.8s ease;

    }



    .fade-up.show {

        opacity: 1;

        transform: translateY(0);

    }

}



@media (max-width: 1368px) {

    .index-about-section {

        .about-bg {

            top: -600px;



            img {

                width: 700%;

            }

        }



    }

}



@media (max-width: 1192px) {

    .index-about-section {

        .about-bg {

            top: -500px;



            img {

                width: 800%;

            }

        }



    }

}



@media (max-width: 992px) {

    .index-about-section {

        .about-bg {

            top: -400px;



            img {

                width: 900%;

            }

        }



    }

}



@media (max-width: 768px) {

    .index-about-section {

        padding: 70px 0;



        .about-bg {

            top: -500px;



            img {

                width: 1000%;

            }

        }



    }



    .about-content h2 {

        font-size: 1.8rem;

    }

}



@media (max-width: 576px) {

    .index-about-section {

        .about-bg {

            top: -600px;



            img {

                width: 2000%;

            }

        }



    }

}



/* our-vison */



.our-vision {

    position: relative;

    min-height: 75vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    isolation: isolate;



    background:

        linear-gradient(to bottom,

            #0c1625 0%,

            #12233d 40%,

            #1e385f 100%);

}



.our-vision img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.18;

    z-index: -4;

    filter: grayscale(20%);

}



.our-vision::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;



    background:

        radial-gradient(circle at top,

            rgba(255, 255, 255, 0.06),

            transparent 35%),



        linear-gradient(to bottom,

            rgba(5, 10, 18, 0.65),

            rgba(5, 10, 18, 0.9));

}



section.shadow.border-light {

    position: relative;

    overflow: hidden;

    background:

        linear-gradient(135deg,

            #0d1726 0%,

            #16263d 50%,

            #1e385f 100%);

}



.our-vision {

    position: relative;

    min-height: 60vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    isolation: isolate;

}



.our-vision img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0.12;

    z-index: -3;

    filter: grayscale(20%);

}



.our-vision::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background: linear-gradient(90deg, var(--main-color), var(--main-color-hover));

}



.our-vision .container {

    position: relative;

    z-index: 5;

}



.vision-box {

    position: relative;

    border-radius: 26px;

    padding: 3rem;

    background:

        linear-gradient(135deg,

            rgba(255, 255, 255, 0.08),

            rgba(255, 255, 255, 0.04));

    backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: 0.4s ease;

}



.vision-box:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);

}



.our-vision h2 {

    color: #fff;

    font-weight: 700;

    letter-spacing: 1px;

}



.our-vision p {

    color: rgba(255, 255, 255, 0.82);

    line-height: 1.9;

    font-weight: 300;

    text-align: justify;

}



.btn-accent {

    background: linear-gradient(135deg,

            var(--main-color),

            var(--main-color-hover));

    border: none;

    color: #fff;

    transition: 0.35s ease;

}



.btn-accent:hover {

    transform: translateY(-2px);

    color: #fff;

    box-shadow: 0 10px 25px rgba(51, 104, 184, 0.3);

}



.fade-up {

    opacity: 0;

    transform: translateY(40px);

    transition: all 0.9s ease;

}



.fade-up.show {

    opacity: 1;

    transform: translateY(0);

}



@media (max-width: 768px) {

    .our-vision {

        min-height: auto;

        padding: 5rem 0;

    }



    .vision-box {

        padding: 2rem;

        border-radius: 22px;

    }



    .our-vision h2 {

        font-size: 2rem;

    }



    .our-vision p {

        font-size: 0.96rem;

        line-height: 1.8;

    }

}



/* what we do section */



.what-we-do .card {

    transition: all 0.4s ease;

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

}



.what-we-do .card:hover {

    transform: translateY(-10px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

    background-color: #fff;

}



.what-we-do .card:hover .circle {

    background-color: var(--main-color) !important;

    box-shadow: 0 0 15px #3368b866;

    transform: scale(1.1);

}



.what-we-do .card .circle {

    transition: all 0.4s ease;

}



.what-we-do .card:hover .circle i {

    color: #fff !important;

}



.what-we-do .card h5 {

    transition: color 0.3s ease;

}



.what-we-do .card:hover h5 {

    color: var(--main-color);

}



.what-we-do .row p {

    text-align: justify;

}



.what-we-do .card p {

    transition: color 0.3s ease;

}



.what-we-do .card:hover p {

    color: #555;

}





/* why work with us section */



.why-work-with-us .why-card {

    transition: all 0.4s ease;

    cursor: pointer;

    position: relative;

    overflow: hidden;

}



.why-work-with-us .why-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    opacity: 0;

    transition: opacity 0.4s ease;

    z-index: 0;

}



.why-work-with-us .why-card:hover::before {

    opacity: 1;

}



.why-work-with-us .why-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);

    color: #fff;

}



.why-work-with-us .why-card * {

    position: relative;

    z-index: 1;

}



.why-work-with-us .why-card h5,

.why-work-with-us .why-card i {

    color: var(--main-color-hover) !important;

}



.why-work-with-us .why-card p {

    color: var(--dark-text-hover) !important;

}



.why-work-with-us .row p {

    text-align: justify;

}



.why-work-with-us .why-card:hover p,

.why-work-with-us .why-card:hover h5,

.why-work-with-us .why-card:hover i {

    color: #fff !important;

}



.icon-circle {

    width: 70px;

    height: 70px;

    background-color: var(--main-color-light, #e9ecef);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

}



.why-card:hover .icon-circle {

    background-color: rgba(255, 255, 255, 0.2);

    transform: scale(1.1);

}



.social-icons {

    a:hover {

        background-color: var(--main-color-hover) !important;

        color: var(--light-color) !important;

    }

}



/* statistics section */



.statistics-counter {

    position: relative;

    background: linear-gradient(135deg, #1c2d4a, #24549c);

    border-radius: 24px;

    overflow: hidden;

}



.statistics-counter::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);

    background-size: 50px 50px;

    z-index: 1;

    animation: moveGrid 20s linear infinite;

}



.statistics-counter .container {

    position: relative;

    z-index: 2;

}



.stats-box {

    border-radius: 18px;

    padding: 2rem 1.5rem;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    transition: all 0.35s ease;

}



.stats-box:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);

}



.icon-glow {

    color: #fff;

    opacity: 0.9;

    margin-bottom: 10px;

}



.counting {

    font-size: 2.2rem;

    font-weight: 700;

    color: #fff;

    letter-spacing: 1px;

}



.stats-box h5 {

    font-size: 0.9rem;

    letter-spacing: 1px;

    opacity: 0.85;

}





@media (max-width: 768px) {

    .counting {

        font-size: 1.8rem;

    }

}



/* testimonial section */



section.testimonial {

    display: grid;

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

    width: 100%;

    margin: 0 auto;

    gap: 1rem;

}



@media screen and (min-width: 61.25rem) {

    section.testimonial {

        column-gap: 2rem;

    }

}



section.testimonial h2 {

    grid-column: span 12;

    text-transform: capitalize;

    margin-bottom: 2rem;

}



@media screen and (min-width: 61.25rem) {

    section.testimonial h2 {

        margin-bottom: 4rem;

    }

}



section.testimonial .cards {

    grid-column: span 12;

    display: grid;

    gap: 1.2rem;

}



@media screen and (min-width: 61.25rem) {

    section.testimonial .cards {

        grid-column: span 5;

    }

}



section.testimonial .cards .card {

    cursor: pointer;

    padding: 2em;

    border-radius: 1rem;

    display: grid;

    grid-template-columns: auto 1fr;

    column-gap: 1rem;

    align-items: center;

    transition: 0.3s;

    position: relative;

    border: 0.094rem solid transparent;

}



section.testimonial .cards .card img {

    display: block;

    width: 3.35rem;

    height: 3.35rem;

    border-radius: 50%;

    filter: grayscale(1);

    transition: 0.5s;

}



section.testimonial .cards .card>div h3 {

    text-transform: capitalize;

    font-size: 1.025rem;

}



section.testimonial .cards .card>div p {

    text-transform: capitalize;

    color: #767676;

    font-size: 0.9rem;

}



section.testimonial .cards .card.active {

    background: #fff;

    border: 0.094rem solid #0f172a14;

}



section.testimonial .cards .card.active .gradient {

    background-image: linear-gradient(to right, #4755690a, var(--main-color), var(--main-color-hover), #4755690a);

    width: 50%;

    height: 0.094rem;

    position: absolute;

    bottom: -0.063rem;

    left: 50%;

    transform: translateX(-50%);

    box-shadow: 0px 0.125rem 0.75rem #4343c84d;

    content: "";

}



section.testimonial .cards .card.active img {

    filter: grayscale(0);

}



section.testimonial .content {

    grid-column: span 12;

    position: relative;

    width: 100%;

    margin-top: 2rem;

    height: auto;

    overflow: hidden;

}



@media screen and (min-width: 61.25rem) {

    section.testimonial .content {

        grid-column: span 7;

        margin-top: 0;

        height: auto;

    }

}



section.testimonial .content .contentBox {

    display: none;

    position: relative;

    width: 100%;

    height: auto;

    flex-direction: column;

    align-items: start;

    justify-content: flex-start;

}



@media screen and (min-width: 61.25rem) {

    section.testimonial .content .contentBox {

        display: flex;

        position: absolute;

        width: 100%;

        height: 100%;

        align-items: center;

        justify-content: center;

    }



    section.testimonial .content .contentBox:not(.active) {

        opacity: 0;

        pointer-events: none;

    }

}



section.testimonial .content .contentBox .text {

    padding-bottom: 2rem;

}



@media screen and (min-width: 61.25rem) {

    section.testimonial .content .contentBox .text {

        padding-bottom: 0;

    }

}



section.testimonial .content .contentBox h2.main-line,

section.testimonial .content .contentBox p,

section.testimonial .content .contentBox span {

    opacity: 0;

    transition: 0.5s;

}



section.testimonial .content .contentBox p {

    margin-top: 1.25rem;

    font-size: 15px;

    text-align: justify;

    color: #777;

}



section.testimonial .content .contentBox span {

    display: inline-block;

    margin-top: 0.625rem;

}



section.testimonial .content .contentBox span svg {

    width: 1.25rem;

    color: #eca633;

}



section.testimonial .content .contentBox.active {

    display: flex;

}



section.testimonial .content .contentBox.active h2.main-line {

    opacity: 1;

    font-weight: 500;

    /* font-size: 24px; */

    transition-delay: 0.5s;

}



section.testimonial .content .contentBox.active span {

    opacity: 1;

    transition-delay: 0.7s;

}



section.testimonial .content .contentBox.active p {

    opacity: 1;

    transition-delay: 0.9s;

}



/* brouchure section */



.brochure-section {

    background: linear-gradient(135deg,

            var(--main-color-hover),

            var(--main-color));

    position: relative;

    overflow: hidden;

}



.brochure-section::before {

    content: '';

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    top: -180px;

    right: -120px;

}



.brochure-section::after {

    content: '';

    position: absolute;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    bottom: -120px;

    left: -80px;

}



.brochure-badge {

    display: inline-block;

    padding: 10px 18px;

    background: rgba(255, 255, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.18);

    color: #fff;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .5px;

    text-transform: uppercase;

    backdrop-filter: blur(10px);

}



.brochure-title {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    line-height: 1.2;

    color: #fff;

    margin-bottom: 20px;

    max-width: 650px;

}



.brochure-text {

    color: rgba(255, 255, 255, 0.82);

    font-size: 1.05rem;

    line-height: 1.8;

    margin-bottom: 28px;

    max-width: 600px;

}



.brochure-input {

    height: 58px;

    border: none;

    border-radius: 14px;

    padding: 0 18px;

    font-size: 15px;

    color: #ccc !important;

    box-shadow: none !important;

}



.brochure-input::placeholder {

    color: #cccccc90;

}



.brochure-input:focus {

    border: 2px solid var(--main-color);

}



.brochure-btn {

    background: rgb(255, 174, 0);

    color: #fff;

    border: 1px solid #dddddd50;

    height: 58px;

    padding: 0 32px;

    border-radius: 14px;

    font-size: 16px;

    font-weight: 600;

    transition: all .3s ease;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);

}



.brochure-btn:hover {

    color: #fff;

    border: 1px solid #dddddd50 !important;

    transform: translateY(-3px);

}



.brochure-image-wrapper {

    position: relative;

    display: inline-block;

}



.brochure-image-wrapper::before {

    content: '';

    position: absolute;

    inset: 20px;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 30px;

    z-index: 0;

    transform: rotate(-6deg);

}



.brochure-image {

    position: relative;

    z-index: 2;

    max-height: 560px;

    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.25));

    transition: transform .4s ease;

}



.brochure-image:hover {

    transform: translateY(-8px);

}



@media(max-width: 991px) {



    .brochure-section {

        text-align: center;

    }



    .brochure-title,

    .brochure-text {

        margin-left: auto;

        margin-right: auto;

    }



    .brochure-btn {

        width: 100%;

    }



    .brochure-image {

        max-height: 380px;

    }

}



@media(max-width: 576px) {



    .brochure-section {

        padding: 70px 0;

    }



    .brochure-title {

        font-size: 2rem;

    }



    .brochure-text {

        font-size: .97rem;

        line-height: 1.7;

    }



    .brochure-input,

    .brochure-btn {

        height: 54px;

    }

}



/* client section */



.clients-section {

    overflow: hidden;



    .logo-slider {

        overflow: hidden;

        width: 100%;

        position: relative;

    }



    .logos-track {

        display: flex;

        align-items: center;

        gap: 3rem;

        animation: scroll 45s linear infinite;

        width: max-content;

    }



    .logo-slider:hover .logos-track {

        animation-play-state: paused;

    }



    .logo-card {

        flex: 0 0 auto;

        text-align: center;

        min-width: 200px !important;

        transition: all 0.4s ease;

    }



    .logo-card img {

        max-height: 80px;

        opacity: 0.8;

        transition: all 0.3s ease;

    }



    .logo-card:hover img {

        filter: grayscale(0%) brightness(1);

        opacity: 1;

        transform: scale(1.2);

    }



    .logo-name {

        margin-top: 0.5rem;

        font-size: 0.85rem;

        color: #555;

        opacity: 0.8;

        transition: color 0.3s ease;

    }



    .logo-card:hover .logo-name {

        color: var(--main-color);

        opacity: 1;

    }



    @keyframes scroll {

        0% {

            transform: translateX(0);

        }



        100% {

            transform: translateX(-50%);

        }

    }

}



@keyframes scroll {

    0% {

        transform: translateX(0);

    }



    100% {

        transform: translateX(-50%);

    }

}



@keyframes slide {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(-100%);

    }

}



/* certificate section */



.certificate-section {

    padding: 40px 0;

}



.certificate-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    transition: transform 0.4s ease, box-shadow 0.4s ease;

    height: 100%;

    display: flex;

    flex-direction: column;

}



.certificate-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);

}



.certificate-image-wrapper {

    position: relative;

    width: 100%;

    aspect-ratio: 1/1.414;

    overflow: hidden;

    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

}



.certificate-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}



.certificate-card:hover .certificate-image {

    transform: scale(1.05);

}



.certificate-info {

    padding: 25px;

    text-align: center;

}



.certificate-title {

    font-size: 20px;

    font-weight: 700;

    color: var(--main-color-hover);

    margin-bottom: 8px;

}



.certificate-date {

    color: #718096;

    font-size: 14px;

    font-weight: 500;

}



.section-header {

    text-align: center;

    margin-bottom: 60px;

}



/* .section-title / .section-subtitle: see canonical definition near top
   of file. This section previously redefined both with a different size,
   weight, and colour (white 48px vs the about/team page's blue 36px) —
   removed so every page uses the one shared definition. */

.certificate-description {

    color: #666;

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 18px;

    min-height: 50px;

}



.certificate-scope {

    background: #f8f9fc;

    padding: 16px;

    border-radius: 12px;

}



.certificate-scope h6 {

    font-weight: 700;

    margin-bottom: 8px;

    color: #111;

}



.certificate-scope p {

    margin: 0;

    color: #555;

    line-height: 1.7;

    font-size: 14px;

}



@media(max-width:768px) {



    .certificate-image {

        height: 340px;

    }



    .certificate-title {

        font-size: 1.2rem;

    }

}



/* footer */



footer {

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    padding: 60px 60px 40px;

    margin: auto;

    margin-bottom: 16px;

    max-width: 1368;

    width: 98%;

    border-radius: 15px;



    @media (max-width: 1192px) {

        margin-bottom: 10px;

    }



    @media (max-width: 780px) {

        margin-bottom: 8px;

    }



    @media (max-width: 576px) {

        margin-bottom: 5px;

        padding: 50px 10px 30px;

    }



    .footer-container {

        /* opacity: 0.95; */



        .footer-section {

            h3 {

                letter-spacing: 0.6px;

                color: var(--light-color);

                font-weight: 700;

                font-size: 14px;

                margin-bottom: 30px;

            }



            ul {

                font-weight: 300;

                list-style: none;



                li {

                    margin-bottom: 8px;

                    cursor: pointer;



                }



                li a {

                    color: var(--light-color) !important;

                }



                li a:hover {

                    color: #fff !important;

                    text-decoration: underline;

                }

            }



            p {

                strong {

                    font-weight: 600;

                    font-size: 16px;

                    letter-spacing: 0.4px;

                }



                font-size: 14px;

                color: var(--light-color);



                a:hover {

                    color: #fff !important;

                    text-decoration: underline;

                }



                @media (max-width: 576px) {

                    font-size: 14px;

                }

            }





        }



        .newsletter {

            display: flex;

            flex-direction: column;

            flex-wrap: wrap;



            h3 {

                margin: 30px 0;

                color: var(--light-color);

                font-weight: 500;

                font-size: 16px;

            }



            form {

                display: flex;

                gap: 10px;

                margin-bottom: 50px;



                @media (max-width: 1150px) {

                    flex-direction: column;

                }



                input[type="email"] {

                    max-width: 224px;

                    width: 100%;

                    font-weight: 300;

                    font-size: 14px;

                    padding: 5px 15px;

                    border: 2px solid #ffffff50;

                    border-radius: 5px;

                    background: transparent;

                    color: var(--light-color);

                    outline: none;

                    height: 51px;



                    @media (max-width: 780px) {

                        max-width: unset;

                    }



                    &::placeholder {

                        color: #dedede90;

                    }

                }



                button {

                    font-weight: 700;

                    font-size: 16px;

                    padding: 0 10px;

                    height: 51px;

                    background-color: var(--light-color);

                    color: var(--main-color);

                    border: none;

                    border-radius: 5px;

                    cursor: pointer;

                    transition: all 0.35s ease-in-out;

                }



                button:hover {

                    background-color: var(--main-color-hover);

                    color: var(--light-color);

                }

            }



            h4 {

                font-weight: 500;

                font-size: 16px;

                margin-bottom: 20px;

            }



        }



    }



    .footer-section {

        opacity: 0.9;

        font-weight: 200;

        letter-spacing: 0.5px;

    }



}



/* whatsapp */



.whatsapp-link-box {

    position: fixed;

    bottom: 117px;

    right: 27px;

    width: 50px;

    height: 50px;

    z-index: 100000;

    background-color: #3368b8;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

}



.whatsapp-nav {

    width: 48px;

    height: 48px;

    background-color: #3368b8;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    display: none;

}



.whatsapp-link-box:hover,

.whatsapp-nav:hover {

    transition: all 0.4s ease-in-out;

    background-color: var(--light-color);

}



.whatsapp-link-box a,

.whatsapp-nav a {

    color: #efefef;

}



.whatsapp-link-box a i {

    font-size: 26px;

}



.whatsapp-nav a i {

    font-size: 18px;

}



.whatsapp-link-box:hover a {

    transition: all 0.4s ease-in-out;

    color: #128C7E;

}



.whatsapp-nav:hover a {

    transition: all 0.4s ease-in-out;

    color: #128C7E;

}



@media (max-width: 768px) {

    .whatsapp-link-box {

        display: none;

    }



    .whatsapp-nav {

        display: flex;

        width: 36px;

        height: 36px;

        border-radius: 4px;

    }



}





/* Contact */



.contact-link-box {

    position: fixed;

    bottom: 177px;

    right: 27px;

    width: 50px;

    height: 50px;

    z-index: 100000;

    background-color: #3368b8;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

}



.contact-nav {

    width: 48px;

    height: 48px;

    background-color: #3368b8;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    display: none;

}



.contact-link-box:hover,

.contact-nav:hover {

    transition: all 0.4s ease-in-out;

    background-color: var(--light-color);

}



.contact-link-box a,

.contact-nav a {

    color: #efefef;

}



.contact-link-box a i {

    font-size: 26px;

}



.contact-nav a i {

    font-size: 18px;

}



.contact-link-box:hover a {

    transition: all 0.4s ease-in-out;

    color: #3368b8;

}



.contact-nav:hover a {

    transition: all 0.4s ease-in-out;

    color: #3368b8;

}



@media (max-width: 768px) {

    .contact-link-box {

        display: none;

    }



    .contact-nav {

        display: flex;

        width: 36px;

        height: 36px;

        border-radius: 4px;

    }

}







/* page heading */



.page-heading {

    position: relative;

    background-color: var(--main-color);

    background-image: url('../../assets/images/page-heading-bg.jpg');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    /* border-radius: 24px; */

    overflow: hidden;

    height: 240px;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

}



.page-heading.about-heading-bg {

    /* background-image: url('../../assets/images/page-heading-about-bg.jpg'); */

    background-image: url('../../assets/images/page-heading-bg.jpg');

}



.page-heading.contact-heading-bg {

    /* background-image: url('../../assets/images/page-heading-contact-bg.png'); */

    background-image: url('../../assets/images/page-heading-bg.jpg');

}



.page-heading.project-heading-bg {

    /* background-image: url('../../assets/images/page-heading-project-bg.png'); */

    background-image: url('../../assets/images/page-heading-bg.jpg');

}



.page-heading.event-heading-bg {

    /* background-image: url('../../assets/images/page-heading-event-bg.jpeg'); */

    background-image: url('../../assets/images/page-heading-bg.jpg');

}



.page-heading::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.4);

    z-index: 1;

}



.page-heading h1 {

    position: relative;

    z-index: 2;

    font-weight: bold;

    margin: 0;

    text-align: center;

    padding: 4px;

}







/* ash code */



/* event / gallery page design */



/* .glass-modal {

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 15px;

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

} */



.product-card {

    cursor: pointer;

    transition: all 0.5s ease-in-out;

}



/* .product-card:hover .product-info-glass {

    filter: blur(1px);

} */







.product-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

}



.event-card img {

    height: 220px;

    object-fit: cover;

    border-radius: 10px;

    transition: transform 0.3s ease;

}



.event-card {

    position: relative;

    overflow: hidden;

    transition: transform 0.4s ease, box-shadow 0.25s ease;

}



.event-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);

}



.event-info-glass {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 10px 0;

    text-align: center;

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(6px);

    border-top: 1px solid rgba(255, 255, 255, 0.2);

    color: #fff;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

    transition: bottom 0.4s ease, opacity 0.4s ease;

}



.event-card:hover .event-info-glass {

    bottom: -100%;

    opacity: 0;

}





.event-info-glass h6,

.event-info-glass small {

    color: #ffffffd5;

}



.modal.fade .modal-dialog {

    transform: scale(0.95);

    transition: transform 0.25s ease-out;

}



.modal.show .modal-dialog {

    transform: scale(1);

}



.modal-backdrop.show {

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

    backdrop-filter: blur(3px);

}



.modal.fade .modal-dialog {

    transform: scale(0.95);

    transition: transform 0.25s ease-out;

}



.modal.show .modal-dialog {

    transform: scale(1);

}



.modal-backdrop.show {

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

    backdrop-filter: blur(3px);

}



.event-card img:hover {

    transform: scale(1.05);

}



.event-group-title {

    font-weight: 700;

    font-size: 1.5rem;

    margin: 50px 0 20px;

    text-transform: uppercase;

    color: var(--main-color);

    border-left: 5px solid var(--main-color);

    padding-left: 10px;

    padding-top: 6px;

}



@media (max-width: 576px) {

    .event-group-title {

        font-size: 1.2rem;

    }

}



/* product page design */



.product-card-main {

    height: 280px;

    margin-right: -20px;

    /* max-height:90vh; 

    object-fit:contain; 

    display:block; 

    margin:auto; */

}



.product-card img {

    height: 280px;

    object-fit: fill;

    border-radius: 8px;

    max-width: 100%;

    transition: transform 0.3s ease;

}



.product-card img:hover {

    transform: scale(1.05);

}



.product-info-glass {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 10px 0;

    text-align: center;

    background: rgba(150, 150, 150, 0.1);

    backdrop-filter: blur(8px);

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    color: #fff;

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

    transition: bottom 0.4s ease, opacity 0.4s ease;



    h6 {

        font-size: 15px;

        margin-bottom: -5px !important;

    }



    small {

        font-size: 11px;

    }

}





.modern-tabs {

    gap: 10px;

    flex-wrap: wrap;

}



.modern-tabs .nav-link {

    color: var(--main-color);

    border-radius: 50px;

    padding: 6px 22px;

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(8px);

    transition: all 0.3s ease;

    border: 1px solid rgba(200, 200, 200, 0.18);

}



.modern-tabs .nav-link.active {

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    font-weight: 600;

}



.modern-tabs .nav-link:not(.active):hover {

    background: #c3cfe230;

    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

}



.tab-pane {

    animation: fadeIn 0.4s ease;

}

/* ============================================================
   CATEGORY PAGE (products.php)
   Reuses the same eyebrow / section-title / feature-card language
   as product-details.php so the whole product journey (category
   list -> single product) feels like one consistent design system
   instead of two different pages.
   ============================================================ */

.modern-tabs {
    gap: 8px;
}

.category-hero {
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eef1f5;
    margin: 40px 0 48px;
}

.category-hero-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.category-hero-body {
    padding: 40px 32px 44px;
    text-align: center;
}

.category-hero-body .pd-section-eyebrow {
    display: inline-block;
}

.category-hero-desc {
    max-width: 760px;
    margin: 0 auto;
    color: var(--dark-text-hover);
    line-height: 1.7;
}

.category-hero-desc-rich {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
    color: var(--dark-text-hover);
    line-height: 1.7;
}

.category-hero-desc-rich p {
    margin-bottom: 14px;
}

.category-hero-desc-rich p:last-child {
    margin-bottom: 0;
}

.category-hero-desc-rich strong {
    color: var(--dark-text);
    font-weight: 700;
}

.category-hero-bullets {
    margin: 0 0 14px;
    padding-left: 20px;
}

.category-hero-bullets li {
    margin-bottom: 6px;
}

.category-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 56px;
}

.category-highlight-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #f9fafc;
    border: 1px solid #eef1f5;
    border-radius: 14px;
}

.category-highlight-card .pd-feature-icon {
    background: var(--main-color);
}

.category-highlight-card span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark-text);
    line-height: 1.35;
}

/* Category-level content (products.php) for categories that don't have
   individual per-SKU products — a description, optional spec list, and
   feature/application columns instead of a "coming soon" placeholder. */
.category-content {
    max-width: 1100px;
    margin: 0 auto 8px;
}

.category-content-tagline {
    color: var(--main-color);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.category-content-text {
    color: var(--dark-text-hover);
    line-height: 1.7;
    margin-bottom: 16px;
}

.category-content-sublist {
    margin: 0 0 20px;
    padding-left: 20px;
    color: var(--dark-text-hover);
    line-height: 1.6;
}

.category-content-sublist li {
    margin-bottom: 8px;
}

.category-content-sublist li strong {
    color: var(--dark-text);
}

.category-content-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    padding: 24px;
    height: 100%;
}

.category-content-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 8px;
}

/* ============================================================
   PRODUCT CARDS (products.php)
   Replaces the old card: fixed inline width:300px sitting inside a
   fluid Bootstrap column, image-only with no description, and a
   stray spacer div to fake gutters. This version is fully responsive,
   shows image + title + short description, and uses the grid gap
   instead of hacks for spacing.
   ============================================================ */

.product-card-full {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eef1f5;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card-full:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.product-card-full-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card-full-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card-full-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-card-full-cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--main-color);
    background: #eef4fc;
    padding: 3px 10px;
    border-radius: 20px;
    align-self: flex-start;
    margin-bottom: 10px;
}

.product-card-full-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 8px;
    line-height: 1.35;
}

.product-card-full-desc {
    font-size: 0.85rem;
    color: var(--dark-text-hover);
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

.product-card-full-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--main-color);
}

.product-card-full-link i {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.product-card-full:hover .product-card-full-link i {
    transform: translateX(4px);
}

/* ============================================================
   PRODUCT DETAIL PAGE (product-details.php)
   ============================================================ */

.pd-breadcrumb {
    font-size: 0.85rem;
    color: var(--dark-text-hover);
    margin-bottom: 24px;
}

.pd-breadcrumb a {
    color: var(--main-color);
    text-decoration: none;
}

.pd-breadcrumb a:hover {
    text-decoration: underline;
}

.pd-hero-wrapper {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    padding: 0 32px;
    background-color: #0c1625;
}

.pd-hero-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pd-hero-bg);
    background-size: cover;
    background-position: center;
    filter: blur(2px) brightness(0.5);
    transform: scale(1.05);
}

.pd-hero-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(12, 22, 37, 0.92) 0%, rgba(12, 22, 37, 0.75) 45%, rgba(51, 104, 184, 0.55) 100%);
}

.pd-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 48px;
    align-items: center;
    padding: 48px 0;
}

@media (max-width: 992px) {
    .pd-hero-wrapper {
        padding: 0 18px;
    }

    .pd-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 28px 0;
    }
}

/* Gentle staggered entrance for the hero on page load. */
@keyframes pdFadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pd-hero-image {
    position: relative;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border-radius: 24px;
    padding: 32px;

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;

    animation: pdFadeInUp 0.7s ease both;
}

.pd-category-badge,
.pd-hero-title,
.pd-hero-tagline,
.pd-hero-desc,
.pd-spec-chips,
.pd-hero-actions {
    animation: pdFadeInUp 0.7s ease both;
}

.pd-category-badge {
    animation-delay: 0.05s;
}

.pd-hero-title {
    animation-delay: 0.12s;
}

.pd-hero-tagline {
    animation-delay: 0.19s;
}

.pd-hero-desc {
    animation-delay: 0.26s;
}

.pd-spec-chips {
    animation-delay: 0.33s;
}

.pd-hero-actions {
    animation-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {

    .pd-hero-image,
    .pd-category-badge,
    .pd-hero-title,
    .pd-hero-tagline,
    .pd-hero-desc,
    .pd-spec-chips,
    .pd-hero-actions {
        animation: none;
    }
}

.pd-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(51, 104, 184, 0.15));
    transition: transform 0.5s ease;
}

.pd-hero-image:hover img {
    transform: scale(1.04) rotate(-1deg);
}

.pd-category-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.pd-hero-title {
    font-size: var(--h1-size);
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}

.pd-hero-tagline {
    font-size: 1.05rem;
    color: #9ec2f2;
    font-weight: 600;
    margin-bottom: 16px;
}

.pd-hero-desc {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin-bottom: 24px;
}

.pd-spec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.pd-spec-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 130px;
}

.pd-spec-chip-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

.pd-spec-chip-value {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.pd-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 6px 4px 8px;
}

.pd-hero-actions .btn-primary-custom,
.pd-hero-actions .btn-outline-custom {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    font-weight: 600;
    transform: none;
}

.pd-hero-actions .btn-primary-custom,
.pd-hero-actions .btn-primary-custom:hover,
.pd-hero-actions .btn-primary-custom:visited {
    color: #fff;
}

.pd-hero-actions .btn-primary-custom:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 24px rgba(51, 104, 184, 0.4);
}

.pd-hero-actions .btn-outline-custom {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.pd-hero-actions .btn-outline-custom:hover {
    background: #fff;
    border-color: #fff;
    color: var(--main-color-hover);
    transform: scale(1.04);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.pd-section {
    padding: 56px 0;
    border-top: 1px solid #eef1f5;
}

.pd-section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--main-color);
    margin-bottom: 8px;
    display: block;
}

.pd-section-title {
    font-size: var(--h2-size);
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 32px;
}

.pd-feature-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pd-split-desc {
    color: var(--dark-text-hover);
    line-height: 1.7;
    margin-bottom: 24px;
}

/* Certification badges */
.pd-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.pd-cert-card {
    background: #fff;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}

.pd-cert-card img {
    width: 100%;
    max-height: 130px;
    object-fit: contain;
    margin-bottom: 14px;
    border-radius: 8px;
}

.pd-cert-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 4px;
}

.pd-cert-card p {
    font-size: 0.8rem;
    color: var(--dark-text-hover);
    margin: 0;
}

/* Packaging info strip */
.pd-info-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.pd-info-card {
    background: #f9fafc;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.pd-info-card:hover {
    transform: translateY(-6px);
    background: #fff;
    border-color: transparent;
    box-shadow: 0 16px 32px rgba(51, 104, 184, 0.16);
}

.pd-info-card i {
    font-size: 22px;
    color: var(--main-color);
    margin-bottom: 10px;
    display: block;
    transition: transform 0.35s ease;
}

.pd-info-card:hover i {
    transform: scale(1.2) rotate(-6deg);
}

.pd-info-card strong {
    display: block;
    font-size: 0.95rem;
    color: var(--dark-text);
    margin-bottom: 2px;
}

.pd-info-card span {
    font-size: 0.8rem;
    color: var(--dark-text-hover);
}

/* Plain label/value list used for Product Specification. */
.pd-simple-list {
    display: flex;
    flex-direction: column;
}

.pd-simple-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 24px;
    padding: 13px 0;
    border-bottom: 1px solid #eef1f5;
    font-size: 0.92rem;
}

.pd-simple-row:first-child {
    padding-top: 0;
}

.pd-simple-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pd-simple-label {
    color: var(--dark-text);
    font-weight: 600;
}

.pd-simple-value {
    color: var(--dark-text-hover);
    text-align: right;
}

/* Plain bulleted list used for Applications and Features. */
.pd-simple-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pd-simple-bullets li {
    position: relative;
    padding: 10px 0 10px 22px;
    border-bottom: 1px solid #eef1f5;
    color: var(--dark-text-hover);
    font-size: 0.92rem;
    line-height: 1.5;
}

.pd-simple-bullets li:first-child {
    padding-top: 0;
}

.pd-simple-bullets li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pd-simple-bullets li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 19px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--main-color);
}

.pd-simple-bullets li:first-child::before {
    top: 9px;
}

.pd-faq-item {
    border: 1px solid #eef1f5;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
}

.pd-faq-question {
    width: 100%;
    text-align: left;
    background: #fff;
    border: none;
    padding: 18px 22px;
    font-weight: 600;
    color: var(--dark-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
}

.pd-faq-question .pd-faq-icon {
    transition: transform 0.3s ease;
    color: var(--main-color);
    flex-shrink: 0;
    margin-left: 12px;
}

.pd-faq-question[aria-expanded="true"] .pd-faq-icon {
    transform: rotate(45deg);
}

.pd-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 22px;
    color: var(--dark-text-hover);
    font-size: 0.9rem;
    line-height: 1.6;
    background: #fbfcfe;
}

.pd-faq-answer.open {
    max-height: 300px;
    padding: 0 22px 18px;
}

.pd-cta-banner {
    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    color: #fff;
}

.pd-cta-banner h2 {
    color: #fff;
    font-size: var(--h2-size);
    margin-bottom: 10px;
}

.pd-cta-banner p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 24px;
}

@media (max-width: 576px) {
    .pd-cta-banner {
        padding: 32px 20px;
    }
}




@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(10px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* contact page design */



.contact-section {

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.15);



    label {

        color: #777;

        font-size: 14px;

    }



    input,

    textarea,

    select {

        border: 0;

        background-color: #f9f9f9;

        border-radius: 4px;

        padding: 10px 15px;

    }



    input::placeholder,

    textarea::placeholder,

    select::placeholder {

        color: #bbb;

        font-size: 12px;

    }

}



.contact-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 20px 0 0 20px;

    filter: brightness(80%);

    transition: transform 0.6s ease;

}



.contact-image:hover img {

    transform: scale(1.05);

}



.contact-form {

    backdrop-filter: blur(20px);

    background: rgba(255, 255, 255, 0.12);

    border-radius: 0 20px 20px 0;

    /* color: #fff; */

}



.form-label {

    color: #f1f1f1;

    font-weight: 500;

}



.form-control {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.2);

    /* color: #fff; */

    border-radius: 10px;

    transition: all 0.3s ease;

}



.form-control:focus {

    background: rgba(255, 255, 255, 0.2);

    border: none !important;

    box-shadow: 0 0 10px #e3ecf7;

    color: var(--main2-color);

}



@media (max-width: 768px) {

    .contact-image img {

        border-radius: 20px 20px 0 0;

    }



    .contact-form {

        border-radius: 0 0 20px 20px;

    }

}



.map-container iframe {

    width: 100%;

    height: 50vh;

    border: 0;

    border-radius: 15px;

}



/* team page */



.team-main-image-container {

    position: relative;

    overflow: hidden;

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

}



.team-main-image-container img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

    border-radius: 24px;

}



.team-image {

    transition: transform 3s ease-in-out;

}



.team-main-image-container:hover .team-image {

    transform: scale(1.15);

}





@media (max-width: 767.98px) {

    .team-main-image-container img {

        max-height: 400px;

        object-fit: cover;

        border-radius: 14px;

    }

}



@media (min-width: 768px) {

    .team-main-image-container img {

        max-height: 600px;

        object-fit: cover;

    }

}



.team-main-image-container::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);

    opacity: 0;

    transition: opacity 0.4s ease;

    pointer-events: none;

}



.team-main-image-container:hover::before {

    opacity: 1;

}





.team-all-members-container {

    margin: 0 auto;

    padding: 0 15px;

}



.team-all-members-container .section-subtitle {

    display: block;

    margin-bottom: 50px;

}



.team-all-members-container .team-card {

    background: rgba(255, 255, 255, 0.95);

    border-radius: 20px;

    padding: 40px 30px;

    text-align: center;

    transition: all 0.3s ease;

    height: 100%;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(10px);

}



.team-all-members-container .team-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}



.team-all-members-container .member-photo {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    object-fit: cover;

    margin: 0 auto 20px;

    border: 5px solid var(--main-color-hover);

    transition: all 0.3s ease;

    display: block;

}



.team-all-members-container .team-card:hover .member-photo {

    border-color: var(--main-color-hover);

    transform: scale(1.05);

}



.team-all-members-container .member-name {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--main-color);

    margin-bottom: 8px;

}



.team-all-members-container .member-designation {

    font-size: 1rem;

    color: var(--dark-text);

    font-weight: 600;

    margin-bottom: 15px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.team-all-members-container .member-intro {

    font-size: 0.85rem;

    text-align: justify;

    color: var(--main2-color);

    line-height: 1.6;

    margin-bottom: 20px;

}



.team-all-members-container .social-links {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 20px;

}



.team-all-members-container .social-links a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-hover) 100%);

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    text-decoration: none;

    transition: all 0.3s ease;

}



.team-all-members-container .social-links a:hover {

    transform: scale(1.1);

    box-shadow: 0 5px 15px rgba(89, 122, 194, 0.4);

}



@media (max-width: 768px) {

    .team-all-members-container .team-card {

        margin-bottom: 30px;

    }



    .team-all-members-container .member-photo {

        width: 120px;

        height: 120px;

    }

}



/* about page */



.floating-about-nav {

    position: fixed;

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    z-index: 9999;



    display: flex;

    align-items: center;

    gap: 10px;



    padding: 12px 14px;



    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(16px);



    border: 1px solid rgba(255, 255, 255, 0.4);



    border-radius: 100px;



    box-shadow:

        0 10px 35px rgba(0, 0, 0, 0.12),

        inset 0 1px 0 rgba(255, 255, 255, 0.6);



    max-width: calc(100% - 20px);

    overflow-x: auto;



    scrollbar-width: none;

}



.floating-about-nav::-webkit-scrollbar {

    display: none;

}



.floating-nav-link {

    display: flex;

    align-items: center;

    gap: 8px;



    text-decoration: none;



    color: #555;

    font-size: 14px;

    font-weight: 600;



    padding: 12px 18px;



    border-radius: 50px;



    transition: all 0.3s ease;



    white-space: nowrap;

}



.floating-nav-link i {

    font-size: 14px;

}



.floating-nav-link:hover {

    background: rgba(#1c2d4a10);

    color: var(--main-color-hover);

    transform: translateY(-2px);

}



.floating-nav-link.active {

    background: var(--main-color-hover);

    color: #fff;



    box-shadow: 0 8px 20px rgba(var(--main-color-hover), 0.35);

}



@media (max-width: 576px) {



    .floating-about-nav {

        bottom: 15px;

        padding: 10px 8px;

        gap: 4px;

        width: calc(100% - 18px);

        justify-content: space-between;

        left: 50%;

        transform: translateX(-50%);

    }



    .floating-nav-link {

        flex: 1;

        /* equal width */

        justify-content: center;



        padding: 10px 0;



        font-size: 13px;

        min-width: unset;

    }



    .floating-nav-link span {

        display: none;

    }



    .floating-nav-link i {

        font-size: 15px;

    }

}



.about-page-container .floating-shapes {

    position: absolute;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



.about-page-container .shape {

    position: absolute;

    border-radius: 50%;

    animation: float 20s infinite;

}



.about-page-container .shape:nth-child(1) {

    width: 300px;

    height: 300px;

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    opacity: 0.08;

    top: 10%;

    left: 10%;

    animation-delay: 0s;

}



.about-page-container .shape:nth-child(2) {

    width: 200px;

    height: 200px;

    background: linear-gradient(135deg, var(--main-color-hover), var(--main-color));

    opacity: 0.08;

    top: 60%;

    right: 10%;

    animation-delay: 5s;

}



@keyframes float {



    0%,

    100% {

        transform: translate(0, 0) rotate(0deg);

    }



    33% {

        transform: translate(30px, -30px) rotate(120deg);

    }



    66% {

        transform: translate(-20px, 20px) rotate(240deg);

    }

}





.about-page-container #hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    position: relative;

    padding: 100px 0 80px;

}



.about-page-container .hero-content {

    animation: fadeInUp 1s ease;

}



.about-page-container .about-content {

    color: #787878;

    margin-bottom: 1.2rem;



    p,

    li {

        font-size: 16px;

        opacity: 0.95;

    }

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.about-page-container .hero-title {

    font-weight: 900;

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    margin-bottom: 1.5rem;

    line-height: 1.2;

}



.about-page-container .btn-primary-custom {

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    border: none;

    border-radius: 50px;

    padding: 12px 35px;

    color: white;

    font-weight: 600;

    transition: all 0.3s ease;

}



.about-page-container .btn-primary-custom:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(51, 104, 184, 0.3);

}



.about-page-container .btn-outline-custom {

    border: 1px solid var(--main2-color);

    border-radius: 50px;

    padding: 10px 33px;

    color: var(--main-color);

    font-weight: 600;

    background: transparent;

    transition: all 0.3s ease;

}



.about-page-container .btn-outline-custom:hover {

    background: var(--main-color-hover);

    color: white;

    transform: translateY(-3px);

}



.about-page-container .image-gallery {

    display: grid;

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

    gap: 20px;

    margin-top: 2rem;

}



.about-page-container .gallery-item {

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    height: 250px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);

    transition: transform 0.5s ease;

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

}



.about-page-container .gallery-item:hover {

    /* transform: scale(1.05) rotate(2deg); */

    transform: scale(1.05);

}



.about-page-container .gallery-item::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(51, 104, 184, 0.8), rgba(90, 143, 214, 0.8));

    transition: opacity 0.3s;

}



.about-page-container .gallery-item:hover::before {

    opacity: 0.6;

}



.about-page-container .gallery-item i {

    position: absolute;

    top: 50%;

    left: 50%;

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

    font-size: 4rem;

    color: white;

    z-index: 1;

}



.about-page-container .director-section {

    padding: 100px 0;

    position: relative;

}



.about-page-container .director-card {

    background: rgba(255, 255, 255, 0.7);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 30px;

    padding: 60px 40px;

    transition: all 0.5s ease;

    position: relative;

    overflow: hidden;

    margin-bottom: 30px;

}





.about-page-container .director-card:hover {

    transform: translateY(-10px);

    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

}



.about-page-container .director-img {

    width: 180px;

    height: 180px;

    border-radius: 50%;

    margin: 0 auto 30px;

    background: var(--light-color);

    padding: 5px;

    position: relative;

    animation: pulse 2s infinite;

}



@keyframes pulse {



    0%,

    100% {

        box-shadow: 0 0 0 0 rgba(51, 104, 184, 0.4);

    }



    50% {

        box-shadow: 0 0 0 20px rgba(51, 104, 184, 0);

    }

}



.about-page-container .director-img-inner {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background: linear-gradient(135deg, #e3ecf7, #f0f5fb);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 4rem;

    color: var(--primary);

}



.about-page-container .director-name {

    font-size: 2rem;

    font-weight: 800;

    color: var(--main-color-hover);

    margin-bottom: 4px !important;

}



.about-page-container .director-role {

    font-size: 1.1rem;

    color: #676767;

    font-weight: 600;

    margin-bottom: 20px;

}



.about-page-container .director-bio {

    color: #898989;

    font-size: 15px;

    line-height: 2;

    font-weight: 400;

    margin-bottom: 30px;

    text-align: justify;

}



.about-page-container .social-links a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    color: white;

    margin: 0 5px;

    transition: all 0.3s ease;

    text-decoration: none;

}



.about-page-container .social-links a:hover {

    transform: translateY(-5px) rotate(360deg);

    box-shadow: 0 10px 25px rgba(51, 104, 184, 0.4);

}



.about-page-container .stat-number {

    color: var(--primary);

    font-weight: 800;

    font-size: 2rem;

}



.about-page-container .stat-label {

    color: var(--secondary);

    font-size: 0.9rem;

}





.about-page-container #team {

    padding: 100px 0;

}



.about-page-container .team-member {

    background: white;

    border-radius: 20px;

    padding: 30px;

    height: 100%;

    margin-bottom: 30px;

    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); */

    border: 1px solid #ededed;

    transition: all 0.4s ease;

    opacity: 0;

    transform: translateY(30px);

    animation: fadeInUp 0.6s ease forwards;

}



.about-page-container .team-member:nth-child(1) {

    animation-delay: 0.1s;

}



.about-page-container .team-member:nth-child(2) {

    animation-delay: 0.2s;

}



.about-page-container .team-member:nth-child(3) {

    animation-delay: 0.3s;

}



.about-page-container .team-member:nth-child(4) {

    animation-delay: 0.4s;

}



.about-page-container .team-member:nth-child(5) {

    animation-delay: 0.5s;

}



.about-page-container .team-member:nth-child(6) {

    animation-delay: 0.6s;

}



.about-page-container .team-member:nth-child(7) {

    animation-delay: 0.7s;

}



.about-page-container .team-member:nth-child(8) {

    animation-delay: 0.8s;

}



/* .about-page-container .team-member:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);

} */



.about-page-container .team-img {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 3rem;

    color: white;

}



.about-page-container .team-member h5 {

    color: var(--main-color-hover);

}



.about-page-container .team-member .text-muted {

    color: #787878 !important;

}



.about-page-container #testimonials {

    padding: 100px 0;

    background: linear-gradient(90deg, var(--main-color), var(--main-color-hover));

    color: white;

    position: relative;

}



.about-page-container .testimonial-card {

    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 40px;

    margin: 20px 0;

    border: 1px solid rgba(255, 255, 255, 0.2);

    transition: all 0.4s ease;

}



.about-page-container .testimonial-card:hover {

    background: rgba(255, 255, 255, 0.15);

    transform: scale(1.05);

}



.about-page-container .client-name {

    font-weight: 700;

    margin-top: 16px;

    font-size: 1.1rem;

}



.about-page-container .client-company {

    color: #c3cfe2;

    font-size: 0.9rem;

}



.about-page-container .testimonial-text {

    font-size: 1.1rem;

    line-height: 1.8;

    font-style: italic;

}



.about-page-container #values {

    padding: 100px 0;

    background: white;

}



.about-page-container .value-card {

    text-align: center;

    padding: 40px;

    border-radius: 20px;

    transition: all 0.4s ease;

    cursor: pointer;

}



.about-page-container .value-card:hover {

    background: linear-gradient(135deg, #f8fafc, #e3ecf7);

    transform: translateY(-10px);

}



.about-page-container .value-icon {

    width: 80px;

    height: 80px;

    border-radius: 20px;

    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    color: white;

    transition: all 0.4s ease;

}



.about-page-container .value-card:hover .value-icon {

    transform: rotateY(360deg);

}



.about-page-container .value-card h4 {

    color: var(--main-color-hover);

    font-weight: 700;

    margin-bottom: 15px;

}



.about-page-container .value-card p {

    color: var(--main-color);

    line-height: 1.6;

    text-align: justify;

}



.about-page-container .section-title {

    margin-bottom: 60px;

    position: relative;

    padding-bottom: 20px;

}



@media (max-width: 768px) {

    .about-page-container .hero-title {

        font-size: 2.5rem;

    }



    .about-page-container .director-card {

        padding: 40px 20px;

    }



    .about-page-container .gallery-item {

        height: 180px;

    }



    .about-page-container .gallery-item i {

        font-size: 2.5rem;

    }

}



@media (max-width: 576px) {

    .about-page-container .hero-title {

        font-weight: 800;

        font-size: 24px !important;

    }



    .about-page-container .about-content {



        p,

        li {

            font-size: 14px;

        }

    }



    .about-page-container .director-name {

        font-size: 1.3rem;

        margin-bottom: 1px !important;

    }



    .about-page-container .director-role {

        font-size: 0.85rem;

        font-weight: 400;

    }



    .about-page-container .section-title {

        font-size: 1.6rem;

    }



}



/* ABOUT BROCHURE CTA */



.about-brochure-section {

    position: relative;

    z-index: 1;

}



.about-brochure-wrapper {

    background: linear-gradient(135deg,

            rgba(51, 104, 184, 0.06),

            rgba(30, 56, 95, 0.04));



    border: 1px solid rgba(51, 104, 184, 0.10);

    border-radius: 28px;

    padding: 45px;

    overflow: hidden;

    position: relative;

}



.about-brochure-wrapper::before {

    content: '';

    position: absolute;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: rgba(51, 104, 184, 0.05);

    right: -70px;

    top: -70px;

}



.about-brochure-badge {



    display: inline-flex;

    align-items: center;

    padding: 8px 16px;

    border-radius: 50px;

    background: rgba(51, 104, 184, 0.10);

    color: var(--main-color);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .4px;

    text-transform: uppercase;

}



.about-brochure-title {

    font-size: clamp(1.8rem, 3vw, 2.5rem);

    font-weight: 700;

    color: var(--dark-text);

    line-height: 1.25;

    margin-bottom: 18px;

    max-width: 700px;

}



.about-brochure-text {

    color: var(--main2-color);

    font-size: 1rem;

    line-height: 1.8;

    max-width: 720px;

}



.about-brochure-btn {

    background: linear-gradient(135deg,

            var(--main-color),

            var(--main-color-hover));

    color: #fff;

    border: none;

    padding: 16px 30px;

    border-radius: 14px;

    font-weight: 600;

    font-size: 15px;

    transition: .3s ease;

    box-shadow: 0 12px 24px rgba(51, 104, 184, 0.18);

}



.about-brochure-btn:hover {

    color: #fff;

    transform: translateY(-3px);

}



@media(max-width:991px) {



    .about-brochure-wrapper {

        padding: 35px 28px;

        text-align: center;

    }



    .about-brochure-title,

    .about-brochure-text {

        margin-left: auto;

        margin-right: auto;

    }



    .about-brochure-btn {

        margin-top: 10px;

    }

}



@media(max-width:576px) {



    .about-brochure-wrapper {

        padding: 28px 20px;

        border-radius: 22px;

    }



    .about-brochure-title {

        font-size: 1.7rem;

    }



    .about-brochure-text {

        font-size: .95rem;

        line-height: 1.7;

    }



    .about-brochure-btn {

        width: 100%;

        padding: 15px 20px;

    }

}



/* product details page */



.product-details-page-container .product-image-wrapper {

    position: relative;

}



.product-details-page-container .product-image-container {

    position: relative;

    height: 600px;

    overflow: hidden;

    background: #fff;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); */

    transition: .3s ease;

}



.product-details-page-container .product-image-container:hover {

    transform: translateY(-4px);

    /* box-shadow: 0 14px 24px rgba(0, 0, 0, 0.10); */

}



.product-details-page-container .product-image-bg {

    position: absolute;

    inset: 0;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    opacity: 0.08;

    transform: scale(1.08);

    filter: saturate(0.9);

    z-index: 1;

}



.product-details-page-container .product-image-bg::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(to right,

            rgba(255, 255, 255, 0.92),

            rgba(255, 255, 255, 0.55),

            rgba(255, 255, 255, 0.92));

}



.product-details-page-container .product-detail-image {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 24px;

}



@media(max-width:991px) {



    .product-details-page-container .product-image-container {

        height: 500px;

    }

}



@media(max-width:576px) {



    .product-details-page-container .product-image-container {

        height: 380px;

        border-radius: 16px;

    }



    .product-details-page-container .product-detail-image {

        padding: 14px;

    }

}



.product-details-page-container .image-badge {

    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    z-index: 5;

}



.product-details-page-container .image-badge .badge {

    background-color: var(--main-color) !important;

    padding: 0.5rem 1rem;

    font-weight: 600;

    font-size: 0.85rem;

    border-radius: 50px;

}



.product-details-page-container .product-info-wrapper {

    height: 100%;

}



.product-details-page-container .product-title {

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--main-color-hover);

    line-height: 1.3;

}



.product-details-page-container .product-meta {

    font-size: 0.95rem;

}



.product-details-page-container .category-badge {

    display: inline-flex;

    align-items: center;

    /* background: var(--main-color-hover); */

    color: var(--main-color-hover);

    padding: 0.2rem 0.5rem;

    border: 1px solid var(--main-color-hover);

    border-radius: 50px;

    font-size: 11px;

    font-weight: 500;

    margin-bottom: 5px;

}



.product-details-page-container .section-title {

    font-size: 1.1rem;

    font-weight: 600;

    color: var(--main-color-hover);

    display: flex;

    align-items: center;

}



.product-details-page-container .description-content {

    color: var(--main-color-hover);

    line-height: 1.7;

    font-size: 0.95rem;

}



.product-details-page-container .description-content table {

    width: 100%;

    margin-top: 1rem;

}



.product-details-page-container .description-content table tr th,

.product-details-page-container .description-content table tr td {

    padding: 0.75rem;

    border-bottom: 1px solid #eaf1fa;

    font-size: 0.8rem;

}



.product-details-page-container .description-content table tr th {

    font-weight: 600;

    color: var(--main-color-hover);

    /* background: var(--light-color); */

}



.product-details-page-container .description-content table tr td {

    color: var(--dark-text-hover);

}



/* PRODUCT IMAGE MARQUEE */



.prismo-image-marquee-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 30px 0;

}



.prismo-image-marquee {

    overflow: hidden;

    position: relative;

}



.prismo-image-track {

    display: flex;

    align-items: center;

    width: max-content;

    animation: prismoMarquee 22s linear infinite;

}



.prismo-marquee-item {

    flex-shrink: 0;

    width: 240px;

    height: 240px;

    margin-right: 25px;

    border-radius: 24px;

    overflow: hidden;

    background: #fff;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

    transition: .3s ease;

}



.prismo-marquee-item:hover {

    transform: translateY(-6px);

}



.prismo-marquee-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



@keyframes prismoMarquee {

    from {

        transform: translateX(0);

    }



    to {

        transform: translateX(-50%);

    }

}





.prismo-image-marquee:hover .prismo-image-track {

    animation-play-state: paused;

}



@media(max-width:576px) {



    .prismo-marquee-item {

        width: 160px;

        height: 160px;

        border-radius: 18px;

    }



    .prismo-image-track {

        animation-duration: 16s;

    }

}



/* Related Products Section */



.related-products-section {

    /* border: 0.5px solid #f1f1f1; */

}



.product-details-page-container .section-header h3 {

    color: var(--main-color-hover);

    font-size: 1.75rem;

}



.product-details-page-container .section-header p {

    color: var(--main2-color);

}



.product-details-page-container .product-card-link {

    text-decoration: none;

    display: block;

}



.product-details-page-container .related-product-card {

    background: white;

    border-radius: 12px;

    overflow: hidden;

    transition: all 0.3s ease;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    height: 100%;

}



.product-details-page-container .related-product-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

}



.product-details-page-container .card-image-wrapper {

    position: relative;

    overflow: hidden;

    aspect-ratio: 1;

}



.product-details-page-container .card-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



.product-details-page-container .related-product-card:hover .card-image {

    transform: scale(1.1);

}



.product-details-page-container .card-overlay {

    position: absolute;

    inset: 0;

    background: rgba(51, 104, 184, 0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.product-details-page-container .related-product-card:hover .card-overlay {

    opacity: 1;

}



.product-details-page-container .view-details {

    color: white;

    font-weight: 600;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.product-details-page-container .card-content {

    padding: 1rem;

}



.product-details-page-container .product-name {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--main-color-hover);

    margin-bottom: 0.25rem;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.product-details-page-container .product-category {

    font-size: 0.8rem;

    color: var(--main2-color);

    margin: 0;

}



.product-details-page-container .error-container {

    min-height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.product-details-page-container .error-content {

    max-width: 500px;

}



.product-details-page-container .error-content .btn-main {

    background: var(--main-color);

    border: none;

    padding: 0.75rem 2rem;

    font-weight: 600;

    border-radius: 12px;

    transition: all 0.3s ease;

}



.product-details-page-container .error-content .btn-main:hover {

    background: var(--main-color-hover);

    transform: translateY(-2px);

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.faq-section {

    background: #f8fafc;

    padding: 80px 0;

}



.faq-title {

    font-weight: 800;

    color: #111827;

}



.faq-subtitle {

    color: #6b7280;

    max-width: 700px;

    margin: auto;

}



.custom-accordion .accordion-item {

    border: none;

    border-radius: 18px !important;

    overflow: hidden;

    margin-bottom: 20px;

    background: #ffffff;

    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); */

    transition: 0.3s ease;

}



.custom-accordion .accordion-item:hover {

    transform: translateY(-3px);

}



.custom-accordion .accordion-button {

    background: #ffffff;

    color: var(--main-color);

    font-weight: 600;

    font-size: 0.925rem;

    padding: 15px 25px;

    box-shadow: none !important;

    border: none;

}



.custom-accordion .accordion-button:not(.collapsed) {

    background: linear-gradient(135deg, var(--main-color-hover), var(--main-color));

    color: #fff;

}



.custom-accordion .accordion-button::after {

    filter: brightness(0) invert(1);

}



.custom-accordion .accordion-button.collapsed::after {

    filter: none;

}



.custom-accordion .accordion-body {

    padding: 22px 25px;

    color: #4b5563;

    line-height: 1.8;

    font-size: 0.875rem;

}



.faq-badge {

    width: 42px;

    height: 42px;

    background: #edededcc !important;

    color: var(--main-color-hover);

    font-weight: 700;

    border-radius: 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 15px;

    flex-shrink: 0;

}



@media (max-width: 768px) {

    .custom-accordion .accordion-button {

        font-size: 0.95rem;

        padding: 18px;

    }



    .custom-accordion .accordion-body {

        padding: 18px;

    }

}



@media (max-width: 991px) {

    .product-details-page-container .product-image-wrapper {

        position: static !important;

    }

}



@media (max-width: 768px) {

    .product-details-page-container .product-title {

        font-size: 1.5rem;

    }



    .product-details-page-container .section-header h3 {

        font-size: 1.5rem;

    }



    .product-details-page-container .related-products-section {

        margin: 1.6rem -0.7rem 0;

        padding: 2rem 1rem;

    }

}



@media (max-width: 576px) {

    .product-details-page-container .product-title {

        font-size: 1.3rem;

    }



    .product-details-page-container .product-info-wrapper {

        background: #f5f9ff;

        padding: 1.5rem;

        border-radius: 12px;

        margin-top: 1rem;

    }



    .product-details-page-container .product-header {

        margin-bottom: 1rem !important;

    }



    .product-details-page-container .category-badge {

        font-size: 0.85rem;

        padding: 0.4rem 0.85rem;

    }



    .product-details-page-container .section-title {

        font-size: 1rem;

    }



    .product-details-page-container .description-content {

        font-size: 0.9rem;

    }



    .product-details-page-container .description-content table tr th,

    .product-details-page-container .description-content table tr td {

        font-size: 0.85rem;

        padding: 0.6rem 0.5rem;

    }



    .product-details-page-container .cta-section {

        margin-top: 1.5rem !important;

        padding-top: 1.5rem !important;

    }



    .product-details-page-container .section-header {

        margin-bottom: 1.5rem !important;

    }



    .product-details-page-container .section-header h3 {

        font-size: 1.25rem;

    }



    .product-details-page-container .section-header p {

        font-size: 0.9rem;

    }



    .product-details-page-container .card-content {

        padding: 0.75rem;

    }



    .product-details-page-container .product-name {

        font-size: 0.85rem;

    }



    .product-details-page-container .product-category {

        font-size: 0.75rem;

    }

}



.prismo-product-slider {

    width: 100%;

}



.prismo-slider-main-image {

    position: relative;

    width: 100%;

    height: 650px;

    overflow: hidden;

    background: #fff;

    border-radius: 14px;

}



.prismo-slide {

    position: absolute;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

}



.prismo-slide.prismo-active {

    display: flex;

}





.prismo-product-image {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 20px;

}



.prismo-slider-thumbnails {

    display: flex;

    gap: 10px;

    margin-top: 15px;

    overflow-x: auto;

}



.prismo-thumbnail {

    width: 80px;

    height: 80px;

    object-fit: cover;

    border-radius: 10px;

    cursor: pointer;

    border: 2px solid transparent;

    opacity: .7;

    transition: .3s;

}



.prismo-thumbnail.prismo-active {

    border-color: #bbb;

    opacity: 1;

}



@media(max-width:576px) {

    .prismo-slider-main-image {

        height: 400px;

    }



    .prismo-thumbnail {

        width: 65px;

        height: 65px;

    }



    .prismo-product-image {

        padding: 14px;

    }

}



/* project page */



.project-page-container {

    min-height: 100vh;

}



.project-page-container .section-title {

    color: #ffffff;

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 3rem;

    text-align: center;

}



.project-page-container .project-card {

    background: #ffffff;

    border-radius: 15px;

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    height: 100%;

}



.project-page-container .project-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

}



.project-page-container .project-image {

    width: 100%;

    height: 250px;

    object-fit: cover;

}



.project-page-container .card-body {

    padding: 1.5rem;

}



.project-page-container .project-title {

    font-size: 1.3rem;

    font-weight: 600;

    color: var(--main-color-hover);

    margin-bottom: 0.75rem;

}



.project-page-container .project-description {

    color: var(--main2-color);

    text-align: justify;

    font-size: 0.85rem;

    line-height: 1.6;

}



.project-card {

    border-radius: 18px;

    overflow: hidden;

    transition: 0.35s ease;

    border: 1px solid #f1f1f1;

}



.project-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;

}



.project-img-wrapper {

    overflow: hidden;

    height: 240px;

}



.project-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s ease;

}



.project-card:hover .project-image {

    transform: scale(1.06);

}



.project-title {

    font-size: 1.15rem;

    line-height: 1.5;

    min-height: 60px;

}



.project-step {

    display: flex;

    gap: 15px;

    margin-bottom: 24px;

    position: relative;

}



.project-step:not(:last-child)::after {

    content: "";

    position: absolute;

    left: 20px;

    top: 45px;

    width: 2px;

    height: calc(100% + 5px);

    background: #e9ecef;

}



.step-badge {

    min-width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 14px;

}



.challenge {

    background: #dc3545;

}



.solution {

    background: #0d6efd;

}



.result {

    background: #198754;

}



.project-step p {

    line-height: 1.7;

}



/* career page */



.career-card {

    border: none;

    border-radius: 12px;

    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); */

    padding: 2rem;

    background-image: radial-gradient(circle at 57% 36%, hsla(263, 0%, 78%, 0.04) 0%, hsla(263, 0%, 78%, 0.04) 10%, transparent 10%, transparent 100%), radial-gradient(circle at 22% 61%, hsla(263, 0%, 78%, 0.04) 0%, hsla(263, 0%, 78%, 0.04) 36%, transparent 36%, transparent 100%), radial-gradient(circle at 68% 97%, hsla(263, 0%, 78%, 0.04) 0%, hsla(263, 0%, 78%, 0.04) 41%, transparent 41%, transparent 100%), radial-gradient(circle at 57% 89%, hsla(263, 0%, 78%, 0.04) 0%, hsla(263, 0%, 78%, 0.04) 30%, transparent 30%, transparent 100%), radial-gradient(circle at 39% 80%, hsla(263, 0%, 78%, 0.04) 0%, hsla(263, 0%, 78%, 0.04) 22%, transparent 22%, transparent 100%), radial-gradient(circle at 88% 71%, hsla(263, 0%, 78%, 0.04) 0%, hsla(263, 0%, 78%, 0.04) 30%, transparent 30%, transparent 100%), linear-gradient(0deg, rgb(255, 255, 255), rgb(255, 255, 255));

    ;

    border: 1px solid #ddd;

}



.career-card h3 {

    color: var(--main-color-hover);

}



.career-card label {

    font-weight: 400;

    letter-spacing: 0.5px;

}



.career-card input::placeholder,

.career-card textarea::placeholder {

    color: #ccc;

}



.career-card button.btn {

    background-color: var(--main-color);

}



.career-card button.btn:hover {

    background-color: var(--main-color-hover);

}





/* contact page quote design */

.cta-modern {

    position: relative;

    background: linear-gradient(135deg, #1e385f, #3368b8);

    overflow: hidden;

    transition: all 0.3s ease;

}



.cta-modern::before {

    content: "";

    position: absolute;

    inset: 0;

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(10px);

}



.cta-modern::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    background: rgba(255, 255, 255, 0.15);

    filter: blur(100px);

    top: -80px;

    right: -80px;

}





.cta-modern>* {

    position: relative;

    z-index: 2;

}



.cta-modern:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);

}



.cta-modern .btn {

    transition: all 0.25s ease;

}



.cta-modern .btn-light:hover {

    transform: scale(1.05);

}



.cta-modern .btn-outline-light:hover {

    background: #fff;

    color: #000;

}



.mobile-cta {

    position: fixed;

    /* top: 70px; */

    left: 0;

    bottom: 0;

    width: 100%;

    z-index: 999;

    background: #fff;

    padding: 8px 12px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

}



.mobile-cta.hide {

    transform: translateY(-100%);

}





.mobile-cta .btn {

    border-radius: 50px;

    font-weight: 600;

    letter-spacing: .3px;

}



.contact-quick-box {

    border-left: 4px solid var(--main-color);

    font-size: 14px;

}



.floating-contact {

    position: fixed;

    right: 15px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    z-index: 999;

}



.floating-contact a {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 18px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}



.call-btn {

    background: #0d6efd;

}



.whatsapp-btn {

    background: #25D366;

}



.event-card {

    height: 220px;

    /* match your normal card height */

}



.event-card img {

    object-fit: cover;

}



/* quote design for products */



.quote-card {

    background: linear-gradient(135deg, #1e385f, #3368b8);

    transition: all 0.3s ease;

}



.quote-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);

}



.quote-glow {

    position: absolute;

    width: 200px;

    height: 200px;

    background: rgba(255, 255, 255, 0.2);

    filter: blur(80px);

    top: -50px;

    right: -50px;

}





/* client page cta section */



/* CTA Section */

.partner-cta {

    padding: 70px 60px;

    background:

        linear-gradient(135deg,

            #0f172a 0%,

            var(--main-color-hover) 45%,

            var(--main-color) 140%);

    color: #fff;

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);

    position: relative;



    .cta-btn-primary {

        background: #fff;

        color: #111827;

        border: none;

        padding: 16px 30px;

        border-radius: 60px;

        font-weight: 700;

        font-size: 15px;

        transition: all 0.3s ease;

        box-shadow: 0 10px 30px rgba(255, 255, 255, 0.18);

    }



    .cta-btn-primary:hover {

        transform: translateY(-3px);

        background: var(--main-color-hover);

        color: #fff;

    }

}



.cta-glow {

    position: absolute;

    width: 280px;

    height: 280px;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    top: -120px;

    right: -80px;

    filter: blur(10px);

}



.cta-badge {

    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.08);

    padding: 10px 18px;

    border-radius: 50px;

    font-size: 13px;

    font-weight: 600;

    backdrop-filter: blur(10px);

}



.cta-title {

    font-size: clamp(2rem, 5vw, 3.3rem);

    font-weight: 800;

    line-height: 1.15;

}



.cta-title span {

    color: #fff;

}



.cta-text {

    color: rgba(255, 255, 255, 0.78);

    font-size: 1.05rem;

    line-height: 1.8;

    max-width: 700px;

}



.cta-btn-outline {

    border: 1px solid rgba(255, 255, 255, 0.25);

    color: #fff;

    padding: 14px 28px;

    border-radius: 50px;

    transition: 0.3s ease;

}



.cta-btn-outline:hover {

    background: rgba(255, 255, 255, 0.05);

    color: #fff;

}



@media (max-width: 768px) {



    .partner-cta {

        padding: 45px 25px;



        .cta-btn-primary {

            width: 100%;

        }

    }



    .cta-text {

        font-size: 15px;

    }

}



/* video cards  for events*/



.video-card {

    transition: all 0.3s ease;

    background: #fff;

}



.video-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15);

}



.video-wrapper iframe {

    border: none;

}



.video-card::before {

    content: "";

    height: 4px;

    width: 100%;

    background: linear-gradient(90deg, var(--main-color), var(--main-color-hover));

    display: block;

}





/* PRODUCT BROCHURE CARD */



.brochure-download-card {

    background: linear-gradient(135deg,

            rgba(51, 104, 184, 0.06),

            rgba(30, 56, 95, 0.04));



    border: 1px solid rgba(51, 104, 184, 0.12);

    border-radius: 22px;

    padding: 24px;

    transition: .3s ease;



    .brochure-icon {

        width: 65px;

        height: 65px;

        min-width: 65px;



        border-radius: 18px;



        background: linear-gradient(135deg,

                var(--main-color),

                var(--main-color-hover));



        color: #fff;



        display: flex;

        align-items: center;

        justify-content: center;



        font-size: 26px;



        box-shadow: 0 10px 25px rgba(51, 104, 184, 0.20);

    }



    .brochure-title {

        font-size: 1.1rem;

        font-weight: 700;

        color: var(--dark-text);

    }



    .brochure-text {

        color: var(--main2-color);

        line-height: 1.7;

        font-size: .85rem;

        max-width: 500px;

    }



    /* .brochure-btn {

        background: linear-gradient(135deg,

                var(--main-color),

                var(--main-color-hover));



        color: #fff;

        border: none;

        border-radius: 12px;

        padding: 12px 24px;

        font-weight: 600;

        transition: .3s ease;

    }



    .brochure-btn:hover {

        color: #fff;

        transform: translateY(-2px);

    } */



    .brochure-btn {

    background: linear-gradient(135deg,

                var(--main-color),

                var(--main-color-hover));



        color: #fff;

        border: none;

        border-radius: 12px;

        padding: 12px 24px;

        font-weight: 600;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

        white-space: nowrap;      /* Prevent line break */

        min-width: 190px;         /* Increase width */

        transition: .3s ease;

    }



    .brochure-btn:hover {

        color: #fff;

        transform: translateY(-2px);

    }



}



.brochure-download-card:hover {

    transform: translateY(-2px);

}





@media(max-width:576px) {



    .brochure-download-card {

        padding: 18px;

        text-align: center;



        .brochure-icon {

            width: 55px;

            height: 55px;

            min-width: 55px;

            font-size: 22px;

        }



        .brochure-btn {

            width: 100%;

        }

    }

}



/* video section in index page */



.youtube-section {

    .video-wrapper {

        position: relative;

        /* max-width: 1100px; */

        margin: auto;

        border-radius: 28px;

        overflow: hidden;

        transition: 0.4s ease;

    }



    .video-wrapper:hover {

        transform: translateY(-5px);

    }



    .youtube-video {

        width: 100%;

        height: 650px;

        border: 0;

        display: block;



        pointer-events: none;

    }



    .video-overlay {

        position: absolute;

        inset: 0;

        background:

            linear-gradient(to top,

                rgba(0, 0, 0, 0.85),

                rgba(0, 0, 0, 0.15));



        display: flex;

        align-items: center;

        justify-content: center;



        transition: 0.4s ease;

    }



    .play-button {

        width: 100px;

        height: 100px;

        border-radius: 50%;

        background: var(--main-color);

        display: flex;

        align-items: center;

        justify-content: center;



        color: #fff;

        font-size: 42px;



        transform: scale(0);

        transition: 0.35s ease;



        box-shadow: 0 0 30px rgba(0, 153, 255, 0.6);

    }



    .video-wrapper:hover .play-button {

        transform: scale(1);

    }



    .youtube-badge {

        position: absolute;

        top: 25px;

        right: 25px;



        background: #ff0000;

        color: #fff;



        padding: 10px 18px;

        border-radius: 50px;



        font-weight: 600;

        font-size: 15px;



        display: flex;

        align-items: center;

        gap: 8px;



        z-index: 5;



        box-shadow: 0 5px 20px rgba(255, 0, 0, 0.4);

    }



    .video-content {

        position: absolute;

        left: 0;

        bottom: 0;

        width: 100%;



        padding: 40px;

        z-index: 3;

    }



    .video-content h2 {

        color: #fff;

        font-size: 42px;

        font-weight: 700;

        margin-bottom: 15px;

    }



    .video-content p {

        color: #d1d5db;

        max-width: 700px;

        line-height: 1.7;

        margin: 0;

        font-size: 16px;

    }

}



@media(max-width:992px) {



    .youtube-section {

        .youtube-video {

            height: 500px;

        }



        .video-content h2 {

            font-size: 30px;

        }

    }

}



@media(max-width:768px) {

    .youtube-section {

        .youtube-video {

            height: 300px;

        }



        .video-content {

            padding: 20px;

        }



        .video-content h2 {

            font-size: 22px;

        }



        .video-content p {

            font-size: 14px;

        }



        .play-button {

            width: 75px;

            height: 75px;

            font-size: 32px;

        }



        .youtube-badge {

            top: 15px;

            right: 15px;

            padding: 8px 14px;

            font-size: 13px;

        }



    }

}



/* testimonial cards — normal document flow (no fixed heights or absolute
   overlays), so long client names/roles/quotes never clip or overlap the
   star rating badge, at any screen size. */

.testimonial-card-div {
    width: 100%;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
    gap: 20px;
}

.testimonial-card {
    width: 100%;
    max-width: 430px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid #eef1f5;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(51, 104, 184, 0.18);
}

.testimonial-card-inner {
    display: flex;
    flex-direction: column;
}

.testimonial-card-img {
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.testimonial-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.testimonial-card-content {
    width: 100%;
    height: auto;
    position: static;
    background: linear-gradient(135deg, var(--main-color), var(--main-color-hover));
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    padding: 26px 26px 24px;
}

.testimonial-card-content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-align: left;
    margin: 0 0 12px;
}

.testimonial-card-content p {
    margin: 0;
}

.testimonial-card-content p:nth-of-type(1) {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin-bottom: 18px;
}

.testimonial-card-content p:nth-of-type(2) {
    font-weight: 700;
    color: #fff;
    font-size: 0.96rem;
}

.testimonial-card-content p:nth-of-type(3) {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.5;
    margin-top: 3px;
}

.testimonial-stars {
    width: auto;
    height: auto;
    background: transparent;
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-top: 18px;
    padding: 0;
    border: none;
    border-radius: 0;
}

.testimonial-star {
    color: #ffc94d;
    font-size: 16px;
}

/* ===========================
   Tablet (1024px and below)
=========================== */
@media (max-width: 1024px) {
    .testimonial-card-div {
        justify-content: center;
        gap: 30px;
        padding: 20px;
    }
}

/* ===========================
   Mobile (768px and below)
=========================== */
@media (max-width: 768px) {
    .testimonial-card-div {
        padding: 20px 15px;
        gap: 30px;
    }

    .testimonial-card-content h2 {
        font-size: 1.1rem;
    }

    .testimonial-card-content p:nth-of-type(1) {
        font-size: 0.9rem;
    }

    .testimonial-card-content p:nth-of-type(2) {
        font-size: 1rem;
    }
}

/* ===========================
   Small Mobile (480px)
=========================== */
@media (max-width: 480px) {
    .testimonial-card-div {
        padding: 15px 10px;
        gap: 22px;
    }

    .testimonial-card-content {
        padding: 20px 18px 18px;
    }

    .testimonial-card-content h2 {
        font-size: 1.05rem;
    }

    .testimonial-star {
        font-size: 15px;
    }
}


/* ============================================================
   TESTIMONIAL CARDS v2 (index.php "What Our Clients Say")
   Ribbon + floating photo + white review panel, in the style of a
   review-card template. Old .testimonial-card-content-based classes
   above are left in place — about.php's testimonial section still
   uses the plain .testimonial-card class and depends on them.
   ============================================================ */

.testimonial-card-v2 {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(160deg, #eaf1fb, #dbe7f6);
    border-radius: 28px;
    padding: 26px 22px 24px;
}

.tcard-top-row {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: -26px;
}

.tcard-ribbon {
    position: relative;
    flex: 1;
    min-width: 0;
    background: linear-gradient(135deg, #16233c, var(--main-color-hover));
    color: #fff;
    padding: 16px 18px 30px;
    border-radius: 6px 20px 20px 6px;
}

.tcard-ribbon::after {
    content: '';
    position: absolute;
    left: 14px;
    bottom: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: #16233c transparent transparent transparent;
}

.tcard-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.tcard-label {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.tcard-stars {
    display: flex;
    gap: 3px;
}

.tcard-stars i {
    color: #ffc94d;
    font-size: 14px;
}

.tcard-photo {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.18);
    overflow: hidden;
    margin-top: 6px;
}

.tcard-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.tcard-body {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 22px;
    padding: 38px 22px 24px;
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card-v2:hover .tcard-body {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(51, 104, 184, 0.16);
}

.tcard-role-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 3px;
}

.tcard-role-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dark-text-hover);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 14px;
}

.tcard-quote {
    font-size: 0.92rem;
    color: var(--dark-text-hover);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 480px) {
    .tcard-photo {
        width: 68px;
        height: 68px;
    }

    .tcard-name {
        font-size: 0.92rem;
    }

    .tcard-body {
        padding-top: 34px;
    }
}

/* ============================================================
   RESPONSIVE POLISH
   The layout already collapses correctly at every breakpoint
   (no horizontal overflow at 320-1024px). These rules only fix
   two readability issues that show up on small screens:
     1. A media safety-net so a stray image can never force
        sideways scrolling on a future edit.
     2. Justified body copy opens ugly word-spacing "rivers" on
        narrow columns — left-align it on phones/small tablets.
   ============================================================ */
img,
svg,
video,
canvas {
    max-width: 100%;
}

@media (max-width: 767.98px) {

    .text-justify,
    .hero-content,
    .about-content p,
    .our-vision p,
    .what-we-do .row p,
    .why-work-with-us .row p,
    section.testimonial .content .contentBox p,
    .team-all-members-container .member-intro,
    .about-page-container .value-card p,
    .about-page-container .hero-content,
    .project-page-container .project-description,
    .pv2-content p,
    .pdv2-prose p {
        text-align: left !important;
    }
}

/* Homepage hero carousel — the banner images carry their own text.
   Full-bleed (background cover, always 100% width) and exactly one
   screen tall (viewport minus the 50px topbar + 60px navbar), so it
   never runs past the fold and never leaves side gaps. */
.carousel {
    height: calc(100vh - 110px);
}

.slide-content {
    width: 100%;
}

@media (max-width: 992px) {
    .carousel {
        height: calc(100vh - 70px);
    }
}

/* About page — full-width image banner in place of the old text heading.
   Show the whole image (no crop), at its natural aspect ratio. */
.about-hero-image {
    width: 100%;
    line-height: 0;
}

.about-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Footer BRANCHES list — a real CSS grid so every card sits in an even
   row/column with consistent gaps (Bootstrap's float/flex row staggered
   the cards when addresses were different lengths). */
.footer-branch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 48px;
    row-gap: 40px;
    align-items: start;
}

.footer-branch-grid > h3 {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.footer-branch-item {
    line-height: 1.7;
}

@media (max-width: 991px) {
    .footer-branch-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 32px;
        row-gap: 32px;
    }
}

@media (max-width: 575px) {
    .footer-branch-grid {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }
}