/* Base CSS */
.alignleft {
   float: left;
   margin-right: 15px;
}

.alignright {
   float: right;
   margin-left: 15px;
}

.aligncenter {
   display: block;
   margin: 0 auto 15px;
}

a:focus {
   outline: 0 solid;
}

* {
   box-sizing: border-box;
}

img {
   max-width: 100%;
   height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0 0 15px;
   color: #1a1a1a;
   font-family: "Inter", sans-serif;
}

body {
   color: #4a4a4a;
   font-weight: 300;
   font-family: "Inter", sans-serif;
}

@font-face {
   font-family: RusticLoveTattoo;
   src: url(../fonts/RusticLoveTattoo.otf);
}

.selector-for-some-widget {
   box-sizing: content-box;
}

a {
   text-decoration: none;
}

button:focus {
   outline: 0;
   outline: 5px auto -webkit-focus-ring-color;
}

ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

/* header-area-start */

.header {
   border-bottom: 1px solid #e0e0e0;
   background: #fff;
   height: 72px;
   display: flex;
   align-items: center;
}

.header-content {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.logo {
   gap: 8px;
   color: #1a1a1a !important;
   font-size: 24px;
   font-weight: 600;
}
.logo-icon {
   width: 40px;
}
.header-content p {
   color: #1a1a1a;
   font-size: 16px;
   font-weight: 300;
   margin: 0;
}

.sticky-header {
   z-index: 99;
   border-bottom: 1px solid #e0e0e0;
   transform: translateY(-100%);
   transition: transform 0.3s ease-in-out;
}
.sticky-header.show {
   transform: translateY(0);
}
.sticky-header__link {
   color: #1a1a1a;
   font-weight: 500;
   transition: all 0.3s;
}
.sticky-header__link:hover,
.sticky-header__link.active {
   color: #454ade;
   text-decoration: underline;
}
.sticky-header__link.active {
   font-weight: 700;
}

.sticky-header__btn {
   background-color: #454ade;
   color: #fff;
   padding: 12px 24px;
   line-height: 1;
   transition: all 0.3s;
}
.sticky-header__btn:hover {
   background-color: #3f45ff;
}
/* header-area-end */

.scroll-to-bottom__btn {
   width: 40px;
   height: 40px;
   color: #454ade;
   border: 1px solid #454ade;
   transition: all 0.3s;
   animation: bounceDown 1.5s infinite;
}
.scroll-to-bottom__btn:hover {
   background-color: #454ade;
   color: #fff;
}
@keyframes bounceDown {
   0%,
   100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(10px);
   }
}

/* hero-area-start */
.hero {
   padding: 118px 0;
   background-size: cover;
   background-position: center;
   position: relative;
   overflow: hidden;
    
   max-height: 90vh; /* or try 75vh */
   overflow: hidden;

/*rajout ak */

  height: 100vh; /* full screen */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#myVideo {
   position: absolute;
   left: 0;
   top:  0;
   width: 101%; /* was 101 changed by ak*/
   z-index: -1;
   border: 0;
   background-size: cover;
   object-fit: cover;
   height: 100%;
   /* filter: blur(5px); /* if you want the blurred effect */
}

.hero-wrap {
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.4);
   box-shadow: var(--sds-size-depth-0) var(--sds-size-depth-400)
         var(--sds-size-depth-800) var(--sds-size-depth-negative-100)
         var(--sds-color-black-200),
      var(--sds-size-depth-0) var(--sds-size-depth-100)
         var(--sds-size-depth-100) var(--sds-size-depth-negative-100)
         var(--sds-color-black-100);
   backdrop-filter: blur(10px);
   padding: 64px 96px;
   text-align: center;

  /*   padding-top: 40px;     */
  /*   padding-bottom: 40px;  */

/* was 101 changed by ak*/

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; /* fills the hero section */
/*  padding: 2rem; remet comment ak optional: prevent text from touching edges on small screens */

  min-height: 100%;
}

.hero-title p {
   color: #4a4a4a;
   font-size: 12px;
   font-weight: 400;
   line-height: normal;
   text-transform: uppercase;
   margin-bottom: 24px;
}

.hero-title p span {
   font-weight: 700;
}

.hero-title h1 {
   color: #454ade;
   font-size: 64px;
   font-weight: 400;
   line-height: normal;
   margin-bottom: 40px;
}

