/**
* 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 */
/* =====================================================
   GERMAN PREMIUM FULL SCREEN HERO
===================================================== */

#german-premium-hero {

    --green: #16C79A;
    --green-dark: #063B35;
    --blue: #246BFD;
    --blue-dark: #071A3D;
    --cyan: #59E1D0;
    --white: #FFFFFF;

    position: relative;

    direction: rtl;

    overflow: hidden;

    background: #063B35;
}


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

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

    height: 720px;

}


#germanPremiumCarousel .carousel-item {

    position: relative;

    background-size: cover;

    background-position: center;

}


/* =====================================================
   FULL SCREEN OVERLAY
===================================================== */

.german-premium-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(4, 30, 55, 0.18) 0%,
            rgba(5, 43, 42, 0.45) 35%,
            rgba(3, 37, 36, 0.88) 72%,
            rgba(3, 29, 31, 0.96) 100%
        );

}


/* GREEN / BLUE LIGHT */

.german-premium-overlay::after {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    right: -180px;

    top: 10%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(22,199,154,0.18),
            transparent 68%
        );

}


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

.german-premium-content {

    position: absolute;

    right: 10%;

    top: 50%;

    transform: translateY(-50%);

    width: 650px;

    max-width: 70%;

    z-index: 3;

}


/* =====================================================
   KICKER
===================================================== */

.german-premium-location {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: var(--cyan);

    font-size: 13px;

    font-weight: 700;

}


.german-premium-location span {

    width: 35px;

    height: 2px;

    background: var(--green);

}


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

.german-premium-content h1 {

    margin: 0;

    color: var(--white);

    font-size: clamp(48px, 6vw, 78px);

    font-weight: 900;

    line-height: 1.18;

    letter-spacing: -2px;

}


.german-premium-content h1 strong {

    color: var(--green);

    font-weight: 900;

}


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

.german-premium-content p {

    max-width: 520px;

    margin: 24px 0 0;

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

    font-size: 16px;

    line-height: 1.9;

}


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

.german-premium-actions {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 32px;

}


/* =====================================================
   WHATSAPP
===================================================== */

.german-whatsapp-btn {

    height: 64px;

    min-width: 210px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 6px 8px;

    background: var(--green);

    border-radius: 12px;

    color: #062D28;

    text-decoration: none;

    transition: 0.35s ease;

}


.german-whatsapp-btn:hover {

    color: #062D28;

    transform: translateY(-4px);

    background: var(--cyan);

}


.german-action-icon {

    width: 51px;

    height: 51px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

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

    font-size: 21px;

}


.german-action-text {

    flex: 1;

    font-size: 15px;

    font-weight: 900;

}


.german-action-text small {

    display: block;

    margin-bottom: 3px;

    font-size: 9px;

    font-weight: 600;

    opacity: 0.65;

}


.german-whatsapp-btn > i {

    margin-left: 7px;

    font-size: 17px;

}


/* =====================================================
   CALL
===================================================== */

.german-call-btn {

    height: 64px;

    min-width: 190px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 6px 15px 6px 7px;

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

    border-radius: 12px;

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

    backdrop-filter: blur(12px);

    color: var(--white);

    text-decoration: none;

    direction: ltr;

    transition: 0.35s ease;

}


.german-call-btn .german-action-icon {

    color: var(--cyan);

    background:
        rgba(89,225,208,0.12);

}


.german-call-btn:hover {

    color: var(--white);

    background: rgba(36,107,253,0.35);

    border-color: var(--blue);

    transform: translateY(-4px);

}


.german-call-btn .german-action-text {

    text-align: left;

}


/* =====================================================
   BOTTOM SLIDE NUMBER
===================================================== */

.german-premium-bottom {

    position: absolute;

    right: 10%;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 12px;

    z-index: 5;

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

    font-size: 11px;

    direction: ltr;

}


.german-premium-bottom span:first-child {

    color: var(--green);

    font-size: 19px;

    font-weight: 900;

}


.german-premium-bottom div {

    width: 65px;

    height: 1px;

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

}


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

.german-premium-arrow {

    position: absolute;

    z-index: 10;

    top: 50%;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateY(-50%);

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

    border-radius: 50%;

    background: rgba(4,30,40,0.35);

    backdrop-filter: blur(8px);

    color: white;

    transition: 0.3s;

}


.german-premium-arrow:hover {

    background: var(--blue);

    border-color: var(--blue);

}


.german-premium-prev {

    right: 30px;

}


.german-premium-next {

    left: 30px;

}


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

@media (max-width: 991px) {

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

        height: 680px;

    }


    .german-premium-content {

        right: 7%;

        max-width: 80%;

    }


    .german-premium-content h1 {

        font-size: 58px;

    }

}


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

@media (max-width: 767px) {

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

        height: 650px;

    }


    .german-premium-overlay {

        background:

            linear-gradient(
                180deg,
                rgba(3,30,35,0.25),
                rgba(3,30,35,0.94)
            );

    }


    .german-premium-content {

        right: 20px;

        top: 50%;

        width: calc(100% - 40px);

        max-width: none;

        text-align: center;

    }


    .german-premium-location {

        justify-content: center;

        font-size: 10px;

    }


    .german-premium-content h1 {

        font-size: 42px;

        letter-spacing: -1px;

    }


    .german-premium-content p {

        margin-right: auto;

        margin-left: auto;

        font-size: 13px;

        line-height: 1.8;

    }


    .german-premium-actions {

        justify-content: center;

        flex-direction: row;

        gap: 8px;

    }


    .german-whatsapp-btn,
    .german-call-btn {

        min-width: 0;

        width: 50%;

        height: 58px;

    }


    .german-action-icon {

        width: 43px;

        height: 43px;

    }


    .german-action-text {

        font-size: 12px;

    }


    .german-call-btn .german-action-text {

        font-size: 10px;

    }


    .german-whatsapp-btn > i {

        display: none;

    }


    .german-premium-arrow {

        display: none;

    }


    .german-premium-bottom {

        right: 50%;

        transform: translateX(50%);

        bottom: 20px;

    }

}


























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

/* =====================================================
   NOVA TRUST
===================================================== */
/* =====================================================
   GERMAN PREMIUM TRUST BOXES
===================================================== */

#german-trust-boxes {

    --green: #087F68;
    --green-light: #16B995;

    --blue: #153B72;
    --blue-light: #2F6FE4;

    --dark: #0B1D2A;

    --bg: #F7F9F7;
    --box: #FFFFFF;

    --text: #10242D;
    --muted: #738087;

    position: relative;

    direction: rtl;

    padding: 105px 0 115px;

    overflow: hidden;

    background: var(--bg);

}


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

.german-trust-bg {

    position: absolute;

    width: 700px;

    height: 700px;

    right: -350px;

    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8,127,104,.09),
            transparent 68%
        );

    pointer-events: none;

}


.german-trust-bg::after {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    left: -700px;

    top: 550px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(47,111,228,.07),
            transparent 70%
        );

}


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

.german-trust-container {

    position: relative;

    width: min(1180px, calc(100% - 40px));

    margin: auto;

}


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

.german-trust-heading {

    max-width: 720px;

    margin: 0 auto 65px;

    text-align: center;

}


.german-trust-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color: var(--green);

    font-size: 12px;

    font-weight: 800;

}


.german-trust-kicker i {

    font-size: 14px;

}


.german-trust-heading h2 {

    margin: 0;

    color: var(--text);

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

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -1.5px;

}


.german-trust-heading h2 strong {

    display: block;

    color: var(--green);

}


.german-trust-heading p {

    max-width: 570px;

    margin: 20px auto 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 2;

}


/* =====================================================
   GRID
===================================================== */

.german-trust-box-grid {

    display: grid;

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

    gap: 18px;

}


/* =====================================================
   BOX
===================================================== */

.german-trust-box {

    position: relative;

    min-height: 345px;

    padding: 35px 32px 25px;

    background: var(--box);

    border: 1px solid #E4EAE7;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 12px 35px
        rgba(13,35,43,.045);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease,
        border-color .45s ease;

}


.german-trust-box:hover {

    transform: translateY(-10px);

    border-color:
        rgba(8,127,104,.35);

    box-shadow:
        0 25px 55px
        rgba(13,35,43,.11);

}


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

.german-trust-box::before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    width: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--green),
            var(--blue-light)
        );

    transition: .55s ease;

}


.german-trust-box:hover::before {

    width: 100%;

}


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

.german-box-number {

    position: absolute;

    left: 18px;

    top: 8px;

    color: #F1F4F2;

    font-size: 100px;

    line-height: 1;

    font-weight: 900;

    transition: .45s ease;

}


.german-trust-box:hover
.german-box-number {

    color: rgba(8,127,104,.065);

    transform:
        translateX(-8px);

}


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

.german-box-icon {

    position: relative;

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 55px;

    border-radius: 15px;

    background:
        #EAF7F3;

    color: var(--green);

    font-size: 21px;

    z-index: 2;

    transition: .45s ease;

}


.german-trust-box:hover
.german-box-icon {

    color: #FFFFFF;

    background: var(--green);

    transform:
        rotate(-6deg)
        scale(1.06);

}


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

.german-box-content {

    position: relative;

    z-index: 2;

}


.german-box-content > span {

    color: var(--green);

    font-size: 10px;

    font-weight: 900;

}


.german-box-content h3 {

    margin: 9px 0 12px;

    color: var(--text);

    font-size: 21px;

    font-weight: 900;

}


.german-box-content p {

    max-width: 290px;

    margin: 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.9;

}


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

.german-box-bottom {

    position: absolute;

    left: 25px;

    right: 25px;

    bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 15px;

    border-top:
        1px solid #EDF0EE;

    color: #A5AFAB;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;

}


.german-box-bottom i {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #E1E7E4;

    border-radius: 50%;

    color: var(--blue);

    font-size: 11px;

    transition: .4s ease;

}


.german-trust-box:hover
.german-box-bottom i {

    color: #FFFFFF;

    background: var(--blue);

    border-color: var(--blue);

    transform: rotate(-45deg);

}


/* =====================================================
   FEATURED BOX
===================================================== */

.german-box-featured {

    background:
        linear-gradient(
            145deg,
            #0B2834,
            #102D3A
        );

    border-color:
        rgba(8,127,104,.25);

}


.german-box-featured
.german-box-number {

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

}


.german-box-featured
.german-box-icon {

    background:
        rgba(22,185,149,.13);

    color:
        var(--green-light);

}


.german-box-featured
.german-box-content h3 {

    color: #FFFFFF;

}


.german-box-featured
.german-box-content p {

    color: #8DA1A8;

}


.german-box-featured
.german-box-bottom {

    border-color:
        rgba(255,255,255,.09);

    color:
        #60747D;

}


.german-box-featured
.german-box-bottom i {

    color:
        var(--green-light);

    border-color:
        rgba(22,185,149,.25);

}


/* =====================================================
   FEATURED GLOW
===================================================== */

.german-box-featured::after {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    left: -110px;

    bottom: -110px;

    border-radius: 50%;

    border: 1px solid
        rgba(22,185,149,.1);

    animation:
        germanTrustPulse 5s ease-in-out infinite;

}


@keyframes germanTrustPulse {

    0%,100% {

        transform: scale(1);

        opacity: .35;

    }

    50% {

        transform: scale(1.25);

        opacity: 1;

    }

}


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

@media (max-width: 850px) {

    .german-trust-box-grid {

        grid-template-columns: 1fr;

        max-width: 550px;

        margin: auto;

    }


    .german-trust-box {

        min-height: 310px;

    }

}


@media (max-width: 576px) {

    #german-trust-boxes {

        padding:
            75px 0 80px;

    }


    .german-trust-container {

        width:
            calc(100% - 28px);

    }


    .german-trust-heading {

        margin-bottom: 40px;

    }


    .german-trust-heading h2 {

        font-size: 39px;

    }


    .german-trust-heading p {

        font-size: 12px;

    }


    .german-trust-box {

        min-height: 295px;

        padding:
            28px 25px 22px;

    }


    .german-box-icon {

        margin-bottom: 42px;

    }

}

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












































































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

#german-protection-map {

    --gpm-green: #079875;
    --gpm-green-light: #19B994;

    --gpm-blue: #164A91;
    --gpm-navy: #071D2A;

    --gpm-bg: #F4F7F5;

    --gpm-text: #102832;
    --gpm-muted: #77868A;

    direction: rtl;

    position: relative;

    padding: 105px 0 45px;

    background: var(--gpm-bg);

    overflow: hidden;

}


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

#german-protection-map::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: -350px;
    left: -200px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(7,152,117,.08),
            transparent 68%
        );

}


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

.gpm-container {

    position: relative;

    width: min(1180px, calc(100% - 38px));

    margin: auto;

    z-index: 2;

}


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

.gpm-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 65px;

}


.gpm-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    color: var(--gpm-green);

    font-size: 10px;

    font-weight: 900;

}


.gpm-header h2 {

    margin: 0;

    color: var(--gpm-text);

    font-size: clamp(42px, 5vw, 67px);

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -2.5px;

}


.gpm-header h2 strong {

    display: block;

    color: var(--gpm-green);

}


.gpm-header > p {

    width: 300px;

    margin: 0;

    padding-right: 20px;

    border-right: 3px solid var(--gpm-green);

    color: var(--gpm-muted);

    font-size: 12px;

    line-height: 2;

}


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

.gpm-main {

    display: grid;

    grid-template-columns: 340px 1fr;

    gap: 70px;

    align-items: center;

}


/* =====================================================
   COPY
===================================================== */

.gpm-copy {

    position: relative;

}


.gpm-copy-number {

    display: block;

    margin-bottom: 15px;

    color: #B9C5C1;

    font-size: 11px;

    font-weight: 900;

}


.gpm-copy h3 {

    margin: 0 0 18px;

    color: var(--gpm-text);

    font-size: 38px;

    line-height: 1.15;

    font-weight: 900;

}


.gpm-copy h3 strong {

    color: var(--gpm-green);

}


.gpm-copy > p {

    max-width: 310px;

    margin: 0 0 25px;

    color: var(--gpm-muted);

    font-size: 12px;

    line-height: 2;

}


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

.gpm-copy-list {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-bottom: 30px;

}


.gpm-copy-list div {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--gpm-text);

    font-size: 10px;

    font-weight: 800;

}


.gpm-copy-list i {

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #E1F2EC;

    color: var(--gpm-green);

    font-size: 12px;

}


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

.gpm-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    padding: 14px 20px;

    border-radius: 9px;

    background: var(--gpm-blue);

    color: #FFFFFF;

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

}


.gpm-button i {

    font-size: 13px;

}


/* =====================================================
   DIAGRAM
===================================================== */

.gpm-diagram {

    position: relative;

    width: 590px;

    height: 590px;

    max-width: 100%;

    margin: auto;

}


/* =====================================================
   RINGS
===================================================== */

.gpm-ring {

    position: absolute;

    border-radius: 50%;

    border: 1px solid #D6E2DD;

}


.gpm-ring-one {

    width: 500px;

    height: 500px;

    top: 45px;

    left: 45px;

}


