@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Reset CSS */
* {padding:0rem; margin:0rem;}
*:focus {outline: 0;}
html{ font-size: 14px;}
html, body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased;}
body{ margin:0; padding:0; font-family: "Poppins", sans-serif; font-size: 1.25rem; background: #000; color: #FFF;}
ol, ul {list-style: none; margin:0; padding:0;}
:focus {outline: 0;}
a, a:link {text-decoration: none; outline:none;}
p { padding:0; margin:0;}
.clear {clear:both;}
a { text-decoration:none;}
a:hover {text-decoration:none;}
a:focus{outline:none !important;}
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight:700;}
img {border:0; max-width:100%; height:auto;}
::-webkit-input-placeholder {opacity:1; color: #BABEC2;}
:-moz-placeholder{opacity:1; color: #BABEC2;}
::-moz-placeholder{opacity:1; color: #BABEC2;}
:-ms-input-placeholder{opacity:1; color: #BABEC2;} 
/* Reset CSS */

.container{ max-width: 103.125rem !important;}
h2{ font-size: 4.0625rem;}
h3{ font-size: 3.125rem; font-weight: 400;}

.site-link{ display: inline-flex; align-items: center; padding:0.9375rem 1.25rem; padding-left: 1.75rem; background: #FFF; border-radius: 100px; font-size: 1.25rem; color: #000; gap: 1.4375rem;}
.site-link-icon{ width: 3.125rem; height: 3.125rem; border-radius: 100%; display: inline-flex; align-items: center; justify-content: center; background: #000;}
.site-link-icon img{ max-width: 1.5625rem;}

.site-link-black{ display: inline-flex; align-items: center; padding:0.9375rem 1.25rem; padding-left: 1.75rem; border-radius: 100px; font-size: 1.25rem; color: #FFF; gap: 1.4375rem; border: 1px solid #686868; backdrop-filter: blur(7.5px); transition: all 0.5s ease;}
.site-link-black .site-link-icon{ width: 3.125rem; height: 3.125rem; border-radius: 100%; display: inline-flex; align-items: center; justify-content: center; background: #000; transition: all 0.5s ease;}
.site-link-black .site-link-icon img{ max-width: 1.5625rem;}
.site-link-black:hover .site-link-icon{ transform: rotate(45deg);}
.site-link-black:hover{ box-shadow: 0 0 50px 0 #FF6A6A; border: 1px solid rgba(0, 0, 0, 0.00);}

.site-header{ position: fixed; width: 100%; top: 0; left: 0; padding-top: 3.125rem; z-index: 99; transition: all 0.5s ease;}
.header-main{ border-radius: 4.4688rem; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(17px); height: 7.1875rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem 0 4.375rem;}

.site-header .container{ transition: all 0.5s ease;}
.site-header.fixed .container{ max-width: 100% !important;}
.site-header.fixed{ padding-top: 1rem;}

.site-nav ul{ display: flex; align-items: center; gap: 2.9375rem;}
.site-nav ul li a{ font-size: 1.25rem; color: #FFF; transition: all 0.5s ease;}
.site-nav ul li a:hover{ color: #FF6A6A;}

.logo{ max-width: 26.0625rem;}

.header-right{ display: flex; align-items: center; gap: 3.125rem;}
.social{ display: flex; align-items: center; gap: 0.625rem;}
.social a{ display: flex; align-items: center; justify-content: center; width: 3.125rem; height: 3.125rem; border-radius: 50px; background: rgba(236, 236, 236, 0.20); transition: all 0.5s ease;}
.social a img{ max-width: 1.5rem;}
.social a:hover{ background: #000000;}

.hero-anime-img{ width: 29.875rem; opacity: 0.2;}
.hero-anime-img img{ border-radius: 2.375rem;}
.hero-anime-slide{ margin-top: 1.875rem;}
.hero-anime{ position: relative;}
.hero-anime::after{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); z-index: 9;}

.hero-anime.alt::after{ opacity: 0;}

.hero-content{ position: absolute; width: 100%; left: 0; top: 0; z-index: 10;}
.hero-content-main{ display: flex; justify-content: space-between;}
.hero-content-left{ max-width: 63.125rem; display: flex; flex-direction: column; gap: 2.5rem; padding: 15rem 0 0 0;}
.hero-content-left h1{ font-size: 4.0625rem; line-height: 5.625rem; text-transform: capitalize;}
.hero-content-left p{ font-size: 1.5rem; color: #BABABA;}

.hero-content-right{ max-width: 26.25rem;}

.txt-block{ display: inline-flex; align-items: center; gap: 0.75rem; border-radius: 50px; border: 1px solid #FF6A6A; background: rgba(0, 0, 0, 0.02); backdrop-filter: blur(2px); padding: 0.75rem; padding-right: 1.5625rem; color: #FF6A6A; font-size: 1.25rem;}
.chip{ border-radius: 50px; background: #FF6A6A; padding: 0.4375rem 1.125rem; color: #FFF;}


.vertical-scroll { height: 71.0625rem; overflow: hidden; position: relative;}
.vertical-scroll::after{ content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.02) 49%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%);}
.vertical-scroller { display: flex; flex-direction: column; animation: scroll-vertical 12s linear infinite; gap: 1.875rem;}
.vertical-scroller.rev{ animation: scroll-vertical-rev 12s linear infinite;}
.vertical-scroll-img img { width: 100%; display: block;}
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes scroll-vertical-rev {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}


.about{ background: url('../images/bg/bg-1.png') top 3.25rem center no-repeat; padding: 11.25rem 0 0 0; background-size: 100% 49.5rem;}
.title-block{ display: flex; justify-content: space-between; }
.title-head{ position: relative; font-size: 1.25rem; color: #FF6A6A; margin-bottom: 0.625rem; padding: 0 0 0 1.5rem;}
.title-head::after{ content: ''; position: absolute; left: 0; top: 0.5rem; width: 0.75rem; height: 0.75rem; border-radius: 100%; background: #FF6A6A; }
.title-block-right{ max-width: 65.3125rem;}

.hero-anime.for-about{ margin-top: 5.625rem;}
.hero-anime.for-about::after{ opacity: 0;}
.hero-anime.for-about .hero-anime-img{ opacity: 1; width: 23.5rem;}

.clients{ padding: 11.5625rem 0 0 0; background: url('../images/bg/bg-2.png') bottom center no-repeat; background-size: 100% 61.5rem;}
.client-slide img{ width: 100%; height: 30.6875rem; object-fit: cover;}
.client-slide-single{ width: 24.0625rem; transition: all 0.5s ease;}
.client-slide-single:hover{ transform: rotate(0deg) scale(1.1) !important;}

.client-slide .owl-item:nth-child(4n + 1) .client-slide-single{ transform: rotate(-10deg);}
.client-slide .owl-item:nth-child(4n + 2) .client-slide-single{ transform: rotate(10deg);}
.client-slide .owl-item:nth-child(4n + 4) .client-slide-single{ transform: rotate(-10deg);}

.client-slide .owl-stage-outer{ padding: 11.25rem 0;}


.services{ background: #111; padding: 8.75rem 0;}
.service-card{ border-radius: 1.875rem; border: 1px solid #000; background: #090909; padding: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; height: 100%;}
.service-card h4{ font-size: 1.75rem; font-weight: 400;}
.service-card p{ color: #BABABA;}
.service-icon img{ max-width: 3.75rem;}


.portfolio{ padding: 9.375rem 0;}
.portfolio-block{ display: flex; align-items: center; justify-content: space-between;}
.portfolio-txt{ max-width: 34.5rem;}


.projects{ padding:0 0 6.25rem 0;}
.project-card{ border-radius: 1.875rem; background: #090909; box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.10); padding: 1.875rem; height: 100%; display: flex; flex-direction: column; gap: 1.5625rem;}
.project-img{ height: 26.75rem; border-radius: 1.875rem; overflow: hidden;}
.project-img img{ width: 100%; height: 100%; object-fit: cover;}
.project-tag{ display: inline-flex; border-radius: 24px; background: rgba(255, 255, 255, 0.10); padding: 6px 20px;}
.project-card h4{ font-size: 2rem; font-weight: 500;}


.testimonial{ padding: 10rem 0; background: url('../images/bg/bg-1.png') top 3.25rem center no-repeat;}
.testimonial-card{ height: 100%; border-radius: 1.875rem; background: #090909; box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.10); padding: 2.375rem; display: flex; flex-direction: column; justify-content: space-between;}
.testi-img{ width: 6.25rem; height: 6.25rem; border-radius: 100%; overflow: hidden;}
.testi-img img{ width: 100%; height: 100%; object-fit: cover;}
.testimonial-author{ margin-top: 6.25rem;}
.testimonial-card p{ font-size: 1.125rem; padding-top: 0.5rem;}

.clients-logo{ padding-bottom: 7.625rem;}
.clients-logo-card{ height: 9.5rem; border-radius: 15px; background: rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: center;}
.clients-logo-card img{ max-height: 8rem;}


.site-footer{ padding: 6.875rem 0; background: #090909;}
.contact-card{ border-radius: 1.875rem; border: 1px solid #000; background: #111; padding: 3rem 2.1875rem;}
.contact-card-chip{ display: inline-block; border-radius: 50px; background: #FFF; padding: 1.125rem 2.5rem; color: #000000;}
.contact-card h3{ font-size: 2.8125rem;}
.contact-card h3 a{ color: #FFF; transition: all 0.5s ease;}
.contact-card h3 a:hover{ color: #FF6A6A;}
.footer-info h3{ font-size: 1.875rem;}

.dubai-logo img{ max-width: 16.0625rem;}
.footer-logo img{ max-width: 26.0625rem;}


.animated_text{ color: #343232;}
.animated_text span.highlight { color: #FFF;}
.animated_text span { display: inline-block; color: #343232; transition: color 0.35s ease;}



.mobile-menu{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; z-index: 99; display: none; flex-direction: column; justify-content: space-between; padding: 80px 0 0 0;}
.mobile-nav{ padding: 10px;}
.mobile-nav ul{ display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 30px 0 30px 0; background: rgba(255, 255, 255, 0.1); border-radius: 15px;}
.mobile-nav ul li a{ font-size: 16px; color: #FFF; text-transform: uppercase;}
.mobile-menu .social{ padding-bottom: 30px; justify-content: center;}

.mobClick { display: none; width: 24px; height: 16px; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; z-index: 999;}
.mobClick span { position: absolute; opacity: 1; left: 0; width: 24px; height: 3px; background: #FFF; display: block; border-radius: 50px; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.mobClick span:nth-child(2) { top: 7px;}
.mobClick span:nth-child(3) { top: 14px;}
.mobClick.open span:nth-child(1) { top: 7px; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.mobClick.open span:nth-child(2) { opacity: 0; left: -20px;}
.mobClick.open span:nth-child(3) { top: 7px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
/* .mobClick.open{ position: fixed; z-index: 9999999999; right: 15px; top: 15px; margin: 0 !important;} */
.mobClick.open span{ background: #FFF !important;}
.hamclose{ position: absolute; left: 50%; transform: translateX(-50%); top: 30px;}


/*  */
.hero-content-left.full{ max-width: 100%; width: 100%; justify-content: center; text-align: center; min-height: 43.75rem;}
.service-block-1{ padding:0 0 10rem 0;}
.services-sec{ padding: 10rem 0; background: #090909;}
.services-sec-single{ overflow: hidden; margin-top: 10.625rem;}
.services-sec-left-outer{ display: flex; justify-content: flex-end;}
.services-sec-left{ max-width: 50rem; padding-right: 5rem; display: flex; flex-direction: column; gap: 1.5625rem;}
.services-sec h5{ font-size: 1.75rem; font-weight: 500;}
.services-sec-left-icon img{ max-width: 3.75rem;}
.services-sec p{ color: #BABABA;}

.service-slide-single{ width: 23.375rem; height: 29.75rem;}
.service-slide-single img{ width: 100%; height: 100%; object-fit: cover;}

.services-sec-single.alt .row{ flex-direction: row-reverse;}
.services-sec-single.alt .services-sec-left{ padding-right: 0; padding-left: 5rem;}
.services-sec-single.alt .services-sec-left-outer{ justify-content: flex-start;}

.service-block-2{ padding:10rem 0;}

.faq{ padding:10rem 0; padding-left: 10rem;}
.faq-card{ width: 26.125rem; height: 43.6875rem; border-radius: 3.125rem; background: #111; padding: 3.125rem 2.5rem; display: flex; flex-direction: column; justify-content: flex-end; transition: all 0.5s ease; cursor: pointer; overflow: hidden;}
.faq-card.active{ width: 40rem;}
.faq-slide{ margin-top: 6.25rem;}
.faq-card h3{ font-size: 1.5rem; position: relative; top: 50%; transform: translateY(-50%);}
.faq-card p{ color: #BABABA;}

.faq-ans{ bottom: -100%; position: relative; width: 0; height: 0;  }
.faq-card-inner{ display: flex; flex-direction: column; justify-content: space-between;}

.faq-card.active .faq-ans{ bottom: 0; width: auto; height: auto; transition: all ease 0.8s; transition-delay: 0.5s;}
.faq-card.active .faq-card-inner{ height: 100%;}
.faq-card.active h3{ font-size: 2.6rem; top: 0; transform: translateY(0); transition: top ease 0.8s; transition-delay: 0.5s;}

.for-projects{ background: url('../images/bg/bg-1.png') bottom center no-repeat;}

.contact-sec{ padding:0 0 10rem 0;}
.contact-wrap{ display: flex; justify-content: space-between; gap: 1rem;}
.contact-left{ width: 43.125rem;}
.contact-form{ display: flex; flex-direction: column; gap: 1.5625rem; margin-top: 1.5625rem;}
.input{ width: 100%; border-radius: 2rem; background: #111; padding: 2rem; border: none; color: #BABEC2;}
.button{ width: 100%; border-radius: 2rem; background: #FFF; padding: 2rem; border: none; color: #000; transition: all 0.5s ease;}
.button:hover{ background: #FF6A6A; color: #FFF;}
textarea.input{ min-height: 20rem;}

.contact-right{ width: 46.375rem;}
.contact-map{ border-radius: 2rem; overflow: hidden;}
.contact-map iframe{ width: 100%; height: 36.75rem; display: block;}
.contact-icon img{ max-width: 4.375rem; max-height: 3.375rem;}

.contact-block p{ color: #BABABA;}
/*  */


@media (max-width: 1599px) {
  html{ font-size: 13px;}
}

@media (max-width: 1400px) {
  html{ font-size: 12px;}
}

@media (max-width: 1300px) {
  html{ font-size: 11px;}
}

@media (max-width: 1199px) {
  html{ font-size: 10px;}
  .container{ max-width: 96rem !important;}
  .site-nav ul{ gap: 1rem;}
  .header-right{ gap: 2rem;}
}

@media (max-width: 991px) {
  .container{ max-width: 100% !important; padding: 0 30px;}
  .site-nav{ display: none;}
  .hero-content .hero-content-right{ display: none;}
  .title-block{ flex-wrap: wrap; gap: 1.5rem;}
  .title-block-left{ width: 100%;}
  .title-block-right{ width: 100%; max-width: 100%;}
  .hero-anime-img{ width: 200px;}
  .hero-section{ padding-bottom: 10rem;}
  .site-header{ padding-top: 1rem;}

  .mobile-menu{ display: flex; left: -100%; transition: all 0.5s ease;}
  .mobile-menu.act{ left: 0;}
  .mobClick{ display: block;}

  .services-sec-single{ padding-left: 15px;}
  .services-sec-single.alt{ padding-left: 0; padding-right: 15px;}

  .contact-wrap{ flex-wrap: wrap;}
  .contact-left, .contact-right{ width: 100%;}
}

@media (max-width: 767px) {
  p, .hero-content-left p, .txt-block, .testimonial-card p{ font-size: 15px;}
  .container{ padding: 0 15px;}
  .hero-section{ padding-bottom: 50px;}
  .about{ padding: 50px 0; padding-top: 100px;}
  .clients{ padding-top: 0;}
  .client-slide .owl-stage-outer{ padding: 50px 0;}
  .services, .portfolio, .testimonial, .site-footer, .services-sec, .service-block-2{ padding: 50px 0;}
  .clients-logo{ padding-bottom: 50px;}
  .contact-sec{ padding-bottom: 50px;}
  .logo{ max-width: 160px;}

  .about, .clients{ background-size: 100% auto;}
  .services-sec-single{ margin-top: 50px;}
  .services-sec-left{ padding-left: 0; padding-right: 15px;}
  .services-sec-single.alt .services-sec-left{ padding-left: 15px; padding-right: 0;}
  .faq{ padding-top: 50px; padding-left: 15px;}
}

@media (max-width: 576px) {
  h2{ font-size: 30px;}
  h3{ font-size: 23px;}
  .hero-content-left h1{ font-size: 35px; line-height: 44px;}
  .site-header .social{ display: none;}
  .header-main{ padding-left: 20px;}
  .hero-section{padding-bottom: 0; min-height: 620px;}
  .logo{ max-width: 190px;}
  .contact-card h3{ font-size: 20px;}

  .portfolio-block .hero-content-right{ display: none;}
  .portfolio-block{ padding-top: 50px;}
  .site-header .site-link-txt{ display: none;}
  .site-header .site-link{ padding-left: 10px; padding-right: 10px;}

  .hero-section.alt{ min-height: 351px;}
  .hero-section.alt .hero-content-left{ padding: 0;} 
  .faq-card{ width: 300px;}
  .faq-card.active{ width: 300px;}
}