/* =====================================
   SUCCESS STORIES HERO
===================================== */

.tt-success-hero{
    position:relative;
    min-height:78vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--purple);
}


/* Decorative Background */

.tt-success-hero::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;

    background:var(--milky);

    opacity:.06;

    bottom:-180px;
    left:-120px;
}


/* Background Image */

.tt-success-hero-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(40,11,54,.98) 0%,
            rgba(40,11,54,.90) 45%,
            rgba(40,11,54,.55) 100%
        ),
        url("assets/success-stories-hero.webp");

    background-size:cover;
    background-position:center;

    opacity:.9;
}


/* Content */

.tt-success-hero-content{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1200px;

     margin:0 50px;

    padding:120px 30px;
}


.tt-success-eyebrow{
    display:inline-flex;
    align-items:center;

    color:var(--milky);

    font-size:13px;
    font-weight:600;

    letter-spacing:3px;

    margin-bottom:25px;
}




/* Heading */

.tt-success-hero h1 {
    max-width: none;
    margin: 0 0 25px;
    color: var(--white);

    font-size: clamp(40px, 6vw, 86px);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -2px;

    white-space: nowrap;
}

.tt-success-hero h1 span {
    display: inline;
    color: var(--light-purple);
}


/* Paragraph */

.tt-success-hero p{
    max-width:620px;

    margin:0 0 35px;

    color:var(--milky);

    font-size:18px;

    line-height:1.8;
    text-align:justify;
}


/* Buttons */

.tt-success-hero-buttons{
    display:flex;
    align-items:center;
    gap:15px;

    flex-wrap:wrap;
}


.tt-success-btn-primary,
.tt-success-btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:54px;

    padding:0 28px;

    border-radius:50px;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:.35s ease;
}


.tt-success-btn-primary{
    background:var(--milky);
    color:var(--font-purple);
}


.tt-success-btn-primary:hover{
    background:var(--white);

    transform:translateY(-3px);
}


.tt-success-btn-outline{
    border:1px solid var(--milky);

    color:var(--white);

    background:transparent;
}


.tt-success-btn-outline:hover{
    background:var(--light-purple);

    border-color:var(--light-purple);

    transform:translateY(-3px);
}




@keyframes ttScrollLine{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(65px);
    }

}


/* =====================================
   TABLET
===================================== */

@media(max-width:768px){

    .tt-success-hero{
        min-height:80vh;
    }

    .tt-success-hero-bg{
        background:
            linear-gradient(
                180deg,
                rgba(40,11,54,.96),
                rgba(40,11,54,.88)
            ),
            url("assets/success-stories-hero.webp");

        background-position:center;
    }

    .tt-success-hero-content{
        padding:110px 22px 100px;

        text-align:center;
         margin:0 0px;
    }

    .tt-success-eyebrow{
        justify-content:center;
        font-size:11px;
        letter-spacing:2px;
    }

    .tt-success-hero h1 {
        white-space: normal;
        font-size: clamp(42px, 12vw, 64px);
        letter-spacing: -1.5px;
    }

    .tt-success-hero p{
        margin-left:auto;
        margin-right:auto;

        font-size:16px;
    }

    .tt-success-hero-buttons{
        justify-content:center;
    }

    .tt-success-btn-primary,
    .tt-success-btn-outline{
        width:100%;
        max-width:300px;
    }

}


/* =====================================
   SMALL MOBILE
===================================== */

@media(max-width:480px){

    .tt-success-hero{
        min-height:85vh;
    }

    .tt-success-hero-content{
        padding:100px 18px 70px;
         margin:0 0px;
    }

    .tt-success-hero h1{
        font-size:43px;
    }

    .tt-success-hero p{
        font-size:15px;
        line-height:1.7;
    }

}











/* =====================================
   STORY INTRO SECTION
===================================== */

.tt-story-intro{
    width:100%;
    background:var(--milky);
    padding:110px 20px;
    overflow:hidden;
}


.tt-story-intro-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;
}


/* =====================================
   IMAGE
===================================== */

.tt-story-image{
    position:relative;
    padding:0 25px 25px 0;
}


.tt-story-image-main{
    position:relative;

    width:100%;
    height:570px;

    overflow:hidden;

    border-radius:4px;

    background:var(--purple);
}


.tt-story-image-main::after{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(40,11,54,.35)
    );

    pointer-events:none;
}


.tt-story-image-main img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .7s ease;
}


.tt-story-image:hover .tt-story-image-main img{
    transform:scale(1.04);
}


/* Decorative Border */

.tt-story-image::before{
    content:"";

    position:absolute;

    top:25px;
    left:25px;

    width:100%;
    height:100%;

    border:1px solid var(--light-purple);

    z-index:0;
}


.tt-story-image-main{
    z-index:1;
}


/* =====================================
   IMAGE BADGE
===================================== */

.tt-story-image-badge{
    position:absolute;

    z-index:3;

    left:-15px;
    bottom:15px;

    display:flex;
    flex-direction:column;

    padding:20px 25px;

    background:var(--purple);

    color:var(--white);

    box-shadow:0 15px 35px rgba(40,11,54,.20);
}


.tt-story-image-badge strong{
    color:var(--light-purple);

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:5px;
}


.tt-story-image-badge span{
    color:var(--milky);

    font-size:13px;
}


/* =====================================
   CONTENT
===================================== */

.tt-story-content{
    max-width:560px;
}


.tt-story-label{
    display:inline-flex;
    align-items:center;

    color:var(--light-purple);

    font-size:12px;

    font-weight:700;

    letter-spacing:2.5px;

    margin-bottom:18px;
}



.tt-story-content h2{
    margin:0 0 25px;

    color:var(--font-purple);

    font-size:clamp(
        40px,
        5vw,
        60px
    );

    line-height:1.05;

    letter-spacing:-1.5px;
}


.tt-story-content h2 span{
    display:block;

    color:var(--light-purple);
}


.tt-story-intro-text{
    margin:0 0 18px;

    color:var(--font-purple);

    font-size:16px;

    line-height:1.85;

    opacity:.78;
    text-align:justify;
}


/* =====================================
   STATS
===================================== */

.tt-story-stats{
    display:grid;

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

    gap:0;

    margin-top:38px;

    border-top:1px solid
        rgba(47,19,55,.15);

    padding-top:28px;
}


.tt-story-stat{
    padding-right:20px;

    border-right:1px solid
        rgba(47,19,55,.15);
}


