* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

html {
    cursor: url("/Images/cursor.png"), auto;
}

::-webkit-scrollbar {
    scrollbar-width: thin;

    width: 10px;
    background: transparent;
}

::-webkit-scrollbar-track {
    background: #00b06100; /* Transparent track */
}

::-webkit-scrollbar-thumb {
    background: grey; /* Grey slider */
    border-radius: 5rem;
}

::-webkit-scrollbar-thumb:hover {
    background: darkgrey; /* Slightly darker on hover */
    
}


* {
    scrollbar-width: thin;
    scrollbar-color: rgb(70, 70, 70) transparent;
}


body {
    background-color: rgb(0, 0, 0);
    color: white;
    text-align: center;
    height: 300vh;
}



/* Navbar region */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 50px;
    
    background-color: rgb(0, 0, 0);
}

.logo img {
    height: 40px; /* Adjust size as needed */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links li {
    display: inline;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #fbc02d; /* Golden yellow hover */
}

.btn {
    padding: 10px 20px;
    background-color: white;
    color: black;
    font-weight: bold;
    text-decoration: none;
    border-radius: 20px;
    transition: background 0.3s, color 0.3s;
}

.btn:hover {
    background-color: #fbc02d;
    color: black;
}

/* Mobile Menu Icon */
.menu-toggle {
    display: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        color: white;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: black;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        display: none;
        padding: 20px 0;
    }
    .navbar{
        padding-right: 3rem;
        padding-left: 0.5rem;
        gap: 11rem;
        justify-content: space-between;
    }

    .nav-links.active {
        z-index: 99999;
        display: flex;
        background-color: #000000ad;
        margin-top: -636px;
        padding: 6px;
        backdrop-filter: blur(4px);
    }

    .nav-links li {
        display: block;
    }

    .btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .btn{
        display: none !important;
        
    }
    

    
        .menu-toggle {
            display: block;
            color: white;
        }
    
        .nav-links {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: black;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            display: none;
            padding: 20px 0;
        }
        .navbar{
            padding-right: 3rem;
            padding-left: 0.5rem;
            gap: 11rem;
            justify-content: space-between;
        }
    
        .nav-links.active {
            display: flex
;
        background-color: #000000ad;
        margin-top: -605px;
        backdrop-filter: blur(4px);
        }
    
        .nav-links li {
            display: block;
        }
    
        .btn {
            padding: 8px 16px;
            font-size: 14px;
        }
    
}




/* navbar region ends here */


/* Homepage hero region  */
.hero {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    padding-bottom: 0;
}

.hero-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.hero-content span {
    font-family: 'Poppins', sans-serif;
    color: #00b060;
    font-weight: 700;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 30px auto;
}

video {
    height: 100vh;
    width: 100%;
    margin-top: -4rem;
    border-radius: 10px;
    /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2); */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: white;
    color: black;
    font-size: 2.5rem;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
}

.play-button:hover {
    background: #3b3b3b;
}

.contact-wrapper {
    position: absolute;
    top: -50px; /* Adjust as needed */
    right: -50px; /* Adjust as needed */
    width: 150px;
    height: 150px;
    gap: 2rem;
}

/* Main circular button */
.contact-btn {
    width: 150px;
    height: 150px;
    background: #fbc02d; /* Yellow background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;

    position: relative;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* Arrow icon */
.contact-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    rotate: 2rem;
    transform: translate(-50%, -50%) rotate(30deg);
    width: 24px;  /* Adjust width */
    height: 28px; /* Adjust height to make it longer */
    stroke-width: 2px;
}

/* SVG rotating effect */
.svg-text {
    gap: 2rem;
    font-weight: bold;
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotateText 10s linear infinite;
}

/* Rotating animation */
@keyframes rotateText {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 768px) {
    .contact-wrapper {
        width: 95%;
        left: 2rem;
        opacity: 0;
    }
    .marquee-content img {
        height: 30px;
    }
    .marquee-content {
        animation-duration: 8s;
    }
}


/* Home page hero ends here */


/* marquee with brand starts here */

