/************************
* Farisi Manufacturing Industries HTML/CSS/JS Theme/ frontend.dev 
* 01. Reset
* 02. General elements (body, forms, tables etc)
* 03. Topography
* 03. Global styles
* 04. Utility classes
* 05. Grid
* 06. Top-bar/ Global
* 07. Header
* 08. Global/ Footer
* 09. Blocak/ Hero Area
* 08. Search bar
* 11. Block / Welcome
* 12. Block / Our Trading Partners
* 13. Block / Our Brands
* 14. Block / Board of Directors
*****************************/


/***********************************
*01. Reset
************************************/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;

}



/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/***********************************
*02. General elements
************************************/

html, body{
    font-family: 'Red Hat Display', sans-serif;
    font-size: 1rem;
    height: 100px;
    color: rgb(1, 75, 1);
    max-width: 100vw; /* Ensure body doesn't exceed viewport */
}
.wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box; /* Ensure padding is included in width */
    
}
section{
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-width: 100%;
    overflow-x: hidden;

}

/**
*form
**/

/**
*Image
**/

.img{
    max-width: 100;
    height: auto;
}

/***********************************
*03. Topography
************************************/
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.6rem;
    color: rgb(1, 75, 1);
    font-weight: 600;
}

h1 {
   font-size: 2rem;
   line-height: 4rem;
}

h2 {
   font-size: 1.2rem;
   line-height: 3rem;
}

h3 {
   font-size: 1rem;
   line-height: 2rem;
}

h4 {
   font-size: 1rem;
   line-height: 1rem;
}

p {
    font-size: 1.2rem;
    line-height: 2.4rem;
    margin-bottom: 1.6rem;
}


/***********************************
*03. Global Styles
************************************/

#root {
    font-size: 62.5%;
    
    /**
    * colors
    */
    --primary-color: #F3AF20;
    --primary-light: rgb(240, 205, 101);
    --secondary-color: rgb(248, 247, 247);
    
    --body-text: rgba(0, 0, 0, 1);
    --body-text: white;
    --body-text: red;
    /**
    * border radius
    */
    --bor-rad: 5px;
}


/***********************************
*04. Utility classes
************************************/

    .dd-arrow::after{
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 1rem;
        content:"\e64b";
        font-family:'themify';
        transform: translate(-50%, -50%)
    }
.btn, button{
    border-radius: 5px;
    cursor: pointer;
    padding: 1rem;
    text-decoration: none;
    font-family: 'Red Hat Display', sans-serif;
    background-color: rgb(1, 75, 1);
    color: #F3AF20;
    border: 0px;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    display: inline-block;
    position: relative;
    
}
.btn-with-arrow {
    padding-right: 2rem;
}

    .btn-with-arrow::after {
        font-family: 'themify';
        content: "";
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }
  
/*
* Global styles
*/
.primary-light-bg{
   background-color: rgb(240, 205, 101);
}

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


/***********************************
*05. Grid
************************************/

.grid-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    max-width: 100%;
    overflow: hidden;
}

    .gap{
        gap: 2rem;
    }

    /**
    *Grid spans
    */
    .span-2{grid-column: span 2;}
    .span-3{grid-column: span 3;}
    .span-4{grid-column: span 4;}
    .span-5{grid-column: span 5;}
    .span-6{grid-column: span 6;}
    .span-7{grid-column: span 7;}
    .span-8{grid-column: span 8;}
    .span-9{grid-column: span 9;}
    .span-10{grid-column: span 10;}
    .span-11{grid-column: span 11;}
    .span-12{grid-column: span 12;}

/***********************************
*06. Global Top bar
************************************/

#top-bar {
    background-color: #F3AF20;
    background-image: linear-gradient(-45deg, rgba(255, 0, 0, 0.596) 50%, transparent 50%);

}
    #top-bar a{
        color: rgb(1, 75, 1);
        text-decoration: none;
        padding: 1rem 0.5rem 1rem 0.5rem;
        display: flex;
        align-items: block;
    }

    #top-bar ul{
        display: flex;
    }
    .ti-icon {
        margin-left: 0.8rem;
        font-size: 1rem;
        padding-right: 0.5rem;

    }

    /**
    * Quick contact area
    **/
    

    /**
    * Social media icons
    **/
    ul.social-media{
        justify-content: flex-end;
    }
    #top-bar ul.socali-media a {
        padding: 1rem 0rem 1rem 0.5rem;
    }
    @media only screen and (max-width: 1000px){
        
        .ti-icon{
            font-size: 1.3rem;
        }
        #top-bar ul.quick-contact a{
            padding: 2rem 1rem 2rem 0;
        }
        .quick-contact-li{
            display: none;
        }
        .quick-contact .ti-icon{
            margin-right: 0;
        }
    }