.tt-story-stat:not(:first-child){
    padding-left:20px;
}


.tt-story-stat:last-child{
    border-right:0;
}


.tt-story-stat strong{
    display:block;

    color:var(--purple);

    font-size:36px;

    line-height:1;

    margin-bottom:8px;
}


.tt-story-stat strong span{
    color:var(--light-purple);
}


.tt-story-stat p{
    margin:0;

    color:var(--font-purple);

    font-size:12px;

    line-height:1.4;

    letter-spacing:.5px;
}


/* =====================================
   TABLET
===================================== */

@media(max-width:900px){

    .tt-story-intro{
        padding:80px 20px;
    }

    .tt-story-intro-container{
        grid-template-columns:1fr;

        gap:60px;
    }

    .tt-story-content{
        max-width:700px;
        margin:0 auto;
    }

    .tt-story-image{
        max-width:650px;
        width:100%;
        margin:0 auto;
    }

}


/* =====================================
   MOBILE
===================================== */

@media(max-width:600px){

    .tt-story-intro{
        padding:65px 16px;
    }

    .tt-story-intro-container{
        gap:45px;
    }

    .tt-story-image{
        padding:0 12px 12px 0;
    }

    .tt-story-image-main{
        height:430px;
    }

    .tt-story-image::before{
        top:12px;
        left:12px;
    }

    .tt-story-image-badge{
        left:0;
        bottom:5px;
        padding:16px 18px;
    }

    .tt-story-content h2{
        font-size:40px;
    }

    .tt-story-intro-text{
        font-size:15px;
        line-height:1.75;
        text-align:justify;
    }

    .tt-story-stats{
        gap:0;
    }

    .tt-story-stat{
        padding-right:10px;
    }

    .tt-story-stat:not(:first-child){
        padding-left:10px;
    }

    .tt-story-stat strong{
        font-size:27px;
    }

    .tt-story-stat p{
        font-size:10px;
    }

}















/* =====================================
   FEATURED STORY
===================================== */

.tt-featured-story{
    width:100%;
    background:var(--purple);
    padding:110px 20px;

    position:relative;
    overflow:hidden;
}


/* Decorative Circle */

.tt-featured-story::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:var(--light-purple);

    opacity:.07;

    top:-250px;
    right:-200px;
}


.tt-featured-story::after{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    background:var(--milky);

    opacity:.04;

    bottom:-180px;
    left:-150px;
}


/* Container */

.tt-featured-container{
    width:100%;
    max-width:1200px;

    margin:auto;

    position:relative;
    z-index:2;
}


/* =====================================
   TOP LABEL
===================================== */

.tt-featured-top{
    display:flex;
    align-items:center;

    gap:20px;

    margin-bottom:50px;
}


.tt-featured-top span{
    color:var(--light-purple);

    font-size:15px;

    font-weight:700;

    letter-spacing:2.5px;

    white-space:nowrap;
}





/* =====================================
   GRID
===================================== */

.tt-featured-grid{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:80px;

    align-items:center;
}


/* =====================================
   IMAGE
===================================== */

.tt-featured-image{
    position:relative;

    height:650px;

    overflow:hidden;

    background:var(--milky);
}


.tt-featured-image::after{
    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        transparent 55%,
        rgba(40,11,54,.75)
    );
}


.tt-featured-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .8s ease;
}


.tt-featured-image:hover img{
    transform:scale(1.04);
}


/* Location Badge */

.tt-featured-location{
    position:absolute;

    z-index:2;

    bottom:25px;
    left:25px;

    display:flex;
    flex-direction:column;

    gap:5px;
}


.tt-featured-location span{
    color:var(--light-purple);

    font-size:10px;

    letter-spacing:2px;

    font-weight:700;
}


.tt-featured-location strong{
    color:var(--white);

    font-size:18px;

    font-weight:500;
}


/* =====================================
   CONTENT
===================================== */

.tt-featured-content{
    position:relative;
}


.tt-featured-number{
    display:block;

    color:var(--light-purple);

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:18px;
}


.tt-featured-content h2{
    color:var(--white);

    font-size:clamp(
        40px,
        5vw,
        62px
    );

    line-height:1.04;

    letter-spacing:-1.5px;

    margin:0 0 28px;
}


.tt-featured-content h2 span{
    display:block;

    color:var(--light-purple);
}


/* Owner */

.tt-featured-owner{
    border-left:2px solid var(--light-purple);

    padding-left:18px;

    margin-bottom:25px;
}


.tt-featured-owner strong{
    display:block;

    color:var(--milky);

    font-size:18px;

    margin-bottom:4px;
}


.tt-featured-owner span{
    color:var(--light-purple);

    font-size:13px;
}


/* Paragraph */

.tt-featured-content > p{
    color:var(--milky);

    opacity:.78;

    font-size:15px;

    line-height:1.85;

    margin:0 0 17px;

    max-width:560px;
    text-align:justify;
}


/* =====================================
   QUOTE
===================================== */

.tt-featured-content blockquote{
    position:relative;

    margin:30px 0;

    padding:25px 25px 25px 30px;

    background:rgba(248,236,226,.06);

    border-left:3px solid var(--light-purple);

    color:var(--white);

    font-size:17px;

    line-height:1.7;

    font-style:italic;
     text-align:justify;
}


.tt-featured-content blockquote::before{
    content:"“";

    position:absolute;

    top:-18px;
    left:10px;

    color:var(--light-purple);

    font-size:60px;

    line-height:1;
}


/* =====================================
   HIGHLIGHTS
===================================== */

.tt-featured-highlights{
    display:grid;

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

    border-top:1px solid
        rgba(248,236,226,.15);

    padding-top:25px;

    margin-top:30px;
}


.tt-featured-highlights > div{
    padding-right:15px;

    border-right:1px solid
        rgba(248,236,226,.15);
}


.tt-featured-highlights > div:not(:first-child){
    padding-left:18px;
}


.tt-featured-highlights > div:last-child{
    border-right:0;
}


.tt-featured-highlights span{
    display:block;

    color:var(--light-purple);

    font-size:11px;

    letter-spacing:1px;

    margin-bottom:10px;
}


.tt-featured-highlights strong{
    display:block;

    color:var(--white);

    font-size:15px;

    margin-bottom:5px;
}


.tt-featured-highlights p{
    margin:0;

    color:var(--milky);

    opacity:.65;

    font-size:11px;

    line-height:1.5;
}


