:root {
    --color-primary: #3D1C14;
    --color-secondary: #8C5A42;
    --color-accent: #D4A276;
    --color-light: #F2E9E4;
    --color-dark: #2D150C;
    --card-radius: 24px;
}

body {
    font-family: 'Poppins', 'Noto Kufi Arabic', sans-serif;
    background-color: var(--color-light);
    color: var(--color-dark);
    scroll-behavior: smooth;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', 'Noto Kufi Arabic', serif;
}

.hero-gradient {
    background: linear-gradient(to right, rgba(61, 28, 20, 0.9), rgba(140, 90, 66, 0.5)), url('/static/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.product-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--card-radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    overflow: hidden;
    position: relative;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.12);
}

.product-card::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%238C5A42' fill-opacity='0.2' d='M211.75,44.25C195,27.47,170.37,20.79,142.46,25.44c-26.91,4.49-53.87,19.09-75.9,41.12s-36.63,49-41.12,75.9c-4.65,27.91,2,52.51,18.81,69.29C57.54,225.05,75.75,232,96.62,232a103.66,103.66,0,0,0,16.92-1.44c26.91-4.49,53.87-19.09,75.9-41.12s36.63-49,41.12-75.9C235.21,85.63,228.53,61,211.75,44.25ZM77.87,77.87C102.56,53.19,133,39.93,159.15,39.93a62.26,62.26,0,0,1,29,6.67A108.48,108.48,0,0,0,157.1,63.54c-19.2,15.16-31.63,36.32-36.94,62.89-9.72,48.58-44.7,65.18-67.48,70.84C28.71,168.76,39.4,116.35,77.87,77.87ZM178.13,178.13c-34.69,34.68-80.71,46.78-110.32,31.27A108.72,108.72,0,0,0,98.9,192.46c19.2-15.16,31.63-36.32,36.94-62.89,9.72-48.58,44.7-65.18,67.48-70.84C227.29,87.24,216.6,139.65,178.13,178.13Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 10;
}

.floating-beans {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
    top: 0;
    left: 0;
}

.bean {
    position: absolute;
    width: 30px;
    height: 30px;
    opacity: 0.2;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float 15s infinite linear;
}

.bean svg {
    width: 100%;
    height: 100%;
}

.bean:nth-child(even) {
    animation-duration: 20s;
}

.bean:nth-child(3n) {
    animation-duration: 25s;
    animation-direction: reverse;
}

.bean:nth-child(5n) {
    transform: scale(1.5);
}

@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0.1;
    }
    25% {
        opacity: 0.2;
    }
    50% {
        transform: translateY(50vh) translateX(100px) rotate(180deg);
        opacity: 0.3;
    }
    75% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(0) translateX(0) rotate(360deg);
        opacity: 0;
    }
}

.category-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-primary);
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.category-icon:hover {
    transform: scale(1.1);
    background-color: var(--color-primary);
    color: white;
}

.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: var(--color-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
}

.price-tag {
    background-color: var(--color-light);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    position: absolute;
    right: 20px;
    top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.coffee-details {
    color: #666;
    font-size: 0.85rem;
}

.menu-section {
    position: relative;
    padding: 6rem 0;
}

.menu-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23997B66' fill-opacity='0.1' d='M6 18a6.06 6.06 0 0 0 5.17-6 7.62 7.62 0 0 1 6.52-7.51l2.59-.37c-.07-.08-.13-.16-.21-.24-3.26-3.26-9.52-2.28-14 2.18C2.28 9.9 1 15 2.76 18.46z'%3E%3C/path%3E%3Cpath fill='%23997B66' fill-opacity='0.1' d='M12.73 12a7.63 7.63 0 0 1-6.51 7.52l-2.46.35.15.17c3.26 3.26 9.52 2.29 14-2.17C21.68 14.11 23 9 21.25 5.59l-3.34.48A6.05 6.05 0 0 0 12.73 12z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 60px;
    background-repeat: repeat;
    opacity: 0.5;
    z-index: -1;
}

.section-heading {
    position: relative;
    display: inline-block;
    font-weight: 700;
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background-color: var(--color-accent);
}

.rtl {
    direction: rtl;
    text-align: right;
}

.ltr {
    direction: ltr;
    text-align: left;
}

.language-switch {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 0.25rem;
    display: flex;
    width: 100px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 100;
}

.language-switch form {
    flex: 1;
    margin: 0;
    padding: 0;
}

.language-option {
    padding: 0.25rem 0.5rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
    color: white;
    background: transparent;
    border: none;
    outline: none;
    display: block;
    position: relative;
    font-weight: 500;
}

.language-option.active {
    background-color: white;
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Visible indicator for active language */
.active-indicator {
    display: block;
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

/* Custom coffee cup animation */
.coffee-cup {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}

.coffee-cup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.coffee-cup::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle at center, var(--color-secondary) 0%, var(--color-primary) 60%);
    border-radius: 50%;
    opacity: 0.8;
}

