@font-face {
    font-family: Heading;
    src: url(../Font/Rubik-Bold.ttf);
}

@font-face {
    font-family: Button;
    src: url(../Font/Poppins-Bold.ttf);
}

@font-face {
    font-family: Paragraph;
    src: url(../Font/Para_Poppins-Regular.ttf);
}

@font-face {
    font-family: Special_Text;
    src: url(../Font/Speacial_Ponari-Jpw1j.ttf);
}

@font-face {
    font-family: Sub_Heading;
    src: url(../Font/Poppins-Bold.ttf);
}


:root {
    --Dark: #000;
    --Yellow: #ffce33;
    --Green: #143c43;
    --Light: #fff;
    --background-color: #FBFBFB;
    --Heading: Heading;
    --Paragraph: Paragraph;
    --Special_Text: Special_Text;
    --Sub_Heading: Sub_Heading;
    --Button: Button;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    user-select: none;
    background: var(--background-color) !important;
    color: var(--Dark) !important;
    background-size: 100px !important;
}





















/* Carousel Styles */
.Landing-Banner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.Landing-Banner-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.Landing-Banner-item {
    min-width: 100%;
    position: relative;
    padding-top: 5%;
}

.Landing-Banner-item img {
    width: 100%;
    display: block;
}

.Landing-Banner-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--Light);
}

.Landing-Banner-caption h2 {
    font-family: var(--Heading);
    font-size: 3rem;
    margin-bottom: 1rem;
}

.Landing-Banner-caption p {
    font-family: var(--Paragraph);
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.Landing-Banner-caption .btn {
    font-family: var(--Button);
    background-color: var(--Yellow);
    color: var(--Dark);
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.Landing-Banner-caption .btn:hover {
    background-color: var(--Green);
    color: var(--Light);
}

.Landing-Banner-control-prev,
.Landing-Banner-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: var(--Light);
    border: none;
    padding: 1rem;
    cursor: pointer;
    font-size: 2rem;
    z-index: 10;
}

.Landing-Banner-control-prev {
    left: 1rem;
}

.Landing-Banner-control-next {
    right: 1rem;
}

@media (max-width: 1440px) {
    .Landing-Banner-item {
        padding-top: 6.5%;
    }
}

@media (max-width: 1050px) {
    .Landing-Banner-item {
        padding-top: 12%;
    }
}




@media (max-width: 620px) {
    .Landing-Banner-item {
        padding-top: 16%;
    }
}












.Our-Service-container {
    margin: 0 auto;
    padding: 5%;
}

.Our-Service-section-heading {
    text-align: center;
    padding: 0em 0 2.5em;
}

.Our-Service-title {
    color: var(--Dark);
    font-size: 2em;
    margin-bottom: 0.5em;
    font-family: var(--Paragraph);
    text-transform: lowercase;
    font-weight: 100;
}

.Our-Service-highlight {
    color: var(--Green);
    font-size: 1.5em;
    font-family: var(--Heading);
}

.Our-Service-description {
    color: var(--Dark);
    font-size: 1em;
    margin-top: 1em;
}

.Our-Service-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
    padding: 0 1em;
    transition: 0.3s;
}

.Our-Service-card {
    background-color: var(--Light);
    border-radius: 1.375em;
    box-shadow: 0 0.25em 0.375em rgba(0, 0, 0, 0.1);
    width: 22%;
    overflow: hidden;
    transition: 0.3s;
}

.Our-Service-card-header {
    display: flex;
    align-items: center;
    width: 65%;
    padding: 1em 1.5em 0;
    padding-right: 3em;
    border-radius: 0 0 1.875em 0;
    color: var(--Light);
}

.Our-Service-icon {
    font-size: 2em;
}

.Our-Service-card-title {
    font-size: 1.8em;
    font-family: var(--Heading);
    margin-left: 1em;
}

.Our-Service-card-body {
    padding: 1em 1.5625em 1em;
}

