/* Hero Section */
.hero-section {
    position: relative;
    height: 650px;
    overflow: hidden;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
}

.info-section-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-section {
    padding: clamp(60px, 7.135vw, 137px) 0 clamp(60px, 5.99vw, 115px) 0;
}

.info-section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.info-section-content .info-section-left {
    flex: 1;
    max-width: 707px;
}

.info-section-content .info-section-right {
    flex: 1;
    max-width: 852px;
}

.info-section-content .info-section-left h2.f-80 {
    margin-bottom: 32px;
}

.info-section-content .info-section-left p.f-24 {
    letter-spacing: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.difference-section,
.vision-mission-section {
    padding: clamp(60px, 5.99vw, 115px) 0 clamp(60px, 5.807vw, 111.5px) 0;
}

.difference-section {
    padding: clamp(60px, 5.729vw, 110px) 0 clamp(60px, 5.807vw, 111.5px) 0;
    ;
}

.vision-mission-section .vision-content {
    display: flex;
    gap: 64px;
}

.vision-mission-section .vision-content-left {
    flex: 1;
    max-width: 559px;
}

.vision-mission-section .image-container {
    flex: 1;
    max-width: 482px;
}

.vision-mission-section .image-container img {
    transform: rotateY(180deg);
}

body.direction-rtl .vision-mission-section .image-container img {
    transform: rotateY(0deg);
}

.vision-mission-section .vision-content-right {
    flex: 1;
    max-width: 560px;
    margin-top: auto;
}

.vision-mission-section .vision-content-right h2,
.vision-mission-section .vision-content-left h2 {
    text-transform: capitalize;
    margin-bottom: clamp(24px, 1.719vw, 33px);
    max-width: 283px;
    line-height: 85%;
    text-transform: uppercase;
}

.vision-mission-section .vision-content-right h3,
.vision-mission-section .vision-content-left h3 {
    margin-bottom: 16px;
}

.vision-mission-section .vision-content-right p,
.vision-mission-section .vision-content-left p {
    letter-spacing: 0;
    line-height: 170%;
}

.hero-content {
    position: relative;
    z-index: 10;
    padding: 0 15px;
}

.hero-subtitle {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.wwr-hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.2;
}

/* Section Titles */
.wwr-section-title {
    font-size: 4rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #333;
}

.re-csection-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #333;
}

.v-section-title {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    color: #333;
}

.subsection-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #444;
}

.section-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

