/**
* Template Name: BizPage - v5.10.1
* Template URL: https://bootstrapmade.com/bizpage-bootstrap-business-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  background: #fff;
  color: #666666;
  font-family: "Open Sans", sans-serif;
}

a {
  color: #df0e3b;
  transition: 0.5s;
  text-decoration: none;
}

a:hover,
a:active,
a:focus {
  color: #18d36e;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 30px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #df0e3b;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #df0e3b;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/* Prelaoder */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #df0e3b;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  z-index: 997;
  background: rgba(0, 0, 0, 0.9);
  height: 80px;
}

#header.header-transparent {
  background: transparent;
}

#header.header-scrolled {
  background: rgba(0, 0, 0, 0.9);
  height: 60px;
}

#header .logo {
  font-size: 34px;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  padding-left: 10px;
  border-left: 4px solid #df0e3b;
}

#header .logo a {
  color: #fff;
}

#header .logo img {
  max-height: 40px;
}

@media (max-width: 992px) {
  #header .logo {
    font-size: 28px;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  text-transform: uppercase;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: #df0e3b;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  text-transform: none;
  color: #666666;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #df0e3b;
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(26, 26, 26, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #333333;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #df0e3b;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #df0e3b;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
  position: relative;
}

@media (max-height: 500px) {
  #hero {
    height: 150vh;
  }
}

#hero .carousel,
#hero .carousel-inner,
#hero .carousel-item,
#hero .carousel-item::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#hero .carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#hero .carousel-item::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.2);
}

#hero .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 70px;
  left: 50px;
  right: 50px;
}

#hero .container {
  text-align: center;
}

#hero h2 {
  color: #fff;
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
}

@media (max-width: 768px) {
  #hero h2 {
    font-size: 28px;
  }
}

#hero p {
  width: 80%;
  margin: 0 auto 30px auto;
  color: #fff;
}

@media (min-width: 1024px) {
  #hero p {
    width: 60%;
  }
}

#hero .carousel-fade {
  overflow: hidden;
}

#hero .carousel-fade .carousel-inner .carousel-item {
  transition-property: opacity;
}

#hero .carousel-fade .carousel-inner .carousel-item,
#hero .carousel-fade .carousel-inner .active.carousel-item-start,
#hero .carousel-fade .carousel-inner .active.carousel-item-end {
  opacity: 0;
}

#hero .carousel-fade .carousel-inner .active,
#hero .carousel-fade .carousel-inner .carousel-item-next.carousel-item-start,
#hero .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-end {
  opacity: 1;
  transition: 0.5s;
}

#hero .carousel-fade .carousel-inner .carousel-item-next,
#hero .carousel-fade .carousel-inner .carousel-item-prev,
#hero .carousel-fade .carousel-inner .active.carousel-item-start,
#hero .carousel-fade .carousel-inner .active.carousel-item-end {
  left: 0;
  transform: translate3d(0, 0, 0);
}

#hero .carousel-control-prev,
#hero .carousel-control-next {
  width: 10%;
}

@media (min-width: 1024px) {

  #hero .carousel-control-prev,
  #hero .carousel-control-next {
    width: 5%;
  }
}

#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
  background: none;
  font-size: 32px;
  line-height: 1;
}

#hero .carousel-indicators li {
  cursor: pointer;
}

#hero .btn-get-started {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  color: #fff;
  background: #df0e3b;
}

#hero .btn-get-started:hover {
  background: #fff;
  color: #df0e3b;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
  overflow: hidden;
}

/* Sections Header
--------------------------------*/
.section-header h3 {
  font-size: 32px;
  color: #111;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  position: relative;
  padding-bottom: 15px;
}

.section-header h3::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-header h3::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #df0e3b;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-header p {
  text-align: center;
  padding-bottom: 30px;
  color: #333;
}

/* Section with background
--------------------------------*/
.section-bg {
  background: #f7f7f7;
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 20px 0;
  background-color: #f7f7f7;
  min-height: 40px;
  margin-top: 80px;
}

.breadcrumbs h2 {
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 400;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: #6c757d;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

/* Featured Services Section
--------------------------------*/
#featured-services {
  background: #000;
}

#featured-services .box {
  padding: 30px 20px;
}

#featured-services .box-bg {
  background-image: linear-gradient(0deg, #000000 0%, #242323 50%, #000000 100%);
}

#featured-services i {
  color: #df0e3b;
  font-size: 48px;
  display: inline-block;
  line-height: 1;
}

#featured-services h4 {
  font-weight: 400;
  margin: 15px 0;
  font-size: 18px;
}

#featured-services h4 a {
  color: #fff;
}

#featured-services h4 a:hover {
  color: #df0e3b;
}

#featured-services p {
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  margin-bottom: 0;
}

/* About Us Section
--------------------------------*/
#about {
  background: url("../img/about-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 40px 0;
  position: relative;
}

#about::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 9;
}

#about .container {
  position: relative;
  z-index: 10;
}

#about .about-col {
  background: #fff;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
}

#about .about-col .img {
  position: relative;
}

#about .about-col .img img {
  border-radius: 4px 4px 0 0;
}

#about .about-col .icon {
  width: 64px;
  height: 64px;
  text-align: center;
  position: absolute;
  background-color: #df0e3b;
  border-radius: 50%;
  border: 4px solid #fff;
  left: calc(50% - 32px);
  bottom: -30px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#about .about-col i {
  font-size: 28px;
  line-height: 0;
  color: #fff;
  transition: 0.3s;
}

#about .about-col:hover .icon {
  background-color: #fff;
}

#about .about-col:hover i {
  color: #df0e3b;
}

#about .about-col h2 {
  color: #000;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  padding: 0;
  margin: 40px 0 12px 0;
}

#about .about-col h2 a {
  color: #000;
}

#about .about-col h2 a:hover {
  color: #df0e3b;
}

#about .about-col p {
  font-size: 14px;
  line-height: 24px;
  color: #333;
  margin-bottom: 0;
  padding: 0 20px 20px 20px;
}

/* Services Section
--------------------------------*/
#services {
  background: #fff;
  background-size: cover;
  padding: 60px 0 40px 0;
}

#services .box {
  margin-bottom: 30px;
}

#services .icon {
  float: left;
}

#services .icon i {
  color: #df0e3b;
  font-size: 36px;
  line-height: 0;
  transition: 0.5s;
}

#services .title {
  margin-left: 60px;
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
}

#services .title a {
  color: #111;
}

#services .box:hover .title a {
  color: #df0e3b;
}

#services .description {
  font-size: 14px;
  margin-left: 60px;
  line-height: 24px;
  margin-bottom: 0;
}

/* Call To Action Section
--------------------------------*/
#call-to-action {
  background: linear-gradient(rgba(0, 142, 99, 0.1), rgba(0, 0, 0, 0.1)), url(../img/call-to-action-bg.jpg) fixed center center;
  background-size: cover;
  padding: 60px 0;
}

#call-to-action h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

#call-to-action p {
  color: #fff;
}

#call-to-action .cta-btn {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 28px;
  border-radius: 25px;
  transition: 0.5s;
  margin-top: 10px;
  border: 2px solid #fff;
  color: #fff;
}

#call-to-action .cta-btn:hover {
  background: #df0e3b;
  border: 2px solid #df0e3b;
}

/* Call To Action Section
--------------------------------*/
#skills {
  padding: 60px 0;
}

#skills .progress {
  height: 35px;
  margin-bottom: 10px;
  border-radius: 0;
}

#skills .progress .skill {
  font-family: "Open Sans", sans-serif;
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}

#skills .progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

#skills .progress-bar {
  width: 1px;
  text-align: left;
  transition: 0.9s;
}

/* Facts Section
--------------------------------*/
#facts {
  background: url("../img/facts-bg.jpg") center top no-repeat fixed;
  background-size: cover;
  padding: 60px 0 0 0;
  position: relative;
}

#facts::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.88);
  z-index: 9;
}

#facts .container {
  position: relative;
  z-index: 10;
}

#facts .counters span {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 48px;
  display: block;
  color: #df0e3b;
}

#facts .counters p {
  padding: 0;
  margin: 0 0 20px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #111;
}

#facts .facts-img {
  text-align: center;
  padding-top: 30px;
}

/* Portfolio Section
--------------------------------*/
#portfolio {
  padding: 60px 0;
}

#portfolio #portfolio-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
  text-align: center;
}

#portfolio #portfolio-flters li {
  cursor: pointer;
  margin: 15px 15px 15px 0;
  display: inline-block;
  padding: 10px 20px;
  font-size: 12px;
  line-height: 20px;
  color: #666666;
  border-radius: 4px;
  text-transform: uppercase;
  background: #fff;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

#portfolio #portfolio-flters li:hover,
#portfolio #portfolio-flters li.filter-active {
  background: #df0e3b;
  color: #fff;
}

#portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

#portfolio .portfolio-wrap {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

#portfolio .portfolio-wrap:hover {
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.16);
}

#portfolio .portfolio-item {
  position: relative;
  height: 360px;
  overflow: hidden;
}

#portfolio .portfolio-item figure {
  background: #000;
  overflow: hidden;
  height: 240px;
  position: relative;
  border-radius: 4px 4px 0 0;
  margin: 0;
}

#portfolio .portfolio-item figure:hover img {
  opacity: 0.4;
  transition: 0.3s;
}

#portfolio .portfolio-item figure .link-preview,
#portfolio .portfolio-item figure .link-details {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  line-height: 1;
  text-align: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s linear;
}

#portfolio .portfolio-item figure .link-preview i,
#portfolio .portfolio-item figure .link-details i {
  font-size: 22px;
  color: #333;
  line-height: 0;
}

#portfolio .portfolio-item figure .link-preview:hover,
#portfolio .portfolio-item figure .link-details:hover {
  background: #df0e3b;
}

#portfolio .portfolio-item figure .link-preview:hover i,
#portfolio .portfolio-item figure .link-details:hover i {
  color: #fff;
}

#portfolio .portfolio-item figure .link-preview {
  left: calc(50% - 38px);
  top: calc(50% - 18px);
}

#portfolio .portfolio-item figure .link-details {
  right: calc(50% - 38px);
  top: calc(50% - 18px);
}

#portfolio .portfolio-item figure:hover .link-preview {
  opacity: 1;
  left: calc(50% - 44px);
}

#portfolio .portfolio-item figure:hover .link-details {
  opacity: 1;
  right: calc(50% - 44px);
}

#portfolio .portfolio-item .portfolio-info {
  background: #fff;
  text-align: center;
  padding: 30px;
  height: 90px;
  border-radius: 0 0 3px 3px;
}

#portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  line-height: 1px;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 0;
}

#portfolio .portfolio-item .portfolio-info h4 a {
  color: #333;
}

#portfolio .portfolio-item .portfolio-info h4 a:hover {
  color: #df0e3b;
}

#portfolio .portfolio-item .portfolio-info p {
  padding: 0;
  margin: 0;
  color: #b8b8b8;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #df0e3b;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #df0e3b;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(51, 51, 51, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/* Clients Section
--------------------------------*/
#clients {
  padding: 60px 0;
}

#clients img {
  opacity: 0.5;
  transition: 0.3s;
}

#clients img:hover {
  opacity: 1;
}

#clients .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

#clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #df0e3b;
}

#clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #df0e3b;
}

/* Testimonials Section
--------------------------------*/
#testimonials {
  padding: 60px 0;
}

#testimonials .section-header {
  margin-bottom: 40px;
}

#testimonials .testimonials-carousel,
#testimonials .testimonials-slider {
  overflow: hidden;
}

#testimonials .testimonial-item {
  text-align: center;
}

#testimonials .testimonial-item .testimonial-img {
  width: 240px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0 auto;
  height: 260px;
}

#testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #111;
}

#testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0 0 15px 0;
}

#testimonials .testimonial-item .quote-sign-left {
  margin-top: -15px;
  padding-right: 10px;
  display: inline-block;
  width: 37px;
}

#testimonials .testimonial-item .quote-sign-right {
  margin-bottom: -15px;
  padding-left: 10px;
  display: inline-block;
  max-width: 100%;
  width: 37px;
}

#testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

@media (min-width: 992px) {
  #testimonials .testimonial-item p {
    width: 80%;
  }
}

#testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

#testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #df0e3b;
}

#testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #df0e3b;
}

/* Team Section
--------------------------------*/
#team {
  background: #fff;
  padding: 60px 0;
}

#team .member {
  text-align: center;
  margin-bottom: 20px;
  background: #000;
  position: relative;
}

#team .member .member-info {
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.2s;
}

#team .member .member-info-content {
  margin-top: -50px;
  transition: margin 0.2s;
}

#team .member:hover .member-info {
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
  transition: 0.4s;
}

#team .member:hover .member-info-content {
  margin-top: 0;
  transition: margin 0.4s;
}

#team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
  color: #fff;
}

#team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: #fff;
}

#team .member .social {
  margin-top: 15px;
}

#team .member .social a {
  transition: none;
  color: #fff;
}

#team .member .social a:hover {
  color: #df0e3b;
}

#team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/* Contact Section
--------------------------------*/
#contact {
  padding: 60px 0;
}

#contact .contact-info {
  margin-bottom: 20px;
  text-align: center;
}

#contact .contact-info i {
  font-size: 48px;
  display: inline-block;
  margin-bottom: 10px;
  color: #df0e3b;
}

#contact .contact-info address,
#contact .contact-info p {
  margin-bottom: 0;
  color: #000;
}

#contact .contact-info h3 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase;
  color: #999;
}

#contact .contact-info a {
  color: #000;
}

#contact .contact-info a:hover {
  color: #df0e3b;
}

#contact .contact-address,
#contact .contact-phone,
#contact .contact-email {
  margin-bottom: 20px;
}

@media (min-width: 768px) {

  #contact .contact-address,
  #contact .contact-phone,
  #contact .contact-email {
    padding: 20px 0;
  }
}

@media (min-width: 768px) {
  #contact .contact-phone {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }
}

#contact .php-email-form {
  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
  padding: 30px;
  background: #fff;
}

#contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

#contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

#contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #df0e3b;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

#contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

#contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #df0e3b;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

#contact .php-email-form .form-group {
  margin-bottom: 20px;
}

#contact .php-email-form input,
#contact .php-email-form textarea {
  padding: 10px 14px;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
}

#contact .php-email-form input::focus,
#contact .php-email-form textarea::focus {
  background-color: #df0e3b;
}

#contact .php-email-form button[type=submit] {
  background: #df0e3b;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  cursor: pointer;
}

#contact .php-email-form button[type=submit]:hover {
  background: #df0e3b;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
  padding: 40px 0 20px 0;
}