.gpm-ring-two {

    width: 350px;

    height: 350px;

    top: 120px;

    left: 120px;

    border-color: #C7DBD4;

}


/* =====================================================
   LINES
===================================================== */

.gpm-line {

    position: absolute;

    height: 1px;

    background: #BFD3CC;

    transform-origin: right center;

}


.gpm-line-one {

    width: 155px;

    top: 215px;

    right: 175px;

    transform: rotate(-43deg);

}


.gpm-line-two {

    width: 155px;

    top: 365px;

    right: 175px;

    transform: rotate(43deg);

}


.gpm-line-three {

    width: 170px;

    top: 290px;

    left: 105px;

}


/* =====================================================
   CENTER
===================================================== */

.gpm-center {

    position: absolute;

    top: 195px;

    left: 195px;

    width: 200px;

    height: 200px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--gpm-navy);

    border: 10px solid #E4EFEB;

    box-shadow:
        0 0 0 1px #C9D9D4;

    z-index: 10;

}


.gpm-center-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 9px;

    border-radius: 50%;

    background: rgba(25,185,148,.15);

    color: var(--gpm-green-light);

    font-size: 21px;

}


.gpm-center span {

    color: #FFFFFF;

    font-size: 17px;

    font-weight: 900;

}


.gpm-center strong {

    color: var(--gpm-green-light);

    font-size: 20px;

    font-weight: 900;

}


.gpm-center small {

    margin-top: 6px;

    color: #70858D;

    font-size: 6px;

    letter-spacing: 2px;

}


/* =====================================================
   OUTER ORBIT
===================================================== */

.gpm-orbit {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    z-index: 5;

    animation: gpm-orbit-rotate 22s linear infinite;

    transform-origin: center center;

}


/* =====================================================
   CIRCULAR NODES
===================================================== */

.gpm-node {

    position: absolute;

    width: 120px;

    height: 120px;

    padding: 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    text-align: center;

    background: #FFFFFF;

    border: 1px solid #DCE6E1;

    border-radius: 50%;

    box-shadow:
        0 8px 25px rgba(7, 29, 42, .08);

}


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

.gpm-node-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 0 7px;

    border-radius: 50%;

    background: #EAF6F2;

    color: var(--gpm-green);

    font-size: 17px;

}


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

.gpm-node span {

    display: block;

    margin-bottom: 3px;

    color: var(--gpm-text);

    font-size: 11px;

    font-weight: 900;

}


.gpm-node small {

    color: #97A5A5;

    font-size: 6px;

}


/* =====================================================
   5 NODE POSITIONS
===================================================== */

/* 01 — بق الفراش */

.gpm-node-top {

    top: 0;

    left: 235px;

}


/* 02 — الصراصير */

.gpm-node-right {

    top: 145px;

    right: 10px;

}


/* 03 — سوس الخشب */

.gpm-node-bottom-right {

    right: 80px;

    bottom: 25px;

}


/* 04 — النمل */

.gpm-node-bottom-left {

    left: 80px;

    bottom: 25px;

}


/* 05 — الفئران */

.gpm-node-left {

    top: 145px;

    left: 10px;

}


/* =====================================================
   KEEP TEXT & ICONS STRAIGHT
===================================================== */

.gpm-orbit .gpm-node {

    animation:
        gpm-node-counter-rotate 22s linear infinite;

    transform-origin: center center;

}


/* =====================================================
   ORBIT ROTATION
===================================================== */

@keyframes gpm-orbit-rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


/* =====================================================
   COUNTER ROTATION
===================================================== */

@keyframes gpm-node-counter-rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(-360deg);

    }

}


/* =====================================================
   LABELS
===================================================== */

.gpm-label {

    position: absolute;

    padding: 6px 10px;

    background: #FFFFFF;

    border: 1px solid #DDE6E2;

    border-radius: 20px;

    color: #83918F;

    font-size: 7px;

    font-weight: 900;

}


.gpm-label-one {

    top: 145px;

    right: 115px;

}


.gpm-label-two {

    top: 425px;

    right: 115px;

}


.gpm-label-three {

    top: 285px;

    left: 175px;

}


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

.gpm-bottom {

    display: grid;

    grid-template-columns:
        130px 130px 130px 1fr;

    align-items: center;

    margin-top: 55px;

    border-top: 1px solid #DCE4E1;

    border-bottom: 1px solid #DCE4E1;

}


.gpm-bottom > div {

    padding: 18px 15px;

    color: #71807D;

    font-size: 9px;

    font-weight: 900;

    border-left: 1px solid #DCE4E1;

}


.gpm-bottom span {

    margin-left: 7px;

    color: var(--gpm-green);

    font-size: 9px;

}


.gpm-bottom-final {

    text-align: left;

    color: var(--gpm-text) !important;

    font-size: 10px !important;

}


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

@media (max-width: 950px) {

    .gpm-main {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    .gpm-copy {

        max-width: 600px;

        margin: auto;

        text-align: center;

    }


    .gpm-copy > p {

        margin-left: auto;

        margin-right: auto;

    }


    .gpm-copy-list {

        align-items: center;

    }


    .gpm-header {

        display: block;

    }


    .gpm-header > p {

        margin-top: 25px;

    }

}


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

@media (max-width: 650px) {

    #german-protection-map {

        padding: 75px 0 35px;

    }


    .gpm-container {

        width: calc(100% - 24px);

    }


    .gpm-header h2 {

        font-size: 43px;

    }


    .gpm-header > p {

        width: auto;

    }


    /* ================================
       DIAGRAM
    ================================= */

    .gpm-diagram {

        width: 350px;

        height: 350px;

    }


    /* ================================
       RINGS
    ================================= */

    .gpm-ring-one {

        width: 300px;

        height: 300px;

        top: 25px;

        left: 25px;

    }


    .gpm-ring-two {

        width: 215px;

        height: 215px;

        top: 67px;

        left: 67px;

    }


    /* ================================
       CENTER
    ================================= */

    .gpm-center {

        width: 125px;

        height: 125px;

        top: 112px;

        left: 112px;

        border-width: 6px;

    }


    .gpm-center-icon {

        width: 30px;

        height: 30px;

        font-size: 14px;

        margin-bottom: 4px;

    }


    .gpm-center span {

        font-size: 11px;

    }


    .gpm-center strong {

        font-size: 13px;

    }


    .gpm-center small {

        font-size: 4px;

    }


    /* ================================
       5 CIRCULAR NODES
    ================================= */

    .gpm-node {

        width: 70px;

        height: 70px;

        padding: 5px;

        border-radius: 50%;

    }


    .gpm-node-icon {

        width: 23px;

        height: 23px;

        margin-bottom: 2px;

        border-radius: 50%;

        font-size: 9px;

    }


    .gpm-node span {

        font-size: 7px;

        margin-bottom: 2px;

    }


    .gpm-node small {

        font-size: 4px;

    }


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

    /* بق الفراش */

    .gpm-node-top {

        top: 0;

        left: 140px;

    }


    /* الصراصير */

    .gpm-node-right {

        top: 100px;

        right: 0;

    }


    /* سوس الخشب */

    .gpm-node-bottom-right {

        right: 35px;

        bottom: 18px;

    }


    /* النمل */

    .gpm-node-bottom-left {

        left: 35px;

        bottom: 18px;

    }


    /* الفئران */

    .gpm-node-left {

        top: 100px;

        left: 0;

    }


    /* ================================
       LINES
    ================================= */

    .gpm-line-one {

        width: 80px;

        top: 126px;

        right: 105px;

    }


    .gpm-line-two {

        width: 80px;

        top: 223px;

        right: 105px;

    }


    .gpm-line-three {

        width: 85px;

        top: 175px;

        left: 60px;

    }


    /* ================================
       LABELS
    ================================= */

    .gpm-label {

        display: none;

    }


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

    .gpm-bottom {

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

    }


    .gpm-bottom-final {

        display: none;

    }

}

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














































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


/* =========================================================
   VARIABLES
========================================================= */

#german-real-action {

    --gra-green: #079875;
    --gra-green-light: #19B994;
    --gra-blue: #164A91;
    --gra-navy: #071D2A;

    --gra-bg: #F4F7F5;
    --gra-text: #102832;
    --gra-muted: #77868A;

    direction: rtl;

    padding: 105px 0 55px;

    background: var(--gra-bg);

    overflow: hidden;
}


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

.gra-container {

    width: min(1180px, calc(100% - 38px));

    margin: auto;
}


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

.gra-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 50px;
}


.gra-kicker {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;

    color: var(--gra-green);

    font-size: 10px;

    font-weight: 900;
}


.gra-kicker i {

    font-size: 13px;
}


.gra-header h2 {

    margin: 0;

    color: var(--gra-text);

    font-size: clamp(40px, 5vw, 66px);

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -2px;
}


.gra-header h2 strong {

    display: block;

    color: var(--gra-green);

    min-width: 300px;
}


.gra-header > p {

    width: 310px;

    margin: 0;

    padding-right: 20px;

    border-right: 3px solid var(--gra-green);

    color: var(--gra-muted);

    font-size: 11px;

    line-height: 2;
}


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

.gra-scene {

    position: relative;

    height: 520px;

    overflow: hidden;

    isolation: isolate;

    border-radius: 28px;

    background: #DCE7E3;

    border: 1px solid #D0DDD8;

    box-shadow:
        0 30px 80px rgba(7,29,42,.10);
}


/* =========================================================
   ROOM
========================================================= */

.gra-room {

    position: absolute;

    inset: 0;
}


/* =========================================================
   WALL
========================================================= */

.gra-wall {

    position: absolute;

    inset: 0 0 110px;

    background:
        linear-gradient(
            115deg,
            #FAFCFB 0%,
            #F1F6F3 42%,
            #E1EBE7 100%
        );
}


.gra-wall::after {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .22;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 5px,
            rgba(7,29,42,.018) 6px,
            transparent 7px
        );

    pointer-events: none;
}


/* =========================================================
   WALL LIGHT
========================================================= */

.gra-wall-light {

    position: absolute;

    width: 650px;

    height: 470px;

    top: -170px;

    right: 8%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.9),
            rgba(255,255,255,.35) 35%,
            transparent 72%
        );

    pointer-events: none;
}


/* =========================================================
   FLOOR
========================================================= */

.gra-floor {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 112px;

    background:
        linear-gradient(
            180deg,
            #D2DEDA 0%,
            #C5D3CE 100%
        );

    border-top: 1px solid #BCCDC7;

    z-index: 1;
}


.gra-floor::before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 32px;

    height: 1px;

    background:
        rgba(7,29,42,.09);
}


.gra-floor::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 90px,
            rgba(7,29,42,.035) 91px,
            transparent 92px
        );
}


/* =========================================================
   FLOOR SHADOW
========================================================= */

.gra-floor-shadow {

    position: absolute;

    width: 400px;

    height: 60px;

    left: 50%;

    bottom: 65px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(7,29,42,.13);

    filter: blur(20px);

    z-index: 2;

    animation:
        floorShadow 3s ease-in-out infinite;
}


@keyframes floorShadow {

    0%,
    100% {

        transform:
            translateX(-50%)
            scale(.85);

        opacity: .5;
    }

    50% {

        transform:
            translateX(-50%)
            scale(1.05);

        opacity: .8;
    }
}


/* =========================================================
   WINDOW
========================================================= */

.gra-window {

    position: absolute;

    width: 180px;

    height: 130px;

    top: 50px;

    left: 55px;

    background: #F8FBFA;

    border: 7px solid #D1DED9;

    box-shadow:
        0 15px 30px rgba(7,29,42,.07);

    z-index: 2;
}


.gra-window span {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(25,185,148,.16),
            rgba(22,74,145,.13)
        );
}


.gra-window span::before {

    content: "";

    position: absolute;

    width: 5px;

    height: 100%;

    left: 50%;

    background: #D1DED9;
}


.gra-window span::after {

    content: "";

    position: absolute;

    width: 100%;

    height: 5px;

    top: 50%;

    background: #D1DED9;
}


/* =========================================================
   DECOR
========================================================= */

.gra-decor {

    position: absolute;

    z-index: 2;

    border-radius: 50%;

    opacity: .35;
}


.decor-one {

    width: 90px;

    height: 90px;

    right: 80px;

    top: 80px;

    border: 1px solid rgba(7,152,117,.25);
}


.decor-two {

    width: 40px;

    height: 40px;

    right: 115px;

    top: 105px;

    background: rgba(7,152,117,.06);
}


/* =========================================================
   STATUS
========================================================= */

.gra-status {

    position: absolute;

    top: 22px;

    right: 22px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 15px;

    border-radius: 30px;

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

    border: 1px solid #D7E3DE;

    box-shadow:
        0 8px 20px rgba(7,29,42,.06);

    color: var(--gra-text);

    font-size: 8px;

    font-weight: 900;

    z-index: 30;

    backdrop-filter:
        blur(8px);
}


.gra-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--gra-green);

    box-shadow:
        0 0 0 5px rgba(7,152,117,.1);

    animation:
        statusBlink 1.5s infinite;
}


@keyframes statusBlink {

    0%,
    100% {

        opacity: 1;
    }

    50% {

        opacity: .35;
    }
}


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

.gra-message {

    position: absolute;

    left: 50%;

    top: 48%;

    transform: translate(-50%, -50%);

    width: 500px;

    text-align: center;

    z-index: 8;

    pointer-events: none;
}


.gra-message-small {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 12px;

    color: var(--gra-green);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.gra-message-small span {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--gra-green);

    box-shadow:
        0 0 0 6px rgba(7,152,117,.08);
}


.gra-goodbye {

    color: var(--gra-text);

    font-size: clamp(48px, 6vw, 80px);

    line-height: .95;

    font-weight: 900;

    letter-spacing: -3px;
}