.difference-section .theme_container {
    max-width: 1725px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.diff-section-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.diff-section-content .difference-left {
    flex: 1;
    max-width: 601px;
}

.recruiting-section h2,
.diff-section-content .difference-left h2 {
    font-family: 'Accord';
    font-style: normal;
    font-weight: 800;
    font-size: clamp(35px, 4.167vw, 80px);
    line-height: 95%;
    align-items: center;
    letter-spacing: -2px;
    margin-bottom: clamp(16px, 1.667vw, 32px);
}

.diff-section-content .difference-left a.btn {
    min-width: 226px;
    margin-top: 50px;
}

.diff-section-content .difference-right {
    flex: 1;
    max-width: 910px;
    column-count: 2;
    column-gap: 16.14px;
}

.diff-section-content .difference-right .difference-col1 {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

.diff-section-content .difference-right .difference-col2 {
    max-width: 445px;
}

.diff-section-content .difference-right .industry_box {
    padding: 40px 54px 40px 40px;
    border-radius: 0;
    background-color: #ef483a;
    margin-bottom: 16.28px;
    max-width: 385px;
}

.diff-section-content .difference-right .connect_box,
.diff-section-content .difference-right .future_box {
    background-color: #ffffff;
}

.diff-section-content .difference-right .image-container {
    margin-bottom: 17px;
}

.diff-section-content .difference-right .connect_box {
    padding: 45px 50px 37px 43px;
}

.diff-section-content .difference-right .industry_box img {
    margin-bottom: 32px;
}

.diff-section-content .difference-right .industry_box h3 {
    margin-bottom: 18px;
    font-family: 'Accord';
    font-weight: 700;
    font-size: clamp(24px, 1.615vw, 31px);
    line-height: 100%;
    letter-spacing: -1px;
    color: #FFFFFF;
}

.diff-section-content .difference-right .industry_box p {
    color: white;
}

.diff-section-content .difference-right :is(.connect_box h3, .connect_box p, .future_box h3, .future_box p) {
    color: #000000;
}

body.direction-rtl .diff-section-content .difference-right :is(.connect_box h3, .connect_box p, .future_box h3, .future_box p) {
    font-family: 'Bahij' !important;
}

.diff-section-content .difference-right .industry_box.future_box h3 {
    padding-right: 50px;
}

body.direction-rtl .diff-section-content .difference-right .industry_box.future_box h3 {
    padding-right: 0;
}

body.direction-rtl .btn::after {
    right: unset;
    left: 17px;
    transform: translateY(-50%) rotate(180deg);
}


/* Recruiting Section */
.recruiting-section {
    padding: clamp(60px, 4.792vw, 92px) 0 clamp(60px, 13.229vw, 254px) 0;
}

.recruiting-section h2 {
    max-width: 730px;
    margin: 0 auto clamp(30px, 4.01vw, 77px) auto;
}

body.direction-rtl .recruiting-section h2 {
    max-width: 840px;
}

.recruiting-section P.section-description {
    font-family: 'Accord';
    font-style: normal;
    font-weight: 700;
    font-size: clamp(26px, 1.667vw, 32px);
    line-height: 95%;
    letter-spacing: -0.07em;
    color: #000000;
}

body.direction-rtl .recruiting-section P.section-description {
    font-family: 'Bahij';
    font-weight: lighter;
}

.recruiting_process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: clamp(40px, 5.729vw, 110px);
}

.recruiting_process .recruiting_card {
    padding-left: 93px;
    text-align: left;
    position: relative;
    z-index: 1;
}

.recruiting_process .recruiting_card:nth-child(3)::after,
.recruiting_process .recruiting_card:nth-child(2)::after,
.recruiting_process .recruiting_card:nth-child(1)::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100px;
    height: 85px;
    background-repeat: no-repeat;
    background-size: contain;
}

body.direction-rtl .recruiting_process .recruiting_card:nth-child(3)::after,
body.direction-rtl .recruiting_process .recruiting_card:nth-child(2)::after,
body.direction-rtl .recruiting_process .recruiting_card:nth-child(1)::after {
    left: unset;
    right: -71px;
}

body.direction-rtl .recruiting_content {
    text-align: right;
}

.recruiting_process .recruiting_card:nth-child(1)::after {
    background-image: url('../img/01.png');
}

.recruiting_process .recruiting_card:nth-child(2)::after {
    background-image: url('../img/02.png');
}

.recruiting_process .recruiting_card:nth-child(3)::after {
    background-image: url('../img/03.png');
}

.recruiting_process .recruiting_card .recruiting_img {
    margin-bottom: 24px;
    position: relative;
    z-index: 9;
}

body.direction-rtl .recruiting_process .recruiting_card .recruiting_img {
    text-align: right;
}

.recruiting_process .recruiting_card .recruiting_content h3 {
    margin-bottom: 20px;
    font-size: clamp(26px, 1.667vw, 32px);
}

.recruiting_process .recruiting_card .recruiting_content p {
    letter-spacing: 0;
    padding-right: 10px;
    line-height: 120%;
}


/* Button Styles */
.btn-primary {
    background-color: #f5b300;
    border-color: #f5b300;
}

.btn-primary:hover {
    background-color: #f5a500;
    border-color: #f5a500;
}

/* Impact Section */
.impact-number {
    font-size: 3rem;
    font-weight: bold;
}

.impact-label {
    font-size: 1.2rem;
    color: #ccc;
}

/* Card Styles */
.difference-card,
.card-description {
    padding: 1rem;
}

.card-title {
    font-size: 1.5rem;
    font-weight: bold;
}


/* Impact Section Styling */
.impact-section {
    background-color: #414141;
    padding: clamp(60px, 6.771vw, 130px) 0 clamp(60px, 7.083vw, 136px) 0;
    position: relative;
    overflow: hidden;
}