/* Marquee Container */
.marquee-container {
    position: relative;
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 10px 0;
    padding-bottom: 4rem;
}

/* Gradient Fade Effect */
.marquee-container::before,
.marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, black 0%, transparent 100%);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, black 0%, transparent 100%);
}

/* Marquee Animation */
.marquee {
    padding-top: 0;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: flex;
    gap: 60px;
    animation: marqueeScroll 20s linear infinite;
    width: calc(9 * 120px); /* Adjust width dynamically */
}

/* Style the logos */
.marquee-content img {
    padding-top: 0;
    height: 52px;
    /*filter: grayscale(0%) brightness(100%);*/
    transition: opacity 0.5s ease-in-out;
}


/* Animation */
@keyframes marqueeScroll {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .marquee-container {
        width: 95%;
        height: 0rem;
        padding-bottom: 3rem;
    }
    .marquee-content img {
        height: 30px;
    }
    .marquee-content {
        animation-duration: 8s;
    }
}

/* marquee for brand ends here */

:root {
    --cards: 5;
    --cardHeight: 18vh;
    --cardMargin: 2rem;
    --topOffset: 10rem; /* Space from top */
}


/* home second heading starts here */


/* Section Layout */
.second-heading {
    padding-top: 1rem;
    position: relative;
    display: flex;
    width: 80%;
    margin: auto;
    justify-content: space-between;
    align-items: flex-start;
    height: 50%; /* Ensures enough scroll space */
}

.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10rem;
    width: 100%;
}

/* Left Text Content */
.text-content {
    width: 35%;
    position: sticky;
    top: var(--topOffset);
    height: fit-content;
    text-align: left;
    line-height: 2rem;
}

.text-content h3 {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.text-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: bold;
    line-height: 1.2;
}

.text-content .highlight {
    color: #a97dfa;
}

.text-content p {
    font-size: 16px;
    margin-top: 25px;
    line-height: 1.5;
}

.learn-more {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    font-weight: bold;
    background: white;
    color: black;
    height: 3rem;
    padding: 12px 18px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.learn-more span {
    margin-left: 10px;
    transform: rotate(45deg);
}

/* Right Dynamic Stacking Cards */
.right-content {
    width: 60%;
    position: relative;
    height: 100vh;
}

.cards {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--cards), var(--cardHeight));
    gap: var(--cardMargin);
}

.card {
    position: sticky;
    top: var(--topOffset);
    height: var(--cardHeight);
    border-radius: 15px;
    display: flex;
    
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
}

.card1 {
    line-height: 2rem;
    position: sticky;
    top: var(--topOffset);
    height: var(--cardHeight);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    transform: rotate(0.5deg);
    font-size: 1.2rem;
    /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
}

.card2 {
    line-height: 2rem;
    position: sticky;
    top: var(--topOffset);
    height: var(--cardHeight);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    transform: rotate(-0.5deg);
    font-size: 1.2rem;
    /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
}

.card3 {
    line-height: 2rem;
    position: sticky;
    top: var(--topOffset);
    height: var(--cardHeight);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    transform: rotate(0.5deg);
    font-size: 1.2rem;
    /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
}

.card4 {
    line-height: 2rem;
    position: sticky;
    top: var(--topOffset);
    height: var(--cardHeight);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    transform: rotate(-0.5deg);
    font-size: 1.2rem;
    /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
}

.card5 {
    line-height: 2rem;
    position: sticky;
    top: var(--topOffset);
    height: var(--cardHeight);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    transform: rotate(0.5deg);
    font-size: 1.2rem;
    /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
}



/* Card Colors */
#card1 { background: #02A8FF; z-index: 5; }
#card2 { background: #05B178; z-index: 4; }
#card3 { background: #FAD01D; z-index: 3; }
#card4 { background: #F84616; z-index: 2; }
#card5 { background: #373737; z-index: 1; }