.gra-pest-name {

    margin-top: 7px;

    color: var(--gra-green);

    font-size: clamp(42px, 5vw, 70px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -3px;

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.gra-typing-line {

    min-height: 24px;

    margin-top: 18px;

    color: #81918E;

    font-size: 10px;

    font-weight: 700;
}


.gra-cursor {

    display: inline-block;

    width: 2px;

    height: 13px;

    margin-right: 3px;

    vertical-align: middle;

    background: var(--gra-green);

    animation:
        cursorBlink .7s infinite;
}


@keyframes cursorBlink {

    0%,
    45% {

        opacity: 1;
    }

    46%,
    100% {

        opacity: 0;
    }
}


/* =========================================================
   PEST
========================================================= */

.gra-pest {

    position: absolute;

    left: 100%;

    bottom: 82px;

    width: 85px;

    height: 75px;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

    opacity: 0;
}


.gra-pest-icon {

    font-size: 58px;

    line-height: 1;

    filter:
        drop-shadow(
            0 9px 5px rgba(0,0,0,.20)
        );

    transform:
        scaleX(-1);
}


/* =========================================================
   RUN ANIMATION
========================================================= */

.gra-pest.run {

    animation:
        pestRun 4.8s cubic-bezier(.45,.05,.55,.95) forwards;
}


@keyframes pestRun {

    0% {

        left: 105%;

        bottom: 82px;

        opacity: 0;

        transform:
            translateY(0)
            rotate(0deg)
            scale(.75);
    }


    7% {

        opacity: 1;
    }


    15% {

        transform:
            translateY(-4px)
            rotate(-5deg)
            scale(.9);
    }


    23% {

        transform:
            translateY(2px)
            rotate(4deg)
            scale(1);
    }


    31% {

        transform:
            translateY(-5px)
            rotate(-4deg)
            scale(1);
    }


    40% {

        transform:
            translateY(2px)
            rotate(5deg)
            scale(1.03);
    }


    50% {

        left: 55%;

        transform:
            translateY(-4px)
            rotate(-3deg)
            scale(1);
    }


    62% {

        left: 38%;

        transform:
            translateY(3px)
            rotate(4deg)
            scale(.98);
    }


    72% {

        left: 22%;

        opacity: 1;

        transform:
            translateY(-3px)
            rotate(-5deg)
            scale(.95);
    }


    82% {

        left: 8%;

        opacity: .85;

        transform:
            translateY(3px)
            rotate(5deg)
            scale(.9);
    }


    91% {

        left: -10%;

        opacity: .35;

        transform:
            translateY(-5px)
            rotate(-8deg)
            scale(.8);
    }


    100% {

        left: -18%;

        opacity: 0;

        transform:
            translateY(10px)
            rotate(0deg)
            scale(.65);
    }
}


/* =========================================================
   TRAIL
========================================================= */

.gra-trail {

    position: absolute;

    left: 5%;

    bottom: 98px;

    width: 280px;

    height: 30px;

    z-index: 3;

    pointer-events: none;

    opacity: .7;
}


.gra-trail span {

    position: absolute;

    bottom: 0;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: rgba(7,152,117,.22);

    animation:
        trailPulse 1.5s infinite;
}


.gra-trail span:nth-child(1) {

    left: 0;

    animation-delay: -.2s;
}


.gra-trail span:nth-child(2) {

    left: 55px;

    width: 5px;

    height: 5px;

    animation-delay: -.4s;
}


.gra-trail span:nth-child(3) {

    left: 105px;

    animation-delay: -.6s;
}


.gra-trail span:nth-child(4) {

    left: 160px;

    width: 5px;

    height: 5px;

    animation-delay: -.8s;
}


.gra-trail span:nth-child(5) {

    left: 215px;

    animation-delay: -1s;
}


@keyframes trailPulse {

    0%,
    100% {

        opacity: .2;

        transform: scale(.7);
    }

    50% {

        opacity: .7;

        transform: scale(1.3);
    }
}


/* =========================================================
   SUCCESS
========================================================= */

.gra-success {

    position: absolute;

    left: 30px;

    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 13px;

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

    border: 1px solid #D8E4DF;

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(7,29,42,.08);

    z-index: 25;

    backdrop-filter:
        blur(8px);

    transition:
        opacity .35s ease,
        transform .35s ease;
}


.gra-success-icon {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #E3F3ED;

    color:
        var(--gra-green);

    font-size: 15px;
}


.gra-success span {

    display: block;

    margin-bottom: 3px;

    color: #91A09D;

    font-size: 5px;

    letter-spacing: 2px;
}


.gra-success strong {

    display: block;

    color: var(--gra-text);

    font-size: 9px;
}


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

.gra-action-text {

    position: absolute;

    right: 30px;

    bottom: 35px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    z-index: 15;
}


.gra-action-text span {

    color: #92A29E;

    font-size: 6px;

    letter-spacing: 3px;

    font-weight: 900;
}


.gra-action-text strong {

    color: var(--gra-text);

    font-size: 14px;

    font-weight: 900;
}


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

.gra-steps {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 32px;
}


.gra-step {

    display: flex;

    align-items: center;

    gap: 10px;
}


.gra-step > span {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #E5F2ED;

    color:
        var(--gra-green);

    font-size: 8px;

    font-weight: 900;
}


.gra-step small {

    display: block;

    margin-bottom: 3px;

    color: #9AA8A5;

    font-size: 5px;

    letter-spacing: 1px;
}


.gra-step strong {

    display: block;

    color: var(--gra-text);

    font-size: 9px;
}


.gra-step-line {

    width: 50px;

    height: 1px;

    background:
        #D6E1DD;
}


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

#gra-cta {

    direction: rtl;

    padding: 85px 0;

    background:
        var(--gra-navy);
}


.gra-cta-container {

    width: min(1180px, calc(100% - 38px));

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;
}


.gra-cta-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;

    color:
        var(--gra-green-light);

    font-size: 10px;

    font-weight: 900;
}


.gra-cta-content h2 {

    margin: 0 0 18px;

    color: #FFFFFF;

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

    line-height: 1.05;

    font-weight: 900;
}


.gra-cta-content h2 strong {

    display: block;

    color:
        var(--gra-green-light);
}


.gra-cta-content p {

    max-width: 500px;

    margin: 0 0 28px;

    color:
        #91A1A6;

    font-size: 10px;

    line-height: 2;
}


.gra-buttons {

    display: flex;

    align-items: center;

    gap: 12px;
}


.gra-whatsapp {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding: 15px 20px;

    border-radius: 10px;

    background:
        var(--gra-green);

    color: #FFFFFF;

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    transition:
        transform .25s ease,
        background .25s ease;
}


.gra-whatsapp:hover {

    transform:
        translateY(-3px);

    background:
        var(--gra-green-light);
}


.gra-phone {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 14px 18px;

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

    border-radius: 10px;

    color: #FFFFFF;

    text-decoration: none;

    font-size: 10px;

    transition:
        background .25s ease,
        border-color .25s ease;
}


.gra-phone:hover {

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

    border-color:
        rgba(25,185,148,.35);
}


.gra-phone i {

    color:
        var(--gra-green-light);
}


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

.gra-cta-badge {

    width: 220px;

    height: 220px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        1px solid rgba(25,185,148,.2);

    animation:
        badgeFloat 4s ease-in-out infinite;
}


@keyframes badgeFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-8px);
    }
}


.gra-cta-badge > div {

    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 12px;

    border-radius: 50%;

    background:
        rgba(25,185,148,.11);

    color:
        var(--gra-green-light);

    font-size: 30px;
}


.gra-cta-badge span {

    color:
        #6E8389;

    font-size: 7px;

    letter-spacing: 3px;
}


.gra-cta-badge strong {

    margin-top: 5px;

    color: #FFFFFF;

    font-size: 10px;

    letter-spacing: 2px;
}


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

@media (max-width: 850px) {

    .gra-header {

        display: block;
    }


    .gra-header > p {

        margin-top: 22px;
    }


    .gra-scene {

        height: 460px;
    }


    .gra-message {

        width: 90%;
    }


    .gra-goodbye {

        font-size: 58px;
    }


    .gra-pest-name {

        font-size: 52px;
    }


    .gra-cta-container {

        flex-direction: column;

        text-align: center;
    }


    .gra-cta-content p {

        margin-left: auto;

        margin-right: auto;
    }
}


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

@media (max-width: 600px) {

    #german-real-action {

        padding: 70px 0 40px;
    }


    .gra-container {

        width:
            calc(100% - 24px);
    }


    .gra-header {

        margin-bottom: 30px;
    }


    .gra-header h2 {

        font-size: 39px;
    }


    .gra-header h2 strong {

        min-width: 0;
    }


    .gra-header > p {

        width: auto;

        padding-right: 15px;
    }


    .gra-scene {

        height: 380px;

        border-radius: 18px;
    }


    .gra-window {

        width: 100px;

        height: 75px;

        left: 20px;

        top: 25px;

        border-width: 5px;
    }


    .gra-floor {

        height: 82px;
    }


    .gra-floor-shadow {

        width: 240px;

        height: 45px;

        bottom: 45px;
    }


    .gra-message {

        top: 43%;

        width: 94%;
    }


    .gra-message-small {

        font-size: 7px;
    }


    .gra-goodbye {

        font-size: 47px;

        letter-spacing: -2px;
    }


    .gra-pest-name {

        font-size: 43px;

        letter-spacing: -2px;
    }


    .gra-typing-line {

        margin-top: 12px;

        font-size: 8px;
    }


    .gra-pest {

        bottom: 58px;

        width: 65px;

        height: 60px;
    }


    .gra-pest-icon {

        font-size: 48px;
    }


    .gra-status {

        top: 12px;

        right: 12px;

        padding: 8px 11px;

        font-size: 7px;
    }


    .gra-status-dot {

        width: 6px;

        height: 6px;
    }


    .gra-action-text {

        right: 15px;

        bottom: 18px;
    }


    .gra-action-text span {

        font-size: 5px;
    }


    .gra-action-text strong {

        font-size: 9px;
    }


    .gra-success {

        left: 12px;

        bottom: 12px;

        padding: 8px 10px;

        gap: 7px;
    }


    .gra-success-icon {

        width: 28px;

        height: 28px;

        font-size: 12px;
    }


    .gra-success strong {

        font-size: 7px;
    }


    .gra-success span {

        font-size: 4px;
    }


    .gra-trail {

        bottom: 72px;

        left: 2%;

        width: 180px;
    }


    .gra-steps {

        gap: 10px;

        justify-content: space-between;
    }


    .gra-step-line {

        display: none;
    }


    .gra-step {

        gap: 6px;
    }


    .gra-step > span {

        width: 28px;

        height: 28px;

        font-size: 7px;
    }


    .gra-step strong {

        font-size: 7px;
    }


    .gra-step small {

        font-size: 4px;
    }


    #gra-cta {

        padding: 65px 0;
    }


    .gra-cta-container {

        width:
            calc(100% - 24px);
    }


    .gra-cta-content h2 {

        font-size: 39px;
    }


    .gra-buttons {

        flex-direction: column;

        width: 100%;
    }


    .gra-whatsapp,
    .gra-phone {

        width: 100%;

        justify-content: center;

        box-sizing: border-box;
    }


    .gra-cta-badge {

        width: 170px;

        height: 170px;
    }


    .gra-cta-badge > div {

        width: 55px;

        height: 55px;

        font-size: 24px;
    }
}


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

@media (max-width: 390px) {

    .gra-header h2 {

        font-size: 34px;
    }


    .gra-scene {

        height: 350px;
    }


    .gra-goodbye {

        font-size: 41px;
    }


    .gra-pest-name {

        font-size: 38px;
    }


    .gra-pest {

        bottom: 56px;
    }


    .gra-action-text {

        display: none;
    }


    .gra-success {

        transform:
            scale(.9);

        transform-origin:
            left bottom;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .gra-pest,
    .gra-floor-shadow,
    .gra-trail span,
    .gra-status-dot,
    .gra-cta-badge,
    .gra-cursor {

        animation: none !important;
    }
}



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
































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

/* =====================================================
   NOVA SERVICE SELECTOR
===================================================== */
/* =========================================================
   NOVA PROTECTION HUB
========================================================= */

#nova-protection-hub {

    --nph-green: #079875;
    --nph-green-light: #19B994;

    --nph-blue: #164A91;
    --nph-navy: #071D2A;

    --nph-bg: #F4F7F5;
    --nph-white: #FFFFFF;

    --nph-text: #102832;
    --nph-muted: #77868A;

    direction: rtl;

    padding: 100px 0;

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

    overflow: hidden;
}


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

.nph-container {

    width:
        min(
            1180px,
            calc(100% - 38px)
        );

    margin: auto;
}


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

.nph-top {

    display: grid;

    grid-template-columns:
        1fr 360px;

    align-items: end;

    gap: 70px;

    margin-bottom: 45px;
}


.nph-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color:
        var(--nph-green);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .5px;
}


.nph-eyebrow i {

    font-size: 14px;
}


.nph-heading h2 {

    margin: 0;

    color:
        var(--nph-text);

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

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2.5px;
}


.nph-heading h2 strong {

    color:
        var(--nph-green);
}


.nph-intro {

    position: relative;

    padding-right: 22px;

    border-right:
        3px solid var(--nph-green);
}


.nph-intro span {

    display: block;

    margin-bottom: 10px;

    color:
        var(--nph-blue);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 3px;
}


.nph-intro p {

    margin: 0;

    color:
        var(--nph-muted);

    font-size: 11px;

    line-height: 2;
}


/* =========================================================
   BOARD
========================================================= */

.nph-board {

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    min-height: 475px;

    border:
        1px solid #D9E4E0;

    background:
        var(--nph-white);

    box-shadow:
        0 30px 80px
        rgba(7,29,42,.09);

    overflow: hidden;
}


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

.nph-main-panel {

    position: relative;

    display: flex;

    align-items: center;

    padding:
        55px;

    background:
        var(--nph-navy);

    overflow: hidden;
}


/* subtle grid */

.nph-main-panel::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: .08;

    background:
        linear-gradient(
            90deg,
            transparent 49%,
            #FFFFFF 50%,
            transparent 51%
        ),
        linear-gradient(
            0deg,
            transparent 49%,
            #FFFFFF 50%,
            transparent 51%
        );

    background-size:
        70px 70px;

    pointer-events: none;
}


/* green glow */

.nph-main-panel::after {

    content: "";

    position: absolute;

    width: 330px;

    height: 330px;

    left: -150px;

    bottom: -180px;

    border-radius: 50%;

    background:
        rgba(25,185,148,.14);

    filter: blur(30px);

    pointer-events: none;
}


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

.nph-main-number {

    position: absolute;

    top: 28px;

    right: 35px;

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

    font-size: 105px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -8px;
}


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

.nph-main-content {

    position: relative;

    z-index: 3;

    max-width: 430px;
}


.nph-main-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    background:
        rgba(25,185,148,.12);

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

    color:
        var(--nph-green-light);

    font-size: 21px;
}


