/*-----------------------------------------------------------------

Template Name: Gratech - IT Service HTML Template
Author:  Gramentheme
Author URI: https://themeforest.net/user/gramentheme/portfolio
Developer: Kawser Ahmed Roni
Version: 1.0.0
Description: Gratech - IT Service HTML5 Template

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

01. abstracts
1.01 --> mixins
1.02 --> variable

02. base
2.01 --> typography
2.02 --> animation
2.03 --> responsive

03. components
3.01 --> buttons
3.02 --> progress

04. layout
4.01 --> header
4.02 --> banner
4.03 --> section
4.04 --> footer

------------------------------------------------------------------*/
@import url("../../../../css2");
:root {
  --kumbh: "Kumbh Sans", sans-serif;
  --primary-color: #00cccc;
  --primary10: rgba(60, 114, 252, 0.1);
  --gradient-bg: linear-gradient(90deg, #00cccc -10.59%, #00060c 300.59%);
  --secondary-color: #0f0d1d;
  --main-bg: #ffffff;
  --sub-bg: #f3f7fb;
  --heading-color: #0f0d1d;
  --paragraph: #585858;
  --span: #585858;
  --border: #e3e3e3;
  --white: #ffffff;
  --black: #000000;
  --border-1px: 1px solid #eaecf0;
  --border-2px: 2px solid #eaecf0;
  --transition: all 0.3s ease-in-out;
  --shadow: 0px 4px 25px 0px #0000000f;
}

:root[data-theme=dark] {
  --primary-color: #3c72fc;
  --primary10: rgba(60, 114, 252, 0.1);
  --gradient-bg: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%);
  --secondary-color: #0f0d1d;
  --main-bg: #151327;
  --sub-bg: #16142c;
  --heading-color: #fff;
  --paragraph: rgba(255, 255, 255, 0.8);
  --span: rgba(255, 255, 255, 0.8);
  --border: #e3e3e3;
  --white: #ffffff;
  --black: #000000;
}

:root[data-theme=dark] .light-area {
  --primary-color: #3c72fc;
  --primary10: rgba(60, 114, 252, 0.1);
  --gradient-bg: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%);
  --secondary-color: #0f0d1d;
  --main-bg: #ffffff;
  --sub-bg: #f3f7fb;
  --heading-color: #0f0d1d;
  --paragraph: #585858;
  --span: #585858;
  --border: #e3e3e3;
  --white: #ffffff;
  --black: #000000;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--kumbh);
  color: var(--paragraph);
  background-color: var(--main-bg);
  line-height: 28px;
  font-weight: 400;
}

/* body, html{
overflow-x: hidden;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  color: #f2f5f7;
  font-family: var(--kumbh);
}

h1 {
  font-size: 90px;
  font-weight: 700;
  line-height: 100px;
}

h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}
@media (max-width: 767px) {
  h2 {
    font-size: 30px;
    line-height: 40px;
  }
}

h3 {
  font-size: 19px;
  line-height: 32px;
  font-weight: 600;
}

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

h5 {
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
}

h6 {
  font-size: 14px;
  font-weight: 600;
}

p {
  margin: 0;
  padding: 0;
  line-height: 28px;
  font-size: 16px;
}

span {
  display: inline-block;
  color: var(--span);
}

a {
  text-decoration: none;
  display: inline-block;
  color: var(--heading-color);
  transition: var(--transition);
  font-size: 17px;
}

a:hover {
  color: var(--heading-color);
}

ul {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

li {
  list-style: none;
  font-size: 16px;
}

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

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

::placeholder {
  color: var(--span);
}

::selection {
  color: var(--white);
  background-color: var(--primary-color);
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

/*-- Margin Bottom --*/
.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 0px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-55 {
  margin-left: 55px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-65 {
  margin-left: 65px;
}

.ml-70 {
  margin-left: 70px;
}

.ml-75 {
  margin-left: 75px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-85 {
  margin-left: 85px;
}

.ml-90 {
  margin-left: 90px;
}

.ml-95 {
  margin-left: 95px;
}

.ml-100 {
  margin-left: 100px;
}

.ml-105 {
  margin-left: 105px;
}

.ml-110 {
  margin-left: 110px;
}

.ml-115 {
  margin-left: 115px;
}

.ml-120 {
  margin-left: 120px;
}

.ml-125 {
  margin-left: 125px;
}

.ml-130 {
  margin-left: 130px;
}

.ml-135 {
  margin-left: 135px;
}

.ml-140 {
  margin-left: 140px;
}

.ml-145 {
  margin-left: 145px;
}

.ml-150 {
  margin-left: 150px;
}

.ml-155 {
  margin-left: 155px;
}

.ml-160 {
  margin-left: 160px;
}

.ml-165 {
  margin-left: 165px;
}

.ml-170 {
  margin-left: 170px;
}

.ml-175 {
  margin-left: 175px;
}

.ml-180 {
  margin-left: 180px;
}

.ml-185 {
  margin-left: 185px;
}

.ml-190 {
  margin-left: 190px;
}

.ml-195 {
  margin-left: 195px;
}

.ml-200 {
  margin-left: 200px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-55 {
  margin-right: 55px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-65 {
  margin-right: 65px;
}

.mr-70 {
  margin-right: 70px;
}

.mr-75 {
  margin-right: 75px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-85 {
  margin-right: 85px;
}

.mr-90 {
  margin-right: 90px;
}

.mr-95 {
  margin-right: 95px;
}

.mr-100 {
  margin-right: 100px;
}

.mr-105 {
  margin-right: 105px;
}

.mr-110 {
  margin-right: 110px;
}

.mr-115 {
  margin-right: 115px;
}

.mr-120 {
  margin-right: 120px;
}

.mr-125 {
  margin-right: 125px;
}

.mr-130 {
  margin-right: 130px;
}

.mr-135 {
  margin-right: 135px;
}

.mr-140 {
  margin-right: 140px;
}

.mr-145 {
  margin-right: 145px;
}

.mr-150 {
  margin-right: 150px;
}

.mr-155 {
  margin-right: 155px;
}

.mr-160 {
  margin-right: 160px;
}

.mr-165 {
  margin-right: 165px;
}

.mr-170 {
  margin-right: 170px;
}

.mr-175 {
  margin-right: 175px;
}

.mr-180 {
  margin-right: 180px;
}

.mr-185 {
  margin-right: 185px;
}

.mr-190 {
  margin-right: 190px;
}

.mr-195 {
  margin-right: 195px;
}

.mr-200 {
  margin-right: 200px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 84px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 90px;
  padding-right: 25px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

.pl-0 {
  padding-left: 0;
}

.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-35 {
  padding-left: 35px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-45 {
  padding-left: 45px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-55 {
  padding-left: 55px;
}

.pl-60 {
  padding-left: 60px;
}

.pl-65 {
  padding-left: 65px;
}

.pl-70 {
  padding-left: 70px;
}

.pl-75 {
  padding-left: 75px;
}

.pl-80 {
  padding-left: 80px;
}

.pl-85 {
  padding-left: 85px;
}

.pl-90 {
  padding-left: 90px;
}

.pl-95 {
  padding-left: 95px;
}

.pl-100 {
  padding-left: 100px;
}

.pl-105 {
  padding-left: 105px;
}

.pl-110 {
  padding-left: 110px;
}

.pl-115 {
  padding-left: 115px;
}

.pl-120 {
  padding-left: 120px;
}

.pl-125 {
  padding-left: 125px;
}

.pl-130 {
  padding-left: 130px;
}

.pl-135 {
  padding-left: 135px;
}

.pl-140 {
  padding-left: 140px;
}

.pl-145 {
  padding-left: 145px;
}

.pl-150 {
  padding-left: 150px;
}

.pl-155 {
  padding-left: 155px;
}

.pl-160 {
  padding-left: 160px;
}

.pl-165 {
  padding-left: 165px;
}

.pl-170 {
  padding-left: 170px;
}

.pl-175 {
  padding-left: 175px;
}

.pl-180 {
  padding-left: 180px;
}

.pl-185 {
  padding-left: 185px;
}

.pl-190 {
  padding-left: 190px;
}

.pl-195 {
  padding-left: 195px;
}

.pl-200 {
  padding-left: 200px;
}

.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-35 {
  padding-right: 35px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-45 {
  padding-right: 45px;
}

.pr-50 {
  padding-right: 50px;
}

.pr-55 {
  padding-right: 55px;
}

.pr-60 {
  padding-right: 60px;
}

.pr-65 {
  padding-right: 65px;
}

.pr-70 {
  padding-right: 70px;
}

.pr-75 {
  padding-right: 75px;
}

.pr-80 {
  padding-right: 80px;
}

.pr-85 {
  padding-right: 85px;
}

.pr-90 {
  padding-right: 90px;
}

.pr-95 {
  padding-right: 95px;
}

.pr-100 {
  padding-right: 100px;
}

.pr-105 {
  padding-right: 105px;
}

.pr-110 {
  padding-right: 110px;
}

.pr-115 {
  padding-right: 115px;
}

.pr-120 {
  padding-right: 120px;
}

.pr-125 {
  padding-right: 125px;
}

.pr-130 {
  padding-right: 130px;
}

.pr-135 {
  padding-right: 135px;
}

.pr-140 {
  padding-right: 140px;
}

.pr-145 {
  padding-right: 145px;
}

.pr-150 {
  padding-right: 150px;
}

.pr-155 {
  padding-right: 155px;
}

.pr-160 {
  padding-right: 160px;
}

.pr-165 {
  padding-right: 165px;
}

.pr-170 {
  padding-right: 170px;
}

.pr-175 {
  padding-right: 175px;
}

.pr-180 {
  padding-right: 180px;
}

.pr-185 {
  padding-right: 185px;
}

.pr-190 {
  padding-right: 190px;
}

.pr-195 {
  padding-right: 195px;
}

.pr-200 {
  padding-right: 200px;
}

@media (max-width: 767px) {
  .pt-120 {
    padding-top: 60px;
  }
  .pb-120 {
    padding-bottom: 60px;
  }
  .mt-120 {
    margin-top: 60px;
  }
  .mb-120 {
    margin-bottom: 60px;
  }
  .pt-100 {
    padding-top: 50px;
  }
  .pb-100 {
    padding-bottom: 50px;
  }
  .mt-100 {
    margin-top: 50px;
  }
  .mb-100 {
    margin-bottom: 50px;
  }
  .pt-60 {
    padding-top: 30px;
  }
  .pb-60 {
    padding-bottom: 30px;
  }
  .mt-60 {
    margin-top: 30px;
  }
  .mb-60 {
    margin-bottom: 30px;
  }
}
.bor {
  border: 1px solid var(--border);
}

.bor-top {
  border-top: 1px solid var(--border);
}

.bor-left {
  border-left: 1px solid var(--border);
}

.bor-bottom {
  border-bottom: 1px solid var(--border);
}

.bor-right {
  border-right: 1px solid var(--border);
}

.border-none {
  border: none !important;
}

.text-justify {
  text-align: justify;
}

.image img {
  width: 100%;
}

.primary-color {
  color: var(--primary-color) !important;
}

.primary-hover:hover {
  color: var(--primary-color) !important;
}

.primary-bg {
  background-color: #163e64 !important;
}

.gradient-bg {
  background: var(--gradient-bg) !important;
}

.secondary-color {
  color: var(--secondary-color);
}

.secondary-bg {
  background: linear-gradient(45deg, black, #163e64);
  background-color: var(--secondary-color);
}

.sub-bg {
  background-color: var(--sub-bg);
}

.sm-font {
  font-size: 14px !important;
}

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

.transition {
  transition: var(--transition);
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.overlay, .banner-video__wrp, .brand-three-area, .case__image, .banner__inner-page, .header__main .main-menu ul li .sub-menu.menu-image .image {
  position: relative;
}
.overlay::before, .banner-video__wrp::before, .brand-three-area::before, .case__image::before, .banner__inner-page::before, .header__main .main-menu ul li .sub-menu.menu-image .image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.nice-select {
  width: 100%;
  border-radius: 10px;
  height: 50px;
  line-height: 50px;
}
.nice-select:focus {
  border: 1px solid var(--primary-color);
}
.nice-select .list {
  width: 100%;
}

.star i {
  color: var(--primary-color);
}
.star i.disable {
  color: var(--span);
  opacity: 40%;
}

.pegi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.pegi a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background-color: var(--sub-bg);
  color: var(--heading-color);
  font-weight: 700;
  border-radius: 0;
}
.pegi a:hover {
  background-color: var(--primary-color);
  color: var(--white);
}
.pegi a:hover i {
  color: var(--white) !important;
}
.pegi a.active {
  background-color: var(--primary-color);
  color: var(--white);
}

.accordion .accordion-item {
  border: var(--border-1px);
  border-radius: 0px;
  margin-bottom: 10px;
}
.accordion .accordion-item.dark-mode {
  background-color: var(--secondary-color);
}
.accordion .accordion-item h2 button {
  font-size: 15px;
  line-height: 28px;
  font-weight: 700;
  box-shadow: none;
  border-radius: 0 !important;
  padding: 20px 30px;
}
.accordion .accordion-item .accordion-body {
  padding: 20px 30px;
  padding-top: 0;
}
.accordion .accordion-item .accordion-body p {
  color: var(--paragraph);
}
.accordion .accordion-button {
  background-color: transparent;
  color: var(--primary-color);
}
.accordion .accordion-button::after {
  display: none;
}
.accordion .accordion-button::before {
  position: absolute;
  content: "\f068";
  font-family: "Font Awesome 6 Pro";
  font-weight: 700;
  top: 20px;
  right: 25px;
  font-size: 15px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 0px;
  color: var(--white);
  background-color: var(--primary-color);
  text-align: center;
  transition: var(--transition);
}
.accordion .accordion-button.collapsed {
  background-color: transparent;
  color: var(--heading-color);
}
.accordion .accordion-button.collapsed::before {
  content: "+";
  background-color: var(--sub-bg);
  color: var(--primary-color);
}

.search-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(60, 114, 252, 0.9);
}
.search-wrap .search-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.search-wrap .search-cell {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
.search-wrap .search-field-holder {
  width: 50%;
  margin: auto;
  position: relative;
  animation: slideInUp 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-wrap .search-field-holder {
    width: 70%;
  }
}
@media (max-width: 575px) {
  .search-wrap .search-field-holder {
    width: 80%;
  }
}
.search-wrap .main-search-input {
  width: 100%;
  height: 70px;
  border: 0;
  padding: 0 50px;
  background: transparent;
  font-size: 25px;
  color: var(--white);
  border-bottom: 1px solid var(--white);
  text-align: center;
  letter-spacing: 2px;
}

@media (max-width: 575px) {
  .search-wrap .main-search-input {
    height: 50px;
    padding: 0 0;
    line-height: 50px;
    font-size: 18px;
  }
}
.search-wrap input.form-control,
.search-wrap input.form-control:focus {
  background-color: var(--white);
}

input.main-search-input::placeholder {
  color: var(--white);
  opacity: 1;
  font-size: 25px;
}

@media (max-width: 575px) {
  input.main-search-input::placeholder {
    font-size: 18px;
  }
}
.search-close {
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 30px;
  color: var(--white);
  cursor: pointer;
}

.pace {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 99999999999999;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  border: 0px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.pace .pace-progress {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 300px;
  position: fixed;
  z-index: 99999999999999;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: var(--primary-color);
}

.pace.pace-inactive {
  width: 100vw;
  opacity: 0;
}
.pace.pace-inactive .pace-progress {
  max-width: 100vw;
}

#preloader {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  z-index: 9999999;
}
#preloader:after {
  content: "";
  position: fixed;
  left: 0;
  height: 50%;
  width: 100%;
  background: var(--black);
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  bottom: 0;
}
#preloader:before {
  content: "";
  position: fixed;
  left: 0;
  height: 50%;
  width: 100%;
  background: var(--black);
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  top: 0;
}

#preloader.isdone {
  visibility: hidden;
  -webkit-transition-delay: 1.5s;
  -o-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
#preloader.isdone:after {
  height: 0;
  -webkit-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
  -o-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
  transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
#preloader.isdone:before {
  height: 0;
  -webkit-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
  -o-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
  transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

.loading {
  position: fixed;
  width: 100%;
  text-align: center;
  left: 50%;
  top: calc(50% - 40px);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-weight: 400;
  font-size: 24px;
  text-transform: lowercase;
  letter-spacing: 5px;
  z-index: 9999999999;
}
.loading span {
  -webkit-animation: loading 1.4s infinite alternate;
  animation: loading 1.4s infinite alternate;
}
.loading span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.loading span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.loading span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.loading span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.loading span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.loading span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.loading span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.loading.isdone {
  top: 50%;
  opacity: 0;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
  -webkit-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s;
  visibility: hidden;
}

@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.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(--primary-color);
  -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-inner.cursor-hover {
  margin-left: -35px;
  margin-top: -35px;
  width: 70px;
  height: 70px;
  background-color: var(--primary-color);
  opacity: 0.3;
}

.cursor-outer {
  margin-left: -12px;
  margin-top: -12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--primary-color);
  -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;
}

.cursor-outer.cursor-hover {
  opacity: 0;
}

.scroll-up {
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px var(--border);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  position: fixed;
  right: 25px;
  bottom: 35px;
  height: 50px;
  width: 50px;
  transition: var(--transition);
}
.scroll-up::after {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  content: "\f176";
  text-align: center;
  line-height: 50px;
  font-weight: 700;
  font-size: 18px;
  color: var(--primary-color);
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: var(--transition);
}
.scroll-up svg path {
  fill: none;
}
.scroll-up svg.scroll-circle path {
  stroke: var(--primary-color);
  stroke-width: 4px;
  box-sizing: border-box;
  transition: var(--transition);
}
.scroll-up.active-scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-one {
  padding: 15px 25px;
  background: var(--gradient-bg);
  font-weight: 600;
  color: var(--white);
  transition: var(--transition);
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.btn-one i {
  margin-left: 8px;
  transition: var(--transition);
}
@media (max-width: 575px) {
  .btn-one i {
    margin-left: 3px;
    font-size: 12px;
  }
}
@media (max-width: 575px) {
  .btn-one {
    padding: 8px 18px;
    font-size: 14px;
  }
}
.btn-one::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 0;
  content: "";
  background-color: var(--secondary-color);
  z-index: -1;
  transition: var(--transition);
}
.btn-one::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 0;
  content: "";
  background-color: var(--secondary-color);
  z-index: -1;
  transition: var(--transition);
}
.btn-one:hover {
  color: var(--white);
}
.btn-one:hover::before {
  height: 100%;
}
.btn-one:hover::after {
  height: 100%;
}
.btn-one:hover i {
  transform: translate(5px);
}

.read-more-btn {
  text-transform: capitalize;
  font-weight: 600;
  color: var(--paragraph);
}
.read-more-btn i {
  margin-left: 5px;
  transition: var(--transition);
}
.read-more-btn:hover {
  color: var(--primary-color);
}
.read-more-btn:hover i {
  color: var(--primary-color);
  margin-left: 10px;
}

.arry-prev, .arry-next {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  color: var(--primary-color);
  transition: var(--transition);
  border: 1px solid var(--primary-color);
  font-size: 20px;
}
.arry-prev:hover, .arry-next:hover {
  background-color: var(--primary-color);
  color: var(--white);
}
.arry-prev.active, .active.arry-next {
  background-color: var(--primary-color);
  color: var(--white);
}

.dot .swiper-pagination-bullet, .dot-light .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: 0.6s;
  background-color: transparent;
  opacity: 1;
  position: relative;
  border: 1px solid transparent;
}
.dot .swiper-pagination-bullet::before, .dot-light .swiper-pagination-bullet::before {
  position: absolute;
  content: "";
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary-color);
  transition: 0.6s;
}
.dot .swiper-pagination-bullet.swiper-pagination-bullet-active, .dot-light .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid var(--primary-color);
}
.dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before, .dot-light .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  background-color: var(--primary-color);
}

.dot-light .swiper-pagination-bullet {
  background-color: transparent;
  border: 1px solid transparent;
}
.dot-light .swiper-pagination-bullet::before {
  background-color: var(--white);
}
.dot-light .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.dot-light .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  background-color: var(--primary-color);
}

.video-btn {
  position: relative;
  text-align: center;
  display: inline-block;
  z-index: 2;
}
.video-btn a {
  position: relative;
  color: var(--white);
  font-size: 20px;
  z-index: 1;
  background: var(--gradient-bg);
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  display: block;
}
.video-btn.video-pulse::after, .video-btn.video-pulse::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 10px solid var(--primary-color);
  opacity: 0.7;
  left: 0;
  top: 0;
  border-radius: 50%;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: video-animation;
  animation-name: video-animation;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.video-btn.video-pulse::before {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.progress-area .progress {
  background-color: var(--border);
  height: 12px;
  border-radius: 0px;
}
.progress-area .progress.dark-mode {
  background-color: var(--secondary-color);
}
.progress-area .progress .progress-bar {
  background-color: var(--primary-color);
}
.progress__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.progress__title span {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 600;
}

.logo {
  display: block;
  width: 196px;
}
.logo img {
  width: 90%;
  padding-top: -15px;
}

.header-top {
  padding: -5px 0;
  padding-top: 15px;
  padding-bottom: 10px;
  overflow: hidden;
  background-color: var(--heading-color);
  color: #fff;
}
.header-top .header-top-wrp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.header-top .header-top-wrp .info {
  color: var(--white);
}
.header-top .header-top-wrp .info span {
  color: var(--white);
}
.header-top .header-top-wrp .info a {
  transition: var(--transition);
  color: var(--white);
  font-size: 15px;
}
.header-top .header-top-wrp .info a:hover {
  color: var(--primary-color);
}
.header-top .header-top-wrp .info i {
  color: var(--primary-color);
  padding-right: 5px;
}
.header-top .header-top-wrp .info li {
  float: left;
  line-height: 0;
}
.header-top .header-top-wrp .link-info {
  position: relative;
  z-index: 2;
}
.header-top .header-top-wrp .link-info li {
  float: left;
  line-height: 0;
}
.header-top .header-top-wrp .link-info li a {
  width: 37px;
  color: #fff;
  text-align: center;
}
.header-top .header-top-wrp .link-info li a:hover {
  color: var(--primary-color);
  color: #fff;
}

.header-area {
  position: relative;
}
.header-area::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  background: linear-gradient(270deg, #163e64 6.32%, #00060c 216.42%);
  height: 100%;
  content: "";
  z-index: -1;
  clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
}
@media (max-width: 1199px) {
  .header-area::after {
    width: 25%;
  }
}
@media (max-width: 991px) {
  .header-area::after {
    width: 30%;
  }
}
@media (max-width: 767px) {
  .header-area::after {
    width: 40%;
  }
}
@media (max-width: 575px) {
  .header-area::after {
    width: 50%;
  }
}
@media (max-width: 450px) {
  .header-area::after {
    width: 70%;
  }
}
.header-area.menu-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: var(--white);
  z-index: 999;
  box-shadow: var(--shadow);
  color: #fff;
}
.header-area.menu-fixed .mega-menu {
  top: 105px !important;
  color: #fff;
}
/* .header__container {
max-width: 1350px;
padding: 0 40px;
background-color: #f9f9f6;
} */

.header__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 40px;
  justify-content: space-between;
  color: #fff;
}
.header__main .main-menu ul {
  display: flex;
  align-items: center;
  gap: 45px;
  padding: -12px;
  padding-top: -1px;
  padding-bottom: -2px;
  color: #fff;
  margin-bottom: 0px;
}
.header__main .main-menu ul li {
  position: relative;
  color: #fff;
}
.header__main .main-menu ul li.has-megamenu {
  position: static;
  color: #fff;
}
.header__main .main-menu ul li.has-megamenu:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0px);
  color: #fff;
}
.header__main .main-menu ul li a {
  font-weight: 600;
  font: message-box;
  padding: 23px 1px;
  color: #f4eded;
  font-weight: 600;
}
.header__main .main-menu ul li a i {
  font-size: 12px;
  transition: var(--transition);
}
.header__main .main-menu ul li .sub-menu {
  padding: 0;
  text-align: center;
  position: absolute;
  left: 0;
  top: 72px;
  z-index: 9999;
  flex-direction: column;
  gap: 0;
  width: 250px;
  border: var(--border-1px);
  box-shadow: var(--shadow);
  background-color: var(--white);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}