.steam {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 40px;
    z-index: 10;
}

.steam span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 8px;
    height: 30px;
    background-color: white;
    border-radius: 4px;
    opacity: 0;
    animation: steam 2s infinite ease-out;
}

.steam span:nth-child(1) {
    left: 10px;
    animation-delay: 0.2s;
}

.steam span:nth-child(2) {
    left: 30px;
    height: 40px;
    animation-delay: 0.4s;
}

.steam span:nth-child(3) {
    left: 50px;
    animation-delay: 0.6s;
}

.steam span:nth-child(4) {
    left: 70px;
    height: 25px;
    animation-delay: 0.8s;
}

@keyframes steam {
    0% {
        opacity: 0.8;
        height: 0;
        bottom: 0;
    }
    40% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        height: 40px;
        bottom: 80%;
    }
}

/* Instagram Embed - Enhanced with precise specifications */
.app-mockup {
    position: relative;
    width: 100%;
    height: auto;
    background: white;
    border-radius: 24px;
    /* overflow: hidden; */
    margin: 0 auto !important;
    animation: gentle-float 6s infinite ease-in-out;
    will-change: transform;
    z-index: 1;
}

/* Status bar */
.app-mockup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background: white;
    z-index: 9;
}

/* Container sizing and spacing */
.app-mockup .instagram-media {
    max-width: 100% !important;
    width: 100% !important;
    min-width: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    height: auto !important;
    display: block !important;
}

/* Profile section padding and border */
.app-mockup .instagram-media > div {
    display: block !important;
    padding: 16px !important;
}

.app-mockup .instagram-media a div:first-child {
    margin-bottom: 14px !important;
    border-bottom: 1px solid #EFEFEF !important;
    padding-bottom: 14px !important;
}

/* Profile picture styling */
.app-mockup .instagram-media a div:first-child div:first-child > div:first-child {
    width: 56px !important;
    height: 56px !important;
    margin-right: 12px !important;
    border-radius: 50% !important;
    background-size: cover !important;
}