.nph-main-label {

    display: block;

    margin-bottom: 12px;

    color:
        var(--nph-green-light);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.nph-main-content h3 {

    margin: 0 0 17px;

    color:
        #FFFFFF;

    font-size:
        clamp(
            30px,
            3.2vw,
            44px
        );

    line-height: 1.15;

    font-weight: 900;
}


.nph-main-content h3 strong {

    display: block;

    color:
        var(--nph-green-light);
}


.nph-main-content p {

    max-width: 390px;

    margin: 0 0 28px;

    color:
        #93A5A9;

    font-size: 10px;

    line-height: 2;
}


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

.nph-main-link {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding:
        13px 17px;

    background:
        var(--nph-green);

    color:
        #FFFFFF;

    text-decoration: none;

    font-size: 9px;

    font-weight: 900;

    transition:
        .25s ease;
}


.nph-main-link:hover {

    background:
        var(--nph-green-light);

    transform:
        translateX(-4px);
}


.nph-main-link i {

    transition:
        .25s ease;
}


.nph-main-link:hover i {

    transform:
        translateX(-4px);
}


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

.nph-main-mark {

    position: absolute;

    left: 30px;

    bottom: 25px;

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(25,185,148,.18);

    color:
        rgba(25,185,148,.35);

    font-size: 27px;
}


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

.nph-services {

    display: flex;

    flex-direction: column;
}


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

.nph-service {

    position: relative;

    display: grid;

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

    align-items: center;

    gap: 18px;

    flex: 1;

    padding:
        25px 30px;

    color:
        var(--nph-text);

    text-decoration: none;

    border-bottom:
        1px solid #E4ECE9;

    background:
        #FFFFFF;

    transition:
        background .3s ease,
        padding .3s ease;
}


.nph-service:last-child {

    border-bottom: 0;
}


.nph-service:hover {

    padding-right: 38px;

    background:
        #F3F9F7;
}


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

.nph-service-number {

    color:
        #C5D3CF;

    font-size: 12px;

    font-weight: 900;

    transition:
        color .3s ease;
}


.nph-service:hover
.nph-service-number {

    color:
        var(--nph-green);
}


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

.nph-service-icon {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        #F0F6F3;

    color:
        var(--nph-green);

    font-size: 18px;

    transition:
        .3s ease;
}


.nph-service:hover
.nph-service-icon {

    background:
        var(--nph-green);

    color:
        #FFFFFF;

    transform:
        translateY(-2px);
}


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

.nph-service-info span {

    display: block;

    margin-bottom: 5px;

    color:
        #98A7A4;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.nph-service-info h3 {

    margin: 0 0 5px;

    color:
        var(--nph-text);

    font-size: 14px;

    font-weight: 900;
}


.nph-service-info p {

    margin: 0;

    color:
        var(--nph-muted);

    font-size: 8px;

    line-height: 1.8;
}


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

.nph-service-arrow {

    width: 31px;

    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid #DCE7E3;

    color:
        #8D9D99;

    transition:
        .3s ease;
}


.nph-service:hover
.nph-service-arrow {

    background:
        var(--nph-green);

    border-color:
        var(--nph-green);

    color:
        #FFFFFF;

    transform:
        translateX(-4px);
}


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

.nph-bottom {

    display: grid;

    grid-template-columns:
        1fr 1.5fr auto;

    align-items: center;

    gap: 30px;

    padding:
        23px 28px;

    border:
        1px solid #D9E4E0;

    border-top: 0;

    background:
        #FFFFFF;
}


/* =========================================================
   STATUS
========================================================= */

.nph-bottom-status {

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        var(--nph-muted);

    font-size: 8px;

    font-weight: 900;
}


.nph-live-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--nph-green);

    box-shadow:
        0 0 0 5px
        rgba(7,152,117,.10);

    animation:
        nphPulse 1.7s infinite;
}


@keyframes nphPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}


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

.nph-bottom-text {

    display: flex;

    align-items: center;

    gap: 10px;
}


.nph-bottom-text strong {

    color:
        var(--nph-text);

    font-size: 10px;

    font-weight: 900;
}


.nph-bottom-text span {

    color:
        var(--nph-muted);

    font-size: 8px;
}


/* =========================================================
   CALL
========================================================= */

.nph-call {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        11px 16px;

    border:
        1px solid #D7E4DF;

    color:
        var(--nph-text);

    text-decoration: none;

    font-size: 8px;

    font-weight: 900;

    transition:
        .25s ease;
}


.nph-call i:first-child {

    color:
        var(--nph-green);

    font-size: 11px;
}


.nph-call:hover {

    background:
        var(--nph-green);

    border-color:
        var(--nph-green);

    color:
        #FFFFFF;
}


.nph-call:hover i:first-child {

    color:
        #FFFFFF;
}


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

@media (max-width: 900px) {

    .nph-top {

        grid-template-columns:
            1fr;

        gap: 25px;
    }


    .nph-intro {

        max-width: 430px;
    }


    .nph-board {

        grid-template-columns:
            1fr;
    }


    .nph-main-panel {

        min-height: 390px;
    }


    .nph-bottom {

        grid-template-columns:
            1fr;

        text-align: center;
    }


    .nph-bottom-status,
    .nph-bottom-text {

        justify-content: center;
    }


    .nph-call {

        justify-content: center;
    }
}


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

@media (max-width: 600px) {

    #nova-protection-hub {

        padding:
            70px 0;
    }


    .nph-container {

        width:
            calc(100% - 24px);
    }


    .nph-top {

        margin-bottom: 28px;
    }


    .nph-heading h2 {

        font-size: 39px;

        letter-spacing: -1.5px;
    }


    .nph-intro {

        padding-right: 15px;
    }


    .nph-intro p {

        font-size: 10px;
    }


    .nph-main-panel {

        min-height: 390px;

        padding:
            35px 25px;
    }


    .nph-main-number {

        top: 20px;

        right: 20px;

        font-size: 80px;
    }


    .nph-main-content h3 {

        font-size: 31px;
    }


    .nph-main-content p {

        font-size: 9px;
    }


    .nph-main-mark {

        width: 55px;

        height: 55px;

        left: 20px;

        bottom: 20px;

        font-size: 21px;
    }


    .nph-service {

        grid-template-columns:
            36px 42px 1fr 28px;

        gap: 10px;

        padding:
            20px 14px;
    }


    .nph-service:hover {

        padding-right: 18px;
    }


    .nph-service-number {

        font-size: 9px;
    }


    .nph-service-icon {

        width: 42px;

        height: 42px;

        font-size: 16px;
    }


    .nph-service-info span {

        font-size: 6px;
    }


    .nph-service-info h3 {

        font-size: 11px;
    }


    .nph-service-info p {

        font-size: 7px;
    }


    .nph-service-arrow {

        width: 27px;

        height: 27px;

        font-size: 9px;
    }


    .nph-bottom {

        padding:
            20px 15px;

        gap: 17px;
    }


    .nph-bottom-text {

        flex-direction: column;

        gap: 4px;
    }
}


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

@media (max-width: 390px) {

    .nph-heading h2 {

        font-size: 34px;
    }


    .nph-main-panel {

        min-height: 370px;

        padding:
            30px 20px;
    }


    .nph-main-content h3 {

        font-size: 27px;
    }


    .nph-service {

        grid-template-columns:
            30px 38px 1fr 25px;

        gap: 8px;
    }


    .nph-service-icon {

        width: 38px;

        height: 38px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .nph-live-dot {

        animation: none;
    }

    .nph-service,
    .nph-service-icon,
    .nph-service-arrow,
    .nph-main-link {

        transition: none;
    }
}

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




















#nova-divider {
    --nd-green: #079875;
    --nd-green-light: #19B994;
    --nd-blue: #164A91;
    --nd-navy: #071D2A;
    --nd-bg: #F4F7F5;
    --nd-line: #DCE8E4;
    --nd-text: #102832;
    --nd-muted: #81908D;

    position: relative;
    width: 100%;
    min-height: 190px;
    display: flex;
    align-items: center;
    overflow: hidden;
    direction: rtl;
    background: var(--nd-bg);
    border-top: 1px solid var(--nd-line);
    border-bottom: 1px solid var(--nd-line);
}

#nova-divider::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--nd-green) 25%,
        var(--nd-blue) 50%,
        var(--nd-green) 75%,
        transparent 100%
    );
}

#nova-divider::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--nd-blue) 25%,
        var(--nd-green) 50%,
        var(--nd-blue) 75%,
        transparent 100%
    );
}

.nova-divider-inner {
    position: relative;
    width: min(1250px, calc(100% - 70px));
    min-height: 190px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 55px;
}

.nova-divider-lines {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    width: 1px;
    background: var(--nd-line);
    opacity: .55;
}

.nova-divider-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nova-divider-number {
    color: var(--nd-green);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}

.nova-divider-line-small {
    width: 85px;
    height: 1px;
    background: var(--nd-green);
}

.nova-divider-label {
    color: var(--nd-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.nova-divider-center {
    position: relative;
    z-index: 2;
    width: 145px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--nd-bg);
}

.nova-divider-center::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--nd-line);
    transform: rotate(45deg);
}

.nova-divider-center::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 1px;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    background: linear-gradient(
        90deg,
        var(--nd-green),
        var(--nd-blue)
    );
}

.nova-divider-center span {
    position: relative;
    z-index: 2;
    margin-bottom: 25px;
    color: var(--nd-muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 2px;
}

.nova-divider-center strong {
    position: relative;
    z-index: 2;
    color: var(--nd-text);
    font-size: 14px;
    font-weight: 900;
}

.nova-divider-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.nova-divider-right-text {
    text-align: right;
}

.nova-divider-right-text span {
    display: block;
    margin-bottom: 5px;
    color: var(--nd-muted);
    font-size: 8px;
}

.nova-divider-right-text strong {
    display: block;
    color: var(--nd-text);
    font-size: 12px;
    font-weight: 900;
}

.nova-divider-color-line {
    display: flex;
    width: 75px;
    height: 4px;
}

.nova-divider-color-line span:nth-child(1) {
    width: 45%;
    background: var(--nd-green);
}

.nova-divider-color-line span:nth-child(2) {
    width: 25%;
    background: var(--nd-blue);
}

.nova-divider-color-line span:nth-child(3) {
    width: 30%;
    background: var(--nd-green-light);
}

.nova-divider-mini-lines {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 70px;
    transform: translateY(-50%);
    pointer-events: none;
}

.nova-divider-mini-lines::before,
.nova-divider-mini-lines::after {
    content: "";
    position: absolute;
    width: 24%;
    height: 1px;
    background: var(--nd-line);
}

.nova-divider-mini-lines::before {
    right: 0;
}

.nova-divider-mini-lines::after {
    left: 0;
}

@media (max-width: 800px) {
    #nova-divider {
        min-height: 150px;
    }

    .nova-divider-inner {
        width: calc(100% - 30px);
        min-height: 150px;
        grid-template-columns: 1fr auto 1fr;
        gap: 20px;
    }

    .nova-divider-center {
        width: 105px;
        height: 105px;
    }

    .nova-divider-center strong {
        font-size: 11px;
    }

    .nova-divider-line-small {
        width: 45px;
    }

    .nova-divider-left {
        gap: 8px;
    }

    .nova-divider-right {
        gap: 8px;
    }

    .nova-divider-label {
        font-size: 7px;
    }

    .nova-divider-right-text span {
        font-size: 6px;
    }

    .nova-divider-right-text strong {
        font-size: 9px;
    }

    .nova-divider-color-line {
        width: 45px;
    }

    .nova-divider-mini-lines::before,
    .nova-divider-mini-lines::after {
        width: 18%;
    }
}

@media (max-width: 520px) {
    #nova-divider {
        min-height: 125px;
    }

    .nova-divider-inner {
        min-height: 125px;
        width: calc(100% - 18px);
        gap: 10px;
    }

    .nova-divider-center {
        width: 78px;
        height: 78px;
    }

    .nova-divider-center::before {
        transform: rotate(45deg) scale(.85);
    }

    .nova-divider-center::after {
        width: 30px;
    }

    .nova-divider-center span {
        margin-bottom: 18px;
        font-size: 5px;
        letter-spacing: 1px;
    }

    .nova-divider-center strong {
        font-size: 8px;
    }

    .nova-divider-number {
        font-size: 9px;
    }

    .nova-divider-label {
        display: none;
    }

    .nova-divider-line-small {
        width: 25px;
    }

    .nova-divider-right-text span {
        display: none;
    }

    .nova-divider-right-text strong {
        font-size: 7px;
    }

    .nova-divider-color-line {
        width: 28px;
        height: 3px;
    }

    .nova-divider-mini-lines {
        display: none;
    }
}





















#nova-premium-divider {
    --npd-green: #079875;
    --npd-green-light: #19B994;
    --npd-blue: #164A91;
    --npd-navy: #071D2A;
    --npd-bg: #F4F7F5;
    --npd-line: #DCE7E3;
    --npd-text: #102832;
    --npd-muted: #7D8D89;

    position: relative;
    width: 100%;
    min-height: 210px;
    display: flex;
    align-items: center;
    direction: rtl;
    background: var(--npd-bg);
    overflow: hidden;
    border-top: 1px solid var(--npd-line);
    border-bottom: 1px solid var(--npd-line);
}

#nova-premium-divider::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--npd-blue) 20%,
        var(--npd-green) 50%,
        var(--npd-blue) 80%,
        transparent 100%
    );
}

#nova-premium-divider::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--npd-green-light) 25%,
        var(--npd-green) 50%,
        var(--npd-blue) 75%,
        transparent 100%
    );
}

.npd-container {
    position: relative;
    width: min(1250px, calc(100% - 60px));
    min-height: 210px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 65px;
}

.npd-container::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 1px;
    background: var(--npd-line);
    transform: translateY(-50%);
    z-index: 0;
}

.npd-side,
.npd-center {
    position: relative;
    z-index: 2;
}

.npd-side-right {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-start;
}

.npd-number {
    color: var(--npd-green);
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;
}

.npd-label {
    color: var(--npd-muted);
    font-size: 9px;
    font-weight: 800;
}

.npd-line {
    display: block;
    width: 100px;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--npd-green),
        transparent
    );
}

.npd-center {
    min-width: 360px;
    padding: 25px 55px;
    text-align: center;
    background: var(--npd-bg);
}

.npd-center::before,
.npd-center::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 35px;
    height: 1px;
    background: var(--npd-green);
    transform: translateY(-50%);
}

.npd-center::before {
    right: 0;
}

.npd-center::after {
    left: 0;
    background: var(--npd-blue);
}

.npd-top {
    display: block;
    margin-bottom: 10px;
    color: var(--npd-muted);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 3px;
}

.npd-center h3 {
    margin: 0;
    color: var(--npd-text);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 900;
}

.npd-center h3 strong {
    color: var(--npd-green);
}

.npd-accent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 15px;
}

.npd-accent span {
    display: block;
    height: 3px;
}

.npd-accent span:nth-child(1) {
    width: 24px;
    background: var(--npd-green);
}

.npd-accent span:nth-child(2) {
    width: 12px;
    background: var(--npd-blue);
}

.npd-accent span:nth-child(3) {
    width: 6px;
    background: var(--npd-green-light);
}

.npd-side-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.npd-side-left .npd-line {
    background: linear-gradient(
        90deg,
        transparent,
        var(--npd-blue)
    );
}

.npd-side-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.npd-side-text strong {
    color: var(--npd-text);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}

.npd-side-text span {
    color: var(--npd-muted);
    font-size: 8px;
}

.npd-side:hover .npd-line {
    background: linear-gradient(
        90deg,
        var(--npd-green-light),
        transparent
    );
}

.npd-center:hover .npd-accent span:nth-child(1) {
    width: 38px;
    transition: width .3s ease;
}

.npd-center:hover .npd-accent span:nth-child(2) {
    width: 18px;
    transition: width .3s ease;
}

@media (max-width: 800px) {
    #nova-premium-divider {
        min-height: 170px;
    }

    .npd-container {
        width: calc(100% - 30px);
        min-height: 170px;
        grid-template-columns: 1fr auto 1fr;
        gap: 15px;
    }

    .npd-center {
        min-width: 0;
        width: 220px;
        padding: 20px 15px;
    }

    .npd-center h3 {
        font-size: 16px;
    }

    .npd-top {
        font-size: 5px;
        letter-spacing: 1.5px;
    }

    .npd-line {
        width: 50px;
    }

    .npd-number {
        font-size: 25px;
    }

    .npd-label {
        font-size: 7px;
    }

    .npd-side-text strong {
        font-size: 10px;
    }

    .npd-side-text span {
        font-size: 6px;
    }
}

