@font-face {

  font-family: "Regola Pro";

  src: url("./regola-pro/RegolaPro-Regular.eot");

  src: url("./regola-pro/RegolaPro-Regular.eot?#iefix")

      format("embedded-opentype"),

    url("./regola-pro/RegolaPro-Regular.woff2") format("woff2"),

    url("./regola-pro/RegolaPro-Regular.woff") format("woff"),

    url("./regola-pro/RegolaPro-Regular.ttf") format("truetype"),

    url("./regola-pro/RegolaPro-Regular.svg#RegolaPro-Regular") format("svg");

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: "Regola Pro";

  src: url("./regola-pro/RegolaPro-Medium.eot");

  src: url("./regola-pro/RegolaPro-Medium.eot?#iefix")

      format("embedded-opentype"),

    url("./regola-pro/RegolaPro-Medium.woff2") format("woff2"),

    url("./regola-pro/RegolaPro-Medium.woff") format("woff"),

    url("./regola-pro/RegolaPro-Medium.ttf") format("truetype"),

    url("./regola-pro/RegolaPro-Medium.svg#RegolaPro-Medium") format("svg");

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: "Regola Pro";

  src: url("./regola-pro/RegolaPro-Bold.eot");

  src: url("./regola-pro/RegolaPro-Bold.eot?#iefix") format("embedded-opentype"),

    url("./regola-pro/RegolaPro-Bold.woff2") format("woff2"),

    url("./regola-pro/RegolaPro-Bold.woff") format("woff"),

    url("./regola-pro/RegolaPro-Bold.ttf") format("truetype"),

    url("./regola-pro/RegolaPro-Bold.svg#RegolaPro-Bold") format("svg");

  font-weight: 600;

  font-style: normal;

  font-display: swap;

}

