/* Global Variables */
:root {
    --primary-color: #FDB813;
    /* Yellow */
    --primary-hover: #e0a310;
    --bg-dark: #0a0a0a;
    --bg-card: #141414;
    --text-white: #ffffff;
    --text-gray: #b3b3b3;
    --font-heading: 'Cairo', sans-serif;
    --font-body: 'Cairo', sans-serif;
    --font-english: 'Oswald', sans-serif;
    --transition: all 0.3s ease;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font-body);
    scroll-padding-top: 100px;
    /* Fix for sticky header overlap */
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography Utility */
.highlight {
    color: var(--primary-color);
}

.highlight-line {
    position: relative;
    z-index: 1;
}

.highlight-line::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: var(--primary-color);
    z-index: -1;
    border-radius: 4px;
}

.stroke-text {
    -webkit-text-stroke: 1px var(--text-white);
    color: transparent;
}

.subtitle {
    display: block;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #000;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.btn-outline {
    border: 2px solid var(--text-white);
    color: var(--text-white);
}

.btn-outline:hover {
    background-color: var(--text-white);
    color: #000;
}

/* Navbar */
.navbar {
    background-color: rgba(10, 10, 10, 0.95);
    padding: 20px 0;
    position: relative;
    /* Scrolls with page */
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ... existing container/logo code ... */
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-english);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-white);
    letter-spacing: 1px;
}

.logo span {
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
}

/* Navigation Responsive Breakpoint - Show Hamburger earlier to avoid collision */
@media (max-width: 1100px) {
    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .navbar .btn-primary {
        display: none;
    }
}


/* Hero Section */
.hero {
    min-height: calc(100vh - 80px);
    /* Fill remaining screen height */
    padding-top: 50px;
    /* Standard spacing */
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    position: relative;
    background: radial-gradient(circle at top right, #1a1a1a 0%, #0a0a0a 60%);
}

.hero-container {
    display: flex;
    flex-direction: column;
    /* Stack badge on top */
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    padding-top: 100px;
    /* More space for fixed header */
}

.hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.hero-content {
    flex: 1;
    z-index: 2;
}

.hero-content h1 {
    font-size: 4rem;
    line-height: 1.4;
    /* Increased line height to prevent text overlap */
    margin-bottom: 25px;
    font-weight: 900;
    margin-top: 20px;
}

.hero-content p {
    color: var(--text-gray);
    font-size: 1.1rem;
    max-width: 500px;
    margin-bottom: 30px;
}

.hero-btns {
    display: flex;
    gap: 15px;
}

.hero-image {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Stack badge and image */
    align-items: flex-end;
    /* Align to right side */
    position: relative;
}

.image-wrapper-hero {
    width: 450px;
    height: 550px;
    border-radius: 20px;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 30px rgba(253, 184, 19, 0.1);
    overflow: hidden;
}

.image-wrapper-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Focus on face/upper body */
}

