/* Advanced Hero & Header Widget Styles */
/* Professional hero section and responsive header widget with flexible visibility controls */

/* CSS Variables from original */
:root {
    --font-family: "Dana", "Vazirmatn", "IRANSansX", Tahoma, "Segoe UI", sans-serif;
    --green-700: #2a7c68;
    --teal-900: #123c3a;
    --teal-700: #1f5a56;
    --mint: #a7e76a;

    /* Social Icons Variables */
    --icon-size: 2.5rem;
    --icon-radius: 50%;
    --icon-color: #4d4d4d;
    --icon-bg: #ffffff;
    --icon-border: rgba(0, 0, 0, 0.08);
    --icon-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
    --icon-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
    --tooltip-bg: rgba(0, 0, 0, 0.85);
    --tooltip-color: #ffffff;
}

/* Load custom font */
@font-face {
    font-family: 'Digikala';
    src: url('../../font/Digikala -_font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Header Styles */
.header {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    height: var(--header-height, clamp(60px, 8vh, 85px));
    background: var(--header-bg, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--header-shadow, none);
    z-index: 1000;
    display: flex;
    align-items: center;
    direction: rtl;
}

/* Header Content Container */
.header-content {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: clamp(160px, 2vw, 24px);
    padding: 0 clamp(20px, 4vw, 40px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 2;
    gap: 20px;
}

/* Navigation Container with SVG Background */
.header-nav-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg viewBox="0 0 625 71" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cg filter="url(%23filter0_n_117_132)"%3E%3Cpath d="M624.995 0C612.48 6.89061 604 20.2041 604 35.5C604 50.7959 612.48 64.1094 624.995 71H35.5C15.8939 71 0 55.1061 0 35.5C0 15.8939 15.8939 0 35.5 0H624.995ZM35.3701 21.1729C35.6427 27.9513 38.2053 37.2382 45.166 42.1377L45.6523 42.4795L45.4756 43.0459C45.1924 43.9537 44.7855 44.754 44.1484 45.3652C43.5025 45.9765 42.6525 46.3717 41.6084 46.5605C39.6171 46.9201 36.8166 46.6323 32.5908 45.8682C31.7413 48.0345 31.8564 50.4169 32.6279 52.3496C33.3997 54.2645 34.7783 55.6404 36.3545 56C38.5537 53.1413 41.8644 49.6714 46.4043 49.8779C51.0065 50.0847 56.2732 48.7901 59.4062 45.5986C60.5124 44.4838 61.4591 41.7958 62.0078 39.4316C62.5565 37.0673 62.7773 35.0264 62.7773 35.0264L62.8311 34.4785L63.3623 34.334C65.2739 33.8306 67.5751 33.3722 70.1504 32.0508C69.3894 31.5294 68.4953 30.9183 67.46 30.2891C65.8758 29.3361 64.1319 28.5091 63.2734 28.4102C61.8046 28.2574 60.9727 28.5267 60.3975 28.958C59.831 29.3895 59.4593 30.0554 59.1318 30.8555C58.8132 31.6555 58.5655 32.5638 58.123 33.3818C57.6717 34.2088 56.8836 34.9815 55.751 35.1074C50.7948 35.6918 46.5636 33.0484 43.0146 29.7041C40.0942 26.9533 37.5649 23.6989 35.3701 21.1729ZM68.6543 34.4785C68.026 34.7122 67.4238 34.9191 66.8486 35.0898C66.6894 35.7099 66.5216 36.3301 66.3535 36.9502L67.8936 37.3818C68.159 36.4201 68.4154 35.4493 68.6543 34.4785ZM47.2188 17.6162C46.5728 19.4374 45.9538 21.8743 45.5645 24.2832C45.2813 26.072 45.095 27.8523 45.0596 29.3984C47.7501 31.7268 50.6622 33.4087 53.8926 33.5615C50.9544 28.8419 48.3162 22.7736 47.2188 17.6162ZM63.2646 14C62.6983 17.0465 63.8663 18.8892 66.1494 19.96C66.5565 20.6944 66.8937 21.4251 67.1592 22.1533C65.8051 20.6232 64.2114 19.8778 62.0254 20.9736C63.2733 23.4566 65.1765 23.8882 67.4688 23.0791C68.0174 24.9668 68.1502 26.8187 68.0264 28.6885C68.0264 28.7063 68.0262 28.7244 68.0176 28.7422C68.106 28.796 68.1939 28.8417 68.2734 28.8955C68.707 29.1561 69.1321 29.4257 69.5391 29.6953C69.5744 29.3988 69.6014 29.0934 69.6191 28.7969C69.7253 27.2148 69.6545 25.6143 69.3271 23.9873C71.6988 24.4457 73.1327 23.2139 74 20.9648C71.8582 20.7311 70.0259 21.0746 69.1055 23.0254C68.8754 22.1804 68.5748 21.3261 68.1943 20.4668C70.2918 19.0419 71.5305 17.2239 70.4951 14.3877C68.504 15.1545 67.5301 16.3768 67.2822 17.9355C66.8751 15.9705 65.7691 14.5025 63.2646 14Z" fill="%232E4344" fill-opacity="0.63"/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id="filter0_n_117_132" x="0" y="0" width="624.996" height="71" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"%3E%3CfeFlood flood-opacity="0" result="BackgroundImageFix"/%3E%3CfeBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/%3E%3CfeTurbulence type="fractalNoise" baseFrequency="2 2" stitchTiles="stitch" numOctaves="3" result="noise" seed="2531"/%3E%3CfeColorMatrix in="noise" type="luminanceToAlpha" result="alphaNoise"/%3E%3CfeComponentTransfer in="alphaNoise" result="coloredNoise1"%3E%3CfeFuncA type="discrete" tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0"/%3E%3C/feComponentTransfer%3E%3CfeComposite operator="in" in2="shape" in="coloredNoise1" result="noise1Clipped"/%3E%3CfeFlood flood-color="rgba(0, 0, 0, 0.25)" result="color1Flood"/%3E%3CfeComposite operator="in" in2="noise1Clipped" in="color1Flood" result="color1"/%3E%3CfeMerge result="effect1_noise_117_132"%3E%3CfeMergeNode in="shape"/%3E%3CfeMergeNode in="color1"/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: clamp(400px, 80vw, 625px);
    height: clamp(45px, 8vh, 71px);
    opacity: 0.9;
}

/* Logo Section (not used in markup but preserved) */
.header-logo {
    font-family: 'Digikala', Arial, sans-serif;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.header-logo img {
    display: block;
    height: auto;
    max-width: 100%;
}

.header-logo:hover {
    color: var(--mint);
}

/* Navigation Menu */
.header-nav {
    display: flex;
    list-style: none;
    gap: clamp(20px, 4vw, 35px);
    align-items: center;
    margin: 0;
    padding: 0 clamp(30px, 5vw, 50px);
}

.header-nav li {
    position: relative;
}

.header-nav a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Digikala', Arial, sans-serif;
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    font-weight: 500;
    padding: 8px 0;
    position: relative;
    transition: all 0.3s ease;
}

.header-nav a:hover {
    color: var(--mint);
}

.header-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--mint);
    transition: width 0.3s ease;
}

