:root {
    --color-bg-nav: #FDF7ED;
    --color-bg-hero: #4D7DCD;
    --color-btn: #324968;
    --color-btn-hover: #213248;
    --color-text-dark: #33587F;
    --color-text-subtle: #33587F;
    --color-badge-bg: #FCF9EE;
    --color-badge-text: #5A6D3A;
    --color-tag-blue: #7296C8;
    --font-serif: 'Instrument Serif', serif;
    --font-sans: 'DM Sans', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-nav);
    color: var(--color-text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.site-header {
    background-color: var(--color-bg-nav);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    width: 100%;
    position: relative;
    z-index: 50;
    height: auto;
    background: #FDF7ED;
}

.nav-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FDF7ED;
}

.nav-group-left,
.nav-group-right {
    display: flex;
    align-items: center;
    gap: 36px;
}



.nav-link {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 16px;
    color: #2D3748;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #000000;
}

.logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    max-height: 57px;
    width: auto;    
   
    display: block;
}

.btn-primary {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    background-color: var(--color-btn);
    border: none;
    border-radius: 15px;
    padding: 11px 21px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover {
    background-color: var(--color-btn-hover);
}

.btn-primary:active {
    transform: scale(0.98);
}

.hero-section {
    background-color: var(--color-bg-hero);
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 60px 0 0px;
}

.hero-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content {
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 620px;
}

.hero-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 112px;
    line-height: 0.95;
    color: #FFFFFF;
    letter-spacing: -1px;
}

.hero-subtitle {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 24px;
    text-transform: uppercase;
    color: #FFFFFF;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.hero-description {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 125%;
    max-width: 460px;
    letter-spacing: -2%;
}

.hero-action {
    margin-top: 12px;
}

.getBreak-nav,
.getBreak-nav:hover,
.getBreak-nav:focus {
    font-size: 16px;
    color: #33587F;
    text-decoration: none;
}