@media (max-width: 520px) {
    #nova-premium-divider {
        min-height: 135px;
    }

    .npd-container {
        min-height: 135px;
        gap: 7px;
    }

    .npd-center {
        width: 160px;
        padding: 15px 8px;
    }

    .npd-center h3 {
        font-size: 12px;
    }

    .npd-top {
        margin-bottom: 6px;
        font-size: 4px;
        letter-spacing: 1px;
    }

    .npd-accent {
        margin-top: 9px;
    }

    .npd-accent span:nth-child(1) {
        width: 16px;
        height: 2px;
    }

    .npd-accent span:nth-child(2) {
        width: 8px;
        height: 2px;
    }

    .npd-accent span:nth-child(3) {
        width: 4px;
        height: 2px;
    }

    .npd-line {
        width: 25px;
    }

    .npd-number {
        font-size: 18px;
    }

    .npd-label {
        display: none;
    }

    .npd-side-text strong {
        font-size: 8px;
    }

    .npd-side-text span {
        font-size: 5px;
    }

    .npd-center::before,
    .npd-center::after {
        width: 18px;
    }
}


















#nova-luxury-divider {
    --nld-green: #079875;
    --nld-green-light: #19B994;
    --nld-blue: #164A91;
    --nld-navy: #071D2A;
    --nld-bg: #F4F7F5;
    --nld-text: #102832;
    --nld-muted: #81918D;
    --nld-line: #DCE6E2;

    width: 100%;
    direction: rtl;
    background: var(--nld-bg);
    overflow: hidden;
}

.nld-inner {
    position: relative;
    width: min(1400px, calc(100% - 80px));
    min-height: 255px;
    margin: auto;
    display: grid;
    grid-template-columns: 150px 1fr 210px;
    align-items: center;
}

.nld-top-line {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--nld-line) 15%,
            var(--nld-green) 50%,
            var(--nld-line) 85%,
            transparent 100%
        );
}

.nld-top-line::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    width: 85px;
    height: 2px;
    transform: translateX(50%);
    background: var(--nld-green);
}

.nld-number {
    align-self: center;
    color: #C7D2CE;
    font-size: 72px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -4px;
}

.nld-content {
    position: relative;
    padding: 0 55px;
    border-right: 1px solid var(--nld-line);
    border-left: 1px solid var(--nld-line);
}

.nld-overline {
    display: block;
    margin-bottom: 12px;
    color: var(--nld-green);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 4px;
}

.nld-content h2 {
    margin: 0;
    color: var(--nld-text);
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -2px;
}

.nld-content h2 strong {
    color: var(--nld-green);
}

.nld-content p {
    margin: 15px 0 0;
    color: var(--nld-muted);
    font-size: 10px;
}

.nld-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    color: var(--nld-muted);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 3px;
}

.nld-side-line {
    width: 60px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--nld-blue)
        );
}

.nld-bottom-line {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    display: flex;
}

.nld-bottom-line span:nth-child(1) {
    width: 50%;
    background: var(--nld-green);
}

.nld-bottom-line span:nth-child(2) {
    width: 25%;
    background: var(--nld-blue);
}

.nld-bottom-line span:nth-child(3) {
    width: 25%;
    background: var(--nld-green-light);
}

.nld-content::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 3px;
    height: 42px;
    transform: translateY(-50%);
    background: var(--nld-green);
}

.nld-content::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 55px;
    width: 35px;
    height: 1px;
    background: var(--nld-blue);
}

@media (max-width: 900px) {
    .nld-inner {
        width: calc(100% - 40px);
        min-height: 210px;
        grid-template-columns: 90px 1fr 120px;
    }

    .nld-number {
        font-size: 48px;
    }

    .nld-content {
        padding: 0 30px;
    }

    .nld-content h2 {
        font-size: 38px;
    }

    .nld-side-line {
        width: 30px;
    }
}

@media (max-width: 600px) {
    .nld-inner {
        width: calc(100% - 24px);
        min-height: 175px;
        grid-template-columns: 45px 1fr;
    }

    .nld-number {
        align-self: start;
        padding-top: 35px;
        font-size: 29px;
    }

    .nld-content {
        padding: 0 15px;
        border-left: 0;
    }

    .nld-overline {
        margin-bottom: 8px;
        font-size: 5px;
        letter-spacing: 2px;
    }

    .nld-content h2 {
        font-size: 27px;
        letter-spacing: -1px;
    }

    .nld-content p {
        margin-top: 10px;
        font-size: 8px;
    }

    .nld-side {
        display: none;
    }

    .nld-content::before {
        width: 2px;
        height: 30px;
    }

    .nld-content::after {
        left: 15px;
        bottom: -13px;
        width: 20px;
    }

    .nld-top-line::after {
        width: 55px;
    }
}

































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

/* =====================================================
   NOVA EXPERIENCE
===================================================== */
/* =====================================================
   NOVA EXPERIENCE - PREMIUM MINIMAL
===================================================== */

#nova-experience {

    --nova-green: #079875;
    --nova-green-light: #19B994;
    --nova-blue: #164A91;
    --nova-navy: #071D2A;

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

    --nova-text: #102832;
    --nova-muted: #77868A;
    --nova-line: #DCE5E1;

    direction: rtl;

    padding: 110px 0;

    background: var(--nova-bg);

}


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

.nova-experience-container {

    width: min(1180px, calc(100% - 40px));

    margin: auto;

}


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

.nova-experience-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

    margin-bottom: 60px;

}


.nova-experience-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 15px;

    color: var(--nova-green);

    font-size: 11px;

    font-weight: 800;

}


.nova-experience-label i {

    font-size: 14px;

}


.nova-experience-header h2 {

    margin: 0;

    color: var(--nova-text);

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

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -2px;

}


.nova-experience-header h2 strong {

    display: block;

    color: var(--nova-green);

}


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

.nova-experience-layout {

    display: grid;

    grid-template-columns: 36% 1fr;

    gap: 80px;

    align-items: stretch;

}


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

.nova-experience-total {

    position: relative;

    padding: 45px 0;

    border-top:

        1px solid var(--nova-line);

    border-bottom:

        1px solid var(--nova-line);

}


.nova-total-label {

    display: block;

    margin-bottom: 18px;

    color: var(--nova-muted);

    font-size: 11px;

    font-weight: 700;

}


.nova-total-number {

    display: flex;

    align-items: flex-start;

    gap: 5px;

    margin-bottom: 22px;

}


.nova-total-number span {

    color: var(--nova-text);

    font-size: clamp(65px, 7vw, 105px);

    line-height: .8;

    font-weight: 900;

    letter-spacing: -4px;

}


.nova-total-number b {

    margin-top: 2px;

    color: var(--nova-green);

    font-size: 28px;

    font-weight: 900;

}


.nova-experience-total p {

    max-width: 310px;

    margin: 0;

    color: var(--nova-muted);

    font-size: 11px;

    line-height: 2.1;

}


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

.nova-total-line {

    width: 100%;

    height: 1px;

    margin: 32px 0;

    background: var(--nova-line);

}


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

.nova-total-note {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--nova-text);

    font-size: 10px;

    font-weight: 700;

}


.nova-total-note i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 36px;

    height: 36px;

    border-radius: 8px;

    background: #E5F5F0;

    color: var(--nova-green);

    font-size: 16px;

}


/* =====================================================
   STATS LIST
===================================================== */

.nova-experience-stats {

    border-top:

        1px solid var(--nova-line);

}


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

.nova-stat-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    min-height: 118px;

    border-bottom:

        1px solid var(--nova-line);

    transition:

        padding .3s ease;

}


.nova-stat-item:hover {

    padding-right: 12px;

}


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

.nova-stat-item::before {

    content: "";

    position: absolute;

    right: 0;

    bottom: -1px;

    width: 0;

    height: 2px;

    background: var(--nova-green);

    transition:

        width .4s ease;

}


.nova-stat-item:hover::before {

    width: 100%;

}


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

.nova-stat-main {

    display: flex;

    align-items: center;

    gap: 18px;

}


.nova-stat-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    border-radius: 10px;

    background: var(--nova-white);

    border:

        1px solid var(--nova-line);

    color: var(--nova-green);

    font-size: 19px;

}


.nova-stat-info span {

    display: block;

    margin-bottom: 5px;

    color: var(--nova-muted);

    font-size: 9px;

}


.nova-stat-info h3 {

    margin: 0;

    color: var(--nova-text);

    font-size: 17px;

    font-weight: 800;

}


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

.nova-stat-number {

    min-width: 100px;

    text-align: left;

}


.nova-stat-number strong {

    display: block;

    color: var(--nova-text);

    font-size: 32px;

    line-height: 1;

    font-weight: 900;

}


.nova-stat-number span {

    display: block;

    margin-top: 5px;

    color: var(--nova-green);

    font-size: 8px;

    font-weight: 800;

}


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

.nova-experience-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 50px;

    padding-top: 35px;

    border-top:

        1px solid var(--nova-line);

}


.nova-experience-bottom-text span {

    display: block;

    margin-bottom: 6px;

    color: var(--nova-green);

    font-size: 10px;

    font-weight: 800;

}


.nova-experience-bottom-text strong {

    color: var(--nova-text);

    font-size: 17px;

    font-weight: 800;

}


.nova-experience-bottom a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 20px;

    flex-shrink: 0;

    border-radius: 8px;

    background: var(--nova-text);

    color: #FFFFFF;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    transition:

        transform .25s ease,

        background .25s ease;

}


.nova-experience-bottom a:hover {

    transform: translateY(-3px);

    background: var(--nova-green);

}


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

@media (max-width: 850px) {

    .nova-experience-layout {

        grid-template-columns: 1fr;

        gap: 40px;

    }


    .nova-experience-total {

        padding: 35px 0;

    }


    .nova-experience-total p {

        max-width: 500px;

    }


}


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

@media (max-width: 600px) {

    #nova-experience {

        padding: 75px 0;

    }


    .nova-experience-container {

        width: calc(100% - 28px);

    }


    .nova-experience-header {

        margin-bottom: 35px;

    }


    .nova-experience-header h2 {

        font-size: 40px;

    }


    .nova-experience-layout {

        gap: 35px;

    }


    .nova-total-number span {

        font-size: 72px;

    }


    .nova-total-number b {

        font-size: 22px;

    }


    .nova-stat-item {

        min-height: 105px;

        gap: 12px;

    }


    .nova-stat-item:hover {

        padding-right: 0;

    }


    .nova-stat-icon {

        width: 42px;

        height: 42px;

        font-size: 16px;

    }


    .nova-stat-main {

        gap: 12px;

    }


    .nova-stat-info h3 {

        font-size: 14px;

    }


    .nova-stat-number {

        min-width: auto;

    }


    .nova-stat-number strong {

        font-size: 25px;

    }


    .nova-experience-bottom {

        align-items: flex-start;

        flex-direction: column;

        gap: 22px;

    }


    .nova-experience-bottom-text strong {

        font-size: 15px;

        line-height: 1.8;

    }


    .nova-experience-bottom a {

        width: 100%;

        justify-content: center;

        box-sizing: border-box;

    }

}

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













































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

#nova-journey {

    --nj-green: #079875;
    --nj-green-light: #19B994;
    --nj-blue: #164A91;
    --nj-navy: #071D2A;

    --nj-bg: #F4F7F5;
    --nj-white: #FFFFFF;
    --nj-text: #102832;
    --nj-muted: #77868A;
    --nj-line: #D9E5E1;

    direction: rtl;

    padding: 105px 0 90px;

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

    overflow: hidden;
}


.nova-journey-container {

    width: min(
        1280px,
        calc(100% - 50px)
    );

    margin: auto;
}


.nova-journey-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 70px;

    margin-bottom: 65px;
}


.nova-journey-heading {

    max-width: 700px;
}


.nova-journey-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 17px;

    color: var(--nj-green);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;
}


.nova-journey-label i {

    font-size: 14px;
}


.nova-journey-heading h2 {

    margin: 0;

    color: var(--nj-text);

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height: 1.03;

    font-weight: 900;

    letter-spacing: -2.5px;
}


.nova-journey-heading h2 strong {

    display: block;

    color: var(--nj-green);
}


.nova-journey-header > p {

    width: 330px;

    margin: 0;

    padding-right: 22px;

    border-right:
        3px solid var(--nj-green);

    color: var(--nj-muted);

    font-size: 11px;

    line-height: 2.1;
}


/* =========================================================
   TRACK
========================================================= */

.nova-journey-track {

    position: relative;

    display: grid;

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

    gap: 14px;

    min-height: 390px;

    padding-top: 0;
}


/* =========================================================
   PROGRESS LINE
========================================================= */

.nova-journey-progress {

    position: absolute;

    top: 50%;

    right: 0;

    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(7,152,117,.30) 15%,
            rgba(22,74,145,.35) 50%,
            rgba(7,152,117,.30) 85%,
            transparent
        );

    z-index: 3;

    pointer-events: none;
}


.nova-journey-progress::before {

    content: "";

    position: absolute;

    right: 12%;

    left: 12%;

    top: 50%;

    height: 2px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            var(--nj-green),
            var(--nj-blue),
            var(--nj-green)
        );

    opacity: .5;
}


/* =========================================================
   STAGE
========================================================= */

.nova-journey-stage {

    position: relative;

    min-height: 390px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 28px;

    overflow: hidden;

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

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    cursor: pointer;

    box-shadow:
        0 20px 45px rgba(7,29,42,.09);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background-position .6s ease;
}


/* =========================================================
   REAL BACKGROUND IMAGES
========================================================= */

.nova-stage-01 {

    background-image:
        url("../img/1m.jpg");
}


.nova-stage-02 {

    background-image:
        url("../img/2m.jpg");
}


.nova-stage-03 {

    background-image:
        url("../img/3m.jpg");
}


.nova-stage-04 {

    background-image:
        url("../img/4m.jpg");
}


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

.nova-stage-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,29,42,.82) 0%,
            rgba(7,29,42,.55) 45%,
            rgba(7,29,42,.90) 100%
        );

    transition:
        background .35s ease;

    z-index: 1;
}


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

.nova-journey-stage:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 30px 60px rgba(7,29,42,.17);

    background-position:
        center 45%;
}


.nova-journey-stage:hover
.nova-stage-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(7,29,42,.72) 0%,
            rgba(7,29,42,.34) 45%,
            rgba(7,29,42,.83) 100%
        );
}


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