/* =====================================
   TABLET
===================================== */

@media(max-width:900px){

    .tt-featured-story{
        padding:80px 20px;
    }

    .tt-featured-grid{
        grid-template-columns:1fr;

        gap:55px;
    }

    .tt-featured-image{
        height:550px;

        max-width:650px;

        width:100%;

        margin:auto;
    }

    .tt-featured-content{
        max-width:700px;

        margin:auto;
    }

}


/* =====================================
   MOBILE
===================================== */

@media(max-width:600px){

    .tt-featured-story{
        padding:65px 16px;
    }

    .tt-featured-top{
        margin-bottom:35px;
    }

    .tt-featured-image{
        height:430px;
    }

    .tt-featured-location{
        left:18px;
        bottom:18px;
    }

    .tt-featured-content h2{
        font-size:40px;
    }

    .tt-featured-content blockquote{
        font-size:15px;
        padding:22px 18px 22px 24px;
    }

    .tt-featured-highlights{
        grid-template-columns:1fr;

        gap:18px;
    }

    .tt-featured-highlights > div{
        border-right:0;

        border-bottom:1px solid
            rgba(248,236,226,.15);

        padding:0 0 18px;
    }

    .tt-featured-highlights > div:not(:first-child){
        padding-left:0;
    }

    .tt-featured-highlights > div:last-child{
        border-bottom:0;
        padding-bottom:0;
    }

}














/* section 4 */


.tt-success-grid {
    width: 100%;
    background: var(--milky);
    padding: 120px 6%;
    overflow: hidden;
}

.tt-success-container {
    max-width: 1400px;
    margin: 0 auto;
}


/* -----------------------------------------
   HEADING
----------------------------------------- */

.tt-success-heading {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.tt-success-eyebrow {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;

    color: var(--light-purple);
}

.tt-success-heading h2 {
    margin: 0;

    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;
    font-weight: 700;

    letter-spacing: -2px;
    color: var(--font-purple);
}

.tt-success-heading h2 span {
    color: var(--light-purple);
}

.tt-success-heading p {
    max-width: 620px;
    margin: 24px auto 0;

    font-size: 16px;
    line-height: 1.8;

    color: var(--font-purple);
}


/* -----------------------------------------
   GRID
----------------------------------------- */

.tt-success-cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;
}


/* -----------------------------------------
   CARD
----------------------------------------- */

.tt-success-card {
    background: var(--white);

    border: 1px solid var(--light-purple);

    overflow: hidden;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.tt-success-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 25px 55px rgba(47, 19, 55, 0.16);
}


/* -----------------------------------------
   IMAGE
----------------------------------------- */

.tt-success-image {
    position: relative;

    height: 310px;

    overflow: hidden;

    background: var(--purple);
}

.tt-success-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}

.tt-success-card:hover
.tt-success-image img {
    transform: scale(1.07);
}


/* Image Overlay */

.tt-success-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(40, 11, 54, 0.75),
            rgba(40, 11, 54, 0)
        );

    pointer-events: none;
}


/* Number */

.tt-success-number {
    position: absolute;

    top: 20px;
    left: 20px;

    z-index: 2;

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--purple);

    color: var(--white);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* City */

.tt-success-city {
    position: absolute;

    bottom: 20px;
    left: 22px;

    z-index: 2;

    color: var(--white);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* -----------------------------------------
   CONTENT
----------------------------------------- */

.tt-success-content {
    padding: 32px 30px 35px;
}

.tt-success-content h3 {
    margin: 0;

    color: var(--font-purple);

    font-size: 25px;
    line-height: 1.2;

    letter-spacing: -0.5px;
}

.tt-success-content h3 span {
    display: block;

    color: var(--light-purple);
}

.tt-success-content p {
    margin: 18px 0 25px;

    color: var(--font-purple);

    font-size: 14px;
    line-height: 1.75;
    text-align:justify;
}




/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .tt-success-grid {
        padding: 90px 5%;
    }

    .tt-success-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tt-success-grid {
        padding: 75px 20px;
    }

    .tt-success-heading {
        margin-bottom: 45px;
    }

    .tt-success-heading h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .tt-success-heading p {
        font-size: 14px;
        line-height: 1.7;
    }

    .tt-success-cards {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .tt-success-image {
        height: 280px;
    }

    .tt-success-content {
        padding: 27px 24px 30px;
    }

    .tt-success-content h3 {
        font-size: 23px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .tt-success-heading h2 {
        font-size: 34px;
    }

    .tt-success-image {
        height: 245px;
    }

}














/* section 5 */

.tt-network-stats {
    position: relative;

    width: 100%;

    background: var(--purple);

    padding: 80px 6%;

    overflow: hidden;
}


/* Decorative Circle */

.tt-network-stats::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border: 1px solid var(--light-purple);

    border-radius: 50%;

    top: -260px;
    right: -180px;

    opacity: 0.35;
}

.tt-network-stats::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border: 1px solid var(--light-purple);

    border-radius: 50%;

    bottom: -220px;
    left: -180px;

    opacity: 0.25;
}


.tt-network-container {
    position: relative;

    z-index: 2;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.tt-network-heading {
    max-width: 760px;

    margin: 0 auto 75px;

    text-align: center;
}

.tt-network-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--light-purple);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
}


.tt-network-heading h2 {
    margin: 0;

    color: var(--white);

    font-size: clamp(42px, 5vw, 70px);

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 700;
}

.tt-network-heading h2 span {
    color: var(--light-purple);
}