.Our-Service-card-description {
    color: var(--Dark);
    font-family: var(--Paragraph);
    font-size: 1.3em;
}

/* Service Card Colors */
.Our-Service-website .Our-Service-card-header {
    background-color: var(--Yellow);
}

.Our-Service-reels .Our-Service-card-header {
    background-color: var(--Green);
}

.Our-Service-logo .Our-Service-card-header {
    background-color: #a68ae1;
}

.Our-Service-social .Our-Service-card-header {
    background-color: tomato;
}


.Our-Service-card,
.Our-Service-icon,
.Our-Service-title {
    will-change: transform, opacity;
    transform-style: preserve-3d;
}


/* Responsive Styles */


@media (max-width: 2000px) {
    .Our-Service-card {
        width: 23%;
    }
}

@media (max-width: 1450px) {
    .Our-Service-card {
        width: 22%;
    }

    .Our-Service-card-description {
        color: var(--Dark);
        font-family: var(--Paragraph);
        font-size: 1em;
    }

    .Our-Service-card-title {
        font-size: 1.1em;
        font-family: var(--Heading);
        margin-left: 1em;
    }

    .Our-Service-card-header {
        width: 60%;
        padding: 1em 1.5em 0;
        padding-right: 2.5em;
        border-radius: 0 0 1.875em 0;
        color: var(--Light);
    }

    .Our-Service-card-body {
        padding: 0.5em 1.5625em 0.5em;
    }
}

@media (max-width: 1200px) {
    .Our-Service-card {
        width: 45%;
    }
}

@media (max-width: 1050px) {
    .Our-Service-card {
        width: 45%;
    }
}

@media (max-width: 820px) {
    .Our-Service-card {
        width: 45%;
    }

}

@media (max-width: 620px) {
    .Our-Service-card {
        width: 100%;
    }
    .Our-Service-title {
        font-size: 1.8em;
    }
    .Our-Service-highlight {
        font-size: 1.1em;
    }
    .Our-Service-section-heading {
        padding: 0.5em 0;
    }
}

@media (max-width: 550px) {
    .Our-Service-card {
        width: 100%;
    }
}

@media (max-width: 450px) {
    .Our-Service-card {
        width: 100%;
    }
}

@media (max-width: 320px) {
    .Our-Service-card {
        width: 100%;
    }
}




















/* MAIN HEADING */

.Animated-Heading {
    height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 0% 5%;
}

.Animated-Heading-Inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 1.5s ease-out forwards;
    /* Initial load animation */
}

/* Main heading styles */
.Animated-Heading-Main {
    font-size: 8em;
    font-weight: 900;

    color: var(--Dark);
    text-align: center;
    letter-spacing: 10px;
    font-family: var(--Special_Text);
    animation: slideDown 1s ease-out 0.5s forwards;
}

.Animated-Heading-Main span {
    color: var(--Green);
    font-family: var(--Heading);
}

.Animated-Heading-Para {
    font-size: 1.5em;
    color: var(--Dark);
    text-align: center;
    font-family: var(--Paragraph);
    padding: 1% 5%;

}

/* Responsive Design */
@media only screen and (max-width: 1400px) {
    .Animated-Heading-Main {
        font-size: 6.5em;
    }
}

@media only screen and (max-width: 1024px) {
    .Animated-Heading-Main {
        font-size: 5em;
    }

    .Animated-Heading-Para {
        font-size: 2.2em;
        padding: 5% 0%;
    }
}

@media only screen and (max-width: 880px) {
    .Animated-Heading-Main {
        font-size: 3.5em;
    }

    .Animated-Heading-Para {
        font-size: 2em;
        padding: 5% 0%;
    }
}

@media only screen and (max-width: 760px) {
    .Animated-Heading-Main {
        font-size: 3em;
    }

    .Animated-Heading-Para {
        font-size: 1.5em;
        padding: 5% 0%;
    }
}

