@media (max-width:1024px){
    .hero{
        flex-direction:column;
        padding:120px 40px 60px;
        gap:50px;
    }
    .hero-left,
    .hero-right{
        width:100%;
    }
    .hero h1{
        font-size:52px;
    }
    .cards{
        grid-template-columns:repeat(2,1fr);
    }
    .platform-container{
        grid-template-columns:1fr 1fr;
    }
    .pricing-container{
        grid-template-columns:repeat(2,1fr);
    }
    .featurex-grid{
        grid-template-columns:repeat(3,1fr);
    }
    .footer-container{
        grid-template-columns:repeat(3,1fr);
    }
    .ai-section{
        flex-direction:column;
    }
    .ai-left,
    .ai-right{
        width:100%;
    }
}



@media (max-width:768px){
    .navbar{
        flex-wrap:wrap;
        padding:18px 20px;
    }
    .menu-toggle{
        display:block;
    }
    .nav-menu{
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        gap:0;
        display:none;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
    }

    .nav-menu.active{
        display:flex;
    }
    .nav-menu li{
        width:100%;
    }
    .nav-menu li a{
        display:block;
        padding:18px 25px;
    }
    .nav-right{
        display:none;
    }
    .hero{
        padding:120px 20px 40px;
    }
    .hero h1{
        font-size:38px;
    }
    .hero p{
        font-size:16px;
    }
    .buttons{
        flex-direction:column;
    }
    .dashboard{
        flex-direction:column;
    }
    .sidebar{
        width:100%;
        flex-direction:row;
        justify-content:center;
    }
    .cards{
        grid-template-columns:1fr;
    }
    .phone{
        position:relative;
        width:100%;
        height:auto;
        right:0;
        bottom:0;
        margin-top:30px;
    }
    .platform-container{
        grid-template-columns:1fr;
    }
    .featurex-grid{
        grid-template-columns:1fr;
    }
    .pricing-container{
        grid-template-columns:1fr;
    }
    .relationship{
        grid-template-columns:1fr;
        gap:30px;
    }
    .feature-grid{
        grid-template-columns:1fr;
    }
    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }
    .cta-box{
        flex-direction:column;
        text-align:center;
        gap:25px;
        padding:30px 20px;
    }

    .cta-btn{
        flex-direction:column;
        width:100%;
    }

    .cta-btn a{
        width:100%;
    }

}


@media (max-width:992px){

    .ai-section{
        display:flex;
        flex-direction:column;
    }

    .ai-left,
    .ai-right{
        width:100%;
    }

    .ai-left{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:40px 25px;
    }

    .phones{
        margin-bottom:30px;
    }

    .phones img{
        width:280px;
        max-width:100%;
    }

    .content{
        width:100%;
        padding:0;
    }

    .feature-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .relationship{
        grid-template-columns:1fr;
        gap:35px;
    }

    .box{
        margin-bottom:25px;
    }

}

@media (max-width:480px){

    .content h2,
    .ai-right h2{
        font-size:32px;
    }

    .content p,
    .ai-right p{
        font-size:15px;
    }

    .phones img{
        width:220px;
    }

}



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

@media(max-width:1200px){

.ftr-content h1{
    font-size:56px;
}

.ftr-content p{
    font-size:18px;
}

}

@media(max-width:992px){

.ftr-hero-container{
    flex-direction:column;
    text-align:center;
}

.ftr-content,
.ftr-image{
    width:100%;
}

.ftr-buttons{
    justify-content:center;
}

.ftr-ai{
    width:220px;
    right:20px;
}

}

@media(max-width:768px){

.ftr-hero{
    padding:70px 0;
}

.ftr-hero-container{
    padding:0 25px;
}

.ftr-content h1{
    font-size:42px;
}

.ftr-content p{
    font-size:16px;
}

.ftr-buttons{
    flex-direction:column;
}

.ftr-buttons a{
    width:100%;
}

.ftr-ai{
    display:none;
}

}



