/************************************************************ * TTL Frontend Stylesheet(Cleaned & Organized)* Brand:TTL — Primary #f26822,Secondary #183762,Text #676c71 * Notes:* - Consolidated variables & colors * - Removed duplicates / conflicting rules * - Grouped by components * - Mobile-first where sensible ************************************************************/
:root {
  --ttl-primary:#f26822;
  --ttl-secondary:#183762;
  --ttl-text:#676c71;
  --ttl-accent-blue:#0259a5
}
*,*::before,*::after {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  font-family:"Montserrat",Gilroy,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  color:var(--ttl-text);
  margin:0;
  background-color:#fff
}
html[lang="ar"] body {
  font-family:'Tajawal','Somar',sans-serif
}
@media screen and(-webkit-min-device-pixel-ratio:2)and(max-device-width:1024px) {
  body {
    font-family:'Gilroy',sans-serif !important
  }
  html[lang="ar"] body {
    font-family:'Somar',sans-serif !important
  }
}
@font-face {
  font-family:'Gilroy';
  src:url('/fonts/Gilroy-Regular.woff2')format('woff2');
  font-weight:400
}
@font-face {
  font-family:'Gilroy';
  src:url('/fonts/Gilroy-Bold.woff2')format('woff2');
  font-weight:700
}
@font-face {
  font-family:'Somar';
  src:url('/fonts/Somar-Regular.woff2')format('woff2');
  font-weight:400
}
@font-face {
  font-family:'Somar';
  src:url('/fonts/Somar-Bold.woff2')format('woff2');
  font-weight:700
}
h1,h2,h3,h4,h5,h6 {
  font-weight:700;
  line-height:1.2;
  color:var(--ttl-secondary);
  margin:0 0 .75rem
}
a {
  color:inherit;
  text-decoration:none;
  transition:color .35s,background-color .35s,opacity .35s,transform .35s
}
a:hover,a:focus {
  color:var(--ttl-primary)
}
::-webkit-scrollbar {
  width:12px
}
::-webkit-scrollbar-track {
  background-color:#eaeaea;
  border-right:1px solid #cecece;
  border-radius:0;
  box-shadow:none;
  border:0
}
::-webkit-scrollbar-thumb {
  background-color:#cecece;
  border-radius:0;
  box-shadow:none;
  border:0
}
::-webkit-scrollbar-thumb:hover {
  background-color:#aaa
}
.section-padding {
  padding:80px 0
}
.gray-bg {
  background:#f6f6f6
}
.container {
  max-width:1200px;
  margin:0 auto;
  padding-inline:1rem
}
.btn {
  font-size:15px;
  font-weight:400;
  text-transform:uppercase;
  padding:15px 30px;
  border:0;
  border-radius:0;
  box-shadow:none !important;
  transition:all .2s ease;
  cursor:pointer
}
.btn-sm {
  font-size:12px;
  padding:5px 15px
}
.btn-default,.btn.btn-default {
  background-color:var(--ttl-primary)!important;
  color:#fff !important;
  border:none !important;
  padding:10px 24px !important;
  font-weight:600 !important;
  border-radius:6px !important;
  transition:background-color .3s ease,color .3s ease !important
}
.btn-default:hover,.btn-default:focus,.btn.btn-default:hover,.btn.btn-default:focus {
  background-color:var(--ttl-accent-blue)!important;
  color:#fff !important
}
#backToTop {
  position:fixed;
  z-index:999;
  right:25px;
  bottom:25px;
  width:35px;
  height:35px;
  line-height:35px;
  text-align:center;
  background-color:var(--ttl-primary);
  color:#fff;
  display:none
}
#loading {
  background-color:#ffffff;
  height:100%;
  width:100%;
  position:fixed;
  z-index:99999;
  inset:0
}
#loading-center {
  width:100%;
  height:100%;
  position:relative;
  display:grid;
  place-items:center
}
.wow {
  animation-duration:.4s !important;
  animation-delay:0s !important
}
.topbar {
  background-color:var(--ttl-accent-blue);
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  color:#ffffff;
  padding:10px 0
}
.topbar a {
  color:#ffffff
}
.topbar a:hover {
  color:var(--ttl-primary)
}
.topbar i {
  margin-right:5px;
  font-size:14px
}
.topbar-contact>li>a>i {
  color:var(--ttl-primary)
}
.navbar {
  background-color:#ffffff;
  padding:1rem 0;
  box-shadow:0 4px 6px rgba(0,0,0,.05);
  z-index:9
}
.navbar-brand {
  margin-right:50px
}
.navbar-brand img {
  max-height:48px !important;
  height:auto !important;
  width:auto
}
.navbar-toggler {
  padding:0;
  border:0;
  box-shadow:none !important
}
.navbar-nav .nav-link {
  color:var(--ttl-secondary);
  font-size:16px;
  line-height:1;
  font-weight:500;
  text-transform:uppercase;
  padding:10px 15px;
  position:relative;
  transition:color .3s ease
}
.dropdown-toggle::after {
  font-size:13px;
  margin-right:0
}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus,.navbar-nav .nav-link.active {
  color:var(--ttl-primary)
}
.navbar .dropdown-menu {
  left:15px;
  margin:0;
  min-width:260px;
  padding:5px 0;
  border:1px solid rgb(0 0 0 / .05);
  border-radius:.5rem;
  box-shadow:0 8px 24px rgba(0,0,0,.1)
}
.navbar .dropdown-menu>li {
  padding:0 20px
}
.navbar .dropdown-menu>li>a {
  font-size:15px;
  padding:10px 0;
  color:#333;
  transition:all .3s ease;
  display:block;
  border-bottom:1px solid rgba(0,0,0,.07)
}
.navbar .dropdown-menu>li:last-child>a {
  border-bottom:0
}
.navbar .dropdown-menu>li>a:hover {
  background-color:#f6f6f6;
  color:var(--ttl-primary);
  padding-left:5px
}
.navbar .dropdown-item {
  width:auto
}
@media(min-width:1200px) {
  header .dropdown-menu {
    display:block;
    visibility:hidden;
    opacity:0;
    transform:rotateX(90deg);
    transform-origin:top;
    transition:.3s
  }
  header .dropdown:hover .dropdown-menu,.navbar-nav .nav-item.active>.dropdown-menu {
    visibility:visible;
    opacity:1;
    transform:rotateX(0)
  }
}
.dropdown-submenu {
  position:relative
}
.dropdown-submenu>.dropdown-menu {
  top:0;
  left:100%;
  margin-top:-6px;
  display:none;
  position:absolute
}
.dropdown-submenu:hover>.dropdown-menu {
  display:block
}
.dropdown-submenu>a::after {
  content:none !important
}
.navbar.stuck {
  position:fixed;
  top:0;
  z-index:999;
  width:100%;
  background-color:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  animation:fixedHeader .4s
}
@keyframes fixedHeader {
  0% {
    transform:translateY(-60px);
    opacity:0
  }
  100% {
    transform:translateY(0);
    opacity:1
  }
}
.offcanvas {
  background-color:#fff;
  height:100vh
}
.offcanvas-header .btn-close {
  background-image:none;
  padding:0;
  font-size:22px;
  line-height:1
}
@media(min-width:992px) {
  .navbar-expand-lg .offcanvas {
    height:100% !important
  }
}
#masterslider {
  position:relative;
  overflow:hidden
}
.ms-slide {
  position:relative;
  height:700px;
  overflow:hidden
}
.ms-slide img {
  width:100%;
  height:100%;
  object-fit:cover
}
.slider-overlay-gradient {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,.6));
  z-index:1
}
.slider-content {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  color:#fff;
  padding:30px;
  max-width:800px
}
.slide-title {
  font-size:50px;
  font-weight:800;
  color:var(--ttl-primary)
}
.slide-desc {
  font-size:18px;
  color:#fff;
  margin-top:20px
}
.overlay {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.95);
  text-align:center;
  background:rgba(0,0,0,.4);
  padding:30px 40px;
  border-radius:12px;
  max-width:80%;
  z-index:10;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 4px 15px rgba(0,0,0,.3);
  backdrop-filter:blur(5px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  opacity:0;
  animation:fadeInOverlay 1s ease .5s forwards
}
.overlay:hover {
  background:rgba(0,0,0,.5)
}
.overlay-title {
  font-size:32px;
  font-weight:700;
  margin-bottom:15px;
  color:rgba(255,255,255,.98);
  letter-spacing:1px
}
.overlay-desc {
  font-size:18px;
  line-height:1.6;
  color:rgba(255,255,255,.9);
  margin:0;
  max-width:90%
}
@keyframes fadeInOverlay {
  to {
    opacity:1
  }
}
.hero-static {
  background-image:url('https://ttl-co.com/frontend/uploads/hero/hero.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  min-height:100vh;
  position:relative;
  z-index:1;
  isolation:isolate;
  display:grid;
  place-items:center;
  text-align:center;
  padding:0 1rem
}
.hero-static::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:-1
}
.hero-title {
  font-size:2.75rem;
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  line-height:1.3;
  margin-bottom:1rem;
  text-shadow:0 2px 6px rgba(0,0,0,.3)
}
.hero-desc {
  font-size:1.25rem;
  max-width:750px;
  margin:0 auto 1.5rem;
  color:#f2f2f2;
  line-height:1.8;
  text-shadow:0 1px 4px rgba(0,0,0,.25)
}
.ms-slide::after {
  content:none
}
.ms-layer {
  z-index:999;
  position:absolute;
  width:100%;
  text-align:center
}
.video-play-btn {
  width:70px;
  height:70px;
  line-height:70px;
  font-size:25px;
  text-align:center;
  background-color:var(--ttl-primary);
  color:#fff !important;
  border-radius:50%;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}