/***********************************
*07. Global / Header
************************************/
#header-primary {
    padding: 0.3rem 0;
    position: relative;
    z-index: 1;
}

    #header-primary .wrapper{
        display: flex;
        align-items: center;
    }

    /**
    *logo
    */
    .logo {
    display: block;
    max-width: 120px;
    margin-right: auto;
    }
    .logo img {
    height: 50px;
    width: auto;
    display: block;
    }
   
    /**
    *navigation
    */
      #primary-nav > ul {
            display: flex;
        }

        /**
        * Top links
        */
        #primary-nav > ul > li {
         position: relative;
         font-size: 1rem;
         margin-left: 1rem;
        }
        #primary-nav a{
            padding: 1.3rem;
            display: block;
            text-decoration: none;
            color: rgb(1, 75, 1);
            border-radius: 5px;
            transition: all 0.2s ease-in-out;
            position: relative;
        }
        body.desktop-view #primary-nav > ul > li > a:hover{
            background: rgb(240, 205, 101);
        }

        /**
        * Top level links has children
        */
        #primary-nav > ul > li.menu-item-has-children > a {
            border-radius: 5px 5px 0 0;
            padding-right: 3.4rem;
        }

        body.desktop-view #primary-nav > ul > li.menu-item-has-children:hover > a {
            background: rgb(248, 247, 247);
            color: lightcoral;
        }


        #primary-nav li.menu-item-has-children .dd-arrow {
            position: absolute;
            right: 1rem;
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 5px;
            transition: all 0.1 ease-in-out;
        }
        body.desktop-view #primary-nav li.menu-item-has-children:hover .dd-arrow {
            background-color: rgb(240, 205, 101);
        }

        body.desktop-view #primary-nav > ul > li.menu-item-has-children:hover .dd-arrow::after{
            transform: translate(-50%, -50%) rotate(180deg);
        }

        /**
        * sub menus
        */
        #primary-nav ul.sub-menu {
            position: absolute;
            visibility: hidden;
            
            width: 200px;
            background-color: rgb(240, 205, 101);
            border-radius: 0, 5px, 5px;
            transition: all 0.2s ease-in-out;
        }
        #primary-nav ul.sub-menu li{
            border-bottom: solid rgba(1, 75, 1, 0.247);
            transition: all 0.2s ease-in-out;
        }
        body.desktop-view #primary-nav li.menu-item-has-children:hover ul.sub-menu {
            visibility: visible;
            opacity: 1; 
            } 

        body.desktop-view #primary-nav ul.sub-menu li:hover{
            margin-left: 0.5rem;
        }
            #primary-nav ul.sub-menu a {
                color:rgb(1, 75, 1);
                font-size: 0.8rem;
            }
        #primary-nav > ul > li.menu-item-has-children:last-child .sub-menu{
            border-radius: 5px, 0, 5px;
            right: 0;
        }

        /**
        *Hamburger
        **/
        #hamburger.hamburger {
            padding: 0.4rem 0 0 0;
            display: none;
        }

        /* DESKTOP STYLES (769px and up) - Ensure desktop styles are explicitly defined */
        @media only screen and (min-width: 769px){
            #primary-nav {
                opacity: 1;
                visibility: visible;
                position: static;
                width: auto;
                top: auto;
                
            }
         
            #primary-nav > ul{
                flex-direction: row;
            }
            
            #primary-nav > ul > li{
                margin-left: 1rem;
            }
            
            #primary-nav a {
                border-radius: 5px;
                width: auto;
            }
            
            #primary-nav > ul > li.menu-item-has-children > a {
                border-radius: 5px 5px 0 0;
            }

            #primary-nav ul.sub-menu{
                position: absolute;
                width: 200px;
            }
            #primary-nav ul.sub-menu a{
                padding-left: 1.3rem;
            } 
            
            #primary-nav ul.sub-menu a::before{
                content: none;
            }
            
            #primary-nav li.menu-item-has-children .dd-arrow {
                height: 1.7rem;
                top: 50%;
                transform: translateY(-50%);
                right: 1rem;
                width: 1.7rem;
                border-radius: 5px;
            }
            
            #hamburger.hamburger {
                display: none;
            }
            
            #header-primary{
                padding: 0.3rem 0;
            }
        }

        /* MOBILE STYLES (768px and down) */
        @media only screen and (max-width: 768px){
            #header-primary{
                padding: 1.5rem 0;
            }
            
            #primary-nav {
                opacity: 0;
                visibility: hidden; 
                position: absolute;
                left: 0;
                width: 100%; 
                top: 6.6rem;
                background-color: rgb(240, 205, 101);
            }
            
            /* When navigation is toggled on mobile */
            body.nav-is-toggled #primary-nav {
                opacity: 1;
                visibility: visible;
            }
            
            #primary-nav > ul{
                flex-direction: column;
            }
            
            #primary-nav > ul > li{
                margin: 0;
            }
            
            #primary-nav a,
            #primary-nav ul.sub-menu {
                border-radius: 0 !important;
                width: 100%;
            }

            #primary-nav ul.sub-menu{ /**changed this part to toggle **/
                display: none;
                position: relative;
            }

            #primary-nav ul.sub-menu li {
                border-top: rgb(240, 205, 101);

            }

            #primary-nav ul.sub-menu a{
                padding-left: 4rem;
            } 
            
            #primary-nav ul.sub-menu a::before{
                content: "\e622";
                font-family: "themify";
                position: absolute;
                left: 1.5rem;
            }
            
            #primary-nav li.menu-item-has-children .dd-arrow {
                background: rgb(240, 205, 101);
                height: 100%;
                top: 0;
                right: 0;
                width: 4.5rem;
                border-radius: 0;
                z-index: 1;
            }
            #primary-nav > ul > li.menu-item-has-children.active .dd-arrow::after{
                transform: translate(-50%, -50%) rotate(180deg);
            }
            #primary-nav li.menu-item-has-children.active .dd-arrow {
                height: calc(100% + 1px);
            }
            #primary-nav li.menu-item-has-children .dd-arrow::after {
                font-size: 1.3rem;
            }
            #primary-nav li.menu-item-has-children.active ul.sub-menu{
                display: block !important;
                visibility: visible;
                position: relative;
                opacity: 1;
            }
            #hamburger.hamburger {
                display: block;
            }
        }