.impact-section::before {
    position: absolute;
    content: "";
    background-image: url('../img/square_object_icon.svg');
    width: 258px;
    height: 308px;
    right: -22px;
    top: -79px;
    background-repeat: no-repeat;
}

body.direction-rtl .impact-section::before {
    right: unset;
    left: -30px;
    transform: rotateY(180deg);
    background-image: url('../img/square_object_icon.svg');
}
body.direction-rtl .impact-section::after {
    right: -22px;
    left: unset;
    transform: rotateX(180deg);
    background-image: url('../img/square_object_icon.svg');
}

.impact-section::after {
    position: absolute;
    content: "";
    background-image: url('../img/square_object_icon.svg');
    width: 258px;
    height: 308px;
    left: -22px;
    bottom: -79px;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}

.impact-section .small_container {
    max-width: 1609px;
    width: 100%;
    margin: 0 auto;
    z-index: 9;
    position: relative;
}

body.direction-rtl .impact-section .small_container a.btn {
    min-width: 226px;
}

.impact-section .small_container h2 {
    color: white;
    margin-bottom: 10px;
}

.impact-section .small_container p {
    letter-spacing: 0;
    max-width: 687px;
    width: 100%;
    color: white;
}

body.direction-rtl .impact-section .small_container p {
    text-align: right;
    direction: ltr;
}

.impact-section .small_container .impact-s-cards {
    margin-top: clamp(40px, 3.854vw, 74px);
    margin-bottom: clamp(40px, 4.635vw, 89px);
}

.impact-s-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #FFDD00;
    margin-bottom: 1.5rem;
}

.impact-s-para {
    text-align: center;
    font-size: 1.1rem;
    color: #f0f0f0;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.impact-s-cards {
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin-top: 3rem;
}

.imp-s-card {
    background-color: transparent;
    flex: 1 1 22%;
    padding: 11px 0 0 0;
    /* border-radius: 10px; */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
    /* text-align: center; */
    /* transition: all 0.3s ease-in-out; */
    transition: all 0.3s ease;
}

.imp-s-card i {
    font-size: 48px;
    margin-bottom: 1rem;
    color: #FFDD00;
}

.imp-s-card img {
    width: 48px;
    height: auto;
    margin-bottom: 39px;
}

.imp-s-card .imp-s-card-card-counts {
    margin-bottom: 30px;
}

.imp-s-card:hover .imp-s-card i {
    color: #ffffff;
}

.imp-s-card-card-counts {
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
}

.imp-s-card-card-title {
    /* font-size: 1.1rem; */
    color: #d1d1d1;
}

body.direction-rtl .imp-s-card-card-title {
    font-weight: lighter;
}

.partnering-talents-section {
    padding: clamp(60px, 7.708vw, 148px) 0 clamp(60px, 10.417vw, 200px) 0;
}

.partnering-talents-section .theme_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

body.direction-rtl .partnering-talents-section .theme_container {
    align-items: flex-start;
}

.partnering-talents-section .pt-section-left {
    padding: 0 10px 0 0;
    width: 31.517%;
}

.partnering-talents-section .pt-section-left .pts-content h2 {
    line-height: 105%;
    letter-spacing: -0.02em;
    margin-bottom: clamp(30px, 3.333vw, 64px);
}

.partnering-talents-section .pt-section-right {
    width: 63.54%;
}

.partnering-talents-section .pt-section-t-grid {
    margin-bottom: 24px;
    height: 415px;
}

.partnering-talents-section .pt-section-b-grid,
.partnering-talents-section .pt-section-t-grid {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.partnering-talents-section .pt-section-t-grid img {
    height: 100%;
}

.partnering-talents-section .pt-section-t-grid .pt-section-img-box:nth-child(1) {
    width: 53.3%;
}

.partnering-talents-section .pt-section-t-grid .pt-section-img-box:nth-child(2) {
    width: 51%;
}

/* Main Grid Container */
.custom-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6 columns */
    gap: 16px;
    /* 4px gap */
}

