/*-----------------------------------------------------------------
Theme Name: Niotech
Author: Gramentheme
Author URI: https://themeforest.net/user/gramentheme
Version: 1.0.0 
Description: Niotech - App Landing HTML Template <

-------------------------------------------------------------------
 CSS TABLE OF CONTENTS
-------------------------------------------------------------------

    01.Mixins
    02.Variables
    03.Typography
    04.Buttons 
    05.Gutter 
    06.Container 
    07.Animation 
    08.Helping 
    09.MeanMenu 
    10.Preloader
    11.Title 
    12.Common 
    13.Header
    14.Breadcumb
    15.Footer
    16.Intro 
    17.Brand 
    18.About
    19.Work Process 
    20.Advantage
    21.Wcu
    22.Counter
    23.Faq
    24.Testimonial
    25.Feature
    26.Pricing 
    27.Cta
    28.Blog
    29.Services
    30.Project 
    31.Team
    32.Team Extra
    33.Sidebar
    34.Contact
    35.Input
    36.Useed Technologies
------------------------------------------------------------------*/
/* 01.Mixins */
/* 02.Variables */
/*----------------------------------------------
    # All Variables here
----------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
:root {
  --body: #fff;
  --black: #000;
  --white: #fff;
  --theme: #7444FD;
  --theme2: #F9F3EF;
  --theme3: #FAF8FF;
  --title: #282C32;
  --header: #282C32;
  --orange: #e78c45;
  --text: #858585;
  --text2: #cbcbcb;
  --border: #E6E6E6;
  --border-2: #F1F1F1;
  --border-3: #D8D8D8;
  --border-4: #E0E0E0;
  --border-5: #565656;
  --bg-1: #161921;
  --bg-2: #F6F7FF;
  --box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
}

/* 03.Typography */
/* --------------------------------------------
    Template Default Fonts & Fonts Styles
 ---------------------------------------------- */
body {
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 28px;
  color: var(--text);
  background-color: var(--white);
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

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

button {
  border: none;
  background-color: transparent;
  padding: 0;
}

h1,
h2,
h3,
h4,
h6 {
  font-family: "Urbanist", sans-serif;
  margin: 0px;
  padding: 0;
  color: var(--title);
  text-transform: capitalize;
  transition: all 0.4s ease-in-out;
}

h1 {
  font-size: 42px;
  font-weight: 700;
  line-height: 120%;
}

h2 {
  font-size: 40px;
  line-height: 145%;
  font-weight: 700;
}
@media (max-width: 767px) {
  h2 {
    font-size: 34px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 28px;
  }
}

h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 145%;
}
@media (max-width: 767px) {
  h3 {
    font-size: 16px;
  }
}

h4 {
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
}

h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 145%;
}

a {
  text-decoration: none;
  outline: none !important;
  cursor: pointer;
  color: var(--title);
  transition: all 0.4s ease-in-out;
}
a:hover {
  color: var(--theme) !important;
}

p {
  margin: 0px;
  transition: all 0.4s ease-in-out;
}

span {
  margin: 0px;
  transition: all 0.4s ease-in-out;
}

/* Firefox */

/* 04.Buttons */
/*----------------------------------------------
    # Buttons style here
----------------------------------------------*/
.theme-btn {
  display: inline-block;
  position: relative;
  padding: 20px 36px;
  gap: 10px;
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  background: var(--theme);
  z-index: 1;
  line-height: 1;
  overflow: hidden;
  border: none;
  border-radius: 100px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.theme-btn i, .theme-btn svg {
  margin-left: 6px;
}
.theme-btn:before {
  transition-duration: 800ms;
  position: absolute;
  width: 210%;
  height: 290%;
  content: "";
  top: 162%;
  left: 50%;
  background: var(--title);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%) rotate(-8deg);
  border-radius: 80%;
  z-index: -1;
}
.theme-btn.style2 {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-5);
  color: var(--title);
}
.theme-btn.style2 i, .theme-btn.style2 svg {
  margin-left: 6px;
}
.theme-btn.style2:before {
  transition-duration: 800ms;
  background: var(--theme);
}
.theme-btn.style2 svg path,
.theme-btn.style2 svg rect {
  fill: var(--title);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}
.theme-btn.style2:hover svg path,
.theme-btn.style2:hover svg rect {
  fill: var(--white);
}
.theme-btn:hover {
  color: var(--white) !important;
}
.theme-btn:hover:before {
  top: -96%;
}