.hero-title h1 span {
   display: block;
   font-weight: 700;
}

.hero-search p {
   color: #4a4a4a;
   font-size: 16px;
   font-weight: 400;
   line-height: normal;
   margin-bottom: 16px;
   margin-top: 20px;
}

.hero-input {
   max-width: 552px;
   margin: auto;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 8px;
   margin-bottom: 120px; /* Adjust based on scroll button size */
}

.hero-input input {
   border-radius: 4px;
   border: 1px solid #c8c8d4;
   background: #fff;
   width: 381px;
   height: 48px;
   padding: 0 16px;
   color: #9e9e9e;
   font-size: 16px;
   font-weight: 400;
   line-height: normal;
   transition: 0.3s;
}

.hero-input button {
   width: 163px;
   height: 48px;
   border-radius: 4px;
   background: #454ade;
   border: 0;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   line-height: 100%;
   transition: 0.3s;
}

.hero-input button:hover {
   background: #3f45ff;
}

/* hero-area-end */

.hero-input-button {
   width: 163px;
   height: 48px;
   border-radius: 4px;
   background: #454ade;
   border: 0;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   line-height: 100%;
   transition: 0.3s;
}
/* smart-area-start */

.smart {
   padding: 80px 0;
   background: #fafafa;
}

.container {
   max-width: 1158px;
}

.section-title {
   margin-bottom: 16px;
}

.section-title h3 {
   color: #454ade;
   font-size: 32px;
   font-weight: 700;
   line-height: normal;
   margin: 0;
}

.smart-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 24px;
}

.smart-wrap .smart-box {
   width: 48.9%;
   border-radius: 4px;
   background: #fff;
   padding: 40px;
   margin: 0;
}

.smart-box {
   border-radius: 4px;
   background: #fff;
   padding: 40px;
   margin-bottom: 24px;
}

.smart-img.flex {
   display: flex;
   /*! flex-wrap: wrap; */
   justify-content: space-between;
   gap: 24px;
}

.section-text h3 {
   color: #1a1a1a;
   font-size: 22px;
   font-weight: 600;
   line-height: normal;
   margin-bottom: 8px;
}

.section-text p {
   color: #4a4a4a;
   font-size: 16px;
   font-weight: 400;
   line-height: normal;
   margin: 0;
}

.section-text {
   margin-bottom: 40px;
}

.smart-img img {
   width: 100%;
}

/* smart-area-end */

/* work-area-start */
.work {
   background: #fafafa;
   padding-block: 80px;
}

.work-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 24px;
}


/*
.single-work {
   width: 31.9%;
   border-radius: 4px;
   border: 1px solid #e0e0e0;
   background: #fff;
}
*/
.single-work {
   width: 100%;
   border-radius: 4px;
   border: 1px solid #e0e0e0;
   background: #fff;
   margin-bottom: 20px; /* optional spacing between boxes */
}

@media (min-width: 768px) {
  .single-work {
    width: 31.9%;
  }
}


.work-text {
   padding: 24px;
}

.work-text span {
   color: #1a1a1a;
   font-size: 80px;
   font-weight: 200;
   line-height: normal;
   text-transform: capitalize;
   display: block;
   margin-bottom: 16px;
}

.work-text h3 {
   color: #1a1a1a;
   font-size: 24px;
   font-weight: 600;
   line-height: normal;
   text-transform: capitalize;
   margin-bottom: 24px;
}

.work-text p {
   color: #1a1a1a;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   margin: 0;
}
.work-img {
   height: 214px;
}
.work-img img {
   width: 100%;
   height: 100%;
}

/* work-area-end */

/* idea-area-start */
.idea {
   padding-bottom: 80px;
   background-color: #fafafa;
}

.idea-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 24px;
}

.single-idea {
   width: 48.9%;
   border-radius: 4px;
   background: #fff;
   padding: 40px;
   position: relative;
}

.idea-btn {
   position: absolute;
   right: 16px;
   top: 16px;
}

.idea-btn a {
   border-radius: 4px;
   border: 1px solid #d6ccf0;
   background: #d6ccf0;
   width: 133px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: #1a1a1a;
   font-size: 14px;
   font-weight: 400;
   line-height: normal;
}