.blog .entry {
  padding: 30px;
  margin-bottom: 60px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .entry .entry-img {
  max-height: 440px;
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog .entry .entry-title {
  font-size: 28px;
  font-weight: bold;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog .entry .entry-title a {
  color: #333333;
  transition: 0.3s;
}

.blog .entry .entry-title a:hover {
  color: #df0e3b;
}

.blog .entry .entry-meta {
  margin-bottom: 15px;
  color: #df0e3b;
}

.blog .entry .entry-meta ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog .entry .entry-meta ul li+li {
  padding-left: 20px;
}

.blog .entry .entry-meta i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
}

.blog .entry .entry-meta a {
  color: #666666;
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog .entry .entry-content p {
  line-height: 24px;
}

.blog .entry .entry-content .read-more {
  -moz-text-align-last: right;
  text-align-last: right;
}

.blog .entry .entry-content .read-more a {
  display: inline-block;
  background: #fff;
  color: #333333;
  padding: 6px 30px 8px 30px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 50px;
  border: 2px solid #df0e3b;
}

.blog .entry .entry-content .read-more a:hover {
  background: #df0e3b;
  color: #fff;
}

.blog .entry .entry-content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog .entry .entry-content blockquote {
  overflow: hidden;
  background-color: #fafafa;
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog .entry .entry-content blockquote p {
  color: #666666;
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog .entry .entry-content blockquote::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #df0e3b;
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog .entry .entry-footer {
  padding-top: 10px;
  border-top: 1px solid #e6e6e6;
}

.blog .entry .entry-footer i {
  color: #df0e3b;
  display: inline;
}

.blog .entry .entry-footer a {
  color: #666666;
  transition: 0.3s;
}

.blog .entry .entry-footer a:hover {
  color: #df0e3b;
}

.blog .entry .entry-footer .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog .entry .entry-footer .cats li {
  display: inline-block;
}

.blog .entry .entry-footer .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog .entry .entry-footer .tags li {
  display: inline-block;
}

.blog .entry .entry-footer .tags li+li::before {
  padding-right: 6px;
  color: #6c757d;
  content: ",";
}

.blog .entry .entry-footer .share {
  font-size: 16px;
}

.blog .entry .entry-footer .share i {
  padding-left: 5px;
}

.blog .entry-single {
  margin-bottom: 30px;
}

.blog .blog-author {
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .blog-author img {
  width: 120px;
  margin-right: 20px;
}

.blog .blog-author h4 {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 0px;
  padding: 0;
  color: #333333;
}

.blog .blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog .blog-author .social-links a {
  color: rgba(51, 51, 51, 0.4);
  margin-right: 5px;
  transition: 0.3s;
}

.blog .blog-author .social-links a:hover {
  color: #df0e3b;
}

.blog .blog-author p {
  font-style: italic;
  color: #666666;
}

.blog .blog-comments {
  margin-bottom: 30px;
}

.blog .blog-comments .comments-count {
  font-weight: bold;
}

.blog .blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog .blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog .blog-comments .comment .comment-img img {
  width: 60px;
}

.blog .blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog .blog-comments .comment h5 a {
  font-weight: bold;
  color: #666666;
  transition: 0.3s;
}

.blog .blog-comments .comment h5 a:hover {
  color: #333333;
}

.blog .blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: #df0e3b;
}

.blog .blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog .blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: #999999;
  margin-bottom: 5px;
}

.blog .blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog .blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog .blog-comments .reply-form p {
  font-size: 14px;
}

.blog .blog-comments .reply-form input {
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: #666666;
}

.blog .blog-comments .reply-form textarea {
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: #666666;
}

.blog .blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog .blog-comments .reply-form .btn-primary {
  border-radius: 50px;
  padding: 10px 30px;
  border: 0;
  background-color: #df0e3b;
}

.blog .blog-comments .reply-form .btn-primary:hover {
  background-color: #df0e3b;
}

.blog .blog-pagination {
  color: #df0e3b;
}

.blog .blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog .blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog .blog-pagination li a {
  color: #df0e3b;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-weight: bold;
}

.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
  background: #df0e3b;
  border-radius: 50px;
}

.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
  color: #fff;
}

.blog .sidebar {
  padding: 30px;
  margin: 0 0 60px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .sidebar .sidebar-title {
  font-size: 20px;
  font-weight: 700;
  padding: 0 0 0 0;
  margin: 0 0 15px 0;
  color: #333333;
  position: relative;
}

.blog .sidebar .sidebar-item {
  margin-bottom: 30px;
}

.blog .sidebar .search-form form {
  background: #fff;
  border: 1px solid #ddd;
  padding: 3px 10px;
  position: relative;
  border-radius: 50px;
}

.blog .sidebar .search-form form input {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 70px);
  box-shadow: none;
}

.blog .sidebar .search-form form input:focus {
  box-shadow: none;
}

.blog .sidebar .search-form form button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 30px;
  margin: -1px;
  background: #df0e3b;
  color: #fff;
  transition: 0.3s;
  line-height: 0;
  border-radius: 50px;
}

.blog .sidebar .search-form form button i {
  line-height: 0;
}

.blog .sidebar .search-form form button:hover {
  background: #df0e3b;
}

.blog .sidebar .categories ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .categories ul li+li {
  padding-top: 10px;
}

.blog .sidebar .categories ul a {
  color: #333333;
  transition: 0.3s;
}

.blog .sidebar .categories ul a:hover {
  color: #df0e3b;
}

.blog .sidebar .categories ul a span {
  padding-left: 5px;
  color: #b3b3b3;
  font-size: 14px;
}

.blog .sidebar .recent-posts .post-item+.post-item {
  margin-top: 15px;
}

.blog .sidebar .recent-posts img {
  width: 80px;
  float: left;
}

.blog .sidebar .recent-posts h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
}

.blog .sidebar .recent-posts h4 a {
  color: #333333;
  transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
  color: #df0e3b;
}

.blog .sidebar .recent-posts time {
  display: block;
  margin-left: 95px;
  font-style: italic;
  font-size: 14px;
  color: #b3b3b3;
}

.blog .sidebar .tags {
  margin-bottom: -10px;
}

.blog .sidebar .tags ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .tags ul li {
  display: inline-block;
}

.blog .sidebar .tags ul a {
  color: #333333;
  font-size: 14px;
  padding: 6px 20px;
  margin: 0 6px 8px 0;
  border: 1px solid #df0e3b;
  display: inline-block;
  border-radius: 50px;
  transition: 0.3s;
}

.blog .sidebar .tags ul a:hover {
  color: #fff;
  background: #df0e3b;
}

.blog .sidebar .tags ul a span {
  padding-left: 5px;
  color: white;
  font-size: 14px;
}

/* التنسيقات الجديدة */

/* =========================================
   STOP GERMAN HERO
   ISOLATED CSS
========================================= */

#stop-premium-hero {
    width: 100%;
    height: 720px;
    position: relative;
    overflow: hidden;
    direction: rtl;
}

#stop-premium-hero .carousel,
#stop-premium-hero .carousel-inner,
#stop-premium-hero .carousel-item {
    height: 100%;
}

#stop-premium-hero .carousel-item {
    position: relative;
    background-size: cover;
    background-position: center;
}

.stop-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.15),
            rgba(0,0,0,.50) 45%,
            rgba(0,0,0,.90)
        );
}

.stop-hero-content {
    position: relative;
    z-index: 3;

    width: 90%;
    max-width: 760px;

    margin-right: auto;
    margin-left: auto;

    padding-top: 145px;

    color: #fff;
}

.stop-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 18px;
    margin-bottom: 20px;

    border-radius: 50px;

    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);

    backdrop-filter: blur(10px);

    font-size: 15px;
    font-weight: 600;
}

.stop-hero-badge i {
    color: #f5b400;
    font-size: 18px;
}

.stop-hero-content h1 {
    margin: 0 0 20px;

    font-size: 56px;
    line-height: 1.2;

    font-weight: 800;

    color: #fff;
}

.stop-hero-content h1 strong {
    display: block;

    color: #f5b400;

    font-weight: 800;
}

.stop-hero-content p {
    max-width: 680px;

    margin: 0 0 30px;

    color: rgba(255,255,255,.88);

    font-size: 18px;
    line-height: 1.9;
}

.stop-hero-buttons {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 28px;
}

.stop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 190px;

    padding: 15px 22px;

    border-radius: 10px;

    text-decoration: none !important;

    font-size: 16px;
    font-weight: 700;

    transition: .3s;
}

.stop-btn-main {
    background: #f5b400;
    color: #111 !important;

    box-shadow: 0 10px 30px rgba(245,180,0,.25);
}

.stop-btn-main:hover {
    background: #ffc928;
    color: #111 !important;

    transform: translateY(-3px);
}

.stop-btn-phone {
    color: #fff !important;

    background: rgba(255,255,255,.10);

    border: 1px solid rgba(255,255,255,.35);

    backdrop-filter: blur(10px);
}

.stop-btn-phone:hover {
    background: #fff;
    color: #111 !important;

    transform: translateY(-3px);
}

.stop-hero-features {
    display: flex;
    align-items: center;
    gap: 25px;

    flex-wrap: wrap;
}

.stop-hero-features span {
    display: flex;
    align-items: center;
    gap: 7px;

    color: rgba(255,255,255,.90);

    font-size: 14px;
    font-weight: 600;
}

.stop-hero-features i {
    color: #f5b400;
}

.stop-hero-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.25);

    backdrop-filter: blur(10px);
}

#stop-premium-hero .carousel-control-prev,
#stop-premium-hero .carousel-control-next {
    width: 90px;
    z-index: 5;
}

.stop-hero-dots {
    position: absolute;

    z-index: 10;

    bottom: 30px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    gap: 8px;
}

.stop-hero-dots button {
    width: 10px;
    height: 10px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,.45);
}

.stop-hero-dots button.active {
    width: 30px;

    border-radius: 20px;

    background: #f5b400;
}


/* =========================================
   SERVICES
========================================= */

#stop-premium-services {
    position: relative;

    z-index: 20;

    margin-top: -65px;

    direction: rtl;
}

.stop-services-container {
    width: 90%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}

.stop-service-card {
    display: flex;

    gap: 18px;

    padding: 27px 24px;

    background: #fff;

    border-radius: 16px;

    box-shadow: 0 15px 45px rgba(0,0,0,.13);

    border: 1px solid rgba(0,0,0,.05);

    transition: .3s;
}

.stop-service-card:hover {
    transform: translateY(-7px);
}

.stop-service-icon {
    flex-shrink: 0;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(245,180,0,.12);

    color: #d69d00;

    font-size: 27px;
}

.stop-service-card small {
    display: block;

    margin-bottom: 4px;

    color: #a17a00;

    font-size: 13px;

    font-weight: 700;
}

.stop-service-card h3 {
    margin: 0 0 8px;

    font-size: 21px;

    font-weight: 800;

    color: #faf4f4;
}

.stop-service-card p {
    margin: 0 0 12px;

    color: #777;

    font-size: 14px;

    line-height: 1.8;
}

.stop-service-dark {
    background: #111;
}

.stop-service-dark h3 {
    color: #fff;
}

.stop-service-dark p {
    color: rgba(255,255,255,.7);
}

.stop-service-dark small {
    color: #f5b400;
}

.stop-service-tag {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 13px;
    font-weight: 700;

    color: #555;
}

.stop-service-dark .stop-service-tag {
    color: #fff;
}

.stop-service-tag i {
    color: #f5b400;
}

.stop-service-phone {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stop-service-phone a {
    color: #111;

    text-decoration: none;

    font-weight: 800;

    font-size: 13px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 991px) {

    #stop-premium-hero {
        height: 650px;
    }

    .stop-hero-content {
        padding-top: 110px;
        text-align: center;
    }

    .stop-hero-content h1 {
        font-size: 42px;
    }

    .stop-hero-content p {
        font-size: 16px;
    }

    .stop-hero-buttons {
        justify-content: center;
    }

    .stop-hero-features {
        justify-content: center;
    }

    #stop-premium-services {
        margin-top: -40px;
    }

    .stop-services-container {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 576px) {

    #stop-premium-hero {
        height: 680px;
    }

    .stop-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.30),
                rgba(0,0,0,.92)
            );
    }

    .stop-hero-content {
        padding-top: 95px;
    }

    .stop-hero-content h1 {
        font-size: 33px;
    }

    .stop-hero-content p {
        font-size: 15px;
    }

    .stop-hero-buttons {
        flex-direction: column;
    }

    .stop-btn {
        width: 100%;
    }

    #stop-premium-hero .carousel-control-prev,
    #stop-premium-hero .carousel-control-next {
        display: none;
    }

    .stop-hero-features {
        gap: 10px;
        justify-content: center;
    }

    .stop-hero-features span {
        font-size: 12px;
    }

    .stop-services-container {
        width: 92%;
    }

}



/* القديم ----------------------------------------------------------------------------------------------------------------------- */


/* منطقة 1 nova-hero */


/* =====================================================
   NOVA HERO
   NEW BRAND COLORS
===================================================== */

#nova-hero {

    --brand-primary: #073B3A;
    --brand-primary-dark: #042B2A;

    --brand-accent: #F47C48;
    --brand-accent-light: #FF9A6D;

    --brand-white: #FFFFFF;
    --brand-text: #E8F0EF;

    position: relative;

    width: 100%;
    height: 720px;

    overflow: hidden;

    background: var(--brand-primary);
}


/* =====================================================
   CAROUSEL
===================================================== */

#novaHeroCarousel,
#novaHeroCarousel .carousel-inner,
#novaHeroCarousel .carousel-item {

    width: 100%;
    height: 100%;
}


#novaHeroCarousel .carousel-item {

    position: relative;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* =====================================================
   OVERLAY
===================================================== */

.nova-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 43, 42, 0.96) 0%,
            rgba(4, 43, 42, 0.82) 35%,
            rgba(4, 43, 42, 0.45) 68%,
            rgba(4, 43, 42, 0.22) 100%
        );

    z-index: 1;
}


/* =====================================================
   CONTENT
===================================================== */

.nova-hero-content {

    position: relative;

    z-index: 2;

    width: min(1250px, 90%);

    height: 100%;

    margin: auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    text-align: right;

    direction: rtl;
}


/* =====================================================
   BADGE
===================================================== */

.nova-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;

    padding: 9px 15px;

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 50px;

    background: rgba(7,59,58,0.55);

    color: var(--brand-accent-light);

    font-size: 13px;

    font-weight: 700;

    backdrop-filter: blur(8px);

    box-shadow:
        0 8px 25px rgba(0,0,0,0.15);
}


.nova-hero-badge i {

    color: var(--brand-accent);

    font-size: 15px;
}


/* =====================================================
   TITLE
===================================================== */

.nova-hero-content h1 {

    max-width: 780px;

    margin: 0 0 20px;

    color: var(--brand-white);

    font-size: clamp(38px, 5vw, 68px);

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.nova-hero-content h1 strong {

    display: block;

    margin-top: 6px;

    color: var(--brand-accent);

    font-weight: 800;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.nova-hero-content > p {

    max-width: 650px;

    margin: 0 0 28px;

    color: var(--brand-text);

    font-size: 16px;

    line-height: 2;

    font-weight: 400;
}


/* =====================================================
   BUTTONS
===================================================== */

.nova-hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;
}


.nova-btn {

    min-height: 52px;

    padding: 0 24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border-radius: 12px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* MAIN BUTTON */

.nova-btn-main {

    background:
        linear-gradient(
            135deg,
            var(--brand-accent),
            var(--brand-accent-light)
        );

    color: #fff;

    box-shadow:
        0 12px 30px rgba(244,124,72,0.25);
}


.nova-btn-main:hover {

    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 18px 35px rgba(244,124,72,0.35);
}


.nova-btn-main i {

    font-size: 18px;

    transition: 0.3s ease;
}


.nova-btn-main:hover i {

    transform: translateX(-4px);
}


/* PHONE */

.nova-btn-phone {

    border: 1px solid rgba(255,255,255,0.25);

    background: rgba(255,255,255,0.08);

    color: #fff;

    backdrop-filter: blur(8px);
}


.nova-btn-phone:hover {

    border-color: var(--brand-accent);

    background: rgba(244,124,72,0.12);

    color: #fff;

    transform: translateY(-3px);
}


.nova-btn-phone i {

    color: var(--brand-accent-light);
}


/* =====================================================
   FEATURES
===================================================== */

.nova-hero-features {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;
}


.nova-hero-features span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: rgba(255,255,255,0.82);

    font-size: 12px;

    font-weight: 600;
}


.nova-hero-features i {

    color: var(--brand-accent);

    font-size: 15px;
}


/* =====================================================
   ARROWS
===================================================== */

.nova-hero-arrow {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.18);

    border-radius: 50%;

    background: rgba(7,59,58,0.55);

    color: #fff;

    backdrop-filter: blur(8px);

    transition: 0.3s ease;
}


.nova-hero-arrow:hover {

    border-color: var(--brand-accent);

    background: var(--brand-accent);

    color: #fff;

    transform: scale(1.08);
}