/* 05.Gutter */
/*----------------------------------------------
    # Gutter  style here
----------------------------------------------*/

/* 06.Container */
/*----------------------------------------------
    # Container  style here
----------------------------------------------*/
@media (min-width: 550px) {
  .header-1 .container {
    max-width: 1620px;
  }
  
  .header-3 .container {
    max-width: 1620px;
  }
  .footer-widgets-wrapper.style1 .container {
    max-width: 1580px;
  }
  .footer-bottom.style1 .container {
    max-width: 1580px;
  }
}
/* 07.Animation */
/*----------------------------------------------
    # All Animation style here
----------------------------------------------*/
@-webkit-keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}
@keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}

/*img-animation**********************/

@keyframes img-anim-right {
  0% {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes img-anim-top {
  0% {
    transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}
@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes tpswing {
  0% {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes loaderpulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(20deg);
  }
}

@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
@keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@-webkit-keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(30px);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes bounce-x {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes rotated2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes animate-positive {
  0% {
    width: 0;
  }
  100% {
    width: var(--progress-width);
  }
}

/*------------------- 3.10. Animation -------------------*/

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
@keyframes ripple2 {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@keyframes wave {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top left -2000px;
  }
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
}

@keyframes movingX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes movingCar {
  0% {
    transform: translateX(0) rotateY(0deg);
  }
  50% {
    transform: translateX(calc(-100vw + 108%));
  }
  51% {
    transform: translateX(calc(-100vw + 108%)) rotateY(180deg);
  }
  100% {
    transform: translateX(0) rotateY(180deg);
  }
}

@keyframes moving {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes moving2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes moving3 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes jumpAni {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes jumpReverseAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bgColor {
  0% {
    background-color: #F2BA4C;
  }
  25% {
    background-color: #81F24C;
  }
  50% {
    background-color: #41F27D;
  }
  75% {
    background-color: #0500FF;
  }
  100% {
    background-color: #F2BA4C;
  }
}
@keyframes animate-positive {
  0% {
    width: 0;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scalein {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(180px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slidebottomright {
  0% {
    opacity: 0;
    transform: translateX(120px) translateY(120px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
@keyframes slidetopleft {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/*animation bubble****************/

@keyframes bubble-animation {
  0% {
    transform: translate3d(-50%, 0, 0);
    height: 1px;
    width: 1px;
  }
  100% {
    transform: translate3d(-50%, -280px, 0);
    height: 30px;
    width: 30px;
  }
}
@keyframes toTopFromBottom {
  49% {
    transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes icon-anim {
  0% {
    top: 26px;
    right: 90px;
  }
  25% {
    top: 86px;
    right: 110px;
  }
  100% {
    top: 26px;
    right: 90px;
  }
}

@keyframes imgShine {
  100% {
    left: 125%;
  }
}
/* 08.Helping */
/*----------------------------------------------
    # Helping  style here
----------------------------------------------*/
::-webkit-scrollbar {
  width: 8px;
  height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--orange);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.fix {
  overflow: hidden;
}

@media (max-width: 767px) {
  br {
    display: none;
  }
}

/* background */
.bg-cover {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center;
}

.mb-60 {
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .mb-60 {
    margin-bottom: 40px;
  }
}
@media (max-width: 575px) {
  .mb-60 {
    margin-bottom: 30px;
  }
}

.mxw-685 {
  max-width: 685px;
}

.mxw-1450 {
  max-width: 1450px;
}

.mb-60 {
  margin-bottom: 60px !important;
}

/* 09.MeanMenu */
/*----------------------------------------------
    # Meanmenu style here
----------------------------------------------*/

/* 10.Preloader */
/*----------------------------------------------
    # Preloader style here
----------------------------------------------*/
.preloader {
  align-items: center;
  cursor: default;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
}
.preloader .animation-preloader {
  z-index: 1000;
}
.preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--theme);
  height: 9em;
  margin: 0 auto 3.5em auto;
  width: 9em;
}
@media (max-width: 767px) {
  .preloader .animation-preloader .spinner {
    width: 7.5em;
    height: 7.5em;
    margin: 0 auto 1.5em auto;
  }
}
.preloader .animation-preloader .txt-loading {
  font: bold 5em "Urbanist", sans-serif, "Urbanist", sans-serif;
  text-align: center;
  user-select: none;
}
@media (max-width: 767px) {
  .preloader .animation-preloader .txt-loading {
    font-size: 2.5em;
  }
}
.preloader .animation-preloader .txt-loading .letters-loading {
  color: var(--theme);
  position: relative;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  animation-delay: 0.2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  animation-delay: 0.4s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  animation-delay: 0.6s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  animation-delay: 0.8s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  animation-delay: 1s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  animation-delay: 1.2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
  animation-delay: 1.4s;
}
.preloader .animation-preloader .txt-loading .letters-loading::before {
  animation: letters-loading 4s infinite;
  color: var(--header);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  font-family: "Urbanist", sans-serif;
  position: absolute;
  top: -3px;
  transform: rotateY(-90deg);
}
.preloader p {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: var(--theme);
}
.preloader .loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  z-index: 1;
  pointer-events: none;
}
.preloader .loader .row {
  height: 100%;
}
.preloader .loader .loader-section {
  padding: 0px;
}
.preloader .loader .loader-section .bg {
  background-color: #fff;
  height: 100%;
  left: 0;
  width: 100%;
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

.back-to-top {
  border-radius: 12px;
  background-color: var(--theme);
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: var(--white);
  font-size: 18px;
  position: fixed;
  display: inline-block;
  z-index: 99;
  right: 30px;
  bottom: 30px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
.back-to-top:hover {
  background-color: var(--title);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}

/* 11.Title */
/*----------------------------------------------
    # Title style here
----------------------------------------------*/

.section-title .subtitle {
  display: inline-flex;
  padding: 4px 10px;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: rgba(116, 68, 253, 0.15);
  color: var(--theme);
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.32px;
  margin-bottom: 15px;
  border-radius: 100px;
}
.section-title .subtitle img {
  margin-left: 3px;
}
.section-title .title {
  color: var(--title);
  font-family: "Urbanist", sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.96px;
  margin-bottom: 25px;
}
@media (max-width: 1199px) {
  .section-title .title {
    font-size: 35px;
  }
}

/* 12.Common */

@keyframes marqueeLeft {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}

@keyframes marqueeRight {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-inner {
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: var(--theme2);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-outer {
  margin-left: -12px;
  margin-top: -12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--theme2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  -webkit-transition: all 0.08s ease-out;
  -o-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}

.section-padding {
  padding: 120px 0;
}
@media (max-width: 1199px) {
  .section-padding {
    padding: 100px 0;
  }
}
@media (max-width: 991px) {
  .section-padding {
    padding: 80px 0;
  }
}
@media (max-width: 575px) {
  .section-padding {
    padding: 60px 0;
  }
}

.background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* 13.Header */
/*----------------------------------------------
    # Header style here
----------------------------------------------*/

.header-1 {
  background-color: transparent;
}
.header-1 .mega-menu-wrapper {
  position: relative;
  z-index: 1;
}
@media (max-width: 470px) {
  .header-1 .mega-menu-wrapper {
    padding: 0 15px;
  }
}
@media (max-width: 450px) {
  .header-1 .mega-menu-wrapper {
    padding: 0;
  }
}
@media (max-width: 1399px) {
  .header-1 .mega-menu-wrapper .header-main {
    gap: 30px;
  }
}
@media (max-width: 450px) {
  .header-1 .mega-menu-wrapper .header-main {
    gap: 0;
  }
  .header-1 .mega-menu-wrapper .header-main .header-logo img {
    max-width: 100%;
  }
}
@media (max-width: 1399px) {
  .header-1 .mega-menu-wrapper .header-main .main-menu ul li {
    margin-inline-end: 15px;
  }
  .header-1 .mega-menu-wrapper .header-main .main-menu ul li a {
    font-size: 14px;
  }
}
.header-1 .header-right .header-button {
  margin-left: 25px;
}
@media (max-width: 767px) {
  .header-1 .header-right .header-button {
    display: none;
  }
}
.header-1 .header-right .sidebar__toggle {
  color: var(--white);
  margin-left: 30px;
}
@media (max-width: 1399px) {
  .header-1 .header-right .sidebar__toggle {
    color: var(--theme);
  }
}
.header-1.header-3 {
  background-color: var(--white);
}
.header-1.header-3 .container-fluid {
  padding: 0 225px;
}
@media (max-width: 1899px) {
  .header-1.header-3 .container-fluid {
    padding: 0 60px;
  }
}
@media (max-width: 1600px) {
  .header-1.header-3 .container-fluid {
    padding: 0 50px;
  }
}
@media (max-width: 1399px) {
  .header-1.header-3 .container-fluid {
    padding: 0 40px;
  }
}
@media (max-width: 1199px) {
  .header-1.header-3 .container-fluid {
    padding: 0 30px;
  }
}

.header-right {
  gap: 30px;
}
@media (max-width: 1399px) {
  .header-right {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .header-right {
    gap: 5px;
  }
  .header-right .theme-btn {
    display: none;
  }
}

.sidebar__toggle {
  cursor: pointer;
  font-size: 20px;
  color: var(--text);
}

.header-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  z-index: 99;
}
@media (max-width: 1899px) {
  .header-main {
    padding: 20px 10px;
  }
}
.header-main .main-menu ul {
  margin-bottom: 0;
}
.header-main .main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-inline-end: 55px;
}
@media (max-width: 1899px) {
  .header-main .main-menu ul li {
    margin-inline-end: 25px;
  }
}
.header-main .main-menu ul li:last-child {
  margin-inline-end: 0;
}
.header-main .main-menu ul li a {
  display: inline-block;
  padding: 20px 0;
  text-align: left;
  position: relative;
  color: var(--title);
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1399px) {
  .header-main .main-menu ul li a {
    letter-spacing: 1px;
  }
}
.header-main .main-menu ul li a i {
  margin-left: 7px;
}
.header-main .main-menu ul li a:hover, .header-main .main-menu ul li a.active {
  color: var(--title) !important;
}
.header-main .main-menu ul li:hover > a {
  color: var(--title);
}
.header-main .main-menu ul li:hover > a::after {
  color: var(--theme);
}
.header-main .header-right {
  gap: 30px;
}
@media (max-width: 1399px) {
  .header-main .header-right {
    gap: 20px;
  }
}
.header-main .sidebar__toggle {
  cursor: pointer;
  font-size: 20px;
  color: var(--title);
}

.offcanvas__info {
  background: var(--title) none repeat scroll 0 0;
  border-left: 2px solid var(--theme);
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 99999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.offcanvas__info::-webkit-scrollbar {
  display: none;
}

.offcanvas__logo a img {
  width: 150px;
}

.offcanvas__wrapper {
  position: relative;
  height: 133vh;
  padding: 30px 30px;
  background-color: var(--bg-1);
}
.offcanvas__wrapper .offcanvas__content .text {
  color: var(--white);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close i {
  color: var(--white);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact {
  margin-top: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact h4 {
  color: var(--theme2);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul {
  margin-top: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li a {
  color: var(--white);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 15px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact span {
  text-transform: initial;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .header-button .theme-btn {
  width: 100%;
  padding: 16px 40px;
  text-transform: capitalize !important;
}

.offcanvas__overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #151515;
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
}

@media (max-width: 450px) {
  .offcanvas__info {
    width: 300px;
  }
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}


/* 15.Footer */
/*----------------------------------------------
    # Footer style here
----------------------------------------------*/

.footer-widgets-wrapper {
  padding: 220px 0 60px;
  position: relative;
  z-index: 9;
}
.footer-widgets-wrapper .single-footer-widget {
  margin-top: 30px;
}
.footer-widgets-wrapper .single-footer-widget .widget-head {
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .footer-widgets-wrapper .single-footer-widget .widget-head {
    margin-bottom: 20px;
  }
}
.footer-widgets-wrapper .single-footer-widget .widget-head h3 {
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: inline-block;
  position: relative;
  padding-bottom: 20px;
}
.footer-widgets-wrapper .single-footer-widget .widget-head h3::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 25px;
  height: 2px;
  background-color: #7444FD;
}
.footer-widgets-wrapper .single-footer-widget .widget-head h3::after {
  position: absolute;
  bottom: 0;
  left: 40px;
  content: "";
  width: 55px;
  height: 2px;
  background-color: #C2C2C2;
}
@media (max-width: 767px) {
  .footer-widgets-wrapper .single-footer-widget .widget-head h3 {
    font-size: 23px;
  }
}
@media (max-width: 575px) {
  .footer-widgets-wrapper .single-footer-widget .widget-head h3 {
    font-size: 20px;
  }
}
.footer-widgets-wrapper .single-footer-widget .widget-head h4 {
  font-weight: bold;
  color: var(--white);
  font-size: 24px;
  display: inline-block;
}
.footer-widgets-wrapper .single-footer-widget .footer-content p {
  color: rgba(255, 255, 255, 0.85);
}
.footer-widgets-wrapper .single-footer-widget .list-area li {
  transition: all 0.4s ease-in-out;
  font-weight: 500;
}
.footer-widgets-wrapper .single-footer-widget .list-area li:not(:last-child) {
  margin-bottom: 20px;
}
.footer-widgets-wrapper .single-footer-widget .list-area li a {
  color: rgba(255, 255, 255, 0.8);
}
.footer-widgets-wrapper .single-footer-widget .list-area li a i {
  margin-right: 5px;
}
.footer-widgets-wrapper .single-footer-widget .list-area li a:hover {
  margin-left: 5px;
}
.footer-widgets-wrapper .single-footer-widget .list-area li a:hover a {
  color: var(--theme2);
}
.footer-widgets-wrapper.style1 {
  padding: 90px 0 151px;
  position: relative;
  z-index: 9;
  background-color: #EFEFEF;
}
.footer-widgets-wrapper.style1 .shape1 {
  position: absolute;
  top: 40px;
  left: -40px;
  z-index: 1;
}
.footer-widgets-wrapper.style1 .shape2 {
  position: absolute;
  bottom: -40px;
  left: 0;
  z-index: 1;
}
.footer-widgets-wrapper.style1 .shape3 {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 1;
}
.footer-widgets-wrapper.style1 .single-footer-widget {
  position: relative;
  z-index: 5;
}
.footer-widgets-wrapper.style1 .single-footer-widget .widget-head h3 {
  font-family: "Nunito", sans-serif;
  color: #242331;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 128.182%;
  text-transform: capitalize;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content {
  max-width: 366px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .footer-content p {
  color: #565656;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 157.4%;
}
.footer-widgets-wrapper.style1 .single-footer-widget .list-area li a {
  color: #565656;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 267.5%;
  text-transform: capitalize;
}
.footer-widgets-wrapper.style1 .single-footer-widget .list-area li:not(:last-child) {
  margin-bottom: 5px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box {
  border-radius: 20px;
  background: #F9F9F9;
  padding: 52px 58px 52px 45px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .subtitle {
  color: #5236FF;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  margin-bottom: 8px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .widget-head {
  font-family: "Nunito", sans-serif;
  color: #242331;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 128.182%;
  text-transform: capitalize;
  margin-bottom: 10px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .text {
  color: #797979;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 157.4%;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .info {
  display: flex;
  align-items: start;
  gap: 15px;
  margin-top: 30px;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .info .link {
  margin-top: -0.3em;
}
.footer-widgets-wrapper.style1 .single-footer-widget .contact-box .info .link a {
  color: #565656;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 157.4%;
}
@media (max-width: 767px) {
  .footer-widgets-wrapper.style1 .single-footer-widget .contact-box {
    padding: 25px;
  }
}

.footer-bottom {
  position: relative;
  z-index: 9;
  background: #0B0B0C;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-bottom .footer-wrapper {
  padding: 18px 0;
}
@media (max-width: 767px) {
  .footer-bottom .footer-wrapper {
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center !important;
  }
}
.footer-bottom .footer-wrapper p {
  color: var(--white);
}
@media (max-width: 500px) {
  .footer-bottom .footer-wrapper p {
    font-size: 13px;
  }
}
.footer-bottom .footer-wrapper p a {
  color: var(--white);
  font-weight: 600;
}
.footer-bottom.style1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
}
.footer-bottom.style1 .footer-wrapper {
  padding: 35px 0 50px;
  border-top: 1px solid #E3E3E3;
}
@media (max-width: 767px) {
  .footer-bottom.style1 .footer-wrapper {
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center !important;
  }
}
.footer-bottom.style1 .footer-wrapper p {
  color: #797979;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 157.4%;
  text-transform: capitalize;
}
@media (max-width: 500px) {
  .footer-bottom.style1 .footer-wrapper p {
    font-size: 13px;
  }
}
.footer-bottom.style1 .footer-wrapper p a {
  color: var(--white);
  font-weight: 600;
}

/* 16.Intro */

.hero-3 {
  padding: 100px 0;
  overflow: hidden;
}
.hero-3 .container-fluid {
  padding: 0 225px;
}
@media (max-width: 1899px) {
  .hero-3 .container-fluid {
    padding: 0 60px;
  }
}
@media (max-width: 1600px) {
  .hero-3 .container-fluid {
    padding: 0 50px;
  }
}
@media (max-width: 1399px) {
  .hero-3 .container-fluid {
    padding: 0 40px;
  }
}
@media (max-width: 1199px) {
  .hero-3 .container-fluid {
    padding: 0 30px;
  }
}
.hero-3 .hero-content h6 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #1AD079;
}
.hero-3 .hero-content h1 {
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 125%;
  margin-bottom: 30px;
}
@media (max-width: 1199px) {
  .hero-3 .hero-content h1 {
    font-size: 65px;
  }
}
@media (max-width: 991px) {
  .hero-3 .hero-content h1 {
    font-size: 60px;
  }
}
@media (max-width: 767px) {
  .hero-3 .hero-content h1 {
    font-size: 46px;
  }
}
@media (max-width: 575px) {
  .hero-3 .hero-content h1 {
    font-size: 34px;
  }
}
.hero-3 .hero-content h1 span {
  color: var(--theme);
}
.hero-3 .hero-content p {
  font-weight: 500;
  max-width: 760px;
  line-height: 175%;
  color: #565656;
}
.hero-3 .hero-content .btn-wrapper {
  display: flex;
  align-items: center;
  margin-top: 40px;
  gap: 25px;
}
@media (max-width: 1199px) {
  .hero-3 .hero-content .btn-wrapper {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.hero-3 .hero-image {
  margin-right: -60%;
  position: relative;
}
.hero-3 .hero-image .mobile-image {
  position: absolute;
  bottom: 0;
  left: -60px;
  max-width: 180px;
}
@media (max-width: 1399px) {
  .hero-3 .hero-image .mobile-image {
    max-width: 140px;
    left: 0;
  }
}
@media (max-width: 1199px) {
  .hero-3 .hero-image .mobile-image {
    max-width: 180px;
  }
}
@media (max-width: 767px) {
  .hero-3 .hero-image .mobile-image {
    max-width: 100px;
  }
}
@media (max-width: 1199px) {
  .hero-3 .hero-image {
    margin-right: 0;
  }
}
.hero-3 .hero-image img {
  width: 100%;
  height: 100%;
  border-radius: 26px 0px 0px 26px;
}

/* 17.Brand */

/* 18.About */

.about-wrapper-3 .about-image {
  margin-left: -70%;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-image {
    margin-left: 0;
  }
}
.about-wrapper-3 .about-image img {
  width: 100%;
  height: 100%;
}
.about-wrapper-3 .about-content {
  margin-left: 40px;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-content {
    margin-left: 0;
  }
}
.about-wrapper-3 .about-content ul {
  margin-top: 40px;
  margin-bottom: 40px;
}
.about-wrapper-3 .about-content ul li {
  font-weight: 500;
}
.about-wrapper-3 .about-content ul li b {
  font-weight: 700;
  color: var(--header);
  margin-left: 10px;
}
.about-wrapper-3 .about-content ul li:not(:last-child) {
  margin-bottom: 15px;
}

.about-section-3 {
  position: relative;
}
.about-section-3 .about-shape {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media (max-width: 1399px) {
  .about-section-3 .about-shape {
    display: none;
  }
}

/* 19.Work Process */

/* 20.Advantage */

/* 21.Wcu */

/* 22.Counter */

/* 23.Faq */

/* 24.Testimonial */

/* 25.Feature */

.feature-provide-box-items {
  border-radius: 16px;
  background: #E4E6FF;
  padding: 40px;
  position: relative;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .feature-provide-box-items {
    margin-top: 30px;
  }
}
.feature-provide-box-items .icon {
  transition: all 0.4s ease-in-out;
}
.feature-provide-box-items .item-shape {
  position: absolute;
  bottom: -150px;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.feature-provide-box-items .item-shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  transition: all 0.4s ease-in-out;
}
.feature-provide-box-items .content {
  margin-top: 30px;
  position: relative;
  z-index: 9;
}
.feature-provide-box-items .content h3 {
  font-size: 24px;
  margin-bottom: 5px;
}
.feature-provide-box-items .content p {
  color: #3F444B;
}
.feature-provide-box-items:hover {
  background-color: var(--theme);
}
.feature-provide-box-items:hover .icon {
  filter: grayscale(100%) brightness(300%);
}
.feature-provide-box-items:hover .content h3, .feature-provide-box-items:hover .content p {
  color: var(--white);
}
.feature-provide-box-items:hover .item-shape {
  opacity: 1;
  visibility: visible;
  bottom: 0;
}
.feature-provide-box-items:hover .item-shape-2 {
  bottom: -150px;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.feature-provide-box-items.style-2 {
  margin-top: 30px;
}

.how-work-wrapper {
  border-top: 1px solid var(--border);
  padding-top: 60px;
}
@media (max-width: 575px) {
  .how-work-wrapper {
    padding-top: 30px;
  }
}
.how-work-wrapper .how-work-content .text {
  max-width: 520px;
  color: #565656;
  font-weight: 500;
  margin-bottom: 40px;
}
@media (max-width: 575px) {
  .how-work-wrapper .how-work-content .text {
    margin-bottom: 30px;
  }
}
.how-work-wrapper .how-work-content .how-work-number-items {
  display: flex;
  gap: 24px;
}
.how-work-wrapper .how-work-content .how-work-number-items .number {
  font-size: 20px;
  font-weight: 600;
  color: var(--header);
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}
.how-work-wrapper .how-work-content .how-work-number-items .content {
  flex-basis: 75%;
}
.how-work-wrapper .how-work-content .how-work-number-items .content h3 {
  font-size: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.how-work-wrapper .how-work-content .how-work-number-items .content p {
  font-weight: 500;
  color: #565656;
}
.how-work-wrapper .gap-image img {
  width: 100%;
  height: 100%;
}
/* --- QR GÖRSEL ALANI (MEVCUT YAPI KORUNDU) --- */
.qr-display-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.qr-box {
  background: #fff;
  padding: 25px; /* İç boşluk biraz artırıldı */
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  text-align: center;
  transition: all 0.3s ease;
  width: 45%;
}

.qr-box:hover {
  transform: translateY(-10px);
}

.qr-box img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 15px;
}

.qr-box span {
  font-size: 14px;
  font-weight: 700;
  color: var(--title);
  display: block;
}

.premium-qr span {
  color: var(--theme);
}

/* --- SAĞ İÇERİK ALANI FERAHALTMA DÜZENLEMELERİ --- */
.what-we-wrapper .what-we-content {
  max-width: 580px; /* Genişlik artırıldı, metin yayılması sağlandı */
  margin-left: 60px; /* Görsellerle metin arası nefes payı */
}

/* Üst Başlık ve Paragraf */
.what-we-wrapper .what-we-content .section-title h2 {
  margin-bottom: 20px;
  line-height: 1.3;
}

.what-we-wrapper .what-we-content .section-title p {
  font-weight: 500;
  color: #565656;
  line-height: 1.8; /* Satır arası açıldı */
  margin-bottom: 40px; /* Liste öncesi boşluk */
}

/* Liste Öğeleri Alanı */
.what-we-wrapper .what-we-content .list-items-area .list-items {
  display: flex;
  gap: 20px;
}

/* Maddeler Arası Mesafe ve Çizgi */
.what-we-wrapper .what-we-content .list-items-area .list-items:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.06); /* Çizgi hafifletildi */
  margin-bottom: 25px; /* Aralarındaki dikey mesafe artırıldı */
  padding-bottom: 25px;
}

/* Madde Başlıkları */
.what-we-wrapper .what-we-content .list-items-area .list-items .content h3 {
  font-size: 22px; /* Başlık belirginleşti */
  margin-bottom: 12px;
  font-weight: 700;
}

/* Madde Açıklamaları */
.what-we-wrapper .what-we-content .list-items-area .list-items .content p {
  font-weight: 500;
  color: #666;
  line-height: 1.7; /* Açıklama metni ferahlatıldı */
  margin-bottom: 0;
}

/* RESPONSIVE AYARLAR */
@media (max-width: 1199px) {
  .what-we-wrapper .what-we-content {
      margin-left: 30px;
  }
}

@media (max-width: 991px) {
  .qr-display-container {
      margin-bottom: 30px;
  }
  .what-we-wrapper .what-we-content {
      margin-left: 0;
      margin-top: 40px;
      max-width: 100%;
      text-align: center; /* Mobilde ortalı duruş */
  }
  .what-we-wrapper .what-we-content .list-items-area .list-items {
      justify-content: center;
      text-align: left; /* Metinler blok olarak sola yaslı kalsın */
  }
}

@media (max-width: 575px) {
  .qr-display-container {
      flex-direction: column;
      gap: 30px;
  }
  .qr-box {
      width: 100%;
      max-width: 280px;
  }
}

/*-----------------------------------------------------------------
    26. Pricing & Jumbo Infinity Final (Fix Overlap)
-------------------------------------------------------------------*/

.pricing-section-3 {
  background-color: var(--theme3);
  padding-bottom: 90px;
}

@media (min-width: 1400px) {
  .pricing-section-3 .container {
      max-width: 98% !important;
      padding: 0 40px;
  }
}

/* ANA KART */
.jumbo-card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 50px 30px !important;
  border-radius: 40px !important;
  height: 100%;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

/* ÜST BAŞLIK */
.card-header-top h6 {
  font-size: 32px !important;
  font-weight: 850;
  color: var(--title);
  margin-bottom: 10px;
}

/* SONSUZ EKRAN IPHONE */
/* SONSUZ EKRAN IPHONE */
.iphone-container {
  position: relative;
  width: 330px; 
  height: 660px; 
  background: #000;
  border: 10px solid #1a1a1a; 
  border-radius: 55px;
  overflow: hidden;
  box-shadow: 0 35px 70px -15px rgba(0,0,0,0.3);
  flex-shrink: 0;
  z-index: 1;
}

/* IFRAME - Sanal Boyutlandırma */
.iphone-iframe {
  /* Burası kritik: Menüyü sanki 450px genişliğinde bir telefondaymış gibi render alıyoruz */
  width: 450px; 
  height: 900px; 
  
  border: none;
  background: #fff;
  
  /* Scale işlemi: 450px'i 310px civarına indirmek için ~0.70 oranında küçültüyoruz */
  transform: scale(0.71); 
  
  /* Küçültme merkezini sol üst köşe yapıyoruz ki kayma olmasın */
  transform-origin: top left;
  
  /* Boyutu container'a tam oturtmak için manuel ince ayar */
  position: absolute;
  top: 0;
  left: 0;
}

/* İÇERİK ALANI - Üzerine binmeyi önleyen kritik ayar */
.card-content {
  position: relative;
  z-index: 10;
  padding-left: 45px !important; /* Telefon ile içerik arası mesafe */
  width: 100%;
}

/* Checklist İkon ve Metin */
.template-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 35px 0;
}

.template-checklist li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.template-checklist li .icon-box {
  width: 28px;
  height: 28px;
  background: var(--theme);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.template-checklist li span {
  font-size: 17px;
  font-weight: 600;
  color: var(--title);
  white-space: nowrap; /* Masaüstünde metnin kırılmasını önler */
}

/* FİYAT KUTUSU */
.price-box-v4 {
  background: #F8F7FF;
  border: 1px solid rgba(116, 68, 253, 0.1);
  padding: 20px 25px; /* Padding biraz daraltıldı taşmayı önlemek için */
  border-radius: 25px;
  border-left: 8px solid var(--theme);
  width: 100%; /* Sabit genişlik yerine %100 yapıldı */
  box-sizing: border-box; /* Padding'in genişliği artırmasını engeller */
}

/* Eski fiyat ve Rozetin yan yana gelmesini sağlar */
.price-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 16px;
  /* display: block kaldırıldı çünkü flex-item oldu */
}

.price-now {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-now .amount {
  font-size: 38px;
  font-weight: 900;
  color: var(--title);
  line-height: 1;
}

/* Rozet Tasarımı */
.badge {
  background: #ff4d4d !important;
  color: #fff !important;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: bold;
}

.period {
  font-size: 14px;
  color: #666;
  display: block;
  margin-top: 5px;
}

/* ÖZEL TASARIM ALANI */
.custom-design-bg {
  background: linear-gradient(135deg, var(--theme), #8e44ad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.custom-center-text i {
  font-size: 60px;
  margin-bottom: 20px;
}

/* RESPONSIVE */
@media (max-width: 1199px) {
  .jumbo-card .row {
      flex-direction: column;
      text-align: center;
  }
  .iphone-container {
      width: 350px;
      height: 700px;
      margin: 0 auto 40px;
  }
  .card-content {
      padding-left: 0 !important;
  }
  .template-checklist li {
      justify-content: center;
  }
  .template-checklist li span {
      white-space: normal;
  }
  .price-box-v4 {
      margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .iphone-container {
      width: 98% !important;
      height: 640px;
  }
}

/* 27.Cta */

/* 28.Blog */

/*----------------------------------------------
    # Blog style here
----------------------------------------------*/

/*----------------------------------------------
    # Blog Extra style here
----------------------------------------------*/

/* 29.Services */

/* 30.Project */

/* 31.Team */

/* 32.Team Extra */
/*----------------------------------------------
    # Team Extra style here
----------------------------------------------*/

/* 33.Sidebar */
/*----------------------------------------------
    # Widget Sidebar style here
----------------------------------------------*/
/* 34.Contact */

/* 35.Input */

/* Firefox */

/* 36.Useed Technologies */