.header-nav a:hover::after {
    width: 100%;
}

/* Header CTA Button */
.header-cta {
    background: linear-gradient(135deg, var(--green-700), var(--teal-900));
    color: #ffffff;
    padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
    border-radius: 25px;
    text-decoration: none;
    font-family: 'Digikala', Arial, sans-serif;
    font-size: clamp(0.85rem, 2vw, 1rem);
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    white-space: nowrap;
    margin-right: 0;
    margin-inline-end: 0;
    margin-left: -383px;
    margin-inline-start: clamp(180px, 12vw, 420px);
}

.header-cta:hover {
    background: linear-gradient(135deg, var(--teal-900), #0d2b29);
    border-color: var(--mint);
    transform: translateY(-2px);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
    padding: 8px;
    background: none;
    border: none;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #26544B;
    backdrop-filter: blur(15px);
    box-shadow: var(--header-shadow, none);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.mobile-menu nav a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Digikala', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.3s ease;
}

.mobile-menu nav a:hover {
    color: var(--mint);
}

/* Mobile Login Button */
.mobile-login-btn {
    display: none;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Digikala', Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Elementor Full Width Fixes */
.elementor-widget-advanced-hero-header {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.elementor-widget-advanced-hero-header .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Override Elementor section and column constraints */
.elementor-section .elementor-container .elementor-column .elementor-widget-advanced-hero-header,
.elementor-container .elementor-column .elementor-widget-advanced-hero-header,
.elementor-column .elementor-widget-advanced-hero-header {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    position: relative;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* Hero section styling with background gradient */
.hero {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: radial-gradient(ellipse at center, #D8E0EC 0%, #9FB4D8 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 2s ease-in-out;
    overflow: hidden;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
}

/* Background images overlay on top of gradient */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 2s ease-in-out;
    z-index: 1;
}

/* Mobile background overlay */
@media (max-width: 768px) {
    .hero::after {
        background-size: contain;
    }
}

/* All hero content should be above the background overlay */
.hero-text,
.hero-button,
.hero-socials,
.hero-scroll-arrow {
    position: relative;
    z-index: 2;
}

/* Mobile hero background */
@media (max-width: 768px) {
    .hero {
        background-size: contain;
    }
}

/* Hero text styling */
.hero-text {
    position: absolute;
    top: clamp(180px, 25vh, 280px);
    right: clamp(20px, 12vw, 200px);
    font-family: 'Digikala', Arial, sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 500;
    color: #2F3E3E;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    direction: rtl;
    text-align: right;
    line-height: 1.4;
    max-width: 80vw;
    word-wrap: break-word;
    transition: opacity 2s ease-in-out;
    z-index: 2;
}

/* Vector image behind the text */
.hero-text::before {
    content: '';
    position: absolute;
    top: 50%;
    left: clamp(70%, 85%, 90%);
    transform: translate(-50%, -50%);
    width: clamp(200px, 25vw, 300px);
    height: clamp(250px, 30vw, 400px);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.7;
    transition: opacity 2s ease-in-out;
}

/* Line image behind the text */
.hero-text::after {
    content: '';
    position: absolute;
    top: clamp(140%, 155%, 170%);
    left: clamp(70%, 85%, 90%);
    transform: translate(-50%, -50%);
    width: clamp(300px, 40vw, 500px);
    height: clamp(120px, 15vw, 200px);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
    opacity: 0.6;
    transition: opacity 2s ease-in-out;
}

/* Second slide variations for vector and line opacity changes only */
.hero.slide-2 .hero-text::before {
    opacity: 0.8;
}

.hero.slide-2 .hero-text::after {
    opacity: 0.7;
}

/* Modern Advanced Hero Button */
.hero-button {
    position: absolute;
    top: clamp(380px, 45vh, 500px);
    right: clamp(20px, 12vw, 200px);
    display: inline-flex;
    align-items: center;
    padding: clamp(8px, 1.5vw, 11px) clamp(20px, 4vw, 33px);
    text-decoration: none;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--green-700) 0%, var(--teal-900) 100%);
    transition: box-shadow 0.5s, transform 0.2s, background 0.3s ease;
    box-shadow: 6px 6px 0 rgba(18, 60, 58, 0.9);
    transform: skewX(-15deg);
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-family: 'Digikala', Arial, sans-serif;
    direction: rtl;
    z-index: 2;
}

/* Focus state for accessibility */
.hero-button:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 4px;
}

/* Hover state */
.hero-button:hover {
    box-shadow: 10px 10px 0 var(--mint);
    background: linear-gradient(135deg, var(--teal-900) 0%, #0d2b29 100%);
}

/* Text inside button */
.hero-button .span {
    transform: skewX(15deg); /* Reverse the skew for text */
    font-weight: 700;
}

/* Icon container */
.hero-button .second {
    transition: margin 0.5s;
    margin-inline-start: 30px;
    position: relative;
    top: 12%;
    width: 50px;
}

/* Icon movement on hover */
.hero-button:hover .second {
    margin-inline-start: 45px;
}

/* Arrows inside icon */
.hero-button .one,
.hero-button .two,
.hero-button .three {
    transition: transform 0.5s;
}

/* Initial position of arrows */
.hero-button .one {
    transform: translateX(-60%);
    transition-duration: 0.4s;
}

.hero-button .two {
    transform: translateX(-30%);
    transition-duration: 0.5s;
}

/* Arrow movement on hover */
.hero-button:hover .one {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.6s;
}

.hero-button:hover .two {
    transform: translateX(0%);
    animation: color_anim 1s infinite 0.4s;
}

.hero-button:hover .three {
    animation: color_anim 1s infinite 0.2s;
}

/* Color animation for arrows */
@keyframes color_anim {
    0% {
        fill: #fff;
    }
    50% {
        fill: #fbc638;
    }
    100% {
        fill: #fff;
    }
}

/* RTL support - reverse arrow direction */
html[dir="rtl"] .hero-button .second svg {
    transform: scaleX(-1);
}

/* Left stack anchored to hero */
.hero-socials {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.hero-socials.is-left {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

/* Icon button */
.hero-social {
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg);
    color: var(--icon-color);
    border-radius: var(--icon-radius);
    text-decoration: none;
    border: 1px solid var(--icon-border);
    box-shadow: var(--icon-shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.hero-social:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--icon-shadow-hover);
    color: #ffffff;
}

/* SVG/icon size */
.hero-social svg,
.hero-social i {
    width: 1.25rem;
    height: 1.25rem;
    z-index: 2;
    position: relative;
    transition: inherit;
    font-size: 1.25rem;
}

/* The color-fill layer that grows on hover */
.hero-social .filled {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-radius: var(--icon-radius);
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-social:hover .filled {
    height: 100%;
}

/* Tooltip */
.hero-social-tooltip {
    position: absolute;
    right: 110%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-social:hover .hero-social-tooltip {
    opacity: 1;
    visibility: visible;
    right: 120%;
}

/* Brand fills using data attributes */
.hero-social[data-social="instagram"] .filled {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.hero-social[data-social="telegram"] .filled {
    background-color: #0088cc;
}

.hero-social[data-social="whatsapp"] .filled {
    background-color: #25d366;
}

.hero-social[data-social="phone"] .filled {
    background-color: #34c759;
}

.hero-social[data-social="custom"] .filled {
    background-color: #666666;
}

/* Scroll Arrow anchored to hero */
.hero-scroll-arrow {
    position: absolute;
    bottom: clamp(20px, 3vh, 40px);
    right: clamp(20px, 3vw, 40px);
    width: clamp(50px, 7vw, 70px);
    height: clamp(50px, 7vw, 70px);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    opacity: 0.8;
}

.hero-scroll-arrow:hover {
    transform: translateY(-3px) scale(1.05);
    opacity: 1;
}

.hero-scroll-arrow:active {
    transform: translateY(-1px) scale(0.98);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .hero {
        background-position: center center;
        background-size: contain;
        width: 100vw;
        height: 100vh;
    }

    .hero-text {
        top: clamp(100px, 20vh, 160px);
        right: clamp(15px, 5vw, 30px);
        left: clamp(15px, 5vw, 30px);
        text-align: center;
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        max-width: 90vw;
        line-height: 1.2;
    }

    .hero-text::before {
        width: clamp(120px, 25vw, 180px);
        height: clamp(150px, 30vw, 220px);
        left: 70%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.5;
    }

    .hero-text::after {
        display: none;
    }

    .hero-button {
        top: clamp(280px, 50vh, 480px);
        right: 50%;
        transform: translateX(50%) skewX(-15deg);
        padding: clamp(6px, 2vw, 8px) clamp(16px, 5vw, 20px);
        font-size: clamp(0.8rem, 3vw, 0.9rem);
        box-shadow: 4px 4px 0 rgba(18, 60, 58, 0.9);
    }

    .hero-button:hover {
        box-shadow: 6px 6px 0 var(--mint);
    }

    .hero-button .second {
        width: 35px;
        margin-inline-start: 15px;
    }

    .hero-button:hover .second {
        margin-inline-start: 25px;
    }

    .hero-socials.is-left {
        left: 0.5rem;
        --icon-size: 1.8rem;
    }

    .hero-scroll-arrow {
        bottom: clamp(15px, 2.5vh, 25px);
        right: clamp(15px, 2.5vw, 25px);
        width: clamp(40px, 8vw, 50px);
        height: clamp(40px, 8vw, 50px);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hero {
        background-position: center center;
        width: 100vw;
        height: 100vh;
    }

    .hero-text {
        top: clamp(120px, 22vh, 200px);
        right: clamp(20px, 8vw, 80px);
        font-size: clamp(2.2rem, 7vw, 3.2rem);
        max-width: 85vw;
    }

    .hero-text::before {
        width: clamp(150px, 20vw, 200px);
        height: clamp(180px, 25vw, 250px);
        left: clamp(75%, 80%, 85%);
    }

    .hero-text::after {
        width: clamp(200px, 35vw, 300px);
        height: clamp(80px, 12vw, 120px);
        left: clamp(75%, 80%, 85%);
    }

    .hero-button {
        top: clamp(320px, 40vh, 420px);
        right: clamp(20px, 8vw, 80px);
        padding: clamp(7px, 1.8vw, 9px) clamp(18px, 4.5vw, 24px);
        font-size: clamp(0.85rem, 2.8vw, 1rem);
        box-shadow: 5px 5px 0 rgba(18, 60, 58, 0.9);
    }

    .hero-button:hover {
        box-shadow: 8px 8px 0 var(--mint);
    }

    .hero-button .second {
        width: 40px;
        margin-inline-start: 20px;
    }

    .hero-button:hover .second {
        margin-inline-start: 30px;
    }

    .hero-socials.is-left {
        left: 1rem;
        --icon-size: 2rem;
    }

    .hero-scroll-arrow {
        bottom: clamp(18px, 2.8vh, 30px);
        right: clamp(18px, 2.8vw, 30px);
        width: clamp(45px, 7.5vw, 60px);
        height: clamp(45px, 7.5vw, 60px);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero {
        width: 100vw;
        height: 100vh;
    }

    .hero-text {
        top: clamp(160px, 24vh, 220px);
        right: clamp(40px, 10vw, 120px);
        font-size: clamp(2.8rem, 5.5vw, 3.8rem);
        max-width: 80vw;
    }

    .hero-text::before {
        width: clamp(180px, 22vw, 250px);
        height: clamp(220px, 28vw, 300px);
    }

    .hero-text::after {
        width: clamp(250px, 38vw, 400px);
        height: clamp(100px, 14vw, 150px);
    }

    .hero-button {
        top: clamp(360px, 42vh, 460px);
        right: clamp(40px, 10vw, 120px);
        padding: clamp(9px, 1.6vw, 10px) clamp(22px, 4.2vw, 28px);
        font-size: clamp(1rem, 2.3vw, 1.1rem);
    }

    .hero-button .second {
        width: 45px;
        margin-inline-start: 25px;
    }

    .hero-button:hover .second {
        margin-inline-start: 35px;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .hero {
        width: 100vw;
        height: 100vh;
    }

    .hero-text {
        top: clamp(200px, 24vh, 240px);
        right: clamp(80px, 11vw, 160px);
        font-size: clamp(3.5rem, 5vw, 4rem);
    }

    .hero-button {
        top: clamp(420px, 44vh, 480px);
        right: clamp(80px, 11vw, 160px);
        padding: clamp(10px, 1.4vw, 11px) clamp(28px, 3.8vw, 30px);
        font-size: clamp(1.1rem, 2.1vw, 1.15rem);
    }
}

@media (min-width: 1201px) {
    .hero {
        width: 100vw;
        height: 100vh;
    }

    .hero-text {
        top: clamp(220px, 25vh, 280px);
        right: clamp(120px, 12vw, 200px);
        font-size: clamp(4rem, 4.5vw, 4.5rem);
    }

    .hero-button {
        top: clamp(450px, 45vh, 500px);
        right: clamp(120px, 12vw, 200px);
    }
}

@media (min-width: 1400px) {
    .hero {
        width: 100vw;
        height: 100vh;
    }

    .hero-text {
        font-size: clamp(4.2rem, 4vw, 5rem);
        right: clamp(150px, 15vw, 250px);
    }

    .hero-button {
        right: clamp(150px, 15vw, 250px);
        font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    }
}

/* Responsive touch adjustments for social icons */
@media (hover: none) {
    .hero-social:hover {
        transform: none;
    }

    .hero-social:hover .filled {
        height: 0;
    }

    .hero-social:hover .hero-social-tooltip {
        opacity: 0;
        visibility: hidden;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-button,
    .hero-button .second,
    .hero-button .one,
    .hero-button .two,
    .hero-button .three,
    .hero-scroll-arrow,
    .hero-text,
    .hero-text::before,
    .hero-text::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Additional Elementor container overrides for full-width */
.elementor-section .elementor-container,
.elementor-container {
    max-width: none !important;
}

.elementor-section .elementor-container .elementor-row,
.elementor-container .elementor-row {
    max-width: none !important;
}

.elementor-section .elementor-container .elementor-column,
.elementor-container .elementor-column {
    max-width: none !important;
}

/* Ensure proper z-indexing in Elementor */
.elementor-widget-advanced-hero-header .hero-socials.is-left {
    z-index: 999;
}

.elementor-widget-advanced-hero-header .hero-scroll-arrow {
    z-index: 999;
}

/* Additional styles for header-only mode when hero section is disabled */
.hero-hidden {
    height: auto !important;
    min-height: 80px !important;
    background: none !important;
    overflow: visible !important;
}

.hero-hidden::after {
    display: none !important;
}

.hero-hidden .hero-text,
.hero-hidden .hero-button,
.hero-hidden .hero-socials,
.hero-hidden .hero-scroll-arrow {
    display: none !important;
}

/* Ensure header works well in header-only mode */
.hero-hidden .header {
    position: relative !important;
    top: 0 !important;
}

/* Additional Elementor container overrides for full-width */
.elementor-section .elementor-container,
.elementor-container {
    max-width: none !important;
}