#novaHeroCarousel .carousel-control-prev,
#novaHeroCarousel .carousel-control-next {

    width: 8%;

    z-index: 4;

    opacity: 1;
}


/* =====================================================
   DOTS
===================================================== */

.nova-hero-dots {

    position: absolute;

    z-index: 5;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 8px;
}


.nova-hero-dots button {

    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255,255,255,0.4);

    transition: 0.3s ease;
}


.nova-hero-dots button.active {

    width: 30px;

    border-radius: 20px;

    background: var(--brand-accent);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    #nova-hero {

        height: 680px;
    }

    .nova-hero-content {

        width: 86%;
    }

    .nova-hero-content h1 {

        max-width: 650px;

        font-size: 48px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    #nova-hero {

        height: 680px;
    }


    .nova-hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(4,43,42,0.94),
                rgba(4,43,42,0.68)
            );
    }


    .nova-hero-content {

        width: 88%;

        justify-content: center;

        align-items: flex-start;
    }


    .nova-hero-badge {

        margin-bottom: 15px;

        font-size: 11px;

        padding: 8px 12px;
    }


    .nova-hero-content h1 {

        margin-bottom: 16px;

        font-size: 36px;

        line-height: 1.25;
    }


    .nova-hero-content > p {

        margin-bottom: 22px;

        font-size: 13px;

        line-height: 1.9;
    }


    .nova-hero-buttons {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 9px;
    }


    .nova-btn {

        width: 100%;

        min-height: 49px;
    }


    .nova-hero-features {

        gap: 10px 15px;
    }


    .nova-hero-features span {

        font-size: 10px;
    }


    #novaHeroCarousel .carousel-control-prev,
    #novaHeroCarousel .carousel-control-next {

        display: none;
    }


    .nova-hero-dots {

        bottom: 20px;
    }

}


























/* 
منطقة 2 nova-trust */

/* =====================================================
   NOVA TRUST
===================================================== */

#nova-trust {

    --brand-primary: #073B3A;
    --brand-primary-dark: #042B2A;

    --brand-accent: #F47C48;
    --brand-accent-light: #FF9A6D;

    --brand-text: #526866;
    --brand-border: #E3ECEA;

    position: relative;

    padding: 35px 20px;

    background: #F7FAF9;

    direction: rtl;
}


/* =====================================================
   CONTAINER
===================================================== */

.nova-trust-container {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr
        1.1fr
        1fr;

    border: 1px solid var(--brand-border);

    border-radius: 24px;

    overflow: hidden;

    background: #FFFFFF;

    box-shadow:
        0 15px 50px rgba(7, 59, 58, 0.07);
}


/* =====================================================
   ITEM
===================================================== */

.nova-trust-item {

    position: relative;

    min-height: 205px;

    padding: 30px 28px;

    display: grid;

    grid-template-columns: 55px 1fr;

    grid-template-rows: auto auto;

    column-gap: 17px;

    border-left: 1px solid var(--brand-border);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.nova-trust-item:last-child {

    border-left: 0;
}


/* =====================================================
   NUMBER
===================================================== */

.nova-trust-number {

    position: absolute;

    top: 17px;
    left: 20px;

    color: #DDE7E5;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =====================================================
   ICON
===================================================== */

.nova-trust-icon {

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    grid-row: 1 / 3;

    border-radius: 16px;

    background:
        rgba(244, 124, 72, 0.09);

    color: var(--brand-accent);

    font-size: 22px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* =====================================================
   CONTENT
===================================================== */

.nova-trust-content {

    padding-top: 2px;
}


.nova-trust-content span {

    display: block;

    margin-bottom: 6px;

    color: var(--brand-accent);

    font-size: 11px;

    font-weight: 800;
}


.nova-trust-content h3 {

    margin: 0 0 9px;

    color: var(--brand-primary);

    font-size: 17px;

    font-weight: 800;
}


.nova-trust-content p {

    max-width: 280px;

    margin: 0;

    color: var(--brand-text);

    font-size: 12px;

    line-height: 1.9;
}


/* =====================================================
   FEATURED CARD
===================================================== */

.nova-trust-featured {

    background: var(--brand-primary);

    border-left-color: transparent;
}


.nova-trust-featured .nova-trust-number {

    color: rgba(255,255,255,0.14);
}


.nova-trust-featured .nova-trust-icon {

    background: rgba(244,124,72,0.14);

    color: var(--brand-accent-light);
}


.nova-trust-featured .nova-trust-content span {

    color: var(--brand-accent-light);
}


.nova-trust-featured .nova-trust-content h3 {

    color: #FFFFFF;
}


.nova-trust-featured .nova-trust-content p {

    color: rgba(255,255,255,0.68);
}


/* =====================================================
   CHECK
===================================================== */

.nova-trust-check {

    position: absolute;

    bottom: 25px;
    left: 25px;

    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--brand-accent);

    color: #FFFFFF;

    font-size: 14px;
}


/* =====================================================
   HOVER
===================================================== */

.nova-trust-item:not(.nova-trust-featured):hover {

    background: #FCFEFD;
}


.nova-trust-item:not(.nova-trust-featured):hover
.nova-trust-icon {

    background: var(--brand-accent);

    color: #FFFFFF;

    transform: translateY(-3px);
}


.nova-trust-featured:hover {

    background: var(--brand-primary-dark);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .nova-trust-container {

        grid-template-columns: 1fr;

    }


    .nova-trust-item {

        min-height: auto;

        border-left: 0;

        border-bottom: 1px solid var(--brand-border);

    }


    .nova-trust-item:last-child {

        border-bottom: 0;

    }


    .nova-trust-featured {

        border-bottom-color:
            rgba(255,255,255,0.08);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    #nova-trust {

        padding: 20px 15px;

    }


    .nova-trust-container {

        border-radius: 18px;

    }


    .nova-trust-item {

        padding: 25px 20px;

        grid-template-columns:
            48px 1fr;

        column-gap: 13px;

    }


    .nova-trust-icon {

        width: 48px;
        height: 48px;

        border-radius: 13px;

        font-size: 19px;

    }


    .nova-trust-content h3 {

        font-size: 15px;

    }


    .nova-trust-content p {

        font-size: 11px;

        line-height: 1.8;

    }


    .nova-trust-number {

        top: 13px;

        left: 15px;

    }


    .nova-trust-check {

        bottom: 18px;

        left: 18px;

    }

}

/* نهاية منطقة 2 nova-trust */




























/* بداية منطقة 3 nova-services */
/* =====================================================
   NOVA SERVICES
===================================================== */

#nova-services {

    --brand-primary: #073B3A;
    --brand-primary-dark: #042B2A;

    --brand-accent: #F47C48;
    --brand-accent-light: #FF9A6D;

    --brand-bg: #F7FAF9;
    --brand-card: #FFFFFF;

    --brand-text: #526866;
    --brand-border: #E2EBE9;

    position: relative;

    padding: 100px 20px;

    background: var(--brand-bg);

    direction: rtl;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND DETAIL
===================================================== */

#nova-services::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -220px;
    left: -180px;

    border-radius: 50%;

    background:
        rgba(244, 124, 72, 0.06);

    filter: blur(20px);

    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.nova-services-container {

    position: relative;

    z-index: 1;

    max-width: 1200px;

    margin: auto;
}


/* =====================================================
   HEADER
===================================================== */

.nova-services-heading {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;
}


.nova-heading-main {

    flex-shrink: 0;
}


.nova-section-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: var(--brand-accent);

    font-size: 12px;

    font-weight: 800;
}


.nova-section-kicker i {

    font-size: 14px;
}


.nova-heading-main h2 {

    margin: 0;

    color: var(--brand-primary);

    font-size: clamp(34px, 4vw, 50px);

    line-height: 1.3;

    font-weight: 800;
}


.nova-heading-main h2 strong {

    display: block;

    color: var(--brand-accent);

    font-weight: 800;
}


.nova-services-heading > p {

    max-width: 430px;

    margin: 0 0 5px;

    color: var(--brand-text);

    font-size: 14px;

    line-height: 2;
}


/* =====================================================
   SHOWCASE
===================================================== */

.nova-services-showcase {

    display: grid;

    grid-template-columns:
        0.95fr
        1.45fr;

    gap: 20px;

    align-items: stretch;
}


/* =====================================================
   MAIN SERVICE
===================================================== */

.nova-main-service {

    position: relative;

    padding: 38px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            var(--brand-primary),
            var(--brand-primary-dark)
        );

    color: #FFFFFF;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(7, 59, 58, 0.15);
}


.nova-main-service::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -110px;
    bottom: -120px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.12);
}


.nova-main-service-top {

    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 42px;
}


.nova-service-index {

    color: rgba(255,255,255,0.22);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;
}


.nova-service-status {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 30px;

    background: rgba(255,255,255,0.06);

    color: rgba(255,255,255,0.72);

    font-size: 10px;
}


.nova-service-status i {

    color: var(--brand-accent);

    font-size: 7px;
}


/* =====================================================
   MAIN ICON
===================================================== */

.nova-main-service-icon {

    position: relative;
    z-index: 2;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 18px;

    background: var(--brand-accent);

    color: #FFFFFF;

    font-size: 26px;

    box-shadow:
        0 12px 30px rgba(244,124,72,0.22);
}


/* =====================================================
   MAIN TITLE
===================================================== */

.nova-main-service h3 {

    position: relative;
    z-index: 2;

    margin: 0 0 15px;

    font-size: 27px;

    line-height: 1.5;

    font-weight: 800;
}


.nova-main-service h3 strong {

    display: block;

    color: var(--brand-accent-light);
}


.nova-main-service > p {

    position: relative;
    z-index: 2;

    max-width: 400px;

    margin: 0 0 25px;

    color: rgba(255,255,255,0.68);

    font-size: 13px;

    line-height: 2;
}


/* =====================================================
   MAIN LIST
===================================================== */

.nova-main-service-list {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 11px;

    margin-bottom: 30px;
}


.nova-main-service-list span {

    display: flex;

    align-items: center;

    gap: 7px;

    color: rgba(255,255,255,0.78);

    font-size: 11px;
}


.nova-main-service-list i {

    color: var(--brand-accent);

    font-size: 14px;
}


/* =====================================================
   MAIN BUTTON
===================================================== */

.nova-main-service-button {

    position: relative;
    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 20px;

    border-radius: 11px;

    background: #FFFFFF;

    color: var(--brand-primary);

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    transition: 0.3s ease;
}


.nova-main-service-button:hover {

    background: var(--brand-accent);

    color: #FFFFFF;

    transform: translateY(-3px);
}


/* =====================================================
   SERVICES LIST
===================================================== */

.nova-services-list {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.nova-service-row {

    position: relative;

    min-height: 105px;

    padding: 18px 20px;

    display: grid;

    grid-template-columns:
        35px
        48px
        1fr
        25px;

    align-items: center;

    gap: 14px;

    border: 1px solid var(--brand-border);

    border-radius: 17px;

    background: var(--brand-card);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.nova-service-row:hover {

    border-color:
        rgba(244,124,72,0.35);

    transform: translateX(-5px);

    box-shadow:
        0 12px 30px rgba(7,59,58,0.07);
}


/* =====================================================
   ROW NUMBER
===================================================== */

.nova-row-number {

    color: #B7C6C3;

    font-size: 10px;

    font-weight: 800;
}


/* =====================================================
   ROW ICON
===================================================== */

.nova-row-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        rgba(7,59,58,0.06);

    color: var(--brand-primary);

    font-size: 19px;

    transition: 0.3s ease;
}


.nova-service-row:hover .nova-row-icon {

    background: var(--brand-accent);

    color: #FFFFFF;
}


/* =====================================================
   ROW CONTENT
===================================================== */

.nova-row-content h3 {

    margin: 0 0 5px;

    color: var(--brand-primary);

    font-size: 14px;

    font-weight: 800;
}


.nova-row-content p {

    max-width: 430px;

    margin: 0;

    color: var(--brand-text);

    font-size: 11px;

    line-height: 1.8;
}


/* =====================================================
   ROW ARROW
===================================================== */

.nova-row-arrow {

    color: #B6C5C2;

    font-size: 16px;

    transition: 0.3s ease;
}


.nova-service-row:hover .nova-row-arrow {

    color: var(--brand-accent);

    transform: translateX(-4px);
}


/* =====================================================
   BOTTOM CTA
===================================================== */

.nova-services-bottom {

    margin-top: 22px;

    padding: 22px 25px;

    display: flex;

    align-items: center;

    gap: 18px;

    border-radius: 18px;

    background: #FFFFFF;

    border: 1px solid var(--brand-border);

    box-shadow:
        0 10px 30px rgba(7,59,58,0.04);
}


.nova-bottom-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 14px;

    background: rgba(244,124,72,0.1);

    color: var(--brand-accent);

    font-size: 20px;
}


.nova-bottom-text {

    flex: 1;
}


.nova-bottom-text span {

    display: block;

    margin-bottom: 4px;

    color: #7A8A87;

    font-size: 10px;
}


.nova-bottom-text strong {

    display: block;

    color: var(--brand-primary);

    font-size: 13px;

    font-weight: 800;
}


.nova-bottom-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 20px;

    border-radius: 10px;

    background: var(--brand-accent);

    color: #FFFFFF;

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition: 0.3s ease;
}


.nova-bottom-button:hover {

    background: var(--brand-primary);

    color: #FFFFFF;

    transform: translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    #nova-services {

        padding: 75px 18px;
    }


    .nova-services-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;

        margin-bottom: 40px;
    }


    .nova-services-heading > p {

        max-width: 600px;
    }


    .nova-services-showcase {

        grid-template-columns: 1fr;
    }


    .nova-main-service {

        padding: 35px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    #nova-services {

        padding: 60px 15px;
    }


    .nova-heading-main h2 {

        font-size: 32px;
    }


    .nova-services-heading > p {

        font-size: 12px;

        line-height: 1.9;
    }


    .nova-main-service {

        padding: 27px 22px;

        border-radius: 21px;
    }


    .nova-main-service h3 {

        font-size: 23px;
    }


    .nova-main-service-list {

        grid-template-columns: 1fr;

        gap: 9px;
    }


    .nova-service-row {

        min-height: auto;

        padding: 17px;

        grid-template-columns:
            35px
            45px
            1fr;

        gap: 10px;
    }


    .nova-row-icon {

        width: 45px;
        height: 45px;
    }


    .nova-row-content h3 {

        font-size: 13px;
    }


    .nova-row-content p {

        font-size: 10px;
    }


    .nova-row-arrow {

        display: none;
    }


    .nova-services-bottom {

        align-items: flex-start;

        flex-wrap: wrap;

        padding: 18px;
    }


    .nova-bottom-text {

        width: calc(100% - 70px);

        flex: none;
    }


    .nova-bottom-button {

        width: 100%;

        margin-top: 5px;
    }

}

/* نهاية منطقة 3 nova-services */














































/* بداية منطقة 4 nova-services-journey */

/* =====================================================
   NOVA SERVICES JOURNEY
===================================================== */

#nova-services-journey {

    --nova-primary: #073B3A;
    --nova-primary-dark: #042B2A;

    --nova-accent: #F47C48;
    --nova-accent-light: #FF9A6D;

    --nova-bg: #F7FAF9;
    --nova-white: #FFFFFF;

    --nova-text: #526866;
    --nova-border: #DDE8E5;

    position: relative;

    padding: 110px 20px;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            var(--nova-bg) 100%
        );

    direction: rtl;

    overflow: hidden;
}


/* =====================================================
   CONTAINER
===================================================== */

.nova-journey-container {

    position: relative;

    max-width: 1120px;

    margin: auto;

    z-index: 2;
}


/* =====================================================
   HEADER
===================================================== */

.nova-journey-header {

    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 70px;

    align-items: end;

    margin-bottom: 80px;
}