@keyframes pulseAnim {
  from {
    transform:scale(1);
    opacity:1
  }
  to {
    transform:scale(1.4);
    opacity:0
  }
}
.pulseAnim:after {
  content:'';
  position:absolute;
  inset:0;
  background-color:inherit;
  border-radius:inherit;
  z-index:-1
}
.pulseAnim.pulseAnimAnimated:after {
  animation:pulseAnim 1.5s infinite 1s
}
@media(max-width:768px) {
  .ms-slide {
    height:400px
  }
  .slide-title {
    font-size:30px
  }
  .slide-desc {
    font-size:16px
  }
  .overlay {
    padding:20px 25px;
    max-width:90%
  }
  .overlay-title {
    font-size:26px;
    margin-bottom:10px
  }
  .overlay-desc {
    font-size:16px
  }
}
@media(max-width:480px) {
  .overlay {
    padding:15px 20px;
    max-width:95%
  }
  .overlay-title {
    font-size:22px
  }
  .overlay-desc {
    font-size:14px;
    line-height:1.5
  }
}
@media(max-width:812px)and(orientation:landscape) {
  .overlay-title {
    font-size:20px
  }
  .overlay-desc {
    font-size:14px
  }
}
@media(max-width:992px) {
  .hero-title {
    font-size:2rem
  }
  .hero-desc {
    font-size:1rem;
    padding:0 1rem
  }
}
@media(max-width:576px) {
  .hero-static {
    min-height:85vh;
    padding-top:2rem
  }
  .hero-title {
    font-size:1.5rem
  }
  .hero-desc {
    font-size:.95rem
  }
}
.subtitle {
  font-size:14px;
  font-weight:600;
  color:var(--ttl-primary);
  text-transform:uppercase;
  letter-spacing:1px;
  position:relative;
  padding-left:70px;
  display:inline-block
}
.subtitle::before {
  position:absolute;
  left:0;
  width:60px;
  height:2px;
  background-color:var(--ttl-primary);
  content:"";
  top:50%;
  transform:translateY(-50%)
}
.section-heading .title {
  font-size:45px;
  margin-bottom:20px;
  color:var(--ttl-secondary)!important
}
.section-heading p {
  font-size:16px;
  color:var(--ttl-text);
  margin-top:15px
}
.section-heading .section-line {
  display:inline-block;
  width:40px;
  height:2px;
  background-color:var(--ttl-primary);
  vertical-align:middle;
  margin-right:10px;
  margin-bottom:4px
}
.feature-box,.strength-card {
  background-color:#fff;
  border-radius:16px;
  padding:30px 20px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition:all .3s ease-in-out;
  height:100%;
  border:1px solid #eee;
  text-align:center
}
.feature-box:hover,.strength-card:hover {
  transform:translateY(-6px);
  box-shadow:0 12px 25px rgba(0,0,0,.15);
  border-color:transparent
}
.icon-circle,.strength-icon {
  width:60px;
  height:60px;
  background-color:var(--ttl-primary);
  color:#fff;
  font-size:1.5rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:background-color .3s ease,color .3s ease,transform .3s ease;
  margin-inline:auto
}
.feature-box:hover .icon-circle,.strength-card:hover .strength-icon {
  background-color:var(--ttl-accent-blue);
  color:#fff;
  transform:scale(1.1)
}
.feature-box h4,.feature-box h5,.strength-card h5 {
  color:var(--ttl-accent-blue);
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:12px
}
.feature-box p,.strength-card p {
  font-size:.95rem;
  color:#666;
  line-height:1.6
}
.ttl-feature-card {
  background-color:var(--ttl-primary);
  color:#fff;
  padding:30px 25px;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.05);
  height:100%;
  transition:all .3s ease-in-out
}
.ttl-feature-card:hover {
  background-color:var(--ttl-accent-blue);
  transform:translateY(-5px)
}
.ttl-feature-card h5 {
  font-size:1.2rem;
  color:#fff
}
.ttl-feature-card p {
  font-size:.95rem;
  line-height:1.6
}
.ttl-icon {
  width:60px;
  height:60px;
  background-color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.6rem;
  color:var(--ttl-primary);
  transition:background .3s ease,color .3s ease
}
.ttl-feature-card:hover .ttl-icon {
  color:var(--ttl-accent-blue)
}
.readmore {
  display:inline-flex;
  align-items:center;
  color:var(--ttl-secondary);
  font-weight:600;
  position:relative
}
.readmore::after {
  content:"";
  background:var(--ttl-primary);
  height:2px;
  position:absolute;
  left:0;
  right:15px;
  bottom:-1px;
  transform:scaleX(1);
  transform-origin:left;
  transition:transform .3s ease;
  pointer-events:none;
  z-index:1
}
.readmore:hover::after {
  transform:scaleX(1.1)
}
.service-box {
  position:relative;
  overflow:hidden;
  border-radius:12px;
  transition:transform .3s ease;
  height:500px;
  display:flex;
  flex-direction:column
}
.service-box__bg {
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  filter:brightness(.9);
  z-index:1
}
.service-box__bg.lazy-bg {
  background-image:none !important;
  opacity:0;
  transition:opacity .6s ease-in-out
}
.service-box__bg.lazy-bg.loaded {
  background-image:var(--lazy-bg)!important;
  opacity:1
}
.service-box__bg::after {
  content:"";
  position:absolute;
  inset:0;
  background-color:rgb(0 0 0 / 30%);
  transition:.5s ease all
}
.service-box__content {
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:space-between
}
.service-box__header {
  position:absolute;
  bottom:0;
  padding:0 35px 35px;
  z-index:9;
  transition:.5s ease all;
  transform:scale(1);
  width:100%;
  pointer-events:none;
  color:#fff;
  opacity:1
}
.service-box__header i {
  font-size:45px
}
.service-box__header h3 {
  margin:5px 0 0;
  color:#fff;
  font-size:28px;
  font-weight:500;
  line-height:36px
}
.service-box__body {
  position:absolute;
  bottom:0;
  left:0;
  right:35px;
  z-index:99;
  background:#fff;
  padding:30px;
  transition:.5s ease all;
  transform:translateX(-100%)
}
.service-box:hover .service-box__bg::after {
  background-color:rgb(0 0 0 / 0)
}
.service-box:hover .service-box__header {
  opacity:1
}
.service-box:hover .service-box__body {
  transform:translateX(0)
}
@media(max-width:768px) {
  .service-box {
    height:auto;
    margin-bottom:24px;
    border-radius:16px
  }
  .service-box__bg {
    position:relative !important;
    height:auto !important;
    aspect-ratio:16 / 10;
    border-radius:12px 12px 0 0;
    overflow:hidden;
    filter:brightness(.9)
  }
  .service-box__bg::after {
    content:none
  }
  .service-box__header {
    position:relative;
    padding:20px 25px;
    color:#000;
    background:#f9f9f9;
    text-align:left;
    pointer-events:auto
  }
  .service-box__header i {
    font-size:36px;
    color:var(--ttl-primary)
  }
  .service-box__header h3 {
    font-size:20px;
    line-height:1.4;
    margin-top:10px;
    color:var(--ttl-primary)
  }
  .service-box__body {
    position:relative;
    transform:none !important;
    background:#fff;
    padding:20px 25px;
    border-top:1px solid #eee
  }
}
.call-to-action {
  background-color:var(--ttl-secondary);
  background-image:url('../images/cta-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  color:var(--ttl-text)
}
.call-to-action::before {
  content:"";
  position:absolute;
  inset:0;
  background-color:rgba(0,0,0,.8)
}
.call-to-action .cta-content h3 {
  color:var(--ttl-primary)!important
}
.call-to-action .cta-content p {
  color:var(--ttl-text)!important
}
.call-to-action .cta-btn .btn {
  background-color:var(--ttl-primary);
  color:#fff;
  border:none;
  padding:12px 30px;
  font-size:16px;
  font-weight:600;
  text-transform:uppercase
}
.call-to-action .cta-btn .btn:hover {
  filter:brightness(90%)
}
.cta-content h3 {
  font-size:40px;
  margin-bottom:15px
}
.cta-content p {
  color:#d4d4d4;
  font-size:18px
}
#stats {
  background-color:#edeff7;
  position:relative;
  padding:60px 20px;
  display:grid;
  place-items:center
}
.stats-container {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px;
  text-align:center;
  width:100%;
  max-width:1200px
}
.stats-item {
  background-color:#fff;
  border-radius:1rem;
  padding:2rem 1rem;
  text-align:center;
  transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  color:var(--ttl-secondary)
}
.stats-item:hover {
  transform:translateY(-5px);
  box-shadow:0 6px 18px rgba(0,0,0,.1)
}
.stats-item i {
  font-size:3rem;
  color:var(--ttl-primary);
  margin-bottom:1rem;
  transition:transform .3s ease-in-out
}
.stats-item:hover i {
  transform:scale(1.1)
}
.stats-item h3 {
  font-size:2.2rem;
  font-weight:700;
  color:#161616;
  margin:0
}
.stats-item p {
  font-size:1rem;
  color:#555;
  margin:.25rem 0 0
}
@media(min-width:1200px) {
  #stats .row.justify-content-center>.col-lg-2 {
    flex:0 0 auto;
    width:20%
  }
}
@media(max-width:767.98px) {
  .stats-container {
    display:flex;
    flex-wrap:wrap;
    justify-content:center
  }
  .stats-item {
    width:100%;
    max-width:300px;
    margin-inline:auto
  }
}
@media(max-width:575.98px) {
  .row.text-center>.stats-col:last-child {
    margin-inline:auto;
    float:none
  }
}
.concepts-carousel i {
  font-size:40px;
  color:var(--ttl-primary)
}
.concepts-carousel h4 {
  font-size:20px;
  margin:10px 0 15px
}
.concepts-carousel p {
  font-size:15px;
  line-height:1.6
}
.concepts-carousel .owl-dots {
  position:absolute;
  right:0;
  top:15px
}
.owl-carousel button.owl-dot {
  display:inline-block;
  width:8px;
  height:8px;
  margin:0 2px;
  border-radius:50%;
  border:1px solid var(--ttl-primary)
}
.owl-carousel button.owl-dot.active {
  background-color:var(--ttl-primary)
}
.single-client {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100px;
  overflow:hidden;
  border:1px solid #e9e9e9;
  padding:15px;
  margin:1px;
  cursor:pointer
}
.single-client img {
  display:inline-block !important;
  width:auto !important;
  max-width:100%;
  max-height:100%;
  filter:grayscale(100%);
  transition:all .3s ease-in-out
}
.single-client:hover img {
  filter:none
}
#brands {
  padding:80px 0;
  background-color:#f8f9fa
}
.brand-item {
  transition:all .3s ease;
  height:100px
}
.brand-item img {
  max-height:80px;
  transition:all .3s ease-in-out;
  filter:grayscale(100%);
  opacity:.7
}
.brand-item img:hover {
  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.05)
}