/* Text formatting for username */
.app-mockup .instagram-media a div div div:first-child {
    color: #262626 !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

/* Text formatting for handle and stats */
.app-mockup .instagram-media a div div div:not(:first-child) {
    color: #8E8E8E !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* Stats separators */
.app-mockup .instagram-media a div:first-child::after {
    content: "";
    margin: 0 6px;
}

/* Instagram icon at top right */
.app-mockup::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 16px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjRTQzMDVCIiBkPSJNMjI0LjEgMTQxYy02My42IDAtMTE0LjkgNTEuMy0xMTQuOSAxMTQuOXM1MS4zIDExNC45IDExNC45UzMzOSAzMTkuNSAzMzkgMjU1LjkgMjg3LjcgMTQxIDIyNC4xIDE0MXptMCAxODkuNmMtNDEuMSAwLTc0LjctMzMuNS03NC43LTc0LjdzMzMuNS03NC43IDc0LjcgNzQuNyA3NC43IDMzLjUgNzQuNyA3NC43LTMzLjYgNzQuNy03NC43IDc0Ljd6bTE0Ni40LTE5NC4zYzAgMTQuOS0xMiAyNi44LTI2LjggMjYuOC0xNC45IDAtMjYuOC0xMi0yNi44LTI2LjhzMTItMjYuOCAyNi44LTI2LjggMjYuOCAxMiAyNi44IDI2Ljh6bTc2LjEgMjcuMmMtMS43LTM1LjktOS45LTY3LjctMzYuMi05My45LTI2LjItMjYuMi01OC0zNC40LTkzLjktMzYuMi0zNy0yLjEtMTQ3LjktMi4xLTE4NC45IDAtMzUuOCAxLjctNjcuNiA5LjktOTMuOSAzNi4xcy0zNC40IDU4LTM2LjIgOTMuOWMtMi4xIDM3LTIuMSAxNDcuOSAwIDE4NC45IDEuNyAzNS45IDkuOSA2Ny43IDM2LjIgOTMuOXM1OCAzNC40IDkzLjkgMzYuMmMzNyAyLjEgMTQ3LjkgMi4xIDE4NC45IDAgMzUuOS0xLjcgNjcuNy05LjkgOTMuOS0zNi4yIDI2LjItMjYuMiAzNC40LTU4IDM2LjItOTMuOSAyLjEtMzcgMi4xLTE0Ny44IDAtMTg0Ljh6bS00Ny40IDE4NC4zYy0zLjEgMjUuOS0xMS40IDQ4LjgtMzkuMSA3Ni41LTI3LjcgMjcuNy01MC42IDM2LTc2LjUgMzkuMS0zMC4yIDMuNC04My44IDMuNC0xMTQgMC0yNS45LTMuMS00OC44LTExLjQtNzYuNS0zOS4xcy0zNi00OC42LTM5LjEtNzYuNWMtMy40LTMwLjItMy40LTgzLjggMC0xMTQgMy4xLTI1LjkgMTEuNC00OC44IDM5LjEtNzYuNSAyNy43LTI3LjcgNTAuNi0zNiA3Ni41LTM5LjEgMzAuMi0zLjQgODMuOC0zLjQgMTE0IDAgMjUuOSAzLjEgNDguOCAxMS40IDc2LjUgMzkuMSAyNy43IDI3LjcgMzYgNTAuNiAzOS4xIDc2LjUgMy40IDMwLjIgMy40IDgzLjggMCAxMTR6Ij48L3BhdGg+PC9zdmc+");
    background-size: cover;
    z-index: 100;
    pointer-events: none;
}

/* Image grid styling - FIXED */
.app-mockup .instagram-media div[style*="padding: 19% 0"] {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    display: block !important;
}

/* Show original Instagram SVG and content */
.app-mockup .instagram-media a div:nth-child(2) {
    display: block !important;
}

/* Fix image grid container */
.app-mockup .instagram-media::after,
.app-mockup .instagram-media::before {
    content: none !important;
}

/* Allow Instagram's original grid to show */
.app-mockup .instagram-media a > div {
    display: block !important;
    visibility: visible !important;
}

/* Fix Instagram icon positioning */
.app-mockup::after {
    content: "";
    position: absolute;
    top: 12px;
    right: 16px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjRTQzMDVCIiBkPSJNMjI0LjEgMTQxYy02My42IDAtMTE0LjkgNTEuMy0xMTQuOSAxMTQuOXM1MS4zIDExNC45IDExNC45UzMzOSAzMTkuNSAzMzkgMjU1LjkgMjg3LjcgMTQxIDIyNC4xIDE0MXptMCAxODkuNmMtNDEuMSAwLTc0LjctMzMuNS03NC43LTc0LjdzMzMuNS03NC43IDc0LjcgNzQuNyA3NC43IDMzLjUgNzQuNyA3NC43LTMzLjYgNzQuNy03NC43IDc0Ljd6bTE0Ni40LTE5NC4zYzAgMTQuOS0xMiAyNi44LTI2LjggMjYuOC0xNC45IDAtMjYuOC0xMi0yNi44LTI2LjhzMTItMjYuOCAyNi44LTI2LjggMjYuOCAxMiAyNi44IDI2Ljh6bTc2LjEgMjcuMmMtMS43LTM1LjktOS45LTY3LjctMzYuMi05My45LTI2LjItMjYuMi01OC0zNC40LTkzLjktMzYuMi0zNy0yLjEtMTQ3LjktMi4xLTE4NC45IDAtMzUuOCAxLjctNjcuNiA5LjktOTMuOSAzNi4xcy0zNC40IDU4LTM2LjIgOTMuOWMtMi4xIDM3LTIuMSAxNDcuOSAwIDE4NC45IDEuNyAzNS45IDkuOSA2Ny43IDM2LjIgOTMuOXM1OCAzNC40IDkzLjkgMzYuMmMzNyAyLjEgMTQ3LjkgMi4xIDE4NC45IDAgMzUuOS0xLjcgNjcuNy05LjkgOTMuOS0zNi4yIDI2LjItMjYuMiAzNC40LTU4IDM2LjItOTMuOSAyLjEtMzcgMi4xLTE0Ny44IDAtMTg0Ljh6bS00Ny40IDE4NC4zYy0zLjEgMjUuOS0xMS40IDQ4LjgtMzkuMSA3Ni41LTI3LjcgMjcuNy01MC42IDM2LTc2LjUgMzkuMS0zMC4yIDMuNC04My44IDMuNC0xMTQgMC0yNS45LTMuMS00OC44LTExLjQtNzYuNS0zOS4xcy0zNi00OC42LTM5LjEtNzYuNWMtMy40LTMwLjItMy40LTgzLjggMC0xMTQgMy4xLTI1LjkgMTEuNC00OC44IDM5LjEtNzYuNSAyNy43LTI3LjcgNTAuNi0zNiA3Ni41LTM5LjEgMzAuMi0zLjQgODMuOC0zLjQgMTE0IDAgMjUuOSAzLjEgNDguOCAxMS40IDc2LjUgMzkuMSAyNy43IDI3LjcgMzYgNTAuNiAzOS4xIDc2LjUgMy40IDMwLjIgMy40IDgzLjggMCAxMTR6Ij48L3BhdGg+PC9zdmc+");
    background-size: cover;
    z-index: 100;
    pointer-events: none;
}

/* Instagram View Profile Button */
.app-mockup .instagram-media a.block {
    font-size: 14px;
    letter-spacing: 0.2px;
}

.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.rtl .scroll-top {
    right: auto;
    left: 20px;
}

.scroll-top.visible {
    opacity: 1;
}

.scroll-top:hover {
    background-color: var(--color-dark);
    transform: translateY(-3px);
}

.heart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: white;
    color: #ccc;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.heart-icon:hover, .heart-icon.active {
    color: #ff4757;
    transform: scale(1.1);
}