.idea-text img {
   margin-bottom: 16px;
}

.idea-text h3 {
   color: #1a1a1a;
   font-size: 24px;
   font-weight: 600;
   line-height: normal;
   margin-bottom: 8px;
}

.idea-text p {
   color: #4a4a4a;
   font-size: 16px;
   font-weight: 400;
   line-height: normal;
   margin: 0;
}

/* idea-area-end */

/* footer-area-start */
.footer {
   border-top: 1px solid #e0e0e0;
   background: #fff;
   padding-bottom: 40px;
}

.footer-top {
   padding: 40px 0;
   text-align: center;
}

.footer-top h3 {
   color: #454ade;
   font-size: 32px;
   font-weight: 700;
   line-height: normal;
   margin-bottom: 8px;
}

.footer-top p {
   color: #1a1a1a;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   margin-bottom: 24px;
}

.footer-top p span {
   font-weight: 700;
}

.footer-top a:hover {
   background: #3f45ff;
}

.footer-top a {
   border-radius: 4px;
   background: #454ade;
   width: 163px;
   height: 48px;
   display: flex;
   align-items: center;
   margin: auto;
   justify-content: center;
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   line-height: 100%;
   text-decoration: none;
   transition: 0.3s;
}

.footer-wrap {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-bottom: 64px;
}

.footer-text p {
   color: #1a1a1a;
   text-align: right;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   margin-bottom: 0;
}

.footer-text a {
   color: #454ade;
   font-size: 16px;
   font-weight: 600;
   line-height: 24px;
   text-align: right;
   text-decoration: none;
}

.footer-text {
   text-align: right;
}

.footer-logo {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 24px;
}

.footer-logo p {
   color: #1a1a1a;
   font-size: 16px;
   font-weight: 300;
   line-height: normal;
   margin: 0;
}

.footer-menu ul {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 16px;
}

.footer-menu a {
   color: #1a1a1a;
   font-size: 14px;
   font-weight: 400;
   line-height: normal;
   text-decoration: none;
   transition: 0.3s;
}
.footer-menu a:hover {
   color: #454ade;
}

.footer-copy p {
   color: #1a1a1a;
   font-size: 12px;
   font-weight: 400;
   line-height: normal;
   margin: 0;
}

.footer-wraper {
   padding-top: 40px;
}

.divaid {
   width: 100%;
   height: 1px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #e0e0e0;
   position: relative;
}

.divaid:after {
   position: absolute;
   content: "";
   background: #e0e0e0;
   height: 10px;
   width: 10px;
   border-radius: 50%;
   left: 0;
}

.divaid:before {
   position: absolute;
   content: "";
   background: #e0e0e0;
   height: 10px;
   width: 10px;
   border-radius: 50%;
   right: 0;
}

/* footer-area-end */

/* offcanvas */

.btn-close {
   background-image: none;
}

.offcanvas-header {
   padding: 0;
   height: auto !important;
   display: flex !important;
   margin-bottom: 25px;
   justify-content: end;
}

.header__bar a {
   color: var(--text_color);
   font-size: 20px;
   height: 40px;
   width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   background: #fd438e;
}

.offcanvas-header button {
   color: #fff !important;
   opacity: 1;
   margin: 20px !important;
   height: 40px;
   width: 40px;
   padding: 0 !important;
   font-size: 21px;
   box-sizing: border-box;
   background: none;
   display: flex;
   align-items: center;
   margin-left: auto;
   background: #fd438e;
   justify-content: center;
   margin: 0;
}

.offcanvas-start {
   background: var(--themebg);
}

.offcanva__menu ul li {
   display: block;
}

.header-lun {
   margin: 0;
   padding: 24px;
}

.offcanva__menu li a:hover {
   padding-left: 30px;
   border-color: #dd0030;
   color: #172755;
}

.offcanva__menu li a {
   padding: 15px 20px;
   display: flex;
   align-items: center;
   color: var(--text_color);
   text-align: center;
   /*! font-family: Lexend; */
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   text-decoration: none;
   padding: 13px 24px;
   border-bottom: 1px solid #454ade5c;
   border-left: 0;
   border-right: 0;
   transition: 0.3s;
   text-transform: uppercase;
}

.offcanva__menu li a svg {
   margin-right: 10px;
}