.breadcrumb {
  margin:0;
  padding:0;
  background:transparent;
  position:relative
}
.breadcrumb a,.breadcrumb-item {
  font-size:14px;
  color:#fff
}
.breadcrumb-item+.breadcrumb-item {
  padding-left:10px
}
.breadcrumb-item+.breadcrumb-item::before {
  padding-right:8px;
  display:inline-block;
  vertical-align:middle;
  font-family:'Font Awesome 6 Pro';
  font-weight:300;
  content:"\f105";
  font-size:14px;
  color:#fff;
  margin-top:1px
}
.breadcrumb-item.active {
  color:#fff
}

.subpage-box {
  padding:70px 60px;
  color:#fff
}
.subpage-box__header i {
  font-size:35px
}
.subpage-box__header h3 {
  color:#fff;
  font-size:25px
}
.subpage-box>a {
  display:inline-block;
  font-weight:600;
  margin-top:10px;
  color:#fff !important
}
.faq-item .btn {
  text-align:left;
  text-transform:none;
  font-size:20px;
  padding:20px 0;
  border-bottom:1px solid #D4DADE;
  position:relative
}
.faq-item .btn[data-bs-toggle="collapse"]::before {
  font-family:"Font Awesome 6 Pro";
  font-weight:300;
  content:"\f067";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%)
}
.faq-item .btn[aria-expanded="true"]::before {
  content:"\f068"
}
.faq-item .faq-item__text {
  padding:20px 0
}
.bg-right {
  position:relative
}
.bg-right::before {
  content:'';
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  background-color:#f6f6f6;
  width:50%
}
.page-sidebar {
  background-color:rgba(113,117,97,.05);
  padding:40px 20px
}
.page-sidebar__title {
  margin-bottom:15px;
  font-weight:600
}
.page-sidebar__nav li {
  position:relative;
  transition:.4s
}
.page-sidebar__nav li::before {
  content:"";
  width:0;
  height:2px;
  background:var(--ttl-primary);
  position:absolute;
  top:22px;
  left:0;
  transition:.4s
}
.page-sidebar__nav li:not(.active):hover::before {
  width:7px
}
.page-sidebar__nav li:not(.active):hover {
  padding-left:12px
}
.page-sidebar__nav li a {
  text-transform:uppercase;
  display:block;
  padding:14px 0;
  font-size:14px;
  line-height:1.5;
  border-bottom:1px solid #eee;
  transition:.4s
}
.page-sidebar__nav li:last-child a {
  border-bottom:0;
  padding-bottom:0
}
.page-sidebar__nav li a:hover {
  color:var(--ttl-primary)
}
.page-sidebar__nav .active a {
  font-weight:600;
  color:var(--ttl-primary)
}
.contact {
  background-image:url(../images/map4.png);
  background-position:center top;
  background-repeat:no-repeat
}
.contact-form {
  background:#fff;
  padding:50px;
  margin-top:-100px;
  box-shadow:0 0 70px 0 rgb(0 0 0 / 10%)
}
.form-group {
  margin-bottom:20px
}
.form-control {
  height:50px;
  border:1px solid #eee;
  border-radius:0;
  padding:10px 20px;
  font-size:14px;
  font-weight:500;
  background-color:#f6f6f6;
  color:var(--ttl-secondary);
  box-shadow:none !important;
  appearance:auto
}
.contact-form textarea.form-control {
  height:160px
}
.contact-form .form-control:focus {
  border-color:var(--ttl-primary);
  background-color:#fff
}
.contact-info {
  padding-top:80px
}
.contact-item {
  font-size:17px;
  line-height:25px;
  color:var(--ttl-secondary);
  margin-bottom:40px
}
.contact-item i {
  width:50px;
  height:50px;
  text-align:center;
  line-height:50px;
  border-radius:50%;
  font-size:20px;
  background-color:var(--ttl-primary);
  color:#fff;
  margin-right:20px
}
.contact-item h5 {
  font-size:15px;
  font-weight:700;
  color:var(--ttl-secondary);
  text-transform:uppercase;
  margin-bottom:10px
}
.contact-icon {
  color:var(--ttl-primary)!important
}
.contact h3.text-primary {
  color:var(--ttl-primary)!important
}
.contact-info .card-body {
  align-items:flex-start;
  padding:16px 20px
}
.contact-info i.contact-icon {
  min-width:32px;
  text-align:center
}
.contact-info .text h5 {
  font-size:1rem;
  margin-bottom:.25rem
}
.contact-info .text p,.contact-info .text a {
  font-size:.95rem;
  color:var(--ttl-text);
  margin-bottom:0
}
.contact-info {
  height:100%
}
.contact-info .card {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.blog-details-wrapper {
  display:flex;
  gap:40px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:60px
}
.blog-hero {
  flex:0 0 45%
}
.blog-hero img {
  width:100%;
  height:auto;
  max-height:650px;
  object-fit:contain;
  border-radius:12px
}
.post-content {
  flex:1;
  line-height:1.9;
  font-size:1.1rem;
  color:#444;
  text-align:start
}
.post-content p {
  margin-bottom:1.2rem
}
.post-content h2,.post-content h3 {
  margin-top:1.5rem;
  font-weight:600
}
.blog-meta h1 {
  font-size:2.2rem;
  margin-top:20px;
  font-weight:700
}
.blog-share i {
  font-size:20px;
  transition:.3s ease;
  margin-right:10px;
  cursor:pointer;
  color:#666
}
.blog-share i:hover {
  transform:scale(1.2);
  color:var(--ttl-primary)
}
.related-posts h3 {
  font-size:1.5rem;
  margin-bottom:25px;
  font-weight:700
}
.blog-card {
  transition:transform .3s ease,box-shadow .3s ease;
  border:none;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.05)
}
.blog-card:hover {
  transform:translateY(-6px);
  box-shadow:0 8px 24px rgba(0,0,0,.08)
}
.blog-card img {
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  background-color:#f5f5f5
}
.blog-card .card-body {
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  height:100%
}
.blog-card h5 {
  font-size:1.1rem;
  font-weight:700;
  line-height:1.4;
  margin-bottom:.75rem
}
.blog-card p {
  font-size:.95rem;
  color:#666;
  line-height:1.6;
  flex-grow:1
}
.blog-card a.btn {
  font-size:.9rem;
  font-weight:600;
  transition:.3s ease
}
.blog-card a.btn:hover {
  transform:translateY(-2px);
  background-color:var(--ttl-primary);
  border-color:var(--ttl-primary);
  color:#fff
}
.sidebar-box {
  padding:1.5rem;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.05)
}
.sidebar-box ul {
  padding-left:0;
  margin:0;
  list-style:none
}
.most-read-list li {
  border-bottom:1px dashed #ddd;
  padding-bottom:10px;
  margin-bottom:10px
}
.most-read-list li:last-child {
  border-bottom:none;
  margin-bottom:0
}
.most-read-list a {
  display:block;
  color:#333;
  font-size:.95rem;
  font-weight:500;
  transition:all .3s ease;
  text-decoration:none
}
.most-read-list a i {
  transition:transform .3s ease;
  color:#999;
  margin-left:8px
}
.most-read-list a:hover {
  color:var(--ttl-primary)!important;
  font-weight:600;
  text-decoration:underline;
  transform:translateX(4px)
}
.most-read-list a:hover i {
  transform:translateX(4px);
  color:var(--ttl-primary)
}
.btn-view-all {
  background-color:var(--ttl-primary);
  color:#fff;
  border:none;
  padding:10px 24px;
  font-weight:600;
  border-radius:6px;
  transition:.3s ease
}
.btn-view-all:hover {
  background-color:var(--ttl-accent-blue);
  color:#fff
}
.search-button {
  background-color:var(--ttl-primary);
  color:#fff;
  border:none;
  padding:10px 24px;
  font-weight:600;
  border-radius:6px;
  transition:background-color .3s ease,transform .2s ease
}
.search-button:hover {
  background-color:var(--ttl-accent-blue);
  transform:translateY(-2px)
}
.formatted-content {
  text-align:start;
  font-size:1.1rem;
  line-height:1.9;
  color:#2e2e2e;
  margin-bottom:30px
}
.formatted-content p {
  margin-bottom:1.5rem
}
.formatted-content strong {
  color:var(--ttl-accent-blue);
  font-weight:600
}
.formatted-content ul,.formatted-content ol {
  padding-left:1.5rem;
  margin-bottom:1.5rem
}
.formatted-content li {
  margin-bottom:.8rem
}
@media(max-width:992px) {
  .blog-details-wrapper {
    flex-direction:column
  }
  .blog-hero,.post-content {
    flex:100%
  }
  .blog-hero img {
    width:100%;
    height:auto;
    max-height:600px;
    object-fit:contain;
    border-radius:12px;
    display:block;
    margin-inline:auto
  }
}
@media(max-width:768px) {
  .blog-card img {
    aspect-ratio:1 / 1
  }
  .blog-card .card-body {
    padding:1rem !important
  }
  .blog-card h5 {
    font-size:1rem !important
  }
  .blog-card p {
    font-size:.9rem !important;
    line-height:1.5
  }
}
#values {
  background-color:#fff;
  background-image:url('../images/map2.png');
  background-repeat:no-repeat;
  background-position:center top
}
.features-grid {
  background:#ffffff;
  box-shadow:0px 3px 16px 0px rgba(0,0,0,.05)
}
.whatsapp-ttl-btn,.whatsapp-float {
  position:fixed;
  right:20px;
  background-color:var(--ttl-primary);
  color:#fff;
  font-weight:600;
  border-radius:12px;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  text-decoration:none;
  z-index:9999;
  transition:all .3s ease
}
.whatsapp-ttl-btn {
  bottom:20px;
  font-size:15px
}
.whatsapp-float {
  bottom:80px;
  font-size:16px
}
.whatsapp-ttl-btn:hover,.whatsapp-float:hover {
  background-color:var(--ttl-accent-blue);
  color:#fff;
  text-decoration:none
}
.whatsapp-ttl-btn i,.whatsapp-float i {
  font-size:18px
}
.tracking-timeline {
  list-style:none;
  padding-left:0;
  margin-left:10px;
  border-left:3px solid #ccc
}
.tracking-timeline .stage {
  position:relative;
  margin-bottom:30px;
  padding-left:30px
}
.tracking-timeline .stage .circle {
  width:14px;
  height:14px;
  background:#fff;
  border-radius:50%;
  border:3px solid #ccc;
  position:absolute;
  left:-9px;
  top:3px
}
.tracking-timeline .stage.completed {
  border-left-color:green
}
.tracking-timeline .stage.completed .circle {
  border-color:green
}
.tracking-timeline .stage.pending {
  opacity:.6
}
.tracking-timeline .stage.current {
  border-left-color:orange;
  background-color:#fff8e1
}
.tracking-timeline .stage.current .circle {
  border-color:orange
}
.tracking-timeline .stage .info {
  margin-top:-3px
}
@media(max-width:768px) {
  .tracking-timeline .stage {
    padding-left:25px
  }
  .tracking-timeline .stage .circle {
    width:12px;
    height:12px;
    left:-8px
  }
}
#aboutus {
  background-color:#f9f9f9;
  padding:100px 0
}
#aboutus .subtitle {
  display:inline-block;
  color:var(--ttl-primary);
  font-weight:600;
  font-size:16px;
  text-transform:uppercase;
  margin-bottom:10px;
  position:relative
}
#aboutus .subtitle::before {
  content:'';
  position:absolute;
  left:-60px;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:2px;
  background-color:var(--ttl-primary)
}
#aboutus .title {
  font-size:38px;
  font-weight:700;
  color:var(--ttl-accent-blue)
}
#aboutus p {
  font-size:16px;
  color:#555;
  line-height:1.8
}
#aboutus img {
  border-radius:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.08)
}
#aboutus .btn-default:hover {
  background-color:#d7561c;
  color:#fff
}
#aboutus .col-lg-7 {
  background-color:rgba(255,255,255,.6);
  padding:30px;
  border-radius:12px
}
.service-card {
  border-radius:20px;
  transition:transform .4s ease,box-shadow .4s ease;
  background-color:#fff
}
.service-card:hover {
  transform:translateY(-8px)scale(1.02);
  box-shadow:0 10px 25px rgba(0,0,0,.12)
}
.service-card .icon-box {
  width:70px;
  height:70px;
  background-color:var(--ttl-primary);
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 15px;
  transition:background-color .3s ease
}
.service-card .icon-box i {
  font-size:28px
}
.service-card:hover .icon-box {
  background-color:var(--ttl-accent-blue)
}
.readmore {
  font-weight:500;
  transition:color .3s ease
}
.readmore:hover {
  color:var(--ttl-primary)
}
.page-events {
  background-color:#f8f9fa
}
.events-header {
  padding:4rem 0;
  text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.05)
}
.events-section {
  background-color:#ffffff;
  padding:3rem 0
}
.events-container {
  max-width:1200px;
  margin:0 auto;
  padding:0 1rem
}
.events-subtitle {
  font-size:1.75rem;
  font-weight:700;
  color:var(--ttl-secondary);
  margin-bottom:2rem;
  text-align:center;
  max-width:800px;
  margin-left:auto;
  margin-right:auto
}
.grid {
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin-top:3rem;
  justify-content:center
}
a.conference-card {
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transition:transform .3s ease,box-shadow .3s ease;
  max-width:350px;
  width:100%;
  text-decoration:none;
  color:inherit;
  cursor:pointer
}
a.conference-card:hover {
  transform:translateY(-8px)!important;
  box-shadow:0 12px 24px rgba(0,0,0,.15)!important
}
.conference-card img {
  width:100%;
  height:200px;
  object-fit:cover;
  aspect-ratio:16 / 9
}
.conference-card .card-body {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:1.5rem;
  text-align:left
}
.conference-card h2 {
  font-size:1.25rem;
  font-weight:700;
  color:var(--ttl-secondary);
  margin-bottom:.5rem
}
.conference-card .event-date {
  font-size:.875rem;
  color:#6b7280
}
.jctrans-title {
  font-size:2.25rem;
  font-weight:800;
  color:var(--ttl-secondary);
  line-height:1.3;
  margin-bottom:2rem;
  max-width:900px;
  margin-inline:auto;
  text-align:center
}
@media(min-width:640px) {
  .jctrans-title {
    font-size:3rem
  }
}
.jctrans-banner {
  max-width:700px;
  width:100%;
  height:auto;
  border-radius:.75rem;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  display:block;
  margin:2rem auto
}
.jctrans-paragraph {
  font-size:1rem;
  line-height:1.75rem;
  color:var(--ttl-text);
  margin-bottom:1.25rem;
  max-width:900px;
  margin-inline:auto
}
.jctrans-subheading {
  font-size:1.25rem;
  font-weight:700;
  color:var(--ttl-secondary);
  margin:2rem 0 .75rem;
  max-width:900px;
  margin-inline:auto
}
.jctrans-badge {
  background-color:#f5f9ff;
  color:var(--ttl-secondary);
  padding:1rem 1.5rem;
  border-radius:.75rem;
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:3rem;
  font-weight:500;
  font-size:1rem;
  border-left:5px solid var(--ttl-primary)
}
.jctrans-badge i {
  font-size:1.25rem
}
.swiper.mySwiper {
  padding-bottom:2rem;
  margin-bottom:2rem
}
.swiper-slide {
  display:flex;
  justify-content:center
}
.swiper-slide a {
  max-width:250px;
  display:block;
  border-radius:.75rem;
  overflow:hidden;
  box-shadow:0 8px 16px rgba(0,0,0,.1);
  transition:transform .3s ease
}
.swiper-slide a:hover {
  transform:scale(1.03)
}
.swiper-slide img {
  height:200px;
  width:100%;
  object-fit:cover;
  display:block
}
.swiper-button-next,.swiper-button-prev {
  color:var(--ttl-secondary)
}
@media(max-width:768px) {
  .events-header {
    padding:3rem 1rem
  }
  .events-subtitle {
    font-size:1.5rem
  }
  .grid {
    gap:2rem
  }
  .conference-card {
    max-width:100%
  }
  .conference-card h2 {
    font-size:1.1rem
  }
  .conference-card .event-date {
    font-size:.8rem
  }
  .jctrans-title {
    font-size:2rem
  }
  .jctrans-paragraph {
    font-size:1rem;
    padding:0 1rem
  }
}
@media(min-width:992px) {
  .conference-card {
    max-width:400px
  }
  .conference-card h2 {
    font-size:1.4rem
  }
  .conference-card .event-date {
    font-size:1rem
  }
}
.ttl-heading {
  color:#003366;
  font-weight:700;
  font-size:1.75rem;
  margin-bottom:1rem
}
.ttl-section-heading {
  color:#003366;
  font-size:1.5rem;
  font-weight:600;
  margin:2rem 0 1rem
}
.ttl-icon {
  color:#f26522;
  margin-right:.5rem
}
.ttl-paragraph {
  margin-bottom:1rem;
  line-height:1.6;
  color:var(--ttl-text)
}
.ttl-orange {
  color:#f37021
}
@media(max-width:767.98px) {
  .whatsapp-float {
    bottom:90px
  }
  .section-heading .title {
    font-size:1.5rem
  }
  .section-heading .subtitle {
    font-size:.875rem
  }
  .cta-content h3 {
    font-size:1.25rem
  }
  .cta-btn .btn {
    width:100%
  }
}
/* === Hero image overrides (LCP-friendly) === */
.hero-static {
  position:relative;
  min-height:clamp(60vh,75vh,90vh);
  overflow:hidden;
  background:none!important;
  background-image:none!important
}
.hero-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  z-index:1
}
.hero-overlay {
  position:relative;
  z-index:2;
  color:#fff
}
.hero-overlay .hero-title {
  margin-bottom:1rem
}
.hero-overlay .hero-desc {
  max-width:900px;
  margin:0 auto
}
.scroll-indicator {
  pointer-events:none
}
@media (max-width:767.98px) {
    .hero-static {
    min-height:70vh
  }
    .hero-overlay .hero-title {
    font-size:clamp(22px,6vw,36px)
  }
    .hero-overlay .hero-desc {
    font-size:clamp(14px,3.8vw,18px)
  }
}

