/* 1.  تصفير الهوامش الافتراضية للمتصفح فقط */
* {
    margin: 10px;
    padding: 0;
    box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
		margin: 0 !important;
        padding: 0 !important;
        width: 100%;
}

body {
    font-family: 'Nunito', system-ui, sans-serif;
    background-color: #fff; /* اختياري: لون خلفية خفيف لرؤية الحاوية بوضوح */
	overflow-x: hidden;
	margin: 0 !important;
        padding: 0 !important;
        width: 100%;
}


.download-button {
    /* 1. Colors & Background */
    background-color: #6d9f8c; /* This is the specific green from the image */
    color: #FFFFFF;            /* Pure white text and icon */
    border: none;              /* Removes default browser border */
    
    /* 2. Shape & Dimensions */
    border-radius: 12px;       /* Match the rounded corners */
    padding: 16px 30px;        /* Spacing inside the button (Top/Bottom, Left/Right) */
    
    /* 3. Typography */
    font-family: 'Nunito', system-ui, sans-serif; /* A clean, modern sans-serif like the image */
    font-weight: 600;          /* Semibold text */
    text-transform: uppercase; /* Match 'DOWNLOAD THE REPORT' caps */
    letter-spacing: 0.5px;      /* Slight spacing between letters */
    font-size: 20px;           /* Base font size */
    
    /* 4. Layout for Text + Icon */
    display: inline-flex;      /* Use flexbox to align text and icon horizontally */
    align-items: center;       /* Center them vertically relative to each other */
    justify-content: center;   /* Center everything horizontally within the button */
    gap: 15px;                 /* Match the specific space between text and icon */
    
    /* 5. Interactivity */
    cursor: pointer;           /* Shows the hand icon on hover */
    text-decoration: none;      /* Important if using <a> tag, removes underline */
    transition: all 0.3s ease; /* Smooth hover transition */
}

/* Optional: Subtle hover effect for fibral.org */
.download-button:hover {
    background-color: #5d8e7d; /* Slightly darker green on hover */
    transform: translateY(-2px); /* Lifts the button slightly */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds a very soft shadow */
}

/* 2. إنشاء الحاوية التي ستضم محتوى الصفحة */
.main-container {
    width: 95%;            /* العرض المطلوب */
    max-width: 95%;     /* اختياري: لمنع الصفحة من التمدد بشكل مبالغ فيه في الشاشات العملاقة */
    margin: 0 auto;        /* السحر هنا: 0 للأعلى والأسفل، و auto لليمين واليسار للتوسيط */
    background-color: #fff; /* اختياري: لون خلفية المحتوى */
    padding: 20px;         /* مسافة داخلية حتى لا يلتصق النص بحواف الـ 80% */
    /*min-height: 100vh;*/     /* لتأخذ الحاوية طول الشاشة بالكامل */
	           /* العرض المطلوب */
    margin-left: auto !important;  /* دفع من اليسار تلقائياً */
    margin-right: auto !important; /* دفع من اليمين تلقائياً */
    display: block;       /* لضمان أن العنصر يأخذ سطراً كاملاً */
    
     اختياري: لإظهار الحدود أثناء التنسيق 
    border: 1px solid #000;
}

img {
    border-radius: 15px; /* يمكنك زيادة أو تقليل الرقم حسب الرغبة */
    /* لضمان عدم خروج الصورة عن حدود الانحناء في بعض المتصفحات القديمة */
    overflow: hidden; 
}

.logo img {
    border-radius: 0 !important;
	display: block;
    margin-left: auto;
    margin-right: 0;
}

/* 1. Global Variables & Root */
:root {
    /* Font Stack */
    --primary-font: 'Nunito', system-ui, -apple-system, sans-serif;
    
    /* Font Weights */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-bold: 700;
}

/* 2. Typography Reset */
body {
    font-family: var(--primary-font);
    font-size: 20px;
	font-weight: 500;
    line-height: 1.6;
    color: #474F5A;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin-bottom: 1rem;
}



.stat-box {
    /* 1. Colors & Background */
    background-color: #b8ded3; /* The light mint green from your image */
    color: #444f51;            /* Dark slate gray for the text */
    
    /* 2. Shape & Spacing */
    padding: 25px;
    border-radius: 12px;
    display: block;            /* Ensures it fills the cell width */
    margin: 15px 0;            /* Adds space above and below the box */
    
    /* 3. The 3D Shadow Effect (Left Side) */
    border-left: 6px solid #8ebba9; /* The darker green vertical stripe */
    box-shadow: -4px 0px 0px 0px rgba(0,0,0,0.05); /* Optional: extra depth */
    
    /* 4. Typography */
    font-family: 'Open Sans', sans-serif;
    line-height: 1.4;
}

.stat-box .small-text {
    font-size: 22px;
    display: block;
    margin-bottom: 10px;
}

.stat-box .big-number {
    font-size: 53px;
    font-weight: 800;
    display: block;
    color: #333f41; /* Darker tone for emphasis */
}

.stat-box .year-text {
    font-size: 28px;
    font-weight: 400;
    display: block;
}


