/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ============================
   HIDO FONTS - LOCAL IMPORT
============================ */

/* Floating header styling */
.header-inner.container {
    margin-top: 30px;
    /*  max-width: 950px;
    border-radius: 50px;
    padding: 0px 30px;
    background: rgba(255,255,255,.54);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); */

    --border-bottom-width: 1px;
    --border-color: rgba(255, 255, 255, 0.7);
    --border-left-width: 1px;
    --border-right-width: 1px;
    --border-style: solid;
    --border-top-width: 1px;
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.88);
    height: 100%;
    border-radius: 56px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 1px 0px,
        rgba(149, 184, 250, 0.1) 0px 6px 12px 0px,
        rgba(0, 0, 0, 0.08) 0px 2px 4px 0px,
        rgb(255, 255, 255) 0px 0px 1px 0px inset,
        rgb(255, 255, 255) 0px 1px 0px 0px inset;
    opacity: 1;
}
/* Header padding for Mobile + Tablet */
.header-main {
    /* padding: 0px 15px; */
}
/* Remove header shadow */
/* .header-wrapper.stuck,
.header-shadow .header-wrapper,
.layout-shadow #wrapper {
    -webkit-box-shadow: none;
    box-shadow: none;
}*/
@font-face {
    font-family: 'HTRakik';
    src: url('fonts/HTRakik-Light_2.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HTRakik';
    src: url('fonts/HTRakik-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ============================
   APPLY HIDO FONT TO WEBSITE
============================ */

body {
    font-family: 'HTRakik', sans-serif !important;
}

/* العناوين */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'HTRakik', sans-serif !important;
    font-weight: 500;
}

/* عناصر شائعة */
p,
span,
a,
li,
input,
button,
textarea {
    font-family: 'HTRakik', sans-serif !important;
}
:root {
    --font-family-base: 'HTRakik', sans-serif;
    --font-family-alt: 'HTRakik', sans-serif;
}

/* ===============================
   HIDO HERO SECTION STYLE
   =============================== */

.hero-hido-section {
    background-color: #ffffff;
    background-color: #f9f9f9;
    background-color: #f5f3ef;
    background-color: #faf7f4;

    direction: rtl;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* النصوص */
.hero-hido-section h1 {
    color: #1a1a1a;
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: 700;
}
.hero-hido-section .text-hido {
    color: #16a34a; /* اللون الأخضر من شعار هايدو */
}
.hero-hido-section p {
    color: #555;
    font-size: 1.15rem;
}

/* الأزرار */
.btn-hido-primary {
    background-color: #16a34a;
    color: #fff !important;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    transition: 0.3s ease;
}
.btn-hido-primary:hover {
    background-color: #0d7a38;
}

.btn-hido-outline {
    background-color: transparent;
    color: #16a34a !important;
    border: 2px solid #16a34a;
    border-radius: 12px;
    font-weight: 600;
    transition: 0.3s ease;
}
.btn-hido-outline:hover {
    background-color: #16a34a;
    color: #fff !important;
}

/* أزرار المتاجر */
.store-buttons {
    margin-top: 1.5rem;
}

.store-btn {
    display: inline-block;
    width: 180px; /* عرض موحد */
    height: 60px; /* ارتفاع موحد */
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.store-btn:hover {
    transform: scale(1.05);
}

.store-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* صورة التطبيق */
.hero-hido-img {
    max-width: 120% !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
    transition: transform 0.4s ease;
}
.hero-hido-img:hover {
    transform: scale(1.03);
}

/* تجاوب الموبايل */
@media (max-width: 767px) {
    .hero-hido-section {
        text-align: center;
        padding: 60px 0;
    }
    .hero-hido-section h1 {
        font-size: 1.8rem;
    }
    .hero-hido-img {
        max-width: 300px;
        margin-top: 30px;
    }
    .store-btn {
        width: 150px;
        height: 50px;
    }
}

/* ===============================
   SECTION: WHY HIDO
   =============================== */
.why-hido-section {
    background-color: #f9f9f9;
    direction: rtl;
    padding-top: 100px;
    padding-bottom: 100px;
}

.why-hido-section h2 {
    font-size: 2rem;
    color: #1a1a1a;
}

.why-hido-section .text-hido {
    color: #16a34a;
}

/* البطاقات */
.feature-box {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* الأيقونات */
.feature-icon {
    font-size: 2.8rem;
    color: #16a34a;
    transition: color 0.3s ease;
}
.feature-box:hover .feature-icon {
    color: #0d7a38;
}

/* تجاوب */
@media (max-width: 767px) {
    .why-hido-section h2 {
        font-size: 1.6rem;
    }
    .feature-box {
        padding: 1.5rem;
    }
}
/* ===============================
   HOW HIDO WORKS - IMAGE STEPS
   =============================== */
.how-hido-steps {
    background-color: #ffffff;
    direction: rtl;
}

.how-hido-steps h2 {
    color: #1a1a1a;
}
.text-hido {
    color: #16a34a;
}

.step-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    height: 320px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.step-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.step-card:hover img {
    transform: scale(1.05);
}

.step-card .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
    z-index: 1;
}

.step-content {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
    z-index: 2;
}

.step-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.step-content p {
    font-size: 0.9rem;
    color: #e6e6e6;
    margin: 0;
}

/* Hover effect */
.step-card:hover .overlay {
    background: linear-gradient(
        to top,
        rgba(22, 163, 74, 0.85),
        rgba(0, 0, 0, 0.2)
    );
}

/* Responsive */
@media (max-width: 767px) {
    .step-card {
        height: 250px;
    }
    .step-content h3 {
        font-size: 1rem;
    }
}
/* ===============================
   HIDO TESTIMONIALS SECTION
   =============================== */
.hido-testimonials {
    background-color: #f9f9f9;
    direction: rtl;
}

.hido-testimonials h2 {
    color: #1a1a1a;
}
.text-hido {
    color: #16a34a;
}

.testimonial-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e6e6e6;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.testimonial-text {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.7;
}

.testimonial-author h6 {
    color: #111;
}

.testimonial-author small {
    font-size: 0.85rem;
    color: #666;
}
/* ===============================
   HIDO CALL TO ACTION SECTION
   =============================== */
.hido-cta-section {
    background: linear-gradient(135deg, #16a34a 0%, #0d7a38 100%);
    color: #fff;
    direction: rtl;
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
}

.hido-cta-section h2 {
    font-size: 2rem;
    color: #fff;
}

.hido-cta-section p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
}

.hido-cta-section .cta-content {
    position: relative;
    z-index: 2;
}

/* أزرار المتاجر */
.hido-cta-section .store-btn {
    display: inline-block;
    width: 180px;
    height: 60px;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.hido-cta-section .store-btn:hover {
    transform: scale(1.05);
}

.hido-cta-section .store-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* تأثير خفيف في الخلفية */
.hido-cta-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 1;
}

.hido-cta-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    z-index: 1;
}

/* تجاوب */
@media (max-width: 767px) {
    .hido-cta-section {
        padding: 70px 20px;
    }
    .hido-cta-section h2 {
        font-size: 1.6rem;
    }
    .hido-cta-section .store-btn {
        width: 150px;
        height: 50px;
    }
}
/* ===============================
   HIDO INSPIRATION BAR
   =============================== */
.hido-inspire-bar {
    background: linear-gradient(90deg, #16a34a 0%, #0e7033 100%);
    color: #fff;
    text-align: center;
    font-family: 'Tajawal', sans-serif;
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.hido-inspire-bar p {
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}

.hido-inspire-bar span {
    color: #fff;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* حركة خفيفة (اختياري) */
@keyframes waveMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 200% 0;
    }
}
.hido-inspire-bar {
    background-size: 200% auto;
    animation: waveMove 5s linear infinite alternate;
}

/* ======================================
   HIDO Experience Grid - المرحلة 2
   ====================================== */

.hido-experience-grid {
    text-align: center;
    direction: rtl;
    /* padding: 80px 0; */
    background-color: #fff;
}

.hido-experience-grid h2 {
    color: #16a34a;
    font-weight: 800;
    margin-bottom: 15px;
}

.hido-experience-grid p {
    color: #666;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.8;
}

/* شبكة الصور */
.experience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    justify-items: center;
    align-items: center;
}

/* الصور */
.experience-grid img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* حركة عند التمرير */
.experience-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* موبايل */
@media (max-width: 768px) {
    .experience-grid img {
        height: 200px;
    }
}
/* ======================================
   HIDO Image Preview - الإصدار المحسن
   ====================================== */

/* خلفية المعاينة */
.image-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 9999;
    padding-top: 80px; /* لإتاحة مساحة للهيدر */
    padding-bottom: 40px;
    box-sizing: border-box;
}

/* عند التفعيل */
.image-preview-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* الصورة */
.image-preview-overlay img {
    max-width: 90vw;
    max-height: calc(85vh - 80px); /* أقل ارتفاع لتفادي تجاوز الهيدر */
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
    transition: transform 0.35s ease;
}

/* تكبير عند النقر */
.image-preview-overlay img.zoomed {
    transform: scale(1.5);
    cursor: zoom-out;
}

/* زر الإغلاق */
.close-preview {
    position: fixed;
    top: 20px;
    right: 25px;
    font-size: 2.2rem;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10000;
}

.close-preview:hover {
    background: #16a34a;
    transform: scale(1.1);
}

/* موبايل */
@media (max-width: 768px) {
    .close-preview {
        top: 10px;
        right: 10px;
        font-size: 1.8rem;
        width: 45px;
        height: 45px;
    }

    .image-preview-overlay img {
        max-width: 95vw;
        max-height: 75vh;
    }
}

/* ===================================================
   قسم المدونة في UX Builder - Hido Blog Section
   =================================================== */

.hido-blog {
    background-color: #fafafa;
    direction: rtl;
    text-align: right;
}

.hido-blog .text-hido {
    color: var(--hido-green, #16a34a);
}

.hido-blog .blog-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hido-blog .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.hido-blog .blog-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.hido-blog .btn-read {
    color: var(--hido-green, #16a34a);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.hido-blog .btn-read:hover {
    color: #0e7130;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .hido-blog .blog-card img {
        height: 200px;
    }
}
/* ============================
   قسم شارك تجربتك - Hido Share
   ============================ */

.hido-share {
    background-color: #fffaf2; /* لون مائل للعاجي */
    text-align: center;
    direction: rtl;
    padding: 80px 0;
}

.hido-share .text-hido {
    color: var(--hido-green, #16a34a);
}

.hido-share .hashtag {
    font-size: 2.8rem;
    font-weight: 700;
    color: #16a34a;
    display: block;
    margin-top: 10px;
}

.hido-share h2 {
    font-size: 2.5rem;
    line-height: 1.4;
    color: #222;
}

.hido-share p {
    font-size: 1.1rem;
    color: #555;
}

@media (max-width: 768px) {
    .hido-share h2 {
        font-size: 2rem;
    }

    .hido-share .hashtag {
        font-size: 2.2rem;
    }

    .hido-share p {
        font-size: 1rem;
    }
}

/* ==============================
   Hero Section - Hido Story Page
   ============================== */

.hido-story-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
        url('https://hido.fayzar.com/wp-content/uploads/2025/12/story.webp')
            center/cover no-repeat;
    color: #fff;
    padding: 150px 0;
    text-align: center;
}

.hido-story-hero h1 {
    font-size: 2.8rem;
    line-height: 1.4;
    color: #fff;
}

.hido-story-hero .text-hido {
    color: #00c16a;
}

.hido-story-hero p {
    font-size: 1.2rem;
    color: #f0f0f0;
}

@media (max-width: 768px) {
    .hido-story-hero {
        padding: 100px 20px;
    }
    .hido-story-hero h1 {
        font-size: 2rem;
    }
}
/* ===========================
   Content Section - Hido Story
   =========================== */

.hido-story-content {
    background-color: #fff;
    color: #333;
    line-height: 2;
    text-align: right;
    direction: rtl;
}

.hido-story-content .text-hido {
    color: #16a34a;
}

.hido-story-content .story-text p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #444;
    transition: all 0.3s ease;
}

.hido-story-content .story-text p:hover {
    color: #16a34a;
    transform: translateX(-5px);
}

/* ==============================
   Vision Section - Hido Story
   ============================== */

.hido-story-vision {
    background: #f8fff8;
}

.hido-story-vision h3 {
    color: #222;
    font-size: 2rem;
}

.hido-story-vision p {
    font-size: 1.1rem;
    color: #555;
}

/* ===============================
   Hido Contact Section
================================= */

.hido-contact-section {
    background: linear-gradient(135deg, #f7faf7 0%, #ffffff 100%);
    color: #333;
}

.hido-contact-section .text-hido {
    color: #16a34a;
}

.contact-form {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}

.contact-form:focus-within {
    box-shadow: 0 0 20px rgba(22, 163, 74, 0.1);
}

.contact-form .form-control {
    border-radius: 8px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: #16a34a;
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.3);
}

.btn-hido {
    background-color: #16a34a;
    color: #fff;
    border-radius: 8px;
    padding: 10px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-hido:hover {
    background-color: #128a3f;
    color: #fff;
}

.btn-whatsapp {
    display: inline-block;
    background-color: #25d366;
    color: white;
    font-size: 1.1rem;
    padding: 10px 30px;
    border-radius: 50px;
    transition: background 0.3s ease, transform 0.2s ease;
}

.btn-whatsapp i {
    margin-left: 8px;
}

.btn-whatsapp:hover {
    background-color: #1ebe5c;
    transform: scale(1.05);
}

.contact-info {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.contact-info h4 {
    color: #16a34a;
    font-weight: 700;
}

.contact-map iframe {
    border-radius: 12px;
    filter: grayscale(0.1);
    transition: all 0.4s ease;
}

.contact-map iframe:hover {
    filter: grayscale(0);
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .contact-info {
        margin-top: 30px;
    }
}
/* ===================================
   قسم التجارب المشابهة - Related Posts
   =================================== */

.hido-related-posts {
    background-color: #f8fff8;
    direction: rtl;
    text-align: right;
}

.hido-related-posts .text-hido {
    color: #16a34a;
}

.related-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.related-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.related-card h5 {
    color: #222;
    font-weight: 700;
    font-size: 1.1rem;
}

.related-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

.related-card .btn-read {
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-card .btn-read:hover {
    color: #0e7130;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .related-card img {
        height: 200px;
    }
}
.hido-related-posts {
    background-color: #f8fff8;
    direction: rtl;
    text-align: right;
}

.hido-related-posts .text-hido {
    color: #16a34a;
}

.related-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.related-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.related-card h5 {
    color: #222;
    font-weight: 700;
    font-size: 1.1rem;
}

.related-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

.related-card .btn-read {
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-card .btn-read:hover {
    color: #0e7130;
    text-decoration: underline;
}
/* ============================================
   Hido Terms & Conditions Page
   ============================================ */

.hido-terms {
    background-color: #fafafa;
    color: #333;
    direction: rtl;
    text-align: right;
}

.hido-terms h2,
.hido-terms h4 {
    color: var(--hido-green, #16a34a);
}

.hido-terms .terms-content section {
    background: #fff;
    border-radius: 12px;
    padding: 25px 30px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.hido-terms .terms-content section:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.hido-terms ul {
    padding-right: 20px;
    list-style: '• ';
}

.hido-terms ul li {
    margin-bottom: 8px;
    color: #555;
}

@media (max-width: 768px) {
    .hido-terms .terms-content section {
        padding: 20px;
    }
}
/* ============================================
   Hido Privacy Policy Content
   ============================================ */
.hido-privacy {
    background-color: #fafafa;
    direction: rtl;
    text-align: right;
}

.hido-privacy h2,
.hido-privacy h4 {
    color: #16a34a;
}

.hido-privacy section {
    background: #fff;
    border-radius: 12px;
    padding: 25px 30px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hido-privacy section:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.hido-privacy ul {
    padding-right: 20px;
    list-style: '• ';
}

.hido-privacy ul li {
    margin-bottom: 8px;
    color: #555;
}

@media (max-width: 768px) {
    .hido-privacy section {
        padding: 20px;
    }
}

/* ===========================
   Home2 
   =========================== */