.tt-network-heading p {
    max-width: 620px;

    margin: 25px auto 0;

    color: var(--milky);

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================
   STATS GRID
========================================= */

.tt-network-stats-grid {
    display: grid;

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

    border-top: 1px solid var(--light-purple);
    border-bottom: 1px solid var(--light-purple);
}


/* =========================================
   STAT CARD
========================================= */

.tt-network-stat {
    position: relative;

    padding: 48px 35px 50px;

    text-align: center;

    border-right: 1px solid var(--light-purple);

    transition:
        background 0.4s ease,
        transform 0.4s ease;
}

.tt-network-stat:last-child {
    border-right: none;
}


.tt-network-stat:hover {
    background: var(--font-purple);

    transform: translateY(-5px);
}


/* =========================================
   NUMBER LABEL
========================================= */

.tt-network-icon {
    width: 42px;
    height: 42px;

    margin: 0 auto 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--light-purple);

    color: var(--light-purple);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================
   BIG NUMBER
========================================= */

.tt-network-number {
    color: var(--white);

    font-size: clamp(52px, 5vw, 78px);

    line-height: 1;

    font-weight: 700;

    letter-spacing: -3px;

    margin-bottom: 20px;
}

.tt-network-number span {
    color: var(--light-purple);

    font-size: 0.55em;

    vertical-align: top;

    position: relative;

    top: 5px;
}


/* =========================================
   STAT TITLE
========================================= */

.tt-network-stat h3 {
    margin: 0;

    color: var(--milky);

    font-size: 17px;

    line-height: 1.35;

    font-weight: 400;
}

.tt-network-stat h3 strong {
    display: block;

    color: var(--light-purple);

    font-weight: 600;
}


/* =========================================
   STAT DESCRIPTION
========================================= */

.tt-network-stat p {
    max-width: 210px;

    margin: 15px auto 0;

    color: var(--milky);

    font-size: 13px;

    line-height: 1.7;

    opacity: 0.85;
}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.tt-network-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 65px;
}


.tt-network-bottom p {
    margin: 0;

    color: var(--milky);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    white-space: nowrap;
}

.tt-network-bottom p span {
    color: var(--light-purple);
}



/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .tt-network-stats {
        padding: 90px 5%;
    }

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

    .tt-network-stat:nth-child(2) {
        border-right: none;
    }

    .tt-network-stat:nth-child(1),
    .tt-network-stat:nth-child(2) {
        border-bottom: 1px solid var(--light-purple);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .tt-network-stats {
        padding: 75px 20px;
    }

    .tt-network-heading {
        margin-bottom: 50px;
    }

    .tt-network-heading h2 {
        font-size: 40px;

        letter-spacing: -1.5px;
    }

    .tt-network-heading p {
        font-size: 14px;
        text-align:justify;
    }


    .tt-network-stats-grid {
        grid-template-columns: 1fr;
    }


    .tt-network-stat {
        padding: 42px 25px;

        border-right: none;

        border-bottom: 1px solid var(--light-purple);
    }

    .tt-network-stat:last-child {
        border-bottom: none;
    }


    .tt-network-stat:nth-child(1),
    .tt-network-stat:nth-child(2) {
        border-bottom: 1px solid var(--light-purple);
    }


    .tt-network-number {
        font-size: 65px;
    }


    .tt-network-bottom {
        gap: 12px;

        margin-top: 45px;
    }


    .tt-network-bottom p {
        font-size: 9px;

        letter-spacing: 1.5px;

        text-align: center;
    }

}










/* =========================================
   SECTION 6
========================================= */

.tt-journey-section {
    width: 100%;
    background: var(--milky);
    padding: 120px 6%;
    overflow: hidden;
}

.tt-journey-container {
    max-width: 1250px;
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.tt-journey-heading {
    max-width: 760px;
    margin: 0 auto 90px;
    text-align: center;
}

.tt-journey-eyebrow {
    display: inline-block;
    margin-bottom: 18px;

    color: var(--light-purple);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
}

.tt-journey-heading h2 {
    margin: 0;

    color: var(--font-purple);

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;

    letter-spacing: -2px;
}

.tt-journey-heading h2 span {
    color: var(--light-purple);
}

.tt-journey-heading p {
    max-width: 650px;

    margin: 25px auto 0;

    color: var(--font-purple);

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   TIMELINE
========================================= */

.tt-journey-timeline {
    position: relative;
}


/* Vertical Line */

.tt-journey-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background: var(--light-purple);

    transform: translateX(-50%);
}


/* =========================================
   JOURNEY ITEM
========================================= */

.tt-journey-item {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr 90px 1fr;

    align-items: center;

    min-height: 220px;

    border-top: 1px solid var(--light-purple);
}

.tt-journey-item:last-child {
    border-bottom: 1px solid var(--light-purple);
}


/* =========================================
   MARKER
========================================= */

.tt-journey-marker {
    grid-column: 2;

    grid-row: 1;

    width: 68px;
    height: 68px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--purple);

    border: 8px solid var(--milky);

    outline: 1px solid var(--light-purple);

    border-radius: 50%;

    z-index: 3;
}