.nova-journey-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;

    color: var(--nova-accent);

    font-size: 11px;

    font-weight: 800;
}


.nova-journey-label i {

    font-size: 14px;
}


.nova-journey-header h2 {

    margin: 0;

    color: var(--nova-primary);

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -1.5px;
}


.nova-journey-header h2 strong {

    display: block;

    color: var(--nova-accent);

    font-weight: 800;
}


.nova-journey-header > p {

    margin: 0;

    color: var(--nova-text);

    font-size: 13px;

    line-height: 2.1;
}


/* =====================================================
   JOURNEY
===================================================== */

.nova-journey {

    position: relative;

    max-width: 900px;

    margin-right: auto;

    margin-left: auto;
}


/* =====================================================
   STEP
===================================================== */

.nova-journey-step {

    position: relative;

    display: grid;

    grid-template-columns:
        70px
        65px
        1fr;

    gap: 25px;

    min-height: 185px;

    padding-bottom: 45px;
}


/* =====================================================
   SIDE NUMBER
===================================================== */

.nova-step-side {

    position: relative;

    display: flex;

    justify-content: center;
}


.nova-step-number {

    position: relative;

    z-index: 3;

    color: #B9C9C6;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}


.nova-step-line {

    position: absolute;

    top: 28px;

    width: 1px;

    height: calc(100% + 15px);

    background:
        linear-gradient(
            to bottom,
            var(--nova-border),
            transparent
        );
}


/* =====================================================
   ICON
===================================================== */

.nova-step-icon {

    position: relative;

    z-index: 3;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--nova-border);

    border-radius: 19px;

    background: var(--nova-white);

    color: var(--nova-primary);

    font-size: 23px;

    box-shadow:
        0 10px 30px rgba(7,59,58,0.05);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


/* =====================================================
   CONTENT
===================================================== */

.nova-step-content {

    padding-top: 3px;
}


.nova-step-content > span {

    display: block;

    margin-bottom: 8px;

    color: var(--nova-accent);

    font-size: 10px;

    font-weight: 800;
}


.nova-step-content h3 {

    margin: 0 0 10px;

    color: var(--nova-primary);

    font-size: 21px;

    font-weight: 800;
}


.nova-step-content p {

    max-width: 570px;

    margin: 0;

    color: var(--nova-text);

    font-size: 12px;

    line-height: 2;
}


/* =====================================================
   ACTIVE STEP
===================================================== */

.nova-step-active .nova-step-icon {

    border-color: var(--nova-accent);

    background: var(--nova-accent);

    color: #FFFFFF;

    box-shadow:
        0 15px 35px rgba(244,124,72,0.22);
}


.nova-step-active .nova-step-number {

    color: var(--nova-accent);
}


/* =====================================================
   STEP BADGE
===================================================== */

.nova-step-badge {

    position: absolute;

    left: 0;

    top: 0;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border-radius: 20px;

    background:
        rgba(244,124,72,0.09);

    color: var(--nova-accent);

    font-size: 9px;

    font-weight: 800;
}


/* =====================================================
   HOVER
===================================================== */

.nova-journey-step:hover .nova-step-icon {

    transform: translateY(-4px);

    border-color: var(--nova-accent);

    color: var(--nova-accent);
}


.nova-step-active:hover .nova-step-icon {

    color: #FFFFFF;

    background: var(--nova-primary);
}


/* =====================================================
   STATEMENT
===================================================== */

.nova-journey-statement {

    position: relative;

    display: flex;

    align-items: center;

    gap: 30px;

    margin-top: 35px;

    padding: 28px 35px;

    border-radius: 22px;

    background: var(--nova-primary);

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(7,59,58,0.13);
}


.nova-journey-statement::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -90px;
    bottom: -150px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.15);
}


.nova-statement-number {

    position: relative;

    z-index: 2;

    color: rgba(255,255,255,0.12);

    font-size: 45px;

    font-weight: 900;

    line-height: 1;
}


.nova-statement-content {

    position: relative;

    z-index: 2;

    flex: 1;
}


.nova-statement-content span {

    display: block;

    margin-bottom: 5px;

    color: var(--nova-accent-light);

    font-size: 10px;

    font-weight: 800;
}


.nova-statement-content h3 {

    margin: 0;

    color: #FFFFFF;

    font-size: 18px;

    font-weight: 700;
}


.nova-statement-content strong {

    color: var(--nova-accent-light);
}


.nova-statement-icon {

    position: relative;

    z-index: 2;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 50%;

    color: var(--nova-accent);

    font-size: 17px;
}


/* =====================================================
   FINAL CTA
===================================================== */

#nova-final-cta {

    --nova-primary: #073B3A;
    --nova-primary-dark: #042B2A;

    --nova-accent: #F47C48;
    --nova-accent-light: #FF9A6D;

    position: relative;

    padding: 85px 20px;

    background: var(--nova-primary);

    direction: rtl;

    overflow: hidden;
}


#nova-final-cta::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -280px;
    left: -180px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.12);

    filter: blur(10px);
}


#nova-final-cta::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    right: -220px;
    bottom: -250px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.06);
}


/* =====================================================
   CTA CONTAINER
===================================================== */

.nova-final-cta-container {

    position: relative;

    z-index: 2;

    max-width: 1100px;

    min-height: 310px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 70px;
}


/* =====================================================
   CTA CONTENT
===================================================== */

.nova-final-cta-content {

    max-width: 650px;
}


.nova-final-cta-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color: var(--nova-accent-light);

    font-size: 11px;

    font-weight: 800;
}


.nova-final-cta-label i {

    font-size: 15px;
}


.nova-final-cta-content h2 {

    margin: 0 0 15px;

    color: #FFFFFF;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.35;

    font-weight: 800;
}


.nova-final-cta-content h2 strong {

    color: var(--nova-accent-light);
}


.nova-final-cta-content > p {

    max-width: 590px;

    margin: 0 0 27px;

    color: rgba(255,255,255,0.62);

    font-size: 12px;

    line-height: 2;
}


/* =====================================================
   ACTIONS
===================================================== */

.nova-final-cta-actions {

    display: flex;

    align-items: center;

    gap: 10px;
}


.nova-final-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border-radius: 11px;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    transition: 0.3s ease;
}


.nova-final-primary:hover {

    background: #FFFFFF;

    color: var(--nova-primary);

    transform: translateY(-3px);
}


.nova-final-phone {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 18px;

    border: 1px solid rgba(255,255,255,0.13);

    border-radius: 11px;

    color: rgba(255,255,255,0.8);

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: 0.3s ease;
}


.nova-final-phone:hover {

    border-color: var(--nova-accent);

    color: var(--nova-accent-light);
}


.nova-final-phone i {

    color: var(--nova-accent);
}


/* =====================================================
   CTA VISUAL
===================================================== */

.nova-final-visual {

    position: relative;

    width: 260px;
    height: 260px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 50%;

    transform: rotate(-5deg);
}


.nova-final-visual::before {

    content: "";

    position: absolute;

    inset: 17px;

    border: 1px dashed rgba(244,124,72,0.25);

    border-radius: 50%;
}


.nova-final-visual::after {

    content: "";

    position: absolute;

    inset: -20px;

    border: 1px solid rgba(255,255,255,0.04);

    border-radius: 50%;
}


.nova-visual-circle {

    position: relative;

    z-index: 3;

    width: 70px;
    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 28px;

    box-shadow:
        0 15px 40px rgba(244,124,72,0.25);
}


.nova-final-visual span {

    position: relative;

    z-index: 3;

    margin-top: 17px;

    color: rgba(255,255,255,0.5);

    font-size: 10px;
}


.nova-final-visual strong {

    position: relative;

    z-index: 3;

    color: #FFFFFF;

    font-size: 18px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 850px) {

    #nova-services-journey {

        padding: 80px 18px;
    }


    .nova-journey-header {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 55px;
    }


    .nova-final-cta-container {

        gap: 35px;
    }


    .nova-final-visual {

        width: 210px;
        height: 210px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    #nova-services-journey {

        padding: 65px 15px;
    }


    .nova-journey-header h2 {

        font-size: 36px;
    }


    .nova-journey-header > p {

        font-size: 11px;
    }


    .nova-journey-step {

        grid-template-columns:
            35px
            50px
            1fr;

        gap: 12px;

        min-height: 165px;

        padding-bottom: 30px;
    }


    .nova-step-icon {

        width: 50px;
        height: 50px;

        border-radius: 14px;

        font-size: 19px;
    }


    .nova-step-content h3 {

        font-size: 16px;
    }


    .nova-step-content p {

        font-size: 10px;

        line-height: 1.9;
    }


    .nova-step-badge {

        display: none;
    }


    .nova-journey-statement {

        gap: 15px;

        padding: 20px;
    }


    .nova-statement-number {

        font-size: 30px;
    }


    .nova-statement-content h3 {

        font-size: 14px;

        line-height: 1.7;
    }


    /* CTA */

    #nova-final-cta {

        padding: 65px 18px;
    }


    .nova-final-cta-container {

        flex-direction: column;

        align-items: flex-start;

        gap: 45px;
    }


    .nova-final-cta-content h2 {

        font-size: 31px;
    }


    .nova-final-cta-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .nova-final-primary,
    .nova-final-phone {

        width: 100%;
    }


    .nova-final-visual {

        align-self: center;

        width: 190px;
        height: 190px;
    }


    .nova-visual-circle {

        width: 60px;
        height: 60px;

        font-size: 23px;
    }

}


/* نهاية منطقة 4 nova-services-journey */
































/* بداية منطقة 5 nova-service-selector */

/* =====================================================
   NOVA SERVICE SELECTOR
===================================================== */

#nova-service-selector {

    --nova-primary: #073B3A;
    --nova-primary-dark: #042B2A;

    --nova-accent: #F47C48;
    --nova-accent-light: #FF9A6D;

    --nova-bg: #F5F9F8;
    --nova-white: #FFFFFF;

    --nova-text: #526866;
    --nova-border: #DDE8E5;

    position: relative;

    padding: 110px 20px;

    background: var(--nova-bg);

    direction: rtl;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND SHAPE
===================================================== */

#nova-service-selector::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -260px;
    right: -220px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.06);

    pointer-events: none;
}


#nova-service-selector::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -220px;
    left: -150px;

    border-radius: 50%;

    border: 1px solid rgba(7,59,58,0.05);

    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.nova-selector-container {

    position: relative;

    z-index: 2;

    max-width: 1180px;

    margin: auto;
}


/* =====================================================
   HEADER
===================================================== */

.nova-selector-header {

    max-width: 650px;

    margin-bottom: 55px;
}


.nova-selector-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: var(--nova-accent);

    font-size: 11px;

    font-weight: 800;
}


.nova-selector-label i {

    font-size: 14px;
}


.nova-selector-header h2 {

    margin: 0 0 14px;

    color: var(--nova-primary);

    font-size: clamp(36px, 5vw, 58px);

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -1px;
}


.nova-selector-header h2 strong {

    color: var(--nova-accent);
}


.nova-selector-header p {

    max-width: 560px;

    margin: 0;

    color: var(--nova-text);

    font-size: 13px;

    line-height: 2;
}


/* =====================================================
   DISPLAY
===================================================== */

.nova-selector-display {

    position: relative;

    display: grid;

    grid-template-columns:
        0.55fr
        1.15fr
        1fr;

    min-height: 500px;

    border-radius: 30px;

    overflow: hidden;

    background: var(--nova-white);

    border: 1px solid var(--nova-border);

    box-shadow:
        0 25px 70px rgba(7,59,58,0.08);
}


/* =====================================================
   BIG NUMBER
===================================================== */

.nova-selector-big-number {

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle at center,
            rgba(244,124,72,0.10),
            transparent 55%
        );

    color: rgba(7,59,58,0.08);

    font-size: clamp(120px, 15vw, 220px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -12px;
}


/* =====================================================
   MAIN SERVICE
===================================================== */

.nova-selector-main {

    position: relative;

    padding: 55px 45px;

    background: var(--nova-primary);

    color: #FFFFFF;

    overflow: hidden;
}


.nova-selector-main::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -180px;
    left: -100px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.12);
}


.nova-selector-main-icon {

    position: relative;

    z-index: 2;

    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 27px;

    border-radius: 17px;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 25px;

    box-shadow:
        0 15px 35px rgba(244,124,72,0.25);
}


.nova-selector-main > span {

    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 9px;

    color: var(--nova-accent-light);

    font-size: 10px;

    font-weight: 800;
}


.nova-selector-main h3 {

    position: relative;

    z-index: 2;

    margin: 0 0 15px;

    font-size: 27px;

    line-height: 1.45;

    font-weight: 800;
}


.nova-selector-main h3 strong {

    display: block;

    color: var(--nova-accent-light);
}


.nova-selector-main > p {

    position: relative;

    z-index: 2;

    max-width: 390px;

    margin: 0 0 25px;

    color: rgba(255,255,255,0.65);

    font-size: 12px;

    line-height: 2;
}


/* =====================================================
   POINTS
===================================================== */

.nova-selector-points {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-bottom: 28px;
}


.nova-selector-points div {

    display: flex;

    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,0.78);

    font-size: 10px;
}


.nova-selector-points i {

    color: var(--nova-accent);

    font-size: 14px;
}


/* =====================================================
   BUTTON
===================================================== */

.nova-selector-button {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 20px;

    border-radius: 10px;

    background: #FFFFFF;

    color: var(--nova-primary);

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

    transition: 0.3s ease;
}


.nova-selector-button:hover {

    background: var(--nova-accent);

    color: #FFFFFF;

    transform: translateY(-3px);
}


/* =====================================================
   OPTIONS
===================================================== */

.nova-selector-options {

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;

    background: #FCFEFD;
}


/* =====================================================
   OPTION
===================================================== */

.nova-selector-option {

    position: relative;

    display: grid;

    grid-template-columns:
        30px
        50px
        1fr
        20px;

    align-items: center;

    gap: 12px;

    padding: 17px;

    min-height: 105px;

    border: 1px solid var(--nova-border);

    border-radius: 17px;

    background: #FFFFFF;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.nova-selector-option:hover {

    border-color:
        rgba(244,124,72,0.4);

    transform: translateX(-5px);

    box-shadow:
        0 12px 30px rgba(7,59,58,0.07);
}


/* =====================================================
   OPTION NUMBER
===================================================== */

.nova-option-number {

    color: #B9C9C6;

    font-size: 10px;

    font-weight: 800;
}


/* =====================================================
   OPTION ICON
===================================================== */

.nova-option-icon {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(7,59,58,0.06);

    color: var(--nova-primary);

    font-size: 19px;

    transition: 0.3s ease;
}


.nova-selector-option:hover .nova-option-icon {

    background: var(--nova-accent);

    color: #FFFFFF;
}


/* =====================================================
   OPTION CONTENT
===================================================== */

.nova-option-content h3 {

    margin: 0 0 5px;

    color: var(--nova-primary);

    font-size: 13px;

    font-weight: 800;
}


.nova-option-content p {

    margin: 0;

    color: var(--nova-text);

    font-size: 10px;

    line-height: 1.8;
}


/* =====================================================
   OPTION ARROW
===================================================== */

.nova-option-arrow {

    color: #B6C5C2;

    font-size: 15px;

    transition: 0.3s ease;
}


.nova-selector-option:hover .nova-option-arrow {

    color: var(--nova-accent);

    transform: translateX(-4px);
}


/* =====================================================
   BOTTOM
===================================================== */

.nova-selector-bottom {

    margin-top: 18px;

    padding: 20px 25px;

    display: flex;

    align-items: center;

    gap: 15px;

    border: 1px solid var(--nova-border);

    border-radius: 18px;

    background: #FFFFFF;
}


.nova-selector-bottom-icon {

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        rgba(244,124,72,0.1);

    color: var(--nova-accent);

    font-size: 18px;
}