/***********************************
*07. Block / Footer
************************************/
#footer-primary {
    background: #F3AF20;
    padding: 1.25rem 0;
}
    #footer-primary p, #footer-primary a {
        text-decoration: none;
    }

    /**
    *Quick contact 
    **/
    
     .quick-contact-li {
            margin-bottom: 1rem;
        }
        .quick-contact-info a {
            display:flex;
            align-items: center;
            color: rgb(1, 75, 1);
           
        }
            .quick-contact-info span{
                min-width: 30px;
                min-height: 30px;
                color: rgb(1, 75, 1);
                border-radius: 100px;
                border: 2px solid rgb(1, 75, 1);
                margin-right: 1rem;
                text-align: center;
                line-height: 1.5rem;
            }

    /**
    *Footer Menus 
    **/

    #footer-primary {
    background: #F3AF20;
    padding: 1.25rem 0;
    }

        #footer-primary .wrapper{
            margin: 0 auto !important;
            padding: 0 1rem !important;
            max-width: 100%; /* Add this */
            box-sizing: border-box;/* Add this */
        }
        #footer-primary nav.menu li:not(:last-child) {
            border-bottom: 1px solid rgba(1, 75, 1, 0.411);  
        }

        #footer-primary nav.menu a {
            display: block;
            padding: 0.5rem 0.5rem;
            color: rgb(1, 75, 1);
        }
        #footer-primary nav.menu a:hover {
            display: block;
            padding: 0.8rem;
            color: rgb(1, 75, 1);
            color: lightcoral;
            transition: all 0.2s ease-in-out;
        }

        #footer-primary a:hover{
            color: lightcoral;
            transition: all 0.2s ease-in-out;
        }
        .footer-bottom {
        margin-top: 1rem;
        }

        .footer-divider {
            border: none;
            height: 1px;
            background-color: rgb(1, 75, 1);
            margin: 0;
            opacity: 0.3;
        }

        .copyright-area {
            padding: 1.5rem 0;
            text-align: center;
        }

        .copyright-area p {
            margin: 0;
            font-size: 0.9rem;
            color: rgb(1, 75, 1);
            opacity: 0.8;
        }

    /**
    *News letter 
    **/ 
    .newsletter {
        display: flex;
    }
        .newsletter input{
            border: 0 none;
            font-size: 0.75rem;
            padding: 0.75rem;
            border-radius: 5px 0 0 5px;
        }
        .newsletter button{
            text-indent: -9999px;
            padding: 0;
            width: 2.5rem;
            border-radius: 0 5px 5px 0;
        }
        .newsletter button::after{
            text-indent: 0;
            right: 0.75rem;
            top: 0.73rem;
        }

        @media only screen and (max-width: 768px){
        #footer-primary .span-3{
            grid-column: span 4;
        }
        #footer-primary .newsletter{
            display: none;
        }
        .get-in-touch-footer {
            grid-column: span 12 !important;
        }
          .copyright-area {
        padding: 1rem 0;
        }
        
        .copyright-area p {
            font-size: 0.8rem;
        }
    }


    
/***********************************
*07. Block / Hero Area - CONSOLIDATED VERSION
************************************/
#hero-area {
    height: 500px;
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 100%;
    max-width: 100vw;
}

.slider-container {
    width: 300%; /* 3 slides * 100% */
    height: 100%;
    display: flex;
    animation: slideLeft 15s infinite;
    position: relative;
    left: 0;
    overflow: hidden; 
}

.slide {
    width: 33.333%; /* 100% / 3 slides */
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.slide:nth-child(1) {
    background-image: url('images/Farisi\ Unga\ Banner_slider_2.jpg');
}

.slide:nth-child(2) {
    background-image: url('images/ugali-samaki.jpg');
}

.slide:nth-child(3) {
    background-image: url('images/ugali-with-fried-pork.png');
}

@keyframes slideLeft {
    0% { transform: translateX(0); }
    20% { transform: translateX(0); }
    25% { transform: translateX(-33.333%); }
    45% { transform: translateX(-33.333%); }
    50% { transform: translateX(-66.666%); }
    70% { transform: translateX(-66.666%); }
    75% { transform: translateX(0); } 
    100% { transform: translateX(0); }
}

#hero-area .wrapper {
    height: 100%;
}