.tt-journey-marker span {
    color: var(--white);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================
   CONTENT
========================================= */

.tt-journey-content {
    grid-column: 1;

    padding: 40px 55px 40px 0;
}

.tt-journey-item:nth-child(even)
.tt-journey-content {
    grid-column: 3;

    padding:
        40px 0 40px 55px;
}


.tt-journey-content h3 {
    margin: 0;

    color: var(--font-purple);

    font-size: 29px;
    line-height: 1.15;

    letter-spacing: -0.7px;
}

.tt-journey-content h3 span {
    color: var(--light-purple);
}

.tt-journey-content p {
    max-width: 470px;

    margin: 17px 0 0;

    color: var(--font-purple);

    font-size: 14px;
    line-height: 1.75;
    text-align:justify;
}


/* =========================================
   SIDE NUMBER
========================================= */

.tt-journey-side {
    grid-column: 3;

    color: var(--light-purple);

    font-size: 80px;
    line-height: 1;

    font-weight: 700;

    opacity: 0.22;

    padding-left: 55px;
}

.tt-journey-item:nth-child(even)
.tt-journey-side {
    grid-column: 1;

    grid-row: 1;

    padding-left: 0;
    padding-right: 55px;

    text-align: right;
}


/* =========================================
   HOVER
========================================= */

.tt-journey-item {
    transition:
        background 0.35s ease;
}

.tt-journey-item:hover {
    background: var(--white);
}

.tt-journey-item:hover
.tt-journey-marker {
    background: var(--font-purple);
}


/* =========================================
   CTA
========================================= */

.tt-journey-cta {
    margin-top: 80px;

    padding: 42px 45px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    background: var(--purple);
}

.tt-journey-cta-text span {
    display: block;

    margin-bottom: 10px;

    color: var(--light-purple);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.tt-journey-cta-text h3 {
    margin: 0;

    color: var(--white);

    font-size: 30px;
    line-height: 1.2;
}

.tt-journey-cta-text h3 em {
    color: var(--light-purple);

    font-style: normal;
}


/* =========================================
   BUTTON
========================================= */

.tt-journey-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    gap: 15px;

    padding: 17px 25px;

    background: var(--milky);

    color: var(--purple);

    text-decoration: none;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;

    transition:
        gap 0.3s ease,
        background 0.3s ease;
}

.tt-journey-button span {
    color: var(--light-purple);

    font-size: 19px;
}

.tt-journey-button:hover {
    gap: 22px;

    background: var(--white);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .tt-journey-section {
        padding: 90px 5%;
    }

    .tt-journey-heading {
        margin-bottom: 65px;
    }

    .tt-journey-item {
        grid-template-columns:
            75px 1fr;
    }

    .tt-journey-timeline::before {
        left: 37px;
    }

    .tt-journey-marker {
        grid-column: 1;
        grid-row: 1;

        width: 58px;
        height: 58px;
    }

    .tt-journey-content,
    .tt-journey-item:nth-child(even)
    .tt-journey-content {
        grid-column: 2;

        padding: 40px 20px 40px 25px;
    }

    .tt-journey-side,
    .tt-journey-item:nth-child(even)
    .tt-journey-side {
        display: none;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .tt-journey-section {
        padding: 75px 20px;
    }

    .tt-journey-heading {
        margin-bottom: 50px;
    }

    .tt-journey-heading h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .tt-journey-heading p {
        font-size: 14px;
        text-align:justify;
    }


    .tt-journey-item {
        grid-template-columns: 58px 1fr;

        min-height: 190px;
    }

    .tt-journey-timeline::before {
        left: 29px;
    }

    .tt-journey-marker {
        width: 48px;
        height: 48px;

        border-width: 6px;
    }

    .tt-journey-marker span {
        font-size: 10px;
    }


    .tt-journey-content,
    .tt-journey-item:nth-child(even)
    .tt-journey-content {
        padding: 32px 0 32px 18px;
    }

    .tt-journey-content h3 {
        font-size: 23px;
    }

    .tt-journey-content p {
        font-size: 13px;
        line-height: 1.7;
    }


    /* CTA */

    .tt-journey-cta {
        margin-top: 55px;

        padding: 30px 24px;

        flex-direction: column;

        align-items: flex-start;
    }

    .tt-journey-cta-text h3 {
        font-size: 25px;
    }

    .tt-journey-button {
        width: 100%;

        justify-content: center;
    }

}















/* =========================================
   SECTION 7
========================================= */

.tt-video-stories {
    position: relative;

    width: 100%;

    background: var(--purple);

    padding: 120px 6%;

    overflow: hidden;
}

.tt-video-container {
    position: relative;

    z-index: 2;

    max-width: 1400px;

    margin: 0 auto;
}


/* Decorative Ring */

.tt-video-stories::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border: 1px solid var(--light-purple);

    border-radius: 50%;

    top: -360px;
    right: -240px;

    opacity: 0.18;
}

.tt-video-stories::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    border: 1px solid var(--light-purple);

    border-radius: 50%;

    bottom: -280px;
    left: -200px;

    opacity: 0.16;
}


/* =========================================
   HEADING
========================================= */

.tt-video-heading {
    display: grid;

    grid-template-columns: 1fr 0.65fr;

    align-items: end;

    gap: 60px;

    margin-bottom: 65px;
}

.tt-video-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: var(--light-purple);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
}

.tt-video-heading h2 {
    margin: 0;

    color: var(--white);

    font-size: clamp(45px, 5.5vw, 76px);

    line-height: 1;

    letter-spacing: -3px;
}

.tt-video-heading h2 span {
    color: var(--light-purple);
}

.tt-video-heading > p {
    margin: 0;

    color: var(--milky);

    font-size: 15px;

    line-height: 1.8;

    max-width: 450px;
}


/* =========================================
   FEATURED VIDEO
========================================= */

.tt-featured-video {
    display: grid;

    grid-template-columns: 1.45fr 0.75fr;

    background: var(--font-purple);

    border: 1px solid var(--light-purple);

    overflow: hidden;
}


/* =========================================
   VIDEO PREVIEW
========================================= */

.tt-video-preview {
    position: relative;

    min-height: 510px;

    overflow: hidden;

    background: var(--purple);
}

.tt-video-preview img {
    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    transition:
        transform 0.7s ease;
}

.tt-featured-video:hover
.tt-video-preview img {
    transform: scale(1.04);
}

.tt-video-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(40, 11, 54, 0.2),
            rgba(40, 11, 54, 0.7)
        );
}


/* =========================================
   PLAY BUTTON
========================================= */

.tt-play-button {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--white);

    border-radius: 50%;

    background: var(--purple);

    color: var(--white);

    cursor: pointer;

    font-size: 20px;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.tt-play-button:hover {
    transform:
        translate(-50%, -50%)
        scale(1.1);

    background: var(--light-purple);
}

.tt-play-button span {
    margin-left: 4px;
}


/* =========================================
   VIDEO LABELS
========================================= */