@media(max-width:1100px){

.ftr-foundation-grid{

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

}

}

@media(max-width:768px){

.ftr-foundation{

    padding:70px 0;

}

.ftr-foundation-header h2{

    font-size:34px;

}

.ftr-foundation-header p{

    font-size:16px;

}

.ftr-foundation-grid{

    grid-template-columns:1fr;

}

}


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

@media(max-width:992px){

.ftr-why-grid{

    grid-template-columns:1fr;

}

.ftr-connect{

    margin-top:50px;

}

}

@media(max-width:768px){

.ftr-connect{

    transform:scale(.82);

    transform-origin:center top;

    height:430px;

}

}

@media(max-width:991px){

.grw-challenge-grid{
    grid-template-columns:1fr;
}

}

/* responsive */

@media(max-width:1200px){

.grw-sales-grid{

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

}

}

@media(max-width:768px){

.grw-sales-header{

flex-direction:column;

}

.grw-sales-grid{

grid-template-columns:1fr;

}

.grw-sales-content h2{

font-size:34px;

}

}


/* RESPONSIVE */

@media(max-width:1200px){

.grw-marketing-grid{

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

}

}

@media(max-width:768px){

.grw-marketing-grid{

grid-template-columns:1fr;

}

.grw-marketing-header h2{

font-size:34px;

}

}



/* responsive */

@media(max-width:1200px){
    .grw-foundation-grid{
        grid-template-columns:1fr;
    }

    .grw-foundation-cards{
        grid-template-columns:repeat(2,1fr);

    }
}

@media(max-width:768px){
    .grw-foundation-cards{
        grid-template-columns:1fr;
    }
    .grw-foundation h2{
        font-size:28px;
    }
    .grw-ai-preview{
        text-align:center;
    }
    .grw-ai-preview img{
        width:100%;
    }
}