.offcanva__menu li:last-child a {
   margin-right: 4px;
   border-top: 0;
}

.header__bar.d-none a {
   text-decoration: none;
   background: linear-gradient(90deg, #ff3a34 0%, #019cfe 100%);
}

.offcanvas-start {
   background: #fff;
   padding-bottom: 40px;
   overflow-y: scroll;
}

.offcanvas-header button {
   background: #454ade;
}

.offcanvas-contact {
   margin-top: 30px;
   padding: 0 20px;
}

.offcanvas-call a {
   display: flex;
   align-items: center;
   gap: 11px;
   color: #154f39;
   font-size: 20px;
   font-weight: 700;
   line-height: normal;
}

.offcanvas-contact .header-socail {
   display: flex;
   margin-top: 20px;
   justify-content: center;
}

.offcanvas-call {
   display: flex;
   justify-content: center;
}

/* offcanvas */

.modal-header {
   padding: 0;
   border: 0;
   display: flex;
   justify-content: end;
}

.modal-header .btn-close {
   padding: 0;
   margin: 0;
   width: auto;
   height: auto;
   display: flex;
   align-items: center;
   justify-content: end;
}

.modal-body {
   padding: 0;
}

.modal-content {
   padding: 40px;
}

.modal-dialog {
   max-width: 744px;
}

.modal-title {
   margin-bottom: 64px;
   max-width: 478px;
}

.modal-title a {
   display: block;
   margin-bottom: 8px;
}

.modal-title h3 {
   color: #1a1a1a;
   font-size: 32px;
   font-weight: 700;
   line-height: normal;
   margin-bottom: 8px;
}

.modal-title p {
   color: #1a1a1a;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
   margin: 0;
}

.single-input label {
   display: block;
   color: #1a1a1a;
   font-size: 14px;
   font-weight: 500;
   line-height: normal;
   margin-bottom: 4px;
}

.single-input input {
   width: 100%;
   height: 48px;
   border-radius: 4px;
   border: 1px solid #c8c8d4;
   background: #fff;
   padding: 16px;
   color: #1a1a1a;
   font-size: 16px;
   font-weight: 400;
   line-height: normal;
}

.single-input {
   margin-bottom: 24px;
}

.single-input textarea {
   border-radius: 4px;
   border: 1px solid #c8c8d4;
   background: #fff;
   width: 100%;
   padding: 11px 16px;
   height: 164px;
   color: #1a1a1a;
   font-size: 16px;
   font-weight: 400;
   line-height: normal;
}

.varify-img a {
   display: block;
}

.varify-img {
   margin-bottom: 24px;
}

.form-btn button {
   border-radius: 4px;
   background: #454ade;
   width: 164px;
   height: 48px;
   border: 0;
   color: #fff;
   font-weight: 700;
   line-height: 100%;
   font-size: 16px;
}

.input-flex .single-input {
   width: 48%;
}

.input-flex {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.thanks-text a {
   display: block;
   margin-bottom: 40px;
}

.thanks-text svg {
   margin-bottom: 8px;
   display: block;
}

.thanks-text h3 {
   color: #1a1a1a;
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   margin-bottom: 8px;
}

.thanks-text p {
   color: #1a1a1a;
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
   margin-bottom: 64px;
}

.thanks-text button {
   border-radius: 4px;
   background: #454ade;
   padding: 16px 24px;
   color: #fff;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
   border: 0;
   width: auto;
   opacity: 1;
}

/*ak */
.mobile-break {
  display: none;
}

@media (max-width: 768px) {
  .mobile-break {
    display: inline;
  }
}

@media screen and (max-width: 768px) {
  .navbar-burger {
    display: block;
  }
}


.hero {
  position: relative;
}

.scroll-to-bottom {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* Ensure it stays above or below desired elements */
}
/*}*/


/*
@media (max-width: 768px) {
  .hero {
    padding: 0;
    justify-content: flex-start;
  }

  .hero-wrap {
    margin-top: 40px; /* ⬅️ Adjust this to push content down */
  }
}

*/

@media (max-width: 768px) {
  .hero {
    display: block !important;        /* override flex */
    align-items: unset !important;    /* remove vertical centering */
    padding: 0 !important;            /* remove padding */
  }

  .hero-wrap {
    margin-top: 80px; /* ✅ move content down */
  }
}