.nova-selector-bottom div:nth-child(2) {

    flex: 1;
}


.nova-selector-bottom span {

    display: block;

    margin-bottom: 4px;

    color: #7A8A87;

    font-size: 9px;
}


.nova-selector-bottom strong {

    color: var(--nova-primary);

    font-size: 12px;

    font-weight: 800;
}


.nova-selector-bottom a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 17px;

    border-radius: 9px;

    background: var(--nova-primary);

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition: 0.3s ease;
}


.nova-selector-bottom a:hover {

    background: var(--nova-accent);

    transform: translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    #nova-service-selector {

        padding: 80px 18px;
    }


    .nova-selector-display {

        grid-template-columns:
            0.3fr
            1fr;
    }


    .nova-selector-big-number {

        display: none;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    #nova-service-selector {

        padding: 65px 15px;
    }


    .nova-selector-header h2 {

        font-size: 36px;
    }


    .nova-selector-header p {

        font-size: 11px;
    }


    .nova-selector-display {

        display: block;

        border-radius: 22px;
    }


    .nova-selector-main {

        padding: 30px 23px;
    }


    .nova-selector-main h3 {

        font-size: 23px;
    }


    .nova-selector-options {

        padding: 13px;
    }


    .nova-selector-option {

        grid-template-columns:
            25px
            45px
            1fr
            15px;

        gap: 8px;

        min-height: 90px;

        padding: 13px;
    }


    .nova-option-icon {

        width: 45px;
        height: 45px;
    }


    .nova-option-content h3 {

        font-size: 12px;
    }


    .nova-option-content p {

        font-size: 9px;
    }


    .nova-selector-bottom {

        flex-wrap: wrap;

        padding: 17px;
    }


    .nova-selector-bottom div:nth-child(2) {

        width: calc(100% - 60px);

        flex: none;
    }


    .nova-selector-bottom a {

        width: 100%;

        justify-content: center;
    }

}


/* نهاية منطقة 5 nova-service-selector */


























/* بداية منطقة 6 nova-experience */

/* =====================================================
   NOVA EXPERIENCE
===================================================== */

#nova-experience {

    --nova-primary: #073B3A;
    --nova-primary-dark: #042B2A;

    --nova-accent: #F47C48;
    --nova-accent-light: #FF9A6D;

    --nova-bg: #F5F9F8;
    --nova-white: #FFFFFF;

    --nova-text: #627571;
    --nova-border: #DDE8E5;

    position: relative;

    padding: 115px 20px;

    background: var(--nova-bg);

    direction: rtl;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND
===================================================== */

#nova-experience::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -350px;
    left: -250px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.055);

    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.nova-experience-container {

    position: relative;

    z-index: 2;

    max-width: 1180px;

    margin: auto;
}


/* =====================================================
   INTRO
===================================================== */

.nova-experience-intro {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 55px;
}


.nova-experience-title {

    max-width: 550px;
}


.nova-experience-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 13px;

    color: var(--nova-accent);

    font-size: 11px;

    font-weight: 800;
}


.nova-experience-label i {

    font-size: 14px;
}


.nova-experience-title h2 {

    margin: 0;

    color: var(--nova-primary);

    font-size: clamp(37px, 5vw, 58px);

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -1px;
}


.nova-experience-title h2 strong {

    display: block;

    color: var(--nova-accent);
}


.nova-experience-intro > p {

    max-width: 390px;

    margin: 0 0 4px;

    color: var(--nova-text);

    font-size: 12px;

    line-height: 2.1;
}


/* =====================================================
   MAIN
===================================================== */

.nova-experience-main {

    display: grid;

    grid-template-columns: 0.95fr 1.05fr;

    min-height: 600px;

    overflow: hidden;

    border-radius: 30px;

    background: var(--nova-white);

    border: 1px solid var(--nova-border);

    box-shadow:
        0 30px 80px rgba(7,59,58,0.08);
}


/* =====================================================
   VISUAL
===================================================== */

.nova-experience-visual {

    position: relative;

    min-height: 600px;

    overflow: hidden;
}


.nova-experience-visual img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.7s ease;
}


.nova-experience-main:hover
.nova-experience-visual img {

    transform: scale(1.04);
}


.nova-experience-visual::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4,43,42,0.05) 25%,
            rgba(4,43,42,0.82) 100%
        );
}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.nova-experience-visual-overlay {

    position: absolute;

    right: 35px;
    bottom: 35px;

    z-index: 3;

    color: #FFFFFF;
}


.nova-experience-visual-overlay span {

    display: block;

    margin-bottom: 6px;

    color: var(--nova-accent-light);

    font-size: 10px;

    font-weight: 800;
}


.nova-experience-visual-overlay strong {

    display: block;

    max-width: 250px;

    font-size: 27px;

    line-height: 1.4;

    font-weight: 900;
}


/* =====================================================
   FLOATING STAT
===================================================== */

.nova-experience-floating {

    position: absolute;

    z-index: 5;

    top: 30px;
    right: 30px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 16px;

    border-radius: 15px;

    background:
        rgba(255,255,255,0.94);

    box-shadow:
        0 15px 35px rgba(0,0,0,0.12);

    backdrop-filter: blur(10px);
}


.nova-experience-floating > i {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: rgba(244,124,72,0.11);

    color: var(--nova-accent);

    font-size: 17px;
}


.nova-experience-floating small {

    display: block;

    margin-bottom: 2px;

    color: #7B8B88;

    font-size: 8px;
}


.nova-experience-floating strong {

    color: var(--nova-primary);

    font-size: 17px;
}


/* =====================================================
   CONTENT
===================================================== */

.nova-experience-content {

    padding: 45px 40px;

    display: flex;

    flex-direction: column;
}


/* =====================================================
   TOTAL
===================================================== */

.nova-experience-total {

    padding-bottom: 30px;

    border-bottom: 1px solid var(--nova-border);
}


.nova-experience-total > span {

    display: block;

    margin-bottom: 7px;

    color: var(--nova-text);

    font-size: 10px;

    font-weight: 700;
}


.nova-total-number {

    display: flex;

    align-items: baseline;

    gap: 6px;

    color: var(--nova-primary);

    line-height: 1;
}


.nova-total-number span {

    font-size: clamp(55px, 6vw, 82px);

    font-weight: 900;

    letter-spacing: -4px;
}


.nova-total-number b {

    color: var(--nova-accent);

    font-size: 28px;
}


.nova-experience-total p {

    margin: 9px 0 0;

    color: #84928F;

    font-size: 10px;
}


/* =====================================================
   SECTORS
===================================================== */

.nova-experience-sectors {

    padding-top: 13px;
}


.nova-sector {

    display: grid;

    grid-template-columns:
        28px
        48px
        1fr
        auto;

    align-items: center;

    gap: 13px;

    padding: 17px 0;

    border-bottom: 1px solid #EDF2F0;

    transition: 0.3s ease;
}


.nova-sector:last-child {

    border-bottom: none;
}


.nova-sector:hover {

    padding-right: 8px;
}


/* =====================================================
   INDEX
===================================================== */

.nova-sector-index {

    color: #B8C7C4;

    font-size: 9px;

    font-weight: 800;
}


/* =====================================================
   ICON
===================================================== */

.nova-sector-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background: rgba(7,59,58,0.055);

    color: var(--nova-primary);

    font-size: 18px;

    transition: 0.3s ease;
}


.nova-sector:hover .nova-sector-icon {

    background: var(--nova-accent);

    color: #FFFFFF;

    transform: rotate(-4deg);
}


/* =====================================================
   INFO
===================================================== */

.nova-sector-info h3 {

    margin: 0 0 4px;

    color: var(--nova-primary);

    font-size: 12px;

    font-weight: 800;
}


.nova-sector-info p {

    margin: 0;

    color: var(--nova-text);

    font-size: 9px;

    line-height: 1.8;
}


/* =====================================================
   COUNT
===================================================== */

.nova-sector-count {

    color: var(--nova-accent);

    font-size: 13px;

    font-weight: 900;

    white-space: nowrap;
}


/* =====================================================
   BOTTOM
===================================================== */

.nova-experience-bottom {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 18px;

    padding: 19px 23px;

    border-radius: 18px;

    background: var(--nova-primary);

    color: #FFFFFF;
}


.nova-bottom-mark {

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: rgba(244,124,72,0.16);

    color: var(--nova-accent-light);

    font-size: 18px;
}


.nova-bottom-text {

    flex: 1;
}


.nova-bottom-text span {

    display: block;

    margin-bottom: 3px;

    color: rgba(255,255,255,0.55);

    font-size: 9px;
}


.nova-bottom-text strong {

    color: #FFFFFF;

    font-size: 12px;

    font-weight: 800;
}


.nova-experience-bottom a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 18px;

    border-radius: 9px;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition: 0.3s ease;
}


.nova-experience-bottom a:hover {

    background: var(--nova-accent-light);

    transform: translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    #nova-experience {

        padding: 85px 18px;
    }


    .nova-experience-intro {

        display: block;
    }


    .nova-experience-intro > p {

        margin-top: 18px;
    }


    .nova-experience-main {

        grid-template-columns: 1fr;
    }


    .nova-experience-visual {

        min-height: 430px;
    }


    .nova-experience-content {

        padding: 35px 25px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    #nova-experience {

        padding: 70px 15px;
    }


    .nova-experience-title h2 {

        font-size: 36px;
    }


    .nova-experience-visual {

        min-height: 360px;
    }


    .nova-experience-floating {

        top: 18px;
        right: 18px;
    }


    .nova-experience-visual-overlay {

        right: 22px;
        bottom: 25px;
    }


    .nova-experience-visual-overlay strong {

        font-size: 22px;
    }


    .nova-experience-content {

        padding: 28px 18px;
    }


    .nova-total-number span {

        font-size: 58px;
    }


    .nova-sector {

        grid-template-columns:
            23px
            43px
            1fr
            auto;

        gap: 8px;

        padding: 14px 0;
    }


    .nova-sector-icon {

        width: 43px;
        height: 43px;

        font-size: 16px;
    }


    .nova-sector-info h3 {

        font-size: 11px;
    }


    .nova-sector-info p {

        font-size: 8px;
    }


    .nova-sector-count {

        font-size: 10px;
    }


    .nova-experience-bottom {

        flex-wrap: wrap;

        padding: 16px;
    }


    .nova-bottom-text {

        width: calc(100% - 60px);

        flex: none;
    }


    .nova-experience-bottom a {

        width: 100%;

        justify-content: center;
    }

}

/* نهاية منطقة 6 nova-experience */













































/* بداية منطقة 7 nova-journey-container */


/* =====================================================
   NOVA PROTECTION JOURNEY
===================================================== */

#nova-journey {

    --nova-primary: #073B3A;
    --nova-primary-dark: #042B2A;

    --nova-accent: #F47C48;
    --nova-accent-light: #FF9A6D;

    --nova-bg: #F5F9F8;
    --nova-white: #FFFFFF;

    --nova-text: #667875;
    --nova-border: #DDE8E5;

    position: relative;

    padding: 120px 20px;

    background: var(--nova-bg);

    direction: rtl;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND SHAPE
===================================================== */

#nova-journey::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -280px;
    bottom: -280px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.055);

    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.nova-journey-container {

    position: relative;

    z-index: 2;

    max-width: 1180px;

    margin: auto;
}


/* =====================================================
   HEADER
===================================================== */

.nova-journey-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 50px;
}


.nova-journey-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 13px;

    color: var(--nova-accent);

    font-size: 11px;

    font-weight: 800;
}


.nova-journey-label i {

    font-size: 14px;
}


.nova-journey-header h2 {

    margin: 0;

    color: var(--nova-primary);

    font-size: clamp(38px, 5vw, 58px);

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -1px;
}


.nova-journey-header h2 strong {

    color: var(--nova-accent);
}


.nova-journey-header > p {

    max-width: 390px;

    margin: 0 0 4px;

    color: var(--nova-text);

    font-size: 12px;

    line-height: 2.1;
}


/* =====================================================
   MAIN
===================================================== */

.nova-journey-main {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    min-height: 590px;

    overflow: hidden;

    border-radius: 30px;

    background: var(--nova-white);

    border: 1px solid var(--nova-border);

    box-shadow:
        0 30px 80px rgba(7,59,58,0.08);
}


/* =====================================================
   IMAGE
===================================================== */

.nova-journey-image {

    position: relative;

    min-height: 590px;

    overflow: hidden;

    background: var(--nova-primary);
}


.nova-journey-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    opacity: 1;

    transition:
        opacity 0.25s ease,
        transform 0.7s ease;
}


.nova-journey-main:hover
.nova-journey-image img {

    transform: scale(1.035);
}


/* =====================================================
   IMAGE SHADE
===================================================== */

.nova-journey-image-shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4,43,42,0.05),
            rgba(4,43,42,0.88)
        );

    pointer-events: none;
}


/* =====================================================
   IMAGE CONTENT
===================================================== */

.nova-journey-image-content {

    position: absolute;

    right: 35px;
    bottom: 35px;

    z-index: 3;

    color: #FFFFFF;
}


.nova-journey-image-content span {

    display: block;

    margin-bottom: 9px;

    color: var(--nova-accent-light);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;

    direction: ltr;
}


.nova-journey-image-content strong {

    display: block;

    font-size: 28px;

    line-height: 1.45;

    font-weight: 900;
}


/* =====================================================
   IMAGE NUMBER
===================================================== */

.nova-journey-image-number {

    position: absolute;

    top: 30px;
    right: 30px;

    z-index: 3;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 17px;

    font-weight: 900;

    box-shadow:
        0 15px 35px rgba(244,124,72,0.25);
}


/* =====================================================
   STEPS
===================================================== */

.nova-journey-steps {

    padding: 28px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;
}


/* =====================================================
   STEP
===================================================== */

.nova-journey-step {

    position: relative;

    display: grid;

    grid-template-columns:
        35px
        55px
        1fr
        35px;

    align-items: center;

    gap: 13px;

    min-height: 145px;

    padding: 20px;

    border: 1px solid transparent;

    border-radius: 20px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        border 0.3s ease,
        transform 0.3s ease;
}


.nova-journey-step:hover {

    background: #F8FBFA;

    transform: translateX(-4px);
}


.nova-journey-step.active {

    background: #F1F7F5;

    border-color: var(--nova-border);
}


/* =====================================================
   STEP NUMBER
===================================================== */

.nova-step-number {

    align-self: flex-start;

    padding-top: 4px;

    color: #B8C7C4;

    font-size: 10px;

    font-weight: 900;
}


.nova-journey-step.active .nova-step-number {

    color: var(--nova-accent);
}


/* =====================================================
   ICON
===================================================== */

.nova-step-icon {

    width: 55px;
    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #EFF5F3;

    color: var(--nova-primary);

    font-size: 19px;

    transition: 0.3s ease;
}


.nova-journey-step.active
.nova-step-icon {

    background: var(--nova-primary);

    color: #FFFFFF;

    box-shadow:
        0 10px 25px rgba(7,59,58,0.15);
}


/* =====================================================
   TEXT
===================================================== */

.nova-step-content span {

    display: block;

    margin-bottom: 5px;

    color: var(--nova-accent);

    font-size: 9px;

    font-weight: 800;
}


.nova-step-content h3 {

    margin: 0 0 7px;

    color: var(--nova-primary);

    font-size: 15px;

    font-weight: 900;
}


.nova-step-content p {

    max-width: 400px;

    margin: 0;

    color: var(--nova-text);

    font-size: 9px;

    line-height: 1.9;
}


/* =====================================================
   ARROW
===================================================== */

.nova-step-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #F1F5F4;

    color: #9BAAA7;

    font-size: 12px;

    transition: 0.3s ease;
}


.nova-journey-step.active
.nova-step-arrow {

    background: var(--nova-accent);

    color: #FFFFFF;
}