/* TTL: stats overrides */
#stats.bg-dark{background-color:#edeff7!important}
#stats.text-white{color:inherit!important}
#stats .section-heading .title{color:#0f172a}
#stats .section-heading p{color:#475569}
#stats .stats-item{background:#fff;border-radius:1rem;padding:2rem 1rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease,background .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.05);color:var(--ttl-secondary)}
#stats .stats-item:hover{transform:translateY(-5px);box-shadow:0 6px 18px rgba(0,0,0,.1)}
#stats .stats-item i{font-size:3rem;color:var(--ttl-primary);margin-bottom:1rem;transition:transform .3s ease-in-out}
#stats .stats-item:hover i{transform:scale(1.1)}
#stats .stats-item h3{font-size:2.2rem;font-weight:700;color:#161616;margin:0}
#stats .stats-item p{font-size:1rem;color:#555;margin:.25rem 0 0}
@media(min-width:1200px){#stats .row.justify-content-center>.col-lg-2{flex:0 0 auto;width:20%}}
@media(max-width:767.98px){#stats .stats-item{width:100%;max-width:300px;margin-inline:auto}}
@media(max-width:575.98px){#stats .row.text-center>.stats-col:last-child{margin-inline:auto;float:none}}

/* ================== Footer (TTL Clean) ================== */
.footer {
  background-color: var(--ttl-secondary);
  color: #d4d4d4;
  font-size: 15px;
  line-height: 1.7;
}

.footer-top {
  padding-block: 80px;
  background: url('../images/footer-bg.png') no-repeat center/cover;
}

/* Titles */
.footer-widget__title {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* About */
.footer-widget__about p {
  color: #cfcfcf;
  margin: 20px 0 24px;
}

/* Social */
.footer-social {
  display: flex;
  gap: .75rem;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-social a { display: inline-flex; }
.footer-social i {
  font-size: 16px;
  color: #fff;
  transition: color .25s ease, transform .25s ease;
}
.footer-social i:hover { color: var(--ttl-primary); transform: translateY(-2px); }

/* Links */
.footer-widget__links ul { list-style: none; padding: 0; margin: 0; }
.footer-widget__links ul>li { margin-bottom: 12px; }
.footer-widget__links ul>li>a {
  color: #d4d4d4;
  font-size: 15px;
  position: relative;
  padding-inline-start: 18px;                /* موقع السهم */
  transition: color .2s ease, padding .2s ease;
}
.footer-widget__links ul>li>a::before {
  content: "›";                               /* LTR */
  position: absolute;
  inset-inline-start: 0;
  color: var(--ttl-primary);
  font-weight: 700;
  line-height: 1;
}
.footer-widget__links ul>li>a:hover {
  color: var(--ttl-primary);
  padding-inline-start: 22px;
}

/* Contacts */
.list-contacts { list-style: none; padding: 0; margin: 0; }
.list-contacts>li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 12px; }
.list-contacts>li i {
  font-size: 18px;
  color: var(--ttl-primary);
  line-height: 1;                             /* baseline أنظف */
  margin-top: 3px;
}
.list-contacts a { color: #d4d4d4; }
.list-contacts a:hover { color: var(--ttl-primary); }

/* Hours */
.footer-widget__times .table {
  color: #d4d4d4;
  font-size: 15px;
  margin: 0;
}
.footer-widget__times .table td {
  border-bottom: 1px dashed rgba(255,255,255,.25);
  padding-block: 10px;
}
.footer-widget__times .table tr:last-child td { border-bottom: 0; }

/* Bottom */
.footer-bottom {
  padding-block: 24px;
  background-color: #0f274f;
  color: #aeb3b8;
  font-size: 14px;
  text-align: center;
}

/* ============= RTL (ببساطة عند إضافة .is-rtl على الفوتر) ============= */
.footer.is-rtl .footer-widget__links,
.footer.is-rtl .footer-widget__contact,
.footer.is-rtl .footer-widget__times { text-align: right; }

.footer.is-rtl .footer-widget__links ul>li>a::before { content: "\2039"; } /* ‹ */
.footer.is-rtl .list-contacts>li { flex-direction: row-reverse; }
.footer.is-rtl .footer-social { flex-direction: row-reverse; }

/* تركيز/وصولية أفضل */
.footer a:focus-visible {
  outline: 2px solid var(--ttl-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .footer-top { padding-block: 60px; }
  .footer-widget__title { margin-bottom: 16px; }
}
@media (max-width: 575.98px) {
  .footer-top { padding-block: 48px; }
}

/* ضبط اتجاه الأيقونات في RTL */
.footer.is-rtl .list-contacts>li {
    flex-direction: row-reverse;  /* الأيقونة تيجي على يمين النص */
}

.footer.is-rtl .list-contacts>li i {
    margin-left: 0;    /* إلغاء المسافة لليسار */
    margin-right: .5rem; /* إضافة مسافة بسيطة يمين النص */
}

/* اجبار الهيدر على اتجاه LTR في اللغتين علشان أماكن العناصر تظل ثابتة */
.navbar.force-ltr { direction: ltr !important; }
.navbar.force-ltr .container-xl { flex-wrap: nowrap; }          /* منع اللف */
.navbar.force-ltr .navbar-nav { margin: 0 auto; }               /* توسيط المنيو دسكتوب */
.navbar.force-ltr .actions-fixed { flex-direction: row !important; } /* ترتيب الأزرار ثابت */

/* محاذاة عناصر القوائم حسب اللغة بدون قلب الاتجاه العام للهيدر */
html[lang="ar"] .navbar.force-ltr .dropdown-menu { text-align: right; }
html[lang="en"] .navbar.force-ltr .dropdown-menu { text-align: left; }

/* مسافات الأيقونات يمين/يسار حسب اللغة */
html[lang="ar"] .navbar.force-ltr .fa-globe { margin-left: .5rem; margin-right: 0; }
html[lang="en"] .navbar.force-ltr .fa-globe { margin-right: .5rem; margin-left: 0; }

/* (اختياري) لو عندك قواعد RTL عامّة تقلب الـflex للنافبار، نهديها هنا */
html[lang="ar"] .dir-rtl .navbar.force-ltr,
html[lang="ar"] .dir-rtl .navbar.force-ltr * {
  direction: ltr !important;
}

/* 🔹 لما تكون اللغة عربية (RTL) */
html[lang="ar"] .jctrans-paragraph,
html[lang="ar"] .jctrans-subheading,
html[lang="ar"] .jctrans-title {
    text-align: right !important;
    direction: rtl !important;
}

/* 🔹 لو إنجليزي تفضل زي ما هي */
html[lang="en"] .jctrans-paragraph,
html[lang="en"] .jctrans-subheading,
html[lang="en"] .jctrans-title {
    text-align: left !important;
    direction: ltr !important;
}


.service-hero-img {
  display: block;
  max-width: 50%;   /* تخليها أصغر شوية على اللاب */
  height: auto;
  margin: 20px auto;
  border-radius: 8px;
}

/* شاشات كبيرة جدًا (شاشات ديسكتوب فوق 1600px) */
@media (min-width: 1600px) {
  .service-hero-img {
    max-width: 70%;
  }
}

/* شاشات لابتوب متوسطة (1024px – 1366px) */
@media (max-width: 1366px) {
  .service-hero-img {
    max-width: 75%;
  }
}

/* التابلت */
@media (max-width: 992px) {
  .service-hero-img {
    max-width: 90%;
  }
}

/* الموبايل */
@media (max-width: 600px) {
  .service-hero-img {
    max-width: 95%;
  }
}

/* ✅ تحسين الهيدر والمنيو على الموبايل */
@media (max-width: 991.98px) {
  .navbar {
    padding: .5rem 0; /* يقلل الارتفاع */
  }

  .navbar-brand img {
    max-height: 40px !important; /* يصغر اللوجو */
  }

  .navbar .navbar-collapse {
    background: #fff;
    padding: 1rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
  }

  .navbar-nav .nav-link {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
  }

  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  .navbar .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    border: none;
    box-shadow: none;
    margin: 0;
  }

  .navbar .dropdown-submenu>.dropdown-menu {
    left: 0;
    top: auto;
    margin-top: .5rem;
    border: 1px solid #eee;
    border-radius: 8px;
  }

  .navbar .actions-fixed {
    flex-direction: column;
    margin-top: 1rem;
    gap: .75rem;
  }

  .navbar .actions-fixed .btn {
    width: 100%;
    text-align: center;
  }

  .navbar-toggler {
    font-size: 22px;
    color: var(--ttl-secondary);
  }
}

/* ✅ تحسين الهيدر والمنيو على الموبايل */
@media (max-width: 991.98px) {
  .navbar {
    padding: .5rem 0;
  }

  .navbar-brand img {
    max-height: 40px !important;
    height: auto;
  }

  .navbar .navbar-collapse {
    background: #fff;
    padding: 1rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
  }

  .navbar-nav .nav-link {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }

  /* إلغاء ستايلات الدسكتوب للقوائم */
  .navbar .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* القوائم الفرعية داخل الموبايل */
  .navbar .dropdown-submenu>.dropdown-menu {
    left: 0 !important;
    top: auto !important;
    margin-top: .5rem;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: .5rem 0;
  }

  /* الأزرار */
  .navbar .actions-fixed {
    flex-direction: column;
    margin-top: 1rem;
    gap: .75rem;
  }
  .navbar .actions-fixed .btn {
    width: 100%;
    text-align: center;
  }

  /* زر القائمة */
  .navbar-toggler {
    font-size: 22px;
    color: var(--ttl-secondary);
  }
}

/* Submenu alignment fix */
.dropdown-submenu .dropdown-menu {
  top: 0;
}

html[lang="en"] .dropdown-submenu .dropdown-menu {
  left: 100%;  /* يفتح يمين */
  right: auto;
}

html[lang="ar"] .dropdown-submenu .dropdown-menu {
  right: 100%; /* يفتح شمال */
  left: auto;
}


/************************************************************
 * TTL Get Quote Multi-Step Form
 * Colors: --ttl-primary:#f26822; --ttl-secondary:#183762; --ttl-text:#676c71;
 ************************************************************/

/* ===== Progress Bar ===== */
.progress {
    background-color: #f2f2f2;
    border-radius: 20px;
    overflow: hidden;
}
.progress-bar {
    background-color: var(--ttl-primary);
    transition: width 0.4s ease;
}

/* ===== Section Headings ===== */
.contact-form h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ttl-secondary);
    margin-bottom: 20px;
    border-left: 4px solid var(--ttl-primary);
    padding-left: 10px;
}

/* ===== Labels ===== */
.contact-form label {
    font-weight: 500;
    color: var(--ttl-secondary);
    margin-bottom: 6px;
}

/* ===== Inputs & Textarea ===== */
.contact-form .form-control {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 10px 14px;
    font-size: 0.95rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-form .form-control:focus {
    border-color: var(--ttl-primary);
    box-shadow: 0 0 6px rgba(242, 104, 34, 0.25);
}

/* ===== Error Messages ===== */
.contact-form .invalid-feedback {
    font-size: 0.85rem;
    color: #dc3545;
    margin-top: 3px;
}

/* ===== Buttons ===== */
.contact-form .btn {
    border-radius: 30px;
    padding: 10px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}
.contact-form .btn-primary {
    background-color: var(--ttl-secondary);
    border: none;
}
.contact-form .btn-primary:hover {
    background-color: #0f2441;
}
.contact-form .btn-success {
    background-color: var(--ttl-primary);
    border: none;
}
.contact-form .btn-success:hover {
    background-color: #d65512;
}
.contact-form .btn-secondary {
    background-color: #999;
    border: none;
}
.contact-form .btn-secondary:hover {
    background-color: #777;
}

/* ===== Review List (Step 5) ===== */
.contact-form .list-group-item {
    font-size: 0.95rem;
    color: var(--ttl-text);
}
.contact-form .list-group-item strong {
    color: var(--ttl-secondary);
}

/* ===== Animations ===== */
.contact-form {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .contact-form h4 {
        font-size: 1.1rem;
    }
    .contact-form .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 10px;
    }
}

/************************************************************
 * TTL Get Quote Multi-Step Form – RTL Adjustments
 * يشتغل تلقائي مع dir="rtl"
 ************************************************************/

html[dir="rtl"] .contact-form h4 {
    border-left: none;
    border-right: 4px solid var(--ttl-primary);
    padding-left: 0;
    padding-right: 10px;
    text-align: right;
}

html[dir="rtl"] .contact-form label {
    text-align: right;
    display: block;
}

html[dir="rtl"] .contact-form .form-control {
    text-align: right;
}

html[dir="rtl"] .contact-form .invalid-feedback {
    text-align: right;
}

/* ===== Buttons Alignment ===== */
html[dir="rtl"] .d-flex.justify-content-between {
    flex-direction: row-reverse;
}

/* ===== Review List ===== */
html[dir="rtl"] .contact-form .list-group-item {
    text-align: right;
}

/* ===== Progress Bar ===== */
html[dir="rtl"] .progress-bar {
    float: right;
}


@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Regular.woff2') format('woff2'),
       url('/fonts/Gilroy-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-SemiBold.woff2') format('woff2'),
       url('/fonts/Gilroy-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Bold.woff2') format('woff2'),
       url('/fonts/Gilroy-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Auto-generated: Somar Arabic webfonts (all weights) */

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/Somar-Thin.woff2?v=1') format('woff2'),
       url('/fonts/Somar-Thin.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('/fonts/Somar-ThinItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-ThinItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/Somar-ExtraLight.woff2?v=1') format('woff2'),
       url('/fonts/Somar-ExtraLight.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('/fonts/Somar-ExtraLightItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-ExtraLightItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Somar-Light.woff2?v=1') format('woff2'),
       url('/fonts/Somar-Light.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/Somar-LightItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-LightItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Somar-Regular.woff2?v=1') format('woff2'),
       url('/fonts/Somar-Regular.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Somar-RegularItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-RegularItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Somar-Medium.woff2?v=1') format('woff2'),
       url('/fonts/Somar-Medium.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Somar-MediumItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-MediumItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Somar-SemiBold.woff2?v=1') format('woff2'),
       url('/fonts/Somar-SemiBold.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Somar-SemiBoldItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-SemiBoldItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Somar-Bold.woff2?v=1') format('woff2'),
       url('/fonts/Somar-Bold.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Somar-BoldItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-BoldItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/Somar-ExtraBold.woff2?v=1') format('woff2'),
       url('/fonts/Somar-ExtraBold.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/Somar-ExtraBoldItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-ExtraBoldItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face{
  font-family: 'Somar';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/Somar-Black.woff2?v=1') format('woff2'),
       url('/fonts/Somar-Black.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
  font-family: 'Somar';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/Somar-BlackItalic.woff2?v=1') format('woff2'),
       url('/fonts/Somar-BlackItalic.woff?v=1') format('woff');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Apply Somar on RTL pages by default */
html[dir="rtl"] body, body.dir-rtl {
  font-family: 'Somar', 'Tajawal', 'Cairo', -apple-system, Segoe UI, Tahoma, sans-serif;
}

/* ===== TTL Mobile Hotfix Pack (v1) ===== */

/* 1) Fix invalid RGBA values */
.overlay {
  background: rgba(0,0,0,0.40) !important;
}
.overlay:hover {
  background: rgba(0,0,0,0.50) !important;
}
.overlay-title { color: rgba(255,255,255,0.98) !important; }
.overlay-desc  { color: rgba(255,255,255,0.90) !important; }
.hero-static::before { background: rgba(0,0,0,0.35) !important; }
.hero-title { text-shadow: 0 2px 6px rgba(0,0,0,0.30) !important; }
.hero-desc  { text-shadow: 0 1px 4px rgba(0,0,0,0.25) !important; }

/* 2) Unify hero approach: prefer LCP-friendly <img>, disable BG image */
.hero-static { background: none !important; background-image: none !important; }

/* 3) Reduce heavy shadows on mobile dropdowns */
@media (max-width: 991.98px) {
  .navbar .navbar-collapse {
    box-shadow: 0 6px 16px rgba(0,0,0,0.10) !important;
  }
}

/* 4) Remove duplicated mobile navbar rules impact by setting a single source of truth */
@media (max-width: 991.98px) {
  .navbar { padding: .5rem 0 !important; }
  .navbar-brand img { max-height: 40px !important; height: auto; }
  .navbar .navbar-collapse {
    background: #fff; padding: 1rem; border-radius: 0 0 12px 12px;
  }
  .navbar-nav .nav-link { padding: 12px 0; font-size: 15px; border-bottom: 1px solid #f0f0f0; }
  .navbar-nav .nav-link:last-child { border-bottom: none; }
  .navbar .dropdown-menu {
    position: static !important; float: none !important; width: 100% !important;
    border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important;
  }
  .navbar .dropdown-submenu>.dropdown-menu {
    left: 0 !important; top: auto !important; margin-top: .5rem; border: 1px solid #eee; border-radius: 8px; padding: .5rem 0;
  }
  .navbar .actions-fixed { flex-direction: column; margin-top: 1rem; gap: .75rem; }
  .navbar .actions-fixed .btn { width: 100%; text-align: center; }
  .navbar-toggler { font-size: 22px; color: var(--ttl-secondary); }
}

/* 5) Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}