.hero-media {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
    border-radius: 28px;
    overflow: hidden;

    /* Slow motion entrance animation (bottom to top) */
    animation: slideUpSlow 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.launching-badge img {
    max-width: 137px;
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.badge-floating {
    position: absolute;
    top: 110px;
    right: -21px;
    z-index: 10;
    background-color: var(--color-badge-bg);
    color: #787F32;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 19px;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    padding: 19px 31px;
    border-radius: 80%;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: scale(0.6) rotate(-7deg);
    transform: rotate(13deg) !important;
    animation: popInBadge 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s forwards;
}

.brand-title img {
    max-width: 170px;
}

.brand-title.small img {
    max-width: 105px;
}

/* Keyframes: Slow Motion Bottom to Top for Banner Image */
@keyframes slideUpSlow {
    0% {
        opacity: 0;
        transform: translateY(180px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes: Smooth Appearance for Floating Badge */
@keyframes popInBadge {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px) rotate(-7deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(-7deg);
    }
}

.text-slider {
    background: #F8E39F;
    width: 100%;
    float: left;
}

.text-slider .container {
    position: relative;
}

/* animated text css */
.hmprtnr_logoWrap {
    overflow: hidden;
    padding: 0;
}

.hmprtnr_logoWrap .owl-stage {
    display: flex;
    align-items: center;
}

.hmprtnr_logoItem {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #66230B;
    font-size: 16px;
    font-family: var(--font-sans);
    text-transform: uppercase;
}

.hmprtnr_logoItem img {
    width: auto !important;
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

/* ==========================================================================
           New Section: Better Breakfast Decisions Menu
           ========================================================================== */
.menu-section {
    background-color: var(--color-bg-nav);
    padding: 80px 0 100px 0;
    width: 100%;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 24px;
    border-bottom: 1.5px solid #33587F;
    margin-bottom: 115px;
}

.menu-title {
    font-family: var(--font-serif);
    font-size: 60px;
    font-weight: 400;
    color: var(--color-btn);
    line-height: 1;
    letter-spacing: -2%;
    text-transform: capitalize;
}

.menu-subtitle {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-subtle);
    max-width: 405px;
    text-align: left;
    line-height: 115%;
    letter-spacing: -2%;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
    row-gap: 70px;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.item-image-wrapper {
    position: relative;
    width: 230px;
    height: 230px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.item-img {
    width: 400px;
    height: 400px;
    object-fit: cover;

}

.mt-80 {
    margin-top: 80px;
}

.item-ingredients {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.4;
    color: var(--color-text-dark);
    max-width: 300px;
    margin-bottom: 16px;
    position: relative;
    margin-top: 25px;
    letter-spacing: -3%;
}

.item-ingredients strong {
    font-weight: 700;
}

.item-tag {
    display: inline-block;
    background-color: var(--color-tag-blue);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 8px 16px;
    border-radius: 9999px;
    max-width: 270px;
}

/* Launching Soon Badge on 6th item */
.launching-badge {
    position: absolute;
    right: -61px;
    bottom: -12px;
    border-radius: 20px;
    text-align: center;
    z-index: 10;
    transform: rotate(8deg);
}

.cta-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Main Banner Box */
.cta {
    background-color: #DDE2E8;
    width: 100%;
    padding: 40px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
}

/* Heading Text */
.cta-heading {
    font-family: var(--font-serif);
    font-size: 69px;
    font-weight: 700;
    color: #33587F;
    letter-spacing: -0.5px;
}

/* Items Container */
.cta-items {
    display: flex;
    align-items: center;
}

/* Individual Item */
.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 45px;
}

.item:not(:last-child) {
    border-right: 1px solid #A8B4C0;
}

/* Brand Titles */
.brand-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #3B5375;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin-bottom: 6px;
}



/* Order Button */
.order-btn {
    background-color: #3E5879;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 22px;
    font-weight: 400;
    font-family: var(--font-sans);
    padding: 16px 36px;
    border-radius: 16px;
    letter-spacing: -2%;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.order-btn:hover {
    background-color: #2F4460;
    transform: translateY(-1px);
}

.midd-heading {
    font-family: var(--font-serif);
    font-size: 68px;
    font-weight: 400;
    color: #33587F;
    letter-spacing: -2%;
    margin-bottom: 32px;
    line-height: 68px;
}

.content {
    color: #33587F;
    font-size: 22px;
    line-height: 117%;
    letter-spacing: -0.1px;
}

.content p {
    margin-bottom: 24px;
    letter-spacing: -2%;
    font-weight: 400;
    font-size: 17px;
    line-height: 21px;
    text-align: center;
}

.content p:last-child {
    margin-bottom: 0;
}

.highlight {
    font-weight: 700;
    color: #3E5879;
}

.founder-img {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.founder-img img {
    max-width: 100%;
    display: block;    
    padding-left: 8%;
}

.founder-section {
    width: 100%;
    clear: both;
    margin-top: 50px;
    margin-bottom: 80px;
}

footer {
    background-color: #3E5879;
    color: #FFFFFF;
    font-family: var(--font-serif);
    padding: 60px 80px;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* Left Heading Section */
.footer-heading {
    font-family: var(--font-serif);
    font-size: 93px;
    font-weight: 500;
    line-height: 1.1;
    max-width: 500px;
    letter-spacing: -0.5px;
}

/* Right Details Section */
.footer-info {
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
}

/* Speak to us & Contact Details */
.contact-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-block a {
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contact-block a:hover {
    opacity: 0.8;
}

.copyright {
    margin-top: -16px;
    font-size: 14px;
}

.call {
    pointer-events: none;
}

/* Instagram Link */
.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 19px;
    font-weight: 500;
    width: fit-content;
}

.instagram-link:hover {
    opacity: 0.85;
}

.instagram-link svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* FSSAI Badge Block */
.fssai-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.fssai-badge {
    max-width: 60px;
}

.fssai-badge img {
    width: 100%;
}

.fssai-img {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

/* Right Side Fixed Anchor Button */
.get-breakfast-link {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f5e4a1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 35px 0 5px;
    text-decoration: none;
    z-index: 10;
    box-shadow: -15px 0 2px #f5e4a1;
    transition: opacity 0.2s ease;
}

.get-breakfast-link:hover {
    opacity: 0.85;
}

.get-breakfast-text {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 600;
    color: #63230A;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.get-breakfast-arrow {
    width: 24px;
    height: 24px;
    stroke: #63230A;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform 0.2s ease;
}

.get-breakfast-link:hover .get-breakfast-arrow {
    transform: translateX(4px);
}

.founder-section .container {
    position: relative;
}

.btn-row {
    position: absolute;
    bottom: 65px;
    left: 50%;
    transform: translateX(-50%);
}

.btn-row a {
    max-width: 190px;
    text-align: center;
    font-size: 18px;
    margin: 0 15px;
    padding: 9px 10px;
    border-radius: 20px;
    line-height: 19px;
}

.btn-primary.white {
    color: #33587F;
    background: #fff;
}

.youSip-Section {
    margin-top: 80px;
}

.youSip-Section img {
    max-width: 100%;
    display: block;
    width: 100%;   
}

/* ==========================================================================
           Mobile Responsiveness (starts from 991px)
           ========================================================================== */
@media (max-width: 991px) {
 .nav-container {
     flex-direction: column;
     gap: 15px;
     padding: 15px 20px;
     position: fixed;
     background: #FDF7ED;
     width: 100%;
 }

 .site-header {
     height: 135px;
 }

 .nav-group-left {
     display: none;
 }

 .nav-group-right {
     width: 100%;
     justify-content: center;
     gap: 10px;
 }

 .hero-container {
     grid-template-columns: 1fr;
     gap: 40px;
     text-align: center;
     padding: 0 24px;
 }

 .hero-content {
     align-items: center;
     max-width: 100%;
 }

 .hero-title {
     font-size: 64px;
     line-height: 1.05;
 }

 .hero-subtitle {
     font-size: 18px;
 }

 .hero-description {
     font-size: 18px;
 }

 .media-wrapper {
     max-width: 380px;
 }



 .hmprtnr_logoWrap {
     padding: 5px 0;
 }

 .hmprtnr_logoItem {
     height: 40px;
 }


 .menu-section {
     padding: 50px 0 60px 0;
 }

 .menu-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 40px;
 }

 .menu-title {
     font-size: 40px;
 }

 .menu-subtitle {
     text-align: left;
     max-width: 100%;
 }

 .menu-grid {
     grid-template-columns: 1fr;
     row-gap: 50px;
 }

 .menu-item {
     margin-top: 80px;
 }

 .cta {
     flex-direction: column;
     gap: 30px;
     text-align: center;
 }

 .cta-items {
     flex-direction: column;
     gap: 20px;
 }

 .item:not(:last-child) {
     border-right: none;
     border-bottom: 1px solid #A8B4C0;
     padding-bottom: 20px;
     width: 100%;
 }

    .midd-heading {
        font-size: 50px;
        margin-bottom: 20px;
        line-height: 91%;
        text-align: center;
    }

 .content {
     font-size: 1rem;
     line-height: 1.5;
 }

 footer {
     padding: 40px 24px;
 }

 .footer-container {
     flex-direction: column;
     gap: 36px;
 }

 .footer-heading {
     font-size: 50px;
 }

 .copyright {
     font-size: 14px;
 }

 .footer-info {
     gap: 16px;
     font-size: 14px;
 }

 .instagram-link {
     font-size: 14px;
 }

 .fssai-img {
     font-size: 14px;
 }

 .call {
     pointer-events: all;
 }
 .get-breakfast-text {
     font-size: 1.3rem;
 }
 .get-breakfast-link {
     padding: 0 20px 0 15px;
     gap: 8px;
     display: none;
 }
 .get-breakfast-arrow {
     width: 18px;
     height: 18px;
 }
 .cta-heading {
     font-size: 50px;
 }
 .btn-row {
     position: absolute;
     bottom: 11px;
     left: 0;
     transform: translateX(0%);
     width: 100%;
     text-align: center;
 }
    .btn-row a {
        max-width: 119px;
        text-align: center;
        font-size: 11px;
        margin: 0 5px;
        padding: 7px 10px;
        margin-bottom: 15px;
        line-height: 93%;
        background: #435778;
        color: #fff;
        letter-spacing: -2%;
        border-radius: 11px;
    }
 .getBreak-nav {
     display: none;
 }

}



@media (max-width:500px) {
 .launching-badge {
     right: -10px;
     bottom: -4px;
 }

 .launching-badge img {
     max-width: 108px;
 }

 .item-img {
     width: 352px;
     height: 352px;
 }

 .hero-subtitle {
     font-size: 16px;
     font-weight: 600;
    letter-spacing: -1%;
 }

 .hero-description {
     font-size: 17px;
     line-height: 1.3;
 }

}




/* ==========================================================================
   Hamburger Button & Mobile Drawer Base Styles
   ========================================================================== */

/* Hide Mobile Elements on Desktop */
.hamburger-toggle,
.mobile-menu-overlay {
    display: none;
}

/* ==========================================================================
   Mobile Responsiveness (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
    /* Header layout for mobile */
    .site-header {
        height: 70px;
        position: relative;
    }

    .nav-container {
        position: relative;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 50px 20px;
        height: 70px;
    }

    /* Hide desktop nav links */
    .nav-group-left,
    .nav-group-right {
        display: none !important;
    }

    /* Hamburger Toggle Styling */
    .hamburger-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 60;
    }

    .hamburger-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #33587F;
        border-radius: 2px;
    }

    /* Mobile Fullscreen Overlay Styling */
    .mobile-menu-overlay {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #FDF7ED;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        padding: 20px 20px 60px;
    }

    .mobile-menu-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* Overlay Header (Logo + Close X) */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .mobile-menu-close {
        background: transparent;
        border: none;
        font-size: 60px;
        line-height: 1;
        color: #33587F;
        cursor: pointer;
        padding: 0 10px;
        margin-right: -15px;
    }

    /* Center-aligned Vertical Menu Items */
    .mobile-menu-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16%;
    }

    .mobile-nav-link {
        font-family: var(--font-sans);
        font-weight: 500;
        font-size: 22px;
        color: #33587F;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mobile-order-btn {
        width: 180px;
        padding: 14px 24px;
        font-size: 16px;
        margin-top: 10px;
    }
}




/* ==========================================================================
   You Sip, We Sort Section (HTML Background Version)
   ========================================================================== */
.youSip-Section {
    width: 100%;
    position: relative;
    padding: 100px 0;
    margin-top: 80px;
    overflow: hidden;
}

/* HTML Background Image Layer Styling */
.yousip-bg-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.yousip-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Foreground Container Overlay */
.yousip-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2; /* Ensures content stays above HTML background image */
}

/* Left Content Area */
.yousip-content {
    position: relative;
    color: #FFFFFF;
   
}

/* Top Oval Pill Badge */
.yousip-badge-pill {
    text-align: center;
    transform: rotate(24deg);
    display: inline-block;
    background-color: #33587F;
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -2%;
    text-transform: uppercase;
    padding: 9px 26px;
    border-radius: 80%;
    position: absolute;
    right: -29%;
    top: -13%;
    line-height: 18px;
}
/* Main Serif Title */
.yousip-heading {
    font-family: var(--font-serif);
    font-size: 140px;
    font-weight: 400;
    line-height: 0.95;
    color: #FFFFFF;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

/* Subtitle Description */
.yousip-description {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 40px;
    text-align: center;
}

/* Bottom Flower Cloud Badge */
.flower-badge {
    width: 125px;
    height: 125px;
    position: absolute;
    left: -30%;
    bottom: -55px;
}

/* Right Media / Illustration Area */
.yousip-media {   
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 50%;      
}

.yousip-mascot-img {
    max-width: 580px;
    width: 100%;
    height: auto;
    display: block;
}

.mob-space .item-img {
    margin-right: -40px;
}

.founder-img-mob img {
    max-width: 100%;
    display: block;
}

.founder-img{ display: block;}
.founder-img-mob{ display: none;}

/* ==========================================================================
   Mobile Responsiveness (max-width: 991px)
   ========================================================================== */
@media (max-width: 991px) {
    .youSip-Section {
        padding: 60px 0 70px;
        margin-top: 50px;
    }

    /* Stack section layout (Illustration TOP, Text BOTTOM) */
    .yousip-container {
        flex-direction: column-reverse;
        padding: 0 24px;
        gap: 41px;
        text-align: center;
    }

    .yousip-media {
        width: 100%;
        justify-content: center;
        padding: 25px;
        max-width: 450px;
    }

    .yousip-mascot-img {
        max-width: 320px;
    }

    .yousip-content {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .yousip-badge-pill {
        font-size: 12px;
        padding: 18px 43px;
        margin-bottom: 20px;
        right: -25%;
        top: -23%;
        display: none;
    }

    .yousip-heading {
        font-size: 90px;
        margin-bottom: 20px;
    }

       .yousip-description {
        font-size: 17px;
        margin-bottom: 30px;
        letter-spacing: -2%;
        line-height: 117%;
    }

    .flower-badge {
        width: 90px;
        height: 90px;
        left: -20%;
    }

.btn-primary {
    color: #33587F;
    background-color: #F8E39F; 
    font-weight: 700;
}

.item-tag {
    font-weight: 600;
}

.badge-floating {
    display: none;  
}



.founder-img img {
    padding-left: 0;
}

.founder-img{ display: none;}
.founder-img-mob{ display: block; margin-top: 40px; margin-bottom: -62px;}


}


@media (min-width: 992px) and (max-width:1400px){
.yousip-container {
    max-width: 880px;
}

}
@media (min-width: 991px) {
.hero-description br {
    display: none;
}
.content p {
    text-align: left;
}

}
/*  
   .walk-track {
    width: 100%;
    height: 426px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
    .walk-track::after {
    content: "";
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    height: 2px;   
}
    .walking-actor {
    position: absolute;
    bottom: 25px;
    height: 409px;
    animation: walkAcross 9s linear infinite;
}
    .walking-actor img {
      height: 100%;
      width: auto;
    }
    @keyframes walkAcross {
      0% {
        left: -150px;
      }
      100% {
        left: 100%;
      }
    } */