@charset "UTF-8";
/*----------------------------------------------
    responsive.css
    Purpose: All media queries and responsive
             overrides go here. main.css stays
             untouched for desktop styles.
----------------------------------------------*/

/* ==========================================
   Visibility utilities
   ========================================== */
.twwwins-mobile-only { display: none; }
.twwwins-desktop-tablet-only { display: block; }

/* ==========================================
   Mobile-Only Hero (below 576px)
   Stacked cards with sticky overlap
   ========================================== */
.twwwins-mobile-hero {
    display: none;
}

@media (max-width: 575.98px) {
    .twwwins-mobile-hero {
        display: block;
        position: relative;
        overflow: hidden;
        padding-bottom: 72px;
    }

    .twwwins-mobile-hero-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }

    .twwwins-mobile-hero-slide:first-child {
        position: relative;
    }

    .twwwins-mobile-hero-slide:nth-child(2) {
        z-index: 2;
    }

    .twwwins-mobile-hero-slide:nth-child(3) {
        z-index: 3;
    }

    /* Fallback: if GSAP fails or is slow, hide slides 2/3 and agents */
    .twwwins-mobile-hero:not(.twwwins-mobile-hero--ready) .twwwins-mobile-hero-slide:nth-child(2),
    .twwwins-mobile-hero:not(.twwwins-mobile-hero--ready) .twwwins-mobile-hero-slide:nth-child(3) {
        visibility: hidden;
    }

    .twwwins-mobile-hero:not(.twwwins-mobile-hero--ready) .twwwins-mobile-hero-agents {
        visibility: hidden;
    }

    /* Full-width image */
    .twwwins-mobile-hero-slide__img {
        width: 100%;
        height: 500px;
        overflow: hidden;
        position: relative;
    }

    .twwwins-mobile-hero-slide__img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .twwwins-mobile-hero-slide:nth-child(1) .twwwins-mobile-hero-slide__img img {
        object-position: 80% center;
    }

    .twwwins-mobile-hero-slide:nth-child(2) .twwwins-mobile-hero-slide__img {
        height: 470px;
    }
	

    .twwwins-mobile-hero-slide:nth-child(2) .twwwins-mobile-hero-slide__img img {
        object-position: center bottom;
    }

    .twwwins-mobile-hero-slide:nth-child(3) .twwwins-mobile-hero-slide__img img {
        object-position: 85% center;
    }

    /* Rounded content card below the image */
    .twwwins-mobile-hero-slide__card {
        background: var(--twwwins-red-color);
        color: var(--twwwins-white-color);
        border-radius: 24px;
        margin: -70px 16px 0;
        padding: 36px 24px 20px;
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .twwwins-mobile-hero-slide__sub {
        font-size: 14px;
        color: var(--twwwins-white-color);
        margin-bottom: 14px;
        opacity: 0.85;
        line-height: 1.5;
        text-align: center;
    }

    .twwwins-mobile-hero-slide__title {
        font-size: 28px;
        font-weight: 700;
        color: var(--twwwins-white-color);
        line-height: 1.25;
        margin-bottom: 28px;
        letter-spacing: -0.02em;
        text-align: center;
    }

    .twwwins-mobile-hero-slide__title span {
        font-weight: 100;
        font-style: italic;
    }

    .twwwins-mobile-hero-slide__btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .twwwins-mobile-hero-slide__btn .twwwins-btn {
        max-width: 320px;
        width: 100%;
        justify-content: center;
    }

    /* Agents section on mobile */
    .twwwins-mobile-hero-agents {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding-top: 14px;
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 60px;
        border-radius: 16px;
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 4;
    }

    .twwwins-mobile-hero-agents-img {
        display: flex;
        margin-right: 12px;
    }

    .twwwins-mobile-hero-agents-img img {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        margin-left: -10px;
    }

    .twwwins-mobile-hero-agents-img img:first-child {
        margin-left: 0;
    }

    .twwwins-mobile-hero-agents-content h3 {
        font-size: 16px;
        font-weight: 700;
        color: var(--twwwins-theme-color);
        margin-bottom: 2px;
        letter-spacing: -0.02em;
    }

    .twwwins-mobile-hero-agents-content p {
        font-size: 11px;
        color: var(--twwwins-body-color);
        margin-bottom: 0;
        line-height: 1.3;
    }

    /* ==========================================
       Statistic circles: disable hover/transition
       ========================================== */
    .twwwins-about-badge {
        transition: none;
    }

    .twwwins-about-badge-right {
        transition: none;
    }

    .twwwins-about-badge-wrap:hover .twwwins-about-badge:first-child {
        background-color: var(--twwwins-red-color);
		color: var(--twwwins-white-color);
        opacity: 1;
        margin-right: -25px;
        transform: none;
    }

    .twwwins-about-badge-wrap:hover .twwwins-about-badge:first-child.twwwins-about-badge-right {
        z-index: 2;
    }

    .twwwins-about-badge-wrap:hover .twwwins-about-badge:first-child .twwwins-about-badge-content span {
        color: inherit;
    }

    .twwwins-about-badge-wrap:hover .twwwins-about-badge:first-child .twwwins-about-badge-content .twwwins-about-badge-title {
        color: inherit;
    }

    .twwwins-about-badge-wrap:hover .twwwins-about-badge:last-child {
        background-color: var(--twwwins-gray-color);
        opacity: 0.8;
        transform: none;
    }

    .twwwins-about-badge-wrap:hover .twwwins-about-badge:last-child .twwwins-about-badge-content span {
        color: var(--twwwins-body-color);
    }

    .twwwins-about-badge-wrap:hover .twwwins-about-badge:last-child .twwwins-about-badge-content .twwwins-about-badge-title {
        color: var(--twwwins-body-color);
    }

    /* ==========================================
       Mobile headings: center-align section titles
       ========================================== */
    .twwwins-section-title,
    .twwwins-section-title span {
        text-align: center;
    }

    .twwwins-section-sub-title {
        text-align: center;
    }

    .twwwins-section-title-wrap {
        text-align: center;
    }

    .twwwins-details-title {
        text-align: center;
    }

    .twwwins-floting-card-title {
        text-align: center;
    }

    /* ==========================================
       About page Hero: reduce height
       ========================================== */
    .twwwins-about-hero .twwwins-hero-slider-main {
        min-height: 400px;
        padding-top: 80px;
    }

    /* ==========================================
       Mobile Award Section
       ========================================== */
    .twwwins-mobile-award {
        padding: 0 16px;
        margin-bottom: 50px;
    }

    .twwwins-mobile-award__img {
        position: relative;
        z-index: 2;
        margin-bottom: -80px;
        text-align: center;
    }

    .twwwins-mobile-award__img img {
        max-width: 80%;
        height: auto;
    }

    .twwwins-mobile-award__card {
        position: relative;
        background-color: var(--twwwins-red-color);
        border-radius: 20px;
        padding: 80px 20px 30px;
        overflow: hidden;
    }

    .twwwins-mobile-award__content {
        position: relative;
        z-index: 1;
    }

    .twwwins-mobile-award__title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 14px;
        letter-spacing: -0.02em;
    }

    .twwwins-mobile-award__content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .twwwins-mobile-award__img-box {
        background: #fff;
        border-radius: 20px;
        padding: 12px;
        margin-top: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    .twwwins-mobile-award__img-box img {
        width: 100%;
        height: auto;
        border-radius: 14px;
        display: block;
    }

    .twwwins-mobile-award__white-box {
        background: #fff;
        border-radius: 20px;
        padding: 24px 20px;
        margin-top: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    }

    .twwwins-mobile-award__white-box p {
        font-size: 14px;
        line-height: 1.7;
        color: var(--twwwins-body-color);
    }

    /* ==========================================
       Mobile Legacy of Trust Section
       ========================================== */
    .twwwins-mobile-legacy {
        padding: 50px 16px;
    }

    .twwwins-mobile-legacy__title {
        font-size: 38px;
        font-weight: 800;
        letter-spacing: -0.04em;
        margin-bottom: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .twwwins-mobile-legacy__desc {
        font-size: 15px;
        line-height: 1.65;
        color: var(--twwwins-body-color);
        margin-bottom: 30px;
    }

    .twwwins-mobile-legacy__logos {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .twwwins-mobile-legacy__row {
        display: flex;
        gap: 16px;
    }

    .twwwins-mobile-legacy__row--single {
        justify-content: center;
    }

    .twwwins-mobile-legacy__row--single .twwwins-mobile-legacy__logo-item {
        width: 50%;
    }

    .twwwins-mobile-legacy__logo-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .twwwins-mobile-legacy__logo-item span {
        display: none;
    }

    /* ==========================================
       Mobile Successful Projects Section
       ========================================== */
    .twwwins-mobile-projects {
        padding: 40px 16px 50px;
    }

    .twwwins-mobile-projects__title {
        font-size: 28px;
        font-weight: 800;
        letter-spacing: -0.03em;
        text-align: center;
        margin-bottom: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .twwwins-mobile-projects__list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .twwwins-mobile-projects__card {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    }

    .twwwins-mobile-projects__card-bg {
        height: 160px;
        background-size: cover;
        background-position: center;
    }

    .twwwins-mobile-projects__card-title {
        font-size: 16px;
        font-weight: 700;
        padding: 16px 16px 8px;
        letter-spacing: -0.01em;
        line-height: 1.3;
    }

    .twwwins-mobile-projects__card-meta {
        display: flex;
        gap: 16px;
        padding: 0 16px 16px;
    }

    .twwwins-mobile-projects__card-meta span {
        font-size: 12px;
        color: var(--twwwins-body-color);
        font-weight: 500;
    }
}

    .twwwins-about-badge-wrap {
        justify-content: center;
}

/* ==========================================
   Accordion: hide expanded-content number on mobile
   ========================================== */
@media (max-width: 767.98px) {
    #accordionExample .twwwins-services-body .twwwins-services-num {
        display: none;
    }
}

/* ==========================================
   Tablet-only: Legacy logo grid
   ========================================== */
.twwwins-tablet-logos {
    display: none;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .twwwins-tablet-logos {
        display: block;
        padding: 0;
    }
    .twwwins-tablet-logos__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        row-gap: 20px;
        margin: 0 auto;
    }
    .twwwins-tablet-logos__item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
    }
    .twwwins-tablet-logos__item img {
        max-width: 100%;
        object-fit: contain;
    }
    .twwwins-tablet-logos__item--full {
        grid-column: span 4;
        justify-content: center;
    }
    .twwwins-tablet-logos__item--full img {
        margin-bottom: 150px;
    }
    .twwwins-tablet-logos__item:nth-child(2),
    .twwwins-tablet-logos__item:nth-child(3),
    .twwwins-tablet-logos__item:nth-child(4),
    .twwwins-tablet-logos__item:nth-child(5) {
        grid-column: span 1;
    }
    .twwwins-floting-card-img {
        display: none;
    }
    
}

    /* ==========================================
       Tablet: fix award image overlap
       ========================================== */
    @media only screen and (min-width: 768px) and (max-width: 1199.98px) {
		.twwwins-testi-card-awards > img {
			top: -230px;
			left: 500px;
			position: relative;
			display: block;
			margin: 0 auto 20px;
			max-width: 280px;
		}

        .twwwins-testi-card {
            position: relative;
            bottom: auto;
            min-height: auto;
            padding: 40px 30px;
            border-radius: 20px;
			top: 400px;
        }
		
		.twwwins-testi-card-content p{
			margin-right: 280px;
		}
		
		.twwwins-hero-agents-2 {
			padding-top: 20px;
			padding-right: 35px;
		}
		
	.twwwins-floting-card-content p {
		width: 100%;
	}
    }