.nova-stage-top {

    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.nova-stage-index {

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

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

    transition:
        color .3s ease;
}


.nova-journey-stage:hover
.nova-stage-index {

    color:
        var(--nj-green-light);
}


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

.nova-stage-dot {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

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

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

    backdrop-filter:
        blur(8px);

    color:
        #FFFFFF;

    font-size: 17px;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.nova-journey-stage:hover
.nova-stage-dot {

    background:
        var(--nj-green);

    border-color:
        var(--nj-green);

    transform:
        translateY(-3px);
}


/* =========================================================
   BODY
========================================================= */

.nova-stage-body {

    position: relative;

    z-index: 4;

    max-width: 245px;
}


.nova-stage-body > span {

    display: block;

    margin-bottom: 10px;

    color:
        var(--nj-green-light);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


.nova-stage-body h3 {

    margin: 0 0 13px;

    color:
        #FFFFFF;

    font-size:
        clamp(
            24px,
            2.4vw,
            32px
        );

    line-height: 1.15;

    font-weight: 900;
}


.nova-stage-body p {

    max-width: 230px;

    margin: 0;

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

    font-size: 9px;

    line-height: 2;
}


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

.nova-journey-stage.active {

    box-shadow:
        0 25px 60px rgba(7,29,42,.15);
}


.nova-journey-stage.active::after {

    content: "";

    position: absolute;

    right: 0;

    top: 0;

    width: 4px;

    height: 100%;

    background:
        var(--nj-green);

    z-index: 5;
}


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

.nova-journey-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding:
        22px 25px;

    border-top:
        1px solid var(--nj-line);

    border-bottom:
        1px solid var(--nj-line);

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

    backdrop-filter:
        blur(8px);
}


.nova-journey-footer-left {

    display: flex;

    align-items: center;

    gap: 13px;
}


.nova-footer-check {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background:
        #E5F4EF;

    color:
        var(--nj-green);

    font-size: 16px;
}


.nova-journey-footer-left span {

    display: block;

    margin-bottom: 4px;

    color:
        var(--nj-muted);

    font-size: 7px;
}


.nova-journey-footer-left strong {

    color:
        var(--nj-text);

    font-size: 11px;

    font-weight: 900;
}


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

.nova-journey-action {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        12px 18px;

    border-radius: 8px;

    background:
        var(--nj-navy);

    color:
        #FFFFFF;

    text-decoration: none;

    font-size: 9px;

    font-weight: 900;

    transition:
        background .25s ease,
        transform .25s ease;
}


.nova-journey-action:hover {

    background:
        var(--nj-green);

    transform:
        translateY(-2px);
}


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

@media (max-width: 950px) {

    .nova-journey-container {

        width:
            calc(100% - 35px);
    }


    .nova-journey-header {

        display: block;

        margin-bottom: 45px;
    }


    .nova-journey-header > p {

        margin-top: 22px;
    }


    .nova-journey-track {

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

        gap: 14px;
    }


    .nova-journey-progress {

        display: none;
    }


    .nova-journey-stage {

        min-height: 340px;
    }

}


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

@media (max-width: 600px) {

    #nova-journey {

        padding:
            70px 0 65px;
    }


    .nova-journey-container {

        width:
            calc(100% - 24px);
    }


    .nova-journey-heading h2 {

        font-size: 40px;

        letter-spacing: -1.5px;
    }


    .nova-journey-header > p {

        width: auto;

        padding-right: 15px;

        font-size: 10px;
    }


    .nova-journey-track {

        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .nova-journey-stage {

        min-height: 320px;

        padding:
            25px;
    }


    .nova-journey-stage:hover {

        transform:
            translateY(-4px);
    }


    .nova-stage-dot {

        width: 46px;

        height: 46px;
    }


    .nova-stage-body h3 {

        font-size: 27px;
    }


    .nova-stage-body p {

        max-width: 290px;

        font-size: 9px;
    }


    .nova-journey-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding:
            18px;
    }


    .nova-journey-action {

        width: 100%;

        justify-content: center;

        box-sizing: border-box;
    }

}


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

@media (max-width: 390px) {

    .nova-journey-heading h2 {

        font-size: 34px;
    }


    .nova-journey-stage {

        min-height: 285px;

        padding:
            22px;
    }


    .nova-stage-body h3 {

        font-size: 24px;
    }


    .nova-stage-body p {

        font-size: 8px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .nova-journey-stage,
    .nova-stage-dot,
    .nova-stage-index,
    .nova-journey-action {

        transition:
            none !important;
    }

}


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
























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

#nova-protection {
    --np-green: #079875;
    --np-green-light: #19B994;
    --np-blue: #164A91;
    --np-navy: #071D2A;
    --np-bg: #F4F7F5;
    --np-white: #FFFFFF;
    --np-text: #102832;
    --np-muted: #77868A;
    --np-line: #DCE7E3;

    direction: rtl;
    padding: 105px 0 80px;
    background: linear-gradient(
        180deg,
        #F4F7F5 0%,
        #FFFFFF 100%
    );
    overflow: hidden;
}

.nova-protection-container {
    width: min(1250px, calc(100% - 40px));
    margin: auto;
}

.nova-protection-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 55px;
}

.nova-protection-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: var(--np-green);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.nova-protection-kicker i {
    font-size: 14px;
}

.nova-protection-header h2 {
    margin: 0;
    color: var(--np-text);
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: -2.5px;
}

.nova-protection-header h2 strong {
    display: block;
    color: var(--np-green);
}

.nova-protection-header > p {
    width: 340px;
    margin: 0;
    padding-right: 22px;
    border-right: 3px solid var(--np-green);
    color: var(--np-muted);
    font-size: 11px;
    line-height: 2.1;
}

.nova-protection-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--np-green) 25%,
        var(--np-blue) 50%,
        var(--np-green) 75%,
        transparent
    );
}

.nova-protection-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 24px 0;
}

.nova-protection-step {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--np-line);
    border-top: 4px solid var(--np-green);
    box-shadow: 0 18px 45px rgba(7,29,42,.07);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.nova-protection-step.step-two {
    border-top-color: var(--np-blue);
}

.nova-protection-step.step-three {
    border-top-color: var(--np-green-light);
}

.nova-protection-step:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 60px rgba(7,29,42,.13);
}

.nova-step-image {
    position: relative;
    height: 330px;
    overflow: hidden;
    background: #DCE7E3;
}

.nova-step-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(7,29,42,.02) 30%,
        rgba(7,29,42,.30) 100%
    );
    pointer-events: none;
}

.nova-step-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform .6s ease;
}

.nova-protection-step:hover .nova-step-image img {
    transform: scale(1.06);
}

.nova-image-number {
    position: absolute;
    right: 18px;
    bottom: 17px;
    z-index: 3;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow:
        0 2px 10px rgba(0,0,0,.35);
}

.nova-step-white {
    position: relative;
    min-height: 205px;
    padding: 25px 25px 28px;
    background: #FFFFFF;
}

.nova-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.nova-step-tag {
    color: var(--np-green);
    font-size: 8px;
    font-weight: 900;
}

.step-two .nova-step-tag {
    color: var(--np-blue);
}

.step-three .nova-step-tag {
    color: var(--np-green);
}

.nova-step-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #E7F4EF;
    color: var(--np-green);
    font-size: 17px;
    transition:
        background .3s ease,
        color .3s ease;
}

.step-two .nova-step-icon {
    background: #E9EFF8;
    color: var(--np-blue);
}

.step-three .nova-step-icon {
    background: #E7F5F0;
    color: var(--np-green-light);
}

.nova-protection-step:hover .nova-step-icon {
    background: var(--np-green);
    color: #FFFFFF;
}

.nova-step-white h3 {
    margin: 0 0 10px;
    color: var(--np-text);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 900;
}

.nova-step-white p {
    max-width: 300px;
    margin: 0;
    color: var(--np-muted);
    font-size: 10px;
    line-height: 2;
}

.nova-protection-banner {
    position: relative;
    min-height: 185px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 35px 45px;
    overflow: hidden;
    background: var(--np-navy);
}

.nova-protection-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 34%;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,.07);
}

.nova-protection-banner::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    left: -180px;
    bottom: -220px;
    border: 1px solid rgba(25,185,148,.18);
    border-radius: 50%;
}

.nova-banner-content {
    position: relative;
    z-index: 2;
}

.nova-banner-content span {
    display: block;
    margin-bottom: 9px;
    color: var(--np-green-light);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 3px;
}

.nova-banner-content strong {
    color: #FFFFFF;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.2;
    font-weight: 900;
}

.nova-banner-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 14px 20px;
    background: var(--np-green);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 9px;
    font-weight: 900;
    transition:
        background .25s ease,
        transform .25s ease;
}

.nova-banner-button:hover {
    background: var(--np-green-light);
    transform: translateY(-3px);
}

@media (max-width: 900px) {
    .nova-protection-header {
        display: block;
    }

    .nova-protection-header > p {
        margin-top: 22px;
    }

    .nova-protection-flow {
        grid-template-columns: 1fr;
    }

    .nova-protection-step {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }

    .nova-step-image {
        height: 330px;
    }
}

@media (max-width: 600px) {
    #nova-protection {
        padding: 70px 0 55px;
    }

    .nova-protection-container {
        width: calc(100% - 24px);
    }

    .nova-protection-header {
        margin-bottom: 35px;
    }

    .nova-protection-header h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .nova-protection-header > p {
        width: auto;
        padding-right: 15px;
        font-size: 10px;
    }

    .nova-protection-flow {
        gap: 14px;
        padding: 16px 0;
    }

    .nova-step-image {
        height: 260px;
    }

    .nova-step-white {
        min-height: 185px;
        padding: 20px 18px 23px;
    }

    .nova-step-top {
        margin-bottom: 15px;
    }

    .nova-step-icon {
        width: 39px;
        height: 39px;
        font-size: 15px;
    }

    .nova-step-white h3 {
        font-size: 20px;
    }

    .nova-step-white p {
        font-size: 8px;
    }

    .nova-protection-banner {
        min-height: 210px;
        padding: 28px 22px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-end;
    }

    .nova-banner-content strong {
        font-size: 27px;
    }

    .nova-banner-button {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }
}

@media (max-width: 390px) {
    .nova-protection-header h2 {
        font-size: 34px;
    }

    .nova-step-image {
        height: 235px;
    }

    .nova-step-white h3 {
        font-size: 18px;
    }

    .nova-step-white p {
        font-size: 7px;
    }

    .nova-banner-content strong {
        font-size: 24px;
    }
}


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






























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


/* =====================================================
   NOVA EXPERTISE
===================================================== */


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


































/* بداية منطقة 10  stop-premium-contact */


/* =====================================================
   STOP PREMIUM CONTACT + FAQ
   WHITE / DEEP TEAL / BLUE / GREEN
===================================================== */

#stop-premium-contact {

    --stop-green: #079875;
    --stop-green-light: #19B994;
    --stop-blue: #164A91;
    --stop-navy: #071D2A;

    --stop-bg: #F4F7F5;
    --stop-white: #FFFFFF;

    --stop-text: #102832;
    --stop-muted: #77868A;

    --stop-border: #DCE7E2;

    position: relative;

    padding: 110px 0;

    overflow: hidden;

    direction: rtl;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(7, 152, 117, .08),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(22, 74, 145, .07),
            transparent 30%
        ),

        var(--stop-bg);

}


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

.stop-contact-container {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin: auto;

}


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

.stop-contact-header {

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

}


.stop-contact-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

    margin-bottom: 18px;

    border-radius: 50px;

    background: #E3F4EF;

    color: var(--stop-green);

    font-size: 11px;

    font-weight: 900;

}


.stop-contact-header h2 {

    margin: 0 0 18px;

    color: var(--stop-text);

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

    line-height: 1.1;

    font-weight: 900;

    letter-spacing: -2px;

}


.stop-contact-header h2 strong {

    display: block;

    color: var(--stop-green);

}


.stop-contact-header p {

    max-width: 620px;

    margin: auto;

    color: var(--stop-muted);

    font-size: 14px;

    line-height: 2;

}


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

.stop-contact-layout {

    display: grid;

    grid-template-columns:
        .95fr 1.05fr;

    gap: 55px;

    align-items: stretch;

}


/* =====================================================
   LEFT FAQ AREA
===================================================== */

.stop-contact-side {

    padding: 10px 0;

}


.stop-contact-side-title {

    margin-bottom: 25px;

}


.stop-contact-side-title > span {

    display: block;

    margin-bottom: 8px;

    color: var(--stop-green);

    font-size: 10px;

    font-weight: 900;

}


.stop-contact-side-title h3 {

    margin: 0;

    color: var(--stop-text);

    font-size: 28px;

    line-height: 1.4;

    font-weight: 900;

}


.stop-contact-side-title h3 strong {

    color: var(--stop-green);

}


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

.stop-faq-item {

    margin-bottom: 10px;

    overflow: hidden;

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

    border-radius: 15px;

    background: var(--stop-white);

    box-shadow:
        0 10px 30px
        rgba(16, 40, 50, .035);

    transition:
        .25s ease;

}


.stop-faq-item:hover {

    border-color:
        rgba(7, 152, 117, .35);

}


.stop-faq-item.active {

    border-color:
        rgba(7, 152, 117, .45);

    box-shadow:
        0 15px 35px
        rgba(7, 152, 117, .07);

}


/* =====================================================
   FAQ QUESTION
===================================================== */

.stop-faq-question {

    width: 100%;

    min-height: 64px;

    padding: 12px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border: none;

    outline: none;

    cursor: pointer;

    background: transparent;

    color: var(--stop-text);

    font-family: inherit;

    text-align: right;

}


.stop-faq-question > span {

    display: flex;

    align-items: center;

    gap: 11px;

    font-size: 11px;

    font-weight: 900;

}


.stop-faq-question > span > i {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: #E7F5F0;

    color: var(--stop-green);

    font-size: 14px;

}


.stop-faq-plus {

    width: 30px;

    height: 30px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #F1F6F4;

    color: var(--stop-green);

    font-size: 10px;

    transition:
        .3s ease;

}


/* =====================================================
   FAQ ANSWER
===================================================== */

.stop-faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .35s ease;

}


.stop-faq-answer p {

    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0 18px;

    color: var(--stop-muted);

    font-size: 10px;

    line-height: 2;

    transition:
        padding .35s ease;

}


/* =====================================================
   ACTIVE FAQ
===================================================== */

.stop-faq-item.active
.stop-faq-answer {

    grid-template-rows: 1fr;

}


.stop-faq-item.active
.stop-faq-answer p {

    padding:
        0 18px 17px;

}


.stop-faq-item.active
.stop-faq-plus {

    transform:
        rotate(45deg);

    background:
        var(--stop-green);

    color: #FFFFFF;

}


/* =====================================================
   FAQ AVAILABILITY
===================================================== */

.stop-contact-availability {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding: 14px 16px;

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

    border-radius: 15px;

    background:
        #F9FCFA;

}


.stop-contact-availability-icon {

    width: 42px;

    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        #E5F5EF;

    color:
        var(--stop-green);

    font-size: 16px;

}


.stop-contact-availability div:nth-child(2) {

    flex: 1;

}


.stop-contact-availability span {

    display: block;

    margin-bottom: 3px;

    color: var(--stop-muted);

    font-size: 8px;

}


.stop-contact-availability strong {

    display: block;

    color: var(--stop-text);

    font-size: 10px;

    font-weight: 900;

}


.stop-contact-availability b {

    padding: 6px 9px;

    border-radius: 7px;

    background:
        #EAF7F2;

    color:
        var(--stop-green);

    font-size: 8px;

}


/* =====================================================
   FORM AREA
===================================================== */

.stop-contact-form-area {

    padding: 32px;

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

    border-radius: 25px;

    background:
        var(--stop-white);

    box-shadow:
        0 30px 70px
        rgba(16, 40, 50, .08);

}