.category-tab {
    position: relative;
    z-index: 1;
}

.category-tab::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.category-tab:hover::after {
    width: 70%;
}

.category-tab.active {
    background-color: var(--color-primary);
    color: white;
}

.category-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.category-content.active {
    display: block;
    opacity: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Instagram Preview Section - Enhanced */
.instagram-preview-section {
    position: relative;
    background: linear-gradient(135deg, #F2E9E4 0%, #e8d9cf 50%, #D4A276 100%);
    padding: 4rem 0;
    overflow: hidden;
}

/* Add coffee bean decorations to Instagram section */
.instagram-preview-section::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 5%;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg stroke='%238C5A42' fill='%238C5A42' stroke-width='0' viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M183.79,183.79c-43.14,43.14-103.09,53.14-133.9,22.32S29.07,115.35,72.21,72.21,175.3,19.07,206.11,49.89,226.93,140.65,183.79,183.79Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M211.75,44.25C195,27.47,170.37,20.79,142.46,25.44c-26.91,4.49-53.87,19.09-75.9,41.12s-36.63,49-41.12,75.9c-4.65,27.91,2,52.51,18.81,69.29C57.54,225.05,75.75,232,96.62,232a103.66,103.66,0,0,0,16.92-1.44c26.91-4.49,53.87-19.09,75.9-41.12s36.63-49,41.12-75.9C235.21,85.63,228.53,61,211.75,44.25ZM77.87,77.87C102.56,53.19,133,39.93,159.15,39.93a62.26,62.26,0,0,1,29,6.67A108.48,108.48,0,0,0,157.1,63.54c-19.2,15.16-31.63,36.32-36.94,62.89-9.72,48.58-44.7,65.18-67.48,70.84C28.71,168.76,39.4,116.35,77.87,77.87ZM178.13,178.13c-34.69,34.68-80.71,46.78-110.32,31.27A108.72,108.72,0,0,0,98.9,192.46c19.2-15.16,31.63-36.32,36.94-62.89,9.72-48.58,44.7-65.18,67.48-70.84C227.29,87.24,216.6,139.65,178.13,178.13Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 1;
    transform: rotate(-15deg);
}

.instagram-preview-section::after {
    content: "";
    position: absolute;
    bottom: 15%;
    right: 7%;
    width: 60px;
    height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg stroke='%238C5A42' fill='%238C5A42' stroke-width='0' viewBox='0 0 512 512' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M203.043 26.648c-8.893.062-17.672 1.326-26.193 3.873-8.454 2.53-16.242 6.197-23.31 10.867 7.722 19.622 27.435 44.53 50.27 65.793 23.842 22.202 51.18 41.065 68.835 49.572l.207.1.203.103c16.224 8.335 27.71 21.453 34.34 35.924 4.27 9.318 6.757 19.078 8.207 29 13-10.14 26.704-18.26 40.636-24.153-1.06-18.31-5.088-37.51-12.424-56.735-15.386-40.32-42.26-72.78-72.695-92.576-21.875-14.228-45.35-21.926-68.077-21.768zm-76.408 42.305c-5.113 7.934-9.306 16.78-12.492 26.387-10.64 32.074-9.777 72.308 5.61 112.63 9.312 24.403 22.837 45.92 38.81 63.5 15.736 4.708 31.3 11.982 45.92 21.852 11.296 7.627 21.362 16.357 30.085 25.852 2.847.692 5.695 1.282 8.54 1.746 5.42-14.138 12.455-28.204 21.124-41.85 5.353-8.424 11.116-16.354 17.21-23.757.072-5.192.03-10.223-.217-15.026-.67-12.99-2.75-24.1-6.56-32.414-3.808-8.314-8.77-14.122-18.06-18.894l.41.202c-22.878-11.025-51.447-31.172-77.74-55.655-20.9-19.46-40.288-41.258-52.64-64.574zm279.752 135.725c-13.507.11-27.796 3.247-42.252 9.248-30.84 12.802-61.806 38.75-84.71 74.797-11.717 18.442-20.137 37.67-25.372 56.523 20.55 34.478 25.597 74.082 10.793 107.342 2.417 3.444 5.08 6.657 7.986 9.613 21.644-18.674 46.588-34.143 64.316-50.028 9.69-8.68 17.027-17.275 21.104-25.46 4.077-8.187 5.48-15.697 3.36-25.923l-.124-.595-.082-.6c-8.053-58.294 6.075-92.552 26.664-113.51 16.556-16.85 33.036-25.725 44.405-37.442-8.214-2.73-16.972-4.04-26.088-3.965zm56.746 23.953c-16.63 20.67-37.133 30.217-49.383 42.686-14.076 14.328-23.793 31.575-16.715 83.104 3.408 17.52.413 34.346-6.558 48.342-7.097 14.247-17.71 25.832-29.305 36.222-17.613 15.782-37.93 29.296-54.926 42.48 19.275 5.007 41.22 2.584 63.565-6.693 30.84-12.8 61.808-38.75 84.71-74.797 22.905-36.048 33.24-75.107 31.728-108.463-1.156-25.51-9.035-47.368-23.115-62.88zm-66.098 125.79c-.06-.315-.108-.628-.174-.943l.208 1.193c-.01-.085-.02-.165-.033-.25zm-280.223-71.424c-18.383-.166-35.7 3.865-50.275 11.807.1.003.187.01.287.013 8.63.305 19.464-.713 31.938.99 12.473 1.704 27.085 7.368 38.154 19.893 11.07 12.524 18.66 30.28 23.947 55.78l.125.594.082.602c2.453 17.792 13.786 28.085 33.434 37.722 16.764 8.223 38.287 14.095 58.717 20.073 9.15-41-12.56-91.006-58.81-122.23-24.938-16.836-52.274-25.015-77.597-25.244zm-81.078 41.447c-25.27 43.53-5.004 107.405 50.106 144.612 54.225 36.61 119.786 32.276 151.34-5.7-18.436-5.254-39.336-11.22-58.53-20.634-24.75-12.14-48.34-32.54-53.1-64.222-4.533-21.7-10.59-33.28-15.61-38.96-5.04-5.707-8.97-7.095-16.05-8.06-7.08-.968-16.81-.277-28.333-.683-8.98-.316-19.516-1.605-29.823-6.352zm89.817 54.055c.022.1.044.192.065.293l-.207-1.196c.042.304.097.6.143.904z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    transform: rotate(15deg);
}

/* Section headings with coffee bean decoration */
.instagram-heading {
    font-family: 'Playfair Display', 'Noto Kufi Arabic', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 2;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.instagram-heading::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -35px;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg stroke='%23D4A276' fill='%23D4A276' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18a6.06 6.06 0 0 0 5.17-6 7.62 7.62 0 0 1 6.52-7.51l2.59-.37c-.07-.08-.13-.16-.21-.24-3.26-3.26-9.52-2.28-14 2.18C2.28 9.9 1 15 2.76 18.46z'%3E%3C/path%3E%3Cpath d='M12.73 12a7.63 7.63 0 0 1-6.51 7.52l-2.46.35.15.17c3.26 3.26 9.52 2.29 14-2.17C21.68 14.11 23 9 21.25 5.59l-3.34.48A6.05 6.05 0 0 0 12.73 12z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    transform: rotate(-20deg);
}

.instagram-heading::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -35px;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg stroke='%23D4A276' fill='%23D4A276' stroke-width='0' viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M71.22,190.47a108.88,108.88,0,0,1-33.84,9.16,4,4,0,0,1-3.89-2c-8.67-15.28-11.52-34.29-8-55.15,4.49-26.92,19.09-53.87,41.12-75.9s49-36.63,75.9-41.12c22.79-3.79,43.37,0,59.29,10.6a4,4,0,0,1-1.25,7.23,121,121,0,0,0-21.82,7.46c-21.77,9.9-49.6,31.06-58.52,75.7C114.1,156.73,97.63,178.27,71.22,190.47ZM222.51,58.38a4,4,0,0,0-3.88-2,108.5,108.5,0,0,0-33.85,9.16c-26.41,12.2-42.88,33.74-48.94,64-8.93,44.64-36.75,65.8-58.52,75.7a121,121,0,0,1-21.82,7.46A4,4,0,0,0,54.27,220c11.87,7.92,26.32,12,42.35,12a103.66,103.66,0,0,0,16.92-1.44c26.91-4.49,53.87-19.09,75.9-41.12s36.63-49,41.12-75.9C234,92.68,231.18,73.66,222.51,58.38Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.5;
    transform: rotate(15deg);
}