/* =====================================================
   BOTTOM
===================================================== */

.nova-journey-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;

    padding: 18px 22px;

    border-radius: 17px;

    background: var(--nova-primary);

    color: #FFFFFF;
}


.nova-journey-trust {

    display: flex;

    align-items: center;

    gap: 10px;
}


.nova-journey-trust i {

    color: var(--nova-accent-light);

    font-size: 15px;
}


.nova-journey-trust span {

    font-size: 10px;

    font-weight: 700;
}


.nova-journey-bottom a {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 20px;

    border-radius: 9px;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none;

    transition: 0.3s ease;
}


.nova-journey-bottom a:hover {

    background: var(--nova-accent-light);

    transform: translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    #nova-journey {

        padding: 85px 18px;
    }


    .nova-journey-header {

        display: block;
    }


    .nova-journey-header > p {

        margin-top: 18px;
    }


    .nova-journey-main {

        grid-template-columns: 1fr;
    }


    .nova-journey-image {

        min-height: 420px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    #nova-journey {

        padding: 70px 15px;
    }


    .nova-journey-header h2 {

        font-size: 36px;
    }


    .nova-journey-image {

        min-height: 350px;
    }


    .nova-journey-image-content {

        right: 22px;
        bottom: 25px;
    }


    .nova-journey-image-content strong {

        font-size: 22px;
    }


    .nova-journey-image-number {

        top: 20px;
        right: 20px;

        width: 50px;
        height: 50px;
    }


    .nova-journey-steps {

        padding: 12px;
    }


    .nova-journey-step {

        grid-template-columns:
            25px
            45px
            1fr
            25px;

        gap: 8px;

        min-height: 125px;

        padding: 14px;
    }


    .nova-step-icon {

        width: 45px;
        height: 45px;

        font-size: 16px;
    }


    .nova-step-content h3 {

        font-size: 12px;
    }


    .nova-step-content p {

        font-size: 8px;
    }


    .nova-step-arrow {

        width: 27px;
        height: 27px;
    }


    .nova-journey-bottom {

        flex-direction: column;

        align-items: stretch;
    }


    .nova-journey-bottom a {

        justify-content: center;
    }

}


/* نهاية منطقة 7 nova-journey-container */
























/* 
بدايمة منطقة 8  nova-protection */


/* =====================================================
   NOVA PROTECTION
===================================================== */

#nova-protection {

    --nova-primary: #073B3A;
    --nova-primary-dark: #042B2A;

    --nova-accent: #F47C48;
    --nova-accent-light: #FF9A6D;

    --nova-bg: #FFFFFF;
    --nova-soft: #F4F8F7;

    --nova-text: #687A76;
    --nova-border: #DDE8E5;

    position: relative;

    padding: 120px 20px;

    background: var(--nova-bg);

    direction: rtl;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND
===================================================== */

#nova-protection::before {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -250px;
    top: 100px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.045);

    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.nova-protection-container {

    position: relative;

    z-index: 2;

    max-width: 1180px;

    margin: auto;
}


/* =====================================================
   TOP
===================================================== */

.nova-protection-top {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 50px;
}


.nova-protection-heading {

    max-width: 600px;
}


.nova-protection-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 13px;

    color: var(--nova-accent);

    font-size: 11px;

    font-weight: 800;
}


.nova-protection-label i {

    font-size: 14px;
}


.nova-protection-heading h2 {

    margin: 0;

    color: var(--nova-primary);

    font-size: clamp(38px, 5vw, 58px);

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -1px;
}


.nova-protection-heading h2 strong {

    color: var(--nova-accent);
}


.nova-protection-top > p {

    max-width: 380px;

    margin: 0 0 5px;

    color: var(--nova-text);

    font-size: 12px;

    line-height: 2.1;
}


/* =====================================================
   VISUAL
===================================================== */

.nova-protection-visual {

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    min-height: 570px;

    overflow: hidden;

    border-radius: 30px;

    background: var(--nova-primary);

    box-shadow:
        0 30px 80px rgba(7,59,58,0.12);
}


/* =====================================================
   IMAGE
===================================================== */

.nova-protection-image {

    position: relative;

    min-height: 570px;

    overflow: hidden;
}


.nova-protection-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}


.nova-protection-visual:hover
.nova-protection-image img {

    transform: scale(1.035);
}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.nova-protection-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4,43,42,0.04) 20%,
            rgba(4,43,42,0.9) 100%
        );
}


/* =====================================================
   IMAGE CAPTION
===================================================== */

.nova-protection-image-caption {

    position: absolute;

    right: 35px;
    bottom: 35px;

    z-index: 3;

    color: #FFFFFF;
}


.nova-protection-image-caption span {

    display: block;

    margin-bottom: 8px;

    color: var(--nova-accent-light);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;

    direction: ltr;
}


.nova-protection-image-caption strong {

    display: block;

    font-size: 30px;

    line-height: 1.45;

    font-weight: 900;
}


/* =====================================================
   IMAGE BADGE
===================================================== */

.nova-protection-badge {

    position: absolute;

    top: 30px;
    right: 30px;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border-radius: 10px;

    background:
        rgba(255,255,255,0.93);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.13);
}


.nova-protection-badge i {

    width: 22px;
    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 11px;
}


.nova-protection-badge span {

    color: var(--nova-primary);

    font-size: 9px;

    font-weight: 800;
}


/* =====================================================
   CONTENT
===================================================== */

.nova-protection-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 50px 45px;

    color: #FFFFFF;
}


.nova-protection-content-label {

    display: block;

    margin-bottom: 15px;

    color: var(--nova-accent-light);

    font-size: 10px;

    font-weight: 800;
}


.nova-protection-content h3 {

    margin: 0;

    color: #FFFFFF;

    font-size: 35px;

    line-height: 1.4;

    font-weight: 900;
}


.nova-protection-content h3 strong {

    color: var(--nova-accent-light);
}


.nova-protection-content > p {

    max-width: 430px;

    margin: 20px 0 28px;

    color: rgba(255,255,255,0.63);

    font-size: 11px;

    line-height: 2.1;
}


/* =====================================================
   POINTS
===================================================== */

.nova-protection-points {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 30px;
}


.nova-protection-point {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 12px;

    background:
        rgba(255,255,255,0.035);

    transition: 0.3s ease;
}


.nova-protection-point:hover {

    background:
        rgba(255,255,255,0.07);

    transform: translateX(-4px);
}


.nova-point-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        rgba(244,124,72,0.13);

    color: var(--nova-accent-light);

    font-size: 15px;
}


.nova-protection-point strong {

    display: block;

    margin-bottom: 2px;

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 800;
}


.nova-protection-point span {

    display: block;

    color: rgba(255,255,255,0.48);

    font-size: 8px;
}


/* =====================================================
   BUTTON
===================================================== */

.nova-protection-button {

    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 21px;

    border-radius: 10px;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 800;

    text-decoration: none;

    transition: 0.3s ease;
}


.nova-protection-button:hover {

    background: var(--nova-accent-light);

    color: #FFFFFF;

    transform: translateY(-2px);
}


/* =====================================================
   FOOTER
===================================================== */

.nova-protection-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 18px;

    padding: 18px 23px;

    border: 1px solid var(--nova-border);

    border-radius: 16px;

    background: var(--nova-soft);
}


/* =====================================================
   FOOTER TITLE
===================================================== */

.nova-protection-footer-title {

    display: flex;

    align-items: center;

    gap: 9px;

    white-space: nowrap;
}


.nova-protection-footer-title i {

    color: var(--nova-accent);

    font-size: 14px;
}


.nova-protection-footer-title span {

    color: var(--nova-primary);

    font-size: 10px;

    font-weight: 800;
}


/* =====================================================
   PROCESS
===================================================== */

.nova-protection-process {

    display: flex;

    align-items: center;

    gap: 15px;

    color: var(--nova-text);
}


.nova-protection-process span {

    font-size: 9px;

    font-weight: 700;

    white-space: nowrap;
}


.nova-protection-process i {

    color: var(--nova-accent);

    font-size: 9px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    #nova-protection {

        padding: 90px 18px;
    }


    .nova-protection-top {

        display: block;
    }


    .nova-protection-top > p {

        margin-top: 18px;
    }


    .nova-protection-visual {

        grid-template-columns: 1fr;
    }


    .nova-protection-image {

        min-height: 420px;
    }


    .nova-protection-content {

        padding: 40px 30px;
    }


    .nova-protection-footer {

        flex-direction: column;

        align-items: flex-start;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    #nova-protection {

        padding: 70px 15px;
    }


    .nova-protection-heading h2 {

        font-size: 36px;
    }


    .nova-protection-image {

        min-height: 350px;
    }


    .nova-protection-image-caption {

        right: 22px;
        bottom: 25px;
    }


    .nova-protection-image-caption strong {

        font-size: 23px;
    }


    .nova-protection-badge {

        top: 18px;
        right: 18px;
    }


    .nova-protection-content {

        padding: 35px 20px;
    }


    .nova-protection-content h3 {

        font-size: 29px;
    }


    .nova-protection-content > p {

        font-size: 10px;
    }


    .nova-protection-footer {

        padding: 16px;
    }


    .nova-protection-process {

        width: 100%;

        flex-wrap: wrap;

        gap: 8px;
    }


    .nova-protection-process i {

        display: none;
    }


    .nova-protection-process span {

        padding: 7px 9px;

        border-radius: 7px;

        background: #FFFFFF;

        font-size: 8px;
    }

}


/* نهاية منطقة 8 nova-protection */






























/* بداية منطقة 9 nova-expertise */


/* =====================================================
   NOVA EXPERTISE
===================================================== */

#nova-expertise {

    --nova-primary: #073B3A;
    --nova-dark: #042B2A;

    --nova-accent: #F47C48;
    --nova-accent-light: #FF9A6D;

    --nova-bg: #F6F9F8;
    --nova-text: #667773;
    --nova-border: #DDE7E4;

    position: relative;

    padding: 120px 20px;

    direction: rtl;

    background: var(--nova-bg);

    overflow: hidden;
}


/* =====================================================
   DECORATION
===================================================== */

#nova-expertise::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: -320px;
    bottom: -300px;

    border-radius: 50%;

    border: 1px solid rgba(7,59,58,0.06);

    box-shadow:
        0 0 0 80px rgba(7,59,58,0.018),
        0 0 0 160px rgba(7,59,58,0.012);

    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.nova-expertise-container {

    position: relative;

    z-index: 2;

    max-width: 1180px;

    margin: auto;
}


/* =====================================================
   HEADER
===================================================== */

.nova-expertise-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 55px;
}


.nova-expertise-title {

    max-width: 650px;
}


.nova-expertise-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: var(--nova-accent);

    font-size: 10px;

    font-weight: 900;
}


.nova-expertise-label i {

    font-size: 14px;
}


.nova-expertise-title h2 {

    margin: 0;

    color: var(--nova-primary);

    font-size: clamp(42px, 6vw, 70px);

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -2px;
}


.nova-expertise-title h2 strong {

    display: block;

    color: var(--nova-accent);
}


.nova-expertise-intro {

    width: 330px;

    padding-bottom: 5px;
}


.nova-expertise-intro > span {

    display: block;

    margin-bottom: 12px;

    color: var(--nova-primary);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;

    direction: ltr;

    text-align: right;
}


.nova-expertise-intro p {

    margin: 0;

    color: var(--nova-text);

    font-size: 11px;

    line-height: 2;
}


/* =====================================================
   MAIN
===================================================== */

.nova-expertise-main {

    position: relative;

    min-height: 520px;

    margin-bottom: 70px;
}


/* =====================================================
   IMAGE
===================================================== */

.nova-expertise-image {

    position: relative;

    width: calc(100% - 120px);

    height: 520px;

    overflow: hidden;

    border-radius: 28px;
}


.nova-expertise-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.8s ease;
}


.nova-expertise-main:hover
.nova-expertise-image img {

    transform: scale(1.035);
}


.nova-expertise-image-shade {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4,43,42,0.03) 25%,
            rgba(4,43,42,0.88) 100%
        );
}


/* =====================================================
   BIG NUMBER
===================================================== */

.nova-expertise-big-number {

    position: absolute;

    top: 25px;
    right: 30px;

    color: rgba(255,255,255,0.22);

    font-size: 105px;

    line-height: 1;

    font-weight: 900;

    direction: ltr;
}


/* =====================================================
   IMAGE TEXT
===================================================== */

.nova-expertise-image-text {

    position: absolute;

    right: 35px;
    bottom: 35px;

    color: #FFFFFF;
}


.nova-expertise-image-text span {

    display: block;

    margin-bottom: 7px;

    color: var(--nova-accent-light);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;

    direction: ltr;
}


.nova-expertise-image-text h3 {

    margin: 0;

    font-size: 34px;

    font-weight: 900;
}


/* =====================================================
   STATUS
===================================================== */

.nova-expertise-status {

    position: absolute;

    left: 30px;
    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

    background:
        rgba(255,255,255,0.94);

    box-shadow:
        0 15px 35px rgba(0,0,0,0.15);
}


.nova-expertise-status > i {

    color: var(--nova-accent);

    font-size: 19px;
}


.nova-expertise-status strong {

    display: block;

    margin-bottom: 2px;

    color: var(--nova-primary);

    font-size: 9px;

    font-weight: 900;
}


.nova-expertise-status span {

    display: block;

    color: var(--nova-text);

    font-size: 7px;
}


/* =====================================================
   FLOATING CARD
===================================================== */

.nova-expertise-floating {

    position: absolute;

    left: 0;

    top: 65px;

    width: 350px;

    padding: 35px;

    border-radius: 22px;

    background: var(--nova-primary);

    box-shadow:
        0 25px 60px rgba(7,59,58,0.22);

    color: #FFFFFF;

    z-index: 5;
}


.nova-expertise-floating-label {

    display: block;

    margin-bottom: 15px;

    color: var(--nova-accent-light);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;

    direction: ltr;
}


.nova-expertise-floating h3 {

    margin: 0;

    font-size: 27px;

    line-height: 1.5;

    font-weight: 900;
}


.nova-expertise-floating h3 strong {

    color: var(--nova-accent-light);
}


.nova-expertise-floating p {

    margin: 15px 0 22px;

    color: rgba(255,255,255,0.58);

    font-size: 10px;

    line-height: 2;
}


.nova-expertise-link {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #FFFFFF;

    font-size: 9px;

    font-weight: 800;

    text-decoration: none;

    transition: 0.3s ease;
}


.nova-expertise-link i {

    color: var(--nova-accent);

    transition: 0.3s ease;
}


.nova-expertise-link:hover {

    color: #FFFFFF;
}


.nova-expertise-link:hover i {

    transform: translateX(-5px);
}


/* =====================================================
   FEATURES
===================================================== */

.nova-expertise-features {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top: 1px solid var(--nova-border);

    border-bottom: 1px solid var(--nova-border);
}


.nova-expertise-feature {

    position: relative;

    display: grid;

    grid-template-columns: auto auto 1fr;

    align-items: center;

    gap: 14px;

    min-height: 125px;

    padding: 20px 25px;
}


.nova-expertise-feature:not(:last-child) {

    border-left: 1px solid var(--nova-border);
}


.nova-expertise-feature-number {

    align-self: flex-start;

    color: rgba(7,59,58,0.25);

    font-size: 9px;

    font-weight: 900;
}


.nova-expertise-feature-icon {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #FFFFFF;

    color: var(--nova-accent);

    box-shadow:
        0 8px 25px rgba(7,59,58,0.06);

    font-size: 15px;
}


.nova-expertise-feature h3 {

    margin: 0 0 5px;

    color: var(--nova-primary);

    font-size: 11px;

    font-weight: 900;
}


.nova-expertise-feature p {

    margin: 0;

    color: var(--nova-text);

    font-size: 8px;

    line-height: 1.9;
}