@media only screen and (max-width: 600px) {
    .Animated-Heading-Main {
        font-size: 1.7em;
    }

    .Animated-Heading-Para {
        font-size: 0.9em;
    }
}













/* SIXTH BOX TEXT GRAPHIC  TYPE 2*/
/* SIXTH BOX TEXT GRAPHIC  TYPE 2*/
/* SIXTH BOX TEXT GRAPHIC  TYPE 2*/
/* SIXTH BOX TEXT GRAPHIC  TYPE 2*/
/* SIXTH BOX TEXT GRAPHIC  TYPE 2*/

.sixth-box {
    padding: 0% 10% 5%;
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    overflow-y: hidden;
}

.sixth {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    column-gap: 5%;
}

.sixth-box-pic {
    width: 50%;
    height: auto;
    padding-top: 50px;
    position: relative;
}

.small-ball {
    position: absolute;
    z-index: -1;
    width: 60%;
    height: auto;
    top: 0;
}

.vector1 {
    position: relative;
}

.vector1>img {
    width: 100%;
    height: auto;
}

.combo {
    width: 50%;
    padding-top: 20px;
    position: relative;
}

.sixth-box-content {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    position: relative;
    justify-content: center;
}

.sixth-box-heading {
    font-size: 3.5em;
    letter-spacing: 2px !important;
    padding: 3% 2%;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--Green);
    font-family: var(--Heading);
}

.sixth-box-para {
    font-size: 1.7em;
    color: var(--Dark);
    position: relative;
    padding: 2%;
    font-family: var(--Paragraph);
}

.a {
    padding: 2%;
}


@media only screen and (max-width:1500px) {
    .sixth-box-heading {
        font-size: 2.5em;
        letter-spacing: 2px !important;
        padding: 3% 2%;
    }

    .sixth-box-para {
        font-size: 1em;
        position: relative;
        padding: 2%;
    }

    .a {
        padding: 2%;
    }

}


@media only screen and (max-width:1250px) {

    .sixth-box {
        padding: 2% 10%;
    }
}


@media only screen and (max-width:1050px) {
    .sixth-box-heading {
        font-size: 2em;
        letter-spacing: 2px !important;
        padding: 3% 2%;
    }

    .sixth-box-para {
        font-size: medium;
        position: relative;
        padding: 2%;
    }


}

@media only screen and (max-width:994px) {
    .sixth-box {
        padding: 5% 10% 10%;
    }

    .sixth {
        margin-top: 0px;
    }

    .combo {
        padding-top: 30px;
    }


}

@media only screen and (max-width:965px) {

    .combo {
        width: 100%;
    }

    .sixth {
        flex-direction: column;
    }

    .sixth-box-pic {
        width: 100%;
    }



    .a {
        display: flex;
        justify-content: center;
    }

    .sixth-box-heading {
        font-size: 2em;
        font-weight: 900;
        text-align: center;
    }

    .sixth-box-para {
        font-size: 1.5em;
        text-align: center;
    }

    .button-6 {
        width: 250px;
        font-size: x-large;
        padding: 12px 20px 12px 20px;
        margin-left: auto;
        border: none;
    }

    .a {
        display: flex;
    }


}

@media only screen and (max-width:650px) {
    .sixth {
        column-gap: 2%;
    }

}

@media only screen and (max-width:540px) {
    .a {
        display: flex;
    }

    .sixth-box-heading {
        font-size: 1.7em;
        font-weight: 900;
        text-align: center;
    }

    .sixth-box-para {
        font-size: small;
        text-align: center;
    }


    .a {
        display: flex;
        justify-content: center;
    }

    .small-ball {
        width: 100%;
        left: -30px;
    }
}











/* SevenTH-BOX  TEXT GRAPHIC TYPE 1 */
/* SevenTH-BOX  TEXT GRAPHIC TYPE 1 */
/* SevenTH-BOX  TEXT GRAPHIC TYPE 1 */
/* SevenTH-BOX  TEXT GRAPHIC TYPE 1 */
/* SevenTH-BOX  TEXT GRAPHIC TYPE 1 */
/* SevenTH-BOX  TEXT GRAPHIC TYPE 1 */