.instagram-subheading {
    font-size: 1.1rem;
    color: var(--color-secondary);
    margin-bottom: 2.5rem;
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

/* Instagram CTA button with coffee bean */
.instagram-cta {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.instagram-cta:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.instagram-cta i {
    margin-right: 8px;
    font-size: 1.2rem;
}

.instagram-cta::before {
    content: "";
    position: absolute;
    right: -15px;
    top: -10px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg stroke='%23F2E9E4' fill='%23F2E9E4' stroke-width='0' viewBox='0 0 256 256' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M71.22,190.47a108.88,108.88,0,0,1-33.84,9.16,4,4,0,0,1-3.89-2c-8.67-15.28-11.52-34.29-8-55.15,4.49-26.92,19.09-53.87,41.12-75.9s49-36.63,75.9-41.12c22.79-3.79,43.37,0,59.29,10.6a4,4,0,0,1-1.25,7.23,121,121,0,0,0-21.82,7.46c-21.77,9.9-49.6,31.06-58.52,75.7C114.1,156.73,97.63,178.27,71.22,190.47ZM222.51,58.38a4,4,0,0,0-3.88-2,108.5,108.5,0,0,0-33.85,9.16c-26.41,12.2-42.88,33.74-48.94,64-8.93,44.64-36.75,65.8-58.52,75.7a121,121,0,0,1-21.82,7.46A4,4,0,0,0,54.27,220c11.87,7.92,26.32,12,42.35,12a103.66,103.66,0,0,0,16.92-1.44c26.91-4.49,53.87-19.09,75.9-41.12s36.63-49,41.12-75.9C234,92.68,231.18,73.66,222.51,58.38Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
    transform: rotate(-10deg);
}

/* Add coffee bean icon to testimonial */
.instagram-testimonial {
    background-color: white;
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
    z-index: 2;
}

.instagram-testimonial::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background-image: url("data:image/svg+xml,%3Csvg stroke='%238C5A42' fill='%238C5A42' stroke-width='0' viewBox='0 0 512 512' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M203.043 26.648c-8.893.062-17.672 1.326-26.193 3.873-8.454 2.53-16.242 6.197-23.31 10.867 7.722 19.622 27.435 44.53 50.27 65.793 23.842 22.202 51.18 41.065 68.835 49.572l.207.1.203.103c16.224 8.335 27.71 21.453 34.34 35.924 4.27 9.318 6.757 19.078 8.207 29 13-10.14 26.704-18.26 40.636-24.153-1.06-18.31-5.088-37.51-12.424-56.735-15.386-40.32-42.26-72.78-72.695-92.576-21.875-14.228-45.35-21.926-68.077-21.768zm-76.408 42.305c-5.113 7.934-9.306 16.78-12.492 26.387-10.64 32.074-9.777 72.308 5.61 112.63 9.312 24.403 22.837 45.92 38.81 63.5 15.736 4.708 31.3 11.982 45.92 21.852 11.296 7.627 21.362 16.357 30.085 25.852 2.847.692 5.695 1.282 8.54 1.746 5.42-14.138 12.455-28.204 21.124-41.85 5.353-8.424 11.116-16.354 17.21-23.757.072-5.192.03-10.223-.217-15.026-.67-12.99-2.75-24.1-6.56-32.414-3.808-8.314-8.77-14.122-18.06-18.894l.41.202c-22.878-11.025-51.447-31.172-77.74-55.655-20.9-19.46-40.288-41.258-52.64-64.574zm279.752 135.725c-13.507.11-27.796 3.247-42.252 9.248-30.84 12.802-61.806 38.75-84.71 74.797-11.717 18.442-20.137 37.67-25.372 56.523 20.55 34.478 25.597 74.082 10.793 107.342 2.417 3.444 5.08 6.657 7.986 9.613 21.644-18.674 46.588-34.143 64.316-50.028 9.69-8.68 17.027-17.275 21.104-25.46 4.077-8.187 5.48-15.697 3.36-25.923l-.124-.595-.082-.6c-8.053-58.294 6.075-92.552 26.664-113.51 16.556-16.85 33.036-25.725 44.405-37.442-8.214-2.73-16.972-4.04-26.088-3.965zm56.746 23.953c-16.63 20.67-37.133 30.217-49.383 42.686-14.076 14.328-23.793 31.575-16.715 83.104 3.408 17.52.413 34.346-6.558 48.342-7.097 14.247-17.71 25.832-29.305 36.222-17.613 15.782-37.93 29.296-54.926 42.48 19.275 5.007 41.22 2.584 63.565-6.693 30.84-12.8 61.808-38.75 84.71-74.797 22.905-36.048 33.24-75.107 31.728-108.463-1.156-25.51-9.035-47.368-23.115-62.88zm-66.098 125.79c-.06-.315-.108-.628-.174-.943l.208 1.193c-.01-.085-.02-.165-.033-.25zm-280.223-71.424c-18.383-.166-35.7 3.865-50.275 11.807.1.003.187.01.287.013 8.63.305 19.464-.713 31.938.99 12.473 1.704 27.085 7.368 38.154 19.893 11.07 12.524 18.66 30.28 23.947 55.78l.125.594.082.602c2.453 17.792 13.786 28.085 33.434 37.722 16.764 8.223 38.287 14.095 58.717 20.073 9.15-41-12.56-91.006-58.81-122.23-24.938-16.836-52.274-25.015-77.597-25.244zm-81.078 41.447c-25.27 43.53-5.004 107.405 50.106 144.612 54.225 36.61 119.786 32.276 151.34-5.7-18.436-5.254-39.336-11.22-58.53-20.634-24.75-12.14-48.34-32.54-53.1-64.222-4.533-21.7-10.59-33.28-15.61-38.96-5.04-5.707-8.97-7.095-16.05-8.06-7.08-.968-16.81-.277-28.333-.683-8.98-.316-19.516-1.605-29.823-6.352zm89.817 54.055c.022.1.044.192.065.293l-.207-1.196c.042.304.097.6.143.904z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    transform: rotate(15deg);
}

/* Enhanced testimonial quote mark */
.instagram-testimonial::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 20px;
    width: 35px;
    height: 35px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23D4A276' d='M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
}

/* Testimonial text */
.testimonial-text {
    font-style: italic;
    color: var(--color-dark);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
}

.testimonial-author {
    text-align: right;
    font-weight: 600;
    color: var(--color-secondary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .instagram-heading {
        font-size: 2rem;
    }
    
    .instagram-subheading {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    .phone-mockup {
        max-width: 280px;
        transform: none;
    }
    
    .instagram-testimonial {
        margin: 2rem auto;
        max-width: 90%;
    }
    
    .instagram-cta {
        margin: 0 auto;
        display: table;
    }
}

@media (max-width: 480px) {
    .instagram-heading {
        font-size: 1.8rem;
    }
    
    .instagram-heading::before,
    .instagram-heading::after {
        width: 20px;
        height: 20px;
    }
    
    .phone-mockup {
        border-width: 8px;
        border-radius: 24px;
        max-width: 260px;
    }
}

/* Phone mockup container - keep intact */
.phone-mockup {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    border: 12px solid #000;
    border-radius: 36px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: perspective(1000px) rotateY(5deg);
    transition: all 0.5s ease;
}

/* Simple punch hole camera */
.phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: black;
    border-radius: 50%;
    z-index: 5;
}

/* Make Instagram embed fit exactly */
.phone-mockup .instagram-media {
    transform: none;
    margin: 25px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

/* Adjust content positioning */
.phone-mockup .instagram-media > div {
    padding: 10px !important;
}

/* Fix the profile section layout */
.phone-mockup .instagram-media a div:first-child {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

/* Fix the profile image size and position */
.phone-mockup .instagram-media a div:first-child div:first-child > div:first-child {
    width: 45px !important;
    height: 45px !important;
    margin-right: 10px !important;
}

/* Adjust text size for profile name */
.phone-mockup .instagram-media a div div div:first-child {
    font-size: 14px !important;
    line-height: 18px !important;
}

/* Adjust text size for follower count */
.phone-mockup .instagram-media a div div div:not(:first-child) {
    font-size: 12px !important;
    line-height: 16px !important;
}

/* Fix the button to be fully visible inside the phone */
.phone-mockup .instagram-media a[style*="color:#3897f0"] {
    margin: 0 auto 15px !important;
    display: block !important;
    width: calc(100% - 20px) !important;
    background-color: #0095F6 !important;
    color: white !important;
    border-radius: 5px !important;
    text-align: center !important;
    padding: 8px 0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* RTL-specific adjustments */
.rtl .btn-primary i,
.rtl .btn-outline i,
.rtl .instagram-cta i,
body.rtl .btn-primary i,
body.rtl .btn-outline i,
body.rtl .instagram-cta i {
    margin-right: 0;
    margin-left: 8px;
}



.rtl .mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

.rtl .ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

.rtl .space-x-4 > * + * {
    margin-left: 0;
    margin-right: 1rem;
}

.rtl .instagram-heading::before {
    left: auto;
    right: -35px;
}

.rtl .instagram-heading::after {
    right: auto;
    left: -35px;
}

/* RTL styles - ensure proper right-to-left display */
html[dir="rtl"] body,
body.rtl {
    direction: rtl;
    text-align: right;
}




/* Adjust alignment and margins */
html[dir="rtl"] .ml-2,
html[dir="rtl"] .ml-3,
html[dir="rtl"] .ml-4,
body.rtl .ml-2,
body.rtl .ml-3,
body.rtl .ml-4 {
    margin-left: 0;
    margin-right: 0.5rem;
}

html[dir="rtl"] .mr-2,
html[dir="rtl"] .mr-3,
html[dir="rtl"] .mr-4,
body.rtl .mr-2,
body.rtl .mr-3,
body.rtl .mr-4 {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Reset spacing for utility classes */
html[dir="rtl"] .space-x-4 > * + *,
body.rtl .space-x-4 > * + * {
    margin-left: 0;
    margin-right: 1rem;
}



/* Coffee bean decorations in headings */
html[dir="rtl"] .instagram-heading::before,
body.rtl .instagram-heading::before {
    left: auto;
    right: -35px;
}

html[dir="rtl"] .instagram-heading::after,
body.rtl .instagram-heading::after {
    right: auto;
    left: -35px;
}

/* Button icons */
html[dir="rtl"] .btn-primary i,
html[dir="rtl"] .btn-outline i,
html[dir="rtl"] .instagram-cta i,
body.rtl .btn-primary i,
body.rtl .btn-outline i,
body.rtl .instagram-cta i {
    margin-right: 0;
    margin-left: 8px;
}

/* Fix the scroll-top button */
html[dir="rtl"] .scroll-top,
body.rtl .scroll-top {
    right: auto;
    left: 20px;
}



[dir="rtl"] .featured-products .grid {
    direction: rtl;
}

[dir="rtl"] .menu-section .grid {
    direction: rtl;
}

[dir="rtl"] .product-card {
    text-align: right;
}

[dir="rtl"] .product-card .price {
    left: auto;
    right: 1rem;
}

[dir="rtl"] .product-card .product-info {
    text-align: right;
}

[dir="rtl"] .contact-section .grid {
    direction: rtl;
}

[dir="rtl"] .contact-info {
    text-align: right;
}

[dir="rtl"] .contact-form {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form textarea {
    text-align: right;
}

[dir="rtl"] .footer .grid {
    direction: rtl;
}

[dir="rtl"] .footer-links {
    text-align: right;
}

/* Fix grid layouts for RTL */
[dir="rtl"] .grid {
    direction: rtl;
}




/* Adjust margins for RTL */
[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

/* Fix icon positioning in RTL */
[dir="rtl"] .btn i,
[dir="rtl"] .icon-left i {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .icon-right i {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Fix text alignment in cards and sections */
[dir="rtl"] .text-left {
    text-align: right;
}

[dir="rtl"] .text-right {
    text-align: left;
}

/* Fix padding and margins */
[dir="rtl"] .pl-4 {
    padding-left: 0;
    padding-right: 1rem;
}

[dir="rtl"] .pr-4 {
    padding-right: 0;
    padding-left: 1rem;
}




/* Fix promotional banner */
[dir="rtl"] .promotional-banner .content {
    text-align: right;
}

/* Fix Instagram section */
[dir="rtl"] .instagram-preview {
    direction: rtl;
}

[dir="rtl"] .instagram-content {
    text-align: right;
}

/* Fix menu categories */
[dir="rtl"] .menu-categories {
    direction: rtl;
}

[dir="rtl"] .category-tab {
    text-align: right;
}

/* Fix contact form layout */
[dir="rtl"] .contact-form label {
    text-align: right;
}

[dir="rtl"] .form-group {
    text-align: right;
}

/* Fix footer columns */
[dir="rtl"] .footer-column {
    text-align: right;
}

/* Fix social icons spacing */
[dir="rtl"] .social-icons {
    direction: rtl;
}

[dir="rtl"] .social-icons a {
    margin-right: 0;
    margin-left: 1rem;
}

/* Fix floating beans position */
[dir="rtl"] .floating-beans {
    direction: rtl;
}

[dir="rtl"] .bean {
    transform-origin: right center;
}

/* Base RTL Support */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}



[dir="rtl"] .price-tag {
    right: auto;
    left: 20px;
}

[dir="rtl"] .scroll-top {
    right: auto;
    left: 20px;
}

[dir="rtl"] .product-card::after {
    right: auto;
    left: -10px;
}

[dir="rtl"] .instagram-heading::before {
    left: auto;
    right: -35px;
}

[dir="rtl"] .instagram-heading::after {
    right: auto;
    left: -35px;
}

[dir="rtl"] .btn i,
[dir="rtl"] .instagram-cta i {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .ml-2,
[dir="rtl"] .ml-3,
[dir="rtl"] .ml-4 {
    margin-left: 0;
    margin-right: 0.5rem;
}

[dir="rtl"] .mr-2,
[dir="rtl"] .mr-3,
[dir="rtl"] .mr-4 {
    margin-right: 0;
    margin-left: 0.5rem;
}

[dir="rtl"] .space-x-4 > * + * {
    margin-left: 0;
    margin-right: 1rem;
}

/* Contact Form Button Styles */
.send-message-btn {
    background-color: var(--color-accent);
    color: white;
    font-weight: bold;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.send-message-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background-color: var(--color-accent-dark, #9a3412);
}

.send-message-btn:active {
    transform: translateY(0);
}

/* Ripple effect */
.send-message-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.8s;
}

.send-message-btn:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}