/* Custom Grid Items */
.custom-grid-item {
    overflow: hidden;
    position: relative;
}

/* Top Left Image */
.custom-grid-item-top-left {
    grid-column: span 3;
    /* Span 3 columns */
    height: 200px;
    /* Reduced height for smaller images */
}

/* Top Right Image */
.custom-grid-item-top-right {
    grid-column: span 3;
    /* Span 3 columns */
    height: 200px;
    /* Reduced height for smaller images */
}

/* Bottom Left Image */
.custom-grid-item-bottom-left {
    grid-column: span 2;
    /* Span 2 columns */
    height: 200px;
    /* Reduced height for smaller images */
}

/* Bottom Right Image */
.custom-grid-item-bottom-right {
    grid-column: span 4;
    /* Span 4 columns */
    height: 200px;
    /* Reduced height for smaller images */
}

/* Custom Image Styling */
.custom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the container while maintaining aspect ratio */
}

.pts-title {
    font-size: 3rem;
    font-weight: 500;
}

.pt-section-left {
    padding: 0 10px 0 0;
}

/* Main Section Styling  - If you want to visible this section on who we are page then remove the display: none line. */
.our-team-section {
    background-color: #f9fafb;
}

/* Section Title */
.our-team-section h2 {
    /* font-size: 2.5rem; */
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 2rem;
    position: relative;
}

body.direction-rtl .our-team-section h2 {
    font-family: 'Accord' !important;
}

.our-team-section h2 img {
    position: absolute;
    content: "";
    left: 0;
    top: calc(100% - 13%);
}

body.direction-rtl .our-team-section h2 img {
    left: unset;
    right: 0;
}



/* Grid Styling */
.our-team-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(30px, 3.438vw, 66px) 24px;
    flex-wrap: wrap;
    margin-top: clamp(30px, 3.698vw, 71px);
}



/* Individual Team Member Card */
.our-team-section .bg-white {
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 23.96%;
    padding: 0 !important;
}

/* .our-team-section .bg-white:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
} */

/* Team Image */
.our-team-section {
    padding-bottom: clamp(60px, 9.375vw, 180px);
}

.our-team-section .bg-white img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* border-radius: 8px; */
    transition: opacity 0.3s ease;
}

/* .our-team-section .bg-white:hover img {
    opacity: 0.8;
} */

/* Team Member Name and Role */
.our-team-section .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.our-team-section h3 {
    font-weight: bold;
    color: #1f2937;
    font-size: clamp(28px, 1.771vw, 34px);
}

.our-team-section p {
    color: #4b5563;
    margin-top: 0.25rem;
    letter-spacing: 0;
}

.our-team-section+.chance_section {
    padding-bottom: 81px;
}