/* DESKTOP STYLING (1025px and up) */
#hero-area .content-area {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.9);
    padding: 1.5rem 2rem;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

#hero-area .tagline {
    margin-bottom: 0.5rem;
    color: #ac8100 !important;
    font-weight: 600;
    font-size: 0.9rem;
}

#hero-area h1 {
    color: rgb(1, 75, 1) !important;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-bottom: 0.8rem;
}

#hero-area p:not(.tagline) {
    color: rgb(1, 75, 1) !important;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
}

#hero-area .btn {
    background-color: rgb(1, 75, 1) !important;
    color: #F3AF20 !important;
    border: 2px solid rgb(1, 75, 1);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.8rem 1.2rem;
    box-shadow: 0 4px 15px rgba(1, 75, 1, 0.2);
    transition: all 0.3s ease;
}

#hero-area .btn:hover {
    background-color: #F3AF20 !important;
    color: rgb(1, 75, 1) !important;
    border-color: #F3AF20;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 175, 32, 0.3);
}

/* TABLET RESPONSIVE (769px - 1024px) */
@media only screen and (max-width: 1024px) and (min-width: 769px) {
    #hero-area .content-area {
        position: relative;
        top: auto;
        width: 85%;
        max-width: none;
        transform: none;
        padding: 2rem 1.5rem;
        left: auto;
        margin: 1rem auto;
        background: rgba(255, 255, 255, 0.95);
    }
    
    #hero-area h1 {
        font-size: 1.6rem;
        line-height: 1.8rem;
        margin-bottom: 0.8rem;
    }
    
    #hero-area p:not(.tagline) {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 1rem;
    }
    
    #hero-area .tagline {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    #hero-area .btn {
        font-size: 0.9rem;
        padding: 0.8rem 1.2rem;
    }
}

/* MOBILE RESPONSIVE (768px and below) */
@media only screen and (max-width: 768px) {
    #hero-area {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    #hero-area .content-area {
        position: relative;
        top: auto;
        width: 90%;
        max-width: none;
        transform: none;
        padding: 1.5rem 1rem;
        left: auto;
        margin: 1rem auto;
        background: rgba(255, 255, 255, 0.95);
    }
    
    #hero-area h1 {
        font-size: 1.4rem;
        line-height: 1.6rem;
        margin-bottom: 0.6rem;
    }
    
    #hero-area p:not(.tagline) {
        font-size: 0.9rem;
        line-height: 1.3;
        margin-bottom: 0.8rem;
    }
    
    #hero-area .tagline {
        font-size: 0.8rem;
        margin-bottom: 0.4rem;
    }
    
    #hero-area .btn {
        font-size: 0.85rem;
        padding: 0.7rem 1rem;
    }
}

/***********************************
*07. About-Us Hero Area
************************************/
#about-us-hero {
    height: 400px;
    position: relative;
    background-image: url('images/About_us_banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
}
#about-us-hero .wrapper {
    height: 100%;
}

#about-us-hero .content-area {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 80%;
}

#about-us-hero p.tagline {
    margin-bottom: 1rem;
    color: rgb(248, 247, 247);
}

#about-us-hero h1 {
    color: lightcoral;
}

/* Mobile responsive for about hero */
@media only screen and (max-width: 768px) {
    #about-us-hero {
        height: 300px;
    }
    
    #about-us-hero .content-area {
        position: relative;
        top: auto;
        width: 100%;
        transform: none;
        padding: 2rem 0;
        left: auto;
    }
}

/***********************************
*07. About-Us Our Journey
************************************/
#our-journey {
    padding: 4rem 0;
    background-color: rgb(248, 247, 247);
}

#our-journey .tagline {
    color: rgb(1, 75, 1);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

#our-journey h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #222;
}

#our-journey p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 1.5rem;
}

#our-journey .button a {
    background-color: #F3AF20;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#our-journey .button a:hover {
    background-color: #F3AF20;
}

#our-journey .video-content video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}


/***********************************
*07. Welcome: Remember To add a "read more" btn linked to About Us page.
************************************/

#welcome {
    border-radius: 8px;
}

    .spirit-of-service {
    background-color: rgb(248, 247, 247);
    }
        .spirit-of-service a {
            padding: 1.6rem;
            text-decoration: none;
            display: flex; 
            gap: 1rem;
            transition: all 0.2s ease-in-out;
            border-radius: 5px;
        }

        .spirit-of-service a:hover{
            background-color:#F3AF20;
        }
        .spirit-of-service a:hover .ti-star{
            color:rgb(1, 75, 1);
        }

        .spirit-of-service span.ti-star {
            font-size: 1.2rem;
            color: #F3AF20;
        }
        .spirit-of-service p {
            color: rgb(1, 75, 1);
        }

    @media only screen and (max-width: 768px){
        .spirit-of-service{
            grid-column: span 12;
        }
    }