/* =====================================================
   FORM HEAD
===================================================== */

.stop-contact-form-head {

    margin-bottom: 27px;

}


.stop-contact-form-head > span {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color:
        var(--stop-green);

    font-size: 10px;

    font-weight: 900;

}


.stop-contact-form-head h3 {

    margin: 0 0 7px;

    color:
        var(--stop-text);

    font-size: 30px;

    font-weight: 900;

}


.stop-contact-form-head h3 strong {

    color:
        var(--stop-green);

}


.stop-contact-form-head p {

    margin: 0;

    color:
        var(--stop-muted);

    font-size: 9px;

    line-height: 1.9;

}


/* =====================================================
   FORM
===================================================== */

.stop-contact-form {

    display: flex;

    flex-direction: column;

    gap: 17px;

}


.stop-contact-field label {

    display: block;

    margin-bottom: 8px;

    color:
        var(--stop-text);

    font-size: 9px;

    font-weight: 900;

}


/* =====================================================
   INPUT
===================================================== */

.stop-contact-input {

    position: relative;

    height: 52px;

    display: flex;

    align-items: center;

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

    border-radius: 12px;

    background:
        #FAFCFB;

    transition:
        .25s ease;

}


.stop-contact-input:focus-within {

    border-color:
        var(--stop-green);

    background:
        #FFFFFF;

    box-shadow:
        0 0 0 4px
        rgba(7, 152, 117, .08);

}


.stop-contact-input > i {

    width: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--stop-green);

    font-size: 15px;

}


.stop-contact-input input,
.stop-contact-input select {

    width: 100%;

    height: 100%;

    padding:
        0 5px 0 15px;

    border: none;

    outline: none;

    background: transparent;

    color:
        var(--stop-text);

    font-family: inherit;

    font-size: 10px;

}


.stop-contact-input select {

    cursor: pointer;

}


.stop-contact-input select option {

    background:
        #FFFFFF;

    color:
        var(--stop-text);

}


/* =====================================================
   MESSAGE
===================================================== */

.stop-contact-message {

    padding: 12px 14px;

    border-radius: 10px;

    color:
        var(--stop-blue);

    background:
        #EEF5FF;

    font-size: 9px;

    font-weight: 800;

    line-height: 1.7;

}


/* =====================================================
   SUBMIT
===================================================== */

.stop-contact-submit {

    width: 100%;

    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    border: none;

    border-radius: 13px;

    cursor: pointer;

    background:
        var(--stop-blue);

    color:
        #FFFFFF;

    font-family: inherit;

    font-size: 11px;

    font-weight: 900;

    transition:
        .25s ease;

}


.stop-contact-submit:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(22, 74, 145, .18);

}


.stop-contact-submit i {

    transition:
        .25s ease;

}


.stop-contact-submit:hover i {

    transform:
        translateX(-4px);

}


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

.stop-contact-trust {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 16px;

    padding-top: 2px;

}


.stop-contact-trust span {

    display: flex;

    align-items: center;

    gap: 5px;

    color:
        var(--stop-muted);

    font-size: 8px;

    font-weight: 800;

}


.stop-contact-trust i {

    color:
        var(--stop-green);

}


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

.stop-contact-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 55px;

    padding: 22px 28px;

    border-radius: 20px;

    background:
        var(--stop-navy);

}


.stop-contact-bottom-icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(25, 185, 148, .12);

    color:
        var(--stop-green-light);

    font-size: 22px;

}


.stop-contact-bottom-text {

    flex: 1;

}


.stop-contact-bottom-text strong {

    display: block;

    margin-bottom: 4px;

    color:
        #FFFFFF;

    font-size: 13px;

    font-weight: 900;

}


.stop-contact-bottom-text span {

    color:
        #9AADB4;

    font-size: 9px;

}


.stop-contact-bottom-buttons {

    display: flex;

    gap: 10px;

}


.stop-contact-bottom-buttons a {

    min-height: 45px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        0 18px;

    border-radius: 10px;

    text-decoration: none;

    font-size: 9px;

    font-weight: 900;

    transition:
        .25s ease;

}


.stop-contact-bottom-buttons a:hover {

    transform:
        translateY(-2px);

}


.stop-contact-whatsapp {

    background:
        var(--stop-green);

    color:
        #FFFFFF;

}


.stop-contact-call {

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

    color:
        #FFFFFF;

}


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

@media (max-width: 950px) {

    #stop-premium-contact {

        padding:
            85px 0;

    }


    .stop-contact-layout {

        grid-template-columns:
            1fr;

        gap: 40px;

    }


    .stop-contact-side {

        max-width:
            700px;

        width: 100%;

        margin:
            auto;

    }


    .stop-contact-form-area {

        max-width:
            700px;

        width: 100%;

        margin:
            auto;

    }

}


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

@media (max-width: 650px) {

    #stop-premium-contact {

        padding:
            70px 0;

    }


    .stop-contact-container {

        width:
            calc(100% - 24px);

    }


    .stop-contact-header {

        margin-bottom:
            40px;

    }


    .stop-contact-header h2 {

        font-size:
            40px;

        letter-spacing:
            -1.5px;

    }


    .stop-contact-header p {

        padding:
            0 5px;

        font-size:
            11px;

        line-height:
            2;

    }


    /* FAQ */

    .stop-contact-side-title {

        margin-bottom:
            20px;

    }


    .stop-contact-side-title h3 {

        font-size:
            23px;

    }


    .stop-faq-question {

        min-height:
            59px;

        padding:
            10px 12px;

        gap:
            8px;

    }


    .stop-faq-question > span {

        gap:
            8px;

        font-size:
            9px;

    }


    .stop-faq-question > span > i {

        width:
            31px;

        height:
            31px;

        border-radius:
            9px;

        font-size:
            12px;

    }


    .stop-faq-plus {

        width:
            27px;

        height:
            27px;

        font-size:
            9px;

    }


    .stop-faq-answer p {

        padding:
            0 14px;

        font-size:
            8px;

        line-height:
            2;

    }


    .stop-faq-item.active
    .stop-faq-answer p {

        padding:
            0 14px 14px;

    }


    .stop-contact-availability {

        padding:
            12px;

    }


    .stop-contact-availability-icon {

        width:
            38px;

        height:
            38px;

    }


    .stop-contact-availability strong {

        font-size:
            9px;

    }


    /* FORM */

    .stop-contact-form-area {

        padding:
            20px;

        border-radius:
            20px;

    }


    .stop-contact-form-head h3 {

        font-size:
            24px;

    }


    .stop-contact-form-head p {

        font-size:
            8px;

    }


    .stop-contact-form {

        gap:
            15px;

    }


    .stop-contact-input {

        height:
            50px;

    }


    .stop-contact-trust {

        gap:
            10px;

    }


    .stop-contact-trust span {

        font-size:
            7px;

    }


    /* BOTTOM */

    .stop-contact-bottom {

        flex-direction:
            column;

        align-items:
            stretch;

        margin-top:
            40px;

        padding:
            22px 16px;

        text-align:
            center;

    }


    .stop-contact-bottom-icon {

        margin:
            auto;

    }


    .stop-contact-bottom-text {

        text-align:
            center;

    }


    .stop-contact-bottom-text strong {

        font-size:
            11px;

    }


    .stop-contact-bottom-text span {

        font-size:
            8px;

        line-height:
            1.8;

    }


    .stop-contact-bottom-buttons {

        width:
            100%;

    }


    .stop-contact-bottom-buttons a {

        flex:
            1;

        padding:
            0 8px;

    }

}


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

@media (max-width: 400px) {

    .stop-contact-header h2 {

        font-size:
            34px;

    }


    .stop-contact-side-title h3 {

        font-size:
            21px;

    }


    .stop-faq-question > span {

        font-size:
            8px;

    }


    .stop-contact-form-area {

        padding:
            17px;

    }


    .stop-contact-bottom-buttons a {

        font-size:
            8px;

    }

}




/* نهاية منطقة  10  stop-premium-contact */























/* فوتر  */

/* =====================================================
   GERMAN PREMIUM FOOTER
   DEEP NAVY / GREEN / BLUE
===================================================== */

.german-footer {

    --footer-green: #079875;
    --footer-green-light: #19B994;
    --footer-blue: #164A91;
    --footer-navy: #071D2A;
    --footer-navy-light: #0B2937;

    --footer-text: #FFFFFF;
    --footer-muted: #91A5AC;
    --footer-border: rgba(255,255,255,.09);

    position: relative;

    overflow: hidden;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #071D2A 0%,
            #092633 50%,
            #071D2A 100%
        );

    color: #FFFFFF;

}


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

.german-footer-glow {

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(5px);

}


.german-footer-glow-one {

    top: -220px;

    right: -100px;

    background:
        radial-gradient(
            circle,
            rgba(7,152,117,.16),
            transparent 68%
        );

}


.german-footer-glow-two {

    bottom: -250px;

    left: -120px;

    background:
        radial-gradient(
            circle,
            rgba(22,74,145,.16),
            transparent 68%
        );

}


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

.german-footer-container {

    position: relative;

    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin: auto;

    padding-top: 75px;

}


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

.german-footer-top {

    display: grid;

    grid-template-columns:
        1.4fr
        .8fr
        .9fr
        1.1fr;

    gap: 55px;

    padding-bottom: 55px;

}


/* =====================================================
   BRAND
===================================================== */

.german-footer-brand-logo {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 20px;

}


.german-footer-logo-box {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--footer-green),
            var(--footer-green-light)
        );

    color: #FFFFFF;

    font-size: 23px;

    box-shadow:
        0 12px 30px
        rgba(7,152,117,.18);

}


.german-footer-brand-logo h3 {

    margin: 0 0 4px;

    color: #FFFFFF;

    font-size: 19px;

    font-weight: 900;

}


.german-footer-brand-logo span {

    color:
        var(--footer-muted);

    font-size: 9px;

}


.german-footer-brand p {

    max-width: 360px;

    margin: 0 0 20px;

    color:
        var(--footer-muted);

    font-size: 10px;

    line-height: 2.1;

}


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

.german-footer-trust {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.german-footer-trust span {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding:
        7px 9px;

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

    border-radius: 8px;

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

    color:
        #A8B8BD;

    font-size: 7px;

    font-weight: 800;

}


.german-footer-trust i {

    color:
        var(--footer-green-light);

}


/* =====================================================
   COLUMN
===================================================== */

.german-footer-heading {

    margin-bottom: 18px;

}


.german-footer-heading span {

    display: block;

    margin-bottom: 5px;

    color:
        var(--footer-green-light);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .5px;

}


.german-footer-heading h4 {

    margin: 0;

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 900;

}


.german-footer-column a {

    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-bottom: 13px;

    color:
        var(--footer-muted);

    text-decoration: none;

    font-size: 9px;

    transition:
        .25s ease;

}


.german-footer-column a i {

    color:
        var(--footer-green);

    font-size: 8px;

    transition:
        .25s ease;

}


.german-footer-column a:hover {

    color:
        #FFFFFF;

    transform:
        translateX(-4px);

}


.german-footer-column a:hover i {

    color:
        var(--footer-green-light);

}


/* =====================================================
   CONTACT
===================================================== */

.german-footer-contact {

    min-width: 0;

}


.german-contact-card {

    display: flex;

    align-items: center;

    gap: 10px;

    min-height: 55px;

    margin-bottom: 9px;

    padding:
        8px 10px;

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

    border-radius: 12px;

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

    text-decoration: none;

    transition:
        .25s ease;

}


.german-contact-card:hover {

    border-color:
        rgba(25,185,148,.25);

    background:
        rgba(7,152,117,.07);

}


.german-contact-card-icon {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background:
        rgba(7,152,117,.12);

    color:
        var(--footer-green-light);

    font-size: 12px;

}


.german-contact-card-text {

    flex: 1;

    min-width: 0;

}


.german-contact-card-text small {

    display: block;

    margin-bottom: 3px;

    color:
        #71878F;

    font-size: 7px;

}


.german-contact-card-text strong {

    display: block;

    overflow: hidden;

    color:
        #FFFFFF;

    font-size: 9px;

    font-weight: 900;

    text-overflow: ellipsis;

    white-space: nowrap;

}


.german-contact-card > i {

    color:
        #536C75;

    font-size: 8px;

}


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

.german-footer-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding:
        25px 28px;

    border:
        1px solid
        rgba(25,185,148,.16);

    border-radius: 20px;

    background:

        linear-gradient(
            110deg,
            rgba(7,152,117,.12),
            rgba(22,74,145,.08)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.035);

}


.german-footer-cta-content {

    display: flex;

    align-items: center;

    gap: 15px;

}


.german-footer-cta-icon {

    width: 50px;

    height: 50px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        rgba(25,185,148,.13);

    color:
        var(--footer-green-light);

    font-size: 20px;

}


.german-footer-cta-content > div:last-child > span {

    display: block;

    margin-bottom: 4px;

    color:
        var(--footer-green-light);

    font-size: 8px;

    font-weight: 900;

}


.german-footer-cta-content h2 {

    margin: 0 0 4px;

    color:
        #FFFFFF;

    font-size: 19px;

    font-weight: 900;

}


.german-footer-cta-content h2 strong {

    color:
        var(--footer-green-light);

}


.german-footer-cta-content p {

    margin: 0;

    color:
        var(--footer-muted);

    font-size: 8px;

}


/* =====================================================
   WHATSAPP CTA
===================================================== */

.german-footer-whatsapp {

    min-width: 220px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        10px 12px;

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

    border-radius: 13px;

    background:
        var(--footer-green);

    color:
        #FFFFFF;

    text-decoration: none;

    box-shadow:
        0 12px 30px
        rgba(7,152,117,.15);

    transition:
        .25s ease;

}


.german-footer-whatsapp:hover {

    transform:
        translateY(-3px);

    background:
        var(--footer-green-light);

    box-shadow:
        0 16px 35px
        rgba(7,152,117,.25);

}


.german-footer-whatsapp-icon {

    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

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

    font-size: 17px;

}


.german-footer-whatsapp-text {

    flex: 1;

}


.german-footer-whatsapp-text strong {

    display: block;

    margin-bottom: 2px;

    font-size: 10px;

    font-weight: 900;

}


.german-footer-whatsapp-text small {

    display: block;

    font-size: 7px;

    opacity: .8;

}


.german-footer-whatsapp-arrow {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    font-size: 8px;

}


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

.german-footer-bottom {

    margin-top:
        35px;

    border-top:
        1px solid var(--footer-border);

}


.german-footer-bottom-inner {

    min-height: 75px;

    display: grid;

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

    align-items: center;

    gap: 20px;

}


.german-footer-copy {

    display: flex;

    align-items: center;

    gap: 5px;

    color:
        #71868E;

    font-size: 8px;

}


.german-footer-copy strong {

    color:
        #B7C4C8;

    font-weight: 900;

}


/* =====================================================
   SOCIAL
===================================================== */

.german-footer-social {

    display: flex;

    align-items: center;

    gap: 7px;

}


.german-footer-social a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 9px;

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

    color:
        #81959C;

    text-decoration: none;

    font-size: 12px;

    transition:
        .25s ease;

}


