:root {
	--main-color: #2C742F;
    --dark-green: #2A6049;
}
html {
  scroll-behavior: smooth;
}
p, a, span, h1, h2, h3, h4, h5, h6, button, input{
	font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
body {overflow-x: hidden;}

.montserrat-font {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

ul, p, a, span, h1, h2, h3, h4, h5, h6, button {margin: 0; padding: 0}
html {scroll-behavior: unset !important;}
a {text-decoration: none; color: #000;}
.cursor-pointer {cursor: pointer;}
.main-clr {color: var(--main-color);}
.fs-32 {font-size: 32px;}
.fs-23 {font-size: 23px;}
.aspect-ratio-1 {aspect-ratio: 1 / 1;}
/* Start lines in background */
.line-box > div {border-left: 1px solid #e8e7e8;}
.line-box:last-child > div {border-right: 1px solid #e8e7e8;}
.h-100vh {height: 100vh;}

/* Start code to text animation coloring */
.word {display: inline-block; white-space: nowrap;}
/* استثناء للكلمات الطويلة جدًا — يسمح بالكسر داخلها لتفادي overflow */
.word.long {display: inline;white-space: normal;word-break: break-word; /* أو break-all حسب الحاجة */}
.char {display: inline-block; line-height: 1;}
.space {display: inline-block;width: 0.5ch;}
/* End code to text animation coloring */

/* Start header */
.header {top: 0; right: 0; left: 0; width: 100%; }
.logo-website {display: none;}
.header.dark-text .logo-dark {display: block;}
.header.light-text .logo-light {display: block;}

nav.nav-list {
    position: fixed;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    transition: all .4s ease-in-out;
}
nav.nav-list.open {
    top: 0;
}
nav.nav-list ul li a {font-size: 50px; margin-left: 100px;}
.nav-list a {
    display: inline-block;
    position: relative;
}

.nav-list a .char {
    display: inline-block;
    transition: transform 0.3s ease;
    pointer-events: none;
    color: white !important;
}
#nav-btn {
  position: relative;       /* ضروري ليعمل z-index */
  z-index: 9999;            /* أعلى من الـ nav-list */
  background: transparent;
  border: 0;
  
  mix-blend-mode: difference;
  -webkit-font-smoothing: antialiased;
}
#nav-btn .lines span {transition: all .2s ease-in-out;}
#nav-btn.open .lines span:nth-child(3){
    opacity: 0;
}
#nav-btn.open .lines span:nth-child(1){
    transform: rotate(45deg) translate(3px, -4px)
}
#nav-btn.open .lines span:nth-child(2){
    transform: rotate(-45deg) translate(-5px, -5px);
}

header.light-text #nav-btn {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header.dark-text #nav-btn {color: #000; /* text-shadow: 0 2px 4px rgba(255,255,255,0.3); */}


/* End header */

/********************************** Start Home Page **********************************/

/* Start main section */
.main-section-home {padding-top: 100px;}
.main-section .big-title {font-size: 177px; margin-top: -256px;}
.main-section .images-wrap {min-height: 400px;}

.images-wrap {width: 550px; margin-left: auto; }

/* قاعدة عامة للصور */
.image-animate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-100%) rotate(var(--rot, 0deg));
  opacity: 0;
  width: 100%;       /* عدّل بحسب حاجتك */
  height: auto;
  will-change: transform, opacity;  
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(.22,.88,.32,1);
  animation-fill-mode: forwards; /* يبقي الحالة النهائية */
}

/* keyframes للسقوط والاختفاء */
@keyframes dropAndDisappear {
    0% {
        transform: translateX(-50%) translateY(-120%) rotate(var(--rot));
        opacity: 0;
    }
    40% {
        transform: translateX(-50%) translateY(0%) rotate(var(--rot));
        opacity: 1;
    }
    80% {
        /* هنا الإطالة التي تضيف التأخير قبل الاختفاء */
        transform: translateX(-50%) translateY(0) rotate(var(--rot));
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(0) rotate(var(--rot));
        opacity: 0;
    }
}