/* ==========================================
   Mobile: headline hidden, parallax disabled,
   info-box in normal flow below image
   ========================================== */
@media (max-width: 767.98px) {
    /* Visibility: show mobile, hide desktop/tablet */
    .twwwins-mobile-only { display: block; }
    .twwwins-desktop-tablet-only { display: none; }

    /* Branded loader subtitle: smaller on mobile */
    .twwwins-loader-subtitle {
        font-size: 36px;
    }

    /* Full-width static image */
    .twwwins-mobile-project-image {
        position: relative;
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* Play button on mobile image */
    .twwwins-mobile-project-image .twwwins-project-play-btn {
        position: absolute;
        bottom: 30px;
        left: 30px;
        z-index: 5;
    }
    /* Info-box: normal flow, rounded, no overlap */
    .twwwins-mobile-only .twwwins-project-details-info-box {
        margin-left: 0 !important;
        border-radius: 20px;
        margin-top: -30px;
        position: relative;
        z-index: 2;
    }
    .twwwins-mobile-only .twwwins-project-details-info-item:last-child {
        padding-bottom: 0;
    }
}
/* Play headline: smaller text on tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .twwwins-project-headline-anim p {
        font-size: 14px;
    }
    .twwwins-project-play-headline-wrap {
        gap: 12px;
    }
}