.header__main .main-menu ul li .sub-menu.mega-menu {
  max-width: 1170px;
  width: 100%;
  left: 50%;
  top: 105px;
  transform: translateX(-50%) translateY(10px);
  padding: 30px;
}
.header__main .main-menu ul li .sub-menu.mega-menu li {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-around;
}
.header__main .main-menu ul li .sub-menu.menu-image .image {
  position: relative;
}
.header__main .main-menu ul li .sub-menu.menu-image .image::before {
  background-color: rgba(0, 0, 0, 0.5);
}
.header__main .main-menu ul li .sub-menu.menu-image .image h6 {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
}
.header__main .main-menu ul li .sub-menu.menu-image .image .btn__group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  margin-top: 20px;
}
.header__main .main-menu ul li .sub-menu.menu-image .image .btn__group .btn-one {
  color: var(--white) !important;
}
.header__main .main-menu ul li .sub-menu.menu-image .image:hover .btn__group {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.header__main .main-menu ul li .sub-menu li {
  width: 100%;
}
.header__main .main-menu ul li .sub-menu li:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.header__main .main-menu ul li .sub-menu li a {
  display: block;
  padding: 10px 20px;
  color: var(--heading-color) !important;
}
.header__main .main-menu ul li .sub-menu li a:hover {
  padding-left: 25px;
  color: var(--primary-color) !important;
}
.header__main .main-menu ul li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.header__main .main-menu ul li:hover:hover a {
  color: var(--primary-color);
}
.header__main .main-menu ul li:hover:hover i {
  transform: rotate(-180deg);
  color: var(--primary-color);
}
@media (max-width: 991px) {
  .header__main {
    padding: 15px 0;
  }
}
.header__main .bars i {
  font-size: 18px;
  cursor: pointer;
  display: inline-block;
  color: #eee7e7;
  padding: 10px;
  border-radius: 10px;
  border: var(--border-1px);
}
.header-two-area {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.header-two-area:after {
  display: none;
}
.header-two-area.menu-fixed {
  /*  background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);*/
  border-bottom: none;
}
.header-two-area .header__main .main-menu ul li a {
  color: #161616;
}
.header-two-area .header__main .bars i {
  color: #796c6c;
}
.header-three-area {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.header-three-area:after {
  display: none;
}
.header-three-area.menu-fixed {
  background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);
  border-bottom: none;
}
.header-three-area .header__main .main-menu ul li a {
  color: var(--white);
  position: relative;
}
.header-three-area .header__main .main-menu ul li a::after {
  position: absolute;
  content: "";
  background: linear-gradient(0.49deg, #3c72fc -126.52%, rgba(60, 114, 252, 0) 92.35%);
  width: 85px;/*-----------------------------------------------------------------
  
  Template Name: Gratech - IT Service HTML Template
  Author:  Gramentheme
  Author URI: https://themeforest.net/user/gramentheme/portfolio
  Developer: Kawser Ahmed Roni
  Version: 1.0.0
  Description: Gratech - IT Service HTML5 Template
  
  -------------------------------------------------------------------
  CSS TABLE OF CONTENTS
  -------------------------------------------------------------------
  
  01. abstracts
  1.01 --> mixins
  1.02 --> variable
  
  02. base
  2.01 --> typography
  2.02 --> animation
  2.03 --> responsive
  
  03. components
  3.01 --> buttons
  3.02 --> progress
  
  04. layout
  4.01 --> header
  4.02 --> banner
  4.03 --> section
  4.04 --> footer
  
  ------------------------------------------------------------------*/
  @import url("../../../../css2");
  :root {
    --kumbh: "Kumbh Sans", sans-serif;
    --primary-color: #00cccc;
    --primary10: rgba(60, 114, 252, 0.1);
    --gradient-bg: linear-gradient(90deg, #00cccc -10.59%, #00060c 300.59%);
    --secondary-color: #0f0d1d;
    --main-bg: #ffffff;
    --sub-bg: #f3f7fb;
    --heading-color: #0f0d1d;
    --paragraph: #585858;
    --span: #585858;
    --border: #e3e3e3;
    --white: #ffffff;
    --black: #000000;
    --border-1px: 1px solid #eaecf0;
    --border-2px: 2px solid #eaecf0;
    --transition: all 0.3s ease-in-out;
    --shadow: 0px 4px 25px 0px #0000000f;
  }
  
  :root[data-theme=dark] {
    --primary-color: #3c72fc;
    --primary10: rgba(60, 114, 252, 0.1);
    --gradient-bg: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%);
    --secondary-color: #0f0d1d;
    --main-bg: #151327;
    --sub-bg: #16142c;
    --heading-color: #fff;
    --paragraph: rgba(255, 255, 255, 0.8);
    --span: rgba(255, 255, 255, 0.8);
    --border: #e3e3e3;
    --white: #ffffff;
    --black: #000000;
  }
  
  :root[data-theme=dark] .light-area {
    --primary-color: #3c72fc;
    --primary10: rgba(60, 114, 252, 0.1);
    --gradient-bg: linear-gradient(90deg, #3c72fc -10.59%, #00060c 300.59%);
    --secondary-color: #0f0d1d;
    --main-bg: #ffffff;
    --sub-bg: #f3f7fb;
    --heading-color: #0f0d1d;
    --paragraph: #585858;
    --span: #585858;
    --border: #e3e3e3;
    --white: #ffffff;
    --black: #000000;
  }
  
  * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: var(--kumbh);
    color: var(--paragraph);
    background-color: var(--main-bg);
    line-height: 28px;
    font-weight: 400;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
    color: #006699;
    font-family: var(--kumbh);
  }
  
  h1 {
    font-size: 90px;
    font-weight: 700;
    line-height: 100px;
  }
  
  h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
  }
  @media (max-width: 767px) {
    h2 {
      font-size: 30px;
      line-height: 40px;
    }
  }
  
  h3 {
    font-size: 19px;
    line-height: 32px;
    font-weight: 600;
  }
  
  h4 {
    font-size: 20px;
    line-height: 32px;
    font-weight: 700;
  }
  
  h5 {
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
  }
  
  h6 {
    font-size: 14px;
    font-weight: 600;
  }
  
  p {
    margin: 0;
    padding: 0;
    line-height: 28px;
    font-size: 16px;
  }
  
  span {
    display: inline-block;
    color: var(--span);
  }
  
  a {
    text-decoration: none;
    display: inline-block;
    color: var(--heading-color);
    transition: var(--transition);
  }
  
  a:hover {
    color: var(--heading-color);
  }
  
  ul {
    margin: 0;
    padding: 0;
    text-decoration: none;
  }
  
  li {
    list-style: none;
  }
  
  button {
    border: none;
    background-color: transparent;
  }
  
  @media (max-width: 991px) {
    br {
      display: none;
    }
  }
  
  ::placeholder {
    color: var(--span);
  }
  
  ::selection {
    color: var(--white);
    background-color: var(--primary-color);
  }
  
  .mt-5 {
    margin-top: 5px;
  }
  
  .mt-10 {
    margin-top: 10px;
  }
  
  .mt-15 {
    margin-top: 15px;
  }
  
  .mt-20 {
    margin-top: 20px;
  }
  
  .mt-25 {
    margin-top: 25px;
  }
  
  .mt-30 {
    margin-top: 30px;
  }
  
  .mt-35 {
    margin-top: 35px;
  }
  
  .mt-40 {
    margin-top: 40px;
  }
  
  .mt-45 {
    margin-top: 45px;
  }
  
  .mt-50 {
    margin-top: 50px;
  }
  
  .mt-55 {
    margin-top: 55px;
  }
  
  .mt-60 {
    margin-top: 60px;
  }
  
  .mt-65 {
    margin-top: 65px;
  }
  
  .mt-70 {
    margin-top: 70px;
  }
  
  .mt-75 {
    margin-top: 75px;
  }
  
  .mt-80 {
    margin-top: 80px;
  }
  
  .mt-85 {
    margin-top: 85px;
  }
  
  .mt-90 {
    margin-top: 90px;
  }
  
  .mt-95 {
    margin-top: 95px;
  }
  
  .mt-100 {
    margin-top: 100px;
  }
  
  .mt-105 {
    margin-top: 105px;
  }
  
  .mt-110 {
    margin-top: 110px;
  }
  
  .mt-115 {
    margin-top: 115px;
  }
  
  .mt-120 {
    margin-top: 120px;
  }
  
  .mt-125 {
    margin-top: 125px;
  }
  
  .mt-130 {
    margin-top: 130px;
  }
  
  .mt-135 {
    margin-top: 135px;
  }
  
  .mt-140 {
    margin-top: 140px;
  }
  
  .mt-145 {
    margin-top: 145px;
  }
  
  .mt-150 {
    margin-top: 150px;
  }
  
  .mt-155 {
    margin-top: 155px;
  }
  
  .mt-160 {
    margin-top: 160px;
  }
  
  .mt-165 {
    margin-top: 165px;
  }
  
  .mt-170 {
    margin-top: 170px;
  }
  
  .mt-175 {
    margin-top: 175px;
  }
  
  .mt-180 {
    margin-top: 180px;
  }
  
  .mt-185 {
    margin-top: 185px;
  }
  
  .mt-190 {
    margin-top: 190px;
  }
  
  .mt-195 {
    margin-top: 195px;
  }
  
  .mt-200 {
    margin-top: 200px;
  }
  
  /*-- Margin Bottom --*/
  .mb-5 {
    margin-bottom: 5px;
  }
  
  .mb-10 {
    margin-bottom: 10px;
  }
  
  .mb-15 {
    margin-bottom: 15px;
  }
  
  .mb-20 {
    margin-bottom: 20px;
  }
  
  .mb-25 {
    margin-bottom: 25px;
  }
  
  .mb-30 {
    margin-bottom: 30px;
  }
  
  .mb-35 {
    margin-bottom: 35px;
  }
  
  .mb-40 {
    margin-bottom: 40px;
  }
  
  .mb-45 {
    margin-bottom: 45px;
  }
  
  .mb-50 {
    margin-bottom: 50px;
  }
  
  .mb-55 {
    margin-bottom: 55px;
  }
  
  .mb-60 {
    margin-bottom: 0px;
  }
  
  .mb-65 {
    margin-bottom: 65px;
  }
  
  .mb-70 {
    margin-bottom: 70px;
  }
  
  .mb-75 {
    margin-bottom: 75px;
  }
  
  .mb-80 {
    margin-bottom: 80px;
  }
  
  .mb-85 {
    margin-bottom: 85px;
  }
  
  .mb-90 {
    margin-bottom: 90px;
  }
  
  .mb-95 {
    margin-bottom: 95px;
  }
  
  .mb-100 {
    margin-bottom: 100px;
  }
  
  .mb-105 {
    margin-bottom: 105px;
  }
  
  .mb-110 {
    margin-bottom: 110px;
  }
  
  .mb-115 {
    margin-bottom: 115px;
  }
  
  .mb-120 {
    margin-bottom: 120px;
  }
  
  .mb-125 {
    margin-bottom: 125px;
  }
  
  .mb-130 {
    margin-bottom: 130px;
  }
  
  .mb-135 {
    margin-bottom: 135px;
  }
  
  .mb-140 {
    margin-bottom: 140px;
  }
  
  .mb-145 {
    margin-bottom: 145px;
  }
  
  .mb-150 {
    margin-bottom: 150px;
  }
  
  .mb-155 {
    margin-bottom: 155px;
  }
  
  .mb-160 {
    margin-bottom: 160px;
  }
  
  .mb-165 {
    margin-bottom: 165px;
  }
  
  .mb-170 {
    margin-bottom: 170px;
  }
  
  .mb-175 {
    margin-bottom: 175px;
  }
  
  .mb-180 {
    margin-bottom: 180px;
  }
  
  .mb-185 {
    margin-bottom: 185px;
  }
  
  .mb-190 {
    margin-bottom: 190px;
  }
  
  .mb-195 {
    margin-bottom: 195px;
  }
  
  .mb-200 {
    margin-bottom: 200px;
  }
  
  .ml-5 {
    margin-left: 5px;
  }
  
  .ml-10 {
    margin-left: 10px;
  }
  
  .ml-15 {
    margin-left: 15px;
  }
  
  .ml-20 {
    margin-left: 20px;
  }
  
  .ml-25 {
    margin-left: 25px;
  }
  
  .ml-30 {
    margin-left: 30px;
  }
  
  .ml-35 {
    margin-left: 35px;
  }
  
  .ml-40 {
    margin-left: 40px;
  }
  
  .ml-45 {
    margin-left: 45px;
  }
  
  .ml-50 {
    margin-left: 50px;
  }
  
  .ml-55 {
    margin-left: 55px;
  }
  
  .ml-60 {
    margin-left: 60px;
  }
  
  .ml-65 {
    margin-left: 65px;
  }
  
  .ml-70 {
    margin-left: 70px;
  }
  
  .ml-75 {
    margin-left: 75px;
  }
  
  .ml-80 {
    margin-left: 80px;
  }
  
  .ml-85 {
    margin-left: 85px;
  }
  
  .ml-90 {
    margin-left: 90px;
  }
  
  .ml-95 {
    margin-left: 95px;
  }
  
  .ml-100 {
    margin-left: 100px;
  }
  
  .ml-105 {
    margin-left: 105px;
  }
  
  .ml-110 {
    margin-left: 110px;
  }
  
  .ml-115 {
    margin-left: 115px;
  }
  
  .ml-120 {
    margin-left: 120px;
  }
  
  .ml-125 {
    margin-left: 125px;
  }
  
  .ml-130 {
    margin-left: 130px;
  }
  
  .ml-135 {
    margin-left: 135px;
  }
  
  .ml-140 {
    margin-left: 140px;
  }
  
  .ml-145 {
    margin-left: 145px;
  }
  
  .ml-150 {
    margin-left: 150px;
  }
  
  .ml-155 {
    margin-left: 155px;
  }
  
  .ml-160 {
    margin-left: 160px;
  }
  
  .ml-165 {
    margin-left: 165px;
  }
  
  .ml-170 {
    margin-left: 170px;
  }
  
  .ml-175 {
    margin-left: 175px;
  }
  
  .ml-180 {
    margin-left: 180px;
  }
  
  .ml-185 {
    margin-left: 185px;
  }
  
  .ml-190 {
    margin-left: 190px;
  }
  
  .ml-195 {
    margin-left: 195px;
  }
  
  .ml-200 {
    margin-left: 200px;
  }
  
  .mr-5 {
    margin-right: 5px;
  }
  
  .mr-10 {
    margin-right: 10px;
  }
  
  .mr-15 {
    margin-right: 15px;
  }
  
  .mr-20 {
    margin-right: 20px;
  }
  
  .mr-25 {
    margin-right: 25px;
  }
  
  .mr-30 {
    margin-right: 30px;
  }
  
  .mr-35 {
    margin-right: 35px;
  }
  
  .mr-40 {
    margin-right: 40px;
  }
  
  .mr-45 {
    margin-right: 45px;
  }
  
  .mr-50 {
    margin-right: 50px;
  }
  
  .mr-55 {
    margin-right: 55px;
  }
  
  .mr-60 {
    margin-right: 60px;
  }
  
  .mr-65 {
    margin-right: 65px;
  }
  
  .mr-70 {
    margin-right: 70px;
  }
  
  .mr-75 {
    margin-right: 75px;
  }
  
  .mr-80 {
    margin-right: 80px;
  }
  
  .mr-85 {
    margin-right: 85px;
  }
  
  .mr-90 {
    margin-right: 90px;
  }
  
  .mr-95 {
    margin-right: 95px;
  }
  
  .mr-100 {
    margin-right: 100px;
  }
  
  .mr-105 {
    margin-right: 105px;
  }
  
  .mr-110 {
    margin-right: 110px;
  }
  
  .mr-115 {
    margin-right: 115px;
  }
  
  .mr-120 {
    margin-right: 120px;
  }
  
  .mr-125 {
    margin-right: 125px;
  }
  
  .mr-130 {
    margin-right: 130px;
  }
  
  .mr-135 {
    margin-right: 135px;
  }
  
  .mr-140 {
    margin-right: 140px;
  }
  
  .mr-145 {
    margin-right: 145px;
  }
  
  .mr-150 {
    margin-right: 150px;
  }
  
  .mr-155 {
    margin-right: 155px;
  }
  
  .mr-160 {
    margin-right: 160px;
  }
  
  .mr-165 {
    margin-right: 165px;
  }
  
  .mr-170 {
    margin-right: 170px;
  }
  
  .mr-175 {
    margin-right: 175px;
  }
  
  .mr-180 {
    margin-right: 180px;
  }
  
  .mr-185 {
    margin-right: 185px;
  }
  
  .mr-190 {
    margin-right: 190px;
  }
  
  .mr-195 {
    margin-right: 195px;
  }
  
  .mr-200 {
    margin-right: 200px;
  }
  
  .pt-5 {
    padding-top: 5px;
  }
  
  .pt-10 {
    padding-top: 10px;
  }
  
  .pt-15 {
    padding-top: 15px;
  }
  
  .pt-20 {
    padding-top: 20px;
  }
  
  .pt-25 {
    padding-top: 25px;
  }
  
  .pt-30 {
    padding-top: 30px;
  }
  
  .pt-35 {
    padding-top: 35px;
  }
  
  .pt-40 {
    padding-top: 40px;
  }
  
  .pt-45 {
    padding-top: 45px;
  }
  
  .pt-50 {
    padding-top: 50px;
  }
  
  .pt-55 {
    padding-top: 55px;
  }
  
  .pt-60 {
    padding-top: 60px;
  }
  
  .pt-65 {
    padding-top: 65px;
  }
  
  .pt-70 {
    padding-top: 70px;
  }
  
  .pt-75 {
    padding-top: 75px;
  }
  
  .pt-80 {
    padding-top: 80px;
  }
  
  .pt-85 {
    padding-top: 85px;
  }
  
  .pt-90 {
    padding-top: 90px;
  }
  
  .pt-95 {
    padding-top: 95px;
  }
  
  .pt-100 {
    padding-top: 100px;
  }
  
  .pt-105 {
    padding-top: 105px;
  }
  
  .pt-110 {
    padding-top: 110px;
  }
  
  .pt-115 {
    padding-top: 115px;
  }
  
  .pt-120 {
    padding-top: 84px;
  }
  
  .pt-125 {
    padding-top: 125px;
  }
  
  .pt-130 {
    padding-top: 130px;
  }
  
  .pt-135 {
    padding-top: 135px;
  }
  
  .pt-140 {
    padding-top: 140px;
  }
  
  .pt-145 {
    padding-top: 145px;
  }
  
  .pt-150 {
    padding-top: 150px;
  }
  
  .pt-155 {
    padding-top: 155px;
  }
  
  .pt-160 {
    padding-top: 160px;
  }
  
  .pt-165 {
    padding-top: 165px;
  }
  
  .pt-170 {
    padding-top: 170px;
  }
  
  .pt-175 {
    padding-top: 175px;
  }
  
  .pt-180 {
    padding-top: 180px;
  }
  
  .pt-185 {
    padding-top: 185px;
  }
  
  .pt-190 {
    padding-top: 190px;
  }
  
  .pt-195 {
    padding-top: 195px;
  }
  
  .pt-200 {
    padding-top: 200px;
  }
  
  .pb-5 {
    padding-bottom: 5px;
  }
  
  .pb-10 {
    padding-bottom: 10px;
  }
  
  .pb-15 {
    padding-bottom: 15px;
  }
  
  .pb-20 {
    padding-bottom: 20px;
  }
  
  .pb-25 {
    padding-bottom: 25px;
  }
  
  .pb-30 {
    padding-bottom: 30px;
  }
  
  .pb-35 {
    padding-bottom: 35px;
  }
  
  .pb-40 {
    padding-bottom: 40px;
  }
  
  .pb-45 {
    padding-bottom: 45px;
  }
  
  .pb-50 {
    padding-bottom: 50px;
  }
  
  .pb-55 {
    padding-bottom: 55px;
  }
  
  .pb-60 {
    padding-bottom: 60px;
  }
  
  .pb-65 {
    padding-bottom: 65px;
  }
  
  .pb-70 {
    padding-bottom: 70px;
  }
  
  .pb-75 {
    padding-bottom: 75px;
  }
  
  .pb-80 {
    padding-bottom: 80px;
  }
  
  .pb-85 {
    padding-bottom: 85px;
  }
  
  .pb-90 {
    padding-bottom: 90px;
  }
  
  .pb-95 {
    padding-bottom: 95px;
  }
  
  .pb-100 {
    padding-bottom: 100px;
  }
  
  .pb-105 {
    padding-bottom: 105px;
  }
  
  .pb-110 {
    padding-bottom: 110px;
  }
  
  .pb-115 {
    padding-bottom: 115px;
  }
  
  .pb-120 {
    padding-bottom: 90px;
  }
  
  .pb-125 {
    padding-bottom: 125px;
  }
  
  .pb-130 {
    padding-bottom: 130px;
  }
  
  .pb-135 {
    padding-bottom: 135px;
  }
  
  .pb-140 {
    padding-bottom: 140px;
  }
  
  .pb-145 {
    padding-bottom: 145px;
  }
  
  .pb-150 {
    padding-bottom: 150px;
  }
  
  .pb-155 {
    padding-bottom: 155px;
  }
  
  .pb-160 {
    padding-bottom: 160px;
  }
  
  .pb-165 {
    padding-bottom: 165px;
  }
  
  .pb-170 {
    padding-bottom: 170px;
  }
  
  .pb-175 {
    padding-bottom: 175px;
  }
  
  .pb-180 {
    padding-bottom: 180px;
  }
  
  .pb-185 {
    padding-bottom: 185px;
  }
  
  .pb-190 {
    padding-bottom: 190px;
  }
  
  .pb-195 {
    padding-bottom: 195px;
  }
  
  .pb-200 {
    padding-bottom: 200px;
  }
  
  .pl-5 {
    padding-left: 5px;
  }
  
  .pl-10 {
    padding-left: 10px;
  }
  
  .pl-15 {
    padding-left: 15px;
  }
  
  .pl-20 {
    padding-left: 20px;
  }
  
  .pl-25 {
    padding-left: 25px;
  }
  
  .pl-30 {
    padding-left: 30px;
  }
  
  .pl-35 {
    padding-left: 35px;
  }
  
  .pl-40 {
    padding-left: 40px;
  }
  
  .pl-45 {
    padding-left: 45px;
  }
  
  .pl-50 {
    padding-left: 50px;
  }
  
  .pl-55 {
    padding-left: 55px;
  }
  
  .pl-60 {
    padding-left: 60px;
  }
  
  .pl-65 {
    padding-left: 65px;
  }
  
  .pl-70 {
    padding-left: 70px;
  }
  
  .pl-75 {
    padding-left: 75px;
  }
  
  .pl-80 {
    padding-left: 80px;
  }
  
  .pl-85 {
    padding-left: 85px;
  }
  
  .pl-90 {
    padding-left: 90px;
  }
  
  .pl-95 {
    padding-left: 95px;
  }
  
  .pl-100 {
    padding-left: 100px;
  }
  
  .pl-105 {
    padding-left: 105px;
  }
  
  .pl-110 {
    padding-left: 110px;
  }
  
  .pl-115 {
    padding-left: 115px;
  }
  
  .pl-120 {
    padding-left: 120px;
  }
  
  .pl-125 {
    padding-left: 125px;
  }
  
  .pl-130 {
    padding-left: 130px;
  }
  
  .pl-135 {
    padding-left: 135px;
  }
  
  .pl-140 {
    padding-left: 140px;
  }
  
  .pl-145 {
    padding-left: 145px;
  }
  
  .pl-150 {
    padding-left: 150px;
  }
  
  .pl-155 {
    padding-left: 155px;
  }
  
  .pl-160 {
    padding-left: 160px;
  }
  
  .pl-165 {
    padding-left: 165px;
  }
  
  .pl-170 {
    padding-left: 170px;
  }
  
  .pl-175 {
    padding-left: 175px;
  }
  
  .pl-180 {
    padding-left: 180px;
  }
  
  .pl-185 {
    padding-left: 185px;
  }
  
  .pl-190 {
    padding-left: 190px;
  }
  
  .pl-195 {
    padding-left: 195px;
  }
  
  .pl-200 {
    padding-left: 200px;
  }
  
  .pr-5 {
    padding-right: 5px;
  }
  
  .pr-10 {
    padding-right: 10px;
  }
  
  .pr-15 {
    padding-right: 15px;
  }
  
  .pr-20 {
    padding-right: 20px;
  }
  
  .pr-25 {
    padding-right: 25px;
  }
  
  .pr-30 {
    padding-right: 30px;
  }
  
  .pr-35 {
    padding-right: 35px;
  }
  
  .pr-40 {
    padding-right: 40px;
  }
  
  .pr-45 {
    padding-right: 45px;
  }
  
  .pr-50 {
    padding-right: 50px;
  }
  
  .pr-55 {
    padding-right: 55px;
  }
  
  .pr-60 {
    padding-right: 60px;
  }
  
  .pr-65 {
    padding-right: 65px;
  }
  
  .pr-70 {
    padding-right: 70px;
  }
  
  .pr-75 {
    padding-right: 75px;
  }
  
  .pr-80 {
    padding-right: 80px;
  }
  
  .pr-85 {
    padding-right: 85px;
  }
  
  .pr-90 {
    padding-right: 90px;
  }
  
  .pr-95 {
    padding-right: 95px;
  }
  
  .pr-100 {
    padding-right: 100px;
  }
  
  .pr-105 {
    padding-right: 105px;
  }
  
  .pr-110 {
    padding-right: 110px;
  }
  
  .pr-115 {
    padding-right: 115px;
  }
  
  .pr-120 {
    padding-right: 120px;
  }
  
  .pr-125 {
    padding-right: 125px;
  }
  
  .pr-130 {
    padding-right: 130px;
  }
  
  .pr-135 {
    padding-right: 135px;
  }
  
  .pr-140 {
    padding-right: 140px;
  }
  
  .pr-145 {
    padding-right: 145px;
  }
  
  .pr-150 {
    padding-right: 150px;
  }
  
  .pr-155 {
    padding-right: 155px;
  }
  
  .pr-160 {
    padding-right: 160px;
  }
  
  .pr-165 {
    padding-right: 165px;
  }
  
  .pr-170 {
    padding-right: 170px;
  }
  
  .pr-175 {
    padding-right: 175px;
  }
  
  .pr-180 {
    padding-right: 180px;
  }
  
  .pr-185 {
    padding-right: 185px;
  }
  
  .pr-190 {
    padding-right: 190px;
  }
  
  .pr-195 {
    padding-right: 195px;
  }
  
  .pr-200 {
    padding-right: 200px;
  }
  
  @media (max-width: 767px) {
    .pt-120 {
      padding-top: 60px;
    }
    .pb-120 {
      padding-bottom: 60px;
    }
    .mt-120 {
      margin-top: 60px;
    }
    .mb-120 {
      margin-bottom: 60px;
    }
    .pt-100 {
      padding-top: 50px;
    }
    .pb-100 {
      padding-bottom: 50px;
    }
    .mt-100 {
      margin-top: 50px;
    }
    .mb-100 {
      margin-bottom: 50px;
    }
    .pt-60 {
      padding-top: 30px;
    }
    .pb-60 {
      padding-bottom: 30px;
    }
    .mt-60 {
      margin-top: 30px;
    }
    .mb-60 {
      margin-bottom: 30px;
    }
  }
  .bor {
    border: 1px solid var(--border);
  }
  
  .bor-top {
    border-top: 1px solid var(--border);
  }
  
  .bor-left {
    border-left: 1px solid var(--border);
  }
  
  .bor-bottom {
    border-bottom: 1px solid var(--border);
  }
  
  .bor-right {
    border-right: 1px solid var(--border);
  }
  
  .border-none {
    border: none !important;
  }
  
  .text-justify {
    text-align: justify;
  }
  
  .image img {
    width: 100%;
  }
  
  .primary-color {
    color: var(--primary-color) !important;
  }
  
  .primary-hover:hover {
    color: var(--primary-color) !important;
  }
  
  .primary-bg {
    background-color: var(--primary-color) !important;
  }
  
  .gradient-bg {
    background: var(--gradient-bg) !important;
  }
  
  .secondary-color {
    color: var(--secondary-color);
  }
  
  .secondary-bg {
    background-color: var(--secondary-color);
  }
  
  .sub-bg {
    background-color: var(--sub-bg);
  }
  
  .sm-font {
    font-size: 14px !important;
  }
  
  .bg-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .transition {
    transition: var(--transition);
  }
  
  .fw-600 {
    font-weight: 600 !important;
  }
  
  .fw-700 {
    font-weight: 700 !important;
  }
  
  .overlay, .banner-video__wrp, .brand-three-area, .case__image, .banner__inner-page, .header__main .main-menu ul li .sub-menu.menu-image .image {
    position: relative;
  }
  .overlay::before, .banner-video__wrp::before, .brand-three-area::before, .case__image::before, .banner__inner-page::before, .header__main .main-menu ul li .sub-menu.menu-image .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .nice-select {
    width: 100%;
    border-radius: 10px;
    height: 50px;
    line-height: 50px;
  }
  .nice-select:focus {
    border: 1px solid var(--primary-color);
  }
  .nice-select .list {
    width: 100%;
  }
  
  .star i {
    color: var(--primary-color);
  }
  .star i.disable {
    color: var(--span);
    opacity: 40%;
  }
  
  .pegi {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .pegi a {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background-color: var(--sub-bg);
    color: var(--heading-color);
    font-weight: 700;
    border-radius: 0;
  }
  .pegi a:hover {
    background-color: var(--primary-color);
    color: var(--white);
  }
  .pegi a:hover i {
    color: var(--white) !important;
  }
  .pegi a.active {
    background-color: var(--primary-color);
    color: var(--white);
  }
  
  .accordion .accordion-item {
    border: var(--border-1px);
    border-radius: 0px;
    margin-bottom: 10px;
  }
  .accordion .accordion-item.dark-mode {
    background-color: var(--secondary-color);
  }
  .accordion .accordion-item h2 button {
    font-size: 15px;
    line-height: 28px;
    font-weight: 700;
    box-shadow: none;
    border-radius: 0 !important;
    padding: 20px 30px;
  }
  .accordion .accordion-item .accordion-body {
    padding: 20px 30px;
    padding-top: 0;
  }
  .accordion .accordion-item .accordion-body p {
    color: var(--paragraph);
  }
  .accordion .accordion-button {
    background-color: transparent;
    color: var(--primary-color);
  }
  .accordion .accordion-button::after {
    display: none;
  }
  .accordion .accordion-button::before {
    position: absolute;
    content: "\f068";
    font-family: "Font Awesome 6 Pro";
    font-weight: 700;
    top: 20px;
    right: 25px;
    font-size: 15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 0px;
    color: var(--white);
    background-color: var(--primary-color);
    text-align: center;
    transition: var(--transition);
  }
  .accordion .accordion-button.collapsed {
    background-color: transparent;
    color: var(--heading-color);
  }
  .accordion .accordion-button.collapsed::before {
    content: "+";
    background-color: var(--sub-bg);
    color: var(--primary-color);
  }
  
  .search-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(60, 114, 252, 0.9);
  }
  .search-wrap .search-inner {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .search-wrap .search-cell {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
  }
  .search-wrap .search-field-holder {
    width: 50%;
    margin: auto;
    position: relative;
    animation: slideInUp 0.3s;
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .search-wrap .search-field-holder {
      width: 70%;
    }
  }
  @media (max-width: 575px) {
    .search-wrap .search-field-holder {
      width: 80%;
    }
  }
  .search-wrap .main-search-input {
    width: 100%;
    height: 70px;
    border: 0;
    padding: 0 50px;
    background: transparent;
    font-size: 25px;
    color: var(--white);
    border-bottom: 1px solid var(--white);
    text-align: center;
    letter-spacing: 2px;
  }
  
  @media (max-width: 575px) {
    .search-wrap .main-search-input {
      height: 50px;
      padding: 0 0;
      line-height: 50px;
      font-size: 18px;
    }
  }
  .search-wrap input.form-control,
  .search-wrap input.form-control:focus {
    background-color: var(--white);
  }
  
  input.main-search-input::placeholder {
    color: var(--white);
    opacity: 1;
    font-size: 25px;
  }
  
  @media (max-width: 575px) {
    input.main-search-input::placeholder {
      font-size: 18px;
    }
  }
  .search-close {
    position: absolute;
    top: 50px;
    right: 50px;
    font-size: 30px;
    color: var(--white);
    cursor: pointer;
  }
  
  .pace {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 99999999999999;
    position: fixed;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    border: 0px;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
  .pace .pace-progress {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 300px;
    position: fixed;
    z-index: 99999999999999;
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: var(--primary-color);
  }
  
  .pace.pace-inactive {
    width: 100vw;
    opacity: 0;
  }
  .pace.pace-inactive .pace-progress {
    max-width: 100vw;
  }
  
  #preloader {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    z-index: 9999999;
  }
  #preloader:after {
    content: "";
    position: fixed;
    left: 0;
    height: 50%;
    width: 100%;
    background: var(--black);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    bottom: 0;
  }
  #preloader:before {
    content: "";
    position: fixed;
    left: 0;
    height: 50%;
    width: 100%;
    background: var(--black);
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    top: 0;
  }
  
  #preloader.isdone {
    visibility: hidden;
    -webkit-transition-delay: 1.5s;
    -o-transition-delay: 1.5s;
    transition-delay: 1.5s;
  }
  #preloader.isdone:after {
    height: 0;
    -webkit-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
    -o-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
    transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
  }
  #preloader.isdone:before {
    height: 0;
    -webkit-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
    -o-transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
    transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
  }
  
  .loading {
    position: fixed;
    width: 100%;
    text-align: center;
    left: 50%;
    top: calc(50% - 40px);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-weight: 400;
    font-size: 24px;
    text-transform: lowercase;
    letter-spacing: 5px;
    z-index: 9999999999;
  }
  .loading span {
    -webkit-animation: loading 1.4s infinite alternate;
    animation: loading 1.4s infinite alternate;
  }
  .loading span:nth-child(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  .loading span:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  .loading span:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .loading span:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  .loading span:nth-child(5) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  .loading span:nth-child(6) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
  }
  .loading span:nth-child(7) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
  }
  
  .loading.isdone {
    top: 50%;
    opacity: 0;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    -webkit-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
    visibility: hidden;
  }
  
  @-webkit-keyframes loading {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes loading {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .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(--primary-color);
    -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-inner.cursor-hover {
    margin-left: -35px;
    margin-top: -35px;
    width: 70px;
    height: 70px;
    background-color: var(--primary-color);
    opacity: 0.3;
  }
  
  .cursor-outer {
    margin-left: -12px;
    margin-top: -12px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--primary-color);
    -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;
  }
  
  .cursor-outer.cursor-hover {
    opacity: 0;
  }
  
  .scroll-up {
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px var(--border);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    position: fixed;
    right: 25px;
    bottom: 35px;
    height: 50px;
    width: 50px;
    transition: var(--transition);
  }
  .scroll-up::after {
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    content: "\f176";
    text-align: center;
    line-height: 50px;
    font-weight: 700;
    font-size: 18px;
    color: var(--primary-color);
    left: 0;
    top: 0;
    height: 50px;
    width: 50px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: var(--transition);
  }
  .scroll-up svg path {
    fill: none;
  }
  .scroll-up svg.scroll-circle path {
    stroke: var(--primary-color);
    stroke-width: 4px;
    box-sizing: border-box;
    transition: var(--transition);
  }
  .scroll-up.active-scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .btn-one {
    padding: 15px 25px;
    background: var(--gradient-bg);
    font-weight: 600;
    color: var(--white);
    transition: var(--transition);
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  .btn-one i {
    margin-left: 8px;
    transition: var(--transition);
  }
  @media (max-width: 575px) {
    .btn-one i {
      margin-left: 3px;
      font-size: 12px;
    }
  }
  @media (max-width: 575px) {
    .btn-one {
      padding: 8px 18px;
      font-size: 14px;
    }
  }
  .btn-one::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 0;
    content: "";
    background-color: var(--secondary-color);
    z-index: -1;
    transition: var(--transition);
  }
  .btn-one::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 0;
    content: "";
    background-color: var(--secondary-color);
    z-index: -1;
    transition: var(--transition);
  }
  .btn-one:hover {
    color: var(--white);
  }
  .btn-one:hover::before {
    height: 100%;
  }
  .btn-one:hover::after {
    height: 100%;
  }
  .btn-one:hover i {
    transform: translate(5px);
  }
  
  .read-more-btn {
    text-transform: capitalize;
    font-weight: 600;
    color: var(--paragraph);
  }
  .read-more-btn i {
    margin-left: 5px;
    transition: var(--transition);
  }
  .read-more-btn:hover {
    color: var(--primary-color);
  }
  .read-more-btn:hover i {
    color: var(--primary-color);
    margin-left: 10px;
  }
  
  .arry-prev, .arry-next {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    color: var(--primary-color);
    transition: var(--transition);
    border: 1px solid var(--primary-color);
    font-size: 20px;
  }
  .arry-prev:hover, .arry-next:hover {
    background-color: var(--primary-color);
    color: var(--white);
  }
  .arry-prev.active, .active.arry-next {
    background-color: var(--primary-color);
    color: var(--white);
  }
  
  .dot .swiper-pagination-bullet, .dot-light .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: 0.6s;
    background-color: transparent;
    opacity: 1;
    position: relative;
    border: 1px solid transparent;
  }
  .dot .swiper-pagination-bullet::before, .dot-light .swiper-pagination-bullet::before {
    position: absolute;
    content: "";
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color);
    transition: 0.6s;
  }
  .dot .swiper-pagination-bullet.swiper-pagination-bullet-active, .dot-light .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: 1px solid var(--primary-color);
  }
  .dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before, .dot-light .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    background-color: var(--primary-color);
  }
  
  .dot-light .swiper-pagination-bullet {
    background-color: transparent;
    border: 1px solid transparent;
  }
  .dot-light .swiper-pagination-bullet::before {
    background-color: var(--white);
  }
  .dot-light .swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  .dot-light .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    background-color: var(--primary-color);
  }
  
  .video-btn {
    position: relative;
    text-align: center;
    display: inline-block;
    z-index: 2;
  }
  .video-btn a {
    position: relative;
    color: var(--white);
    font-size: 20px;
    z-index: 1;
    background: var(--gradient-bg);
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    display: block;
  }
  .video-btn.video-pulse::after, .video-btn.video-pulse::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 10px solid var(--primary-color);
    opacity: 0.7;
    left: 0;
    top: 0;
    border-radius: 50%;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: video-animation;
    animation-name: video-animation;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .video-btn.video-pulse::before {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  
  .progress-area .progress {
    background-color: var(--border);
    height: 12px;
    border-radius: 0px;
  }
  .progress-area .progress.dark-mode {
    background-color: var(--secondary-color);
  }
  .progress-area .progress .progress-bar {
    background-color: var(--primary-color);
  }
  .progress__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .progress__title span {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
  }
  
  .logo {
    display: block;
    width: 196px;
  }
  .logo img {
    width: 100%;
  }
  
  .header-top {
    padding: 16px 0;
    overflow: hidden;
    background-color: var(--heading-color);
    
  }
  .header-top .header-top-wrp {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-top .header-top-wrp .info {
    color: var(--white);
  }
  .header-top .header-top-wrp .info span {
    color: var(--white);
  }
  .header-top .header-top-wrp .info a {
    transition: var(--transition);
    color: var(--white);
    font-size: 15px;
  }
  .header-top .header-top-wrp .info a:hover {
    color: var(--primary-color);
  }
  .header-top .header-top-wrp .info i {
    color: var(--primary-color);
    padding-right: 5px;
  }
  .header-top .header-top-wrp .info li {
    float: left;
    line-height: 0;
  }
  .header-top .header-top-wrp .link-info {
    position: relative;
    z-index: 2;
  }
  .header-top .header-top-wrp .link-info li {
    float: left;
    line-height: 0;
  }
  .header-top .header-top-wrp .link-info li a {
    width: 37px;
    color: var(--white);
    text-align: center;
  }
  .header-top .header-top-wrp .link-info li a:hover {
    color: var(--primary-color);
  }
  
  .header-area {
    position: relative;
  }
  .header-area::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    background: linear-gradient(270deg, #3c72fc 6.32%, #00060c 216.42%);
    height: 100%;
    content: "";
    z-index: -1;
    clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
  }
  @media (max-width: 1199px) {
    .header-area::after {
      width: 25%;
    }
  }
  @media (max-width: 991px) {
    .header-area::after {
      width: 30%;
    }
  }
  @media (max-width: 767px) {
    .header-area::after {
      width: 40%;
    }
  }
  @media (max-width: 575px) {
    .header-area::after {
      width: 50%;
    }
  }
  @media (max-width: 450px) {
    .header-area::after {
      width: 70%;
    }
  }
  .header-area.menu-fixed {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: var(--white);
    z-index: 999;
    box-shadow: var(--shadow);
  }
  .header-area.menu-fixed .mega-menu {
    top: 105px !important;
  }
  .header__container {
    max-width: 1350px;
    padding: 0 15px;
    /*  background-color: #f9f9f6;*/
  }
  .header__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .header__main .main-menu ul {
    display: flex;
    align-items: center;
    gap: 35px;
  }
  .header__main .main-menu ul li {
    position: relative;
  }
  .header__main .main-menu ul li.has-megamenu {
    position: static;
  }
  .header__main .main-menu ul li.has-megamenu:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0px);
  }
  .header__main .main-menu ul li a {
    font-weight: 600;
    padding: 40px 0;
  }
  .header__main .main-menu ul li a i {
    font-size: 12px;
    transition: var(--transition);
  }
  .header__main .main-menu ul li .sub-menu {
    position: absolute;
    left: 0;
    top: 105px;
    z-index: 99;
    flex-direction: column;
    /* gap: 0; */
    width: 250px;
    border: var(--border-1px);
    box-shadow: var(--shadow);
    background-color: var(--white);
    transition: var(--transition);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  .header__main .main-menu ul li .sub-menu.mega-menu {
    max-width: 1170px;
    width: 100%;
    left: 50%;
    top: 105px;
    transform: translateX(-50%) translateY(10px);
    padding: 30px;
  }
  .header__main .main-menu ul li .sub-menu.mega-menu li {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-around;
  }
  .header__main .main-menu ul li .sub-menu.menu-image .image {
    position: relative;
  }
  .header__main .main-menu ul li .sub-menu.menu-image .image::before {
    background-color: rgba(0, 0, 0, 0.5);
  }
  .header__main .main-menu ul li .sub-menu.menu-image .image h6 {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
  }
  .header__main .main-menu ul li .sub-menu.menu-image .image .btn__group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    margin-top: 20px;
  }
  .header__main .main-menu ul li .sub-menu.menu-image .image .btn__group .btn-one {
    color: var(--white) !important;
  }
  .header__main .main-menu ul li .sub-menu.menu-image .image:hover .btn__group {
    opacity: 1;
    visibility: visible;
    margin-top: 0;
  }
  .header__main .main-menu ul li .sub-menu li {
    width: 100%;
  }
  .header__main .main-menu ul li .sub-menu li:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }
  .header__main .main-menu ul li .sub-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--heading-color) !important;
  }
  .header__main .main-menu ul li .sub-menu li a:hover {
    padding-left: 25px;
    color: var(--primary-color) !important;
  }
  .header__main .main-menu ul li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }
  .header__main .main-menu ul li:hover:hover a {
    color: var(--primary-color);
  }
  .header__main .main-menu ul li:hover:hover i {
    transform: rotate(-180deg);
    color: var(--primary-color);
  }
  @media (max-width: 991px) {
    .header__main {
      padding: 15px 0;
    }
  }
  .header__main .bars i {
    font-size: 18px;
    cursor: pointer;
    display: inline-block;
    color: var(--paragraph);
    padding: 10px;
    border-radius: 10px;
    border: var(--border-1px);
  }
  .header-two-area {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .header-two-area:after {
    display: none;
  }
  .header-two-area.menu-fixed {
    background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);
    border-bottom: none;
  }
  .header-two-area .header__main .main-menu ul li a {
    color: #161616;
  }
  .header-two-area .header__main .bars i {
    color: var(--white);
  }
  .header-three-area {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .header-three-area:after {
    display: none;
  }
  .header-three-area.menu-fixed {
    background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);
    border-bottom: none;
  }
  .header-three-area .header__main .main-menu ul li a {
    color: var(--white);
    position: relative;
  }
  .header-three-area .header__main .main-menu ul li a::after {
    position: absolute;
    content: "";
    background: linear-gradient(0.49deg, #3c72fc -126.52%, rgba(60, 114, 252, 0) 92.35%);
    width: 85px;
    height: 100%;
    bottom: 0;
    left: -20px;
    opacity: 0;
    visibility: hidden;
  }
  .header-three-area .header__main .main-menu ul li a.search-trigger::after {
    display: none;
  }
  .header-three-area .header__main .main-menu ul li:hover a {
    color: var(--white);
  }
  .header-three-area .header__main .main-menu ul li:hover a::after {
    opacity: 1;
    visibility: visible;
  }
  .header-three-area .header__main .main-menu .sub-menu {
    left: -20px;
  }
  .header-three-area .header__main .main-menu .sub-menu a::after {
    display: none;
  }
  .header-three-area .header__main .bars i {
    color: var(--white);
  }
  
  .mean-nav .mega-menu .image {
    padding: 20px;
    border: var(--border-1px);
    border-radius: 8px;
    margin-bottom: 20px;
    position: relative;
  }
  .mean-nav .mega-menu .image h6 {
    margin-top: 20px;
  }
  .mean-nav .btn__group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .mean-nav .btn__group a {
    text-align: center !important;
    width: 100% !important;
  }
  
  .sidebar-area {
    position: fixed;
    top: 0;
    right: 0px;
    width: 400px;
    height: 100%;
    background-color: var(--heading-color);
    padding: 40px;
    padding-top: 30px;
    z-index: 9999;
    transition: var(--transition);
    overflow: hidden;
    overflow-y: auto;
  }
  @media (max-width: 575px) {
    .sidebar-area {
      width: 350px;
    }
  }
  .sidebar-area p {
    color: var(--white);
  }
  .sidebar-area .info {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
  .sidebar-area .info li {
    font-size: 15px;
  }
  .sidebar-area .info li i {
    margin-right: 8px;
  }
  .sidebar-area .info li a {
    color: var(--white);
  }
  .sidebar-area .sidebar__overlay {
    position: fixed;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .sidebar-area button {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    transition: var(--transition);
  }
  .sidebar-area button:hover {
    transform: rotate(90deg);
  }
  .sidebar-area .social-icon a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--primary-color);
    margin-right: 10px;
  }
  .sidebar-area .social-icon a:hover {
    background-color: var(--primary-color);
    color: var(--heading-color);
    border: 1px solid var(--primary-color);
  }
  .sidebar-area.sidebar__hide {
    visibility: hidden;
    opacity: 0;
    right: -30px;
  }
  .sidebar-area .sidebar__search {
    position: relative;
  }
  .sidebar-area .sidebar__search input {
    width: 100%;
    padding: 8px 20px;
    padding-right: 40px;
  }
  .sidebar-area .sidebar__search i {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    color: var(--heading-color);
  }
  
  .mobile-menu .meanmenu-reveal {
    display: none !important;
  }
  .mobile-menu.mean-container .mean-nav > ul {
    width: 100%;
    display: block !important;
  }
  .mobile-menu ul li a i {
    display: none;
  }
  
  .banner-area, .banner-two-area {
    overflow: hidden;
    position: relative;
  }
  .banner__dot-wrp {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%);
    z-index: 2;
  }
  .banner__shape-left1 {
    position: absolute;
    top: 30px;
    left: 0;
  }
  @media (max-width: 575px) {
    .banner__shape-left1 {
      display: none;
    }
  }
  .banner__shape-left2 {
    position: absolute;
    top: 60px;
    left: 0;
  }
  @media (max-width: 575px) {
    .banner__shape-left2 {
      display: none;
    }
  }
  .banner__shape-left3 {
    position: absolute;
    bottom: 0px;
    left: 0;
  }
  .banner__shape-right1 {
    position: absolute;
    bottom: 0px;
    right: 0;
  }
  @media (max-width: 767px) {
    .banner__shape-right1 {
      display: none;
    }
  }
  .banner__shape-right2 {
    position: absolute;
    bottom: 0px;
    right: 0;
  }
  @media (max-width: 767px) {
    .banner__shape-right2 {
      display: none;
    }
  }
  .banner__line {
    position: absolute;
    bottom: 25%;
    left: 33%;
    z-index: 2;
  }
  .banner__right-line1, .banner__right-line4, .banner__right-line3, .banner__right-line2 {
    position: absolute;
    top: -65px;
    right: 0;
  }
  @media (max-width: 575px) {
    .banner__right-line1, .banner__right-line4, .banner__right-line3, .banner__right-line2 {
      display: none;
    }
  }
  @media (max-width: 575px) {
    .banner__right-line2 {
      display: none;
    }
  }
  @media (max-width: 575px) {
    .banner__right-line3 {
      display: none;
    }
  }
  @media (max-width: 575px) {
    .banner__right-line4 {
      display: none;
    }
  }
  .banner__content, .banner-two__content, .banner-three__content {
    max-width: 770px;
    padding: 300px 0 !important;
  }
  
  .banner-right {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
  }
  @media (max-width: 991px) {
    .banner__content, .banner-two__content, .banner-three__content {
      padding: 100px 0;
    }
  }
  .banner__content h4, .banner-two__content h4, .banner-three__content h4 {
    text-transform: uppercase;
    font-size: 18px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: 1px;
  }
  .banner__content h4 svg, .banner-two__content h4 svg, .banner-three__content h4 svg {
    margin-top: -4px;
  }
  .banner__content h1, .banner-two__content h1, .banner-three__content h1 {
    font-size: 80px;
    line-height: 90px;
    font-weight: 700;
  }
  @media (max-width: 991px) {
    .banner__content h1, .banner-two__content h1, .banner-three__content h1 {
      font-size: 60px;
      line-height: 70px;
    }
  }
  @media (max-width: 767px) {
    .banner__content h1, .banner-two__content h1, .banner-three__content h1 {
      font-size: 50px;
      line-height: 60px;
    }
  }
  @media (max-width: 575px) {
    .banner__content h1, .banner-two__content h1, .banner-three__content h1 {
      font-size: 35px;
      line-height: 50px;
    }
  }
  .banner__content p, .banner-two__content p, .banner-three__content p {
    color: var(--white);
    opacity: 90%;
  }
  .banner__slider .slide-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: -2;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: scale(1);
    -webkit-transition: all 9s ease-out 0s;
    -moz-transition: all 9s ease-out 0s;
    -ms-transition: all 9s ease-out 0s;
    -o-transition: all 9s ease-out 0s;
    transition: all 9s ease-out 0s;
  }
  .banner__slider .swiper-slide-active .slide-bg {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transform: scale(1.3);
  }
  .banner-two__shape1 {
    position: absolute;
    right: 0;
    top: 100px;
  }
  @media (max-width: 575px) {
    .banner-two__shape1 {
      display: none;
    }
  }
  .banner-two__shape2 {
    position: absolute;
    right: 0;
    top: 130px;
  }
  @media (max-width: 575px) {
    .banner-two__shape2 {
      display: none;
    }
  }
  .banner-two__line-left {
    position: absolute;
    left: 0;
    top: 100px;
  }
  @media (max-width: 575px) {
    .banner-two__line-left {
      display: none;
    }
  }
  .banner-two__circle-solid {
    position: absolute;
    bottom: -80px;
    left: -100px;
  }
  @media (max-width: 575px) {
    .banner-two__circle-solid {
      display: none;
    }
  }
  .banner-two__circle-regular {
    position: absolute;
    bottom: -80px;
    left: -100px;
  }
  @media (max-width: 575px) {
    .banner-two__circle-regular {
      display: none;
    }
  }
  .banner-two__right-shape {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .banner-two__line {
    position: absolute;
    left: 17%;
    top: 25%;
    z-index: 2;
  }
  @media (max-width: 575px) {
    .banner-two__line {
      display: none;
    }
  }
  .banner-two__dot-wrp {
    bottom: 120px;
  }
  .banner-two__content, .banner-three__content {
    max-width: 950px;
    margin: 0 auto;
    padding: 250px 0;
  }
  @media (max-width: 991px) {
    .banner-two__content, .banner-three__content {
      padding: 150px 0;
    }
  }
  .banner-two__content h1, .banner-three__content h1 {
    font-size: 90px;
    line-height: 100px;
  }
  @media (max-width: 991px) {
    .banner-two__content h1, .banner-three__content h1 {
      font-size: 60px;
      line-height: 70px;
    }
  }
  @media (max-width: 575px) {
    .banner-two__content h1, .banner-three__content h1 {
      font-size: 30px;
      line-height: 40px;
    }
  }
  .banner-two__content h4, .banner-three__content h4 {
    background-color: rgba(255, 255, 255, 0.1);
    display: inline-block;
    padding: 0px 15px;
  }
  @media (max-width: 575px) {
    .banner-two__content h4, .banner-three__content h4 {
      padding: 0px 10px;
      font-size: 14px;
      margin-bottom: 5px;
    }
  }
  @media (max-width: 575px) {
    .banner-two__content p, .banner-three__content p {
      font-size: 14px;
      margin-top: 10px;
    }
  }
  @media (max-width: 575px) {
    .banner-two__content .btn-one, .banner-three__content .btn-one {
      margin-top: 30px;
    }
  }
  .banner-three-area {
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);
    padding-top: 250px;
    padding-bottom: 200px;
  }
  @media (max-width: 767px) {
    .banner-three-area {
      padding: 80px 0;
    }
  }
  .banner-three__bg {
    position: absolute;
    left: 20px;
    bottom: 80px;
    z-index: -1;
  }
  .banner-three__shape-left {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
  }
  @media (max-width: 575px) {
    .banner-three__shape-left {
      display: none;
    }
  }
  .banner-three__shape-right {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 90%;
  }
  .banner-three__shape-right img {
    height: 100%;
  }
  @media (max-width: 575px) {
    .banner-three__shape-right {
      display: none;
    }
  }
  .banner-three__content {
    max-width: 100%;
  }
  @media (max-width: 991px) {
    .banner-three__content {
      margin-top: 100px;
    }
  }
  @media (max-width: 575px) {
    .banner-three__content {
      margin-top: 50px;
    }
  }
  @media (max-width: 575px) {
    .banner-three__content h4 {
      font-size: 12px;
    }
  }
  .banner-three__container {
    max-width: 1350px;
    padding: 30px;
    margin: 0 auto;
  }
  .banner-three__video-btn a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background: var(--white);
    color: var(--primary-color);
    font-size: 16px;
  }
  .banner-three__info {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  .banner__inner-page {
    overflow: hidden;
    z-index: 1;
    text-transform: capitalize;
  }
  .banner__inner-page .shape1 {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
  }
  .banner__inner-page .shape2 {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
  }
  .banner__inner-page .shape3 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
  .banner__inner-page::before {
    background: linear-gradient(270.07deg, #00cccc 0.07%, #00060c 99.95%);
    z-index: -1;
    opacity: 0.75;
  }
  @media (max-width: 767px) {
    .banner__inner-page {
      padding: 80px 0;
    }
  }
  .banner__inner-page h2 {
    margin-bottom: 10px;
    color: var(--white);
  }
  .banner__inner-page span {
    color: var(--white);
    font-weight: 500;
  }
  .banner__inner-page span i {
    color: var(--white);
  }
  .banner__inner-page a {
    color: var(--white);
    font-weight: 500;
  }
  .banner__inner-page a:hover {
    color: var(--primary-color);
  }
  
  .section-header h5 {
    color: #00cccc;
    padding-bottom: 20px;
    text-transform: uppercase;
    font-weight: 500;
  }
  .section-header h5 svg,
  .section-header h5 img {
    margin-top: -5px;
  }
  @media (max-width: 767px) {
    .section-header h5 {
      padding-bottom: 5px;
    }
  }
  .section-header h2 {
    text-transform: capitalize;
  }
  .section-header p {
    margin-top: -6px;
  }
  
  .service-area {
    position: relative;
    overflow: hidden;
  }
  .service__shape {
    position: absolute;
    right: -100px;
    top: 80px;
    z-index: -1;
  }
  .service__icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background-color: var(--primary10);
    border-radius: 0px;
    transition: var(--transition);
  }
  .service__item {
    position: relative;
    z-index: 1;
    background-color: var(--white);
    padding: 40px 30px;
    box-shadow: var(--shadow);
  }
  .service__item .service-shape {
    position: absolute;
    top: 22px;
    right: 0;
    opacity: 0.3;
    transition: var(--transition);
  }
  .service__item h4 {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .service__item p {
    transition: var(--transition);
  }
  .service__item::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background: var(--gradient-bg);
    transition: var(--transition);
    z-index: -1;
  }
  .service__item.active .service__icon {
    background-color: var(--white);
  }
  .service__item.active .service-shape {
    opacity: 0.5;
  }
  .service__item.active h4 a {
    color: var(--white);
  }
  .service__item.active p {
    color: var(--white);
    opacity: 90%;
  }
  .service__item.active::after {
    width: 100%;
    right: unset;
    left: 0;
  }
  .service-two-area, .project-three-area {
    overflow: hidden;
    position: relative;
  }
  .service-two__shape-left {
    position: absolute;
    left: 0;
    top: 0;
  }
  .service-two__shape-right {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .service-two__content {
    position: relative;
    padding: 30px;
    padding-top: 0;
  }
  .service-two__content .icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border-radius: 0;
    background: var(--gradient-bg);
    margin-bottom: 30px;
    margin-top: -35px;
    transition: 1s;
  }
  .service-two__content .shape {
    position: absolute;
    top: 35px;
    right: 0;
    opacity: 0.3;
    transition: var(--transition);
  }
  .service-two__content p {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .service-two__item {
    box-shadow: var(--shadow);
    background-color: var(--main-bg);
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: hidden;
  }
  .service-two__item:hover .icon {
    transform: rotateX(-360deg);
  }
  .service-two__item:hover .shape {
    opacity: 0.5;
  }
  .service-two__item:hover .read-more-btn {
    color: var(--primary-color);
  }
  .service-two__item:hover .read-more-btn i {
    color: var(--primary-color);
    margin-left: 10px;
  }
  .service-two__slider .swiper-slide-active .icon {
    transform: rotateX(-360deg);
  }
  .service-two__slider .swiper-slide-active .shape {
    opacity: 0.5;
  }
  .service-two__slider .swiper-slide-active .read-more-btn {
    color: var(--primary-color);
  }
  .service-two__slider .swiper-slide-active .read-more-btn i {
    color: var(--primary-color);
    margin-left: 10px;
  }
  .service-three-area {
    overflow: hidden;
    position: relative;
  }
  .service-three__shape {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .service-three__image img {
    border-radius: 8px;
  }
  .service-three__content {
    background-color: var(--white);
    padding: 20px 30px;
    display: flex;
    align-items: center;
    width: 85%;
    border-radius: 8px;
    box-shadow: var(--shadow);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    transition: var(--transition);
    opacity: 1;
  }
  @media (max-width: 1399px) {
    .service-three__content {
      width: 95%;
    }
  }
  .service-three__content .icon {
    padding-right: 15px;
    margin-right: 15px;
    border-right: var(--border-1px);
  }
  .service-three__up-content {
    padding: 40px 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    transition: var(--transition);
    opacity: 0;
  }
  .service-three__up-content .icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border-radius: 0px;
    background: linear-gradient(180deg, #3c72fc -93.57%, #00060c 228.57%);
    margin: 0 auto;
  }
  .service-three__item {
    position: relative;
    border-radius: 8px;
    z-index: 1;
  }
  .service-three__item::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #3c72fc -21.56%, #00060c 252.19%);
    border-radius: 8px;
    transition: var(--transition);
  }
  .service-three__item:hover .service-three__content {
    opacity: 0;
    bottom: 0;
  }
  .service-three__item:hover .service-three__up-content {
    opacity: 1;
  }
  .service-three__item:hover::before {
    height: 100%;
    bottom: 0;
    top: unset;
  }
  @media (max-width: 1199px) {
    .service-three__item {
      margin-bottom: 40px;
    }
  }
  .service-single-area {
    overflow: hidden;
  }
  .service-single__left-item .image {
    position: relative;
  }
  .service-single__left-item .title {
    font-size: 30px;
  }
  .service-single__left-item ul li {
    font-weight: 500;
    color: var(--heading-color);
  }
  .service-single__left-item ul li i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background: var(--gradient-bg);
    color: var(--white);
    font-size: 10px;
    margin-right: 10px;
  }
  .service-single__right-item .service-category li:hover {
    background-color: var(--primary-color) !important;
  }
  .service-single__right-item .service-category li:hover a {
    color: var(--white) !important;
  }
  .service-single__right-item .service-category li:hover i {
    color: var(--white) !important;
  }
  .service-single__right-item .service-category li.active {
    background-color: var(--primary-color) !important;
  }
  .service-single__right-item .service-category li.active a {
    color: var(--white) !important;
  }
  .service-single__right-item .service-category li.active i {
    color: var(--white) !important;
  }
  .about-area, .about-two-area {
    overflow: hidden;
    position: relative;
    padding-bottom: 127px;
  }
  .about__shape {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
  }
  .about__shape img {
    width: 100%;
    animation: sway_Y 5s linear infinite alternate;
  }
  .about__left-item, .about-two__left-item {
    position: relative;
  }
  @media (max-width: 1199px) {
    .about__left-item, .about-two__left-item {
      max-width: 580px;
      margin: 0 auto;
    }
  }
  .about__left-item .big-image, .about-two__left-item .big-image {
    max-width: 386px;
    position: relative;
    z-index: 1;
  }
  .about__left-item .sm-image, .about-two__left-item .sm-image {
    max-width: 295px;
    position: absolute;
    right: 25px;
    bottom: 30px;
    z-index: 2;
  }
  .about__left-item .sm-image .video__btn-wrp, .about-two__left-item .sm-image .video__btn-wrp {
    position: absolute;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .about__left-item .circle-shape, .about-two__left-item .circle-shape {
    position: absolute;
    top: 30px;
    right: 80px;
  }
  .about__right-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    
  }
  .about__right-item .icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    width: 100%;
    max-width: 80px;
    border-radius: 0;
    background-color: var(--primary10);
  }
  .about__info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
  }
  @media (max-width: 575px) {
    .about__info {
      gap: 5px;
    }
  }
  .about-two-area {
    padding-bottom: 120px;
  }
  @media (max-width: 767px) {
    .about-two-area {
      padding-bottom: 60px;
    }
  }
  .about-two__shape {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .about-two__left-item .circle-shape {
    right: unset;
    left: -32%;
    top: 12%;
    animation: rotate 5s linear infinite;
  }
  .about-two__left-item .dots {
    position: absolute;
    right: 15%;
    top: 0;
  }
  .about-two__left-item .shape-halper {
    position: absolute;
    top: 28%;
    right: 26%;
  }
  .about-two__left-item .sm-image {
    bottom: 20px;
  }
  .about-two__right-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 500px;
  }
  .about-two__right-item ul li {
    color: var(--heading-color);
    font-weight: 600;
  }
  .about-two__right-item ul li:not(:last-child) {
    margin-bottom: 20px;
  }
  .about-two__right-item ul li i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background: var(--gradient-bg);
    color: var(--white);
    font-size: 10px;
    margin-right: 10px;
  }
  .about-three-area {
    z-index: 1;
  }
  .about-three__box-up {
    position: absolute;
    top: 15px;
    right: 0;
    z-index: -1;
  }
  .about-three__box-down {
    position: absolute;
    top: 60px;
    right: 0;
    z-index: -1;
  }
  .about-three__info {
    max-width: 430px;
  }
  .about-three__info .icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border-radius: 0px;
    width: 100%;
    max-width: 64px;
  }
  .about-three__left-item {
    max-width: 450px;
  }
  .about-three__left-item .about-call-icon {
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border: 1px solid var(--primary-color);
  }
  .about-three__left-item .about-call-icon span {
    width: 48px;
    height: 48px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background: var(--gradient-bg);
  }
  .about-three__image {
    max-width: 634px;
    float: right;
    z-index: 1;
  }
  .about-three__image .faq__line {
    left: 20% !important;
    z-index: -1;
    top: 10px;
  }
  .about-three__image .about-three-dot {
    position: absolute;
    left: 8%;
    bottom: 15%;
    z-index: -1;
  }
  .about-three__image .about-three-count {
    box-shadow: var(--shadow);
    width: 208px;
    position: absolute;
    top: 23%;
    left: 10px;
    background-color: var(--white);
    border-radius: 8px;
  }
  .about-three__image .about-three-count h3 {
    font-size: 28px;
    line-height: 40px;
  }
  .about-three__image .about-three-count h3 span {
    color: var(--secondary-color);
  }
  .about-three__image .about-three-count .icon {
    width: 40px;
  }
  
  .counter-area {
    position: relative;
  }
  .counter__shape {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .counter__wrp, .quote__wrp {
    overflow: hidden;
    padding: 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    margin-top: -120px;
    z-index: 2;
  }
  @media (max-width: 767px) {
    .counter__wrp, .quote__wrp {
      justify-content: center;
    }
  }
  .counter__item {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
  }
  .counter__item h3 {
    font-size: 36px;
    color: var(--white);
    font-weight: 700;
    line-height: 50px;
  }
  .counter__item h3 span {
    color: var(--white);
  }
  
  .case-area {
    overflow: hidden;
  }
  .case__image {
    position: relative;
  }
  .case__image::before {
    background: linear-gradient(0deg, #0f0d1d 0%, rgba(15, 13, 29, 0) 125%);
  }
  .case__content {
    position: absolute;
    bottom: 40px;
    width: 100%;
    left: 30px;
  }
  .case__btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 2;
  }
  .case__btn i {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border-radius: 0;
    background: var(--gradient-bg);
    font-size: 20px;
    color: var(--secondary-color);
    color: var(--white);
    transition: var(--transition);
  }
  .case__btn::after {
    position: absolute;
    content: url(/assets/images/shape/case-btn-shape.png);
    right: -20px;
    top: 0px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }
  .case__btn::before {
    position: absolute;
    content: url(/assets/images/shape/case-btn-shape.png);
    left: -20px;
    top: -28px;
    z-index: -1;
    transform: rotate(180deg);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }
  .case__btn:hover::before {
    left: -10px;
    top: -18px;
    opacity: 1;
    visibility: visible;
  }
  .case__btn:hover::after {
    right: -10px;
    top: -10px;
    opacity: 1;
    visibility: visible;
  }
  .case__btn:hover i {
    color: var(--primary-color);
    background: var(--white);
  }
  .case__item, .project-three__item {
    position: relative;
  }
  .case__item:hover .case__btn, .project-three__item:hover .case__btn {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
  }
  .case__slider {
    margin-left: 19%;
  }
  @media (max-width: 1600px) {
    .case__slider {
      margin-left: 12%;
    }
  }
  @media (max-width: 1399px) {
    .case__slider {
      margin-left: 10%;
    }
  }
  @media (max-width: 991px) {
    .case__slider {
      margin-left: 0%;
      padding: 0 12px;
    }
  }
  .case__slider .swiper-slide.swiper-slide-active .case__item .case__btn, .case__slider .swiper-slide.swiper-slide-active .project-three__item .case__btn {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
  }
  .case-two-area {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding-bottom: 420px;
  }
  .case-two__bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
  }
  .case-two__bg img {
    width: 100%;
  }
  .case-two__container {
    max-width: 1600px;
    padding: 0 15px;
    margin: 0 auto;
  }
  .case-two__content {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 1;
  }
  .case-two__content span {
    color: var(--primary-color);
    font-weight: 500;
    transition: var(--transition);
  }
  .case-two__btn {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border: 1px solid var(--white);
    font-size: 20px;
    color: var(--white);
    z-index: 1;
  }
  .case-two__btn:hover {
    color: var(--primary-color);
    background-color: var(--white);
  }
  .case-two__item {
    position: relative;
    z-index: 1;
  }
  .case-two__item::after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0;
    content: "";
    background: linear-gradient(0deg, #3c72fc 0%, rgba(0, 0, 0, 0) 100%);
    transition: var(--transition);
  }
  .case-two__item:hover::after {
    height: 100%;
  }
  .case-two__item:hover .case-two__content span {
    color: var(--white);
  }
  .case-three-area {
    overflow: hidden;
  }
  .case-single-area {
    overflow: hidden;
  }
  .case-single__title {
    font-size: 30px;
    line-height: 32px;
  }
  .case-single__item .case-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }
  .case-single__item .case-date li {
    font-weight: 500;
    color: var(--heading-color);
  }
  .case-single__item .case-date li span {
    font-weight: 400;
    color: var(--primary-color);
  }
  .case-single__item .case-challenge-list {
    max-width: 780px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .case-single__item .case-challenge li {
    font-weight: 500;
    color: var(--heading-color);
  }
  .case-single__item .case-challenge li i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background: var(--gradient-bg);
    color: var(--white);
    font-size: 10px;
    margin-right: 10px;
  }
  
  .choose-area {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .choose__shape-left {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
  }
  .choose__shape-right1 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  .choose__shape-right2 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  .choose__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 47%;
    height: 100%;
    z-index: -1;
  }
  .choose__image img {
    height: 100%;
  }
  .choose__video-btn, .banner-video__video-btn, .service-single__video-btn {
    position: absolute;
    right: 20%;
    top: 45%;
    z-index: 2;
  }
  .choose__video-btn .video-btn a, .banner-video__video-btn .video-btn a, .service-single__video-btn .video-btn a {
    width: 90px;
    height: 90px;
    line-height: 90px;
    font-size: 25px;
  }
  @media (max-width: 991px) {
    .choose__video-btn, .banner-video__video-btn, .service-single__video-btn {
      right: 42%;
      top: 20%;
    }
  }
  @media (max-width: 450px) {
    .choose__video-btn, .banner-video__video-btn, .service-single__video-btn {
      right: 34%;
      top: 15%;
    }
  }
  
  .offer-area {
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .offer__shadow {
    position: absolute;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  .offer__shape-left {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0.3;
  }
  .offer__shape-right {
    position: absolute;
    top: 0px;
    right: 0;
    opacity: 0.3;
  }
  .offer__icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    margin: 0 auto;
    background: linear-gradient(180deg, #3c72fc -210.71%, #00060c 100%);
    margin-top: -35px;
    transition: 1s;
  }
  .offer__item {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
    padding-top: 0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    position: relative;
  }
  @media (max-width: 991px) {
    .offer__item {
      margin-top: 30px;
    }
  }
  .offer__item .shape-top {
    position: absolute;
    top: 50%;
    right: 50%;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }
  .offer__item .shape-bottom {
    position: absolute;
    bottom: 50%;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
  }
  .offer__item:hover .shape-top {
    top: -1px;
    right: -1px;
    opacity: 1;
    visibility: visible;
  }
  .offer__item:hover .shape-bottom {
    position: absolute;
    bottom: -1px;
    left: -1px;
    opacity: 1;
    visibility: visible;
  }
  .offer__item:hover .offer__icon {
    background: var(--gradient-bg);
    transform: rotateY(360deg);
  }
  .offer__item:hover .offer__icon svg path {
    fill: #fff;
  }
  
  .brand__wrp {
    padding: 65px;
    background: var(--gradient-bg);
    margin-top: -85px;
    position: relative;
    z-index: 1;
  }
  .brand__shape {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0.3;
  }
  .brand__image {
    max-width: 175px;
  }
  .brand-three-area {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .brand-three-area::before {
    background-color: var(--heading-color);
    opacity: 0.9;
    z-index: -1;
  }
  .brand-three__shape1 {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  @media (max-width: 767px) {
    .brand-three__shape1 {
      display: none;
    }
  }
  .brand-three__line1 {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  @media (max-width: 767px) {
    .brand-three__line1 {
      display: none;
    }
  }
  .brand-three__shape2 {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  @media (max-width: 767px) {
    .brand-three__shape2 {
      display: none;
    }
  }
  .brand-three__line2 {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  @media (max-width: 767px) {
    .brand-three__line2 {
      display: none;
    }
  }
  
  .process-area {
    overflow: hidden;
  }
  .process__image {
    max-width: 178px;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    border-radius: 50%;
  }
  .process__image img {
    width: 100%;
  }
  .process__image::after {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 1px dashed var(--primary-color);
    content: "";
    border-radius: 50%;
    position: absolute;
    animation: rotate 20s linear infinite;
  }
  .process__image .process-number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background: var(--gradient-bg);
    color: var(--white);
    font-size: 18px;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
  }
  .process__item {
    text-align: center;
    padding: 0 30px;
    position: relative;
  }
  @media (min-width: 992px) {
    .process__item {
      margin-bottom: 0px;
    }
  }
  .process__item .process-arry {
    position: absolute;
    top: 18%;
    right: -14%;
  }
  @media (max-width: 991px) {
    .process__item .process-arry {
      top: unset;
      right: unset;
      bottom: -110px;
      left: 40%;
    }
    .process__item .process-arry img {
      transform: rotate(90deg);
    }
  }
  
  .testimonial__arry-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    position: relative;
  }
  .testimonial__arry-btn::after {
    position: absolute;
    content: "";
    width: 35%;
    height: 1px;
    background-color: var(--primary-color);
    right: 0;
    top: 25px;
    opacity: 0.5;
  }
  @media (max-width: 575px) {
    .testimonial__arry-btn::after {
      width: 30%;
    }
  }
  .testimonial__arry-btn::before {
    position: absolute;
    content: "";
    width: 35%;
    height: 1px;
    background-color: var(--primary-color);
    left: 0;
    top: 25px;
    opacity: 0.5;
  }
  @media (max-width: 575px) {
    .testimonial__arry-btn::before {
      width: 30%;
    }
  }
  .testimonial__item {
    position: relative;
    padding: 40px;
    background-color: var(--white);
    box-shadow: var(--shadow);
  }
  .testimonial__item .coma {
    position: absolute;
    top: 40px;
    right: 40px;
  }
  .testimonial-two-area {
    margin-top: -300px;
    position: relative;
    z-index: 1;
  }
  .testimonial-two__slider {
    padding: 20px 0;
  }
  .testimonial-two__item, .testimonial-three__item {
    background-color: var(--white);
    box-shadow: var(--shadow);
    padding: 40px;
    position: relative;
  }
  .testimonial-two__item .coma, .testimonial-three__item .coma {
    position: absolute;
    bottom: 40px;
    right: 40px;
  }
  .testimonial-two__item.dark-mode, .dark-mode.testimonial-three__item {
    background-color: var(--sub-bg);
  }
  .testimonial-three-area {
    overflow: hidden;
  }
  .testimonial-three__wrp {
    margin-left: 19%;
    margin-right: -70px;
  }
  @media (max-width: 1399px) {
    .testimonial-three__wrp {
      margin-left: 30px;
      margin-right: 30px;
    }
  }
  .testimonial-three__image {
    position: relative;
  }
  .testimonial-three__image svg {
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translate(-50%);
  }
  .testimonial-three__item {
    box-shadow: none;
  }
  
  .talk-us__item {
    background: var(--gradient-bg);
    padding: 60px;
  }
  .talk-us__item .section-header h5 {
    padding-bottom: 5px;
  }
  .talk-us__item .section-header h2 {
    font-size: 30px;
  }
  .talk-us__item form label {
    color: var(--white);
    margin-bottom: 10px;
    text-transform: capitalize;
  }
  .talk-us__item form input {
    padding: 15px 20px;
    background-color: var(--white);
    border: none;
    outline: none;
    color: var(--paragraph);
    width: 100%;
  }
  .talk-us__item form textarea {
    padding: 15px 20px;
    background-color: var(--white);
    border: none;
    outline: none;
    color: var(--paragraph);
    width: 100%;
    height: 110px;
    resize: none;
  }
  .talk-us__item form button {
    padding: 15px 20px;
    background-color: var(--secondary-color);
    color: var(--white);
    font-weight: 600;
    width: 100%;
    text-align: center;
    margin-top: 15px;
    transition: var(--transition);
  }
  .talk-us__item form button:hover {
    opacity: 0.9;
  }
  
  .blog__image {
    position: relative;
    overflow: hidden;
  }
  .blog__image img {
    transition: var(--transition);
  }
  .blog__image .blog-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--gradient-bg);
    padding: 10px 22px;
  }
  .blog__image .blog-tag h3 {
    line-height: 22px;
    font-weight: 700;
  }
  .blog__image .blog-tag span {
    font-size: 12px;
    line-height: 22px;
  }
  .blog__content {
    padding: 30px;
  }
  .blog__content .blog-info {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .blog__content .blog-info li {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .blog__content .blog-info li a {
    color: var(--paragraph);
    font-size: 14px;
    line-height: 22px;
  }
  .blog__content .blog-info li a:hover {
    color: var(--primary-color);
  }
  .blog__item, .blog-two__grid-item, .blog-two__list-item {
    box-shadow: var(--shadow);
  }
  .blog__item .read-more-btn, .blog-two__grid-item .read-more-btn, .blog-two__list-item .read-more-btn {
    color: var(--paragraph);
  }
  .blog__item:hover .read-more-btn, .blog-two__grid-item:hover .read-more-btn, .blog-two__list-item:hover .read-more-btn {
    color: var(--primary-color);
  }
  .blog__item:hover .read-more-btn i, .blog-two__grid-item:hover .read-more-btn i, .blog-two__list-item:hover .read-more-btn i {
    color: var(--primary-color);
    margin-left: 10px;
  }
  .blog__item:hover .blog__image img, .blog-two__grid-item:hover .blog__image img, .blog-two__list-item:hover .blog__image img {
    transform: scale(1.1) rotate(3deg);
    filter: brightness(70%);
  }
  .blog-two-area {
    overflow: hidden;
  }
  .blog-two__grid-item, .blog-two__list-item {
    border: 1px solid var(--border);
    padding: 20px;
  }
  .blog-two__grid-item .blog__content, .blog-two__list-item .blog__content {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
  }
  .blog-two__list-item {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  @media (max-width: 575px) {
    .blog-two__list-item {
      flex-direction: column;
    }
  }
  .blog-two__list-item .blog__content {
    padding: 10px;
    flex-basis: 50%;
  }
  @media (max-width: 575px) {
    .blog-two__list-item .blog__content {
      flex-basis: 100%;
    }
  }
  .blog-single__title {
    font-size: 30px;
  }
  .blog-single__left-item:hover .image img {
    transform: scale(1) rotate(0deg);
  }
  .blog-single__left-item .fs-30 {
    font-size: 30px;
  }
  .blog-single__left-item .hilight-text {
    border-left: 4px solid var(--primary-color);
    padding: 40px;
  }
  .blog-single__left-item .hilight-text p {
    max-width: 650px;
    color: var(--heading-color);
    font-weight: 500;
    text-transform: capitalize;
    font-style: italic;
    line-height: 26px;
  }
  .blog-single__left-item .hilight-text svg {
    float: right;
    margin-top: -30px;
  }
  .blog-single__left-item .tags-share {
    padding: 20px 0;
    border-top: var(--border-1px);
    border-bottom: var(--border-1px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .blog-single__left-item .tags-share .tags {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .blog-single__left-item .tags-share .tags strong {
    color: var(--heading-color);
  }
  .blog-single__left-item .tags-share .tags a {
    padding: 2px 15px;
    font-size: 14px;
    font-weight: 600;
    border: var(--border-1px);
    text-transform: capitalize;
  }
  .blog-single__left-item .tags-share .tags a:hover {
    background-color: var(--primary-color);
    color: var(--white);
    border: 1px solid var(--primary-color);
  }
  .blog-single__left-item .tags-share .share {
    display: flex;
    align-items: center;
  }
  .blog-single__left-item .tags-share .share strong {
    color: var(--heading-color);
  }
  .blog-single__left-item .tags-share .share a {
    font-size: 20px;
    color: var(--paragraph);
    margin-left: 20px;
  }
  .blog-single__left-item .tags-share .share a:hover {
    color: var(--primary-color);
  }
  .blog-single__left-item .tags-share .share a.active {
    color: var(--primary-color);
  }
  .blog-single__right-item .item, .service-single__right-item .item {
    padding: 30px;
  }
  .blog-single__right-item .item .title, .service-single__right-item .item .title {
    position: relative;
    margin-bottom: 35px;
    font-weight: 700;
  }
  .blog-single__right-item .item .title::after, .service-single__right-item .item .title::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -10px;
    height: 2px;
    width: 40px;
    background-color: var(--primary-color);
  }
  .blog-single__right-item .item .serach-bar, .service-single__right-item .item .serach-bar {
    position: relative;
  }
  .blog-single__right-item .item .serach-bar input, .service-single__right-item .item .serach-bar input {
    width: 100%;
    border: var(--border-1px);
    padding: 16px;
  }
  .blog-single__right-item .item .serach-bar input:focus, .service-single__right-item .item .serach-bar input:focus {
    border: 1px solid rgba(13, 110, 253, 0.5);
  }
  .blog-single__right-item .item .serach-bar button, .service-single__right-item .item .serach-bar button {
    position: absolute;
    right: 15px;
    top: 18px;
    color: var(--span);
    background-color: var(--white);
  }
  .blog-single__right-item .item .category li, .service-single__right-item .item .category li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: var(--white);
    transition: var(--transition);
  }
  .blog-single__right-item .item .category li span, .service-single__right-item .item .category li span {
    transition: var(--transition);
  }
  .blog-single__right-item .item .category li:hover a, .service-single__right-item .item .category li:hover a {
    color: var(--primary-color);
  }
  .blog-single__right-item .item .category li:hover span, .service-single__right-item .item .category li:hover span {
    color: var(--primary-color);
  }
  .blog-single__right-item .item .category li:not(:last-child), .service-single__right-item .item .category li:not(:last-child) {
    margin-bottom: 10px;
  }
  .blog-single__right-item .item .single-post li, .service-single__right-item .item .single-post li {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .blog-single__right-item .item .single-post li:not(:last-child), .service-single__right-item .item .single-post li:not(:last-child) {
    margin-bottom: 15px;
  }
  .blog-single__right-item .item .single-post li span, .service-single__right-item .item .single-post li span {
    font-size: 14px;
  }
  .blog-single__right-item .item .tags, .service-single__right-item .item .tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .blog-single__right-item .item .tags a, .service-single__right-item .item .tags a {
    padding: 5px 14px;
    font-weight: 500;
    border: var(--border-1px);
    text-transform: capitalize;
    background-color: var(--white);
    font-size: 14px;
  }
  .blog-single__right-item .item .tags a:hover, .service-single__right-item .item .tags a:hover {
    background-color: var(--primary-color);
    color: var(--white);
    border: 1px solid var(--primary-color);
  }
  .blog-single__review .image {
    max-width: 96px;
    width: 100%;
  }
  .blog-single__review .reply {
    border-radius: 30px;
    padding: 0px 12px;
    font-weight: 500;
  }
  
  .team-area {
    overflow: hidden;
  }
  .team__share {
    position: absolute;
    bottom: 30px;
    right: 30px;
  }
  @media (max-width: 991px) {
    .team__share {
      right: 20px;
    }
  }
  .team__share button {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background: var(--gradient-bg);
    color: var(--white);
    font-size: 18px;
  }
  .team__share ul {
    width: 40px;
    background: var(--gradient-bg);
    text-align: center;
    padding-top: 20px;
    padding-bottom: 12px;
    border-radius: 40px;
    margin-bottom: 15px;
    display: none;
    transition: var(--transition);
  }
  .team__share ul li:not(:last-child) {
    margin-bottom: 5px;
  }
  .team__share ul li a {
    color: var(--white);
  }
  .team__share:hover ul {
    display: block;
  }
  .team__content {
    position: absolute;
    max-width: 270px;
    padding: 20px 30px;
    background: var(--gradient-bg);
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .team__item {
    position: relative;
  }
  .team__item::before {
    transition: var(--transition);
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(359.9deg, #00060c 0.09%, rgba(22, 36, 62, 0) 99.91%);
  }
  .team__item:hover::before {
    height: 100%;
    top: 0;
  }
  .team-single__image {
    overflow: hidden;
    position: relative;
  }
  .team-single__image img {
    width: 100%;
  }
  .team-single__image .team-info {
    position: absolute;
    left: 50%;
    bottom: 30px;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
  }
  .team-single__image .team-info a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border-radius: 0;
    color: var(--white);
    border: 1px solid var(--white);
  }
  .team-single__image .team-info a:hover {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
  }
  .team-single__image .team-info a.active {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
  }
  .team-single__info .skills .experience-title {
    font-weight: 400;
  }
  .team-single__info .skills .progress {
    height: 8px;
  }
  .team-single__info .skills .progress .progress-bar {
    background-color: var(--primary-color);
  }
  
  .faq-area {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .faq__shape {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
  }
  .faq__image {
    position: relative;
  }
  .faq__line {
    position: absolute;
    top: 30px;
    left: 30px;
  }
  
  .quote__wrp {
    display: block;
    padding: 60px;
    z-index: 1;
    margin-top: 0;
    margin-bottom: -120px;
  }
  .quote__shape {
    position: absolute;
    left: 0;
    border-top: 0;
    z-index: -1;
  }
  
  .pricing-area {
    position: relative;
    z-index: 1;
  }
  .pricing__shape-up {
    position: absolute;
    top: -120px;
    left: 0;
    z-index: -1;
  }
  .pricing__shape-down {
    position: absolute;
    top: -80px;
    left: 0;
    z-index: -1;
  }
  .pricing__shape {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
  .pricing__item {
    overflow: hidden;
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #3c72fc -1.09%, #00060c 175.27%);
    padding: 50px 40px;
  }
  .pricing__item .item-shape {
    position: absolute;
    bottom: 40px;
    right: 0;
    z-index: -1;
  }
  .pricing__item ul {
    padding: 40px 0;
  }
  .pricing__item ul li {
    color: var(--white);
  }
  .pricing__item ul li:not(:last-child) {
    margin-bottom: 20px;
  }
  .pricing__item .pricing-head {
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(227, 227, 227, 0.4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .pricing__item .pricing-head h2 {
    color: var(--white);
  }
  .pricing__item .pricing-head h2 span {
    color: var(--white);
    font-size: 18px;
    font-weight: 400;
  }
  .pricing__item .pricing-icon {
    width: 94px;
    height: 90px;
    text-align: center;
    line-height: 90px;
  }
  .pricing__item .pricing-icon img {
    transition: 1s;
  }
  .pricing__item:hover .item-shape {
    animation: bobble 2s ease-in-out infinite alternate;
  }
  .pricing__item:hover .pricing-icon img {
    transform: rotateY(-360deg);
  }
  
  .project-three-area {
    padding-bottom: 71px;
    padding-top: 146px;
    margin-top: -120px;
  }
  .project-three__item .case__content {
    text-align: center;
  }
  .project-three__item .case__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: unset;
    right: unset;
  }
  
  .banner-video-area {
    position: relative;
  }
  .banner-video__wrp {
    margin-top: -120px;
    z-index: 1;
  }
  .banner-video__wrp img {
    border-radius: 20px;
  }
  .banner-video__wrp::before {
    background-color: var(--heading-color);
    border-radius: 20px;
    opacity: 0.5;
  }
  .banner-video__video-btn, .service-single__video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: unset;
  }
  
  .contact__left-item {
    padding: 83px;
  }
  .contact__left-item ul li {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .contact__left-item ul li i {
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background-color: var(--white);
    display: block;
    position: relative;
  }
  .contact__left-item ul li i::after {
    position: absolute;
    content: "";
    width: 60px;
    height: 62px;
    line-height: 62px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border: 1px dashed var(--primary-color);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .contact__left-item .social a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    background-color: var(--white);
    color: var(--heading-color);
    margin-right: 5px;
  }
  .contact__left-item .social a:hover {
    color: var(--primary-color);
  }
  .contact__right-item {
    padding-left: 50px;
  }
  @media (max-width: 991px) {
    .contact__right-item {
      padding-left: 0;
    }
  }
  .contact__form form .nice-select {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    border: none;
    background-color: var(--sub-bg);
    margin-bottom: 30px;
    padding: 18px 20px;
    height: 70px;
    border-radius: 5px;
  }
  .contact__form form .nice-select .list {
    width: 100%;
  }
  .contact__form form label {
    font-family: var(--quicksand);
    color: var(--heading-color);
    margin-bottom: 15px;
    font-weight: 700;
  }
  .contact__form form input,
  .contact__form form textarea {
    width: 100%;
    padding: 18px 20px;
    background-color: var(--sub-bg);
    border-radius: 4px;
    margin-bottom: 30px;
  }
  .contact__form form textarea {
    height: 200px;
  }
  .contact__map {
    margin-bottom: -10px;
  }
  .contact__map iframe {
    width: 100%;
    height: 600px;
  }
  
  .error__item {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
  }
  .error__item h2 {
    font-size: 64px;
    line-height: 72px;
  }
  @media (max-width: 991px) {
    .error__item h2 {
      font-size: 40px;
      line-height: 50px;
    }
  }
  @media (max-width: 575px) {
    .error__item h2 {
      font-size: 30px;
      line-height: 40px;
    }
  }
  
  .footer-area, .footer-two-area {
    overflow: hidden;
    position: relative;
  }
  .footer__wrp {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }
  @media (max-width: 575px) {
    .footer__wrp {
      flex-direction: column;
      justify-content: left;
      align-items: unset;
    }
  }
  .footer__shape-solid-left {
    position: absolute;
    top: 0;
    left: 0;
  }
  .footer__shape-regular-left {
    position: absolute;
    top: 30px;
    left: 0;
  }
  @media (max-width: 767px) {
    .footer__shape-regular-left {
      display: none;
    }
  }
  .footer__shape-solid-right {
    position: absolute;
    top: 0;
    right: 0;
  }
  @media (max-width: 767px) {
    .footer__shape-solid-right {
      display: none;
    }
  }
  .footer__shape-regular-right {
    position: absolute;
    top: 30px;
    right: 0;
  }
  @media (max-width: 767px) {
    .footer__shape-regular-right {
      display: none;
    }
  }
  .footer__shadow-shape {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%);
    animation: footer__shadow 10s linear infinite alternate;
  }
  .footer__item .logo {
    margin-top: -30px;
  }
  @media (max-width: 575px) {
    .footer__item .logo {
      margin-top: 0;
    }
  }
  .footer__item .footer-title {
    margin-bottom: 30px;
    color: var(--white);
  }
  .footer__item ul li:not(:last-child) {
    margin-bottom: 15px;
  }
  .footer__item ul li a {
    color: var(--white);
    opacity: 0.8;
  }
  .footer__item ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
  }
  .footer__item .footer-contact li {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--white);
  }
  .footer__item .footer-contact li i {
    font-size: 24px;
  }
  .footer__item .footer-contact li h5 {
    color: var(--white);
  }
  .footer__item p {
    color: var(--white);
    opacity: 0.8;
  }
  .footer__item.item-big {
    max-width: 270px;
    width: 100%;
  }
  .footer__item.item-sm {
    max-width: 170px;
    width: 100%;
  }
  .footer__item .social-icon {
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .footer__item .social-icon a {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 50%;
    transition: var(--transition);
    border-radius: 0;
    border: 1px solid rgba(227, 227, 227, 0.2);
    color: var(--white);
  }
  .footer__item .social-icon a:hover {
    background-color: var(--primary-color);
  }
  .footer__item .social-icon a.active {
    background-color: var(--primary-color);
  }
  .footer__copyright {
    position: relative;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 225, 0.2);
  }
  .footer__copyright p {
    color: var(--white);
    opacity: 0.8;
  }
  .footer__copyright a {
    color: var(--white);
    opacity: 0.8;
  }
  .footer__copyright a:hover {
    color: var(--primary-color);
  }
  .footer-two-area {
    padding-top: 17px;
  }
  
  @keyframes sway {
    0% {
      transform: translateX(-20px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  .sway__animation {
    animation: sway 3s linear infinite alternate;
  }
  
  @keyframes swayX {
    0% {
      transform: translateX(20px);
    }
    100% {
      transform: translateX(0px);
    }
  }
  .sway__animationX {
    animation: swayX 3s linear infinite alternate;
  }
  
  @keyframes footer__shadow {
    0% {
      margin-left: -200px;
    }
    100% {
      margin-right: -200px;
    }
  }
  @keyframes sway_Y {
    0% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(20px);
    }
  }
  .sway_Y__animation {
    animation: sway_Y 3s linear infinite alternate;
  }
  
  @keyframes sway_YY {
    0% {
      transform: translateY(0px);
    }
    100% {
      transform: translateY(-20px);
    }
  }
  .sway_Y__animationY {
    animation: sway_YY 3s linear infinite alternate;
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .animation__rotate {
    animation: rotate 40s linear infinite;
  }
  
  @keyframes rotateY {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  .animation__rotateY {
    animation: rotateY 40s linear infinite;
  }
  
  @keyframes bobble {
    0% {
      transform: translateY(0) scale(1);
    }
    100% {
      transform: translateY(-20px) scale(1.1);
    }
  }
  .bobble__animation {
    animation: bobble 3s ease-in-out infinite alternate;
  }
  
  @-webkit-keyframes video-animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      opacity: 0;
      transform: scale(2);
    }
  }
  @keyframes video-animation {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      opacity: 0;
      transform: scale(2);
    }
  }/*# sourceMappingURL=style.css.map */
  
}
.header-three-area .header__main .main-menu ul li a.search-trigger::after {
  display: none;
}
.header-three-area .header__main .main-menu ul li:hover a {
  color: var(--white);
}
.header-three-area .header__main .main-menu ul li:hover a::after {
  opacity: 1;
  visibility: visible;
}
.header-three-area .header__main .main-menu .sub-menu {
  left: -20px;
}
.header-three-area .header__main .main-menu .sub-menu a::after {
  display: none;
}
.header-three-area .header__main .bars i {
  color: var(--white);
}

.mean-nav .mega-menu .image {
  padding: 20px;
  border: var(--border-1px);
  border-radius: 8px;
  margin-bottom: 20px;
  position: relative;
}
.mean-nav .mega-menu .image h6 {
  margin-top: 20px;
}
.mean-nav .btn__group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mean-nav .btn__group a {
  text-align: center !important;
  width: 100% !important;
}

.sidebar-area {
  position: fixed;
  top: 0;
  right: 0px;
  width: 400px;
  height: 100%;
  background-color: var(--heading-color);
  padding: 40px;
  padding-top: 30px;
  z-index: 9999;
  transition: var(--transition);
  overflow: hidden;
  overflow-y: auto;
}
@media (max-width: 575px) {
  .sidebar-area {
    width: 350px;
  }
}
.sidebar-area p {
  color: var(--white);
}
.sidebar-area .info {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.sidebar-area .info li {
  font-size: 15px;
}
.sidebar-area .info li i {
  margin-right: 8px;
}
.sidebar-area .info li a {
  color: var(--white);
}
.sidebar-area .sidebar__overlay {
  position: fixed;
  right: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.sidebar-area button {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  background-color: var(--primary-color);
  border-radius: 50%;
  transition: var(--transition);
}
.sidebar-area button:hover {
  transform: rotate(90deg);
}
.sidebar-area .social-icon a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--primary-color);
  margin-right: 10px;
}
.sidebar-area .social-icon a:hover {
  background-color: var(--primary-color);
  color: var(--heading-color);
  border: 1px solid var(--primary-color);
}
.sidebar-area.sidebar__hide {
  visibility: hidden;
  opacity: 0;
  right: -30px;
}
.sidebar-area .sidebar__search {
  position: relative;
}
.sidebar-area .sidebar__search input {
  width: 100%;
  padding: 8px 20px;
  padding-right: 40px;
}
.sidebar-area .sidebar__search i {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
  color: var(--heading-color);
}

.mobile-menu .meanmenu-reveal {
  display: none !important;
}
.mobile-menu.mean-container .mean-nav > ul {
  width: 100%;
  display: block !important;
}
.mobile-menu ul li a i {
  display: none;
}

.banner-area, .banner-two-area {
  overflow: hidden;
  position: relative;
}
.banner__dot-wrp {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
}
.banner__shape-left1 {
  position: absolute;
  top: 30px;
  left: 0;
}
@media (max-width: 575px) {
  .banner__shape-left1 {
    display: none;
  }
}
.banner__shape-left2 {
  position: absolute;
  top: 60px;
  left: 0;
}
@media (max-width: 575px) {
  .banner__shape-left2 {
    display: none;
  }
}
.banner__shape-left3 {
  position: absolute;
  bottom: 0px;
  left: 0;
}
.banner__shape-right1 {
  position: absolute;
  bottom: 0px;
  right: 0;
}
@media (max-width: 767px) {
  .banner__shape-right1 {
    display: none;
  }
}
.banner__shape-right2 {
  position: absolute;
  bottom: 0px;
  right: 0;
}
@media (max-width: 767px) {
  .banner__shape-right2 {
    display: none;
  }
}
.banner__line {
  position: absolute;
  bottom: 25%;
  left: 33%;
  z-index: 2;
}
.banner__right-line1, .banner__right-line4, .banner__right-line3, .banner__right-line2 {
  position: absolute;
  top: -65px;
  right: 0;
}
@media (max-width: 575px) {
  .banner__right-line1, .banner__right-line4, .banner__right-line3, .banner__right-line2 {
    display: none;
  }
}
@media (max-width: 575px) {
  .banner__right-line2 {
    display: none;
  }
}
@media (max-width: 575px) {
  .banner__right-line3 {
    display: none;
  }
}
@media (max-width: 575px) {
  .banner__right-line4 {
    display: none;
  }
}
.banner__content, .banner-two__content, .banner-three__content {
  max-width: 770px;
  padding: 0!important;
  bottom: 300px;
  position: absolute;
}
@media (max-width: 991px) {
  .banner__content, .banner-two__content, .banner-three__content {
    padding: 100px 0;
  }
}
.banner__content h4, .banner-two__content h4, .banner-three__content h4 {
  text-transform: uppercase;
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 1px;
}
.banner__content h4 svg, .banner-two__content h4 svg, .banner-three__content h4 svg {
  margin-top: -4px;
}
.banner__content h1, .banner-two__content h1, .banner-three__content h1 {
  font-size: 80px;
  line-height: 90px;
  font-weight: 700;
}
@media (max-width: 991px) {
  .banner__content h1, .banner-two__content h1, .banner-three__content h1 {
    font-size: 60px;
    line-height: 70px;
  }
}
@media (max-width: 767px) {
  .banner__content h1, .banner-two__content h1, .banner-three__content h1 {
    font-size: 50px;
    line-height: 60px;
  }
}
@media (max-width: 575px) {
  .banner__content h1, .banner-two__content h1, .banner-three__content h1 {
    font-size: 35px;
    line-height: 50px;
  }
}
.banner__content p, .banner-two__content p, .banner-three__content p {
  color: var(--white);
  opacity: 90%;
}
.banner__slider .slide-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: -2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform: scale(1);
  -webkit-transition: all 9s ease-out 0s;
  -moz-transition: all 9s ease-out 0s;
  -ms-transition: all 9s ease-out 0s;
  -o-transition: all 9s ease-out 0s;
  transition: all 9s ease-out 0s;
  transform: scale(1.0);
}
.banner__slider .swiper-slide-active .slide-bg {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  transform: scale(1.1);
}
.banner-two__shape1 {
  position: absolute;
  right: 0;
  top: 100px;
}
@media (max-width: 575px) {
  .banner-two__shape1 {
    display: none;
  }
}
.banner-two__shape2 {
  position: absolute;
  right: 0;
  top: 130px;
}
@media (max-width: 575px) {
  .banner-two__shape2 {
    display: none;
  }
}
.banner-two__line-left {
  position: absolute;
  left: 0;
  top: 100px;
}
@media (max-width: 575px) {
  .banner-two__line-left {
    display: none;
  }
}
.banner-two__circle-solid {
  position: absolute;
  bottom: -80px;
  left: -100px;
}
@media (max-width: 575px) {
  .banner-two__circle-solid {
    display: none;
  }
}
.banner-two__circle-regular {
  position: absolute;
  bottom: -80px;
  left: -100px;
}
@media (max-width: 575px) {
  .banner-two__circle-regular {
    display: none;
  }
}
.banner-two__right-shape {
  position: absolute;
  bottom: 0;
  right: 0;
}
.banner-two__line {
  position: absolute;
  left: 17%;
  top: 25%;
  z-index: 2;
}
@media (max-width: 575px) {
  .banner-two__line {
    display: none;
  }
}
.banner-two__dot-wrp {
  bottom: 120px;
}
.banner-two__content, .banner-three__content {
  max-width: 950px;
  margin: 0 auto;
  padding: 250px 0;
}
@media (max-width: 991px) {
  .banner-two__content, .banner-three__content {
    padding: 150px 0;
  }
}
.banner-two__content h1, .banner-three__content h1 {
  font-size: 90px;
  line-height: 100px;
}
@media (max-width: 991px) {
  .banner-two__content h1, .banner-three__content h1 {
    font-size: 60px;
    line-height: 70px;
  }
}
@media (max-width: 575px) {
  .banner-two__content h1, .banner-three__content h1 {
    font-size: 30px;
    line-height: 40px;
  }
}
.banner-two__content h4, .banner-three__content h4 {
  background-color: rgba(255, 255, 255, 0.1);
  display: inline-block;
  padding: 0px 15px;
}
@media (max-width: 575px) {
  .banner-two__content h4, .banner-three__content h4 {
    padding: 0px 10px;
    font-size: 14px;
    margin-bottom: 5px;
  }
}
@media (max-width: 575px) {
  .banner-two__content p, .banner-three__content p {
    font-size: 14px;
    margin-top: 10px;
  }
}
@media (max-width: 575px) {
  .banner-two__content .btn-one, .banner-three__content .btn-one {
    margin-top: 30px;
  }
}
.banner-three-area {
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);
  padding-top: 250px;
  padding-bottom: 200px;
}
@media (max-width: 767px) {
  .banner-three-area {
    padding: 80px 0;
  }
}
.banner-three__bg {
  position: absolute;
  left: 20px;
  bottom: 80px;
  z-index: -1;
}
.banner-three__shape-left {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
@media (max-width: 575px) {
  .banner-three__shape-left {
    display: none;
  }
}
.banner-three__shape-right {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 90%;
}
.banner-three__shape-right img {
  height: 100%;
}
@media (max-width: 575px) {
  .banner-three__shape-right {
    display: none;
  }
}
.banner-three__content {
  max-width: 100%;
}
@media (max-width: 991px) {
  .banner-three__content {
    margin-top: 100px;
  }
}
@media (max-width: 575px) {
  .banner-three__content {
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  .banner-three__content h4 {
    font-size: 12px;
  }
}
.banner-three__container {
  max-width: 1350px;
  padding: 30px;
  margin: 0 auto;
}
.banner-three__video-btn a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background: var(--white);
  color: var(--primary-color);
  font-size: 16px;
}
.banner-three__info {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.banner__inner-page {
  overflow: hidden;
  z-index: 1;
  text-transform: capitalize;
}
.banner__inner-page .shape1 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.banner__inner-page .shape2 {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.banner__inner-page .shape3 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.banner__inner-page::before {
  background: linear-gradient(270.07deg, #04fbfb00 0.07%, #00060c00 99.95%);
  z-index: -1;
  opacity: 0.75;
  padding-bottom: 35px;
}
@media (max-width: 767px) {
  .banner__inner-page {
    padding: 80px 0;
  }
}
.banner__inner-page h2 {
  margin-bottom: 10px;
  color: var(--white);
}
.banner__inner-page span {
  color: var(--white);
  font-weight: 500;
}
.banner__inner-page span i {
  color: var(--white);
}
.banner__inner-page a {
  color: var(--white);
  font-weight: 500;
}
.banner__inner-page a:hover {
  color: var(--primary-color);
}

.section-header h5 {
  color: #00cccc;
  padding-bottom: 20px;
  text-transform: uppercase;
  font-weight: 500;
}
.section-header h5 svg,
.section-header h5 img {
  margin-top: -5px;
}
@media (max-width: 767px) {
  .section-header h5 {
    padding-bottom: 5px;
  }
}
.section-header h2 {
  text-transform: capitalize;
}
.section-header p {
  margin-top: -90px;
}

.service-area {
  position: relative;
  overflow: hidden;
}
.service__shape {
  position: absolute;
  right: -100px;
  top: 80px;
  z-index: -1;
}
.service__icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background-color: var(--primary10);
  border-radius: 0px;
  transition: var(--transition);
}
.service__item {
  position: relative;
  z-index: 1;
  background-color: var(--white);
  padding: 40px 30px;
  box-shadow: var(--shadow);
}
.service__item .service-shape {
  position: absolute;
  top: 22px;
  right: 0;
  opacity: 0.3;
  transition: var(--transition);
}
.service__item h4 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.service__item p {
  transition: var(--transition);
}
.service__item::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: var(--gradient-bg);
  transition: var(--transition);
  z-index: -1;
}
.service__item.active .service__icon {
  background-color: var(--white);
}
.service__item.active .service-shape {
  opacity: 0.5;
}
.service__item.active h4 a {
  color: var(--white);
}
.service__item.active p {
  color: var(--white);
  opacity: 90%;
}
.service__item.active::after {
  width: 100%;
  right: unset;
  left: 0;
}
.service-two-area, .project-three-area {
  overflow: hidden;
  position: relative;
}
.service-two__shape-left {
  position: absolute;
  left: 0;
  top: 0;
}
.service-two__shape-right {
  position: absolute;
  right: 0;
  bottom: 0;
}
.service-two__content {
  position: relative;
  padding: -4px;
  padding-top: 0;
}
.service-two__content .icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border-radius: 0;
  background: var(--gradient-bg);
  margin-bottom: 30px;
  margin-top: -35px;
  transition: 1s;
}
.service-two__content .shape {
  position: absolute;
  top: 35px;
  right: 0;
  opacity: 0.3;
  transition: var(--transition);
}
.service-two__content p {
  margin-top: 10px;
  margin-bottom: 20px;
}
.service-two__item {
  box-shadow: var(--shadow);
  background-color: var(--main-bg);
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
  overflow: hidden;
}
.service-two__item:hover .icon {
  transform: rotateX(-360deg);
}
.service-two__item:hover .shape {
  opacity: 0.5;
}
.service-two__item:hover .read-more-btn {
  color: var(--primary-color);
}
.service-two__item:hover .read-more-btn i {
  color: var(--primary-color);
  margin-left: 10px;
}
.service-two__slider .swiper-slide-active .icon {
  transform: rotateX(-360deg);
}
.service-two__slider .swiper-slide-active .shape {
  opacity: 0.5;
}
.service-two__slider .swiper-slide-active .read-more-btn {
  color: var(--primary-color);
}
.service-two__slider .swiper-slide-active .read-more-btn i {
  color: var(--primary-color);
  margin-left: 10px;
}
.service-three-area {
  overflow: hidden;
  position: relative;
}
.service-three__shape {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.service-three__image img {
  border-radius: 8px;
}
.service-three__content {
  background-color: var(--white);
  padding: 20px 30px;
  display: flex;
  align-items: center;
  width: 85%;
  border-radius: 8px;
  box-shadow: var(--shadow);
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  transition: var(--transition);
  opacity: 1;
}
@media (max-width: 1399px) {
  .service-three__content {
    width: 95%;
  }
}
.service-three__content .icon {
  padding-right: 15px;
  margin-right: 15px;
  border-right: var(--border-1px);
}
.service-three__up-content {
  padding: 40px 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  transition: var(--transition);
  opacity: 0;
}
.service-three__up-content .icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border-radius: 0px;
  background: linear-gradient(180deg, #3c72fc -93.57%, #00060c 228.57%);
  margin: 0 auto;
}
.service-three__item {
  position: relative;
  border-radius: 8px;
  z-index: 1;
}
.service-three__item::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #3c72fc -21.56%, #00060c 252.19%);
  border-radius: 8px;
  transition: var(--transition);
}
.service-three__item:hover .service-three__content {
  opacity: 0;
  bottom: 0;
}
.service-three__item:hover .service-three__up-content {
  opacity: 1;
}
.service-three__item:hover::before {
  height: 100%;
  bottom: 0;
  top: unset;
}
@media (max-width: 1199px) {
  .service-three__item {
    margin-bottom: 40px;
  }
}
.service-single-area {
  overflow: hidden;
}
.service-single__left-item .image {
  position: relative;
}
.service-single__left-item .title {
  font-size: 30px;
}
.service-single__left-item ul li {
  font-weight: 500;
  color: var(--heading-color);
}
.service-single__left-item ul li i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background: var(--gradient-bg);
  color: var(--white);
  font-size: 10px;
  margin-right: 10px;
}
.service-single__right-item .service-category li:hover {
  background-color: var(--primary-color) !important;
}
.service-single__right-item .service-category li:hover a {
  color: var(--white) !important;
}
.service-single__right-item .service-category li:hover i {
  color: var(--white) !important;
}
.service-single__right-item .service-category li.active {
  background-color: var(--primary-color) !important;
}
.service-single__right-item .service-category li.active a {
  color: var(--white) !important;
}
.service-single__right-item .service-category li.active i {
  color: var(--white) !important;
}
.about-area, .about-two-area {
  overflow: hidden;
  position: relative;
  padding-bottom: 128px;
  padding-top: 44px;
}
.about__shape {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.about__shape img {
  width: 100%;
  animation: sway_Y 5s linear infinite alternate;
}
.about__left-item, .about-two__left-item {
  position: relative;
}
@media (max-width: 1199px) {
  .about__left-item, .about-two__left-item {
    max-width: 580px;
    margin: 0 auto;
  }
}
.about__left-item .big-image, .about-two__left-item .big-image {
  max-width: 386px;
  position: relative;
  z-index: 1;
}
.about__left-item .sm-image, .about-two__left-item .sm-image {
  max-width: 295px;
  position: absolute;
  right: 25px;
  bottom: 30px;
  z-index: 2;
}
.about__left-item .sm-image .video__btn-wrp, .about-two__left-item .sm-image .video__btn-wrp {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.about__left-item .circle-shape, .about-two__left-item .circle-shape {
  position: absolute;
  top: 30px;
  right: 80px;
}
.about__right-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}
.about__right-item .icon {
  width: 120px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  max-width: 120px;
  border-radius: 0;
}
.about__info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (max-width: 575px) {
  .about__info {
    gap: 5px;
  }
}
.about-two-area {
  padding-bottom: 120px;
}
@media (max-width: 767px) {
  .about-two-area {
    padding-bottom: 60px;
  }
}
.about-two__shape {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.about-two__left-item .circle-shape {
  right: unset;
  left: -32%;
  top: 12%;
  animation: rotate 5s linear infinite;
}
.about-two__left-item .dots {
  position: absolute;
  right: 15%;
  top: 0;
}
.about-two__left-item .shape-halper {
  position: absolute;
  top: 28%;
  right: 26%;
}
.about-two__left-item .sm-image {
  bottom: 20px;
}
.about-two__right-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 500px;
}
.about-two__right-item ul li {
  color: var(--heading-color);
  font-weight: 600;
}
.about-two__right-item ul li:not(:last-child) {
  margin-bottom: 20px;
}
.about-two__right-item ul li i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background: var(--gradient-bg);
  color: var(--white);
  font-size: 10px;
  margin-right: 10px;
}
.about-three-area {
  z-index: 1;
}
.about-three__box-up {
  position: absolute;
  top: 15px;
  right: 0;
  z-index: -1;
}
.about-three__box-down {
  position: absolute;
  top: 60px;
  right: 0;
  z-index: -1;
}
.about-three__info {
  max-width: 430px;
}
.about-three__info .icon {
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border-radius: 0px;
  width: 100%;
  max-width: 64px;
}
.about-three__left-item {
  max-width: 450px;
}
.about-three__left-item .about-call-icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: 1px solid var(--primary-color);
}
.about-three__left-item .about-call-icon span {
  width: 48px;
  height: 48px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background: var(--gradient-bg);
}
.about-three__image {
  max-width: 634px;
  float: right;
  z-index: 1;
}
.about-three__image .faq__line {
  left: 20% !important;
  z-index: -1;
  top: 10px;
}
.about-three__image .about-three-dot {
  position: absolute;
  left: 8%;
  bottom: 15%;
  z-index: -1;
}
.about-three__image .about-three-count {
  box-shadow: var(--shadow);
  width: 208px;
  position: absolute;
  top: 23%;
  left: 10px;
  background-color: var(--white);
  border-radius: 8px;
}
.about-three__image .about-three-count h3 {
  font-size: 28px;
  line-height: 40px;
}
.about-three__image .about-three-count h3 span {
  color: var(--secondary-color);
}
.about-three__image .about-three-count .icon {
  width: 40px;
}

.counter-area {
  position: relative;
}
.counter__shape {
  position: absolute;
  right: 0;
  bottom: 0;
}
.counter__wrp, .quote__wrp {
  overflow: hidden;
  padding: 80px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  margin-top: -120px;
  z-index: 2;
}
@media (max-width: 767px) {
  .counter__wrp, .quote__wrp {
    justify-content: center;
  }
}
.counter__item {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
.counter__item h3 {
  font-size: 36px;
  color: var(--white);
  font-weight: 700;
  line-height: 50px;
}
.counter__item h3 span {
  color: var(--white);
}

.case-area {
  overflow: hidden;
}
.case__image {
  position: relative;
}
.case__image::before {
  background: linear-gradient(0deg, #0f0d1d 0%, rgba(15, 13, 29, 0) 125%);
}
.case__content {
  position: absolute;
  bottom: 40px;
  width: 100%;
  left: 30px;
}
.case__btn {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 2;
}
.case__btn i {
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border-radius: 0;
  background: var(--gradient-bg);
  font-size: 20px;
  color: var(--secondary-color);
  color: var(--white);
  transition: var(--transition);
}
.case__btn::after {
  position: absolute;
  content: url(/assets/images/shape/case-btn-shape.png);
  right: -20px;
  top: 0px;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.case__btn::before {
  position: absolute;
  content: url(/assets/images/shape/case-btn-shape.png);
  left: -20px;
  top: -28px;
  z-index: -1;
  transform: rotate(180deg);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.case__btn:hover::before {
  left: -10px;
  top: -18px;
  opacity: 1;
  visibility: visible;
}
.case__btn:hover::after {
  right: -10px;
  top: -10px;
  opacity: 1;
  visibility: visible;
}
.case__btn:hover i {
  color: var(--primary-color);
  background: var(--white);
}
.case__item, .project-three__item {
  position: relative;
}
.case__item:hover .case__btn, .project-three__item:hover .case__btn {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}
.case__slider {
  margin-left: 19%;
}
@media (max-width: 1600px) {
  .case__slider {
    margin-left: 12%;
  }
}
@media (max-width: 1399px) {
  .case__slider {
    margin-left: 10%;
  }
}
@media (max-width: 991px) {
  .case__slider {
    margin-left: 0%;
    padding: 0 12px;
  }
}
.case__slider .swiper-slide.swiper-slide-active .case__item .case__btn, .case__slider .swiper-slide.swiper-slide-active .project-three__item .case__btn {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}
.case-two-area {
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding-bottom: 420px;
}
.case-two__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
}
.case-two__bg img {
  width: 100%;
}
.case-two__container {
  max-width: 1600px;
  padding: 0 15px;
  margin: 0 auto;
}
.case-two__content {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 1;
}
.case-two__content span {
  color: var(--primary-color);
  font-weight: 500;
  transition: var(--transition);
}
.case-two__btn {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: 1px solid var(--white);
  font-size: 20px;
  color: var(--white);
  z-index: 1;
}
.case-two__btn:hover {
  color: var(--primary-color);
  background-color: var(--white);
}
.case-two__item {
  position: relative;
  z-index: 1;
}
.case-two__item::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 0;
  content: "";
  background: linear-gradient(0deg, #3c72fc 0%, rgba(0, 0, 0, 0) 100%);
  transition: var(--transition);
}
.case-two__item:hover::after {
  height: 100%;
}
.case-two__item:hover .case-two__content span {
  color: var(--white);
}
.case-three-area {
  overflow: hidden;
}
.case-single-area {
  overflow: hidden;
}
.case-single__title {
  font-size: 30px;
  line-height: 32px;
}
.case-single__item .case-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.case-single__item .case-date li {
  font-weight: 500;
  color: var(--heading-color);
}
.case-single__item .case-date li span {
  font-weight: 400;
  color: var(--primary-color);
}
.case-single__item .case-challenge-list {
  max-width: 780px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.case-single__item .case-challenge li {
  font-weight: 500;
  color: var(--heading-color);
}
.case-single__item .case-challenge li i {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background: var(--gradient-bg);
  color: var(--white);
  font-size: 10px;
  margin-right: 10px;
}

.choose-area {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.choose__shape-left {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.choose__shape-right1 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.choose__shape-right2 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.choose__image {
  position: absolute;
  top: 0;
  right: 0;
  width: 47%;
  height: 100%;
  z-index: -1;
}
.choose__image img {
  height: 100%;
}
.choose__video-btn, .banner-video__video-btn, .service-single__video-btn {
  position: absolute;
  right: 20%;
  top: 45%;
  z-index: 2;
}
.choose__video-btn .video-btn a, .banner-video__video-btn .video-btn a, .service-single__video-btn .video-btn a {
  width: 90px;
  height: 90px;
  line-height: 90px;
  font-size: 25px;
}
@media (max-width: 991px) {
  .choose__video-btn, .banner-video__video-btn, .service-single__video-btn {
    right: 42%;
    top: 20%;
  }
}
@media (max-width: 450px) {
  .choose__video-btn, .banner-video__video-btn, .service-single__video-btn {
    right: 34%;
    top: 15%;
  }
}

.offer-area {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.offer__shadow {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.offer__shape-left {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.3;
}
.offer__shape-right {
  position: absolute;
  top: 0px;
  right: 0;
  opacity: 0.3;
}
.offer__icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  margin: 0 auto;
  background: linear-gradient(180deg, #3c72fc -210.71%, #00060c 100%);
  margin-top: -35px;
  transition: 1s;
}
.offer__item {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  padding-top: 0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
@media (max-width: 991px) {
  .offer__item {
    margin-top: 30px;
  }
}
.offer__item .shape-top {
  position: absolute;
  top: 50%;
  right: 50%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.offer__item .shape-bottom {
  position: absolute;
  bottom: 50%;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.offer__item:hover .shape-top {
  top: -1px;
  right: -1px;
  opacity: 1;
  visibility: visible;
}
.offer__item:hover .shape-bottom {
  position: absolute;
  bottom: -1px;
  left: -1px;
  opacity: 1;
  visibility: visible;
}
.offer__item:hover .offer__icon {
  background: var(--gradient-bg);
  transform: rotateY(360deg);
}
.offer__item:hover .offer__icon svg path {
  fill: #fff;
}

.brand__wrp {
  padding: 65px;
  background: var(--gradient-bg);
  margin-top: -85px;
  position: relative;
  z-index: 1;
}
.brand__shape {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.3;
}
.brand__image {
  max-width: 175px;
}
.brand-three-area {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.brand-three-area::before {
  background-color: var(--heading-color);
  opacity: 0.9;
  z-index: -1;
}
.brand-three__shape1 {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (max-width: 767px) {
  .brand-three__shape1 {
    display: none;
  }
}
.brand-three__line1 {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (max-width: 767px) {
  .brand-three__line1 {
    display: none;
  }
}
.brand-three__shape2 {
  position: absolute;
  left: 0;
  bottom: 0;
}
@media (max-width: 767px) {
  .brand-three__shape2 {
    display: none;
  }
}
.brand-three__line2 {
  position: absolute;
  left: 0;
  bottom: 0;
}
@media (max-width: 767px) {
  .brand-three__line2 {
    display: none;
  }
}

.process-area {
  overflow: hidden;
}
.process__image {
  max-width: 178px;
  padding: 10px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
}
.process__image img {
  width: 100%;
}
.process__image::after {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 1px dashed var(--primary-color);
  content: "";
  border-radius: 50%;
  position: absolute;
  animation: rotate 20s linear infinite;
}
.process__image .process-number {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background: var(--gradient-bg);
  color: var(--white);
  font-size: 18px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
}
.process__item {
  text-align: center;
  padding: 0 30px;
  position: relative;
}
@media (min-width: 992px) {
  .process__item {
    margin-bottom: 0px;
  }
}
.process__item .process-arry {
  position: absolute;
  top: 18%;
  right: -14%;
}
@media (max-width: 991px) {
  .process__item .process-arry {
    top: unset;
    right: unset;
    bottom: -110px;
    left: 40%;
  }
  .process__item .process-arry img {
    transform: rotate(90deg);
  }
}

.testimonial__arry-btn {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  position: relative;
}
.testimonial__arry-btn::after {
  position: absolute;
  content: "";
  width: 35%;
  height: 1px;
  background-color: var(--primary-color);
  right: 0;
  top: 25px;
  opacity: 0.5;
}
@media (max-width: 575px) {
  .testimonial__arry-btn::after {
    width: 30%;
  }
}
.testimonial__arry-btn::before {
  position: absolute;
  content: "";
  width: 35%;
  height: 1px;
  background-color: var(--primary-color);
  left: 0;
  top: 25px;
  opacity: 0.5;
}
@media (max-width: 575px) {
  .testimonial__arry-btn::before {
    width: 30%;
  }
}
.testimonial__item {
  position: relative;
  padding: -3px;
  background-color: var(--white);
  box-shadow: var(--shadow);
}
.testimonial__item .coma {
  position: absolute;
  top: 40px;
  right: 40px;
}
.testimonial-two-area {
  margin-top: -300px;
  position: relative;
  z-index: 1;
}
.testimonial-two__slider {
  padding: 20px 0;
}
.testimonial-two__item, .testimonial-three__item {
  background-color: var(--white);
  box-shadow: var(--shadow);
  padding: 40px;
  position: relative;
}
.testimonial-two__item .coma, .testimonial-three__item .coma {
  position: absolute;
  bottom: 40px;
  right: 40px;
}
.testimonial-two__item.dark-mode, .dark-mode.testimonial-three__item {
  background-color: var(--sub-bg);
}
.testimonial-three-area {
  overflow: hidden;
}
.testimonial-three__wrp {
  margin-left: 19%;
  margin-right: -70px;
}
@media (max-width: 1399px) {
  .testimonial-three__wrp {
    margin-left: 30px;
    margin-right: 30px;
  }
}
.testimonial-three__image {
  position: relative;
}
.testimonial-three__image svg {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translate(-50%);
}
.testimonial-three__item {
  box-shadow: none;
}

.talk-us__item {
  background: var(--gradient-bg);
  padding: 60px;
}
.talk-us__item .section-header h5 {
  padding-bottom: 5px;
}
.talk-us__item .section-header h2 {
  font-size: 30px;
}
.talk-us__item form label {
  color: var(--white);
  margin-bottom: 10px;
  text-transform: capitalize;
}
.talk-us__item form input {
  padding: 15px 20px;
  background-color: var(--white);
  border: none;
  outline: none;
  color: var(--paragraph);
  width: 100%;
}
.talk-us__item form textarea {
  padding: 15px 20px;
  background-color: var(--white);
  border: none;
  outline: none;
  color: var(--paragraph);
  width: 100%;
  height: 110px;
  resize: none;
}
.talk-us__item form button {
  padding: 15px 20px;
  background-color: var(--secondary-color);
  color: var(--white);
  font-weight: 600;
  width: 100%;
  text-align: center;
  margin-top: 15px;
  transition: var(--transition);
}
.talk-us__item form button:hover {
  opacity: 0.9;
}

.blog__image {
  position: relative;
  overflow: hidden;
}
.blog__image img {
  transition: var(--transition);
}
.blog__image .blog-tag {
  position: absolute;
  top: 15px;
  left: 15px;
  background: var(--gradient-bg);
  padding: 10px 22px;
}
.blog__image .blog-tag h3 {
  line-height: 22px;
  font-weight: 700;
}
.blog__image .blog-tag span {
  font-size: 12px;
  line-height: 22px;
}
.blog__content {
  padding: 30px;
}
.blog__content .blog-info {
  display: flex;
  align-items: center;
  gap: 22px;
}
.blog__content .blog-info li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog__content .blog-info li a {
  color: var(--paragraph);
  font-size: 14px;
  line-height: 22px;
}
.blog__content .blog-info li a:hover {
  color: var(--primary-color);
}
.blog__item, .blog-two__grid-item, .blog-two__list-item {
  box-shadow: var(--shadow);
}
.blog__item .read-more-btn, .blog-two__grid-item .read-more-btn, .blog-two__list-item .read-more-btn {
  color: var(--paragraph);
}
.blog__item:hover .read-more-btn, .blog-two__grid-item:hover .read-more-btn, .blog-two__list-item:hover .read-more-btn {
  color: var(--primary-color);
}
.blog__item:hover .read-more-btn i, .blog-two__grid-item:hover .read-more-btn i, .blog-two__list-item:hover .read-more-btn i {
  color: var(--primary-color);
  margin-left: 10px;
}
.blog__item:hover .blog__image img, .blog-two__grid-item:hover .blog__image img, .blog-two__list-item:hover .blog__image img {
  transform: scale(1.1) rotate(3deg);
  filter: brightness(70%);
}
.blog-two-area {
  overflow: hidden;
}
.blog-two__grid-item, .blog-two__list-item {
  border: 1px solid var(--border);
  padding: 20px;
}
.blog-two__grid-item .blog__content, .blog-two__list-item .blog__content {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.blog-two__list-item {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 575px) {
  .blog-two__list-item {
    flex-direction: column;
  }
}
.blog-two__list-item .blog__content {
  padding: 10px;
  flex-basis: 50%;
}
@media (max-width: 575px) {
  .blog-two__list-item .blog__content {
    flex-basis: 100%;
  }
}
.blog-single__title {
  font-size: 30px;
}
.blog-single__left-item:hover .image img {
  transform: scale(1) rotate(0deg);
}
.blog-single__left-item .fs-30 {
  font-size: 30px;
}
.blog-single__left-item .hilight-text {
  border-left: 4px solid var(--primary-color);
  padding: 40px;
}
.blog-single__left-item .hilight-text p {
  max-width: 650px;
  color: var(--heading-color);
  font-weight: 500;
  text-transform: capitalize;
  font-style: italic;
  line-height: 26px;
}
.blog-single__left-item .hilight-text svg {
  float: right;
  margin-top: -30px;
}
.blog-single__left-item .tags-share {
  padding: 20px 0;
  border-top: var(--border-1px);
  border-bottom: var(--border-1px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.blog-single__left-item .tags-share .tags {
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-single__left-item .tags-share .tags strong {
  color: var(--heading-color);
}
.blog-single__left-item .tags-share .tags a {
  padding: 2px 15px;
  font-size: 14px;
  font-weight: 600;
  border: var(--border-1px);
  text-transform: capitalize;
}
.blog-single__left-item .tags-share .tags a:hover {
  background-color: var(--primary-color);
  color: var(--white);
  border: 1px solid var(--primary-color);
}
.blog-single__left-item .tags-share .share {
  display: flex;
  align-items: center;
}
.blog-single__left-item .tags-share .share strong {
  color: var(--heading-color);
}
.blog-single__left-item .tags-share .share a {
  font-size: 20px;
  color: var(--paragraph);
  margin-left: 20px;
}
.blog-single__left-item .tags-share .share a:hover {
  color: var(--primary-color);
}
.blog-single__left-item .tags-share .share a.active {
  color: var(--primary-color);
}
.blog-single__right-item .item, .service-single__right-item .item {
  padding: 30px;
}
.blog-single__right-item .item .title, .service-single__right-item .item .title {
  position: relative;
  margin-bottom: 35px;
  font-weight: 700;
}
.blog-single__right-item .item .title::after, .service-single__right-item .item .title::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -10px;
  height: 2px;
  width: 40px;
  background-color: var(--primary-color);
}
.blog-single__right-item .item .serach-bar, .service-single__right-item .item .serach-bar {
  position: relative;
}
.blog-single__right-item .item .serach-bar input, .service-single__right-item .item .serach-bar input {
  width: 100%;
  border: var(--border-1px);
  padding: 16px;
}
.blog-single__right-item .item .serach-bar input:focus, .service-single__right-item .item .serach-bar input:focus {
  border: 1px solid rgba(13, 110, 253, 0.5);
}
.blog-single__right-item .item .serach-bar button, .service-single__right-item .item .serach-bar button {
  position: absolute;
  right: 15px;
  top: 18px;
  color: var(--span);
  background-color: var(--white);
}
.blog-single__right-item .item .category li, .service-single__right-item .item .category li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: var(--white);
  transition: var(--transition);
}
.blog-single__right-item .item .category li span, .service-single__right-item .item .category li span {
  transition: var(--transition);
}
.blog-single__right-item .item .category li:hover a, .service-single__right-item .item .category li:hover a {
  color: var(--primary-color);
}
.blog-single__right-item .item .category li:hover span, .service-single__right-item .item .category li:hover span {
  color: var(--primary-color);
}
.blog-single__right-item .item .category li:not(:last-child), .service-single__right-item .item .category li:not(:last-child) {
  margin-bottom: 10px;
}
.blog-single__right-item .item .single-post li, .service-single__right-item .item .single-post li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.blog-single__right-item .item .single-post li:not(:last-child), .service-single__right-item .item .single-post li:not(:last-child) {
  margin-bottom: 15px;
}
.blog-single__right-item .item .single-post li span, .service-single__right-item .item .single-post li span {
  font-size: 14px;
}
.blog-single__right-item .item .tags, .service-single__right-item .item .tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.blog-single__right-item .item .tags a, .service-single__right-item .item .tags a {
  padding: 5px 14px;
  font-weight: 500;
  border: var(--border-1px);
  text-transform: capitalize;
  background-color: var(--white);
  font-size: 14px;
}
.blog-single__right-item .item .tags a:hover, .service-single__right-item .item .tags a:hover {
  background-color: var(--primary-color);
  color: var(--white);
  border: 1px solid var(--primary-color);
}
.blog-single__review .image {
  max-width: 96px;
  width: 100%;
}
.blog-single__review .reply {
  border-radius: 30px;
  padding: 0px 12px;
  font-weight: 500;
}

.team-area {
  overflow: hidden;
}
.team__share {
  position: absolute;
  bottom: 30px;
  right: 30px;
}
@media (max-width: 991px) {
  .team__share {
    right: 20px;
  }
}
.team__share button {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background: var(--gradient-bg);
  color: var(--white);
  font-size: 18px;
}
.team__share ul {
  width: 40px;
  background: var(--gradient-bg);
  text-align: center;
  padding-top: 20px;
  padding-bottom: 12px;
  border-radius: 40px;
  margin-bottom: 15px;
  display: none;
  transition: var(--transition);
}
.team__share ul li:not(:last-child) {
  margin-bottom: 5px;
}
.team__share ul li a {
  color: var(--white);
}
.team__share:hover ul {
  display: block;
}
.team__content {
  position: absolute;
  max-width: 270px;
  padding: 20px 30px;
  background: var(--gradient-bg);
  bottom: 0;
  left: 0;
  width: 100%;
}
.team__item {
  position: relative;
}
.team__item::before {
  transition: var(--transition);
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(359.9deg, #00060c 0.09%, rgba(22, 36, 62, 0) 99.91%);
}
.team__item:hover::before {
  height: 100%;
  top: 0;
}
.team-single__image {
  overflow: hidden;
  position: relative;
}
.team-single__image img {
  width: 100%;
}
.team-single__image .team-info {
  position: absolute;
  left: 50%;
  bottom: 30px;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.team-single__image .team-info a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border-radius: 0;
  color: var(--white);
  border: 1px solid var(--white);
}
.team-single__image .team-info a:hover {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.team-single__image .team-info a.active {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.team-single__info .skills .experience-title {
  font-weight: 400;
}
.team-single__info .skills .progress {
  height: 8px;
}
.team-single__info .skills .progress .progress-bar {
  background-color: var(--primary-color);
}

.faq-area {
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.faq__shape {
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}
.faq__image {
  position: relative;
}
.faq__line {
  position: absolute;
  top: 30px;
  left: 30px;
}

.quote__wrp {
  display: block;
  padding: 60px;
  z-index: 1;
  margin-top: 0;
  margin-bottom: -120px;
}
.quote__shape {
  position: absolute;
  left: 0;
  border-top: 0;
  z-index: -1;
}

.pricing-area {
  position: relative;
  z-index: 1;
}
.pricing__shape-up {
  position: absolute;
  top: -120px;
  left: 0;
  z-index: -1;
}
.pricing__shape-down {
  position: absolute;
  top: -80px;
  left: 0;
  z-index: -1;
}
.pricing__shape {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.pricing__item {
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #3c72fc -1.09%, #00060c 175.27%);
  padding: 50px 40px;
}
.pricing__item .item-shape {
  position: absolute;
  bottom: 40px;
  right: 0;
  z-index: -1;
}
.pricing__item ul {
  padding: 40px 0;
}
.pricing__item ul li {
  color: var(--white);
}
.pricing__item ul li:not(:last-child) {
  margin-bottom: 20px;
}
.pricing__item .pricing-head {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(227, 227, 227, 0.4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.pricing__item .pricing-head h2 {
  color: var(--white);
}
.pricing__item .pricing-head h2 span {
  color: var(--white);
  font-size: 18px;
  font-weight: 400;
}
.pricing__item .pricing-icon {
  width: 94px;
  height: 90px;
  text-align: center;
  line-height: 90px;
}
.pricing__item .pricing-icon img {
  transition: 1s;
}
.pricing__item:hover .item-shape {
  animation: bobble 2s ease-in-out infinite alternate;
}
.pricing__item:hover .pricing-icon img {
  transform: rotateY(-360deg);
}

.project-three-area {
  padding-bottom: 71px;
  padding-top: 146px;
  margin-top: -120px;
}
.project-three__item .case__content {
  text-align: center;
}
.project-three__item .case__btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: unset;
  right: unset;
}

.banner-video-area {
  position: relative;
}
.banner-video__wrp {
  margin-top: -120px;
  z-index: 1;
}
.banner-video__wrp img {
  border-radius: 20px;
}
.banner-video__wrp::before {
  background-color: var(--heading-color);
  border-radius: 20px;
  opacity: 0.5;
}
.banner-video__video-btn, .service-single__video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  right: unset;
}

.contact__left-item {
  padding: 30px 25px;
}
.contact__left-item ul li {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.contact__left-item ul li i {
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background-color: var(--white);
  display: block;
  position: relative;
}
.contact__left-item ul li i::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 62px;
  line-height: 62px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: 1px dashed var(--primary-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.contact__left-item .social a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background-color: var(--white);
  color: var(--heading-color);
  margin-right: 5px;
}
.contact__left-item .social a:hover {
  color: var(--primary-color);
}
.contact__right-item {
  padding-left: 50px;
}
@media (max-width: 991px) {
  .contact__right-item {
    padding-left: 0;
  }
}
.contact__form form .nice-select {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  border: none;
  background-color: var(--sub-bg);
  margin-bottom: 30px;
  padding: 18px 20px;
  height: 70px;
  border-radius: 5px;
}
.contact__form form .nice-select .list {
  width: 100%;
}
.contact__form form label {
  font-family: var(--quicksand);
  color: var(--heading-color);
  margin-bottom: 15px;
  font-weight: 700;
}
.contact__form form input,
.contact__form form textarea {
  width: 100%;
  padding: 18px 20px;
  background-color: var(--sub-bg);
  border-radius: 4px;
  margin-bottom: 30px;
}
.contact__form form textarea {
  height: 200px;
}
.contact__map {
  margin-bottom: -10px;
}
.contact__map iframe {
  width: 100%;
  height: 600px;
}

.error__item {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.error__item h2 {
  font-size: 64px;
  line-height: 72px;
}
@media (max-width: 991px) {
  .error__item h2 {
    font-size: 40px;
    line-height: 50px;
  }
}
@media (max-width: 575px) {
  .error__item h2 {
    font-size: 30px;
    line-height: 40px;
  }
}

.footer-area, .footer-two-area {
  overflow: hidden;
  position: relative;
}
.footer__wrp {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
@media (max-width: 575px) {
  .footer__wrp {
    flex-direction: column;
    justify-content: left;
    align-items: unset;
  }
}
.footer__shape-solid-left {
  position: absolute;
  top: 0;
  left: 0;
}
.footer__shape-regular-left {
  position: absolute;
  top: 30px;
  left: 0;
}
@media (max-width: 767px) {
  .footer__shape-regular-left {
    display: none;
  }
}
.footer__shape-solid-right {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 767px) {
  .footer__shape-solid-right {
    display: none;
  }
}
.footer__shape-regular-right {
  position: absolute;
  top: 30px;
  right: 0;
}
@media (max-width: 767px) {
  .footer__shape-regular-right {
    display: none;
  }
}
.footer__shadow-shape {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
  animation: footer__shadow 10s linear infinite alternate;
}
.footer__item .logo {
  margin-top: -30px;
}
@media (max-width: 575px) {
  .footer__item .logo {
    margin-top: 0;
  }
}
.footer__item .footer-title {
  margin-bottom: 30px;
  color: var(--white);
}
.footer__item ul li:not(:last-child) {
  margin-bottom: 15px;
}
.footer__item ul li a {
  color: var(--white);
  opacity: 0.8;
}
.footer__item ul li a:hover {
  color: var(--primary-color);
  padding-left: 5px;
}
.footer__item .footer-contact li {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--white);
}
.footer__item .footer-contact li i {
  font-size: 24px;
}
.footer__item .footer-contact li h5 {
  color: var(--white);
}
.footer__item p {
  color: var(--white);
  opacity: 0.8;
}
.footer__item.item-big {
  max-width: 270px;
  width: 100%;
}
.footer__item.item-sm {
  max-width: 170px;
  width: 100%;
}
.footer__item .social-icon {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.footer__item .social-icon a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border-radius: 0;
  border: 1px solid rgba(227, 227, 227, 0.2);
  color: var(--white);
}
.footer__item .social-icon a:hover {
  background-color: var(--primary-color);
}
.footer__item .social-icon a.active {
  background-color: var(--primary-color);
}
.footer__copyright {
  position: relative;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 225, 0.2);
}
.footer__copyright p {
  color: var(--white);
  opacity: 0.8;
}
.footer__copyright a {
  color: var(--white);
  opacity: 0.8;
}
.footer__copyright a:hover {
  color: var(--primary-color);
}
.footer-two-area {
  padding-top: 17px;
}

@keyframes sway {
  0% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(0px);
  }
}
.sway__animation {
  animation: sway 3s linear infinite alternate;
}

@keyframes swayX {
  0% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0px);
  }
}
.sway__animationX {
  animation: swayX 3s linear infinite alternate;
}

@keyframes footer__shadow {
  0% {
    margin-left: -200px;
  }
  100% {
    margin-right: -200px;
  }
}
@keyframes sway_Y {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(20px);
  }
}
.sway_Y__animation {
  animation: sway_Y 3s linear infinite alternate;
}

@keyframes sway_YY {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-20px);
  }
}
.sway_Y__animationY {
  animation: sway_YY 3s linear infinite alternate;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.animation__rotate {
  animation: rotate 40s linear infinite;
}

@keyframes rotateY {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.animation__rotateY {
  animation: rotateY 40s linear infinite;
}

@keyframes bobble {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-20px) scale(1.1);
  }
}
.bobble__animation {
  animation: bobble 3s ease-in-out infinite alternate;
}

@-webkit-keyframes video-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes video-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}/*# sourceMappingURL=style.css.map */


.header-top-wrp {
  display: flex;
  justify-content: flex-end;
}
 
.heading-highlight {
  background-color: #084F6A;
  color: #ffffff; /* White text for contrast */
  padding: 20px 30px;
  border-radius: 10px;
  display: inline-block;
  font-weight: normal;
  line-height: 1.4;
}

.heading-highlight .subheading-text {
  font-size: 1.3em;
  display: block;
  margin-top: 10px;
  color: #DFF6FF; /* Optional lighter shade for subtext */
}


.service-two__item {
  background-color: #D9D9D9;
  padding: 20px; /* optional, adds spacing inside the box */
  border-radius: 8px; /* optional, makes corners rounded */
}


/* Make the image bigger and positioned absolutely */
.about__left-item .big-image img {
  width: 150%; /* Increase size */
  position: absolute;
  top: -50px;   /* Move it upward */
  right: -128px; /* Optional: shift image towards text */
  z-index: 1;
}

/* Create stacking context and relative positioning for the parent */
.about-area .row {
  position: relative;
}

/* Style the h2 and p elements with transparent black background */
.section-header h2,
.section-header p {
  background-color: rgba(22, 62, 100, 0.90); /* Transparent black */
  color: #fff;
  padding: 34px 59px;
  z-index: 3;
  position: relative; /* Ensure it's above the image */
  border-radius: 5px;
  font-size: 19px;
}

@media (max-width: 768px) {
  .about__left-item .big-image img {
    width: 100%;
    position: static;
  }
}



.footer__wrp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer__item {
  flex: 1;
  min-width: 250px;
}

.social-icon a {
  font-size: 20px;
  color: #fff;
  transition: 0.3s;
}

.social-icon a:hover {
  color: #00aaff; /* Accent color */
}

.footer-title {
  font-weight: 600;
  margin-bottom: 1rem;
}

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

ul li {
  margin-bottom: 0.5rem;
}

ul li a {
  color: #ccc;
  text-decoration: none;
}

ul li a:hover {
  color: #fff;
}


.footer a {
  color: #ccc;
  text-decoration: none;
}
.footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer h5, .footer h4 {
  font-size: 1.2rem;
}
.footer ul {
  margin-bottom: 0.5rem;
}
.social-icons a i {
  font-size: 2.2rem;
  color: #fff;
}

.footer {
  background: linear-gradient(to bottom, #163e64, #000000);
  color: white;
  padding-top: 5rem;
  padding-bottom: 4rem;
}


.service-two__item {
  border-radius: 10px;
  transition: all 0.3s ease;
}

.service-two__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.service-two__content h4 a {
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  padding: 20px 0;
  text-align: left;
  
}

.bg-light {
  background-color: #f8f9fa !important;
}

.stripe-shape {
  position: absolute;
  left: -50px; /* Move it to the left */
  top: 50%; /* Vertically center it relative to the parent */
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0.7; /* Optional: make it slightly transparent for better aesthetics */
}
.about__left-item {
  position: relative;
}
@media (max-width: 768px) {
  .stripe-shape {
    display: none;
  }
}

.about__left-item {
  position: relative;
}

.about__left-item .stripe-shape {
  position: absolute;
  top: 0; /* adjust as needed */
  left: 0; /* adjust as needed */
  z-index: 1;
}

.about__left-item .big-image {
  position: relative;
  z-index: 2;
}
.stripe-shape img {
  width: 170%; /* or set appropriate size */
  height: auto;
}
.social-icon-large {
  font-size: 24px; /* Change to desired size */
}

.service-two__item .image img {
  transform: scale(1.1); /* Increase the size slightly */
  transition: transform 0.3s ease-in-out;
}
.service-two__item .image img:hover {
  transform: scale(1.1);
}


.about-section {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding: 60px 0;
  flex-wrap: wrap;
}

.about-title {
  flex: 0 0 200px;
  font-size: 28px;
  font-weight: bold;
  color: #084F6A;
}

.about-description {
  flex: 1;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.about-description p {
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .about-section {
    flex-direction: column;
  }
  
  .about-title {
    margin-bottom: 15px;
  }
}






/* Reduced Height Layout */
.hr-layout {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #7F7F7F, #D9D9D9);
}

/* Image Section */
.hr-image-section {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.hr-image-section img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Content Section */
.hr-content-section {
  flex: 1;
  min-width: 300px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
}

.content-box {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 100%;
}

.content-box h2,
.content-box h4 {
  color: #006699;
  margin-bottom: 10px;
}

.content-box hr {
  border: none;
  height: 3px;
  background-color: #006699;
  width: 60px;
  margin: 0 0 20px;
}

.content-box p {
  color: #333;
  line-height: 1.7;
  font-size: 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .hr-layout {
    flex-direction: column;
  }
  
  .hr-image-section,
  .hr-content-section {
    padding: 15px;
  }
  
  .content-box {
    padding: 25px;
  }
  
  .content-box p {
    font-size: 15px;
  }
}



.vision-box:hover, .mission-box:hover {
  box-shadow: 0 8px 16px rgba(0, 188, 212, 0.2) !important;
  transition: all 0.3s ease;
}


.case-single-area {
  background-color: #ffffff; /* base background color */
  background-image: repeating-linear-gradient(
  45deg,
  #D9D9D9,
  #D9D9D9 10px,
  transparent 5px,
  transparent 3px
  );
  background-size: 40px 40px;
}


.case-challenge li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.case-challenge li i {
  margin-top: 4px; /* aligns icon vertically with first line of text */
}




/* cert */
.cert-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 30px;
}

.cert-box {
  background: #fff;
  color: #333;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-align: center;
  padding: 12px;
  width: calc(16.66% - 16px); /* smaller for desktop */
  min-width: 140px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.cert-box:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.cert-box img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.description {
  margin-top: 10px;
  font-weight: bold;
  font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .cert-box {
    width: calc(20% - 16px);
  }
}

@media (max-width: 992px) {
  .cert-box {
    width: calc(25% - 16px);
  }
}

@media (max-width: 768px) {
  .cert-box {
    width: calc(50% - 16px);
  }
}

@media (max-width: 480px) {
  .cert-box {
    width: 100%;
  }
}


/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%;height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.show {
  display: flex;
  opacity: 1;
}
.modal-content {
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  max-width: 473px;
  width: 90%;
  position: relative;
  text-align: center;
  color: #333;
}

.modal-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 20px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.close-btn {
  position: absolute;
  right: 16px;
  top: 14px;
  font-size: 26px;
  font-weight: bold;
  color: #444;
  cursor: pointer;
}

.btn-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-btn {
  background-color: #084F6A;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s;
  width: 100px;
}

.modal-btn:hover {
  background-color: #063b4d;
}

@media (max-width: 480px) {
  .modal-btn {
    width: 100%;
  }
}




.case-challenge.unified-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.case-challenge.unified-list li {
  background-color: #f5fafd;
  border-left: 4px solid #084F6A;
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.6;
  display: flex;
  align-items: center;
}

.case-challenge.unified-list li i {
  color: #084F6A;
  margin-right: 10px;
  font-size: 18px;
}



.case-challenge li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
  font-size: 16px;
  word-break: break-word;
}
.case-challenge i.fa-check {
  color: #084F6A; /* or your preferred theme color */
  margin-top: 3px; /* slight vertical adjustment for alignment */
  min-width: 16px; /* ensures spacing consistency */
}

@media (max-width: 576px) {
  .case-challenge li {
    font-size: 14px;
  }
}

/*
.case-challenge li {
flex-wrap: wrap;
}
*/

@media (max-width: 576px) {
  .case-challenge li {
    margin-bottom: 12px;
  }
}


.case-challenge li {
  display: flex;
  align-items: flex-start;
  gap: 10px; /* space between icon and text */
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.case-challenge i.fa-check {
  color: #084F6A; /* adjust to match your brand color */
  margin-top: 4px; /* aligns the icon vertically with first text line */
  min-width: 16px; /* prevents icon shifting with wrapped text */
}


@media (max-width: 576px) {
  .case-challenge li {
    font-size: 14px;
    gap: 8px;
  }
}

.case-challenge {
  padding-left: 0;
  list-style: none;
}

.case-challenge li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  line-height: 1.5;
}

.case-challenge li i {
  color: #084F6A; /* Your theme color */
  margin-top: 3px;
  flex-shrink: 0;
}

/* Optional: mobile tweaks */
@media (max-width: 576px) {
  .case-challenge li {
    font-size: 15px;
    flex-direction: row;
    align-items: flex-start;
  }
}

.automation-box {
  background: #0d2c39;
  padding: 25px 20px;
  border-radius: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
}

.automation-box h4 {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 1.1rem;
}

.automation-box p {
  font-size: 0.95rem;
  margin-bottom: 0;
}



.footer-row {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
}

.col.left {
  width: 220px;
}

.col.center {
  width: 400px;
}

.col.right {
  width: 220px;
}





/* Optional: mobile tweaks */
.gallery-container {
  position: relative;
  max-width: 1000px;
  margin: 50px auto;
  overflow: hidden;
  padding: 0 60px; /* ruang kiri/kanan untuk separuh gambar */
}

.gallery-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.gallery-item {
  flex: 0 0 60%; /* hanya 60% dari container */
  margin: 0 10px;
  transition: transform 0.3s ease;
}

.gallery-item img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Butang navigasi */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
  z-index: 10;
  font-size: 24px;
  border-radius: 50%;
}

.left-btn {
  left: 10px;
}

.right-btn {
  right: 10px;
}

.nav-btn:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Responsive */
@media (max-width: 768px) {
  .gallery-container {
    padding: 0 30px;
  }
  
  .gallery-item {
    flex: 0 0 80%;
  }
  
  .nav-btn {
    padding: 8px;
    font-size: 18px;
  }
}





/* flip-card.css */

/* Container with 3D perspective */
.flip-card {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  overflow: hidden;
}

.flip-card-front img {
  width: 500px;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 10px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.473);
  border: 2px solid rgb(0, 79, 104);
}

.flip-card-back {
  background-color: #084F6A;
  color: white;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
}




.flip-card {
  min-height: 300px; /* atau 350px, ikut keperluan */
}

.flip-card-front,
.flip-card-back {
  top: 0;
  left: 0;
}




/* Gaya untuk bahagian harmoni sahaja */
.harmoni-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Container dalam harmoni-boxes */
.harmoni-boxes .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: 600px;
}

/* Bahagian utama */
.harmoni-boxes {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

/* Susun semua kotak dalam 1 baris */
.harmoni-boxes .container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* fallback untuk skrin kecil */
  gap: 0px;
  max-width: 100%;
}

/* Kotak lebih panjang */
.harmoni-boxes .box {
  width: 200px;   /* Lebar asal: 120px → kini lebih panjang */
  height: 283px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  border-radius: 8px;
}

/* Warna harmoni */
.harmoni-boxes .box1 { background-color: #ffa07a; }
.harmoni-boxes .box2 { background-color: #f08080; }
.harmoni-boxes .box3 {background-color: #5c97cf;}
.harmoni-boxes .box4 {background-color: #2067ab;}
.harmoni-boxes .box5 {background-color: #5c97cf;}

/* Hover effect */
.harmoni-boxes .box:hover {
  background-color: #163e64;
  cursor: pointer;
}

/* Responsive: susun menegak jika skrin kecil */
@media (max-width: 768px) {
  .harmoni-boxes .container {
    flex-direction: column;
  }
  
  .harmoni-boxes .box {
    width: 90vw;
    height: 100px;
    font-size: 16px;
  }
}






/* Styling utama */
.custom-case-area {
  background-color: #f9f9f9;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 60px;
}

.case__slider {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 15px;
}

.case__item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.case__item:hover {
  transform: translateY(-5px);
}

.case__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px 12px 0 0;
}

/* Swiper pagination styling */
.case__dot.swiper-pagination {
  position: relative;
  margin-top: 30px;
}

.case__dot .swiper-pagination-bullet {
  background: #333;
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.3s;
}

.case__dot .swiper-pagination-bullet-active {
  background: #ff5722;
  opacity: 1;
  transform: scale(1.2);
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .custom-case-area {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .case__item {
    border-radius: 8px;
  }
  
  .case__img img {
    border-radius: 8px 8px 0 0;
  }
}

@media screen and (max-width: 480px) {
  .case__slider {
    padding: 0 10px;
  }
}

/* custom-testimonial.css */

.custom-testimonial {
  background-color: #f7f7f7; /* Kelabu lembut */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 100px 0;
}






/* custom-testimonial.css */

/* Umum untuk section testimonial */
.custom-testimonial {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 100px 0;
}

/* Tajuk dan subtitle */
.custom-testimonial .section-header h5 {
  font-size: 14px;
  font-weight: 600;
  color: #3C72FC;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.custom-testimonial .section-header h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #f7f7f7;
}

.custom-testimonial .section-header p {
  font-size: 16px;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Testimonial item */
.custom-testimonial .testimonial__item {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
  text-align: left;
  position: relative;
  transition: all 0.3s ease;
}

.custom-testimonial .testimonial__item:hover {
  transform: translateY(-5px);
}

/* Icon koma */
.custom-testimonial .testimonial__item .coma {
  position: absolute;
  top: -10px;
  right: -10px;
  opacity: 0.08;
  z-index: 0;
}

/* Gambar pelanggan */
.custom-testimonial .testimonial__item img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

/* Maklumat pelanggan */
.custom-testimonial .testi-info h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #222;
}

.custom-testimonial .testi-info p {
  margin: 0;
  font-size: 14px;
  color: #888;
}

/* Bintang */
.custom-testimonial .star i {
  color: #FFD700;
  font-size: 14px;
}

.custom-testimonial .star .disable {
  color: #ccc;
}

/* Butang navigasi carousel */
.custom-testimonial .testimonial__arry-btn {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.custom-testimonial .testimonial__arry-btn button {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 16px;
  color: #333;
  padding-bottom: 34px;
  transition: all 0.3s ease;
}

.custom-testimonial .testimonial__arry-btn button:hover {
  background: #3C72FC;
  color: #fff;
  border-color: #3C72FC;
}

/* Responsive */
@media (max-width: 768px) {
  .custom-testimonial .section-header h2 {
    font-size: 28px;
  }
  
  .custom-testimonial .testimonial__item {
    padding: 20px;
  }
  
  .custom-testimonial .testimonial__arry-btn {
    justify-content: center;
  }
}


/* projek */
.projek-container {
  display: flex;
  height: 100vh;
  flex-direction: row;
  font-family: Arial, sans-serif;
}

.left-panel {
  flex: 1;
  background-color: #ffffff;
  padding: 30px 231px;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid #ccc;
}

.right-panel {
  flex: 5;
  background-color: #f4f4f4;
  padding: 25px;
  overflow-y: auto;
}

.image-gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.image-gallery img {
  width: calc(33.33% - 10px);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.image-gallery img:hover {
  transform: scale(1.03);
}

.section-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #333;
}

.project-list {
  list-style: none;
  margin-bottom: 20px;
  padding: 0;
}

.project-list li {
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
}

.project-list li:hover {
  background-color: #007bff;
  color: #fff;
}

.project-list li.active {
  background-color: #0056b3;
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .projek-container {
    flex-direction: column;
    height: auto;
  }
  
  .left-panel,
  .right-panel {
    position: relative;
    height: auto;
    flex: unset;
    border: none;
    padding: 20px;
  }
  
  .left-panel {
    order: 1;
    border-bottom: 1px solid #ccc;
  }
  
  .right-panel {
    order: 2;
  }
  
  .image-gallery img {
    width: 100%;
  }
}
.image-box {
  width: calc(33.33% - 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 21px;
}

.image-box img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.image-box img:hover {
  transform: scale(1.03);
}

.image-desc {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
}

/* Responsive override (jika perlu) */
@media (max-width: 768px) {
  .image-box {
    width: 100%;
  }
}
.image-desc {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
  max-height: 60px;         /* Had ketinggian */
  overflow: auto;           /* Tambah scrollbar jika perlu */
  padding: 5px;
}

/* Galeri container */
#project-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center; /* center gallery items */
}

/* Kotak gambar */
.image-box {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9; /* latar belakang lembut */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
}

/* Gambar */
.image-box img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

/* Deskripsi */
.image-desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  text-align: justify;
  min-height: 40px; /* pastikan kotak seragam */
}

/* Responsive: tablet (768px ke bawah) */
@media (max-width: 768px) {
  .image-box {
    max-width: 45%; /* 2 gambar per baris */
  }
}

/* Responsive: telefon bimbit (480px ke bawah) */
@media (max-width: 480px) {
  .image-box {
    max-width: 100%; /* 1 gambar per baris penuh */
  }
}













.projek-container {
  display: flex;
}

.left-panel {
  width: 25%;
  padding: 20px;
}

.right-panel {
  width: 75%;
  padding: 20px;
}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.image-box {
  width: calc(33.333% - 20px); /* 3 per row with gap */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 6px;
}

.image-box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.image-desc {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ============================
Event Section - Full CSS
============================ */

.event-section {
  text-align: center;
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #f9f9f9;
}

.event-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Header */
.event-header {
  margin-bottom: 50px;
}

.event-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #222;
}

.event-subtitle {
  font-size: 18px;
  color: #555;
  margin-bottom: 25px;
}

.event-btn {
  display: inline-block;
  padding: 12px 28px;
  background-color: #007BFF;
  color: white;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.event-btn:hover {
  background-color: #0056b3;
}

/* Swiper Slider */
.event-slider {
  position: relative; /* Important for absolute pagination */
  padding-bottom: 70px; /* Reserve space for pagination below */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image box inside slider */
.event-img-box {
  width: 100%;
  max-width: 550px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.event-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional hover effect */
.event-img-box:hover {
  transform: scale(1.03);
}

/* Swiper Pagination (dots below the slider) */
.event-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* Swiper Pagination Dots Styling (Optional) */
.event-pagination .swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
  transition: all 0.3s ease;
}

.event-pagination .swiper-pagination-bullet-active {
  background: #007BFF;
  width: 12px;
  height: 12px;
}

/* ============================
Responsive
============================ */
@media (max-width: 992px) {
  .event-title {
    font-size: 30px;
  }
  
  .event-subtitle {
    font-size: 16px;
  }
  
  .event-img-box {
    height: 350px;
  }
}

@media (max-width: 768px) {
  .event-img-box {
    height: 100%  ;
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .event-title {
    font-size: 24px;
  }
  
  .event-subtitle {
    font-size: 14px;
  }
  
  .event-btn {
    width: 100%;
    max-width: 300px;
    padding: 10px 20px;
    font-size: 16px;
  }
  
  .event-img-box {
    height: 250px;
  }
}














/* button posisi sebelah kiri */	
.apply-btn-wrapper {
  margin-top: 15px;
  z-index: 5;
}

.career-apply-btn {
  display: inline-block;
  padding: 12px 25px;
  background-color: #00cccc;
  color: #fff;
  font-weight: 600;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.career-apply-btn i {
  transition: transform 0.3s ease;
}

.career-apply-btn:hover {
  background-color: #009999;
  transform: translateY(-2px);
}

.career-apply-btn:hover i {
  transform: translateX(5px);
}

/* Responsif */
@media (max-width: 768px) {
  .career-apply-btn {
    font-size: 15px;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .career-apply-btn {
    font-size: 14px;
    padding: 8px 18px;
  }
}

/* Certification Slide Section */
/* Certification Slide */
.certification-slide {
  padding: 40px 0;
  overflow: hidden;
}

.cert-bg {
  background: linear-gradient(#f5f5f5, #e0e0e0); /* tone-to-tone bg */
  padding: 20px 0;
}

.cert-container {
  position: relative;
  max-width: 1000px;
  margin: auto;
  overflow: hidden;
}

.cert-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.cert-carousel::-webkit-scrollbar {
  display: none;
}

.cert-item {
  flex: 0 0 auto;
  width: 300px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  background: #fff;
}

.cert-item img {
  width: 100%;
  display: block;
}

.cert-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #00000088;
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 6px 10px;
  cursor: pointer;
}

.cert-btn.left {
  left: 10px;
}

.cert-btn.right {
  right: 10px;
}

@media (max-width: 600px) {
  .cert-item {
    width: 220px;
  }
}

/* GALLERY SLIDE BERPUSTING - Custom Coverflow */

.event-section {
  background-color: #f9f9f9;
  padding: 120px 0;
}

.event-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.event-header {
  margin-bottom: 60px;
}

.event-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #222;
}

/* Swiper Wrapper */
.event-slider {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.event-img-box {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.event-img-box img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* Optional: scaling on hover */
.swiper-slide:hover img {
  transform: scale(1.05);
}

/* Coverflow effect styling */
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 900px !important;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.banner-area .swiper-slide {
  height: 900px !important;
}

.event-section .swiper-slide {
  height: 304px !important;
}

.swiper-slide-active {
  transform: scale(1.2) translateZ(50px);
  z-index: 10;
}

.swiper-pagination {
  position: relative;
  bottom: 0;
}

/* GAMBAR BESAR SEBELAH KIRI */
.big-image-left-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.big-image-left-section .image-container img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.big-image-left-section .vision-box {
  background-color: #fff;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.big-image-left-section .vision-box .icon i {
  font-size: 40px;
  color: #00bcd4;
}

.big-image-left-section .vision-box .section-title {
  color: #0d2b36;
  margin-bottom: 15px;
}

.big-image-left-section .vision-text {
  color: #0d2b36;
  line-height: 1.6;
}

.big-image-left-section .company-description p {
  color: #333;
  line-height: 1.8;
  margin-bottom: 15px;
}
/* tambah */
.about__right-item {
  background-color: #fff;
  padding: 25px;
  border-radius: 10px;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.about__right-item:hover {
  transform: translateY(-5px);
}


/* vertical-align-top.css */

.vertical-align-top-section {
  background-color: #163e64;
  padding-top: 120px;
  padding-bottom: 120px;
}

.vertical-align-top-section .row {
  align-items: flex-start !important; /* Force vertical alignment to top */
  margin-bottom: 3rem;
}

.vertical-align-top-section .col-md-4 img {
  width: 100%;
  border-radius: 10px;
}

.vertical-align-top-section .col-md-8 > div {
  padding: 20px;
  background-color: #163e64;
  border-radius: 10px;
  height: 100%;
  color: #fff;
}

.vertical-align-top-section h4 {
  color: #fff;
}

.vertical-align-top-section ul li {
  color: #f7f2f2;
  margin-bottom: 0.5rem;
  /* list-style: disc inside; */
}



/* TESTIMONI DARI CARPETON PEOPLE */
.testimoni-section {
  text-align: center;
  padding: 40px 20px;
  background-color: #ffffff;
  max-width: 600px;
  margin: 0 auto;
  font-family: sans-serif;
}

.section-title {
  font-size: 20px;
  margin-bottom: 30px;
  font-weight: bold;
}

.testimonial-slider {
  position: relative;
}

.testimonial-slide {
  display: none;
  animation: fadeIn 1s ease-in-out;
}

.testimonial-slide.active {
  display: block;
}

.testimonial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonial-profile {
  text-align: center;
  margin-bottom: 15px;
}

.profile-pic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.profile-name {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.profile-role {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* Testimoni Box */
.testimonial-box {
  position: relative;
  background-color: #007BFF;
  color: white;
  padding: 15px 20px;
  border-radius: 10px;
  width: 100%;
  text-align: left;
}


/* Navigation Bullets */
.testimonial-nav {
  margin-top: 20px;
}

/* .bullet {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #bbb;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.bullet.active {
  background-color: #007BFF;
} */

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (min-width: 600px) {
  .testimonial-content {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
  
  .testimonial-profile {
    width: 30%;
    text-align: center;
  }
  
  .testimonial-box {
    width: 70%;
  }
}

/* ========================
Testimoni Section (Professional)
======================== */
.testimoni-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #ffffff;
  max-width: 1328px;
  margin: 0 auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

.section-title {
  font-size: 32px;
  margin-bottom: 40px;
  font-weight: 700;
  color: #0a2f4a;
}

.testimonial-slider {
  position: relative;
}

.testimonial-slide {
  display: none;
  animation: fadeIn 0.6s ease-in-out;
}

.testimonial-slide.active {
  display: block;
}

.testimonial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 30px;
  border-radius: 15px;
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); */
  transition: all 0.3s ease-in-out;
}

.testimonial-profile {
  text-align: center;
  margin-bottom: 20px;
}


.profile-pic {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  border: 3px solid #007BFF;
}

.profile-name {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #007BFF;
}

.profile-role {
  margin: 0;
  font-size: 15px;
  color: #666;
}

/* Navigation Bullets */
.testimonial-nav {
  margin-top: 30px;
  text-align: center;
}
/* 
.bullet {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.bullet.active {
  background-color: #007BFF;
} */

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (min-width: 768px) {
  .testimonial-content {
    flex-direction: row;
    text-align: left;
    gap: 30px;
  }
  
  .testimonial-profile {
    width: 30%;
    text-align: center;
  }
  
  .testimonial-box {
    width: 100%;
  }
  
}



/* Rendahkan kotak lagi */
.vision-mission .about__right-item {
  padding: 10px 15px !important; /* Kurangkan padding atas bawah ke 10px */
  min-height: auto !important; /* Pastikan tak ada min-height */
  height: auto !important; /* Pastikan tinggi auto ikut content */
}

/* Line height teks sikit kecil supaya jimat ruang */
.vision-mission .content p {
  line-height: 1.3 !important; /* Kurangkan dari 1.6 ke 1.3 */
  margin-bottom: 0 !important; /* Buang margin bawah kalau ada */
}

/* Heading pun kecilkan sikit */
.vision-mission .content h4 {
  margin-bottom: 6px !important;
}

/* Pastikan icon tak tambah padding/margin */
.vision-mission .icon {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
/* Parent container buat flexbox dan stretch anak */
.vision-mission .row.g-4 {
  display: flex;
  flex-wrap: wrap; /* supaya mobile tetap wrap */
  gap: 1.5rem; /* jarak antara kotak */
}

/* Anak yang berisi kotak vision & mission stretch tinggi sama */
.vision-mission .col-md-6 {
  display: flex;
}

/* Kotak dalam stretch penuh tinggi parent .col-md-6 */
.vision-mission .about__right-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* content start from top */
  padding: 15px !important; /* adjust padding ikut nak */
  min-height: auto !important;
  height: auto !important;
}
.vision-mission .row.g-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.vision-mission .col-md-6 {
  flex: 1 1 50%;
  display: flex;
}

.vision-mission .about__right-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 15px !important; /* adjust ikut kesesuaian */
}
/* Biar kedua kotak vision dan mission sama tinggi */
.vision-mission .row > .col-md-6 {
  display: flex;
  flex-direction: column;
}

/* Biar kotak isi (about__right-item) stretch penuh */
.vision-mission .about__right-item {
  flex: 1;
  padding: 15px !important; /* ikut keperluan */
}

.vision-mission .row > .col-md-6 {
  display: flex;
}

.vision-mission .about__right-item {
  flex: 1;
  display: flex;
  align-items: center; /* tengah vertical isi icon + content */
  border-radius: 10px;
  
  flex-direction: row;
}

/* Icon container supaya icon vertical center */
.vision-mission .icon {
  min-width: 50px; /* pastikan ruang untuk icon */
}

/* Responsive tweak */
@media (max-width: 767px) {
  .vision-mission .about__right-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .vision-mission .icon {
    margin-bottom: 15px;
  }
}

/* add-on faz */
.kscroll-gap-main {
  scroll-margin-top: 180px;
}

.kscroll-gap {
  scroll-margin-top: 104px;
}

.kscroll-gap-footer {
  scroll-margin-top: 180px;
}

.section-highlight {
  position: relative;
  z-index: 1;
}

.section-highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgb(231, 231, 231);
  z-index: -1;
  opacity: 1;
  transition: opacity 1s ease;
}

.section-highlight.fade-out::before {
  opacity: 0;
}


/* ========== GLOBAL CONTAINER ========== */
.buat-lagi-gempak {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #222;
}

/* ========== FLEX WRAPPER ========== */
.buat-lagi-gempak .juta2-wrapper {
  display: flex;
  flex-direction: row;
  gap: 30px;
}

/* ========== SIDEBAR ========== */
.buat-lagi-gempak .juta2-sidebar {
  position: sticky;
  top: 100px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
  font-weight: 600;
  color: #0a2f4a;
  height: fit-content;
  z-index: 9;
  border: 1px solid #ddd;
}

.buat-lagi-gempak .juta2-sidebar nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.buat-lagi-gempak .juta2-sidebar nav ul li {
  margin-bottom: 15px;
}

.buat-lagi-gempak .juta2-sidebar nav ul li a {
  display: block;
  color: #444;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.95rem;
  border-radius: 5px;
  padding: 0px 15px;
  transition: all 0.3s ease;
}

.buat-lagi-gempak .juta2-sidebar nav ul li a:hover {
  background-color: #08283f;
  color: #fff;
}

/* ========== CONTENT CONTAINER ========== */
.buat-lagi-gempak .juta2-content {
  flex: 1;
}

.buat-lagi-gempak .container-sustainability {
  margin-bottom: 50px;
}

.buat-lagi-gempak h2 {
  font-size: 2rem;
  margin-bottom: 25px;
  color: #003366;
  border-bottom: 3px solid #0a2f4a;
  padding-bottom: 8px;
  font-weight: 700;
}

/* ========== CIRCLE BOXES ========== */
.buat-lagi-gempak .circle-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-start;
}

.buat-lagi-gempak .circle-box {
  flex: 1 1 calc(33.333% - 15px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  max-width: 30%;
}

.buat-lagi-gempak .circle-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.circle-box {
  flex: 1;
  background: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 15px;
}

.circle-box h3 {
  text-align: left !important;
  padding: 15px 0;
  min-height: 80px;
  display: flex;
  margin-bottom: 10px;
}

.circle-box p {
  margin-top: auto;
}

.buat-lagi-gempak .circle-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* overflow: hidden; */
  border-radius: 12px;
  margin-bottom: 15px;
}

.buat-lagi-gempak .circle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.buat-lagi-gempak h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #004080;
  font-weight: 700;
  line-height: 1.3;
}

.buat-lagi-gempak p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  flex-grow: 1;
  text-align: left;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .buat-lagi-gempak .juta2-wrapper {
    flex-direction: column;
  }
  
  .buat-lagi-gempak .juta2-sidebar {
    position: relative;
    top: 0;
    width: 100%;
    margin-bottom: 30px;
  }
  
  .buat-lagi-gempak .circle-boxes {
    justify-content: center;
  }
  
  .buat-lagi-gempak .circle-box {
    flex: 1 1 100%;
    max-width: 400px;
  }
}

@media (max-width: 480px) {
  .buat-lagi-gempak {
    padding: 30px 15px;
  }
  
  .buat-lagi-gempak h2 {
    font-size: 1.5rem;
  }
  
  .buat-lagi-gempak h3 {
    font-size: 1rem;
  }
  
  .buat-lagi-gempak p {
    font-size: 0.9rem;
  }
}

/* carousel */
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");

input[type=radio] {
  display: none;
}

.card {
  position: absolute;
  width: 60%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform .4s ease;
  cursor: pointer;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}
.cards img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
#item-1:checked ~ .cards #song-3, #item-2:checked ~ .cards #song-1, #item-3:checked ~ .cards #song-2 {
  transform: translatex(-40%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-2, #item-2:checked ~ .cards #song-3, #item-3:checked ~ .cards #song-1 {
  transform: translatex(40%) scale(.8);
  opacity: .4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-1, #item-2:checked ~ .cards #song-2, #item-3:checked ~ .cards #song-3 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
  
  img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
  }
}

.player {
  background-color: #fff;
  border-radius: 8px;
  min-width: 320px;
  padding: 16px 10px;
}

.upper-part {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  height: 36px;
  overflow: hidden;
}

.play-icon{ margin-right: 10px; }

.song-info {
  width: calc(100% - 32px);
  display: block;
}

.song-info .title {
  color: #403d40;
  font-size: 14px;
  line-height: 24px;
}

.sub-line {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.subtitle, .time {
  font-size: 12px;
  line-height: 16px;
  color: #c6c5c6;
}

.time {
  font-size: 12px;
  line-height: 16px;
  color: #a5a5a5;
  font-weight: 500;
  margin-left: auto;
}

.progress-bar {
  height: 3px;
  width: 100%;
  background-color: #e9efff;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  display: block;
  position: relative;
  width: 60%;
  height: 100%;
  background-color: #2992dc;
  border-radius: 6px;
}

.info-area {
  width: 100%;
  position: absolute;
  top: 0;
  left: 30px;
  transition: transform .4s ease-in;
}

#item-2:checked ~ .player #test {
  transform: translateY(0);
}

#item-2:checked ~ .player #test  {
  transform: translateY(-40px);
}

#item-3:checked ~ .player #test  {
  transform: translateY(-80px);
}

@media (max-width: 991px) {
  .juta2-sidebar2 {
    position: static;
    top: auto;
  }
}

.sticky {
  position: sticky;
  top: 100px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 1rem;
}

.grid-box {
  background-color: #f8f9fa;
  text-align: center;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.grid-box .icon {
  margin-bottom: 1rem;
}

.grid-box h4 {
  margin-bottom: 0.5rem;
}

.grid-box p {
  text-align: left;
}

.swiper-slide.slide-right .container {
    display: flex;
    justify-content: flex-end; /* Tolak content ke kanan */
}

.swiper-slide.slide-right .banner__content {
    text-align: right;
    max-width: 600px; /* penting supaya content tak full width */
}

@media (max-width: 767px) {
  .swiper-slide.slide-right .banner__content {
    text-align: center;
    margin-left: unset;
    margin-right: unset;
  }
}

.testimonial-name {
  text-align: left;
  margin-left: 25px;
}

.profile-name {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: rgb(20, 112, 139);
}

.profile-role {
  margin: 0;
  font-size: 14px;
  color: rgb(20, 112, 139);
  font-style: italic;
}

/* Testimoni Box */
.testimonial-box {
  background-color: #0a2f4a;
  color: white;
  padding: 20px 25px;
  border-radius: 10px;
  max-width: 100%;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

.testimonial-box::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 150px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 0px;
  border-color: #0a2f4a transparent transparent transparent;
}

.kmodal-cert-img {
  width: 2500px;
  height: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.krttx-list {
  list-style: none;
  padding-left: 0 !important;
  margin: 0;
}

.krttx-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

/* .bullet {
  width: 7px;
  height: 7px;
  display: inline-block;
  background-color: #0a324e;
  border-radius: 50px;
  margin-top: 10px;
  margin-right: 10px;
} */



.bullet::after {
  content: "•";
  color: #fff;
  font-size: 30px;
  line-height: 1;
  margin-right: 10px;
  margin-top: 2px;
  display: inline-block;
  top: -7px;
    position: relative;
}

.bullet-blue::after {
  content: "•";
  color: #084F6A;
  font-size: 30px;
  line-height: 1;
  margin-right: 10px;
  margin-top: 2px;
  display: inline-block;
  top: -7px;
    position: relative;
}

/* .bullet2 {
width: 5px;
height: 5px;
display: inline-block;
background-color: #fff;
border-radius: 50px;
margin-top: 10px;
margin-right: 10px;
} */

.bullet2::after {
  content: "•";
  color: #fff;
  font-size: 20px;
  line-height: 1;
  margin-right: 10px;
  margin-top: 2px;
  display: inline-block;
}

.text {
  flex: 1;
  color: #212529
}

/* k-card */
.k-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.k-card .card {
  width: 195px;
  height: 285px;
  background: #ffffff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: 0.2s ease-in-out;
  overflow: hidden;
  position: relative;
}

/* hide when hovered */
.k-card .card h3 {
  position: absolute;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-size: 130px;
  font-weight: bold; 
}

.k-card .card:hover h3,
.k-card .card:hover .overlay {
  display: none;
}

.k-card img {
  height: 104%;
  width: 104%;
  position: absolute;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: 1;
  object-fit: cover;
  opacity: 1;
  visibility: visible;
}

.k-card .card:hover img {
  opacity: 0;
  visibility: hidden;
}

.k-card .card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 114, 151, 0.7);
  z-index: 3;
}

.k-card .textBox {
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  transition: 0.2s ease-in-out;
  z-index: 2;
  padding: 20px;
  text-align: center;
}

.k-card .textBox > .text {
  font-weight: bold;
}

.k-card .textBox > .head {
  font-size: 17px;
}

.k-card .textBox > .price {
  font-size: 17px;
}

.k-card .textBox > span {
  font-size: 12px;
  color: lightgrey;
}

.k-card .card:hover > .textBox {
  opacity: 1;
}

.k-card .card:hover > img {
  height: 65%;
  filter: blur(7px);
  animation: anim 3s infinite;
}

@keyframes anim {
  0% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-20px);
  }
  
  100% {
    transform: translateY(0);
  }
}

.k-card .card:hover {
  transform: scale(1.04) rotate(-1deg);
}

.title-about-01 h3 {
  color: white;
  text-align: center;
  font-size: 40px;
}

/* bg full colour */
.bg-about-01 {
  background-color: #0a2f4a;
}

.bg-about-02 {
  background-color: #10579c;
}

.bg-about-03 {
  background-color: #2574bf;
}

.bg-about-04 {
  background-color: #3d5b72;
}

.description-about-01 {
  padding: 20px;
  background-color: white;
  border: 1px solid #ddd;
}

.bc-headline {
  position: relative;
  top: 125px;
}

.scada-banner {
  top:350px !important;
}

.bc-headline h2{
  display: inline-block;
  font-size: 33px;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 15px 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.bc-headline p {
  background-color: rgba(0, 0, 0, 0.5);
  /* display: inline-block; */
  padding: 15px 20px;
}

.bc-headline-desc {
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
  top: 125px;
  padding: 30px !important;
}

@media screen and 
(max-width:1200px) {
  
  .contact-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .contact-info i {
    margin-bottom: 10px;
  }
}

.contact-info p {
  line-height: normal;
}

.white-bul {
  background-color: #ffffff;
}

/* slider adjustment */
.banner__content p,
.banner__content a{
  position: relative;
  z-index: 999;
  top: 200px;
}

/* banner video */
.video-banner .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.fs-c {
  font-size: 23px;
  color: #0d5385;
}

.overlay-dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

/* animation add */
.fadeInZoom {
  animation-name: fadeInZoom;
  animation-duration: 0.8s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Jika perlukan prefix Webkit */
@-webkit-keyframes fadeInZoom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px) scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
  }
}

.footer-border-end {
  position: relative;
}

.footer-border-end::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  /* width: 1px;            */
  background: #ccc;
}

.footer .border-start {
  border-left: 5px solid #ccc;
  padding-left: 20px;
}

.footer-title {
  position: relative;
  margin-bottom: 30px;
}

/* .footer-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
height: 1px;
width: 100%;
background: #ccc;
} */

.footer {
  background-color: #111;
  color: #fff;
  padding: 50px 20px;
  font-family: Arial, sans-serif;
}

.sub-title-footer {
  color: #ffffff;
  font-size: 16px;
}

/* .sub-title-footer::after {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  background-color: #ffffff;
  margin-top: 8px;
  margin-bottom: 3px;
} */

.footer a {
  color: #ccc;
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-links li{
  display: flex;
}

.footer-links li::before {
  content: "•";
  color: #ccc;
  display: inline-block;
  width: 1em;
  margin-left: -2em;
}

@media screen and (max-width: 767px) {
  .footer-border-end::before {
    display: none;
  }
  
}

.fs-18 {
  font-size: 18px;
}

/* ========== CIRCLE BOXES ========== */

.circle-box-star {
  border-radius: 0;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  margin-right: 25px;
  margin-left: 10px;
}

.circle-box-star .circle-image {
  margin-bottom: 0;
}

.circle-box-star {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 10px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.circle-box-star:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.circle-box-star {
  flex: 1;
  background: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 15px;
}

.circle-box-star h3 {
  text-align: left !important;
  padding: 15px 0;
  min-height: 80px;
  display: flex;
  margin-bottom: 10px;
}

.circle-box-star p {
  margin-top: auto;
  font-size: 16px;
}