@media (max-width: 992px) {
    .image-wrapper-hero {
        width: 100%;
        max-width: 400px;
        height: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .image-wrapper-hero {
        height: 400px;
    }

    .image-wrapper-hero {
        height: 400px;
    }
}

/* Welcome Badge Styling (Centered with Side Lines) */
.welcome-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.badge-content {
    text-align: center;
}

.welcome-badge h4 {
    color: var(--text-white);
    font-size: 1.2rem;
    margin: 5px 0;
    font-weight: 600;
}

.welcome-badge p {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.5px;
}

.line-vertical {
    width: 150px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
}

@media (max-width: 992px) {
    .hero-main {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        order: 3;
        /* Content appears third on mobile */
    }

    .hero-image {
        align-items: center;
        width: 100%;
        justify-content: center;
        margin-top: 30px;
        order: 2;
        /* Image appears second on mobile */
    }

    .hero-container {
        padding-top: 60px;
    }

    .welcome-badge {
        margin-bottom: 40px;
        order: 1;
        /* Welcome badge appears first on mobile */
    }

    .line-vertical {
        width: 100px;
    }
}

@media (max-width: 768px) {
    .welcome-badge {
        gap: 20px;
        margin-bottom: 30px;
    }

    .welcome-badge h4 {
        font-size: 1rem;
    }

    .welcome-badge p {
        font-size: 1.4rem;
    }

    .line-vertical {
        width: 60px;
        height: 2px;
    }
}

@media (max-width: 576px) {
    .welcome-badge {
        gap: 15px;
        margin-bottom: 25px;
    }

    .welcome-badge h4 {
        font-size: 0.9rem;
    }

    .welcome-badge p {
        font-size: 1.2rem;
    }

    .line-vertical {
        width: 40px;
    }
}

@media (max-width: 480px) {
    .welcome-badge {
        flex-direction: column;
        gap: 10px;
    }

    .line-vertical {
        width: 80px;
        height: 2px;
    }

    .welcome-badge h4 {
        font-size: 0.85rem;
    }

    .welcome-badge p {
        font-size: 1.1rem;
    }
}

/* Section Common */
.section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

/* About Section */
.about {
    background-color: #0a0a0a;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-content p {
    font-size: 1.2rem;
    color: var(--text-gray);
}

/* Certificates Section */
.certificates {
    background-color: #0e0e0e;
}

.certificates-container {
    display: flex;
    align-items: center;
    gap: 60px;
    /* Adjusted gap */
    justify-content: center;
}

.cert-image {
    flex: 0 0 auto;
    /* Stop image from growing too much */
}

.cert-frame {
    border: 2px solid var(--primary-color);
    padding: 8px;
    border-radius: 10px;
    display: inline-block;
    max-width: 350px;
    /* Constrain text width if needed */
}

.cert-img-real {
    width: 100%;
    max-width: 350px;
    /* Explicitly resize the image */
    height: auto;
    border-radius: 5px;
    display: block;
}

.cert-text {
    flex: 1;
}

.cert-text h3 {
    font-size: 1.5rem;
    margin-top: 10px;
    margin-bottom: 20px;
}

.features-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.features-list li i {
    color: var(--primary-color);
    background: rgba(253, 184, 19, 0.1);
    padding: 5px;
    border-radius: 50%;
    font-size: 0.8rem;
}

/* Packages Section */
.packages {
    background-color: var(--bg-dark);
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.package-card {
    background-color: var(--bg-card);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.package-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.package-card.featured {
    border-color: var(--primary-color);
    background: radial-gradient(circle at top, rgba(253, 184, 19, 0.05), var(--bg-card));
}

.badge {
    position: absolute;
    top: 20px;
    right: -30px;
    background-color: var(--primary-color);
    color: #000;
    padding: 5px 40px;
    transform: rotate(45deg);
    font-weight: 700;
    font-size: 0.8rem;
}

.package-card h3 {
    font-size: 1.4rem;
    margin-bottom: 20px;
    color: var(--text-white);
}

.price {
    font-family: var(--font-english);
    font-size: 2rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 10px;
}

.currency {
    font-size: 1rem;
    font-family: var(--font-body);
}

.package-desc {
    color: var (--text-gray);
    font-size: 0.9rem;
    margin-bottom: 25px;
    min-height: 50px;
}

.package-features {
    text-align: right;
    margin-bottom: 30px;
}

.package-features li {
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #ddd;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.package-features li i {
    color: var(--primary-color);
    margin-top: 5px;
}

.full-width {
    width: 100%;
}

/* Footer */
.footer {
    background-color: #000;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 50px;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-logo {
    font-family: var(--font-english);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-white);
}

.footer-logo span {
    color: var(--primary-color);
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--primary-color);
    color: #000;
}

.copyright {
    color: var(--text-gray);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 992px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        padding-top: 50px;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-container {
        flex-direction: column-reverse;
        /* Text on top usually, but let's check user preference. Standard is text top. Current code has image right, text left. On mobile usually Image Top or Text Top. Let's keep Text Top for now as it has buttons. */
        text-align: center;
        padding-top: 30px;
    }

    .hero-image {
        width: 100%;
        justify-content: center;
        margin-top: 40px;
    }

    .hero-btns {
        justify-content: center;
    }

    .hero-image {
        margin-top: 50px;
        justify-content: center;
    }

    .certificates-container {
        flex-direction: column;
    }
}


@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .section {
        padding: 50px 0;
    }

    .certificates-container {
        gap: 40px;
    }

    .cert-frame,
    .cert-img-real {
        max-width: 100%;
        /* Full width on mobile */
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .btn {
        width: 100%;
        /* Full width buttons on very small screens for better UX */
        margin-bottom: 10px;
        text-align: center;
    }

    .hero-btns {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }

    .packages-grid {
        grid-template-columns: 1fr;
    }

    .badge {
        right: -35px;
        top: 15px;
    }
}

/* Results/Carousel Section */
.results {
    background-color: #0e0e0e;
}

.carousel-container {
    max-width: 800px;
    position: relative;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(253, 184, 19, 0.1);
    background: #000;
    /* Fallback */
}

.carousel-slide {
    display: none;
    width: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 600px;
    /* Fixed height for consistency */
    display: block;
    object-fit: cover;
    /* Fills the box, cropping edges if necessary to avoid black bars */
    object-position: top center;
    /* Focus on the top/center (usually faces) */
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* Dots */
.carousel-dots {
    text-align: center;
    padding: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active-dot,
.dot:hover {
    background-color: var(--primary-color);
}

/* Mobile check */
@media (max-width: 768px) {
    .carousel-container {
        width: 100%;
    }

    .carousel-slide {
        aspect-ratio: 4/5;
        /* Taller aspect ratio for mobile screens if needed, or keep 16/9 */
        aspect-ratio: auto;
    }
}

/* Reviews Section */
.reviews {
    background-color: var(--bg-dark);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.review-card {
    background-color: var(--bg-card);
    padding: 30px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: var(--transition);
}

.review-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-5px);
}

.quote-icon {
    font-size: 2rem;
    color: rgba(253, 184, 19, 0.2);
    position: absolute;
    top: 20px;
    right: 20px;
}

.stars {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.review-text {
    font-size: 1.1rem;
    margin-bottom: 25px;
    font-style: italic;
    min-height: 80px;
    color: #ddd;
}

.reviewer-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Right align for RTL context if needed, or flex-end implies left in LTR but we are RTL */
    /* Since body is RTL, flex-end is LEFT. But details should be right. */
    /* Let's verify layout. We want Avatar Left, Text Right. */
    gap: 15px;
}

/* In RTL:
   div uses flex. 
   Avatar is last child.
   Details is first child.
   We want Avatar on the Left (end of line in RTL? No, start is Right).
   In RTL: Start=Right, End=Left.
   So flex-direction: row; means 1st item is Right. 
   We put Details first (Right), Avatar last (Left).
   So alignbox should be OK.
*/


.reviewer-avatar {
    width: 50px;
    height: 50px;
    background-color: rgba(253, 184, 19, 0.1);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    border: 1px solid var(--primary-color);
}

.reviewer-details {
    text-align: left;
    /* Name/Title align */
}

/* Adjust for RTL specifically if needed */
/* Since dir="rtl" is on html:
   'text-align: left' aligns to Left.
   But we usually want Arabic text aligned Right.
   So let's use text-align: right (default).
*/
.reviewer-details {
    text-align: left;
    /* Keep names next to avatar? No, usually right aligned in Arabic context. */
    text-align: left;
    /* Screenshot shows name next to avatar. If Avatar is Left, Name should be Right of Avatar (so Left aligned relative to card? No). */
    /* Let's look at screenshot. 
       Text is Right Aligned. 
       Avatar is on the Right or Left? 
       Screenshot: "Sarah Ali" title below. Avatar 'Seen' circle is on the Right.
       Wait, let me look closer at screenshot.
       Review 1: "Ahmed Mohamed". Circle 'Alif' is on the Right? No, looks like Left side of the text block?
       Actually, standard Arabic UI: Avatar on Right, Text on Left of Avatar.
       Let's stick to standard flex with RTL.
       Items: Details, Avatar.
       RTL: Details (Right), Avatar (Left). This matches "Avatar on Left".
       Screenshot seems to have Avatar on the LEFT of the name.
       So: [Name] [Avatar] <- This is RTL default if Avatar is 2nd child.
       Wait, RTL flows Right to Left. 
       Child 1 (Right), Child 2 (Left).
       So if I want Avatar on Left, it should be Child 2.
       Correct.
       Text Alignment: The review text is Right aligned. The Name is Right Aligned (next to Avatar?).
       Let's try standard and see.
    */
    text-align: left;
}

/* Creating helper to append */
/* Contact Section */
.contact {
    background-color: #0e0e0e;
}

.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--bg-card);
    padding: 40px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
    flex: 1;
    text-align: right;
    /* RTL labels */
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-white);
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

@media (max-width: 768px) {
    .contact-form-container {
        padding: 20px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* 3D Logo Animation */
.logo-3d {
    display: inline-block;
    color: var(--primary-color);
    margin-left: 10px;
    /* Space between icon and text */
    /* animation: rotate3d 5s infinite linear; - Removed as requested */
    transform-style: preserve-3d;
}

@keyframes rotate3d {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }

    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

/* Mobile Carousel Fix */
@media (max-width: 768px) {
    .carousel-container {
        max-width: 100%;
        border-radius: 0;
        /* Full width on mobile looks better without rounded corners sometimes, or keep them. Let's keep 15px but maybe reduce border width */
        border-left: none;
        border-right: none;
        box-shadow: none;
        background: transparent;
        /* Remove black fallback if image covers */
    }

    .carousel-slide img {
        height: auto !important;
        /* Let image define height */
        max-height: 500px;
        /* Limit height */
        object-fit: contain !important;
        /* Ensure FULL image is visible. On mobile, seeing the text/details in transformation pics is crucial. */
        border-radius: 10px;
    }

    /* Adjust dots position if image height varies */
    .carousel-dots {
        position: relative;
        background: transparent;
        margin-top: -10px;
        padding-bottom: 20px;
    }
}