/* =====================================================
   BOTTOM
===================================================== */

.nova-expertise-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-top: 35px;
}


.nova-expertise-bottom > span {

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--nova-accent);

    color: #FFFFFF;

    font-size: 18px;
}


.nova-expertise-bottom strong {

    flex: 1;

    color: var(--nova-primary);

    font-size: 15px;

    font-weight: 900;
}


.nova-expertise-bottom a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 18px;

    border-radius: 9px;

    background: var(--nova-primary);

    color: #FFFFFF;

    font-size: 9px;

    font-weight: 800;

    text-decoration: none;

    transition: 0.3s ease;
}


.nova-expertise-bottom a:hover {

    background: var(--nova-accent);

    color: #FFFFFF;

    transform: translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    #nova-expertise {

        padding: 90px 18px;
    }


    .nova-expertise-header {

        display: block;
    }


    .nova-expertise-intro {

        width: auto;

        max-width: 500px;

        margin-top: 20px;
    }


    .nova-expertise-image {

        width: 100%;
    }


    .nova-expertise-floating {

        left: 25px;

        width: 310px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    #nova-expertise {

        padding: 75px 15px;
    }


    .nova-expertise-title h2 {

        font-size: 42px;

        letter-spacing: -1px;
    }


    .nova-expertise-main {

        min-height: auto;

        margin-bottom: 45px;
    }


    .nova-expertise-image {

        height: 450px;

        border-radius: 20px;
    }


    .nova-expertise-big-number {

        font-size: 75px;

        top: 20px;

        right: 20px;
    }


    .nova-expertise-image-text {

        right: 22px;

        bottom: 25px;
    }


    .nova-expertise-image-text h3 {

        font-size: 27px;
    }


    .nova-expertise-status {

        left: 18px;

        bottom: 18px;
    }


    .nova-expertise-floating {

        position: relative;

        top: auto;
        left: auto;

        width: calc(100% - 30px);

        margin: -55px auto 0;

        padding: 27px;

        border-radius: 18px;
    }


    .nova-expertise-features {

        display: block;
    }


    .nova-expertise-feature {

        grid-template-columns:
            auto auto 1fr;

        min-height: 100px;

        padding: 18px 10px;
    }


    .nova-expertise-feature:not(:last-child) {

        border-left: 0;

        border-bottom: 1px solid var(--nova-border);
    }


    .nova-expertise-bottom {

        align-items: flex-start;

        flex-wrap: wrap;

        padding-top: 25px;
    }


    .nova-expertise-bottom strong {

        font-size: 13px;
    }


    .nova-expertise-bottom a {

        width: 100%;

        justify-content: center;
    }

}


/* نهاية منطقة 9 nova-expertise */


































/* بداية منطقة 10  stop-premium-contact */


/* =====================================================
   PREMIUM CONTACT
   نفس هوية الموقع
   White / Deep Teal / Orange
===================================================== */

#stop-premium-contact {

    --contact-primary: #073B3A;
    --contact-primary-dark: #042B2A;

    --contact-accent: #F47C48;
    --contact-accent-light: #FF9A6D;

    --contact-bg: #FFFFFF;
    --contact-soft: #F4F8F7;

    --contact-text: #687A76;
    --contact-border: #DDE8E5;

    position: relative;

    padding: 110px 20px 70px;

    background: var(--contact-bg);

    direction: rtl;

    overflow: hidden;
}


/* =====================================================
   BACKGROUND DECORATION
===================================================== */

#stop-premium-contact::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -300px;
    top: 80px;

    border-radius: 50%;

    background:
        rgba(244,124,72,0.045);

    pointer-events: none;
}


#stop-premium-contact::after {

    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -220px;
    bottom: 120px;

    border-radius: 50%;

    background:
        rgba(7,59,58,0.035);

    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.stop-contact-container {

    position: relative;

    z-index: 2;

    width: min(1180px, 100%);

    margin: auto;
}


/* =====================================================
   HEADER
===================================================== */

.stop-contact-header {

    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;
}


.stop-contact-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;

    color: var(--contact-accent);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .3px;
}


.stop-contact-label i {

    font-size: 14px;
}


.stop-contact-header h2 {

    margin: 0 0 15px;

    color: var(--contact-primary);

    font-size: clamp(38px, 5vw, 58px);

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -1px;
}


.stop-contact-header h2 strong {

    color: var(--contact-accent);
}


.stop-contact-header p {

    max-width: 580px;

    margin: auto;

    color: var(--contact-text);

    font-size: 12px;

    line-height: 2.1;
}


/* =====================================================
   MAIN CONTACT BOX
===================================================== */

.stop-contact-layout {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    overflow: hidden;

    min-height: 570px;

    background: #FFFFFF;

    border: 1px solid var(--contact-border);

    border-radius: 30px;

    box-shadow:
        0 30px 80px rgba(7,59,58,0.10);
}


/* =====================================================
   DARK SIDE
===================================================== */

.stop-contact-side {

    position: relative;

    padding: 48px 42px;

    background: var(--contact-primary);

    overflow: hidden;
}


/* decorative circles */

.stop-contact-side::before {

    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    top: -280px;
    left: -180px;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 50%;
}


.stop-contact-side::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -150px;
    bottom: -160px;

    border-radius: 50%;

    background:
        rgba(244,124,72,.09);
}


/* =====================================================
   SIDE TITLE
===================================================== */

.stop-contact-side-title {

    position: relative;

    z-index: 2;

    margin-bottom: 30px;
}


.stop-contact-side-title > span {

    display: block;

    margin-bottom: 10px;

    color: var(--contact-accent);

    font-size: 10px;

    font-weight: 900;
}


.stop-contact-side-title h3 {

    margin: 0;

    color: #FFFFFF;

    font-size: 36px;

    line-height: 1.3;

    font-weight: 900;
}


.stop-contact-side-title h3 strong {

    display: block;

    color: var(--contact-accent-light);
}


/* =====================================================
   CONTACT ITEMS
===================================================== */

.stop-contact-item {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px 0;

    color: #FFFFFF;

    text-decoration: none;

    border-bottom: 1px solid rgba(255,255,255,.10);

    transition: .3s ease;
}


.stop-contact-item:hover {

    color: #FFFFFF;

    transform: translateX(-5px);
}


.stop-contact-item-icon {

    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.10);

    color: var(--contact-accent);

    font-size: 17px;
}


.stop-contact-item-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.stop-contact-item-content small {

    color: rgba(255,255,255,.45);

    font-size: 9px;
}


.stop-contact-item-content strong {

    color: #FFFFFF;

    font-size: 13px;

    font-weight: 900;
}


.stop-contact-item-content span {

    color: rgba(255,255,255,.52);

    font-size: 9px;
}


.stop-contact-item > i {

    color: rgba(255,255,255,.35);

    font-size: 11px;
}


.stop-contact-check {

    color: #66D39A !important;
}


/* =====================================================
   AVAILABILITY
===================================================== */

.stop-contact-availability {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

    padding: 14px;

    background:
        rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 13px;
}


.stop-contact-availability-icon {

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        rgba(244,124,72,.13);

    color: var(--contact-accent);

    font-size: 14px;
}


.stop-contact-availability div {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.stop-contact-availability span {

    color: rgba(255,255,255,.45);

    font-size: 9px;
}


.stop-contact-availability strong {

    color: #FFFFFF;

    font-size: 11px;
}


.stop-contact-availability b {

    color: var(--contact-accent);

    font-size: 15px;
}


/* =====================================================
   FORM AREA
===================================================== */

.stop-contact-form-area {

    padding: 48px;
}


/* =====================================================
   FORM HEADER
===================================================== */

.stop-contact-form-head {

    margin-bottom: 28px;
}


.stop-contact-form-head > span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: var(--contact-accent);

    font-size: 10px;

    font-weight: 900;
}


.stop-contact-form-head h3 {

    margin: 0 0 8px;

    color: var(--contact-primary);

    font-size: 35px;

    line-height: 1.3;

    font-weight: 900;
}


.stop-contact-form-head h3 strong {

    color: var(--contact-accent);
}


.stop-contact-form-head p {

    margin: 0;

    color: var(--contact-text);

    font-size: 11px;

    line-height: 2;
}


/* =====================================================
   FORM
===================================================== */

.stop-contact-form {

    display: flex;

    flex-direction: column;

    gap: 16px;
}


.stop-contact-field {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.stop-contact-field label {

    color: var(--contact-primary);

    font-size: 10px;

    font-weight: 900;
}


.stop-contact-input {

    position: relative;
}


.stop-contact-input > i {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--contact-primary);

    font-size: 13px;

    pointer-events: none;
}


.stop-contact-input input,
.stop-contact-input select {

    width: 100%;

    height: 53px;

    padding:
        0 43px 0 15px;

    background: #F7FAF9;

    border: 1px solid var(--contact-border);

    border-radius: 12px;

    outline: none;

    color: var(--contact-primary);

    font-family: inherit;

    font-size: 12px;

    transition: .3s ease;
}


.stop-contact-input input:focus,
.stop-contact-input select:focus {

    border-color: var(--contact-accent);

    box-shadow:
        0 0 0 4px rgba(244,124,72,.10);

    background: #FFFFFF;
}


.stop-contact-input input::placeholder {

    color: #9BAAA7;
}


.stop-contact-input select {

    appearance: none;

    cursor: pointer;
}


/* =====================================================
   MESSAGE
===================================================== */

.stop-contact-message {

    padding: 10px 13px;

    background: #F4F8F7;

    border: 1px solid var(--contact-border);

    border-radius: 9px;

    color: var(--contact-primary);

    font-size: 10px;
}


/* =====================================================
   SUBMIT
===================================================== */

.stop-contact-submit {

    width: 100%;

    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    border: 0;

    border-radius: 12px;

    background: var(--contact-accent);

    color: #FFFFFF;

    font-family: inherit;

    font-size: 12px;

    font-weight: 900;

    cursor: pointer;

    transition: .3s ease;
}


.stop-contact-submit:hover {

    background: var(--contact-accent-light);

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(244,124,72,.22);
}


/* =====================================================
   TRUST
===================================================== */

.stop-contact-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 3px;
}


.stop-contact-trust span {

    display: flex;

    align-items: center;

    gap: 5px;

    color: var(--contact-text);

    font-size: 8px;
}


.stop-contact-trust i {

    color: var(--contact-accent);

    font-size: 10px;
}


/* =====================================================
   BOTTOM CTA
   مهم:
   نفس اللون الأساسي وليس أصفر
===================================================== */

.stop-contact-bottom {

    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 18px;

    padding: 18px 23px;

    background: var(--contact-primary);

    border: 1px solid rgba(7,59,58,.15);

    border-radius: 16px;

    box-shadow:
        0 18px 45px rgba(7,59,58,.10);

    overflow: hidden;
}


/* زخرفة داخلية */

.stop-contact-bottom::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -100px;
    top: -110px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}


/* =====================================================
   BOTTOM ICON
===================================================== */

.stop-contact-bottom-icon {

    position: relative;

    z-index: 2;

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 11px;

    color: var(--contact-accent);

    font-size: 18px;
}


/* =====================================================
   BOTTOM TEXT
===================================================== */

.stop-contact-bottom-text {

    position: relative;

    z-index: 2;

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.stop-contact-bottom-text strong {

    color: #FFFFFF;

    font-size: 13px;

    font-weight: 900;
}


.stop-contact-bottom-text span {

    color: rgba(255,255,255,.52);

    font-size: 9px;
}


/* =====================================================
   BOTTOM BUTTONS
===================================================== */

.stop-contact-bottom-buttons {

    position: relative;

    z-index: 2;

    display: flex;

    gap: 8px;
}


.stop-contact-bottom-buttons a {

    height: 41px;

    min-width: 105px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 0 14px;

    border-radius: 9px;

    text-decoration: none;

    font-family: inherit;

    font-size: 10px;

    font-weight: 900;

    transition: .3s ease;
}


/* WHATSAPP */

.stop-contact-whatsapp {

    background: #25D366;

    color: #FFFFFF;
}


.stop-contact-whatsapp:hover {

    background: #20bd5b;

    color: #FFFFFF;

    transform: translateY(-2px);
}


/* CALL */

.stop-contact-call {

    background: #FFFFFF;

    color: var(--contact-primary);
}


.stop-contact-call:hover {

    background: var(--contact-accent);

    color: #FFFFFF;

    transform: translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    #stop-premium-contact {

        padding: 90px 18px 55px;
    }


    .stop-contact-layout {

        grid-template-columns: 1fr;
    }


    .stop-contact-side {

        padding: 40px 35px;
    }


    .stop-contact-form-area {

        padding: 40px 35px;
    }


    .stop-contact-bottom {

        flex-wrap: wrap;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    #stop-premium-contact {

        padding: 70px 15px 45px;
    }


    .stop-contact-header {

        margin-bottom: 35px;
    }


    .stop-contact-header h2 {

        font-size: 36px;
    }


    .stop-contact-header p {

        font-size: 11px;
    }


    .stop-contact-layout {

        border-radius: 22px;
    }


    .stop-contact-side {

        padding: 30px 22px;
    }


    .stop-contact-side-title h3 {

        font-size: 29px;
    }


    .stop-contact-form-area {

        padding: 30px 20px;
    }


    .stop-contact-form-head h3 {

        font-size: 29px;
    }


    .stop-contact-bottom {

        padding: 17px;

        align-items: flex-start;

        flex-wrap: wrap;
    }


    .stop-contact-bottom-text {

        min-width:
            calc(100% - 62px);
    }


    .stop-contact-bottom-buttons {

        width: 100%;
    }


    .stop-contact-bottom-buttons a {

        flex: 1;

        min-width: 0;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

    .stop-contact-header h2 {

        font-size: 31px;
    }


    .stop-contact-side {

        padding: 25px 17px;
    }


    .stop-contact-form-area {

        padding: 25px 16px;
    }


    .stop-contact-bottom-text strong {

        font-size: 11px;
    }

}

/* نهاية منطقة  10  stop-premium-contact */























/* فوتر  */


/* =====================================================
   PREMIUM FOOTER
   CLEAR END OF WEBSITE
===================================================== */

.german-footer {

    --footer-primary: #073B3A;
    --footer-primary-dark: #042B2A;

    --footer-accent: #F47C48;
    --footer-accent-light: #FF9A6D;

    --footer-text: #D8E5E2;
    --footer-muted: #91AAA5;

    position: relative;

    direction: rtl;

    overflow: hidden;

    color: #FFFFFF;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(244,124,72,.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(255,255,255,.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #073B3A 0%,
            #063533 48%,
            #042B2A 100%
        );

    font-family: "Alexandria", sans-serif;
}


/* =====================================================
   TOP LIGHT LINE
   يوضح بداية الفوتر
===================================================== */

.german-footer::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--footer-accent) 25%,
            var(--footer-accent-light) 50%,
            var(--footer-accent) 75%,
            transparent 100%
        );

    opacity: .9;
}


/* =====================================================
   BACKGROUND CIRCLES
===================================================== */

.german-footer::after {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    left: -350px;
    top: 120px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.045);

    box-shadow:
        0 0 0 70px rgba(255,255,255,.012),
        0 0 0 140px rgba(255,255,255,.008);

    pointer-events: none;
}


/* =====================================================
   MAIN CONTAINER
===================================================== */

.german-footer-container {

    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 40px));

    margin: auto;

    padding: 85px 0 55px;

    display: grid;

    grid-template-columns:
        1.45fr
        .8fr
        .8fr
        1.1fr;

    gap: 50px;
}


/* =====================================================
   BRAND
===================================================== */

.german-footer-brand {

    max-width: 390px;
}


.german-footer-logo {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 23px;
}


.german-footer-logo-icon {

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.12);

    color: var(--footer-accent);

    font-size: 25px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);
}


