/**
* Template Name: KAK Design Website - English Version
* File: main-en.css
* Description: English language overrides for main.css
* Note: This file should be loaded AFTER main.css
*/

/*--------------------------------------------------------------
# English Language Overrides
--------------------------------------------------------------*/

/* Change text direction to LTR */
body,
html {
  direction: ltr;
  text-align: left;
}

/* English Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: "Raleway", "Montserrat", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/*--------------------------------------------------------------
# Header & Navigation Adjustments
--------------------------------------------------------------*/

/* Logo position */
.logo-wrapper {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Desktop Navigation */
.nav-links-container {
  text-align: left;
}

.nav-links-container li a::after {
  right: auto;
  left: 15px;
}

/* Mobile Menu */
.mobile-menu-content {
  text-align: left;
}

.mobile-nav-links li a {
  flex-direction: row;
  text-align: left;
}

.mobile-nav-links li a:hover,
.mobile-nav-links li a.active {
  border-right: none;
  border-left: 3px solid var(--accent-color);
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
}

.section-title h2 {
  text-align: center;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/


.hero-badge {
  direction: ltr;
}

.hero-buttons {
  justify-content: flex-start;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.service-item,
.service-card-modern {
  text-align: left;
}

.service-features li {
  flex-direction: row;
  text-align: left;
}

.service-link-modern:hover i {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/
.project-info-modern,
.project-card-modern {
  text-align: left;
}

.project-category-tag {
  text-align: left;
}

.project-link-modern:hover i {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about.section {
  text-align: left;
}

.floating-badge {
  right: auto;
  left: -20px;
}

/*--------------------------------------------------------------
# FAQ Section
--------------------------------------------------------------*/
.faq-question-modern {
  flex-direction: row;
}

.faq-answer-modern p {
  padding-left: 95px;
  padding-right: 30px;
  text-align: left;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/

/* Contact Cards */
.contact-card {
  flex-direction: row;
}

.contact-card .contact-text {
  text-align: left;
}

/* Contact Form */
.contact-form-container h3,
.contact-form-container > p {
  text-align: left;
}

.php-email-form .form-control {
  text-align: left;
  direction: ltr;
}

.form-submit {
  flex-direction: row;
}

.form-submit .social-links {
  margin-right: 0;
  margin-left: auto;
}

/* Page Title */
.page-title h1,
.page-title p {
  text-align: center;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-links ul li a::before {
  content: "\F138";
  padding-right: 5px;
  padding-left: 0;
  font-family: "bootstrap-icons";
  font-size: 0.85rem;
}

.footer .tagline {
  text-align: left;
}

.footer h3,
.footer h5.toggle-footer {
  text-align: left;
  direction: ltr;
}

.footer-links ul,
.footer-links address {
  text-align: left;
  direction: ltr;
}

.footer-links ul li a {
  text-align: left;
}

.footer-links ul li a::before {
  padding-left: 0;
  padding-right: 5px;
}

.footer-links ul li a:hover {
  padding-right: 0;
  padding-left: 5px;
  transform: translateX(6px);
}

.footer .social-links {
  justify-content: flex-start;
}

.footer .social-links a {
  margin-left: 0;
  margin-right: 15px;
}

.footer .xx {
  text-align: left;
}

.footer-bottom {
  text-align: center;
}

/*--------------------------------------------------------------
# Utility Classes Adjustments
--------------------------------------------------------------*/
/* .whatsapp-float {
  left: auto;
  right: 20px;
} */

/*--------------------------------------------------------------
# CTA Section
--------------------------------------------------------------*/
.cta-content-modern {
  text-align: left;
}

.cta-subtitle {
  text-align: left;
}

.stat-card-modern:hover {
  transform: translateX(10px);
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs ol li::after {
  content: '/';
}

/*--------------------------------------------------------------
# Responsive Adjustments for English
--------------------------------------------------------------*/
@media (max-width: 768px) {
  .hero-content {
    text-align: center;
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .contact-card .contact-text {
    text-align: center;
  }
  
  .faq-answer-modern p {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .form-submit {
    flex-direction: column;
  }
  
  .form-submit .social-links {
    margin-left: 0;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .stat-inline-item div {
    text-align: center;
  }
}

/*--------------------------------------------------------------
# Additional English-Specific Styles
--------------------------------------------------------------*/

/* Ensure proper alignment for English text */
p, li, span, div {
  direction: ltr;
}

/* Links alignment */
a {
  direction: ltr;
}

/* Form labels */
label {
  text-align: left;
  direction: ltr;
}

/* Tables (if any) */
table {
  direction: ltr;
}

/* Lists */
ul, ol {
  padding-left: 20px;
  padding-right: 0;
}