/*
---------------------------------------------------------------------------------
 FONT FACE DECLARATIONS
---------------------------------------------------------------------------------
*/

/* BYekan Font */
@font-face {
    font-family: 'BYekan'; /* This is the name you'll use in your CSS */
    src: url('../fonts/BYekan.eot'); /* IE9 Compat Modes */
    src: url('../fonts/BYekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/BYekan.woff') format('woff'), /* Modern Browsers */
    url('../fonts/BYekan.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal; /* Assuming these are normal weight, adjust if you have bold/light files */
    font-style: normal;  /* Assuming these are normal style, adjust for italic files */
}

/* BKoodak Font */
@font-face {
    font-family: 'BKoodak'; /* This is the name you'll use in your CSS */
    src: url('../fonts/bkoodak.eot'); /* IE9 Compat Modes - assuming lowercase 'bkoodak' for filename */
    src: url('../fonts/bkoodak.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/bkoodak.woff') format('woff'), /* Modern Browsers */
    url('../fonts/bkoodak.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

/*
---------------------------------------------------------------------------------
 END OF FONT FACE DECLARATIONS
---------------------------------------------------------------------------------
*/


/*
---------------------------------------------------------------------------------
 BODY STYLES (including background image)
---------------------------------------------------------------------------------
*/

body {
    /* If you already have a body rule, add/merge these properties into it */
    /* ... any existing body styles like font-family, margin, etc. ... */

    background-image: url('../sky.jpg'); /* Path to your sky image */
    background-color: #e0f2f7; /* Fallback color if the image doesn't load or while it's loading (a light sky blue) */
    background-repeat: no-repeat;   /* Prevents the image from tiling */
    background-size: cover;         /* Scales the image to cover the entire background area, cropping if necessary */
    background-position: center center; /* Centers the image in the viewport */
    background-attachment: fixed;   /* Keeps the background image fixed as the user scrolls (creates a parallax effect) */

    /* Ensure the body takes at least the full height of the viewport for the background to be fully visible */
    min-height: 100vh;
    margin: 0; /* It's common to reset body margin */

    /* Your existing font-family for the body can remain here */
    /* font-family: 'BYekan', 'BKoodak', tahoma, Arial, sans-serif; */
}

/*
---------------------------------------------------------------------------------
 END OF BODY STYLES
---------------------------------------------------------------------------------
*/





/* Updated styles for #chevron_inside */
#chevron_inside {
    font-family: 'BYekan', tahoma, Arial, sans-serif;
    font-size: 16px;
    direction: rtl;
    line-height: 1.6;
    background-color: transparent; /* 3. Box is now transparent */
    padding: 25px 20px;
    margin-top: 20px;
    margin-bottom: 30px;
    /* 1. Eliminated the top dark blue border (border-top rule removed) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); /* 2. Added black shadow effect (adjust alpha for intensity) */
    border-radius: 8px;
    text-align: center;
    overflow: hidden; /* Important if content inside has backgrounds that shouldn't bleed out with rounded corners */
}

/* Other styles for content within #chevron_inside (like #drname, #drpersonalphoto, .doctor-details)
   would generally remain the same, but ensure they have their own backgrounds if needed,
   or that their text colors have enough contrast against the page background
   that will now show through #chevron_inside. */

/* Example: If text becomes hard to read, you might give content blocks a very subtle background: */
/*
#chevron_inside .doctor-details,
#chevron_inside #drpersonalphoto h2 {
    text-shadow: 0 0 5px rgba(255,255,255,0.5); /* Optional: light text shadow for readability if bg is busy */
/* } */




/*
---------------------------------------------------------------------------------
 ARTICLE BODY CONTAINER STYLES
---------------------------------------------------------------------------------
*/

.body-of-articles {
    background-color: #ffffff; /* White background */
    width: 80%;                /* Takes up 80% of its parent container's width */
    max-width: 1100px;         /* A common max-width for readability on large screens (adjust as needed) */
    margin-bottom: 40px;       /* Space below this container */
    margin-left: auto;         /* These two lines center the block horizontally */
    margin-right: auto;
    padding: 30px 40px;        /* Inner spacing: 30px top/bottom, 40px left/right (adjust as needed) */
    border-radius: 0 px;        /* Slightly rounded corners for a softer look */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* A subtle shadow to make it "pop" a bit */
    box-sizing: border-box;    /* Ensures padding and border don't increase the defined width */
    direction: rtl;            /* Assuming Right-to-Left content based on the HTML */
}

/* Optional: Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .body-of-articles {
        width: 95%; /* Use more width on smaller screens */
        padding: 20px 25px; /* Adjust padding for smaller screens */
        margin-top: 20px;
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .body-of-articles {
        width: 100%; /* Full width on very small screens */
        border-radius: 0; /* Optional: remove border-radius for edge-to-edge look */
        box-shadow: none; /* Optional: remove shadow on very small screens */
        padding: 15px 20px;
        margin-top: 15px;
        margin-bottom: 20px;
    }
}

/*
---------------------------------------------------------------------------------
 END OF ARTICLE BODY CONTAINER STYLES
---------------------------------------------------------------------------------
*/







/*
---------------------------------------------------------------------------------
 HEADING STYLES (H1, H2, H3)
---------------------------------------------------------------------------------
*/

h1 {
    font-size: 20px;
    font-family: 'BYekan', tahoma, Arial, sans-serif; /* Using BYekan with fallbacks */
    color: skyblue; /* Standard CSS color name for sky blue */
    /* You could also use a specific hex code, e.g., color: #87CEEB; */
}

h2 {
    font-size: 14px;
    font-family: 'BYekan', tahoma, Arial, sans-serif; /* Using BYekan with fallbacks */
    color: #DC143C; /* Crimson, a deep "rouge red" color */
    /* For a brighter red, you could use: color: #FF0000; or color: red; */
}

h3 {
    font-size: 12px;
    font-family: 'BKoodak', tahoma, Arial, sans-serif; /* Using BKoodak with fallbacks */
    color: darkgreen; /* Standard CSS color name for dark green */
    /* You could also use a specific hex code, e.g., color: #006400; */
}

/*
---------------------------------------------------------------------------------
 END OF HEADING STYLES
---------------------------------------------------------------------------------
*/


/*
---------------------------------------------------------------------------------
 RESPONSIVE IMAGE STYLES
---------------------------------------------------------------------------------
*/

.responsive-image-container img {
    max-width: 100%; /* Ensures the image never gets wider than its container */
    height: auto;    /* Maintains the image's aspect ratio when it scales */
    display: block;  /* Optional: Can help prevent extra space below the image
                       and allows for margin: auto if you want to center a block image
                       that is smaller than its container.
                       Given text-align:center on parent, this might not be strictly needed for centering. */
    margin-left: auto;  /* Added: Centers the block element horizontally */
    margin-right: auto; /* Added: Centers the block element horizontally */

}


.responsive-image-container {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  max-width: 100%;
}