/* Responsive Layout for Mobile */
@media (max-width: 768px) {
    .second-heading {
        flex-direction: column;
        width: 90%;
        
    }

    /* gonna try */

    .cards {
        list-style: none;
        padding-left: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(var(--cards), var(--cardHeight));
        gap: var(--cardMargin);
    }

    .card {
        position: sticky;
    top: var(--topOffset);
    height: var(--cardHeight);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
    }

    .card1 {
        position: sticky;
        top: var(--topOffset);
        height: var(--cardHeight);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        transform: rotate(0.5deg);
        font-size: 1.2rem;
        /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
    }
    
    .card2 {
        position: sticky;
        top: var(--topOffset);
        height: var(--cardHeight);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        transform: rotate(-0.5deg);
        font-size: 1.2rem;
        /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
    }
    
    .card3 {
        position: sticky;
        top: var(--topOffset);
        height: var(--cardHeight);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        transform: rotate(0.5deg);
        font-size: 1.2rem;
        /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
    }
    
    .card4 {
        position: sticky;
        top: var(--topOffset);
        height: var(--cardHeight);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        transform: rotate(-0.5deg);
        font-size: 1.2rem;
        /* box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1); */
    }

    #card1 { background: #02A8FF; z-index: 5; }
#card2 { background: #05B178; z-index: 4; }
#card3 { background: #FAD01D; z-index: 3; }
#card4 { background: #F84616; z-index: 2; }
#card5 { background: #373737; z-index: 1; }
    

    /* might work */

    .content-wrapper {
        flex-direction: column;
        gap: 7rem;
        align-items: center;
        text-align: center;
    }

    /* Left Text Content */
    .text-content {
        width: 100%;
        position: relative;
        text-align: center;
        padding: 1rem;
        line-height: 2rem;
        margin-top: -142px;
    }

    .text-content h1 {
        font-size: 32px;
    }

    .text-content p {
        font-size: 14px;
    }

    .learn-more {
        display: inline-block;
        width: auto;
        font-size: 14px;
        padding: 10px 16px;
    }

    /* Right Cards Adjustments */
    .right-content {
        width: 100%;
        height: auto;
        top: 4rem;
    }

    .cards {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        padding-left: 0;
    }

    .card, .card1, .card2, .card3, .card4, .card5 {
        
        height: auto;
        padding: 15px;
        font-size: 1rem;
        text-align: center;
    }
}

/* Second heading with scroll effect ends here for homepage */


/* Stats banner for homepage */

/* Banner Section */
.stats-banner {
    /* margin-top: 17rem; */
    background-color: red;
    background: url('/Images/BBd.jpg') no-repeat center center/cover;
    width: 100%;
    padding: 4rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stats-container {
    padding-top: rem;
    display: flex;
    justify-content: space-around;
    width: 80%;
    max-width: 1200px;
    text-align: center;
}

.stat-item {
    flex: 1;
}

.stat-item h2 {
    font-size: 2.5rem;
    font-weight: 700;
}

.stat-item p {
    
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .stats-container {
        flex-direction: column;
        gap: 2rem;
    }

    .stat-item h2 {
        font-size: 2rem;
    }
}

/* stats banner ends here for homepage */



/* --------------------x------------------x--------------------x------------- */

/* Portfolio in homepage starts here */


/* Portfolio Section */
.portfolio-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5rem 7%;
    padding-bottom: 3rem;
}

.portfolio-text {
    text-align: left;
    max-width: 54%;
}

.portfolio-text h3 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #aaa;
}

.portfolio-text h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 0.5rem;
    font-family: 'Playfair Display', serif;
}

.portfolio-text h2 span {
    color: #ff5a1f; /* Orange color for "practical works" */
}

/* View All Works Button */
.portfolio-button {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background: white;
    color: black;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50px;
    transition: 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.1);
}

.portfolio-button:hover {
    transform: scale(1.05);
}

.portfolio-button span {
    margin-left: 8px;
    font-size: 1.2rem;
    transition: 0.3s;
}

.portfolio-button:hover span {
    transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .portfolio-section {
        padding: 4rem 5%;
    }
}