/* keyframes للسقوط والبقاء (لآخر صورة) */
@keyframes dropAndStay {
  0% {
    transform: translateX(-50%) translateY(-120%) rotate(var(--rot));
    opacity: 0;
  }
  40% {
    transform: translateX(-50%) translateY(0%) rotate(var(--rot));
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0%) rotate(0);
    opacity: 1;
  }
}

/* مثال ثابت لزاوية لكل nth-child — يمكنك تغييره أو توليده بجافاسكربت */
.images-wrap .image-animate:nth-child(1) { --rot: -5deg; animation-delay: 0s; }
.images-wrap .image-animate:nth-child(2) { --rot: 5deg;  animation-delay: 0.8s; }
.images-wrap .image-animate:nth-child(3) { --rot: -5deg; animation-delay: 1.6s; }
.images-wrap .image-animate:nth-child(4) { --rot: 5deg;  animation-delay: 2.4s; }
.images-wrap .image-animate:nth-child(5) { --rot: -5deg; animation-delay: 3.2s; }

/* نطبّق الأنيميشن: افتراضياً كل الصور تستخدم dropAndDisappear */
.images-wrap .image-animate { animation-name: dropAndDisappear; aspect-ratio: 1.5 / 1;}

/* لكن نجعل آخر صورة (الخامسة هنا) تستخدم dropAndStay */
.images-wrap .image-animate:last-child {
  animation-name: dropAndStay;
}





/* End main section */