.tt-video-label {
    position: absolute;

    top: 25px;
    left: 25px;

    padding: 9px 13px;

    background: var(--purple);

    color: var(--white);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.tt-video-duration {
    position: absolute;

    right: 25px;
    bottom: 25px;

    color: var(--white);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================
   FEATURED CONTENT
========================================= */

.tt-featured-content {
    padding: 55px 45px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.tt-video-number {
    display: block;

    margin-bottom: 25px;

    color: var(--light-purple);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}

.tt-featured-content h3 {
    margin: 0;

    color: var(--white);

    font-size: 38px;

    line-height: 1.1;

    letter-spacing: -1px;
}

.tt-featured-content h3 span {
    display: block;

    color: var(--light-purple);
}

.tt-featured-content > p {
    margin: 25px 0 30px;

    color: var(--milky);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================
   META
========================================= */

.tt-video-meta {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    padding: 20px 0;

    border-top: 1px solid var(--light-purple);

    border-bottom: 1px solid var(--light-purple);
}

.tt-video-meta small {
    display: block;

    margin-bottom: 7px;

    color: var(--light-purple);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.tt-video-meta strong {
    color: var(--white);

    font-size: 13px;

    font-weight: 500;
}


/* =========================================
   WATCH BUTTON
========================================= */

.tt-watch-button {
    width: fit-content;

    margin-top: 30px;

    padding: 15px 0;

    display: flex;

    align-items: center;

    gap: 15px;

    border: 0;

    background: transparent;

    color: var(--white);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        gap 0.3s ease;
}

.tt-watch-button span {
    color: var(--light-purple);

    font-size: 20px;
}

.tt-watch-button:hover {
    gap: 22px;
}


/* =========================================
   SMALL VIDEO GRID
========================================= */

.tt-video-grid {
    display: grid;

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

    gap: 25px;

    margin-top: 25px;
}


/* =========================================
   SMALL VIDEO CARD
========================================= */

.tt-video-card {
    background: var(--font-purple);

    border: 1px solid var(--light-purple);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.tt-video-card:hover {
    transform: translateY(-7px);

    background: var(--purple);
}


/* Image */

.tt-video-card-image {
    position: relative;

    height: 245px;

    overflow: hidden;
}

.tt-video-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.6s ease;
}

.tt-video-card:hover
.tt-video-card-image img {
    transform: scale(1.06);
}


.tt-small-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(40, 11, 54, 0.4);
}


/* Small Play */

.tt-small-play {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--white);

    border-radius: 50%;

    background: var(--purple);

    color: var(--white);

    cursor: pointer;

    font-size: 13px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.tt-small-play:hover {
    transform:
        translate(-50%, -50%)
        scale(1.1);

    background: var(--light-purple);
}


/* Number */

.tt-small-number {
    position: absolute;

    top: 18px;
    left: 18px;

    color: var(--white);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================
   CARD CONTENT
========================================= */

.tt-video-card-content {
    padding: 25px 25px 28px;
}

.tt-video-card-content > span {
    display: block;

    margin-bottom: 10px;

    color: var(--light-purple);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.tt-video-card-content h3 {
    margin: 0;

    color: var(--white);

    font-size: 22px;

    line-height: 1.2;
}

.tt-video-card-content h3 strong {
    color: var(--light-purple);

    font-weight: 600;
}

.tt-video-card-content p{
    color: var(--milky);
    opacity: .78;
    font-size: 15px;
    line-height: 1.85;
    margin: 0 0 17px;
    max-width: 560px;
    text-align: justify;
}

.tt-video-card-content button {
    margin-top: 20px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--milky);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;
}

.tt-video-card-content button b {
    margin-left: 8px;

    color: var(--light-purple);

    font-size: 17px;

    transition:
        margin-left 0.3s ease;
}

.tt-video-card-content button:hover b {
    margin-left: 14px;
}


/* =========================================
   BOTTOM STATEMENT
========================================= */

.tt-video-bottom {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 70px;
}

.tt-video-bottom p {
    margin: 0;

    color: var(--milky);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

    white-space: nowrap;
}

.tt-video-bottom strong {
    color: var(--light-purple);
}


/* =========================================
   VIDEO MODAL
========================================= */

.tt-video-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;

    background: var(--purple);
}

.tt-video-modal.active {
    display: flex;
}

.tt-video-modal-box {
    position: relative;

    width: min(1000px, 100%);

    background: var(--font-purple);

    border: 1px solid var(--light-purple);

    padding: 10px;
}

.tt-video-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;
}

.tt-video-frame iframe {
    width: 100%;
    height: 100%;

    border: 0;

    display: block;
}

.tt-video-close {
    position: absolute;

    top: -45px;
    right: 0;

    width: 38px;
    height: 38px;

    border: 1px solid var(--light-purple);

    background: var(--purple);

    color: var(--white);

    font-size: 25px;

    line-height: 1;

    cursor: pointer;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .tt-video-stories {
        padding: 90px 5%;
    }

    .tt-video-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tt-featured-video {
        grid-template-columns: 1fr;
    }

    .tt-video-preview {
        min-height: 450px;
    }

    .tt-featured-content {
        padding: 45px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tt-video-stories {
        padding: 75px 20px;
    }

    .tt-video-heading {
        margin-bottom: 45px;
    }

    .tt-video-heading h2 {
        font-size: 43px;

        letter-spacing: -2px;
    }

    .tt-video-heading > p {
        font-size: 14px;
        text-align:justify;
    }


    .tt-video-preview {
        min-height: 300px;
    }

    .tt-play-button {
        width: 70px;
        height: 70px;
    }

    .tt-video-label {
        top: 18px;
        left: 18px;
    }

    .tt-video-duration {
        right: 18px;
        bottom: 18px;
    }


    .tt-featured-content {
        padding: 35px 25px;
    }

    .tt-featured-content h3 {
        font-size: 30px;
    }

    .tt-featured-content > p {
        font-size: 13px;
    }


    .tt-video-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .tt-video-card-image {
        height: 230px;
    }


    .tt-video-bottom {
        margin-top: 50px;

        gap: 12px;
    }

    .tt-video-bottom p {
        font-size: 8px;

        letter-spacing: 1.5px;

        text-align: center;
    }

}










/* =========================================
   SECTION 8
========================================= */

.tt-why-section {
    width: 100%;

    background: var(--milky);

    padding: 120px 6%;

    overflow: hidden;
}

.tt-why-container {
    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================
   HEADER
========================================= */

.tt-why-header {
    display: grid;

    grid-template-columns: 1.1fr 0.7fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 70px;
}

.tt-why-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: var(--light-purple);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;
}

.tt-why-title h2 {
    margin: 0;

    color: var(--font-purple);

    font-size: clamp(44px, 5.3vw, 72px);

    line-height: 1.03;

    letter-spacing: -2.5px;
}

.tt-why-title h2 span {
    color: var(--light-purple);
}

.tt-why-intro {
    padding-bottom: 5px;
}

.tt-why-intro p {
    max-width: 480px;

    margin: 0;

    color: var(--font-purple);

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================
   BENEFITS GRID
========================================= */

.tt-why-grid {
    display: grid;

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

    gap: 1px;

    background: var(--light-purple);

    border: 1px solid var(--light-purple);
}


/* =========================================
   CARD
========================================= */

.tt-why-card {
    position: relative;

    min-height: 385px;

    padding: 32px 32px 35px;

    background: var(--white);

    transition:
        background 0.45s ease,
        transform 0.45s ease;
}

.tt-why-card:hover {
    background: var(--purple);

    transform: translateY(-5px);

    z-index: 2;
}


/* =========================================
   CARD TOP
========================================= */

.tt-why-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 45px;
}

.tt-why-number {
    color: var(--light-purple);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}

.tt-why-arrow {
    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--light-purple);

    color: var(--purple);

    font-size: 17px;

    transition:
        color 0.35s ease,
        background 0.35s ease;
}


/* =========================================
   ICON
========================================= */

.tt-why-icon {
    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 25px;

    border: 1px solid var(--light-purple);

    border-radius: 50%;

    color: var(--purple);

    transition:
        background 0.35s ease,
        color 0.35s ease;
}

.tt-why-icon span {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================
   TITLE
========================================= */

.tt-why-card h3 {
    margin: 0;

    color: var(--font-purple);

    font-size: 25px;

    line-height: 1.18;

    letter-spacing: -0.6px;

    transition:
        color 0.35s ease;
}

.tt-why-card h3 span {
    display: block;

    color: var(--light-purple);
}


/* =========================================
   DESCRIPTION
========================================= */

.tt-why-card p {
    max-width: 330px;

    margin: 18px 0 0;

    color: var(--font-purple);

    font-size: 13px;

    line-height: 1.75;

    transition:
        color 0.35s ease;
        
    text-align:justify;
}


/* =========================================
   BOTTOM CARD LINE
========================================= */

.tt-why-line {
    width: 45px;

    height: 1px;

    margin-top: 25px;

    background: var(--light-purple);
}

.tt-why-card small {
    display: block;

    margin-top: 14px;

    color: var(--light-purple);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;

    transition:
        color 0.35s ease;
}


/* =========================================
   HOVER STATES
========================================= */

.tt-why-card:hover .tt-why-arrow {
    background: var(--milky);

    color: var(--purple);
}

.tt-why-card:hover .tt-why-icon {
    background: var(--light-purple);

    color: var(--white);
}

.tt-why-card:hover h3 {
    color: var(--white);
}

.tt-why-card:hover p {
    color: var(--milky);
}


/* =========================================
   BOTTOM CTA
========================================= */

.tt-why-bottom {
    margin-top: 55px;

    padding: 42px 45px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    background: var(--purple);
}

.tt-why-bottom-content > span {
    display: block;

    margin-bottom: 10px;

    color: var(--light-purple);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.5px;
}

.tt-why-bottom-content h3 {
    margin: 0;

    color: var(--white);

    font-size: 29px;

    line-height: 1.2;

    font-weight: 500;
}

.tt-why-bottom-content h3 strong {
    color: var(--light-purple);

    font-weight: 600;
}


/* =========================================
   BUTTON
========================================= */

.tt-why-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 17px 25px;

    background: var(--milky);

    color: var(--purple);

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;

    transition:
        gap 0.3s ease,
        background 0.3s ease;
}

.tt-why-button span {
    color: var(--light-purple);

    font-size: 20px;
}

.tt-why-button:hover {
    gap: 23px;

    background: var(--white);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .tt-why-section {
        padding: 90px 5%;
    }

    .tt-why-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 55px;
    }

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

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tt-why-section {
        padding: 75px 20px;
    }

    .tt-why-header {
        margin-bottom: 45px;
    }

    .tt-why-title h2 {
        font-size: 40px;

        letter-spacing: -1.5px;
    }

    .tt-why-intro p {
        font-size: 14px;

        line-height: 1.75;
        text-align:justify;
    }


    .tt-why-grid {
        grid-template-columns: 1fr;
    }


    .tt-why-card {
        min-height: auto;

        padding: 30px 25px 35px;
    }

    .tt-why-card-top {
        margin-bottom: 35px;
    }

    .tt-why-card h3 {
        font-size: 23px;
    }


    /* CTA */

    .tt-why-bottom {
        margin-top: 35px;

        padding: 30px 25px;

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

    .tt-why-bottom-content h3 {
        font-size: 25px;
    }

    .tt-why-button {
        width: 100%;

        justify-content: center;
    }

}




















/* =========================================
   SECTION 9
========================================= */

.tt-testimonial-wall {
    position: relative;

    width: 100%;

    background: var(--purple);

    padding: 120px 6%;

    overflow: hidden;
}

.tt-testimonial-container {
    position: relative;

    z-index: 2;

    max-width: 1400px;

    margin: 0 auto;
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.tt-testimonial-wall::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    border: 1px solid var(--light-purple);

    border-radius: 50%;

    top: -370px;
    right: -250px;

    opacity: 0.18;
}


/* =========================================
   HEADER
========================================= */

.tt-testimonial-header {
    display: grid;

    grid-template-columns: 1fr 0.65fr;

    align-items: end;

    gap: 70px;

    margin-bottom: 65px;
}

.tt-testimonial-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: var(--light-purple);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;
}

.tt-testimonial-header h2 {
    margin: 0;

    color: var(--white);

    font-size: clamp(44px, 5.3vw, 72px);

    line-height: 1.03;

    letter-spacing: -2.5px;
}

.tt-testimonial-header h2 span {
    color: var(--light-purple);
}

.tt-testimonial-header > p {
    max-width: 470px;

    margin: 0;

    color: var(--milky);

    font-size: 15px;
    text-align:justify;
    line-height: 1.85;
}


/* =========================================
   MASONRY GRID
========================================= */

.tt-testimonial-grid {
    display: grid;

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

    gap: 18px;

    align-items: start;
}


/* =========================================
   TESTIMONIAL CARD
========================================= */

.tt-testimonial-card {
    position: relative;

    padding: 38px 35px;

    background: var(--font-purple);

    border: 1px solid var(--light-purple);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}

.tt-testimonial-card:hover {
    transform: translateY(-7px);

    background: var(--white);
}


/* Large */

.tt-testimonial-large {
    min-height: 390px;
}


/* Offset */

.tt-testimonial-offset {
    margin-top: 55px;
    min-height: 355px;
}


/* Normal cards */

.tt-testimonial-card:not(.tt-testimonial-large):not(.tt-testimonial-offset) {
    min-height: 340px;
}


/* =========================================
   QUOTE
========================================= */

.tt-quote-mark {
    margin-bottom: 18px;

    color: var(--light-purple);

    font-size: 65px;

    line-height: 0.7;
}


/* =========================================
   TEXT
========================================= */

.tt-testimonial-text {
    margin: 0;

    color: var(--milky);

    font-size: 15px;

    line-height: 1.85;

    transition:
        color 0.35s ease;
    text-align:justify;
}


/* =========================================
   PERSON
========================================= */

.tt-testimonial-person {
    position: absolute;

    left: 35px;
    right: 35px;
    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding-top: 20px;

    border-top: 1px solid var(--light-purple);
}

.tt-person-avatar {
    flex-shrink: 0;

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--light-purple);

    color: var(--white);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;
}

.tt-testimonial-person strong {
    display: block;

    color: var(--white);

    font-size: 13px;

    transition:
        color 0.35s ease;
}

.tt-testimonial-person span {
    display: block;

    margin-top: 4px;

    color: var(--milky);

    font-size: 10px;

    transition:
        color 0.35s ease;
}


/* =========================================
   INDEX
========================================= */

.tt-testimonial-index {
    position: absolute;

    top: 25px;
    right: 25px;

    color: var(--light-purple);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    opacity: 0.8;
}


/* =========================================
   HOVER STATES
========================================= */

.tt-testimonial-card:hover
.tt-testimonial-text {
    color: var(--font-purple);
}

.tt-testimonial-card:hover
.tt-testimonial-person strong {
    color: var(--font-purple);
}

.tt-testimonial-card:hover
.tt-testimonial-person span {
    color: var(--font-purple);
}


/* =========================================
   HIGHLIGHT CARD
========================================= */

.tt-testimonial-highlight {
    min-height: 330px;

    display: flex;

    align-items: center;

    background: var(--light-purple);
}

.tt-highlight-content {
    max-width: 330px;
}

.tt-highlight-content > span {
    display: block;

    margin-bottom: 18px;

    color: var(--purple);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2.5px;
}

.tt-highlight-content h3 {
    margin: 0;

    color: var(--purple);

    font-size: 32px;

    line-height: 1.15;

    letter-spacing: -1px;
}

.tt-highlight-content h3 strong {
    display: block;

    color: var(--purple);

    font-weight: 600;
}

.tt-highlight-line {
    width: 45px;

    height: 1px;

    margin: 25px 0;

    background: var(--purple);
}

.tt-highlight-content p {
    margin: 0;

    color: var(--purple);

    font-size: 13px;

    line-height: 1.7;
}

.tt-highlight-number {
    position: absolute;

    right: 25px;
    bottom: 20px;

    color: var(--purple);

    font-size: 70px;

    line-height: 1;

    font-weight: 700;

    opacity: 0.35;
}





/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .tt-testimonial-wall {
        padding: 90px 5%;
    }

    .tt-testimonial-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 55px;
    }

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

    .tt-testimonial-offset {
        margin-top: 0;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .tt-testimonial-wall {
        padding: 75px 20px;
    }

    .tt-testimonial-header {
        margin-bottom: 45px;
    }

    .tt-testimonial-header h2 {
        font-size: 40px;

        letter-spacing: -1.5px;
    }

    .tt-testimonial-header > p {
        font-size: 14px;

        line-height: 1.75;
    }


    .tt-testimonial-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    .tt-testimonial-card,
    .tt-testimonial-large,
    .tt-testimonial-offset,
    .tt-testimonial-card:not(.tt-testimonial-large):not(.tt-testimonial-offset) {
        min-height: 350px;

        margin-top: 0;

        padding: 32px 25px;
    }


    .tt-testimonial-person {
        left: 25px;
        right: 25px;
        bottom: 28px;
    }


    .tt-testimonial-highlight {
        min-height: 300px;
    }


    .tt-highlight-content h3 {
        font-size: 29px;
    }

}