/***********************************
*07. Welcome video: linked to About Us page.
************************************/
.video-wrapper {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
}

.unmute-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.unmute-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.unmute-message {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    color: rgb(1, 75, 1);
}

.sound-icon {
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
}

.unmute-message p {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
}

#auto-video {
    width: 100%;
    height: auto;
    display: block;
}


/***********************************
*12. Our Trading Partners
************************************/

#our-trading-partners{
    background-color: rgb(248, 247, 247);
    
}
    #our-trading-partners h2{
        margin: rem;
        font-size: 1.3rem;

    }
    #our-trading-partners a{
        display: block;
        padding: 2rem;
    }

    #our-trading-partners a:hover img{
        opacity: 1;
        filter: grayscale(0);
        transition: all 0.2s ease-in-out;
    }
    
    #our-trading-partners {
    display: flex;
    flex-wrap: wrap; /* allow wrapping on smaller screens */
    justify-content: center; /* center align the items */
    gap: 20px; /* spacing between images */
    padding: 20px 0;
}

#our-trading-partners img {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    opacity: 0.8;
    filter: grayscale(0);
    object-fit: contain;
}


    
    @media only screen and (max-width: 768px){
        .our-trading-partner {
        grid-column: span 6;
        }
         #our-trading-partners h2,
         .our-trading-partner h2 {
        text-align: center;
        }
    }


/***********************************
*13. Our Brand - Banner Inside Wrapper
************************************/
#our-brands {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    background-color: rgb(248, 247, 247);
    text-align: justify;
}

    #our-brands h2{
        border-bottom: 1px solid #F3AF20;
        font-size: 1.3rem;
    }

/* Content area with heading and paragraph - ULTRA COMPACT */
#our-brands .content-area {
    margin-bottom: 0.25rem; /* Reduced from 3rem to 0.25rem */
}

#our-brands p{
    font-size: 1rem;
}

/* Banner container inside wrapper */
.brand-banner-container {
    width: 100%;
}

.brand-banner-container a {
    display: block;
    width: 100%;
    transition: all 0.2s ease-in-out;
    border-radius: 3px;
    overflow: hidden;
}

.brand-banner-container a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.brand-banner-container img {
    width: 100%;
    height: auto;
    max-height: 300px; /* or 250px */
    object-fit: cover; /* keeps nice crop if it's tall */
    display: block;
    border-radius: 8px;
}

/* Mobile Responsiveness */
@media only screen and (max-width: 768px) {
    #our-brands .content-area {
        margin-bottom: 0.125rem; /* Reduced from 2rem to 0.125rem */
    }
    #our-brand .text-content h2{
        font-size: 1.5rem;
        line-height: 1.8rem;
        margin-bottom: 0.8rem;
        text-align: center;
    }

    #our-brands h2, 
    .our-brands h2 {
        text-align: center;
    }
}


/***********************************
*01. About us- Board of Directors
************************************/
.directors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    justify-items: center;
    padding: 0 15px;
}

.director {
    background: rgb(248, 247, 247);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    max-width: 350px;
    width: 100%;
    position: relative;
}

.director:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.director img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center top; /* Changed to show more of the top/head area */
    display: block;
}

.director-basic-info {
    padding: 20px;
    text-align: center;
    position: relative;
}

.director h4 {
    margin-bottom: 8px;
    font-size: 1.3rem;
    color: #2c3e50;
    font-weight: 600;
}

.director .position {
    color: #7f8c8d;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* Plus Button Styles */
.expand-btn {
    position: absolute;
    top: -25px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #F3AF20, #F3AF20);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 15px rgba(243, 175, 32, 0.3);
    transition: all 0.3s ease;
    z-index: 2;
}

.expand-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(243, 175, 32, 0.4);
}