.seventh-box {
    padding: 0% 10%;
    position: relative;
}

.flower-pot {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100px;
    height: auto;
    top: -100px;
}

@media only screen and (max-width:630px) {
    .flower-pot {
        width: 75px;
        top: -49px;
    }
}

.seventh {
    position: relative;
    display: flex;
    flex-direction: row;
    column-gap: 5%;
}

.seventh-box-pic {
    width: 40%;
    height: auto;
    align-self: center;
}

.vector2>img {
    width: 100%;
    height: auto;
}

.combo1 {
    width: 50%;
    display: flex;
    flex-flow: column;
    align-self: center;
}

.b {
    padding: 2%;
}

.seventh-box-heading {
    font-size: 3.5em;
    padding: 2%;
    letter-spacing: 2px;
    font-family: var(--Heading);
    color: var(--Green);
}

.seventh-box-para {
    font-size: 1.7em;
    color: var(--Dark);
    padding: 2%;
    font-family: var(--Paragraph);
}



@media only screen and (max-width:1500px) {
    .seventh-box-heading {
        font-size: 2.5em;
        font-weight: 900;
    }

    .seventh-box-para {
        font-size: 1em;
    }
}

@media only screen and (max-width:1300px) {
    .seventh-box-heading {
        font-size: 3em;
        font-weight: 900;
    }

    .seventh-box-para {
        font-size: 1em;
    }
}

@media only screen and (max-width:1050px) {

    .combo1 {
        width: 100%;
    }

    .seventh {
        flex-direction: column-reverse;
    }

    .seventh-box-pic {
        width: 100%;
        margin-top: 0;
        padding-top: 0;
    }

    .seventh-box-heading {
        font-size: 1.7em;
        font-weight: 900;
        text-align: center;
    }

    .seventh-box-heading {
        font-size: 2em;
        font-weight: 900;
        text-align: center;
    }

    .seventh-box-para {
        font-size: 1.5em;
        text-align: center;
    }

    .b {
        justify-content: center;
    }

}

@media only screen and (max-width:994px) {
    .seventh {
        column-gap: 2%;
    }
}



@media only screen and (max-width:965px) {
    .seventh-box {
        padding: 15% 10% 15%
    }
}

@media only screen and (max-width:540px) {
    .seventh-box-heading {
        font-size: 1.7em;
        font-weight: 900;
        text-align: center;
    }

    .seventh-box-para {
        font-size: small;
        text-align: center;
    }

    .b {
        text-align: center;
    }

    .seventh-box-pic {
        margin-top: 0px !important;
        padding-top: 0px !important;
    }
}

/* TEXT GRAPHIC BUTTONS */

.TextGraphic_Button_1 {
    outline: none;
    color: var(--Dark);
    background: var(--background-color);
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    border: 2px solid var(--Green);
    padding: 2% 5%;
    font-weight: 600;
    font-family: var(--Paragraph);
    letter-spacing: 2px;
}

.TextGraphic_Button_1:before {
    content: '';
    background: linear-gradient(45deg, var(--Green), var(--Green));
    position: absolute;
    top: -5px;
    left: -5px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    animation: glowing_1 15s linear infinite;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    border-radius: 10px;
}

.TextGraphic_Button_1:active {
    color: var(--background-color);
}

.TextGraphic_Button_1:active:after {
    background: var(--Green);
}

.TextGraphic_Button_1:hover:before {
    opacity: 1;
}