<style>
    /* 1. The Container - Setup the 2 Columns */
    .fibral-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* This creates two equal columns */
        gap: 20px;                     /* Space between the boxes */
        padding: 20px;
    }

    /* 2. The Individual Box */
    .fibral-card {
        background-color: #b8ded3;      /* Match your mint green image */
        border-radius: 10px;
        padding: 25px;
        display: flex;                  /* Keeps number and text side-by-side */
        align-items: flex-start;        /* Aligns number to the top of the text */
        box-sizing: border-box;
    }

    /* 3. The Number Circle */
    .card-number {
        background-color: #ffffff;
        color: #444f51;
        width: 35px;
        height: 35px;
        min-width: 35px;                /* Prevents circle from squeezing */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* 4. The Content Text */
    .card-text {
        color: #444f51;
        font-size: 19px;
        line-height: 1.6;
        font-family: 'Nunito', system-ui, sans-serif;
    }

    /* 5. Mobile Parameter Condition */
    @media (max-width: 767px) {
        .fibral-grid {
            grid-template-columns: 1fr; /* Switch to 1 column on mobile */
        }
    }
</style>


<style>
    .fibral-header {
        background-color: #ffffff;
        padding: 0px 0;
        width: 90%;
        border-bottom: 1px solid #f0f0f0;
    }

    .header-container {
        max-width: 95%;
        margin: 0 auto;
        display: flex;         /* Use Flexbox */
        align-items: center;   /* Center items vertically */
        justify-content: space-between; /* Pushes logo to left, nav to right */
        padding: 0 0 0 0px;
    }

  /*  .logo img {
        height: 60px;          /* Adjust based on your logo file */
    }*/

    .main-navigation ul {
    display: flex;
    list-style: none;
    /* CHANGE THIS VALUE: Lowering it from 25px to 12px or 15px */
    gap: 1px !important; 
    margin: 0;
    padding: 0;
}

.main-navigation a {
    /* The second number (10px) controls the left/right space */
    padding: 0px 0px !important; 
    text-decoration: none;
    display: block;
}

    .main-navigation a {
        text-decoration: none;
        color: #444f51;        /* Dark gray text */
        font-weight: 600;      /* Bold like the image */
        font-size: 12px;
        letter-spacing: 0.5px;
        font-family: sans-serif;
        transition: color 0.3s ease;
    }

    .main-navigation a:hover {
        color: #6d9f8c;        /* Use your specific green on hover */
    }

    /* Mobile view: Stack items or hide menu */
    @media (max-width: 992px) {
        .main-navigation ul {
            display: none;     /* Standard practice is to hide menu for a 'hamburger' icon */
        }
    }
</style>




.zoom-window-container {
    width: 99%;
    height: 600px; /* Adjust height of the image area */
    margin: 30px auto;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    /* This creates the 'window' effect */
    clip-path: inset(0); 
}


.fixed-zoom-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    /* Starting zoom level */
    transform: scale(1);
    will-change: transform;
}


.fixed-banner {
    width: 99%;
    height: 550px;
    margin: 20px auto;
    background-image: url('../images/1.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%; /* Important: Must be a percentage for the script to work */
    border-radius: 15px;
    position: relative;
    z-index: 1;
    /* transition: background-size 0.1s; <--- REMOVE OR COMMENT OUT THIS LINE */
}
/* Ensure your white content areas cover the image as they scroll up */


.main-container {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
}


#mainTitle, #subTitle {
    transition: font-size 0.1s ease-out;
    line-height: 1.2;
    /* Prevents the layout from shifting too much as font shrinks */
    display: block; 
}







/* Container for the form to match the report aesthetic */
.report-download-container {
    background-color: #f4f7f6; /* Soft professional background */
    padding: 50px;
    border-radius: 20px;
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.form-header h3 {
    font-family: 'Nunito', sans-serif; /* Matches report style */
    color: #434c54; /* Dark grey from your report header */
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.form-header p {
    color: #6d7c83;
    margin-bottom: 25px;
}

/* Styling the Mailchimp Inputs */
#mc_embed_signup .mc-field-group input {
    width: 100%;
    padding: 18px;
    margin-bottom: 15px;
    border: 1px solid #d1d9dd;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Ensures padding doesn't break width */
}

#mc_embed_signup .mc-field-group input:focus {
    border-color: #6d9f8c; /* Your signature green focus */
    outline: none;
    box-shadow: 0 0 8px rgba(109, 159, 140, 0.2);
}

/* Styling the Submit Button */
#mc-embedded-subscribe.download-button {
    background-color: #6d9f8c; /* Green matching report themes */
    color: white;
    padding: 18px 40px;
    font-weight: bold;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: background 0.3s ease;
}

#mc-embedded-subscribe.download-button:hover {
    background-color: #5a8575;
}

/* Hide Mailchimp's default background and labels for a cleaner look */
#mc_embed_signup {
    background: transparent !important;
}

#mc_embed_signup label {
    display: none; /* Using placeholders instead for modern feel */
}