body {

  background: var(--Black, #131313);

  font-family: "Regola Pro";

  overflow-x: hidden;

}

.container {

  max-width: 1280px;

}

a {

  text-decoration: none;

}

h1, .home-banner .heading h1 {

  font-size: 60px;

}

h2 {

  font-size: 64px;

}

h3 {

  font-size: 50px;

}

h4 {

  font-size: 35.925px;

}

h5 {

  font-size: 24px;

}

p {

  font-size: 18px;

}

ol,

ul,

menu {

  list-style: none;

  padding-left: 0;

} /* Header style start */

header .menu ul li a {

  color: #fefefe;

  font-size: 18px;

  font-weight: 500;

  line-height: 1.3;

  text-transform: uppercase;

}

header .menu ul li a:hover,

header .menu ul li a.active {

  color: #d2f65a;

  text-decoration: underline;

}

header .header-button button {

  background: #d2f65a;

  font-size: 18px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  border: none;

  padding: 12px 15px;

}

header .header-button button a {

  color: #131313;

}

header .header-button button:hover {

  background: #b8e326;

}







header .menu-toggle {

  font-size: 30px;

  cursor: pointer;

  color: white;

  border: none;

  z-index: 1001;

  line-height: 0.7;

}



header  .sidebar {

  width: 350px;

  height: 100vh;

  position: fixed;

  top: 0;

  right: -350px;

  transition: right 0.3s ease-in-out;

  padding: 34px 18px 24px;

  z-index: 1000;

  border-left: 4px solid var(--Hover-Gray, #B8E326);

  background: var(--Darker-gray, #303030);

  display: grid;

  align-content: space-between;

}



header .sidebar .menu .menu-item a {

  display: block;

  color: var(--Lighter-gray, #F0F0F0);

  font-size: 18px;

  font-weight: 500;

  line-height: 1.3;

  text-transform: uppercase;

  padding: 18px 16px;

}

header .sidebar .menu .menu-item a.active {

  color: var(--Green, #D2F65A);

  text-decoration: underline;

}

header .mob .header-button.text-start {

  padding: 20px 20px 0px;

}

header .mail a {

  color: var(--Lighter-gray, #F0F0F0);

  font-size: 16px;

  font-weight: 500;

  line-height: 1.3;

  text-transform: uppercase;

  

}

header .mail {

  margin-bottom: 20px;

  

}

header .social-links ul li a {

  color: rgba(254, 254, 254, 0.60);

  font-size: 12px;

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: 2px;

  text-transform: uppercase;

}



header #menu-toggle:checked ~ .sidebar {

  right: 0; /* Open the menu from the right */

}



header #menu-toggle:checked ~ .sidebar + .menu-toggle {

  display: none; /* Hide the ☰ icon when menu is open */

}



header #menu-toggle:checked ~ .sidebar .close {

  display: block; /* Show the cross icon when menu is open */

}



header #menu-toggle {

  display: none;

}



header .sidebar .close {

  font-size: 30px;

  color: white;

  cursor: pointer;

  position: absolute;

  top: 30px;

  right: 30px;

}

/* Header style End */ /* Home Banner style Start */

.home-banner {

  padding: 60px 20px 120px;

}

.home-banner .heading h1 {

  color: #aca9a9;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.748px;

  margin: 0;

  /*text-transform: uppercase;*/
  font-size: 64px;

}

.home-banner .heading h4 {

  color: #fff;

  font-weight: 400;

  line-height: 1;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 40px;
  font-size: 60px;

}

.home-banner .heading h4 a {

  color: #fff;

}

.home-banner .banner-buttons {

  margin-top: -100px;

  padding: 0 30px;

  z-index: 1;

  position: relative;

}

.home-banner .banner-buttons button.work {

  background: #131313;

  color: #fefefe;

  font-size: 27.209px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  padding: 19px 21px;

  border: none;

}

.home-banner .banner-buttons button.work:hover {

  background: var(--Darker-gray, #303030);

}

.home-banner .banner-buttons button {

  background: #d2f65a;

  font-size: 27.209px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  border: none;

  padding: 19px 15px;

}

.home-banner .banner-buttons button:hover {

  background: var(--Hover-Gray, #b8e326);

} /* Home Banner style End */ /* What We Do style End */

.what-we-do {

  padding: 0 20px 100px;

}

.what-we-do .heading h2 {

  color: var(--White, #fefefe);

  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 1px;

  /*text-transform: uppercase;*/

  margin: 30px 0 40px;

} /* services boxes */

.service-boxes {

  background: var(--Lighter-gray, #f0f0f0);

  padding: 48px 48px 20px;

  height: 330px;

  display: grid;

  align-content: space-between;

}

.service-boxes .service-heading h4 {

  color: var(--Black, #131313);

  font-size: 32px;

  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 0;

  padding-left: 16px;

}

.service-boxes .service-heading img {

  filter: contrast(0.2);

}

.service-boxes .service-text p {

  color: var(--Black, #131313);

  font-weight: 400;

  line-height: 1.4;

  margin: 20px 0;

}

.service-boxes .service-button button, .service-boxes .service-button a {

  color: var(--Black, #131313);

  font-size: 18px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  border: none;

  padding: 13px;

}

.service-boxes .service-button button:hover, .service-boxes .service-button a:hover {

  background: var(--Hover-Gray, #b8e326);

}

.service-boxes:hover {

  background: var(--Green, #d2f65a);

}
.service-boxes:hover .service-button a {
  border: 1px solid #a0a0a0;
}
.service-boxes:hover .service-button button img {

  filter: contrast(0);

} /* variables */

:root {

  /* colors */

  --sg0-color-primary-hsl: 250, 84%, 54%;

  --sg0-color-bg-hsl: 0, 0, 100%;

  --sg0-color-contrast-high-hsl: 230, 7%, 23%;

  --sg0-color-contrast-higher-hsl: 230, 13%, 9%;

  --sg0-color-bg-light-hsl: 0, 0, 100%; /* spacing */

  --sg0-space-sm: 0.75rem;

  --sg0-space-md: 1.25rem;

} /* component */

.stack-cards {

  --stack-cards-gap: var(--sg0-space-sm);

}

.stack-cards__item {

  position: relative;

  position: -webkit-sticky;

  position: sticky;

  top: var(--sg0-space-md);

  height: 0;

  padding-bottom: 386px;

  -webkit-transform-origin: center top;

  transform-origin: center top;

} /* .stack-cards__item > *{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}*/ /* Services boxes style End */ /* Testimonial style Start */

.testimonial {

  padding: 0 0 40px;

}

.testimonial .heading h2 {

  color: var(--White, #fefefe);

  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 30px 0 60px;

}

.testimonial .testimonial-box {

  background: #f0f0f0;

  padding: 30px 40px;

  height: 204px;

  display: grid;

  align-content: space-between;

}

.testimonial .testimonial-box p {

  color: #292929;

  font-size: 20px;

  font-weight: 400;

  line-height: 1.3;

}

.testimonial .testimonial-box .text h4 {

  color: #292929;

  font-size: 24px;

  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 0;

}

.testimonial .testimonial-box .text span {

  color: #292929;

  font-size: 18px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 0;

} /* Testimonial style End */ /* Our Craft style Start */

.our-craft {

  position: relative;

  background-image: url("./images/ribbon.svg"); /* Replace with your image */

  background-size: cover;

  background-position: top center;
  background-position-x: 10%;

  /*margin-top: -400px;*/
  /*margin-top: -500px;*/

}

.our-craft .text {

  /*padding-top: 80px;*/
  padding-top: 20px;

}

.background {

  position: sticky;

  top: 50%;

  left: 0;

  width: 100%;

  /*height: 400px;*/
  height: 500px;

  background: #131313;

  opacity: 1;

  transition: opacity 0.3s ease-in-out;

  z-index: 1;

}

.our-craft .text p {

  color: var(--Light-gray, #d8d8d8);

  text-align: right;

  font-size: 26.141px;

  font-weight: 500;

  line-height: 1.4;

  letter-spacing: 0.747px;

  text-transform: uppercase;

  margin-bottom: 40px;

  max-width: 713px;

}

.our-craft .craft-button button {

  color: var(--Black, #131313);

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  padding: 12px 16px;

  /*margin-bottom: 370px;*/
  margin-bottom: 70px;

  border: none;

}

.our-craft .craft-button button:hover {

  background: var(--Green, #d2f65a);

}

.our-craft .trusted p {

  color: var(--White, #fefefe);

  font-size: 13px;

  font-weight: 500;

  line-height: 1.3;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin: 0;

}

.our-craft .trusted-logos .logo {

  text-align: center;

}

.our-craft .trusted-logos .logo img {

  max-width: 100%;

  width: 130px;

} /* Our Craft style End */ /* Marquee style Start */

.marquee {

  background: var(--Hover-Gray, #b8e326);

  padding: 16px 0;

  margin-top: 60px;

}

.running-line-wrapper {

  overflow: hidden;

  white-space: nowrap;

  display: flex;

  align-items: center;

  width: 100%;

  position: relative;

}

.running-line {

  display: flex;

  gap: 2rem; /* Adjust spacing between words */

  animation: run 10s linear infinite;

}

.running-line span {

  font-size: 12px;

  font-weight: 500;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--Black, #131313);

} /* Duplicate Content for Continuous Effect */

@keyframes run {

  from {

    transform: translateX(0%);

  }

  to {

    transform: translateX(-50%);

  }

} /* Marquee style End */ /* Contact style Start */

.contact {

  padding: 74px 20px;

}

.contact .heading h3 {

  color: var(--Light-gray, #d8d8d8);

  font-weight: 600;

  line-height: 1.4;

  letter-spacing: 1.803px;

  text-transform: uppercase;

}

.contact form .form-group .field {

  width: 100%;

  border: 2.075px solid var(--White, #fefefe);

  background: transparent;

  padding: 12px 17px;

  color: var(--White, #fefefe);

  font-size: 19.604px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

}

.contact form .form-group .field::placeholder {

  color: var(--White, #fefefe);

}

.contact form .form-group .field:focus {

  border: 2.309px solid var(--Green, #d2f65a);

  background: rgba(210, 246, 90, 0.2);

  border-radius: 0 !important;

}

.contact form .form-group {

  margin-bottom: 16px;

}

.contact .form-button button.send {

  background-color: #fefefe;

  color: var(--Black, #131313);

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  padding: 12px 16px;

  border: none;

}

.contact .form-button button:hover {

  background: var(--Green, #d2f65a);

} /* Contact style End */ /* Footer style End */

footer {

  padding: 76px 20px;

}

footer .usefull-link p {

  color: var(--White, #fefefe);

  font-size: 20px;

  font-weight: 500;

  line-height: 1.1;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 30px;

}

footer .usefull-link ul li a {

  color: var(--Lighter-gray, #f0f0f0);

  font-family: "Regola Pro";

  font-size: 18px;

  font-style: normal;

  font-weight: 500;

  line-height: 15.6px;

  text-transform: uppercase;

}

footer .usefull-link ul li a.active,

.usefull-link ul li a:hover {

  text-decoration: underline;

  color: var(--Green, #d2f65a);

}

footer .usefull-link ul li {

  padding: 12px;

}

footer .mail a {

  color: var(--Lighter-gray, #f0f0f0);

  font-size: 18px;

  font-weight: 500;

  line-height: 1.2;

  text-transform: uppercase;

}

footer .mail a:hover {

  color: var(--Green, #d2f65a);

  text-decoration: underline;

}

footer .mail {

  padding: 12px 0 40px;

}

footer .footer-button button {

  background: #d2f65a;

  font-size: 18px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  border: none;

  padding: 15px 13px;

}

footer .footer-button button:hover {

  background: var(--Hover-Gray, #b8e326);

}

footer .copyright {

  padding-top: 100px;

}

footer .footer-copyright p {

  color: var(--Gray, #979797);

  font-size: 12px;

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin: 0;

}

footer .social-links ul li a {

  color: rgba(254, 254, 254, 0.6);

  font-size: 12px;

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: 2px;

  text-transform: uppercase;

} /* Footer style End */ /* About Us Page Start */ /* About Banner Style Start */

.about-banner {

  padding: 64px 20px;

}

.about-banner h1 {

  color: var(--White, #fefefe);

  font-weight: 400;

  line-height: 1;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.about-banner h4 {

  color: #aca9a9;

  font-size: 24px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.748px;

  text-transform: uppercase;

  margin: 0;

} /* About Banner Style End */ /* About Style STart */

.what-we-do.about-us {

  padding: 0 20px 50px;

}

.service-boxes.about {

  padding: 40px;

}

.service-boxes.about .service-text p {

  margin: 20px 0 0;

}

.our-craft.about .craft-button button {

  margin-bottom: 160px;

} /* About Style End */ /* Start a Project Style Start */ /* Contact Page Style Start */

.contact-page {

  padding: 110px 20px;

}

.contact-page .heading h1 {

  color: var(--White, #fefefe);

  font-weight: 400;

  line-height: 1.3;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 30px 0;

}

.contact-page .heading h5 {

  color: #aca9a9;

  font-weight: 500;

  line-height: 1.2;

  letter-spacing: 0.748px;

  text-transform: uppercase;

  margin-bottom: 30px;

}

.contact-page .heading p {

  color: var(--White, #fefefe);

  font-size: 22px;

  font-weight: 400;

  line-height: 1.3;

  margin: 0;

}

.contact-page .message-box {

  padding: 36px 48px;

  background: var(--Lighter-gray, #f0f0f0);

  margin-top: 50px;

}

.contact-page .box-heading .icon h4 {

  color: var(--Black, #131313);

  font-size: 32px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 0;

  padding-left: 14px;

}

.contact-page .message-box .box-heading p {

  color: var(--Black, #131313);

  font-size: 18px;

  font-weight: 400;

  line-height: 1.4;

  margin: 16px 0;

}

.contact-page .message-box .icon img {

  filter: contrast(0.2);

}

.contact-page .heading {

  position: sticky;

  position: -webkit-sticky;

  top: 30px;

}

.contact-page .message-box form .form-group .field {

  width: 100%;

  background: rgba(49, 49, 49, 0.1);

  border: none !important;

  border-radius: none !important;

  color: var(--Black, #131313);

  font-size: 18px;

  font-weight: 500;

  line-height: 1.3;

  text-transform: uppercase;

  outline: none !important;

  padding: 19px;

}

.contact-page .message-box form .form-group {

  margin-bottom: 16px;

}

.contact-page .message-box form .form-group .field::placeholder {

  color: var(--Black, #131313);

}

.form-button .send {

  color: var(--Black, #131313);

  font-size: 22px;

  font-weight: 500;

  line-height: 1.2;

  text-transform: uppercase;

  background: var(--Green, #d2f65a);

  border: none !important;

  border-radius: 0;

  padding: 15px 22px;

  box-shadow: none  !important;

}

.form-button .send:hover {

  background: #b8e326;

} /* Contact Page Style End */ /* Services Page Style Start */ /* Services Style start */

.what-we-do.services-page {

  padding: 0 20px 70px;

}

.what-we-do.services-page .heading h5 {

  color: var(--Lighter-gray, #f0f0f0);

  font-style: normal;

  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 20px;

}

.what-we-do.services-page .heading h2 {

  line-height: 1.2;

  margin: 20px 0;

}

.what-we-do.services-page .services-button button {

  background: #d2f65a;

  font-size: 18px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  border: none;

  padding: 12px 15px;

}

.what-we-do.services-page .services-button button:hover {

  background: var(--Hover-Gray, #b8e326);

}

.what-we-do.services-page .heading {

  position: sticky;

  position: -webkit-sticky;

  top: 30px;

  margin-bottom: 80px;

}

.service-boxes.service {

  padding: 40px;

  margin-top: 40px;

}

.service-boxes.service.design {

  height: 467px;

}

.service-boxes.service.software {

  height: 312px;

}

.service-boxes.service.simulation {

  height: 412px;

}

.service-boxes.service.marketing {

  height: 269px;

}

.service-boxes.service .box-list ul li span {

  color: var(--Black, #131313);

  font-size: 14px;

  font-weight: 600;

  line-height: 1;

  letter-spacing: 1px;

  text-transform: uppercase;

  padding-left: 8px;

}

.service-boxes.service .box-list ul {

  display: flex;

  flex-wrap: wrap;

  gap: 18px 20px;

  align-items: center;

  justify-content: space-between;

}

.service-boxes.service .box-list ul li {

  width: 48%;

  display: flex;

  align-items: center;

}

.service-boxes.service:hover .box-list ul li img {

  filter: grayscale(0.6);

}

.what-we-do.services-page .design-row .stack-cards__item {

  padding-bottom: 530px;

}

.what-we-do.services-page .software-row .stack-cards__item {

  padding-bottom: 360px;

} 

.what-we-do.services-page .simulation-row .stack-cards__item {

  padding-bottom: 460px;

} 

.what-we-do.services-page .marketing-row .stack-cards__item {

  padding-bottom: 326px;

} /* Services Style End */





          /* Case Study Style Start  */

/* Banner Style Start  */

.case-study-banner {

  padding: 64px 20px;

}

.case-study-banner h1 {

  color: var(--White, #fefefe);

  font-weight: 400;

  line-height: 1;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.case-study-banner h4 {

  color: #aca9a9;

  font-size: 24px;

  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.748px;

  text-transform: uppercase;

  margin: 0;

}

.banner-button button {

  color: var(--Black, #131313);

    font-weight: 500;

    line-height: 1;

    text-transform: uppercase;

    padding: 12px 16px;

    border: none;

}

.banner-button button:hover {

  background: #b8e326;

}



.case-study-details .video .image {

  height: 650px;

  overflow-y: auto;

  width: 100%;

  scrollbar-width: none;

  -ms-overflow-style: none;

  border-radius: 15px;

}

.case-study-details .video .image img {

  width: 100%;

  object-fit: cover;

}

.case-study-details .scroll-down {

  position: absolute;

  bottom: 30px;

  right: 30px;

  z-index: 11;

}

.case-study-details .video {

  position: relative;

}

/* Banner Style End  */

/* Case Study Boxes Style STart  */

.case-study{

  padding: 0px 15px;

}

.case-study .text h2 {

  color: var(--White, #FEFEFE);

  font-size: 64px;

  font-weight: 600;

  line-height: 1.1;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 36px 0px;

}

.case-study .text h5 {

  color: var(--Lighter-gray, #F0F0F0);

  font-size: 20px;

  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.case-study .text p {

  color: #FFF;

  font-size: 22px;

  font-weight: 400;

  line-height: 1.3;

  margin: 36px 0px;

}

.case-study .case-study-button button {

  background: #d2f65a;

  font-size: 18px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  border: none;

  padding: 12px 15px;

}

.case-study .case-study-button button:hover {

  background: var(--Hover-Gray, #b8e326);

}

.case-study .text {

  padding-top: 40px;

}

.case-study .case-study-image{

  margin-bottom: 45px;

}

.case-study .case-study-boxes{

  margin-bottom: 64px;

}

/* Case Study Boxes Style End  */

/* Det ails Case Study STyle STart */

.case-study-details {

  padding: 0px 15px;

}

.case-study-details  .video h5 {

  color: var(--White, #FEFEFE);

  font-weight: 400;

  line-height: 28px;

  margin-bottom: 40px;

  font-size: 22px;

}

.case-study-details .overview h3 {

  color: var(--Green, #D2F65A);

  font-size: 20px;

  line-height: 1.2;

  text-transform: uppercase;

  margin-bottom: 18px;

}

.case-study-details .overview{

  margin: 44px 0px;

}

.case-study-details .overview p {

  color: var(--White, #FEFEFE);

  font-size: 18px;

  font-weight: 400;

  line-height: 1.3;

  margin: 0;

}

.case-study-details .overview ul li {

  color: var(--White, #FEFEFE);

  font-size: 18px;

  font-weight: 400;

  line-height: 1.3;

  margin-bottom: 10px;

}

.case-study-details .overview ul {

  list-style: auto;

  margin-top: 15px;

  padding-left: 2rem;

}

.case-study-details .owl-stage-outer .item img {

  border-radius: 8px;

}

.case-study-details .owl-prev i, .case-study-details  .owl-next i {

  color: #FFF !important;

  font-size: 40px;

}

.case-study-details .owl-prev i {

  position: absolute;

  top: 50%;

  z-index: 1111;

  left: 16px;

  background: #000;

  border-radius: 100%;

}

.case-study-details .owl-next i {

  position: absolute;

  top: 50%;

  z-index: 1111;

  right: 16px;

  background: #000;

  border-radius: 100%;

}

/* Det ails Case Study STyle End */



      /* Portfolio Page Style Start  */



/* Portfolio Boxes Section Style STart   */

.portfolio-boxes {

  padding: 40px 15px 0px;

}

.portfolio-boxes .heading h2 {

  color: var(--White, #FEFEFE);

  font-size: 45px;

  font-weight: 600;

  line-height: 1.2;

  text-transform: uppercase;

  margin-top: 30px;

}

.portfolio-boxes .heading h5 {

  color: var(--Lighter-gray, #F0F0F0);

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 0;

}

.portfolio-boxes .text p {

  color: var(--White, #FEFEFE);

  text-align: right;

  font-weight: 400;

  line-height: 1.3;

  margin: 0;

}

.portfolio-boxes .box-list ul li span {

  color: var(--White, #FEFEFE);

  font-size: 16px;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 1px;

  text-transform: uppercase;

}

.portfolio-boxes .box-list ul li{

  display: flex;

  align-items: center;

  gap: 8px;

}

.portfolio-boxes .box-list ul {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 40px;

  flex-wrap: wrap;

  gap: 20px 57px;

}

 .portfolio-boxes .interactive .image , .portfolio-boxes .marketing .image , .portfolio-boxes .branding .image {

  height: auto !important;

}

.portfolio-boxes .interactive .view-button {

  bottom: 120px;

}



.portfolio-boxes .image {

  height: 650px;

  overflow-y: auto;

  width: 100%;

  scrollbar-width: none;

  -ms-overflow-style: none;

  border-radius: 15px;

}

.portfolio-boxes .carousel-image {

  width: 100%;

  object-fit: cover; /* Maintain aspect ratio */

}

.portfolio-boxes .button-swiper:after{

  content: none !important;

}

.portfolio-boxes .button-swiper>i {

  color: #fff;

  font-size: 40px;

  box-shadow: 0px 4px 50px 4px rgba(0, 0, 0, 0.15);

  border-radius: 100%;

  background: #000;

}

.portfolio-boxes .swiper-button-next{

  right: var(--swiper-navigation-sides-offset, 30px);

}

.portfolio-boxes .swiper-button-prev{

  left: var(--swiper-navigation-sides-offset, 30px);

}

.portfolio-boxes .view-button {

  position: absolute;

  bottom: 30px;

  left: 30px;

  z-index: 11;

}

.portfolio-boxes .scroll-down {

  position: absolute;

  bottom: 30px;

  right: 30px;

  z-index: 11;

}



/* Portfolio Boxes Section Style End   */



/* Single Blog Page Style Start  */

.single-blog .icon span {

  color: var(--Green, #D2F65A);

  font-size: 20px;

  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 1px;

  text-transform: uppercase;

  padding-left: 10px;

}

.case-study-banner.single-blog  h1 {

  font-size: 36px;

  line-height: 1.2;

  margin-top: 20px;

}

.single-blog-image{

  background: url(./images/focec-multiplier-one.png) lightgray 50% / cover no-repeat;



  height: 490px;

}

/* Single Blog Page Style End  */

/*  Blog Page Style start  */

.case-study-banner.blog .filter p {

  color: var(--Green, #D2F65A);

  font-size: 20px;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 60px 0 10px;

}

.case-study-banner.blog .filter_button a {

  background: var(--Green, #D2F65A);

  color: var(--Black, #131313);

  font-size: 18px;

  font-weight: 500;

  line-height: 1.3;

  text-transform: uppercase;

  padding: 13px 12px;

  border-radius: 0;

}

.case-study-banner.blog .filter_button  {

  display: flex;

  align-items: center;

  gap: 20px;

  flex-wrap: wrap;

}

.blog_boxes_sec{

  padding: 0px 20px;

}

.blog_boxes_sec .heading .icon h5 {

  color: var(--White, #FEFEFE);

  text-align: justify;

  font-size: 24px;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 1px;

  text-transform: uppercase;

  padding-left: 18px;

}

.blog_boxes_sec .heading h5 {

  color: var(--Green, #D2F65A);

  font-size: 20px;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin: 18px 0px;

}

.blog_boxes_sec .heading p {

  overflow: hidden;

  color: #FFF;

  font-size: 18px;

  font-weight: 400;

  line-height: 1.3;

  margin-bottom: 18px;

}



.blog_boxes_sec .box_one{

  padding: 64px 0px;

}

.blog_boxes_sec .heading button {

  background: #d2f65a;

  font-size: 18px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  border: none;

  padding: 12px 15px;

}

/*  Blog Page Style End  */

/* Modal Style Start  */

#confirmationModal .modal-dialog {

  max-width: 621px;

}

#confirmationModal .modal-content {

  background: var(--Lighter-gray, #F0F0F0);

  border-radius: 0;

}

#confirmationModal .discription {

  padding: 20px 50px 40px;

}

#confirmationModal .discription h4 {

  color: var(--Black, #131313);

  font-size: 32px;

  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 1px;

  text-transform: uppercase;

  margin-bottom: 10px;

}

#confirmationModal .discription h5 {

  color: var(--Gray, #979797);

  font-size: 24px;

  font-weight: 500;

  line-height: 1.3;

  letter-spacing: 0.748px;

  text-transform: uppercase;

  margin-bottom: 40px;

}

#confirmationModal .discription p {

  color: var(--Black, #131313);

  font-size: 18px;

  font-weight: 400;

  line-height: 1.3; 

  margin-bottom: 0;

}

#confirmationModal .button {

  padding: 0px 50px 50px;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 20px;

  flex-wrap: wrap;

}

#confirmationModal .button .learn-more {

  font-size: 18px;

  font-style: normal;

  font-weight: 500;

  line-height: 1.2;

  text-transform: uppercase;

  background: var(--Black, #131313);

  border: none;

  border-radius: 0;

  padding: 15px 13px;

}

#confirmationModal .button .our-work {

  font-size: 18px;

  font-style: normal;

  font-weight: 500;

  line-height: 1.2;

  text-transform: uppercase;

  background: var(--Green, #D2F65A);

  border: none;

  border-radius: 0;

  padding: 15px 13px;

}

/* Modal Style End  */

@media (max-width: 1300px) {

  header .destop-menu .menu ul {

    gap: 30px !important;

  } /* Services Page Start */

  .service-boxes.service .box-list ul li {

    width: 45%;

  }

  .service-boxes.service.design {

    height: 490px;

  }

}

@media (max-width: 1200px) {

  .sof-pad {

    padding-top: 60px;

  }

  .what-we-do.services-page .heading {

    margin-bottom: 0;

  }





        /* Case Study Style Start  */



  .case-study-banner .banner-button {

     text-align: start !important;

     margin-top: 30px;

   }

   .case-study .case-study-boxes {

    flex-flow: column-reverse;

  }

  .case-study {

    padding: 0;

  }

  .case-study .text {

    padding: 0px 15px 0px;

  }

  .case-study .pad-0{

    padding: 0;

  }



  

  .blog_boxes_sec .heading {

    padding-bottom: 40px;

  }

}

@media (max-width: 1192px) {

  header .destop-menu {

    gap: 25px !important;

  }

  .service-boxes {

    padding: 40px 30px 20px;

  }

  .what-we-do {

    padding: 0 20px 60px;

  }

  .our-craft {

    padding: 50px 20px 0;

  }

  .our-craft .craft-button button {

    margin-bottom: 250px;

  }

  h3 {

    font-size: 40px;

  } /* Contact Page Style */

  .contact-page {

    padding: 80px 15px 60px;

  } /* Services Page Start */

  .service-boxes.service .box-list ul li span {

    font-size: 18px;

  }

  .service-boxes.service.design {

    height: 460px;

  }



}

@media (max-width: 1024px) {

  header .destop-menu {

    display: none !important;

  }

  header .mob {

    display: block !important;

  }



  h1 {

    font-size: 54px;

  }

  h2 {

    font-size: 50px;

  }

  .home-banner h1 {

    font-size: 50px;

  }

  h3 {

    font-size: 40px;

  }

  h4 {

    font-size: 30px;

  }

  .home-banner {

    padding: 60px 0 120px;

  }

  .home-banner .heading {

    padding: 0 20px;

  }

  .home-banner .col-pad {

    padding: 0;

  }

  .service-boxes .service-heading h4 {

    font-size: 30px;

  }



      /* Case Study Style Start  */

  .case-study .text h2 {

        font-size: 50px;

  }





  .destop-frame iframe {

    height: 500px;

  }

  .case-study-banner.single-blog h1 {

    font-size: 34px;

  }

  .case-study-banner.single-blog .icon img {

    width: 38px !important;

  }

}

@media (max-width: 992px) {

  .destop-boxes {

    display: none !important;

  }

  .mobile-boxes {

    display: block !important;

  }

  .what-we-do {

    padding: 0 20px 40px;

  }

  .stack-cards__item {

    padding-bottom: 300px;

  }

  .service-boxes {

    height: 250px;

  }

  .service-button button {

    background: #d2f65a;

    font-size: 20px;

    font-weight: 500;

    line-height: 1;

    text-transform: uppercase;

    border: none;

    padding: 15px;

    width: 100%;

  }

  .testimonial .testimonial-box .text h4 {

    font-size: 20px;

  }

  .testimonial .testimonial-box .text span {

    font-size: 16px;

  }

.background {

    display: none;

  }

  .our-craft {

    margin-top: 0;

    background-image: none;

  }

  .our-craft .text {

    padding-top: 0;

}

  .our-craft .craft-button button,

  .our-craft.about .craft-button button {

    margin-bottom: 100px;

  }

  .our-craft .text p {

    font-size: 24px;

  }

  .contact .heading h3 {

    margin-bottom: 30px;

  }

  .contact {

    padding: 50px 20px;

  }

  footer .footer-logo {

    margin-bottom: 60px;

  }

  footer .usefull-link p {

    margin-bottom: 20px;

  }

  footer .usefull-link ul {

    display: flex;

    flex-wrap: wrap;

  }

  footer {

    padding: 40px 20px 20px;

  }

  footer .tablet {

    display: block !important;

  }

  footer .destop {

    display: none !important;

  }

  footer .footer-button button {

    margin-top: 30px;

  } /* About Page Style */

  .about-banner h4 {

    font-size: 22px;

    line-height: 1.2;

  }



  .destop-frame iframe {

    height: 420px;

  }

  .portfolio-boxes .text p {

    text-align: left;

    margin-top: 20px;

  }

  .portfolio-boxes {

    padding: 0px 15px 0px;

  }

 

}

@media (max-width: 767px) {

  .main-logo.des a img{

    width: 220px !important;

  }

  h1 {

    font-size: 30px;

  }

  h2, .home-banner h1 {

    font-size: 37px;

  }

  h3 {

    font-size: 24px;

  }

  h4 {

    font-size: 28px;

  }

  h5 {

    font-size: 20px;

  }

  header {

    padding: 44px 12px 8px !important;

  }

  .home-banner .banner-buttons {

    margin-top: 40px;

    padding: 0 15px;

    justify-content: center !important;

    gap: 20px;

    flex-wrap: wrap;

  }

  .home-banner .banner-buttons button.work {

    background: var(--White, #fefefe);

  }

  .home-banner .banner-buttons button.work a {

    color: #131313 !important;

  }

  .home-banner {

    padding: 40px 0 60px;

  }

  .what-we-do {

    padding: 0 10px 60px;

  }

  .service-boxes {

    padding: 18px 18px 24px;

    height: 200px;
    margin-bottom: 10px;

  }

  .service-boxes .service-heading h4 {

    font-size: 22px;

  }

  .service-boxes .service-text p {

    margin: 16px 0 0;

    font-size: 16px;

  }

  .stack-cards__item {

    padding-bottom: 240px;

  }

  .testimonial .heading h2 {

    margin: 12px 0 30px;

  }

  .testimonial .testimonial-box {

    padding: 30px 18px;

    align-content: space-around;

  }

  .testimonial {

    padding: 0;

  }

  .our-craft {

    padding: 70px 15px 0;

  }

  .our-craft .craft-button button,

  .our-craft.about .craft-button button {

    margin-bottom: 80px;

  }

  .our-craft .text p {

    width: 100%;

  }

  .marquee {

    margin-top: 40px;

  }

  .contact {

    padding: 40px 10px;

  }

  .contact .heading h3 {

    margin-bottom: 30px;

    text-align: center;

    color: #fefefe;

  }

  .contact .heading span {

    color: #fefefe !important;

  }

  .form-button {

    float: none !important;

  }

  .contact .form-button button {

    width: 100%;

    justify-content: center;

  }

  footer {

    padding: 24px 5px;

  }

  footer .footer-logo {

    margin-bottom: 30px;

  }

  footer .usefull-link ul {

    gap: 0 24px;

  }

  footer .usefull-link ul li {

    padding: 13px 0;

  }

  footer .usefull-link p {

    display: none;

  }

  footer .footer-button button {

    margin-top: 16px;

  }

  footer .mail {

    padding: 30px 0 12px;

  }

  footer .copyright {

    padding-top: 0;

    flex-direction: column-reverse;

    align-items: center;

  }

  footer .social-links ul {

    justify-content: left !important;

  }

  footer .footer-copyright {

    margin-top: 30px;

  } /* Button */

  .home-banner .banner-buttons button.work {

    font-size: 18px;

    padding: 17px 8px;

    width: 40%;

  }

  .home-banner .banner-buttons button {

    font-size: 18px;

    padding: 14px 8px;

    width: 44%;

  }

  .home-banner .banner-buttons button a {

    justify-content: center;

  } /* About Page Style */

  .about-banner {

    padding: 64px 10px;

  }

  .about-banner h4 {

    font-size: 20px;

    line-height: 1.4;

  }

  .what-we-do.about-us .stack-cards__item {

    padding-bottom: 280px;

  }

  .service-boxes.about {

    height: 260px;

    padding: 30px 20px;

  }

  .what-we-do.about-us {

    padding: 0 10px 50px;

  } /* Contact Page Style Start */

  .contact-page .message-box {

    padding: 36px 20px;

    margin-top: 40px;

  }

  .contact-page .heading h5 {

    font-size: 20px;

  }

  .contact-page .heading p {

    font-size: 20px;

    margin-bottom: 20px;

  }

  .contact-page .heading h1 {

    margin: 20px 0;

  }

  .contact-page .box-heading .icon h4 {

    font-size: 28px;

    padding-left: 10px;

  }

  .form-button .send {

    font-size: 20px;

  }

  .contact-page .message-box .box-heading p {

    margin: 20px 0;

    text-align: center;

  }

  .contact-page .box-heading .icon {

    justify-content: center;

  }

  .contact-page .form-button .send {

    width: 100%;

  }

  .contact-page .form-button a {

    justify-content: center;

  }

  .contact-page .message-box .icon img {

    width: 36px;

  }

  .contact-page .heading img {

    width: 40px;

  } /* Services Page Style STart */

  .service-boxes.service .box-list ul li span {

    font-size: 16px;

  }

  .service-boxes.service {

    padding: 30px 20px;

  }

  .what-we-do.services-page {

    padding: 0 10px 60px;

  }

  .service-boxes.service .service-text p {

    margin: 16px 0 16px;

  }

  .what-we-do.services-page .design-row .stack-cards__item {

    padding-bottom: 650px;

  }

  .service-boxes.service.design {

    height: 600px;

  }

  .service-boxes.service.marketing {

    height: 320px;

  }

  .what-we-do.services-page .marketing-row .stack-cards__item {

    padding-bottom: 370px;

  }

  .service-boxes.service .box-list ul {

    gap: 16px;

  }

  .service-boxes.service .box-list ul li {

    width: 100%;

  }

  .what-we-do.services-page .services-button button {

    font-size: 17px;

    padding: 12px;

    width: 100%;

  }

  .what-we-do.services-page .services-button button a {

    justify-content: center;

  }





       /* Case Study Style Start  */



    .case-study-banner {

      padding: 64px 10px;

    }

    .case-study .text h2 {

      font-size: 36px;

      margin: 26px 0px;

  }

  .case-study .text p {

    font-size: 18px;

    margin: 26px 0px;

  }

  .case-study .text h5 {

    font-size: 18px;

  } 

  .case-study .case-study-button button {

    font-size: 16px;

  }

  .case-study .text {

    padding: 0px 8px 0px;

  }

  .case-study  .text img {

    width: 40px;

  }

  .banner-button button {

    width: 100%;

  }

  .case-study-details {

    padding: 0px 8px;

  }

  .case-study-details .overview p {

    font-size: 16px;

  }

  .case-study-details .overview h3 {

    font-size: 18px;

  }

  .case-study-details .overview ul li {

    font-size: 16px;

  }

  .case-study-details .owl-prev i, .case-study-details .owl-next i {

    font-size: 30px;

    top: 40%;

  }



  .portfolio-boxes .heading h2 {

    font-size: 34px;

    margin-top: 20px;

  }

  .portfolio-boxes .heading img {

    width: 34px;

  }

  .portfolio-boxes .box-list ul {

    justify-content: start;

  }

  .portfolio-boxes .heading h5 {

    font-size: 18px;

  }

  .portfolio-boxes .text p {

      font-size: 16px;

      margin-top: 10px;

  }

  .portfolio-boxes .mob-frame {

    display: block !important;

  }

  .portfolio-boxes .destop-frame {

    display: none !important;

  }

  .portfolio-boxes .image {

    border-radius: 8px;

  }

  .portfolio-boxes .button-swiper>i {

    font-size: 29px;

  }

  .portfolio-boxes .swiper-button-next {

    right: var(--swiper-navigation-sides-offset, 15px);

  }

  .portfolio-boxes .swiper-button-prev {

    left: var(--swiper-navigation-sides-offset, 15px);

  } 

  .portfolio-boxes .scroll-down img {

    width: 90px;

  }

  .portfolio-boxes .scroll-down {

    right: 14px;

  }

  .portfolio-boxes .view-button img {

    width: 150px;

  }

  .portfolio-boxes .view-button {

    left: 14px;

  }

  .portfolio-boxes .interactive .swiper-button-next,.portfolio-boxes .interactive .swiper-button-prev {

    top: var(--swiper-navigation-top-offset, 45%) !important

  }

  .portfolio-boxes .interactive .view-button {

    bottom: 20%;

  }

  .portfolio-boxes .software .image {

    height: 300px !important;

  }

  .portfolio-boxes .container.design.mobile,   .portfolio-boxes .container.branding.mobile  {

    display: block !important;

  }

  .portfolio-boxes .container.design.destop, .portfolio-boxes .container.branding.destop  {

    display: none;

  }

  /* .portfolio-boxes .container.design.mobile .image {

    height: auto;

  } */

  .portfolio-boxes .container.design.mobile .image {

    background: none !important;

  }

  .portfolio-boxes .view-button, .software .scroll-down {

    display: none;

  }

  /* Modal Style Start  */

  #confirmationModal .modal-dialog {

    padding: 0px 20px;

  }

  #confirmationModal .discription {

    padding: 20px 30px 40px;

  }

  #confirmationModal .button {

    padding: 0px 30px 50px;

  }

  #confirmationModal .discription h5 {

    font-size: 22px;

    margin-bottom: 30px;

  }

  #confirmationModal .button .learn-more , #confirmationModal .button .our-work {

    width: 100%;

  }



  .case-study-banner.single-blog h1 {

    font-size: 30px;

  }

  .single-blog .icon span {

    font-size: 18px;

  }

  .single-blog-image {

    height: 250px;

  }

  .blog_boxes_sec .heading .icon {

    display: block !important;

  }

  .blog_boxes_sec .heading .icon h5 {

    font-size: 22px;

    padding-left: 0;

    text-align: left;

  }

  .blog_boxes_sec .heading  button a img {

    width: 30px !important;

  }

  .blog_boxes_sec .box_one {

    padding: 40px 0px;

  } 

  .case-study-banner.blog h4 {

    font-size: 20px;

  }

  .case-study-banner.blog .filter_button a {

    font-size: 16px;

  }

}

@media (max-width: 490px) {

  header .sidebar {

    width: 282px;

    right: -282px;

    border-left: 2px solid var(--Hover-Gray, #B8E326);

  }

  header .header-button button {

    padding: 12px 12px;

  }

  h1, .home-banner .heading h1 {

    font-size: 40px;

  }

  h2 {

    font-size: 30px;

  }

  h4 {

    font-size: 24px;

  } /* icon image */

  .heading img {

    width: 38px;

  }

  .what-we-do .heading h2 {

    margin: 12px 0 18px;

  }

  .service-boxes .service-heading h4 {

    font-size: 20px;

  }

  .service-boxes .service-heading img {

    width: 30px;

  }

  .service-boxes {

    height: 240px;

    align-content: space-around;

  }

  .stack-cards__item {

    padding-bottom: 260px;

  }

  .service-button button {

    font-size: 18px;

  }

  .testimonial .testimonial-box p {

    font-size: 16px;

  }

  .testimonial .testimonial-box .text h4 {

    font-size: 18px;

  }

  .our-craft .text p {

    font-size: 20px;

  } /* Button */

  .home-banner .banner-buttons button.work {

    width: 100%;

  }

  .home-banner .banner-buttons button {

    width: 100%;

  } /* About Page Style */

  .about-banner h4 {

    font-size: 18px;

    line-height: 1.4;

  }

  .service-boxes.about {

    height: 290px;

  }

  .what-we-do.about-us .stack-cards__item {

    padding-bottom: 320px;

  } /* Contact Page Style Start */

  .contact-page .message-box .icon img {

    display: none;

  }

  .contact-page .box-heading .icon h4 {

    padding-left: 0;

    text-align: center;

    line-height: 1.3;

  }



  .portfolio-boxes .software .image {

    height: 200px !important;

  }

  .portfolio-boxes .heading h2 {

    font-size: 24px;

}



  /* Modal Style STart  */

  #confirmationModal .discription {

    padding: 20px 15px 36px;

  }

  #confirmationModal .button {

    padding: 0px 15px 30px;

  }

  #confirmationModal .discription h5 {

    font-size: 20px;

  }

  #confirmationModal .discription h4 {

    font-size: 30px;

  }

  #confirmationModal .discription p {

    font-size: 16px;

  }

}

@media (max-width: 400px) {

  .service-boxes.about {

    height: 340px;

  }

  .what-we-do.about-us .stack-cards__item {

    padding-bottom: 360px;

  } /* Service Page Start */

  .service-boxes.service.software {

    height: 320px;

  }

  .service-boxes.service.simulation {

    height: 430px;

  }

  .what-we-do.services-page .simulation-row .stack-cards__item {

    padding-bottom: 470px;

  }

  .portfolio-boxes .software .image {

    height: 165px !important;

  }

}


.call-to-action button {

  background: #d2f65a;

  font-size: 18px;

  font-weight: 500;

  line-height: 1;

  text-transform: uppercase;

  border: none;

  padding: 12px 15px;

}

.call-to-action button a {

  color: #131313;

}

.call-to-action button:hover {

  background: #b8e326;

}