.expand-btn.active {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* Expandable Content */
.director-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.director-details.expanded {
    max-height: 300px;
}

.details-content {
    padding: 20px;
}

.detail-item {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.detail-label {
    font-weight: 600;
    color: #2c3e50;
    min-width: 80px;
    font-size: 0.9rem;
}

.detail-value {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Tablet Responsive (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .directors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .director {
        max-width: 100%;
    }
    
    .director img {
        height: 250px;
        object-position: center 20%; /* Better positioning for tablet */
    }
    
    .director h4 {
        font-size: 1.2rem;
    }
    
    .director .position {
        font-size: 0.9rem;
    }
}

/* Small Tablet / Large Mobile (481px - 768px) */
@media (max-width: 768px) and (min-width: 481px) {
    .directors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 10px;
    }
    
    .director {
        max-width: 100%;
    }
    
    .director img {
        height: 220px;
        object-position: center 15%;
    }
    
    .director-basic-info {
        padding: 15px;
    }
    
    .director h4 {
        font-size: 1.1rem;
        margin-bottom: 6px;
    }
    
    .director .position {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
    
    .expand-btn {
        width: 40px;
        height: 40px;
        top: -20px;
        right: 15px;
        font-size: 20px;
    }
    
    .details-content {
        padding: 15px;
    }
    
    .detail-label {
        min-width: 70px;
        font-size: 0.85rem;
    }
    
    .detail-value {
        font-size: 0.85rem;
    }
}

/* Mobile Responsive (max-width: 480px) */
@media (max-width: 480px) {
    .directors-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 10px;
    }
    
    .director {
        max-width: 100%;
    }
    
    .director img {
        height: 280px;
        object-position: center 25%; /* Show more of face/head area */
    }

    .director-basic-info {
        padding: 18px;
    }

    .director h4 {
        font-size: 1.2rem;
    }

    .director .position {
        font-size: 0.9rem;
    }

    #board-of-directors h2,
    .directors-section h2 {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
}

/* Very Small Mobile (max-width: 360px) */
@media (max-width: 360px) {
    .directors-grid {
        padding: 0 5px;
    }
    
    .director img {
        height: 260px;
    }
    
    .director-basic-info {
        padding: 15px;
    }
    
    .expand-btn {
        width: 35px;
        height: 35px;
        top: -18px;
        font-size: 18px;
    }
}

/***********************************
*07. Our-Products Hero Area
************************************/
#our-products-hero {
    height: 400px;
    position: relative;
    background-image: url('images/farisi-product-hero\ banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
}
#our-products-hero .wrapper {
    height: 100%;
}

#our-products-hero .content-area {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 80%;
}

#about-us-hero p.tagline {
    margin-bottom: 1rem;
    color: rgb(248, 247, 247);
}

#about-us-hero h1 {
    color: lightcoral;
}

/* Mobile responsive for about hero */
@media only screen and (max-width: 768px) {
    #about-us-hero {
        height: 300px;
    }
    
    #about-us-hero .content-area {
        position: relative;
        top: auto;
        width: 100%;
        transform: none;
        padding: 2rem 0;
        left: auto;
    }
}

/* Our Products Mobile Responsiveness */

#our-products-brand {
    padding: 2rem 0;
    
}

#our-products-brand .text-content h2 {
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-bottom: 1rem;
    color: rgb(1, 75, 1);
}

#our-products-brand .text-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgb(1, 75, 1);
    margin-bottom: 1.5rem;
    text-align: justify;
    margin-right: 20px;
}

/* Desktop styles (769px and up) */
@media only screen and (min-width: 769px) {
    #our-products-brand .farisi-premium img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }
}

/* Mobile styles (768px and down) */
@media only screen and (max-width: 768px) {
    #our-products-brand {
        padding: 1.5rem 0;
    }
    
    /* Make grid items stack vertically on mobile */
    #our-products-brand .span-6 {
        grid-column: span 12 !important;
        margin-bottom: 1.5rem;
    }
    
    /* Fix image sizing on mobile */
    #our-products-brand .farisi-premium img {
        width: 100% !important; /* Override the 120% width */
        height: auto;
        border-radius: 8px;
        max-width: 100%;
        display: block;
    }
    
    /* Adjust text content spacing */
    #our-products-brand .text-content {
        margin-bottom: 1rem;;
    }
    
    #our-products-brand .text-content h2 {
        font-size: 1.3rem;
        line-height: 1.8rem;
        margin-bottom: 0.8rem;
        text-align: center;
    }
    
    #our-products-brand .text-content p {
        font-size: 0.95rem;
        line-height: 1.5;
        text-align: justify;
        margin-bottom: 1rem;
    }
    
    /* Ensure wrapper has proper padding on mobile */
    #our-products-brand .wrapper {
        padding: 0 1rem;
    }
}

/* Extra small devices (480px and down) */
@media only screen and (max-width: 480px) {
    #our-products-brand {
        padding: 1rem 0;
    }
    
    #our-products-brand .text-content h2 {
        font-size: 1.3rem;
        line-height: 1.6rem;
    }
    
    #our-products-brand .text-content p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    #our-products-brand .wrapper {
        padding: 0 0.75rem;
    }
}

    .farisi-premium img {
        max-width: 70%;
        height: auto;
        width: 400px;
        border-radius: 3px;
    }

    @media (max-width: 768px) {
        .farisi-premium img {
            width: 280px;
            max-width: 90vw;
        }

            #slogan .content-area p{
            font-size: 1rem;
            text-align: center;
            
            }
            #slogan .content-area h2{
                font-size: 1.3rem;
            } 

            #slogan .wrapper h2{
                font-size: 1rem;
                text-align: center;
            }
        }

    

/***********************************
*07. Media Hero Area
************************************/
#media-hero {
    height: 400px;
    position: relative;
    background-image: url('images/corn-flour-on-a-table.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
}
#media .wrapper {
    height: 100%;
}

#media-hero .content-area {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 80%;
}

#media-hero p.tagline {
    margin-bottom: 1rem;
    color: rgb(255, 255, 255);
}

#media-hero h1 {
    color: white;
}