/* =========================================
   SECTION 10 — CTA
========================================= */

.tt-success-cta {
    position: relative;
    overflow: hidden;
    background: #F8ECE2;
    padding: 120px 30px 45px;
    color: #2F1337;
}

.tt-success-cta-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: auto;
    text-align: center;
}

/* Label */

.tt-success-cta-label {
    display: inline-block;
    margin-bottom: 25px;
    color: #C56CC4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
}

/* Heading */

.tt-success-cta h2 {
    margin: 0 auto;
    max-width: 850px;
    font-size: clamp(42px, 6vw, 78px);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -3px;
    color: #280B36;
}

.tt-success-cta h2 span {
    display: block;
    color: #C56CC4;
}

/* Text */

.tt-success-cta p {
    max-width: 560px;
    margin: 30px auto 38px;
    color: #2F1337;
    font-size: 17px;
    line-height: 1.7;
}

/* Button */

.tt-success-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    min-width: 230px;
    padding: 17px 20px 17px 26px;
    background: #280B36;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    border: 1px solid #280B36;
    transition: all 0.35s ease;
}

.tt-success-cta-btn i {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8ECE2;
    color: #280B36;
    font-size: 20px;
    font-style: normal;
    transition: all 0.35s ease;
}

.tt-success-cta-btn:hover {
    background: #C56CC4;
    border-color: #C56CC4;
    color: #FFFFFF;
    transform: translateY(-4px);
}