.TextGraphic_Button_1:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing_1 {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

@media only screen and (max-width:2000px) {
    .TextGraphic_Button_1 {
        font-size: 1.2em;
    }
}

@media only screen and (max-width:1500px) {
    .TextGraphic_Button_1 {
        font-size: 1.2em;
    }
}

@media only screen and (max-width:1250px) {
    .TextGraphic_Button_1 {
        font-size: 1.2em;
    }
}

@media only screen and (max-width:1024px) {
    .TextGraphic_Button_1 {
        font-size: 1em;
        padding: 2% 5%;
    }
}

@media only screen and (max-width:650px) {
    .TextGraphic_Button_1 {
        padding: 5%;
    }
}
















/* WORK CAROUSEL */
/* WORK CAROUSEL */
/* WORK CAROUSEL */
/* WORK CAROUSEL */

/* Universal Carousel - Creative UI */
.universal-carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 2rem 0 0;
    border-radius: 15px;
}

.carousel-container {
    position: relative;
    width: 100%;
}

.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    margin: 5% auto;
}

.carousel-item {
    flex: 0 0 33.333%;
    max-width: 28.333%;
    border-radius: 15px;
    box-shadow: 0 0px 25px -5px rgba(245, 245, 245, 0.6);
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    height: max-content;
}

.carousel-item.active {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.card__image {
    width: 100%;
    border-radius: 15px 15px 0 0;
}

.card__img,
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card__data {
    padding: 1rem;
    text-align: center;
}

.card__name {
    font-size: 1.8rem;
    margin: 0.4em;
    color: var(--Light);
    letter-spacing: 2px;
    font-family: var(--Heading) !important;
}

.card__name:hover {
    color: var(--Yellow);
}

.card__description {
    font-size: 0.8rem;
    color: var(--Light);
    font-family: var(--Paragraph) !important;
}

/* Redesigned Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--Green), var(--Dark));
    color: var(--Light);
    border: none;
    border-radius: 50%;
    font-size: 1.8rem;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.carousel-btn:hover {}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* Pagination Dots */
.carousel-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.carousel-pagination span {
    width: 10px;
    height: 10px;
    background: #d1d5db;
    border-radius: 50%;
    cursor: pointer;
}

.carousel-pagination .active {
    background: #4f46e5;
}




/* Responsive Adjustments */
@media (max-width: 1450px) {
    .carousel-btn {
        font-size: 1.5rem;
        width: 50px;
        height: 50px;
    }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .carousel-item {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .card__name {
        font-size: 2.2rem;
    }

    .carousel-btn {
        display: none;
        visibility: hidden;
    }

    .card__description {
        font-size: 1.4em;
    }
}

@media (max-width: 999px) {
    .carousel-item {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .carousel-btn {
        display: none;
        visibility: hidden;
    }

    .card__name {
        font-size: 2.2rem;
    }

    .card__description {
        font-size: 1.4em;
    }
}

@media (max-width: 768px) {
    .carousel-item {
        flex: 0 0 65%;
        max-width: 65%;
        height: max-content;
    }

    .carousel-btn {
        display: none;
        visibility: hidden;
    }

    .card__name {
        font-size: 2rem;
    }

    .card__description {
        font-size: 1.5em;
    }
}

@media (max-width: 576px) {
    .carousel-item {
        flex: 0 0 70%;
        max-width: 70%;
        height: max-content;
    }

    .carousel-btn {
        display: none;
        visibility: hidden;
    }

    .card__name {
        font-size: 1.2rem;
    }

    .card__description {
        font-size: 0.9em;
    }

}



















































/* Adjust carousel item size and gaps */
.carousel-item {
    flex: 0 0 65%;
    max-width: 65%;
    margin: 0 0%;
    /* Reduce the gap between items */
    border-radius: 15px;
    box-shadow: 0 0px 25px -5px rgba(245, 245, 245, 0.6);
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    padding-top: 30px;
}

/* Ensure images fill the carousel item */
.card__image {
    width: 100%;
    height: 100%;
    border-radius: 15px 15px 0 0;
}

.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure images fill the container */
}

/* Adjust carousel wrapper to reduce gaps */
.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    margin: 0 auto;
    /* Remove extra margin */
    gap: 1%;
    /* Reduce gap between items */
}




.video-content-left video {
    width: 100%;
    z-index: 0;
    border: none;
}

















/* Tools Section Styles */
.Tools-Home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0em 1.25em 5%;
    overflow: hidden;
    /* Prevent horizontal scroll during animations */
}