@media (max-width: 768px) {
    .portfolio-section {
        flex-direction: column;
        text-align: left;
        gap: 2rem;
        padding-top: 38px;
        padding-bottom: 48px;
    }

    .portfolio-text {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .portfolio-text h2 {
        font-size: 2rem;
    }

    .portfolio-button {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
}

/* portfolio in homepage ends here */


.home-services-section{
    padding-bottom: 4rem;
    background-color: rgba(255, 0, 0, 0);
}

.home-service-image img{
    width: 90%;

}

@media (max-width: 768px){
    .home-service-image img{
        width: 90%;
        height: 11rem;
    
    }
}

/* -----------------x------------------------x-----------------------x------------------------ */

/* green marquee in homepage */

.imarquee-container {
    height: 5rem;
    width: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    align-items: center;
    white-space: nowrap;
    background-color: #00b579;
    padding: 10px 0;
    
}

.imarquee-content {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0rem;
    display: inline-block;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
    font-size: 30px;
    font-weight: bold;
    color: black;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@media (max-width:768px){
    .imarquee-content{
        width: 200px;
        /* animation: marquee-scroll 30s linear infinite; */
    }
}

/* green marquee ends here */




/* ---------x------------------------x---------------------x-------------------x------------------ */

/* Team section inside homepage starts here */

.team-section {
    background-color: black;
    color: white;
    padding: 80px 50px;
    
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Large Image Block (Spanning 3 Columns) */
.team-intro {
    position: relative;
    grid-column: span 3;
    height: 300px;
    color: white;
    border-radius: 10px;
    overflow: hidden;
    position: relative; /* Ensures it's above other elements */
    z-index: 999;
}

/* Text Overlapping the Large Image */
.overlay-text {
    
    text-align: left;
    position: absolute;
    top: 72px;
    left: 30px;
    color: white;
}

.overlay-text p {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.overlay-text h1 {
    text-align: left;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 5px;
}

.overlay-text h1 span {
    color: #ffcc00; /* Yellow color */
}

.overlay-text .subtext {
    font-size: 16px;
    margin-top: 5px;
    opacity: 0.7;
}

.team-intro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

/* Flip Card Effect */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 300px;
    perspective: 1000px; /* Enables 3D effect */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Flip Animation */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background: black;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    border-radius: 10px;
}

.flip-card-back {
    background: rgb(47, 47, 47);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: rotateY(180deg);
    border-radius: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-intro {
        grid-column: span 2;
    }
    .team-section {
        padding: 66px 15px;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    .team-intro {
        grid-column: span 1;
    }
}

/* Team section inside homepage ends here */


/* Homepage lastbanner section starts here */

.last-banner {
    width: 90%;
    max-width: 1100px;
    background: url('/Images/lastbannerdir.png') no-repeat center center/cover;
    border-radius: 15px;
    padding: 60px;
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    margin: auto; /* Centers it without modifying body */
}

.last-banner img

.last-banner-content {
    display: flex;
    column-gap: 16rem;
    align-items: center;
    justify-content: center;
}

.last-banner h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
}

.last-banner h1 span {
    color: #18a558; /* Green text */
}

.last-banner p {
    font-size: 1.1rem;
    margin: 15px 0;
    line-height: 1.5;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    background: white;
    color: black;
    height: 3rem;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    transition: 0.3s;
}

.btn span {
    margin-left: 8px;
}

.btn:hover {
    background: #ddd;
}

/* homepage lastebanner ends here */

/* ============X========= home page ends here==========x================= */



/* ===============x=================x===================x================ */

/* =================== AboutUs page starts here ==================== */

/* About section first thing inside about us page starts here */

/* About Section */
.about-section {
    font-family: 'Playfair Display', serif;

    background: black;
    color: white;
    text-align: center;
    padding: 40px 5%;
}

/* About Title */
.about-title {
    font-size: 14px;
    text-transform: uppercase;
    color: #ccc;
    letter-spacing: 2px;
}

/* About Heading */
.about-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 47px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0.9rem 0;
}

.about-content .highlight {
    font-family: 'Playfair Display', serif;

    color: #ffc107;
}

/* About Image */
.about-image {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.about-image img {
    width: 100%;
    max-width: 1021px;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .about-content h2 {
        font-size: 20px;
    }

    .about-image{
        max-width: 100%;
        padding: 0rem;
    }

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


/* first thing in the about us page ends here */

/* about us page 2nd thing as Section starts here*/

.about-kaleidoscope {
    background: rgba(0, 0, 0, 0);
    color: white;
    padding-top: 10px;
    padding-bottom: 7.9rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Two-Column Layout */
.container {
    display: grid
;
    grid-template-columns: 1fr 1fr;
    gap: 0rem;
    max-width: 1524px;
    width: 100%;
    align-items: center;
}

/* Left Column: Image */
.about-image-k {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.about-image-k img {
    width: 75%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.about-text-k h2{
    padding-bottom: 2rem;
}
/* Right Column: Text Content */
.about-text-k {
    line-height: 1.6rem;
    margin-top: 1rem;
    padding-left: 0rem;
    text-align: left;
    max-width: 660px;
}

/*span {*/
/*    color: yellow;*/
/*    font-weight: bolder;*/
/*}*/

/* Stats Section */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.stat-item {
    min-width: 120px;
}

.stat-item h3 {
    font-size: 28px;
    color: white;
}

/* Scroll Animation - Initially Hide Section */
.about-kaleidoscope {
    opacity: 0;
    transform: translateY(50px); /* Start from below */
}

/* Responsive Design */
@media (max-width: 992px) {

    .about-kaleidoscope{
        padding-bottom: 5rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 2rem;
    }
    .container {
        grid-template-columns: 1fr; /* Stack columns on small screens */
        text-align: center;
    }

    .about-image-k{
        width: 305px;
        background-size: contain;
        height: 18rem;
    }
    .about-image-k img{
        width: 305px;
    }

    .about-text-k {
        max-width: 100%;
        padding-top: 2rem;
        text-align: left;
    }

    .about-text-k h2{
        color: yellow;
    }

    .stats {
        justify-content: center;
    }
}

/* About us page 2nd thing section ends here */



/* What we do section inside about box starts here (third thing in the about section starts here)*/

.wht-we-do {
    display: flex
;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    gap: 18rem;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 88px;
    padding-bottom: 0;
}

.content-box {
    gap: 2rem;
    width: 50%;
    margin-left: 4rem;
}

.content-box h2 {
    padding-bottom: 2rem;
    font-size: 32px;
    font-weight: bold;
}

.content-box h2 span {
    color: #ffcc00; /* Yellow color */
}

.content-box ul {
    text-align: left;
    list-style: disc;
    padding-left: 20px;
    font-size: 17px;
    line-height: 1.6;
}

.image-box {
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

.image-box img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

@media (max-width: 768px){

    .what-we-do{
        display: flexbox;
        align-items: center;
        justify-content: center;
    }

    .content-box ul{
        line-height: 2rem;
        width: 20rem;
        margin-left: -7rem;
    }

    .last-banner {
        min-height: 2rem;
    }
}


/* 3rd thing in the about section ends here */




/* about us page first and last marquee content starts here */

.jmarquee-container {
    height: 5rem;
    width: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    align-items: center;
    white-space: nowrap;
    background-color: #008eff;
    padding: 10px 0;
}

.jmarquee-content {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0rem;
    display: inline-block;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
    font-size: 30px;
    font-weight: bold;
    color: black;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* marquee content inside the about us page ends here */
     


/* ---------------footer area ----------- */

/* Footer Styling */
.footer {
    background: black;
    color: white;
    padding: 88px 5%;
    display: flex;
    justify-content: center;
}

.footer-container {
    display: flex
;
    justify-content: space-between;
    gap: 41rem;
    max-width: 1303px;
    width: 100%;
}

/* Left Section */
.footer-left {
    max-width: 40%;
    text-align: left;
}

.logo {
    width: 180px;
    margin-bottom: 0px;
    display: block;
}

.footer-text {
    font-size: 19px;
    color: #ddd;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons a {
    color: rgb(96, 96, 96);
    font-size: 1.8rem;
    transition: 0.3s ease;
}

.social-icons a:hover {
    color: gray;
}

/* Right Section */
.footer-right {
    display: flex;
    justify-content: space-between;
    width: 50%;
}

/* Footer Links */
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.footer-links li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    width: 15rem;
    justify-content: space-between;
    align-items: center;
}

.footer-links a {
    text-decoration: none;
    font-size: 18px;
    color: #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
    width: 100%;
}

.footer-links a:hover {
    color: gray;
}

.footer-links .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2); /* Circle background */
    border-radius: 50%;
    font-size: 14px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.footer-links a:hover .arrow {
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(3px);
}

/* Responsive Design */
@media (max-width: 768px) {

    .footer-container {
        gap: 3rem;
        flex-direction: column;
    }
    .footer-left .logo{
        padding-bottom: 1rem;
    }

    .footer-left, .footer-right {
        max-width: 100%;
        text-align: left;
    }
    .social-icons{
        padding: 0.5rem 0 1rem;
    }
    .footer-links li{
        width: 16rem;
    }

    .footer-right {
        margin-left: 2rem;
        flex-direction: column;
    }
}


/* Footer Bottom Section */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #b3b3b3;
}

/* Bottom Links */
.footer-links-bottom a {
    color: #b3b3b3;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.footer-links-bottom a:hover {
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

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

    .footer-links-bottom a {
        margin: 0 10px;
    }
}

/* Footer area ends here can be used amywhere */
/* ========================x=====================x================== */





/* ==============x==================x===================x========================= */
/* -------------------------X--- services page css --------------x----------------- */



/* service Section first thing starts here */
.service-section {
    font-family: 'Playfair Display', serif;
    background: rgba(253, 0, 0, 0);
    color: white;
    text-align: center;
    padding: 40px 5%;
}

.service-content{
    width: 1406px;
}

/* service Title */
.service-title {
    font-size: 14px;
    text-transform: uppercase;
    color: #ccc;
    letter-spacing: 2px;
}

/* Service Heading */
.service-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 47px;
    font-weight: bold;
    line-height: 1.3;
    margin: 0.9rem 0;
}

.service-content .highlight {
    font-family: 'Playfair Display', serif;

    color: #ffc107;
}

/* Responsive Design */
@media (max-width: 768px) {

    .service-section{
        width: 100%;
    }
    
    .service-title{
        width: 100%;
    }
    .service-content h2 {
        font-size: 22px;
        width: 100%;
    }
    .service-text{
        padding: 2rem;
        text-align: left ;
    }

    .service-content{
        width: 100%;        
    }

    .service-image img {
        width: 90%;
        border-radius: 1.5rem
    }
}

/* services us page first thing ends here */



/* service page - second thing - Section starts here */
.services-kaleidoscope {
    background: rgba(0, 0, 0, 0);
    color: white;
    padding-top: 10px;
    padding-bottom: 4.5rem;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Two-Column Layout */
.services_container {
    display: grid;
    text-align: left;
    line-height: 2rem;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-left: 8rem;
        padding-right: 2rem;
        padding-top: 2rem;
        padding-bottom: 4rem;
        max-width: 1413px;
        width: 100%;
        align-items: center;
}

/* Left Column: Image */
.services-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.services-image img {
    width: 75%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

/* Right Column: Text Content */
.services-text {
    margin-top: 1rem;
    padding-left: 0rem;
    text-align: left;
    max-width: 660px;
}

/* Stats Section */
.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.stat-item {
    min-width: 120px;
}

.stat-item h3 {
    font-size: 28px;
    color: white;
}

/* Scroll Animation - Initially Hide Section */
.services-kaleidoscope {
    opacity: 0;
    transform: translateY(50px); /* Start from below */
}

/* Responsive Design */
@media (max-width: 992px) {

    .service-kaleidoscope{
        width: 100%;
    }
    .services_container {
        grid-template-columns: 1fr; /* Stack columns on small screens */
        text-align: center;
        display: inline;
    }

    .services-text {
        max-width: 100%;
    }

    .stats {
        justify-content: center;
    }
}

/* service us page 2nd thing ends here */


/* service us page third section starts here */

.service-second-heading {
    background-color: rgba(255, 114, 114, 0);
    color: white;
    padding: 80px 50px;
    display: flex;
    justify-content: flex-start; /* Align content to the left */
    align-items: center;
}



.service-wrapper {
    background-color: rgba(255, 0, 0, 0);
    max-width: 1600px;
    display: flex;
gap: 20rem;
    justify-content: center; /* Ensures left alignment */
}

.service-content1 {
    display: flex;
    text-align: left;
    gap: 4rem;
    max-width: 1560px;
}

.service-content1 h1 {
    font-size: 42px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 20px;
    text-align: left;
}

.service-content1 h1 span {
    display: block;
    width: 39rem;
    font-size: 5rem;
    color: rgb(212, 0, 0);
    font-style: normal;
    font-weight: bolder;
}

.right-service-cont {
    font-size: 16px;
    line-height: 1.5;
}

.right-service-cont p {
    margin-bottom: 15px;
}

.right-service-cont .own-league{
    color: #ffc107;
}

.service-button {
    display: inline-flex;
    align-items: center;
    background: white;
    color: black;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

.service-button span {
    margin-left: 5px;
}

.service-button:hover {
    background: #ddd;
}

/* Responsive Design */
@media (max-width: 768px) {
    .service-second-heading {
        padding: 50px 20px;
        justify-content: center; /* Center align on smaller screens */
    }
    
    .service-wrapper {
        justify-content: center;
    }
    .service-content1 h1 span{
        width: 22rem;
        font-size: 4rem;
    }

    .service-content1 {
        display: inline;
        max-width: 344px;
    }

    .service-content1 h1 {
        font-size: 32px;
    }
    
    .right-service-cont {
        font-size: 14px;
    }
}

/* Services us section 3rd thing ends */




/* Services us page marquee content starts here */

.jmarquee-container {
    height: 5rem;
    width: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    align-items: center;
    white-space: nowrap;
    background-color: #008eff;
    padding: 10px 0;
}

.jmarquee-content {
    font-family: 'Playfair Display', serif;
    letter-spacing: 0rem;
    display: inline-block;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
    font-size: 30px;
    font-weight: bold;
    color: black;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* service page marquee content ends here */


/* Service page ends here */
/* ===========x=============service page ends here=========x=========== */


/* =========x================ contact page =========x========= */
.contact-section {
    text-align: center;
    padding: 4rem 5%;
    background-color: black;
    color: white;
}

.contact-section h3 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #aaa;
}

.contact-section h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 0.5rem;
    font-family: 'Playfair Display', serif;
}

.contact-section h2 span {
    color: #00c66b;
}

.contact-content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 3rem;
}

.contact-image {
    width: 60%;
    max-width: 600px;
    border-radius: 20px;
}

.contact-info {
    text-align: left;
    max-width: 30%;
    line-height: 2rem;
}

.contact-info h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.contact-info p {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #ddd;
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icons a {
    font-size: 1.5rem;
    color: white;
    transition: 0.3s;
}

.social-icons a:hover {
    color: #00c66b;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .contact-image {
        width: 100%;
    }

    .contact-info {
        max-width: 100%;
    }
}



.contact-form-section {
    color: white;
    max-width: 40%;
    margin: auto;
    padding: 2rem;
}

.contact-form-section h2 {
    font-size: 2rem;
    margin-bottom: 4rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

input, select, textarea {
    width: 100%;
    padding:22px;
    border-radius: 39px;
    border: 1px solid rgba(255, 255, 255, 0.557);
    background: black;
    color: white;
    font-size: 1rem;
}

textarea {
    height: 120px;
    resize: none;
}

button {
    background: white;
    color: black;
    font-size: 1rem;
    padding: 12px;
    border-radius: 50px;
    cursor: pointer;
    border: none;
    transition: 0.3s ease-in-out;
}

button:hover {
    transform: scale(1.05);
}

#statusMessage {
    margin-top: 1rem;
    font-size: 1rem;
}