.german-footer-logo h3 {

    margin: 0 0 6px;

    color: #FFFFFF;

    font-size: 21px;

    font-weight: 900;
}


.german-footer-logo span {

    color: rgba(255,255,255,.48);

    font-size: 9px;
}


.german-footer-brand > p {

    margin: 0;

    color: var(--footer-muted);

    font-size: 11px;

    line-height: 2.2;
}


/* =====================================================
   FEATURES
===================================================== */

.german-footer-features {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 23px;
}


.german-footer-features span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 12px;

    border-radius: 50px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.08);

    color: rgba(255,255,255,.75);

    font-size: 9px;
}


.german-footer-features i {

    color: var(--footer-accent);

    font-size: 11px;
}


/* =====================================================
   COLUMNS
===================================================== */

.german-footer-column h4,
.german-footer-contact h4 {

    position: relative;

    margin: 3px 0 25px;

    padding-right: 13px;

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 900;
}


.german-footer-column h4::before,
.german-footer-contact h4::before {

    content: "";

    position: absolute;

    right: 0;

    top: 50%;

    width: 4px;
    height: 21px;

    transform: translateY(-50%);

    border-radius: 10px;

    background: var(--footer-accent);
}


.german-footer-column a {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;

    color: rgba(255,255,255,.58);

    text-decoration: none;

    font-size: 10px;

    transition: .3s ease;
}


.german-footer-column a i {

    color: var(--footer-accent);

    font-size: 9px;

    opacity: .7;

    transition: .3s ease;
}


.german-footer-column a:hover {

    color: #FFFFFF;

    transform: translateX(-5px);
}


.german-footer-column a:hover i {

    opacity: 1;

    transform: translateX(-3px);
}


/* =====================================================
   CONTACT
===================================================== */

.german-contact-item {

    min-height: 60px;

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 10px;

    padding: 9px 11px;

    box-sizing: border-box;

    border-radius: 12px;

    color: #FFFFFF;

    text-decoration: none;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid rgba(255,255,255,.08);

    transition: .3s ease;
}


.german-contact-item:hover {

    color: #FFFFFF;

    background:
        rgba(255,255,255,.075);

    border-color:
        rgba(244,124,72,.3);

    transform: translateY(-2px);
}


.german-contact-icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(244,124,72,.10);

    color: var(--footer-accent);

    font-size: 13px;
}


.german-contact-item > span:last-child {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.german-contact-item small {

    color: rgba(255,255,255,.38);

    font-size: 8px;
}


.german-contact-item strong {

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 800;
}


/* =====================================================
   CTA
===================================================== */

.german-footer-action {

    position: relative;

    z-index: 3;

    width: min(1180px, calc(100% - 40px));

    margin: 0 auto 48px;

    padding: 28px 32px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-radius: 20px;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid rgba(255,255,255,.11);

    box-shadow:
        0 25px 60px rgba(0,0,0,.16);

    backdrop-filter: blur(8px);
}


/* CTA decoration */

.german-footer-action::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: -160px;
    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(244,124,72,.08);

    pointer-events: none;
}


/* =====================================================
   CTA TEXT
===================================================== */

.german-footer-action > div {

    position: relative;

    z-index: 2;
}


.german-footer-action-label {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 8px;

    color: var(--footer-accent-light);

    font-size: 9px;

    font-weight: 900;
}


.german-footer-action h2 {

    margin: 0;

    color: #FFFFFF;

    font-size: 23px;

    line-height: 1.7;

    font-weight: 900;
}


.german-footer-action h2 strong {

    color: var(--footer-accent-light);
}


.german-footer-action p {

    margin: 3px 0 0;

    color: rgba(255,255,255,.48);

    font-size: 10px;
}


/* =====================================================
   WHATSAPP
===================================================== */

.german-footer-whatsapp {

    position: relative;

    z-index: 3;

    min-width: 225px;

    padding: 11px 13px;

    display: flex;

    align-items: center;

    gap: 11px;

    box-sizing: border-box;

    border-radius: 12px;

    color: #FFFFFF;

    text-decoration: none;

    background: var(--footer-accent);

    transition: .3s ease;

    box-shadow:
        0 12px 25px rgba(244,124,72,.18);
}


.german-footer-whatsapp:hover {

    color: #FFFFFF;

    background: var(--footer-accent-light);

    transform: translateY(-3px);

    box-shadow:
        0 16px 30px rgba(244,124,72,.25);
}


.german-footer-whatsapp > i {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(255,255,255,.17);

    color: #FFFFFF;

    font-size: 20px;
}


.german-footer-whatsapp span {

    display: flex;

    flex-direction: column;

    gap: 4px;

    font-size: 10px;

    font-weight: 900;
}


.german-footer-whatsapp span small {

    color: rgba(255,255,255,.7);

    font-size: 8px;

    font-weight: 400;
}


.german-footer-whatsapp b {

    margin-right: auto;

    color: #FFFFFF;

    font-size: 12px;
}


/* =====================================================
   BOTTOM
===================================================== */

.german-footer-bottom {

    position: relative;

    z-index: 3;

    background:
        var(--footer-primary-dark);

    border-top:
        1px solid rgba(255,255,255,.08);
}


.german-footer-bottom-inner {

    width: min(1180px, calc(100% - 40px));

    min-height: 78px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 20px;
}


/* =====================================================
   COPYRIGHT
===================================================== */

.german-footer-copy {

    color: rgba(255,255,255,.4);

    font-size: 8px;
}


.german-footer-copy strong {

    color: rgba(255,255,255,.72);

    font-weight: 700;
}


/* =====================================================
   SOCIAL
===================================================== */

.german-footer-social {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;
}


.german-footer-social a {

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: rgba(255,255,255,.55);

    text-decoration: none;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.08);

    transition: .3s ease;
}


.german-footer-social a:hover {

    color: #FFFFFF;

    background: var(--footer-accent);

    border-color: var(--footer-accent);

    transform: translateY(-3px);
}


/* =====================================================
   DEVELOPER
===================================================== */

.german-footer-developer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    color: rgba(255,255,255,.32);

    font-size: 8px;
}


.german-footer-developer a {

    color: rgba(255,255,255,.7);

    text-decoration: none;

    transition: .3s ease;
}


.german-footer-developer a:hover {

    color: var(--footer-accent-light);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .german-footer-container {

        grid-template-columns:
            1.2fr 1fr 1fr;

        gap: 35px;
    }


    .german-footer-brand {

        grid-column: span 3;

        max-width: 650px;
    }


    .german-footer-bottom-inner {

        grid-template-columns: 1fr 1fr;

        padding: 18px 0;
    }


    .german-footer-social {

        justify-content: flex-end;
    }


    .german-footer-developer {

        grid-column: span 2;

        justify-content: center;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .german-footer-container {

        width: calc(100% - 30px);

        padding: 60px 0 40px;

        grid-template-columns: 1fr;

        gap: 32px;
    }


    .german-footer-brand {

        grid-column: auto;

        max-width: none;
    }


    .german-footer-logo h3 {

        font-size: 19px;
    }


    .german-footer-brand > p {

        font-size: 10px;

        line-height: 2.1;
    }


    .german-footer-action {

        width: calc(100% - 30px);

        padding: 23px 18px;

        flex-direction: column;

        align-items: stretch;

        border-radius: 17px;
    }


    .german-footer-action h2 {

        font-size: 19px;
    }


    .german-footer-action p {

        line-height: 1.8;
    }


    .german-footer-whatsapp {

        width: 100%;

        min-width: 0;
    }


    .german-footer-bottom-inner {

        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        padding: 20px 0;

        gap: 16px;
    }


    .german-footer-copy {

        text-align: center;

        line-height: 1.8;
    }


    .german-footer-social {

        justify-content: center;
    }


    .german-footer-developer {

        grid-column: auto;

        justify-content: center;

        flex-wrap: wrap;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

    .german-footer-logo-icon {

        width: 50px;
        height: 50px;

        font-size: 22px;
    }


    .german-footer-logo h3 {

        font-size: 17px;
    }


    .german-footer-logo span {

        font-size: 8px;
    }


    .german-footer-action h2 {

        font-size: 17px;
    }

}



/* نهاية الفوتر  */




































/* هدر */
/* =====================================================
   PREMIUM HEADER
   GERMAN BRAND IDENTITY
===================================================== */

#stop-header {

    --header-primary: #073B3A;
    --header-primary-dark: #042B2A;

    --header-accent: #F47C48;
    --header-accent-light: #FF9A6D;

    --header-bg: #FFFFFF;
    --header-soft: #F4F8F7;

    --header-text: #687A76;
    --header-border: #DDE8E5;

    position: fixed;

    top: 0;
    right: 0;
    left: 0;

    z-index: 9999;

    direction: rtl;

    background: rgba(255,255,255,.94);

    border-bottom:
        1px solid var(--header-border);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    font-family: "Alexandria", sans-serif;

    transition: .3s ease;
}


/* =====================================================
   TOP ACCENT LINE
===================================================== */

#stop-header::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--header-accent),
            var(--header-accent-light),
            var(--header-accent),
            transparent
        );

    opacity: .85;
}


/* =====================================================
   CONTAINER
===================================================== */

.stop-header-container {

    width: min(1200px, calc(100% - 40px));

    min-height: 82px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 28px;

    position: relative;
}


/* =====================================================
   LOGO
===================================================== */

.stop-header-logo {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    text-decoration: none;

    color: var(--header-primary);
}


/* =====================================================
   LOGO ICON
===================================================== */

.stop-logo-icon {

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 14px;

    background: var(--header-primary);

    color: var(--header-accent);

    font-size: 21px;

    box-shadow:
        0 10px 25px rgba(7,59,58,.14);

    position: relative;

    overflow: hidden;
}


.stop-logo-icon::before {

    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    left: -35px;
    top: -35px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.12);
}


.stop-logo-icon i {

    position: relative;

    z-index: 2;
}


/* =====================================================
   LOGO TEXT
===================================================== */

.stop-logo-text {

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.stop-logo-text strong {

    color: var(--header-primary);

    font-size: 17px;

    line-height: 1;

    font-weight: 900;

    white-space: nowrap;
}


.stop-logo-text small {

    color: var(--header-text);

    font-size: 8px;

    font-weight: 500;

    white-space: nowrap;
}


/* =====================================================
   NAVIGATION
===================================================== */

.stop-header-nav {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 4px;
}


.stop-nav-link {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 0 11px;

    color: var(--header-text);

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    border-radius: 9px;

    transition: .3s ease;
}


/* bottom accent */

.stop-nav-link::after {

    content: "";

    position: absolute;

    right: 50%;

    bottom: 3px;

    width: 0;

    height: 2px;

    transform: translateX(50%);

    border-radius: 10px;

    background: var(--header-accent);

    transition: .3s ease;
}


.stop-nav-link:hover {

    color: var(--header-primary);

    background: var(--header-soft);
}


.stop-nav-link:hover::after {

    width: 18px;
}


/* ACTIVE */

.stop-nav-link.active {

    color: var(--header-primary);

    background: var(--header-soft);

    font-weight: 900;
}


.stop-nav-link.active::after {

    width: 22px;
}


/* =====================================================
   CALL BUTTON
===================================================== */

.stop-header-call {

    min-width: 170px;

    padding: 7px 9px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-radius: 13px;

    background: var(--header-primary);

    color: #FFFFFF;

    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(7,59,58,.13);

    transition: .3s ease;
}


.stop-header-call:hover {

    color: #FFFFFF;

    background: var(--header-primary-dark);

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(7,59,58,.18);
}


/* call icon */

.stop-header-call-icon {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    background:
        rgba(244,124,72,.15);

    color: var(--header-accent);

    font-size: 13px;
}


/* call text */

.stop-header-call-text {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.stop-header-call-text small {

    color: rgba(255,255,255,.48);

    font-size: 7px;
}


.stop-header-call-text strong {

    color: #FFFFFF;

    font-size: 10px;

    font-weight: 800;

    direction: ltr;
}


/* =====================================================
   MOBILE BUTTON
===================================================== */

.stop-mobile-menu {

    width: 43px;
    height: 43px;

    display: none;

    align-items: center;
    justify-content: center;

    border: 1px solid var(--header-border);

    border-radius: 11px;

    background: var(--header-soft);

    color: var(--header-primary);

    font-size: 21px;

    cursor: pointer;

    transition: .3s ease;
}


.stop-mobile-menu:hover {

    background: var(--header-primary);

    border-color: var(--header-primary);

    color: #FFFFFF;
}


/* =====================================================
   MOBILE NAVIGATION
===================================================== */

.stop-mobile-navigation {

    position: absolute;

    top: calc(100% + 10px);

    right: 0;
    left: 0;

    padding: 10px;

    display: none;

    flex-direction: column;

    gap: 5px;

    background:
        rgba(255,255,255,.98);

    border:
        1px solid var(--header-border);

    border-radius: 17px;

    box-shadow:
        0 25px 60px rgba(7,59,58,.15);

    opacity: 0;

    transform:
        translateY(-10px);

    transition: .3s ease;
}


/* OPEN */

.stop-mobile-navigation.active {

    display: flex;

    opacity: 1;

    transform: translateY(0);
}


/* mobile links */

.stop-mobile-navigation a {

    min-height: 48px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 0 14px;

    border-radius: 10px;

    color: var(--header-text);

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    transition: .3s ease;
}


.stop-mobile-navigation a i {

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--header-soft);

    color: var(--header-accent);

    font-size: 12px;
}


.stop-mobile-navigation a:hover {

    color: var(--header-primary);

    background: var(--header-soft);
}


.stop-mobile-navigation a:hover i {

    background: var(--header-primary);

    color: #FFFFFF;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .stop-header-container {

        gap: 18px;
    }


    .stop-header-nav {

        gap: 0;
    }


    .stop-nav-link {

        padding: 0 7px;

        font-size: 8px;
    }


    .stop-header-call {

        min-width: 150px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 850px) {

    #stop-header {

        background: rgba(255,255,255,.97);
    }


    .stop-header-container {

        width: calc(100% - 30px);

        min-height: 70px;

        justify-content: space-between;

        gap: 10px;
    }


    .stop-header-nav {

        display: none;
    }


    .stop-header-call {

        display: none;
    }


    .stop-mobile-menu {

        display: flex;
    }


    .stop-logo-icon {

        width: 45px;
        height: 45px;

        border-radius: 12px;

        font-size: 19px;
    }


    .stop-logo-text strong {

        font-size: 15px;
    }


    .stop-logo-text small {

        font-size: 7px;
    }


    .stop-mobile-navigation {

        right: 0;
        left: 0;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .stop-header-container {

        width: calc(100% - 24px);
    }


    .stop-logo-icon {

        width: 42px;
        height: 42px;
    }


    .stop-logo-text strong {

        font-size: 14px;
    }


    .stop-logo-text small {

        font-size: 6px;
    }


    .stop-mobile-menu {

        width: 40px;
        height: 40px;
    }

}




























/* =====================================================
   إخفاء زر الصعود لأعلى نهائياً
   ===================================================== */

#back-to-top,
.back-to-top,
.back-to-top-btn,
.scroll-to-top,
.scroll-top,
#scroll-top,
.scroll-top-btn,
.go-top,
#go-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ________________________________________ */

/* الخطوط */
/* الخط الأساسي للموقع */
body {
    font-family: "Alexandria", sans-serif;
    font-weight: 400;
    font-size: 15px;
}

p {
    font-size: 14px;
    line-height: 1.8;
}
/* العناوين */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Alexandria", sans-serif;
    font-weight: 700;
}

/* النصوص */
p {
    font-size: 14px;
    line-height: 1.8;
}

/* الموبايل */
@media (max-width: 600px) {

    body {
        font-size: 14px;
    }

    p {
        font-size: 13px;
        line-height: 1.8;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 27px;
    }

    h3 {
        font-size: 19px;
    }

}