.Tools-Home-section-heading {
    text-align: center;
    padding: 2.5em 0;
}

.Tools-Home-section-heading .Tools-Home-subtitle {
    color: var(--Dark);
    font-size: 1em;
    margin-bottom: 0.5em;
}

.Tools-Home-section-heading .Tools-Home-title {
    color: var(--Dark);
    font-size: 2em;
    font-family: var(--Paragraph);
    font-weight: 100;
    margin-bottom: 0.5em;
    text-transform: lowercase;


}

.Tools-Home-section-heading .Tools-Home-highlight {
    color: var(--Yellow);
    font-size: 1.5em;
    font-weight: 700;
}

/* Grid Layout - Default 3 columns */
.Tools-Home-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5em;
    padding: 0 1em;
}

.Tools-Home-card {
    text-align: center;
    transition: transform 0.3s ease;
    /* For hover effect */
}

.Tools-Home-card:hover {
    transform: translateY(-5px);
}

.Tools-Home-icon {
    background-color: var(--Light);
    border-radius: 50%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    width: 9.375em;
    height: 9.375em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.Tools-Home-card:hover .Tools-Home-icon {
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.Tools-Home-icon img {
    border-radius: 50%;
    width: 6.25em;
    height: 6.25em;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.Tools-Home-card:hover .Tools-Home-icon img {
    transform: scale(1.1);
}

.Tools-Home-name {
    color: var(--Dark);
    font-size: 1.1em;
    margin-top: 0.5em;
    font-family: var(--Paragraph);
    transition: color 0.3s ease;
}

.Tools-Home-card:hover .Tools-Home-name {
    color: var(--Green);
}



/* Responsive Styles */
@media (max-width: 2000px) {
    .Tools-Home-container {
        max-width: 1600px;
    }
}

@media (max-width: 1450px) {
    .Tools-Home-container {
        max-width: 1200px;
    }
}

@media (max-width: 1200px) {
    .Tools-Home-container {
        max-width: 1000px;
    }
}

/* Tablet View - 3 columns */
@media (max-width: 1050px) {
    .Tools-Home-container {
        max-width: 800px;
        padding: 0 5% 10%;
    }

    .Tools-Home-section-heading {
        padding: 1em 0;
    }

    .Tools-Home-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .Tools-Home-icon {
        width: 8em;
        height: 8em;
    }

    .Tools-Home-icon img {
        width: 5em;
        height: 5em;
    }
}

@media (max-width: 820px) {
    .Tools-Home-container {
        max-width: 600px;
    }
}

/* Mobile View - 2 columns */
@media (max-width: 768px) {


    /* Reset animations for mobile */
    .Tools-Home-card,
    .Tools-Home-section-heading .Tools-Home-title {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 620px) {
    .Tools-Home-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .Tools-Home-container {
        max-width: 500px;
    }

    .Tools-Home-section-heading .Tools-Home-title {
        font-size: 1.8em;
    }
}

@media (max-width: 550px) {
    .Tools-Home-container {
        max-width: 400px;
    }

    .Tools-Home-icon {
        width: 7em;
        height: 7em;
    }

    .Tools-Home-icon img {
        width: 4.5em;
        height: 4.5em;
    }
}

@media (max-width: 450px) {
    .Tools-Home-container {
        max-width: 300px;
    }

    .Tools-Home-section-heading .Tools-Home-title {
        font-size: 1.8em;
    }

    .Tools-Home-grid {
        gap: 1em;
    }
}

@media (max-width: 320px) {
    .Tools-Home-container {
        max-width: 250px;
    }

    .Tools-Home-icon {
        width: 6em;
        height: 6em;
    }

    .Tools-Home-icon img {
        width: 4em;
        height: 4em;
    }

    .Tools-Home-name {
        font-size: 1em;
    }
}



















.Testimonials-container {
    width: 90%;
    padding: 5% 5%;
}

.Testimonials-text-center {
    text-align: center;
}

.Testimonials-text-sm {
    font-size: 0.875em;
    /* 14px */
    font-family: var(--Paragraph);
    color: var(--Dark);
}

.Testimonials-text-gray-500 {
    color: #6b7280;
}

.Testimonials-text-3xl {
    font-size: 1.875em;
    /* 30px */
    font-family: var(--Heading);
    color: var(--Dark);
}

.Testimonials-font-bold {
    font-weight: 700;
}

.Testimonials-text-gray-800 {
    color: #1f2937;
}

.Testimonials-text-2xl {
    font-size: 1.5em;
    /* 24px */
    font-family: var(--Sub_Heading);
    color: var(--Yellow);
}

/* Universal Carousel Styles */
.Testimonials-universal-carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 15px;
}

.Testimonials-carousel-container {
    position: relative;
    width: 100%;
}

.Testimonials-carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    margin: 5% auto 0;
}

.Testimonials-carousel-item {
    flex: 0 0 calc(33%);
    /* Adjust for gap */
    border-radius: 15px;
    box-shadow: 0 0px 25px -5px rgba(245, 245, 245, 0.6);
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    height: max-content;
}

.Testimonials-carousel-item.active {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Testimonial Card Styles */
.Testimonials-testimonial-card {
    background-color: var(--Light);
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.Testimonials-testimonial-rating {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.Testimonials-testimonial-rating i {
    color: var(--Yellow);
    margin-right: 4px;
}

.Testimonials-testimonial-rating span {
    margin-left: 8px;
    color: var(--Dark);
    font-weight: 600;
}

.Testimonials-testimonial-title {
    color: var(--Dark);
    font-weight: 600;
    margin-bottom: 16px;
    font-family: var(--Heading);
}

.Testimonials-testimonial-description {
    color: #4b5563;
    margin-bottom: 16px;
    font-family: var(--Paragraph);
    font-size: 1.1em;
}

.Testimonials-testimonial-author {
    display: flex;
    align-items: center;
}

.Testimonials-testimonial-author p {
    margin: 0;
}

.Testimonials-testimonial-author-name {
    color: var(--Dark);
    font-weight: 600;
    font-family: var(--Sub_Heading);
}

.Testimonials-testimonial-author-role {
    color: #6b7280;
    font-size: 0.875em;
    /* 14px */
    font-family: var(--Paragraph);
}

/* Carousel Navigation Buttons */
.Testimonials-carousel-nav {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.Testimonials-Heading {
    color: var(--Dark);
    font-size: 2em;
    font-family: var(--Paragraph);
    font-weight: 100;
    margin-bottom: 0.5em;
    text-transform: lowercase;
}


.Testimonials-carousel-nav button {
    background-color: var(--Green);
    color: var(--Light);
    padding: 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin: 0 8px;
}

.Testimonials-carousel-nav button.Testimonials-next {
    background-color: var(--Yellow);
}

/* Responsive Styles */
@media (max-width: 1050px) {
    .Testimonials-carousel-item {
        flex: 0 0 calc(40%);
        /* 2 cards per row */
    }

    .Testimonials-container {
        width: 90%;
        padding: 10% 5% 15%;
    }

    .Testimonials-testimonial-description {
        font-size: 0.9em;
    }
}

@media (max-width: 620px) {
    .Testimonials-carousel-item {
        flex: 0 0 70%;
        /* 1 card per row */
    }

    .Testimonials-text-3xl {
        font-size: 1.5em;
    }

    .Testimonials-text-2xl {
        font-size: 1.25em;
    }

    .Testimonials-testimonial-description {
        font-size: 0.6em;
    }

    .Testimonials-Heading {
        font-size: 1.8em;
    }

}