.german-footer-social a:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(25,185,148,.3);

    background:
        rgba(7,152,117,.12);

    color:
        var(--footer-green-light);

}


/* =====================================================
   DEVELOPER
===================================================== */

.german-footer-developer {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 5px;

    color:
        #647980;

    font-size: 8px;

}


.german-footer-developer a {

    color:
        var(--footer-green-light);

    text-decoration: none;

    font-weight: 900;

    transition:
        .25s ease;

}


.german-footer-developer a:hover {

    color:
        #FFFFFF;

}


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

@media (max-width: 950px) {

    .german-footer-top {

        grid-template-columns:
            1fr 1fr;

        gap: 45px 35px;

    }


    .german-footer-brand {

        grid-column:
            span 2;

    }


    .german-footer-brand p {

        max-width:
            600px;

    }


    .german-footer-cta {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .german-footer-whatsapp {

        width:
            100%;

    }

}


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

@media (max-width: 650px) {

    .german-footer-container {

        width:
            calc(100% - 24px);

        padding-top:
            55px;

    }


    .german-footer-top {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding-bottom:
            40px;

    }


    .german-footer-brand {

        grid-column:
            auto;

    }


    .german-footer-brand-logo {

        justify-content:
            flex-start;

    }


    .german-footer-brand p {

        font-size:
            9px;

        line-height:
            2;

    }


    .german-footer-trust {

        gap:
            6px;

    }


    .german-footer-heading {

        margin-bottom:
            15px;

    }


    .german-footer-column a {

        margin-bottom:
            11px;

        font-size:
            9px;

    }


    .german-contact-card {

        min-height:
            52px;

    }


    .german-footer-cta {

        padding:
            20px 16px;

        border-radius:
            17px;

    }


    .german-footer-cta-content {

        align-items:
            flex-start;

    }


    .german-footer-cta-icon {

        width:
            43px;

        height:
            43px;

        border-radius:
            11px;

        font-size:
            17px;

    }


    .german-footer-cta-content h2 {

        font-size:
            16px;

    }


    .german-footer-cta-content p {

        font-size:
            7px;

        line-height:
            1.8;

    }


    .german-footer-whatsapp {

        min-width:
            0;

    }


    .german-footer-bottom-inner {

        min-height:
            auto;

        display:
            flex;

        flex-direction:
            column;

        gap:
            18px;

        padding:
            22px 0;

        text-align:
            center;

    }


    .german-footer-copy {

        justify-content:
            center;

        flex-wrap:
            wrap;

    }


    .german-footer-social {

        justify-content:
            center;

    }


    .german-footer-developer {

        justify-content:
            center;

    }

}


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

@media (max-width: 400px) {

    .german-footer-container {

        width:
            calc(100% - 18px);

    }


    .german-footer-brand-logo h3 {

        font-size:
            17px;

    }


    .german-footer-brand-logo span {

        font-size:
            8px;

    }


    .german-footer-trust span {

        font-size:
            6px;

        padding:
            6px 7px;

    }


    .german-footer-cta-content h2 {

        font-size:
            14px;

    }


    .german-footer-whatsapp-text strong {

        font-size:
            9px;

    }

}




/* نهاية الفوتر  */




































/* هدر */
/* =====================================================
   PREMIUM HEADER
   GERMAN BRAND IDENTITY
===================================================== */

/* =====================================================
   GERMAN PREMIUM HEADER
   GREEN / BLUE / WHITE
===================================================== */

#german-main-header {

    --german-green: #079875;
    --german-green-light: #19B994;
    --german-blue: #164A91;
    --german-navy: #071D2A;
    --german-white: #FFFFFF;
    --german-text: #102832;

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    z-index: 9999;

    direction: rtl;

    padding: 18px 0;

}


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

.german-header-inner {

    width: min(
        1240px,
        calc(100% - 40px)
    );

    min-height: 76px;

    margin: auto;

    padding: 0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

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

    border-radius: 20px;

    background: rgba(
        7,
        29,
        42,
        .78
    );

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

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

}


/* =====================================================
   BRAND
===================================================== */

.german-brand {

    display: flex;

    align-items: center;

    gap: 11px;

    flex-shrink: 0;

    color: #FFFFFF;

    text-decoration: none;

}


.german-brand-mark {

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            var(--german-green-light),
            var(--german-green)
        );

    color: #FFFFFF;

    font-size: 21px;

    box-shadow:
        0 8px 20px
        rgba(7,152,117,.25);

}


.german-brand-info {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.german-brand-info strong {

    color: #FFFFFF;

    font-size: 18px;

    font-weight: 900;

}


.german-brand-info small {

    margin-top: 7px;

    color: #9FB2B8;

    font-size: 6px;

    letter-spacing: 2px;

    font-weight: 800;

}


/* =====================================================
   NAVIGATION
===================================================== */

.german-main-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

}


.german-nav-item {

    position: relative;

    padding: 12px 14px;

    color: #C4D0D4;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    transition:
        .25s ease;

}


.german-nav-item::after {

    content: "";

    position: absolute;

    right: 50%;

    bottom: 3px;

    width: 0;

    height: 2px;

    transform:
        translateX(50%);

    border-radius: 10px;

    background:
        var(--german-green-light);

    transition:
        .25s ease;

}


.german-nav-item:hover,
.german-nav-item.active {

    color: #FFFFFF;

}


.german-nav-item:hover::after,
.german-nav-item.active::after {

    width: 22px;

}


/* =====================================================
   CALL
===================================================== */

.german-header-action {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 7px 11px;

    color: #FFFFFF;

    text-decoration: none;

    border-radius: 13px;

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

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

    transition:
        .25s ease;

}


.german-header-action:hover {

    background:
        var(--german-green);

    transform:
        translateY(-2px);

}


.german-header-action-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background:
        var(--german-green);

    color: #FFFFFF;

    font-size: 13px;

}


.german-header-action-content {

    display: flex;

    flex-direction: column;

}


.german-header-action-content small {

    margin-bottom: 4px;

    color: #91A6AC;

    font-size: 7px;

}


.german-header-action-content strong {

    color: #FFFFFF;

    font-size: 10px;

    direction: ltr;

}


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

.german-mobile-button {

    display: none;

    width: 46px;

    height: 46px;

    padding: 0;

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

    border-radius: 13px;

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

    cursor: pointer;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

}


.german-mobile-button span {

    width: 20px;

    height: 2px;

    border-radius: 5px;

    background: #FFFFFF;

    transition:
        .25s ease;

}


.german-mobile-button.is-open span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.german-mobile-button.is-open span:nth-child(2) {

    opacity: 0;

}


.german-mobile-button.is-open span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


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

.german-mobile-navigation {

    display: none;

}


/* =====================================================
   HERO
===================================================== */

#german-premium-hero {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 650px;

    direction: rtl;

    overflow: hidden;

}


#german-premium-hero .carousel,
#german-premium-hero .carousel-inner,
#german-premium-hero .carousel-item {

    width: 100%;

    height: 100%;

}


#german-premium-hero .carousel-item {

    position: relative;

    background-position:
        center;

    background-size:
        cover;

}


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

.german-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,29,42,.40),
            rgba(7,29,42,.72)
        );

}


.german-hero-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,29,42,.55),
            transparent 35%,
            rgba(7,29,42,.45)
        );

}


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

.german-hero-content {

    position: absolute;

    top: 50%;

    right: max(
        7%,
        calc(
            (100% - 1240px) / 2
        )
    );

    z-index: 3;

    width: min(
        650px,
        55%
    );

    transform:
        translateY(-42%);

}


.german-hero-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 22px;

    padding: 9px 14px;

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

    border-radius: 50px;

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

    backdrop-filter:
        blur(10px);

    color:
        #D8F7EE;

    font-size: 9px;

    font-weight: 800;

}


.german-hero-label i {

    color:
        var(--german-green-light);

}


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

.german-hero-content h1 {

    margin: 0 0 20px;

    color: #FFFFFF;

    font-size:
        clamp(
            45px,
            6vw,
            78px
        );

    line-height: 1.04;

    letter-spacing:
        -3px;

    font-weight: 900;

}


.german-hero-content h1 strong {

    color:
        var(--german-green-light);

}


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

.german-hero-content p {

    max-width: 530px;

    margin: 0 0 30px;

    color:
        #D3DEE1;

    font-size: 13px;

    line-height: 2;

}


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

.german-hero-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


.german-hero-whatsapp,
.german-hero-call {

    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 7px 10px;

    text-decoration: none;

    border-radius: 14px;

    transition:
        .25s ease;

}


.german-hero-whatsapp {

    min-width: 190px;

    background:
        var(--german-green);

    color: #FFFFFF;

}


.german-hero-whatsapp:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 30px
        rgba(
            7,
            152,
            117,
            .25
        );

}


.german-hero-call {

    min-width: 175px;

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

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

    color: #FFFFFF;

}


.german-hero-call:hover {

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

    transform:
        translateY(-3px);

}


.german-hero-whatsapp > i,
.german-hero-call > i {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

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

    font-size: 15px;

}


.german-hero-actions span {

    display: flex;

    flex-direction: column;

    flex: 1;

    font-size: 11px;

    font-weight: 900;

}


.german-hero-actions span small {

    margin-bottom: 3px;

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

    font-size: 7px;

    font-weight: 700;

}


.german-hero-whatsapp b {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

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

}


/* =====================================================
   COUNTER
===================================================== */

.german-hero-counter {

    position: absolute;

    bottom: 35px;

    left: max(
        6%,
        calc(
            (100% - 1240px) / 2
        )
    );

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #FFFFFF;

}


.german-hero-counter strong {

    color:
        var(--german-green-light);

    font-size: 18px;

}


.german-hero-counter span {

    width: 65px;

    height: 1px;

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

}


.german-hero-counter small {

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

    font-size: 9px;

}


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

.german-hero-arrow {

    position: absolute;

    top: 50%;

    z-index: 5;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translateY(-50%);

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

    border-radius: 50%;

    background:
        rgba(
            7,
            29,
            42,
            .55
        );

    backdrop-filter:
        blur(8px);

    color: #FFFFFF;

    cursor: pointer;

    transition:
        .25s ease;

}


.german-hero-arrow:hover {

    background:
        var(--german-green);

    border-color:
        var(--german-green);

}


.german-hero-prev {

    right: 25px;

}


.german-hero-next {

    left: 25px;

}


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

@media (max-width: 1050px) {

    .german-main-nav {

        gap: 0;

    }

    .german-nav-item {

        padding:
            10px 8px;

        font-size: 9px;

    }

    .german-header-action-content {

        display: none;

    }

    .german-header-action {

        padding: 6px;

    }

    .german-hero-content {

        right: 6%;

        width: 65%;

    }

}


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

@media (max-width: 750px) {

    #german-main-header {

        padding: 10px 0;

    }


    .german-header-inner {

        width:
            calc(100% - 20px);

        min-height: 64px;

        padding:
            0 10px;

        border-radius: 16px;

    }


    .german-brand-mark {

        width: 40px;

        height: 40px;

        border-radius: 11px;

        font-size: 17px;

    }


    .german-brand-info strong {

        font-size: 15px;

    }


    .german-brand-info small {

        font-size: 5px;

        letter-spacing: 1.5px;

    }


    .german-main-nav,
    .german-header-action {

        display: none;

    }


    .german-mobile-button {

        display: flex;

    }


    /* MOBILE MENU */

    .german-mobile-navigation {

        position: fixed;

        top: 84px;

        right: 10px;

        left: 10px;

        z-index: 9998;

        display: block;

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-15px);

        transition:
            .25s ease;

    }


    .german-mobile-navigation.is-open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }


    .german-mobile-navigation-inner {

        padding: 15px;

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

        border-radius: 20px;

        background:
            rgba(
                7,
                29,
                42,
                .97
            );

        box-shadow:
            0 25px 60px
            rgba(0,0,0,.25);

        backdrop-filter:
            blur(20px);

    }


    .german-mobile-title {

        display: flex;

        align-items: center;

        gap: 10px;

        padding:
            5px 5px 15px;

        margin-bottom: 5px;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .08
            );

    }


    .german-mobile-title-icon {

        width: 39px;

        height: 39px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 11px;

        background:
            var(--german-green);

        color: #FFFFFF;

    }


    .german-mobile-title div {

        display: flex;

        flex-direction: column;

    }


    .german-mobile-title strong {

        color: #FFFFFF;

        font-size: 13px;

    }


    .german-mobile-title small {

        margin-top: 4px;

        color: #84979E;

        font-size: 7px;

    }


    .german-mobile-navigation-inner > a {

        display: flex;

        align-items: center;

        gap: 12px;

        min-height: 47px;

        padding:
            0 10px;

        color: #D4DEE1;

        text-decoration: none;

        border-radius: 11px;

        font-size: 10px;

        font-weight: 800;

        transition:
            .2s ease;

    }


    .german-mobile-navigation-inner > a:hover {

        background:
            rgba(
                25,
                185,
                148,
                .10
            );

        color:
            var(--german-green-light);

    }


    .german-mobile-navigation-inner > a > i:first-child {

        width: 28px;

        height: 28px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 8px;

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

        color:
            var(--german-green-light);

    }


    .german-mobile-whatsapp {

        margin-top: 10px;

        padding:
            0 12px !important;

        background:
            var(--german-green);

        color: #FFFFFF !important;

    }


    .german-mobile-whatsapp > i:first-child {

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

        color: #FFFFFF !important;

    }


    .german-mobile-whatsapp > i:last-child {

        margin-right: auto;

    }


    /* HERO */

    #german-premium-hero {

        min-height: 650px;

        height: 100svh;

    }


    .german-hero-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(7,29,42,.62),
                rgba(7,29,42,.82)
            );

    }


    .german-hero-content {

        top: 53%;

        right: 20px;

        left: 20px;

        width: auto;

        transform:
            translateY(-45%);

        text-align: right;

    }


    .german-hero-label {

        margin-bottom: 17px;

        font-size: 7px;

        padding:
            8px 11px;

    }


    .german-hero-content h1 {

        margin-bottom: 17px;

        font-size:
            clamp(
                39px,
                12vw,
                55px
            );

        line-height: 1.08;

        letter-spacing:
            -1.8px;

    }


    .german-hero-content p {

        max-width: 100%;

        margin-bottom: 22px;

        font-size: 10px;

        line-height: 2;

    }


    .german-hero-actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

    }


    .german-hero-whatsapp,
    .german-hero-call {

        width: 100%;

        min-width: 0;

        min-height: 53px;

    }


    .german-hero-counter {

        bottom: 20px;

        left: 20px;

    }


    .german-hero-arrow {

        display: none;

    }

}


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

@media (max-width: 400px) {

    .german-hero-content {

        right: 16px;

        left: 16px;

    }


    .german-hero-content h1 {

        font-size: 36px;

    }


    .german-hero-content p {

        font-size: 9px;

    }


    .german-mobile-navigation {

        top: 80px;

    }

}




























/* =====================================================
   إخفاء زر الصعود لأعلى نهائياً
   ===================================================== */

#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;
    }

}