.tt-success-cta-btn:hover i {
    transform: translateX(5px);
}

/* Bottom Statement */

.tt-success-cta-bottom {
    margin-top: 105px;
    padding-top: 25px;
    border-top: 1px solid #C56CC4;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    color: #2F1337;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.tt-success-cta-bottom b {
    color: #C56CC4;
    font-size: 17px;
    font-weight: 400;
}

/* Decorative Shapes */

.tt-success-cta-shape {
    position: absolute;
    border: 1px solid #C56CC4;
    pointer-events: none;
}

.tt-shape-one {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    left: -150px;
    top: 50%;
    transform: translateY(-50%);
}

.tt-shape-two {
    width: 190px;
    height: 190px;
    right: -90px;
    top: 70px;
    transform: rotate(45deg);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .tt-success-cta {
        padding: 85px 20px 35px;
    }

    .tt-success-cta-label {
        font-size: 10px;
        letter-spacing: 2px;
        margin-bottom: 20px;
    }

    .tt-success-cta h2 {
        font-size: clamp(40px, 12vw, 58px);
        line-height: 1;
        letter-spacing: -2px;
    }

    .tt-success-cta p {
        margin: 25px auto 32px;
        font-size: 15px;
        line-height: 1.65;
    }

    .tt-success-cta-btn {
        width: 100%;
        max-width: 290px;
        gap: 20px;
    }

    .tt-success-cta-bottom {
        margin-top: 70px;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 9px;
        letter-spacing: 1.3px;
    }

    .tt-success-cta-bottom b {
        font-size: 14px;
    }

    .tt-shape-one {
        width: 180px;
        height: 180px;
        left: -110px;
    }

    .tt-shape-two {
        width: 120px;
        height: 120px;
        right: -60px;
        top: 40px;
    }

}