/* LTR base styles for OPET Website (English/French) */

/* Font Family Settings */
* { font-family: 'Tajawal', sans-serif; }
body, html { font-family: 'Tajawal', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Tajawal', sans-serif; font-weight: 700; }
p, span, div, a, li { font-family: 'Tajawal', sans-serif; }

/* Ensure LTR direction when html has dir=ltr */
html[dir="ltr"] { direction: ltr; }
html[dir="ltr"] body { text-align: left; }

/* General UI components (non-directional) */
.hero-section { background-image: url("../images/hero-bg.jpg"); background-size: cover; background-position: center; color: white; padding: 8rem 0; }
.card { background-color: white; border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 1.5rem; }
.btn-primary { background-color: #6B46C1; color: white; padding: 0.75rem 1.5rem; border-radius: 9999px; transition: background-color 0.3s ease; }
.btn-primary:hover { background-color: #805AD5; }

/* Lazy loading for images */
img[loading="lazy"] { opacity: 0; transition: opacity 0.3s ease-in-out; }
img[loading="lazy"].loaded { opacity: 1; }

/* Simple fade-in animation */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }

/* Helpers for flag icons */
.aspect-square { aspect-ratio: 1 / 1; }
.lang-flag img { display: inline-block; opacity: 1 !important; background-color: transparent; }