@media(max-width:1200px){
    .eng-module-grid{
        grid-template-columns:1fr;
    }
    .eng-feature-4{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .eng-feature-4,
    .eng-feature-2{
        grid-template-columns:1fr;
    }
    .eng-module{
        padding:25px;
    }
    .eng-module h2{
        font-size:28px;
    }
}



/* =========================================================
   TABLET — MAX 1200px
========================================================= */

@media (max-width: 1200px) {

    .container {
        padding-left: 30px;
        padding-right: 30px;
    }

    /* =========================
       NAVBAR
    ========================= */

    .navbar {
        padding: 16px 25px;
    }

    .nav-menu {
        gap: 20px;
    }

    .nav-menu li a {
        font-size: 14px;
    }


    /* =========================
       HERO
    ========================= */

    .hero {
        padding: 120px 40px 60px;
        gap: 40px;
    }

    .hero-left {
        width: 45%;
    }

    .hero-right {
        width: 55%;
    }

    .hero h1 {
        font-size: 55px;
    }

    .hero p {
        font-size: 17px;
    }


    /* =========================
       PRODUCT HERO
    ========================= */

    .product-hero-container {
        padding: 120px 30px 70px;
        min-height: auto;
        gap: 40px;
    }

    .product-left {
        width: 52%;
    }

    .product-right,
    .product-right2 {
        width: 48%;
    }

    .product-left h1 {
        font-size: 50px;
    }

    .product-left p {
        font-size: 18px;
    }


    /* =========================
       WHY SUNNY
    ========================= */

    .product-why-container {
        padding: 70px 30px;
        gap: 40px;
    }

    .product-why-content {
        width: 55%;
    }

    .product-why-image {
        width: 45%;
    }

    .product-why-content h2 {
        font-size: 44px;
    }


    /* =========================
       PRODUCT FEATURES
    ========================= */

    .product-feature-grid {
        padding: 0 30px;
    }

    .product-feature-box {
        height: auto;
        min-height: 480px;
    }


    /* =========================
       FTR
    ========================= */

    .ftr-hero-container {
        padding: 0 30px;
        gap: 40px;
    }

    .ftr-content h1 {
        font-size: 50px;
    }

    .ftr-foundation-container,
    .ftr-outcomes-container,
    .ftr-why-container {
        padding-left: 30px;
        padding-right: 30px;
    }


    /* =========================
       GROW
    ========================= */

    .grw-hero-container {
        padding: 0 30px;
    }

    .grw-wrapper {
        gap: 40px;
    }

    .grw-content {
        width: 52%;
    }

    .grw-image {
        width: 48%;
    }

    .grw-content h1 {
        font-size: 42px;
    }

    .grw-sales .container,
    .grw-marketing .container {
        padding-left: 30px;
        padding-right: 30px;
    }


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

    .journey-container,
    .journey-flex-container,
    .journey-solution-container {
        width: calc(100% - 60px);
    }


    /* =========================
       ABOUT
    ========================= */

    .about-story-container,
    .about-container {
        width: calc(100% - 60px);
    }


    /* =========================
       CONTACT
    ========================= */

    .contact-container {
        width: calc(100% - 60px);
    }


    /* =========================
       CAREER
    ========================= */

    .career-container {
        max-width: 1100px;
    }


    /* =========================
       PRICING
    ========================= */

    .pricing-container {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 30px;
    }

    .pricing-info {
        grid-column: span 2;
    }

    .benefits {
        grid-column: span 2;
    }


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

    .cta-box {
        margin-left: 30px;
        margin-right: 30px;
    }


    /* =========================
       FOOTER
    ========================= */

    .footer-container {
        padding: 0 30px;
    }

}


/* =========================================================
   TABLET — MAX 991px
========================================================= */

@media (max-width: 991px) {

    /* =========================
       NAVBAR
    ========================= */

    .navbar {
        padding: 16px 20px;
    }

    .nav-menu {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .nav-right {
        display: none;
    }


    /* =========================
       HERO
    ========================= */

    .hero {
        flex-direction: column;
        padding: 120px 30px 60px;
    }

    .hero-left,
    .hero-right {
        width: 100%;
    }

    .hero-left {
        text-align: center;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .buttons {
        justify-content: center;
    }

    .features {
        justify-content: center;
    }


    /* =========================
       PRODUCT HERO
    ========================= */

    .product-hero-container {
        flex-direction: column;
        text-align: center;
        padding: 120px 30px 70px;
    }

    .product-left,
    .product-right,
    .product-right2 {
        width: 100%;
    }

    .product-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .product-left p {
        max-width: 700px;
    }

    .product-right,
    .product-right2 {
        justify-content: center;
    }

    .hero-dashboard {
        max-width: 700px;
    }

    .hero-chat {
        right: 5%;
    }


    /* =========================
       WHY SUNNY
    ========================= */

    .product-why-container {
        flex-direction: column;
        text-align: center;
    }

    .product-why-content,
    .product-why-image {
        width: 100%;
    }

    .product-why-content {
        max-width: 800px;
    }

    .product-why-content p {
        max-width: 750px;
        margin-left: auto;
        margin-right: auto;
    }

    .product-why-image img {
        max-width: 600px;
    }


    /* =========================
       PRODUCT FEATURE
    ========================= */

    .product-feature-grid {
        grid-template-columns: 1fr;
        padding: 0 30px;
    }

    .product-feature-box {
        min-height: auto;
        height: auto;
    }


    /* =========================
       PRINCIPLE
    ========================= */

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

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


    /* =========================
       FTR HERO
    ========================= */

    .ftr-hero-container {
        flex-direction: column;
        text-align: center;
    }

    .ftr-content,
    .ftr-image {
        width: 100%;
    }

    .ftr-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ftr-content p {
        max-width: 750px;
    }

    .ftr-image {
        justify-content: center;
    }

    .ftr-dashboard {
        max-width: 700px;
    }

    .ftr-ai {
        right: 5%;
    }


    /* =========================
       FTR OUTCOMES
    ========================= */

    .ftr-outcome-card {
        grid-template-columns: 1fr;
    }

    .ftr-outcome-image {
        min-height: 300px;
    }

    .ftr-link {
        position: static;
        display: inline-block;
        margin-top: 25px;
    }


    /* =========================
       FTR WHY
    ========================= */

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

    .ftr-why-content {
        text-align: center;
    }


    /* =========================
       GROW HERO
    ========================= */

    .grw-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .grw-content,
    .grw-image {
        width: 100%;
    }

    .grw-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .grw-content p {
        max-width: 750px;
    }

    .grw-image {
        display: flex;
        justify-content: center;
    }


    /* =========================
       SALES / MARKETING
    ========================= */

    .grw-sales-header {
        flex-direction: column;
        text-align: center;
    }

    .grw-sales-content {
        width: 100%;
    }

    .grw-sales-preview {
        width: 100%;
        max-width: 700px;
    }

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


    /* =========================
       ENGAGE
    ========================= */

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

    .eng-feature-2 {
        grid-template-columns: 1fr;
    }


    /* =========================
       ABOUT
    ========================= */

    .about-story-container {
        grid-template-columns: 1fr;
    }

    .about-gallery {
        position: relative;
        top: 0;
    }

    .about-values-grid,
    .about-bottom-grid {
        grid-template-columns: 1fr;
    }


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

    .journey-container {
        flex-direction: column;
        text-align: center;
    }

    .journey-content {
        width: 100%;
    }

    .journey-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .journey-buttons {
        justify-content: center;
    }

    .journey-graphic {
        width: 100%;
        max-width: 550px;
    }

    .journey-flex-container {
        grid-template-columns: 1fr;
    }


    /* =========================
       CAREER
    ========================= */

    .career-grid {
        grid-template-columns: 1fr;
    }


    /* =========================
       CONTACT
    ========================= */

    .contact-container {
        grid-template-columns: 1fr;
    }


    /* =========================
       PLATFORM
    ========================= */

    .platform-container {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   MOBILE — MAX 768px
========================================================= */

@media (max-width: 768px) {

    /* =========================
       GLOBAL
    ========================= */

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* =========================
       NAVBAR
    ========================= */

    .navbar {
        padding: 14px 18px;
    }

    .logo h2 {
        font-size: 24px;
    }


    /* =========================
       HERO
    ========================= */

    .hero {
        padding: 105px 20px 50px;
    }

    .hero h1 {
        font-size: 38px;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.7;
    }

    .buttons {
        width: 100%;
        flex-direction: column;
    }

    .buttons a {
        width: 100%;
        text-align: center;
    }


    /* =========================
       PRODUCT HERO
    ========================= */

    .product-hero-container {
        padding: 105px 20px 50px;
    }

    .product-left h1 {
        font-size: 40px;
    }

    .product-left p {
        font-size: 16px;
        line-height: 1.7;
    }

    .hero-chat {
        width: 190px;
        right: 0;
        bottom: -10px;
    }


    /* =========================
       WHY SUNNY
    ========================= */

    .product-why-container {
        padding: 60px 20px;
    }

    .product-why-content h2 {
        font-size: 36px;
    }

    .product-why-content p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* =========================
       PRODUCT FEATURE
    ========================= */

    .product-feature-section {
        padding: 30px 0;
    }

    .product-feature-grid {
        padding: 0 20px;
        gap: 20px;
    }

    .product-feature-box {
        padding: 25px;
        border-radius: 14px;
    }

    .product-feature-box h2 {
        font-size: 32px;
    }

    .product-ai-content {
        flex-direction: column;
        gap: 25px;
    }

    .product-ai-content img {
        width: 100%;
        max-width: 280px;
        margin: auto;
    }


    /* =========================
       PRINCIPLE
    ========================= */

    .product-principle-grid,
    .product-principle-gridv2 {
        grid-template-columns: 1fr;
    }


    /* =========================
       FTR
    ========================= */

    .ftr-hero {
        padding: 60px 0;
    }

    .ftr-hero-container {
        padding: 0 20px;
    }

    .ftr-content h1 {
        font-size: 40px;
    }

    .ftr-content p {
        font-size: 16px;
    }

    .ftr-buttons {
        width: 100%;
        flex-direction: column;
    }

    .ftr-buttons a {
        width: 100%;
        text-align: center;
    }

    .ftr-ai {
        display: none;
    }


    /* =========================
       FTR FOUNDATION
    ========================= */

    .ftr-foundation {
        padding: 60px 0;
    }

    .ftr-foundation-container,
    .ftr-outcomes-container,
    .ftr-why-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ftr-foundation-header h2,
    .ftr-foundation-header2 h2 {
        font-size: 34px;
    }

    .ftr-foundation-header p,
    .ftr-foundation-header2 p {
        font-size: 16px;
    }

    .ftr-foundation-grid {
        grid-template-columns: 1fr;
    }


    /* =========================
       FTR OUTCOMES
    ========================= */

    .ftr-outcomes {
        padding: 60px 0;
    }

    .ftr-outcomes-header h2 {
        font-size: 34px;
    }

    .ftr-outcome-content {
        padding: 25px;
    }

    .ftr-outcome-content h3 {
        font-size: 30px;
    }

    .ftr-outcome-tag {
        font-size: 30px;
    }


    /* =========================
       NETWORK
    ========================= */

    .ftr-connect {
        height: 430px;
        transform: none;
        border-radius: 20px;
    }

    .ftr-node {
        padding: 12px 15px;
        min-width: auto;
    }

    .ftr-node i {
        font-size: 20px;
    }

    .ftr-node span {
        font-size: 12px;
    }

    .sales {
        left: 15px;
        top: 20px;
    }

    .marketing {
        right: 15px;
        top: 20px;
    }

    .service {
        right: 10px;
        top: 170px;
    }

    .operations {
        left: 10px;
        top: 170px;
    }

    .analytics {
        left: 15px;
        bottom: 30px;
    }

    .ai {
        right: 15px;
        bottom: 30px;
    }

    .ftr-center {
        width: 100px;
        height: 100px;
    }

    .ftr-center img {
        width: 55px;
    }


    /* =========================
       GROW
    ========================= */

    .grw-hero {
        padding-top: 105px;
    }

    .grw-hero-container {
        padding: 0 20px;
    }

    .grw-content h1 {
        font-size: 34px;
    }

    .grw-content p {
        font-size: 16px;
    }

    .grw-buttons {
        width: 100%;
        flex-direction: column;
    }

    .grw-buttons a {
        width: 100%;
        text-align: center;
    }

    .grw-sales,
    .grw-marketing {
        padding: 50px 0;
    }

    .grw-sales .container,
    .grw-marketing .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .grw-sales-grid,
    .grw-marketing-grid,
    .grw-marketing-gridv2 {
        grid-template-columns: 1fr;
    }

    .grw-sales-content h2,
    .grw-marketing-header h2 {
        font-size: 34px;
    }


    /* =========================
       GROW FOUNDATION
    ========================= */

    .grw-foundation {
        padding: 50px 20px;
    }

    .grw-foundation-grid {
        grid-template-columns: 1fr;
    }

    .grw-foundation-cards {
        grid-template-columns: 1fr;
    }

    .grw-foundation-left,
    .grw-foundation-right {
        padding: 25px;
    }


    /* =========================
       ENGAGE
    ========================= */

    .eng-modules {
        padding: 30px 20px;
    }

    .eng-module {
        padding: 25px 20px;
    }

    .eng-module h2 {
        font-size: 30px;
    }

    .eng-feature-4,
    .eng-feature-2 {
        grid-template-columns: 1fr;
    }


    /* =========================
       ABOUT
    ========================= */

    .about-story {
        padding: 60px 0;
    }

    .about-story-container,
    .about-container {
        width: calc(100% - 40px);
    }

    .about-title {
        font-size: 36px;
    }

    .about-subtitle {
        font-size: 21px;
    }

    .about-story-content p {
        font-size: 16px;
    }

    .about-quote {
        font-size: 22px;
    }

    .about-gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-photo-large {
        grid-column: span 2;
    }


    /* =========================
       VALUES
    ========================= */

    .about-values {
        padding: 60px 0;
    }

    .about-values-header h2 {
        font-size: 34px;
    }

    .about-values-grid,
    .about-bottom-grid {
        grid-template-columns: 1fr;
    }


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

    .journey-section {
        padding: 60px 0;
    }

    .journey-container {
        width: calc(100% - 40px);
    }

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

    .journey-content p {
        font-size: 16px;
    }

    .journey-buttons {
        flex-direction: column;
    }

    .journey-buttons a {
        width: 100%;
    }

    .journey-graphic {
        min-height: 390px;
    }

    .journey-circle {
        width: 260px;
        height: 260px;
        right: 10px;
    }

    .journey-core {
        left: 50%;
        transform: translateX(-50%);
        width: 190px;
    }

    .journey-card {
        min-width: 120px;
        padding: 10px 14px;
    }

    .journey-card strong {
        font-size: 11px;
    }

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

    .grow {
        left: 20px;
        top: 20px;
    }

    .engage {
        left: 10px;
        top: 250px;
    }

    .empower {
        right: 10px;
        left: auto;
        top: 250px;
    }

    .platform {
        display: none;
    }


    /* =========================
       JOURNEY FLEX
    ========================= */

    .journey-flex {
        padding: 30px 0 60px;
    }

    .journey-flex-container {
        width: calc(100% - 40px);
    }

    .journey-card-left,
    .journey-card-right {
        padding: 25px;
    }


    /* =========================
       JOURNEY SOLUTION
    ========================= */

    .journey-solution {
        padding: 60px 0;
    }

    .journey-solution-container {
        width: calc(100% - 40px);
        padding: 25px;
    }

    .journey-modules {
        flex-direction: column;
    }

    .journey-module {
        width: 100%;
    }


    /* =========================
       CAREER
    ========================= */

    .career-section {
        padding: 60px 0;
    }

    .career-container {
        padding: 0 20px;
    }

    .career-grid {
        grid-template-columns: 1fr;
    }

    .career-values {
        grid-template-columns: 1fr;
    }

    .career-lead {
        font-size: 17px;
    }

    .career-apply h2 {
        font-size: 32px;
    }


    /* =========================
       CONTACT
    ========================= */

    .contact-section {
        padding: 60px 0;
    }

    .contact-container {
        width: calc(100% - 40px);
        padding: 0;
        margin-top: 20px;
    }

    .contact-info,
    .contact-form-card {
        padding: 25px 20px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form-header h2 {
        font-size: 26px;
    }

    .contact-us-image {
        width: 100%;
    }


    /* =========================
       PRICING
    ========================= */

    .pricing {
        padding-top: 40px;
        margin-top: 0;
    }

    .pricing-container {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .pricing-info,
    .price-card,
    .benefits {
        padding: 25px;
    }

    .pricing-info {
        grid-column: auto;
    }

    .benefits {
        grid-column: auto;
    }

    .pricing-info h2 {
        font-size: 38px;
    }

    .price-card h3 {
        font-size: 26px;
    }

    .price h1 {
        font-size: 48px;
    }


    /* =========================
       PLATFORM
    ========================= */

    .platform {
        padding: 60px 20px;
    }

    .platform-container {
        grid-template-columns: 1fr;
    }

    .platform-info,
    .feature-card {
        padding: 30px 20px;
    }

    .platform-info h2 {
        font-size: 36px;
    }


    /* =========================
       AI SECTION
    ========================= */

    .ai-left,
    .ai-right {
        padding: 30px 20px;
    }

    .content h2,
    .ai-right h2 {
        font-size: 34px;
    }


    /* =========================
       FEATURES X
    ========================= */

    .featuresx {
        padding: 60px 20px;
    }

    .featurex-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .featurex {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 25px;
    }


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

    .cta-box {
        margin-left: 20px;
        margin-right: 20px;
        padding: 30px 20px;
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .cta-text h2 {
        font-size: 30px;
    }

    .cta-btn {
        width: 100%;
        flex-direction: column;
    }

    .cta-btn a {
        width: 100%;
    }


    /* =========================
       FOOTER
    ========================= */

    footer {
        padding: 80px 0 40px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        padding: 0 20px;
        text-align: center;
    }

    .social {
        justify-content: center;
    }

    .footer-about img {
        margin-left: auto;
        margin-right: auto;
    }

}


/* =========================================================
   SMALL MOBILE — MAX 480px
========================================================= */

@media (max-width: 480px) {

    /* =========================
       NAVBAR
    ========================= */

    .navbar {
        padding: 13px 15px;
    }

    .logo {
        gap: 8px;
    }

    .logo h2 {
        font-size: 22px;
    }

    .logo-icon {
        width: 24px;
        height: 24px;
    }


    /* =========================
       HERO
    ========================= */

    .hero {
        padding: 100px 15px 40px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 15px;
    }


    /* =========================
       PRODUCT HERO
    ========================= */

    .product-hero-container {
        padding: 100px 15px 40px;
    }

    .product-left h1 {
        font-size: 34px;
    }

    .product-left p {
        font-size: 15px;
    }

    .hero-chat {
        width: 150px;
    }


    /* =========================
       WHY
    ========================= */

    .product-why-container {
        padding: 50px 15px;
    }

    .product-why-content h2 {
        font-size: 30px;
    }

    .product-why-content p {
        font-size: 15px;
    }


    /* =========================
       FTR
    ========================= */

    .ftr-content h1 {
        font-size: 34px;
    }

    .ftr-content p {
        font-size: 15px;
    }


    /* =========================
       GROW
    ========================= */

    .grw-content h1 {
        font-size: 30px;
    }

    .grw-content p {
        font-size: 15px;
    }


    /* =========================
       ABOUT
    ========================= */

    .about-story-container,
    .about-container {
        width: calc(100% - 30px);
    }

    .about-title {
        font-size: 32px;
    }

    .about-subtitle {
        font-size: 20px;
    }

    .about-quote {
        font-size: 20px;
    }

    .about-gallery-grid {
        gap: 10px;
    }

    .about-photo-large {
        height: 200px;
    }

    .about-photo-tall,
    .about-photo:not(.about-photo-large):not(.about-photo-tall) {
        height: 160px;
    }


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

    .journey-container,
    .journey-flex-container,
    .journey-solution-container {
        width: calc(100% - 30px);
    }

    .journey-content h2 {
        font-size: 34px;
    }

    .journey-graphic {
        min-height: 350px;
        transform: scale(.9);
    }

    .journey-core {
        width: 170px;
        height: 80px;
        padding: 15px;
    }

    .core-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }


    /* =========================
       CONTACT
    ========================= */

    .contact-container {
        width: calc(100% - 30px);
    }

    .contact-info,
    .contact-form-card {
        padding: 22px 16px;
    }

    .contact-heading {
        gap: 6px;
    }

    .contact-heading-title {
        font-size: 12px;
        padding: 8px 10px;
    }

    .contact-form-header h2 {
        font-size: 24px;
    }

    .contact-submit {
        width: 100%;
    }


    /* =========================
       PRICING
    ========================= */

    .pricing-container {
        padding: 0 15px;
    }

    .pricing-info h2 {
        font-size: 34px;
    }

    .price h1 {
        font-size: 42px;
    }


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

    .cta-box {
        margin-left: 15px;
        margin-right: 15px;
    }


    /* =========================
       FOOTER
    ========================= */

    .footer-container {
        padding: 0 15px;
    }
}