/* Mobile responsive for about hero */
@media only screen and (max-width: 768px) {
    #media-hero {
        height: 300px;
    }
    
    #media-hero .content-area {
        position: relative;
        top: auto;
        width: 100%;
        transform: none;
        padding: 2rem 0;
        left: auto;
    }

}


/***********************************
*01. Media - Recipes
************************************/
.recipes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 5px;
            justify-items: center;
        }

        .recipe {
            background: rgb(248, 247, 247);
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            max-width: 350px;
            width: 100%;
            position: relative;
        }

        .recipe:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }

        .recipe img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .recipe-basic-info {
            padding: 20px;
            text-align: center;
            position: relative;
        }

        .recipe h4 {
            margin-bottom: 8px;
            font-size: 1.3rem;
            color: #2c3e50;
            font-weight: 600;
        }

        .recipe .position {
            color: #7f8c8d;
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 15px;
        }

        /* Plus Button Styles */
        .expand-btn {
            position: absolute;
            top: -25px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #F3AF20, #d4a017);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            box-shadow: 0 4px 15px #F3AF20;
            transition: all 0.3s ease;
            z-index: 2;
        }

        .expand-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px #F3AF20;
        }

        .expand-btn.active {
            transform: rotate(45deg);
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }

        /* Expandable Content */
        .recipe-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
        }

        .recipe-details.expanded {
            max-height: 300px;
        }

        .details-content {
            padding: 20px;
        }

        .detail-item {
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .detail-label {
            font-weight: 600;
            color: #2c3e50;
            min-width: 80px;
            font-size: 0.9rem;
        }

        .detail-value {
            color: #555;
            font-size: 0.9rem;
            line-height: 1.4;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .recipes-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .recipe {
                max-width: 100%;
            }

            #media, h2 {
                font-size: 1rem;
                text-align: center;
            }
        }


/***********************************
*01. Media - Events
************************************/
.events-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 5px;
            justify-items: center;
        }

        .event {
            background: rgb(248, 247, 247);
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            max-width: 350px;
            width: 100%;
            position: relative;
        }

        .event:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }

        .event img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .event-basic-info {
            padding: 20px;
            text-align: center;
            position: relative;
        }

        .event h4 {
            margin-bottom: 8px;
            font-size: 1.3rem;
            color: #2c3e50;
            font-weight: 600;
        }

        .event .position {
            color: #7f8c8d;
            font-size: 1rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 15px;
        }

        /* Plus Button Styles */
        .expand-btn {
            position: absolute;
            top: -25px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #ac8100, #d4a017);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            box-shadow: 0 4px 15px #F3AF20;
            transition: all 0.3s ease;
            z-index: 2;
        }

        .expand-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px #F3AF20;
        }

        .expand-btn.active {
            transform: rotate(45deg);
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }

        /* Expandable Content */
        .event-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
        }

        .event-details.expanded {
            max-height: 300px;
        }

        .details-content {
            padding: 20px;
        }

        .detail-item {
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .detail-label {
            font-weight: 600;
            color: #2c3e50;
            min-width: 80px;
            font-size: 0.9rem;
        }

        .detail-value {
            color: #555;
            font-size: 0.9rem;
            line-height: 1.4;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .events-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .event {
                max-width: 100%;
            }

            h2 {
                font-size: 2rem;
            }
        }




/***********************************
*07. Contact Us Hero Area
************************************/
#contact-us-hero {
    height: 400px;
    position: relative;
    background-image: url('images/farisi-product-homepage\ banner..jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0;
}
#contact-us .wrapper {
    height: 100%;
}

#contact-us-hero .content-area {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 80%;
}

#contact-us-hero p.tagline {
    margin-bottom: 1rem;
    color: rgb(255, 255, 255);
}

#contact-us-hero h1 {
    color: white;
}

/* Mobile responsive for about hero */
@media only screen and (max-width: 768px) {
    #contact-us-hero {
        height: 300px;
    }
    
    #contact-us-hero .content-area {
        position: relative;
        top: auto;
        width: 100%;
        transform: none;
        padding: 2rem 0;
        left: auto;
    }
}


/***********************************
*01. Block / Contact Us 
************************************/

    .find-us {
        border-top: 1px solid rgb(1, 75, 1);
        border-bottom: 1px solid rgb(1, 75, 1);
        border-left: 1px solid rgb(1, 75, 1);
        background: rgb(240, 205, 101);
        padding: 2.5rem;
    }
        .find-us:last-child {
           border-right: 1px solid rgb(1, 75, 1); 
        }
        .find-us {
            text-align: center;
        }

        .find-us h4 {
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
        }
        
        ul.find-us-areas li {
            padding: 1rem 0;
            display: flex;
        }
       
     @media (max-width: 768px) {
            .find-us {
                grid-column: span 12;
            }

            }


/***********************************
* Distributors Section - Redesign
************************************/
#find-us {
    padding: 3rem 0;
    background: #f9f9f9;
}

.distributor-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.search-input, .filter-select {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    flex: 1;
    min-width: 200px;
}