/* Start about section */
.about-section {font-size: 53px; height: 100vh;}
.about-section p, nav.nav-list ul li > span  {color: #454545}
.char {display: inline-block;color: #454545;transition: color 0.3s ease;}

/* End about section */

/* Start big text section */

.big-text {
  font-size: 184px;
  line-height: .9;
  font-weight: bold;
  margin: 0;
}
.mix-blend-mode {
    color: white;
    mix-blend-mode: difference;
    z-index: 2;
}

.moving-bg, .moving-bg-1, .moving-bg-2, .moving-bg-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  transform: translateX(0%);
  z-index: 1;
}

/* End big text section */

/** Strat sliding section right to left **/

.wrapper-sliding-sections .web-design-section .image-section,
.wrapper-sliding-sections .gastroorder-section .image-section,
.wrapper-sliding-sections .google-business-section .image-section
{max-height: 560px; object-fit: cover;}

/** End sliding section right to left **/

/* Start contact us section */
.contact-section {height: 100vh;}
.contact-section .contact-section-title {font-size: 70px;}
.contact-section .form-wrap {max-width: 544px}
input::placeholder, .form-floating>label {color: #00000066 !important;opacity: 1;}
/* End contact us section */

/* Start about 2 section */
/* .motiv-x-image {
    width: 50%;
} */



.about-2-section {background-color: #000;  position: relative;}

      

        .motiv-x-image {
            width: 700px;
            height: auto;
            object-fit: cover;
            /* border-radius: 20px; */
            /* position: absolute; */
            /* bottom: 0;
            left: 0; */
            /* transform: translateX(-20%); */
            z-index: 1;
        }

.animtion-text {
    position: absolute;
    top: 50%;
    left: 50%;
    /* transform: translate(100%, -50%); */
    transform: translate(20%, -50%);
    font-size: 30rem;
    color: #ffffff;
    z-index: 2;
    opacity: 1;
    white-space: nowrap;
}
.animtion-text .letter {display: inline-block;}











/* End about 2 section */

/********************************** End Home Page **********************************/

/********************************** Start Web Design Page **********************************/
.featur-box * {transition: all .2s ease-in-out;}
.featur-box:hover {
    background-color: #110C13;
    color: #fff;
}
.featur-box:hover svg path {fill: #fff;}
.webdesign-page .about-page-text {line-height: 56px; font-size: 50px;}
.features-section .section-title{font-size: 70px;}
.features-section .section-title + p {font-size: 20px;}
.featur-box .number {font-size: 60px;}

.our-work-section .image-link {width: 400px; aspect-ratio: 1 / 1.06;}
.our-work-section .image-link .project-image {transition: all 6s ease-in-out; top: 0;}

/********************************** End Web Design Page **********************************/

/********************************** Start google view Page **********************************/
.about-google-section .section-title{font-size: 40px;}
.about-google-section .about-page-text {font-size: 35px; line-height: 35px;}
.outstanding-section .section-title{font-size: 40px}
.our-work-section .works-list {max-height: 570px;overflow: auto;}
.our-work-section .works-list .link-work, .our-work-section .works-list .link-work svg path {transition: all .2s ease-in-out;}
.our-work-section .works-list .link-work.active, .our-work-section .works-list .link-work:hover {background-color: #fff; color: black !important;}
.our-work-section .works-list .link-work.active svg path, .our-work-section .works-list .link-work:hover svg path {fill: #000;}
.our-work-section #loader {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.8);
    display: none;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
.our-work-section .control-btns {
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}
                        /* Scroll bar style */                        
.our-work-section .works-list::-webkit-scrollbar {width: 10px; height: 5px;}
.our-work-section .works-list::-webkit-scrollbar-track {background: #000; /* Background */}
.our-work-section .works-list::-webkit-scrollbar-thumb {background: #222;border-radius: 10px;}
.our-work-section .works-list::-webkit-scrollbar-thumb:hover {background: #444;}

.outstanding-section .google-image {object-position: center; max-width: 880px;}
/********************************** End google view Page **********************************/

/********************************** Start gastroorder Page **********************************/
.about-gasroorder .sm-title {font-size: 36px;}
.about-gasroorder .details-text, .section-text {font-size: 24px;}

.app-section .section-title, .app-section .section-title, .payment-device-section .section-title {font-size: 40px;}

.payment-device-image {
    top: 50%;
    transform: translateY(-50%);
}
.app-section .app-image {width: 50%;}
.payment-device-image {width: 50%;}

/********************************** End gastroorder Page **********************************/

/********************************** Start About Page **********************************/
.about-box {position: relative;overflow: hidden;}
.about-box .blend-bg {
   position: absolute;
   top: 50%;
   left: 50%;   
   right: auto;
   bottom: auto;
   width: 0;
   height: 0;
   background: #000;
   z-index: 1;
   border-radius: 50%;
   transition: all .6s ease-in-out;
   
}

.about-box:hover .blend-bg {
    top: 0;
    left: 0;   
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border-radius: 0%;
}

.about-box h4, .about-box p {
   position: relative;
   z-index: 2;
   color: #fff;
   mix-blend-mode: difference;
}


.how-work-box .blend-bg {
    position: absolute;
    top: 0;
    left: -100%;   
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1;    
    /* transition: all .6s ease-in-out; */
}
.how-work-box h4, .how-work-box p {
   position: relative;
   z-index: 2;
   color: #fff;
   mix-blend-mode: difference;
}

.how-work-box.card-1 .blend-bg, .how-work-box.card-3 .blend-bg {
    left: 0;
} 






/********************************** End About Page **********************************/



/* Start footer */
.footer .footer-title {font-size: 60px;}
/* End footer */
.big-text-section, .team-section-title, .contact-section-title, .how-we-work-title, .how-we-work-section {height: 100vh !important;}







#panels #panels-container {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding: 0;
  overflow: hidden;
  background-color: #ddd;
}
#panels #panels-container .panel {
  position: relative;
  min-width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #333;
  text-align: left;
  border-right: 1px solid #292929;
}

/* Hover btns */
.hover-style {transition: all 0.3s ease-in-out;}
.hover-style::after {
  content: '';
  display: block;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}
.hover-style:hover::after {
  left: 0;
}
.hover-style:hover {color: #000 !important;}