/*
===============================================
    RTL Styles for IRBIN PHARMA Landing Page
    
    This file contains all RTL (Right-to-Left) modifications
    without changing the original template files.
    
    All animations and effects are preserved!
===============================================
*/

/* ============================================
   GLOBAL RTL SETTINGS
============================================ */
body {
    direction: rtl;
    text-align: right;
}

/* Font for Arabic */
* {
    font-family: 'Tajawal', 'Cairo', 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================
   NAVIGATION
============================================ */
.navbar-nav {
    margin-right: auto !important;
    margin-left: 0 !important;
}

.navbar-nav .nav-item {
    margin-right: 0;
    margin-left: 25px;
}

.navbar-nav .nav-item:first-child {
    margin-left: 0;
}

.navbar-toggler {
    margin-left: auto;
    margin-right: 0;
}

/* ============================================
   HEADER HERO CONTENT
============================================ */
.header-hero-content h3,
.header-hero-content p {
    text-align: right;
}

.header-hero-content ul {
    padding-right: 0;
}

/* Fix fadeIn animations for RTL */
.fadeInLeftBig {
    animation-name: fadeInRightBig !important;
}

.fadeInRightBig {
    animation-name: fadeInLeftBig !important;
}

/* Custom animations to replace reversed ones */
@keyframes fadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ============================================
   HEADER SHAPES (Mirror positions)
============================================ */
.header-shape-1 {
    right: auto;
    left: 10%;
}

.header-shape-2 {
    left: auto;
    right: 0;
}

.shape.shape-1 {
    left: auto;
    right: 4%;
}

.shape.shape-2 {
    right: auto;
    left: 4%;
}

.shape.shape-3 {
    left: auto;
    right: 50%;
}

.shape.shape-4 {
    right: auto;
    left: 40%;
}

.shape.shape-5 {
    left: auto;
    right: 8%;
}

.shape.shape-6 {
    right: auto;
    left: 8%;
}

/* ============================================
   SERVICES SECTION
============================================ */
.services-area .section-title,
.services-content {
    text-align: center; /* Keep centered */
}

.services-icon {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================
   FEATURES SECTION
============================================ */
.single-features {
    direction: rtl;
}

.features-icon {
    margin-left: 25px;
    margin-right: 0;
}

.features-content {
    text-align: right;
}

.features-shape-1 {
    left: auto;
    right: 15%;
}

.features-shape-2 {
    right: auto;
    left: 0;
}

/* ============================================
   ABOUT SECTION
============================================ */
.about-content {
    text-align: right;
}

.about-shape {
    right: auto;
    left: -50px;
}

/* ============================================
   DOWNLOAD SECTION
============================================ */
.download-content {
    text-align: right;
}

.download-content ul {
    padding-right: 0;
}

.download-shape-1 {
    left: auto;
    right: 50px;
}

.download-shape-2 {
    right: auto;
    left: 0;
}

/* ============================================
   FOOTER
============================================ */
.footer-about,
.footer-link,
.footer-contact {
    text-align: right;
}

.footer-link ul {
    padding-right: 0;
}

.footer-contact ul {
    padding-right: 0;
}

.footer-about .social {
    padding-right: 0;
}

.footer-shape.shape-1 {
    left: auto;
    right: 5%;
}

.footer-shape.shape-2 {
    right: auto;
    left: 5%;
}

.footer-shape.shape-3 {
    left: auto;
    right: 15%;
}

.footer-shape.shape-4 {
    right: auto;
    left: 15%;
}

.footer-shape.shape-5 {
    left: auto;
    right: 45%;
}

.footer-shape.shape-6 {
    right: auto;
    left: 35%;
}

.footer-shape.shape-7 {
    left: auto;
    right: 25%;
}

.footer-shape.shape-8 {
    right: auto;
    left: 0;
}

/* ============================================
   SCREENSHOTS SLIDER
============================================ */
.swiper-container {
    direction: ltr; /* Keep slider direction LTR for proper function */
}

/* ============================================
   BUTTONS
============================================ */
.main-btn {
    text-align: center;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
============================================ */
@media (max-width: 767px) {
    .navbar-nav .nav-item {
        margin-left: 0;
        text-align: right;
    }
    
    .header-hero-content h3,
    .header-hero-content p {
        text-align: center;
    }
    
    .header-hero-content ul {
        justify-content: center;
    }
}

/* ============================================
   BACK TO TOP BUTTON
============================================ */
.back-to-top {
    right: auto;
    left: 30px;
}

/* ============================================
   CUSTOM COLORS - IRBIN PHARMA BRANDING
============================================ */
:root {
    --primary-green: #00B96B;
    --primary-blue: #1890FF;
    --primary-purple: #722ED1;
    --logo-green: #1F4A3D;
}

/* Update primary colors */
.main-btn,
.services-color-1 .services-icon,
.features-color-1 .features-icon {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-blue) 100%);
}

.services-color-2 .services-icon {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
}

.services-color-3 .services-icon {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-green) 100%);
}

.services-color-4 .services-icon {
    background: linear-gradient(135deg, var(--logo-green) 0%, var(--primary-green) 100%);
}

/* Hover effects */
.main-btn:hover {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-green) 100%);
}

.page-scroll:hover,
.nav-item.active .page-scroll {
    color: var(--primary-green) !important;
}

/* ============================================
   PRESERVE ALL ANIMATIONS
   (WOW.js animations work automatically)
============================================ */

/* fadeInUpBig - works as is */
.fadeInUpBig {
    animation-name: fadeInUpBig;
}

/* fadeIn - works as is */
.fadeIn {
    animation-name: fadeIn;
}

/* ============================================
   PRINT OPTIMIZATIONS
============================================ */
@media print {
    body {
        direction: rtl;
    }
}