.distributor-table-container {
    overflow-x: auto;
    margin-bottom: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#distributor-table {
    width: 100%;
    border-collapse: collapse;
}

#distributor-table th, #distributor-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}

#distributor-table th {
    background: rgb(1, 75, 1);
    color: white;
}

#distributor-table tr:hover {
    background: rgba(240, 205, 101, 0.1);
}

.view-map-btn {
    background: rgb(1, 75, 1);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.view-map-btn:hover {
    background: rgb(0, 55, 0);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.pagination button {
    padding: 0.5rem 1rem;
    background: rgb(240, 205, 101);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.map-container {
    margin-top: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .distributor-controls {
        flex-direction: column;
    }

    #distributor-table th, #distributor-table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.9rem;
    }
}



/***********************************
* Welcome Section - Mobile Responsive
************************************/

#welcome {
    padding: 2rem 0;
}

#welcome .text-content h2 {
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-bottom: 1rem;
    color: rgb(1, 75, 1);
    
}

#welcome .text-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgb(1, 75, 1);
    margin-bottom: 1.5rem;
    margin-right: 20px;
    text-align: justify;
}

#welcome .welcome-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Mobile styles (768px and down) */
@media only screen and (max-width: 768px) {
    #welcome {
        padding: 1.5rem 0;
    }
    
    /* Make grid items stack vertically on mobile */
    #welcome .span-6 {
        grid-column: span 12 !important;
        margin-bottom: 1.5rem;
    }
    
    /* Fix image sizing on mobile */
    #welcome .welcome-image img {
        width: 100% !important;
        height: auto;
        border-radius: 8px;
        max-width: 100%;
    }
    
    /* Adjust text content spacing */
    #welcome .text-content {
        padding: 0 0.5rem;
    }
    
    #welcome .text-content h2 {
        font-size: 1.5rem;
        line-height: 1.8rem;
        margin-bottom: 0.8rem;
        text-align: center;
    }
    
    #welcome .text-content p {
        font-size: 0.95rem;
        line-height: 1.5;
        text-align: justify;
        margin-bottom: 1rem;
    }
    
    /* Ensure wrapper has proper padding on mobile */
    #welcome .wrapper {
        padding: 0 1rem;
    }
}

/* Extra small devices (480px and down) */
@media only screen and (max-width: 480px) {
    #welcome {
        padding: 1rem 0;
    }
    
    #welcome .text-content h2 {
        font-size: 1.3rem;
        line-height: 1.6rem;
    }
    
    #welcome .text-content p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    #welcome .wrapper {
        padding: 0 0.75rem;
    }
}


/***********************************
* Our Journey Section - Mobile Responsive
************************************/

#our-journey .text-content h2 {
    font-size: 1.8rem;
    line-height: 2.2rem;
    margin-bottom: 1rem;
    color: rgb(1, 75, 1);
}

#our-journey .text-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgb(1, 75, 1);
    margin-bottom: 1.5rem;
    text-align: justify;
    margin-right: 20px;
}

#our-journey .text-content .tagline {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(1, 75, 1);
    margin-bottom: 0.5rem;
}

#our-journey .video-content video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Mobile styles (768px and down) */
@media only screen and (max-width: 768px) {
    #our-journey {
        padding: 1.5rem 0;
    }
    
    /* Make grid items stack vertically on mobile */
    #our-journey .span-6 {
        grid-column: span 12 !important;
        margin-bottom: 1.5rem;
    }
    
    /* Adjust text content spacing */
    #our-journey .text-content {
        padding: 0 0.5rem;
    }
    
    #our-journey .text-content h2 {
        font-size: 1.5rem;
        line-height: 1.8rem;
        margin-bottom: 0.8rem;
        text-align: center;
    }
    
    #our-journey .text-content p {
        font-size: 0.95rem;
        line-height: 1.5;
        text-align: justify;
        margin-bottom: 1rem;
    }
    
    #our-journey .text-content .tagline {
        font-size: 0.9rem;
        text-align: center;
        margin-bottom: 0.4rem;
    }
    
    /* Center the button */
    #our-journey .button {
        text-align: center;
    }
    
    /* Ensure wrapper has proper padding on mobile */
    #our-journey .wrapper {
        padding: 0 1rem;
    }
}

/* Extra small devices (480px and down) */
@media only screen and (max-width: 480px) {
    #our-journey {
        padding: 1rem 0;
    }
    
    #our-journey .text-content h2 {
        font-size: 1.3rem;
        line-height: 1.6rem;
    }
    
    #our-journey .text-content p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    #our-journey .text-content .tagline {
        font-size: 0.85rem;
    }
    
    #our-journey .wrapper {
        padding: 0 0.75rem;
    }
}


    .tiktok-icon {
        margin-left: 0.8rem;
        font-size: 1rem;
        padding-right: 0.5rem;
        color: inherit;
    }

    .tiktok-link {
        color: rgb(1, 75, 1);
        text-decoration: none;
        padding: 1rem 0rem 1rem 0.5rem;
        display: flex;
        align-items: center;
    }