@media(max-width: 1680px) {
    .difference-section .theme_container {
        padding: 0 20px;
    }

    .impact-section::before {
        width: 140px;
        height: 258px;
        right: 1px;
        top: -50px;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .impact-section::after {
        width: 110px;
        height: 258px;
        left: -3px;
        bottom: -44px;
        background-repeat: no-repeat;
        transform: rotate(183deg);
        background-size: contain;
    }
}

@media(max-width: 1600px) {
    .difference-section .theme_container {
        padding: 0 20px;
    }
}

@media(max-width: 1440px) {
    .our-team-section .bg-white {
        width: 20%;
    }

    .who_we_hero_section {
        min-height: max-content;
    }
}

@media(max-width: 1024px) {
    .our-team-section .bg-white {
        width: 23%;
    }

    .diff-section-content {
        flex-direction: column;
        gap: 40px;
    }

    .diff-section-content .difference-right,
    .diff-section-content .difference-left {
        max-width: 100%;
    }

    .recruiting_process .recruiting_card:nth-child(3)::after,
    .recruiting_process .recruiting_card:nth-child(2)::after,
    .recruiting_process .recruiting_card:nth-child(1)::after {
        width: 70px;
    }

    .recruiting_process .recruiting_card {
        padding-left: 73px;
    }

    .recruiting_process .recruiting_card .recruiting_img {
        z-index: 3;
    }

    .diff-section-content .difference-right .difference-col1 {
        align-items: flex-start;
    }

    .diff-section-content .difference-right .image-container,
    .diff-section-content .difference-right .difference-col2,
    .diff-section-content .difference-right .industry_box {
        max-width: 100%;
    }

    .diff-section-content .difference-right .image-container img {
        display: block;
        width: 100%;
    }
}

/* Medium devices (992px and below) */
@media (max-width: 992px) {
    .imp-s-card {
        flex: 1 1 45%;
        /* Adjust card width on medium screens */
    }

    .who_we_hero_section {
        min-height: max-content;
        height: auto;
        padding: 140px 0;
    }

    .vision-mission-section .vision-content,
    .info-section-content {
        flex-direction: column;
    }

    .partnering-talents-section .pt-section-left,
    .partnering-talents-section .pt-section-right,
    .vision-mission-section .image-container,
    .vision-mission-section .vision-content-right,
    .vision-mission-section .vision-content-left,
    .info-section-content .info-section-left {
        flex: 1;
        max-width: 100%;
        width: 100%;
    }

    .diff-section-content .difference-right .connect_box,
    .diff-section-content .difference-right .industry_box {
        padding: 20px;
    }

    .partnering-talents-section .theme_container {
        flex-direction: column;
    }

    .our-team-section .bg-white {
        width: 45%;
    }

    .our-team-section+.chance_section {
        min-height: max-content;
    }
}

/* Small devices (768px and below) */
@media (max-width: 768px) {
    .imp-s-card {
        flex: 1 1 100%;
        /* Full width for cards */
    }

    .impact-s-title {
        font-size: 2rem;
        /* Increase title font size */
    }

    .impact-s-para {
        font-size: 1rem;
        /* Adjust paragraph font size */
    }

    .recruiting_process {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small to Medium devices (640px and up) */
@media (min-width: 640px) {
    .our-team-section .grid {
        grid-template-columns: repeat(3, 1fr);
        /* 2 columns */
    }

    .wwr-section-title {
        font-size: 2rem;
        /* Adjust title font size */
    }


}

@media(max-width: 767px) {
    .diff-section-content .difference-right {
        column-count: 1;
    }

    .recruiting_process .recruiting_card {
        padding-left: 40px;
    }

    body.direction-rtl .recruiting_process .recruiting_card {
        padding-right: 40px;
        padding-left: 0;
    }


    .recruiting_process .recruiting_card:nth-child(3)::after,
    .recruiting_process .recruiting_card:nth-child(2)::after,
    .recruiting_process .recruiting_card:nth-child(1)::after {
        width: 40px;
        top: 34%;
        transform: translateY(-50%);
        left: 2%;
    }

    body.direction-rtl .recruiting_process .recruiting_card:nth-child(3)::after,
    body.direction-rtl .recruiting_process .recruiting_card:nth-child(2)::after,
    body.direction-rtl .recruiting_process .recruiting_card:nth-child(1)::after {
        left: unset;
        right: 0;
    }

    .impact-s-cards {
        flex-direction: column;
    }

    .partnering-talents-section .pt-section-b-grid,
    .partnering-talents-section .pt-section-t-grid {
        flex-direction: column;
    }

    .partnering-talents-section .pt-section-t-grid .pt-section-img-box:nth-child(1),
    .partnering-talents-section .pt-section-t-grid .pt-section-img-box:nth-child(2) {
        width: 100%;
    }

    .partnering-talents-section .pt-section-t-grid {
        height: auto;
    }

    .impact-section::before {
        width: 100px;
        height: 258px;
    }
}

/* Extra small devices (480px and below) */
@media (max-width: 480px) {
    .our-team-section h3 {
        font-size: 1.2rem;
        /* Adjust heading font size for small screens */
    }

    .our-team-section p {
        font-size: 0.9rem;
        /* Smaller paragraph font size */
    }

    /* Additional adjustments for very small screens */
    .imp-s-card {
        flex: 1 1 100%;
        /* Full-width cards on extra small devices */
    }

    .hero-section {
        height: 500px;
    }

    .recruiting_process {
        grid-template-columns: repeat(1, 1fr);
    }
}