/*
-------------------------------------------------------------------
  Theme Name: queen_tex
  Author: queen_tex
  Author URI: https://themeforest.net/user/queen_tex
  Description: TRACKNGO - Transportation & Logistics HTML Template
  Version: 1.0.0
-------------------------------------------------------------------

  >> TABLE OF CONTENTS <<
  ----------------------------------------------------------------
  01. Basic
      01.1 Mixins
      01.2 Variables
      01.3 Buttons
      01.4 Typography

  02. Template Section Styles
      02.1 About
      02.2 Animation
      02.3 Contact
      02.4 Feature
      02.5 Footer
      02.6 Header
      02.7 Helping
      02.8 Hero
      02.9 MeanMenu
      02.10 News
      02.11 Preloader
      02.12 Project
      02.13 Section
      02.14 Service
      02.15 Team
      02.16 Testimonial
-------------------------------------------------------------------
*/
/*--------------------------------------------------------------
>>> BASIC START
--------------------------------------------------------------*/
/* Mixins */
/* Variables */
@import url("https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hedvig+Letters+Sans&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Faster+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --body: #0F1F1F;
  --black: #000;
  --white: #fff;
  --theme: var(--bs-primary-text-emphasis);
  --theme-2: #F4B400;
  --header: #323c46;
  --text: #323c46;
  --border: #49515b4d;
  --bg: #F1F1F1;
  --bg-2: #003B49;
  --box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
  
}

/* Buttons */
.main-button {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 50px;
}
@media (max-width: 991px) {
  .main-button {
    margin-top: 30px;
  }
}
.main-button .theme-btn {
  position: relative;
  z-index: 2;
  display: inline-block;
  border: none;
  text-transform: uppercase;
  text-align: center;
  background-color: var(--theme);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 18px 32px;
  letter-spacing: 0.5px;
  border-radius: 32px;
  font-family: "Radio Canada Big", sans-serif;
  
}
@media (max-width: 575px) {
  .main-button .theme-btn {
    padding: 18px 30px;
    font-size: 14px;
  }
}
.main-button .arrow-btn {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  background: var(--theme);
  color: var(--white);
  border-radius: 50%;
  display: inline-block;
  transition: all 0.4s ease-in-out;
}
.main-button .arrow-btn:hover {
  background: var(--header);
  color: var(--white);
}
.main-button:hover .theme-btn, .main-button:hover .arrow-btn {
  background-color: var(--header);
}

.link-btns {
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  text-transform: capitalize;
  color: var(--theme);
}
.link-btns i {
  margin-left: 8px;
}
.link-btns:hover {
  color: var(--header);
}

/* Typography 
background: linear-gradient(180deg, rgba(94, 228, 228, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
*/
/* --------------------------------------------
    Template Default Fonts & Fonts Styles
 ---------------------------------------------- */
body {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 27px;
  color: var(--text);
  background: #EBD8DC;
  padding: 0;
  margin: 0;
  letter-spacing: 0.04rem;
  overflow-x: hidden;
}
@media (max-width: 767px) {
  body {
    font-size: 15px;
  }
}

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

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

input:focus {
  color: var(--text);
  outline: none;
}

input {
  color: var(--text);
}

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

h1 {
  font-size: 100px;
  font-weight: 700;
  line-height: 108%;
}
@media (max-width: 1600px) {
  h1 {
    font-size: 64px;
  }
}
@media (max-width: 1199px) {
  h1 {
    font-size: 60px;
  }
}
@media (max-width: 991px) {
  h1 {
    font-size: 52px;
  }
}
@media (max-width: 767px) {
  h1 {
    font-size: 46px;
  }
}
@media (max-width: 575px) {
  h1 {
    font-size: 38px;
  }
}
@media (max-width: 470px) {
  h1 {
    font-size: 32px;
  }
}

h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 117%;
}
@media (max-width: 1399px) {
  h2 {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 37px;
  }
}
@media (max-width: 470px) {
  h2 {
    font-size: 30px;
  }
}

h3 {
  font-size: 16px;
  font-weight: 300;
  line-height: 134%;
}
@media (max-width: 1399px) {
  h3 {
    font-size: 21px;
  }
}
@media (max-width: 1199px) {
  h3 {
    font-size: 20px;
  }
}
@media (max-width: 991px) {
  h3 {
    font-size: 21px;
  }
}
@media (max-width: 767px) {
  h3 {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  h3 {
    font-size: 20px;
  }
}

h4 {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 1399px) {
  h4 {
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  h4 {
    font-size: 18px;
  }
}

h5 {
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 575px) {
  h5 {
    font-size: 20px;
  }
}

h6 {
  font-size: 20px;
  font-weight: 500;
}

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

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

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

/*--------------------------------------------------------------
>>> BASIC END
--------------------------------------------------------------*/
/*--------------------------------------------------------------
>>> TEMPLATE SECTION STYLES START
--------------------------------------------------------------*/
/* About */
.about-wrapper .about-content {
  margin-right: 30px;
}
@media (max-width: 1199px) {
  .about-wrapper .about-content {
    margin-right: 0;
  }
}
.about-wrapper .about-content .about-text {
  margin-top: 25px;
}
.about-wrapper .about-content .icon-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}
.about-wrapper .about-content .icon-box .icon {
  margin-right: 15px;
}
.about-wrapper .about-content .icon-box .content h4 {
  margin-bottom: 10px;
}
.about-wrapper .about-content .icon-box .content p {
  max-width: 410px;
}
.about-wrapper .about-image {
  position: relative;
  z-index: 9;
}
@media (max-width: 1399px) {
  .about-wrapper .about-image img {
    width: 100%;
    height: 100%;
  }
}
.about-wrapper .about-image .about-count-box {
  position: relative;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 991px) {
  .about-wrapper .about-image .about-count-box {
    display: none;
  }
}
.about-wrapper .about-image .about-count-box img {
  width: initial;
  height: initial;
}
.about-wrapper .about-image .about-count-box .about-counter-item {
  position: absolute;
  bottom: 23%;
  left: 33%;
}
.about-wrapper .about-image .about-count-box .about-counter-item h2 {
  font-size: 64px;
  color: var(--white);
}
.about-wrapper .about-image .about-count-box .about-counter-item p {
  color: var(--white);
  font-weight: 600;
}

.about-wrapper-2 .about-iamge img {
  width: 100%;
  height: 100%;
}
.about-wrapper-2 .about-content {
  margin-left: 50px;
}
@media (max-width: 991px) {
  .about-wrapper-2 .about-content {
    margin-left: 0;
  }
}
.about-wrapper-2 .about-content .about-text {
  margin-top: 20px;
}
.about-wrapper-2 .about-content .client-info-area {
  display: flex;
  margin-top: 25px;
  gap: 30px;
}
@media (max-width: 1199px) {
  .about-wrapper-2 .about-content .client-info-area {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.about-wrapper-2 .about-content .client-info-area .client-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
.about-wrapper-2 .about-content .client-info-area .client-info p {
  margin-top: 6px;
}
.about-wrapper-2 .about-content .nav {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.about-wrapper-2 .about-content .nav .nav-item .nav-link {
  font-size: 18px;
  color: var(--header);
  font-weight: 500;
  background: var(--bg);
  padding: 11px 24px;
}
.about-wrapper-2 .about-content .nav .nav-item .active {
  background-color: var(--theme);
  color: var(--white);
}
.about-wrapper-2 .about-content .about-tab-box {
  border-radius: 0 8px 8px 8px;
  background: #000E12;
  padding: 24px;
}
.about-wrapper-2 .about-content .about-tab-box p {
  color: var(--white);
  opacity: 0.7;
}

.about-section-2 {
  position: relative;
  z-index: 9;
}
.about-section-2 .about-shape-1 {
  position: absolute;
  top: 15%;
  left: 5%;
  z-index: 1;
}
@media (max-width: 1199px) {
  .about-section-2 .about-shape-1 {
    display: none;
  }
}
.about-section-2 .about-shape-2 {
  position: absolute;
  top: 3%;
  right: -2%;
}
@media (max-width: 1199px) {
  .about-section-2 .about-shape-2 {
    display: none;
  }
}
.about-section-2 .about-shape-3 {
  position: absolute;
  bottom: 0%;
  z-index: -1;
  right: 2%;
}
@media (max-width: 1199px) {
  .about-section-2 .about-shape-3 {
    display: none;
  }
}

.about-wrapper-3 .about-image-items {
  position: relative;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-image-items {
    margin-right: 0;
  }
}
.about-wrapper-3 .about-image-items img {
  width: 100%;
  height: 100%;
}
.about-wrapper-3 .about-image-items .about-counter {
  position: absolute;
  right: -136px;
  bottom: 125px;
  rotate: -83deg;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 40px;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-image-items .about-counter {
    display: none;
  }
}
.about-wrapper-3 .about-image-items .about-counter h3 {
  font-size: 64px;
  color: var(--theme);
}
.about-wrapper-3 .about-image-items .about-counter p {
  color: var(--header);
  font-weight: 700;
}
.about-wrapper-3 .about-image-items .about-shape {
  position: absolute;
  bottom: -28px;
  right: -41px;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-image-items .about-shape {
    display: none;
  }
}
.about-wrapper-3 .about-content {
  margin-left: 0px;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-content {
    margin-left: 0;
  }
}
.about-wrapper-3 .about-content .about-text {
  margin-top: 0px;
}
.about-wrapper-3 .about-content .icon-box {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}
.about-wrapper-3 .about-content .icon-box .icon {
  width: 80px;
  height: 70px;
  line-height: 70px;
  background-color: var(--theme);
  border-radius: 4px;
  text-align: center;
}
.about-wrapper-3 .about-content .about-list {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-content .about-list {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.about-wrapper-3 .about-content .about-list ul li {
  font-size: 18px;
  color: var(--header);
}
.about-wrapper-3 .about-content .about-list ul li i {
  color: var(--theme);
  margin-right: 8px;
}
.about-wrapper-3 .about-content .about-list ul li:not(:last-child) {
  margin-bottom: 15px;
}
.about-wrapper-3 .about-content .main-button {
  margin-top: 40px !important;
}

/* Animation */
@-webkit-keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}
@keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}
@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(15deg);
  }
}
@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}
@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes tpswing {
  0% {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes loaderpulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(20deg);
  }
}
@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}
.float-bob-y {
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
@keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
.float-bob-x {
  -webkit-animation-name: float-bob-x;
  animation-name: float-bob-x;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(30px);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes bounce-x {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bounce-x {
  -webkit-animation: bounce-x 7s infinite linear;
  animation: bounce-x 7s infinite linear;
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes rotated2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}
/*img-animation**********************/
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-right {
  0% {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@keyframes img-anim-top {
  0% {
    transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-bottom {
  animation: img-anim-bottom 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@keyframes moving {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(-50px);
  }
  50% {
    transform: translatey(-40px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes translateX2 {
  0% {
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  100% {
    -webkit-transform: translatXY(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
  }
}
@keyframes translateY2 {
  0% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes arryLeftRight {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(10px);
  }
}
.animation__arryLeftRight {
  animation: arryLeftRight 2s ease infinite alternate;
}

@keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }
}
.animation-infinite {
  animation: ShapeAnim 50s linear infinite;
  height: 30px;
  width: 100%;
  background-repeat: repeat;
  overflow: hidden;
}

@keyframes ShapeAnim {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top left 3000px;
  }
}
/* Contact */
.contact-wrapper .contact-content .contact-text {
  margin-top: 25px;
  color: var(--white);
}
.contact-wrapper .contact-content .icon-box-area {
  display: flex;
  margin-top: 40px;
  border-bottom: 1px solid rgba(198, 201, 202, 0.24);
  padding-bottom: 30px;
}
@media (max-width: 1199px) {
  .contact-wrapper .contact-content .icon-box-area {
    flex-wrap: wrap;
    gap: 20px;
    border: none;
  }
}
.contact-wrapper .contact-content .icon-box-area .icon-box {
  display: flex;
  align-items: center;
  gap: 20px;
}
.contact-wrapper .contact-content .icon-box-area .icon-box .icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.contact-wrapper .contact-content .icon-box-area .icon-box h4 {
  color: var(--white);
  max-width: 200px;
}
@media (max-width: 1199px) {
  .contact-wrapper .contact-content .main-button {
    margin-top: 0;
  }
}
.contact-wrapper .contact-content .main-button:hover .theme-btn, .contact-wrapper .contact-content .main-button:hover .arrow-btn {
  background-color: var(--white);
  color: var(--black);
}
.contact-wrapper .contact-box-items {
  padding: 48px;
  border-radius: 16px 16px 16px 0;
  position: relative;
  z-index: 9;
}
@media (max-width: 1199px) {
  .contact-wrapper .contact-box-items {
    padding: 35px;
  }
}
@media (max-width: 575px) {
  .contact-wrapper .contact-box-items {
    padding: 25px;
  }
}
.contact-wrapper .contact-box-items .arrow-image {
  position: absolute;
  bottom: 0;
  right: 0;
}
.contact-wrapper .contact-box-items h3 {
  margin-bottom: 40px;
  color: var(--white);
}
.contact-wrapper .contact-box-items .form-clt {
  position: relative;
}
.contact-wrapper .contact-box-items .form-clt input, .contact-wrapper .contact-box-items .form-clt textarea {
  width: 100%;
  border: none;
  outline: none;
  color: var(--white);
  padding: 16px 20px;
  font-weight: 400;
  font-size: 15px;
  text-transform: capitalize;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.32);
}
@media (max-width: 767px) {
  .contact-wrapper .contact-box-items .form-clt input, .contact-wrapper .contact-box-items .form-clt textarea {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .contact-wrapper .contact-box-items .form-clt input, .contact-wrapper .contact-box-items .form-clt textarea {
    padding: 12px 18px;
  }
}
.contact-wrapper .contact-box-items .form-clt input::placeholder, .contact-wrapper .contact-box-items .form-clt textarea::placeholder {
  color: var(--white);
}
.contact-wrapper .contact-box-items .form-clt textarea {
  padding-bottom: 108px;
  resize: none;
}

.contact-section {
  position: relative;
}
.contact-section::before {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 90%;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--white);
}

.contact-section-3 {
  position: relative;
}
.contact-section-3 .contact-wrapper-3 .contact-box-items {
  padding: 48px 48px 48px 0;
  position: relative;
  z-index: 9;
}
@media (max-width: 991px) {
  .contact-section-3 .contact-wrapper-3 .contact-box-items {
    padding: 30px;
  }
}
.contact-section-3 .contact-wrapper-3 .contact-box-items .line-image {
  position: absolute;
  left: -64px;
  bottom: 0;
}
@media (max-width: 991px) {
  .contact-section-3 .contact-wrapper-3 .contact-box-items .line-image {
    display: none;
  }
}
.contact-section-3 .contact-wrapper-3 .contact-box-items h3 {
  margin-bottom: 40px;
  color: var(--white);
}
.contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt {
  position: relative;
}
.contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt input, .contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt textarea {
  width: 100%;
  border: none;
  outline: none;
  color: var(--white);
  padding: 16px 20px;
  font-weight: 400;
  font-size: 15px;
  text-transform: capitalize;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.32);
}
@media (max-width: 767px) {
  .contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt input, .contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt textarea {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt input, .contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt textarea {
    padding: 12px 18px;
  }
}
.contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt input::placeholder, .contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt textarea::placeholder {
  color: var(--white);
}
.contact-section-3 .contact-wrapper-3 .contact-box-items .form-clt textarea {
  padding-bottom: 120px;
  resize: none;
}
.contact-section-3 .contact-wrapper-3 .contact-box-items .main-button:hover .theme-btn, .contact-section-3 .contact-wrapper-3 .contact-box-items .main-button:hover .arrow-btn {
  background-color: var(--white);
  color: var(--black);
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 {
  padding-left: 50px;
}
@media (max-width: 1199px) {
  .contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 {
    padding-left: 0;
    margin-top: 30px;
  }
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .contact-text {
  margin-top: 20px;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items {
  margin-top: 25px;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .left-items h4 {
  margin-bottom: 20px;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .left-items ul li {
  display: flex;
  gap: 20px;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .left-items ul li .icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  background-color: var(--white);
  border-radius: 8px;
  text-align: center;
  color: var(--theme);
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .left-items ul li .content h5 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 7px;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .left-items ul li:not(:last-child) {
  margin-bottom: 20px;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .right-items {
  background-color: var(--header);
  padding: 25px;
  border-radius: 8px;
  max-width: 310px;
}
@media (max-width: 991px) {
  .contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .right-items {
    margin-top: 30px;
  }
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .right-items h4 {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .right-items ul {
  margin-top: 20px;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .right-items ul li {
  display: flex;
  justify-content: space-between;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .right-items ul li p {
  color: var(--white);
  opacity: 0.7;
}
.contact-section-3 .contact-wrapper-3 .contact-content .contact-right-item-3 .middle-items .right-items ul li h5 {
  font-family: "Hedvig Letters Sans", sans-serif;
  color: var(--theme);
  font-size: 16px;
  font-weight: 400;
}
.contact-section-3 .contact-wrapper-3 .contact-content .feature-box-items-3 {
  max-width: 750px;
  margin-top: 50px;
  position: relative;
  z-index: 9;
}
@media (max-width: 991px) {
  .contact-section-3 .contact-wrapper-3 .contact-content .feature-box-items-3 {
    margin-top: 30px;
  }
}
.contact-section-3 .contact-wrapper-3 .contact-content .feature-box-items-3 .feature-items {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--bg);
  padding: 25px;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 991px) {
  .contact-section-3 .contact-wrapper-3 .contact-content .feature-box-items-3 .feature-items {
    margin-top: 15px;
  }
}
.contact-section-3 .contact-wrapper-3 .contact-content .feature-box-items-3 .feature-items h4 {
  color: var(--header);
  font-size: 18px;
  font-weight: 500;
}
.contact-section-3 .contact-wrapper-3 .contact-content .feature-box-items-3 .feature-items:hover {
  background-color: var(--theme);
}
.contact-section-3 .contact-wrapper-3 .contact-content .feature-box-items-3 .feature-items:hover h4 {
  color: var(--white);
}
.contact-section-3 .contact-wrapper-3 .contact-content .feature-box-items-3 .feature-items:hover img {
  filter: brightness(0) invert(1);
}
.contact-section-3::before {
  position: absolute;
  left: 0;
  bottom: 0px;
  right: 0;
  top: 74%;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--white);
}
@media (max-width: 1399px) {
  .contact-section-3::before {
    display: none;
  }
}
.contact-section-3::after {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0px;
  width: 300px;
  height: 100%;
  content: "";
  background-color: var(--white);
}
@media (max-width: 1399px) {
  .contact-section-3::after {
    display: none;
  }
}

.privacy-wrapper .privacy-list-items h3 {
  margin-top: 32px;
}
.privacy-wrapper .privacy-list-items p {
  margin-bottom: 8px;
  margin-top: 8px;
}
.privacy-wrapper .privacy-list-items ul {
  margin-top: 16px;
}
.privacy-wrapper .privacy-list-items ul li {
  font-weight: 600;
  display: block;
  font-size: 16px;
  font-family: "Radio Canada Big", sans-serif;
  color: var(--header);
}
.privacy-wrapper .privacy-list-items ul li i {
  color: var(--white);
  margin-right: 10px;
  background-color: var(--theme);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 21px;
  font-size: 10px;
  text-align: center;
  font-weight: 400;
}
.privacy-wrapper .privacy-list-items ul li:not(:last-child) {
  margin-bottom: 14px;
}
.privacy-wrapper .privacy-list-items ul li span {
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  font-family: "Hedvig Letters Sans", sans-serif;
}
.privacy-wrapper .privacy-list-items ul li span.color-2 {
  color: var(--header);
}

.contact-wrapper-inner .contact-items {
  text-align: center;
  padding: 48px;
  background-color: var(--bg);
  border-radius: 16px;
}
.contact-wrapper-inner .contact-items .icon {
  width: 80px;
  height: 80px;
  line-height: 91px;
  background: var(--theme);
  border-radius: 50%;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 24px;
}
.contact-wrapper-inner .contact-items .icon i {
  color: var(--white);
  font-size: 30px;
}

.map-items .googpemap iframe {
  width: 100%;
  height: 612px;
}
@media (max-width: 575px) {
  .map-items .googpemap iframe {
    height: 400px;
  }
}

.contact-box-items-2 {
  padding: 48px;
  position: relative;
  z-index: 9;
  background-color: var(--bg);
}
@media (max-width: 991px) {
  .contact-box-items-2 {
    padding: 30px;
  }
}
.contact-box-items-2 h3 {
  margin-bottom: 40px;
}
.contact-box-items-2 .form-clt {
  position: relative;
}
.contact-box-items-2 .form-clt input, .contact-box-items-2 .form-clt textarea {
  width: 100%;
  border: none;
  outline: none;
  color: var(--text);
  padding: 16px 20px;
  font-weight: 400;
  font-size: 15px;
  text-transform: capitalize;
  border-radius: 12px;
  background: var(--white);
}
@media (max-width: 767px) {
  .contact-box-items-2 .form-clt input, .contact-box-items-2 .form-clt textarea {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .contact-box-items-2 .form-clt input, .contact-box-items-2 .form-clt textarea {
    padding: 12px 18px;
  }
}
.contact-box-items-2 .form-clt input::placeholder, .contact-box-items-2 .form-clt textarea::placeholder {
  color: var(--text);
}
.contact-box-items-2 .form-clt textarea {
  padding-bottom: 108px;
  resize: none;
}
.contact-box-items-2 button {
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  background-color: var(--theme);
  color: var(--white);
  text-align: center;
  transition: all 0.3s ease-in-out;
  padding: 20px 24px;
  border-radius: 100px;
  margin: 0;
}
.contact-box-items-2 button i {
  margin-left: 10px;
}
.contact-box-items-2 button:hover {
  background-color: var(--header);
}

/* Feature */
.counter-item {
  border: 1px solid rgba(198, 201, 202, 0.24);
  text-align: center;
  padding: 30px 12px;
}
.counter-item h2 {
  color: var(--white);
}
.counter-item p {
  color: var(--white);
  margin-top: 7px;
}

.work-process-section {
  position: relative;
  z-index: 9;
}
.work-process-section .work-process-shape {
  position: absolute;
  z-index: -1;
  top: 10%;
  left: 0%;
}

.work-process-box-items {
  position: relative;
  z-index: 9;
  margin-top: 30px;
}
.work-process-box-items .shape {
  position: absolute;
  z-index: -1;
  top: 20%;
  left: 10%;
}
@media (max-width: 1199px) {
  .work-process-box-items .shape {
    display: none;
  }
}
.work-process-box-items .icon {
  width: 88px;
  height: 88px;
  line-height: 70px;
  background-color: var(--bg);
  text-align: center;
  border-radius: 50%;
  border: 8px solid var(--white);
  margin: 0 auto;
}
.work-process-box-items .content {
  text-align: center;
  margin-top: 40px;
}
.work-process-box-items .content h4 {
  color: var(--theme);
  margin-bottom: 10px;
}
.work-process-box-items .content p {
  margin-top: 15px;
}

.counter-box {
  border-bottom: 1px solid rgba(198, 201, 202, 0.31);
  padding-bottom: 60px;
}
.counter-box .counter-items {
  border-radius: 100px;
  background: rgba(0, 14, 18, 0.32);
  backdrop-filter: blur(28px);
  text-align: center;
  padding: 30px;
}
.counter-box .counter-items.style-2 {
  border-radius: 12px;
}
.counter-box .counter-items h2 {
  color: var(--white);
  font-size: 48px;
  font-weight: 700;
}
.counter-box .counter-items p {
  color: var(--white);
}

.video-items {
  text-align: center;
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
@media (max-width: 991px) {
  .video-items {
    margin-top: 90px;
  }
}
.video-items .video-btn {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 100px;
  background-color: var(--theme);
  color: var(--white);
  display: inline-block;
  text-align: center;
  font-size: 24px;
}
@media (max-width: 767px) {
  .video-items .video-btn {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
  }
}
.video-items .circle-image {
  display: none;
}
.video-items .circle-image img {
  animation: cir36 10s linear infinite;
}
.video-items h3 {
  color: var(--white);
}

.feature-box-items {
  border-radius: 12px;
  background: rgba(0, 14, 18, 0.32);
  backdrop-filter: blur(28px);
  padding: 45px 40px;
  border: 1px solid rgba(0, 14, 18, 0.32);
  transition: all 0.4s ease-in-out;
}
.feature-box-items .feature-icon-box {
  display: flex;
  gap: 20px;
  align-items: center;
}
.feature-box-items .feature-icon-box .icon {
  border-radius: 4px;
  background: linear-gradient(180deg, var(--Text-Primary, #000E12) 0%, var(--Primary-500, #FA6444) 293.75%);
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.feature-box-items .feature-icon-box h3 {
  color: var(--white);
}
.feature-box-items p {
  margin-top: 20px;
}
.feature-box-items:hover {
  border-radius: 12px;
  border: 1px solid var(--Primary-500, #FA6444);
  background: rgba(0, 14, 18, 0.32);
  backdrop-filter: blur(28px);
}

.counter-item-3 {
  border: 1px solid rgba(198, 201, 202, 0.24);
  border-bottom: 1px solid rgba(198, 201, 202, 0.24);
  text-align: center;
  padding: 30px 12px;
}
@media (max-width: 991px) {
  .counter-item-3 {
    padding: 20px 12px;
  }
}
.counter-item-3 h2 {
  color: var(--header);
}
.counter-item-3 p {
  margin-top: 7px;
}

.marque-section {
  margin-top: -60px;
}
.marque-section .marque-items {
  display: flex;
  align-items: center;
  gap: 24px;
}
.marque-section .marque-items h3 {
  font-size: 40px;
}
.marque-section .marque-items.style-2 h3 {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--Text-Primary, #000E12);
  color: transparent;
}

.choose-wrapper-2 .choose-image {
  position: relative;
}
@media (max-width: 1399px) {
  .choose-wrapper-2 .choose-image img {
    width: 100%;
    height: 100%;
  }
}
.choose-wrapper-2 .choose-image .arrow-shape {
  position: absolute;
  left: 24%;
}
@media (max-width: 1199px) {
  .choose-wrapper-2 .choose-image .arrow-shape {
    display: none;
  }
}
.choose-wrapper-2 .choose-image .choose-counter-box {
  display: flex;
  align-items: center;
  border-radius: 8px 8px 8px 0;
  background: #000E12;
  position: absolute;
  bottom: -12%;
  left: 32%;
  line-height: 1;
  padding-right: 40px;
}
@media (max-width: 1199px) {
  .choose-wrapper-2 .choose-image .choose-counter-box {
    bottom: 0;
    left: 0;
  }
}
.choose-wrapper-2 .choose-image .choose-counter-box .image img {
  width: initial;
  height: initial;
}
.choose-wrapper-2 .choose-image .choose-counter-box .choose-counter-items {
  padding: 20px;
}
.choose-wrapper-2 .choose-image .choose-counter-box .choose-counter-items h2 {
  color: var(--white);
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 10px;
}
.choose-wrapper-2 .choose-content {
  margin-left: 80px;
}
@media (max-width: 1199px) {
  .choose-wrapper-2 .choose-content {
    margin-left: 0;
  }
}
.choose-wrapper-2 .choose-content .choose-text {
  margin-top: 18px;
}
.choose-wrapper-2 .choose-content .icon-items-area {
  margin-top: 20px;
}
@media (max-width: 1399px) {
  .choose-wrapper-2 .choose-content .icon-items-area {
    margin-top: 30px;
  }
}
@media (max-width: 991px) {
  .choose-wrapper-2 .choose-content .icon-items-area {
    margin-top: 20px;
  }
}
.choose-wrapper-2 .choose-content .icon-items-area .icon-items {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 15px 55px 15px 16px;
  transition: all 0.4s ease-in-out;
  border-radius: 5px;
}
@media (max-width: 1199px) {
  .choose-wrapper-2 .choose-content .icon-items-area .icon-items {
    flex-wrap: wrap;
    gap: 20px;
    background-color: rgba(255, 255, 255, 0.08);
    margin-top: 15px;
    padding: 25px;
    max-width: 500px;
  }
}
.choose-wrapper-2 .choose-content .icon-items-area .icon-items .content h3 {
  color: var(--white);
  margin-bottom: 5px;
}
.choose-wrapper-2 .choose-content .icon-items-area .icon-items .content p {
  color: var(--white);
  opacity: 0.7;
}
.choose-wrapper-2 .choose-content .icon-items-area .icon-items:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.choose-wrapper-2 .choose-content .icon-items-area .icon-items.active {
  background-color: rgba(255, 255, 255, 0.08);
}

.choose-wrapper-3 .choose-content {
  position: relative;
  z-index: 9;
}
.choose-wrapper-3 .choose-content .line-shape {
  position: absolute;
  top: 50%;
  left: 29px;
  z-index: -1;
  height: 200px;
}
@media (max-width: 1199px) {
  .choose-wrapper-3 .choose-content .line-shape {
    display: none;
  }
}
.choose-wrapper-3 .choose-content .line-shape img {
  height: 100%;
}
.choose-wrapper-3 .choose-content .choose-text {
  margin-top: 25px;
}
.choose-wrapper-3 .choose-content ul li {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}
.choose-wrapper-3 .choose-content ul li .icon {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 4px;
  background: #F1F1F1;
  text-align: center;
}
.choose-wrapper-3 .choose-content ul li .icon.style-2 {
  background-color: var(--theme);
}
.choose-wrapper-3 .choose-content ul li .content p {
  margin-top: 8px;
}
.choose-wrapper-3 .choose-content ul li:first-child {
  margin-left: 80px;
}
.choose-wrapper-3 .choose-content ul li:last-child {
  margin-left: 80px;
}
.choose-wrapper-3 .choose-image {
  width: 750px;
}
.choose-wrapper-3 .choose-image img {
  width: 100%;
  height: 100%;
}

/* Footer */
.footer-top-items {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid rgba(191, 191, 191, 0.16);
}
@media (max-width: 1199px) {
  .footer-top-items {
    flex-wrap: wrap;
    gap: 30px;
    border: none;
  }
}
.footer-top-items h3 {
  color: var(--white);
  margin-left: -30px;
}
@media (max-width: 767px) {
  .footer-top-items h3 {
    margin-left: 0;
  }
}
.footer-top-items form {
  max-width: 615px;
  width: 100%;
  position: relative;
}
.footer-top-items form input {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  outline: none;
  padding: 18px 20px;
  width: 100%;
  border-radius: 50px;
  color: var(--white);
}
.footer-top-items form input::placeholder {
  color: var(--white);
  opacity: 0.7;
}
.footer-top-items form button {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  padding: 10px 40px;
  background-color: var(--theme);
  color: var(--white);
  border-radius: 50px;
  transition: all 0.4s ease-in-out;
}
.footer-top-items form button:hover {
  background: var(--white);
  color: var(--black);
}

.footer-bottom {
  background-color: #000E12;
  border-top: 1px solid rgba(191, 191, 191, 0.16);
}
.footer-bottom .footer-bottom-wrapper {
  padding: 6px 0;  /*kaushik changed 16 to 6*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .footer-bottom .footer-bottom-wrapper {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.footer-bottom .footer-bottom-wrapper p a {
  color: var(--theme);
}
.footer-bottom .footer-bottom-wrapper .social-icon {
  gap: 15px;
  position: relative;
  z-index: 9;
}
@media (max-width: 575px) {
  .footer-bottom .footer-bottom-wrapper .social-icon {
    margin-top: 15px;
  }
}
.footer-bottom .footer-bottom-wrapper .social-icon a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  display: block;
  border-radius: 5px;
  color: var(--white);
  transition: all 0.4s ease-in-out;
  text-align: center;
  background-color: rgba(227, 227, 227, 0.2);
}
.footer-bottom .footer-bottom-wrapper .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}

.footer-widget-wrapper {
  padding: 50px 0 80px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper {
    padding: 50px 0 60px;
  }
}
.footer-widget-wrapper .single-footer-widget {
  margin-top: 30px;
}
.footer-widget-wrapper .single-footer-widget .widget-head {
  margin-bottom: 30px;
}
.footer-widget-wrapper .single-footer-widget .widget-head h3 {
  color: var(--white);
}
.footer-widget-wrapper .single-footer-widget.single-border {
  border-right: 1px solid rgba(191, 191, 191, 0.16);
}
@media (max-width: 1199px) {
  .footer-widget-wrapper .single-footer-widget.single-border {
    border: none;
  }
}
.footer-widget-wrapper .single-footer-widget .footer-contact .icon-location {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(191, 191, 191, 0.16);
  padding-bottom: 30px;
}
.footer-widget-wrapper .single-footer-widget .footer-contact .icon-location i {
  color: var(--theme);
  font-size: 18px;
}
.footer-widget-wrapper .single-footer-widget .footer-contact .icon-location h6 {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}
.footer-widget-wrapper .single-footer-widget .footer-contact .icon-location span {
  color: var(--white);
  opacity: 0.7;
}
.footer-widget-wrapper .single-footer-widget .footer-contact li a {
  color: var(--white);
}
.footer-widget-wrapper .single-footer-widget .footer-contact.cont {
  max-width: 520px;
}
.footer-widget-wrapper .single-footer-widget .list-area li {
  font-weight: 400;
}
.footer-widget-wrapper .single-footer-widget .list-area li:not(:last-child) {
  margin-bottom: 15px;
}
.footer-widget-wrapper .single-footer-widget .list-area li a {
  color: rgba(255, 255, 255, 0.7);
  position: relative;
}
.footer-widget-wrapper .single-footer-widget .list-area li a:hover {
  color: var(--theme);
}
.footer-widget-wrapper.style-2 {
  position: relative;
}
.footer-widget-wrapper.style-2::before {
  content: "";
  position: absolute;
  height: 442px;
  width: 1px;
  top: 54px;
  left: 49%;
  background-color: rgba(191, 191, 191, 0.16);
}
@media (max-width: 1399px) {
  .footer-widget-wrapper.style-2::before {
    display: none;
  }
}
.footer-widget-wrapper.style-2 .footer-contact-2 {
  display: flex;
  align-items: center;
  margin-top: 30px;
  gap: 32px;
  margin-top: 30px;
  border-top: 1px solid rgba(191, 191, 191, 0.16);
  padding-top: 30px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper.style-2 .footer-contact-2 {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.footer-widget-wrapper.style-2 .footer-contact-2 li {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-widget-wrapper.style-2 .footer-contact-2 li .icon {
  width: 72px;
  height: 72px;
  line-height: 72px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(28px);
  text-align: center;
}
.footer-widget-wrapper.style-2 .footer-contact-2 li .icon i {
  color: var(--theme);
  font-size: 20px;
}
.footer-widget-wrapper.style-2 .footer-contact-2 li .content p {
  color: var(--white);
  opacity: 0.7;
  font-weight: 600;
}
.footer-widget-wrapper.style-2 .newsletter-box {
  border-radius: 16px;
  background: rgba(0, 14, 18, 0.32);
  backdrop-filter: blur(28px);
  padding: 48px 40px;
}
@media (max-width: 991px) {
  .footer-widget-wrapper.style-2 .newsletter-box {
    padding: 30px;
  }
}
.footer-widget-wrapper.style-2 .newsletter-box h3 {
  color: var(--white);
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 16px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper.style-2 .newsletter-box h3 {
    font-size: 36px;
  }
}
@media (max-width: 991px) {
  .footer-widget-wrapper.style-2 .newsletter-box h3 {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .footer-widget-wrapper.style-2 .newsletter-box h3 {
    font-size: 26px;
  }
}
.footer-widget-wrapper.style-2 .newsletter-box form {
  position: relative;
  margin-top: 32px;
  margin-bottom: 35px;
}
.footer-widget-wrapper.style-2 .newsletter-box form input {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  outline: none;
  padding: 18px 20px;
  width: 100%;
  border-radius: 50px;
  color: var(--white);
}
.footer-widget-wrapper.style-2 .newsletter-box form input::placeholder {
  color: var(--white);
  opacity: 0.7;
}
.footer-widget-wrapper.style-2 .newsletter-box form button {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--theme);
  color: var(--white);
  border-radius: 50px;
  transition: all 0.4s ease-in-out;
  padding: 10px 30px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper.style-2 .newsletter-box form button {
    position: static;
    margin-top: 20px;
    width: 100%;
  }
}
.footer-widget-wrapper.style-2 .newsletter-box form button:hover {
  background: var(--white);
  color: var(--black);
}
.footer-widget-wrapper.style-2 .newsletter-box p {
  color: var(--white);
  opacity: 0.7;
}
.footer-widget-wrapper.style-2 .newsletter-box .social-icon {
  gap: 15px;
  position: relative;
  z-index: 9;
  justify-content: center;
}
@media (max-width: 575px) {
  .footer-widget-wrapper.style-2 .newsletter-box .social-icon {
    margin-top: 20px;
  }
}
.footer-widget-wrapper.style-2 .newsletter-box .social-icon a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  display: block;
  border-radius: 5px;
  color: var(--white);
  transition: all 0.4s ease-in-out;
  text-align: center;
  background-color: rgba(227, 227, 227, 0.2);
}
.footer-widget-wrapper.style-2 .newsletter-box .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.footer-widget-wrapper.style-3 p {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(191, 191, 191, 0.16);
  color: var(--white);
  opacity: 0.7;
}
.footer-widget-wrapper.style-3 span {
  color: var(--white);
}
.footer-widget-wrapper.style-3 .social-icon {
  gap: 15px;
  position: relative;
  z-index: 9;
  margin-top: 24px;
}
.footer-widget-wrapper.style-3 .social-icon a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  display: block;
  border-radius: 5px;
  color: var(--white);
  transition: all 0.4s ease-in-out;
  text-align: center;
  background-color: rgba(227, 227, 227, 0.2);
}
.footer-widget-wrapper.style-3 .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.footer-widget-wrapper.style-3 .footer-contact-3 {
  border-bottom: 1px solid rgba(191, 191, 191, 0.16);
}
.footer-widget-wrapper.style-3 .footer-contact-3 .icon-location {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  align-items: center;
}
.footer-widget-wrapper.style-3 .footer-contact-3 .icon-location i {
  color: var(--theme);
  font-size: 18px;
}
.footer-widget-wrapper.style-3 .footer-contact-3 .icon-location h6 {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 5px;
}
.footer-widget-wrapper.style-3 .footer-contact-3 .icon-location span {
  color: var(--white);
  opacity: 0.7;
}
.footer-widget-wrapper.style-3 .content h3 {
  color: var(--white);
  margin-bottom: 16px;
  margin-top: 20px;
}
.footer-widget-wrapper.style-3 .content span {
  color: var(--white);
  opacity: 0.7;
  display: block;
}
.footer-widget-wrapper.style-3 .gallery-items {
  gap: 12px;
}
.footer-widget-wrapper.style-3 .gallery-items:not(:last-child) {
  margin-bottom: 12px;
}

.footer-section-3 {
  position: relative;
  z-index: 9;
}
.footer-section-3:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--white);
  width: 100%;
  height: 11%;
  z-index: -1;
}
@media (max-width: 1199px) {
  .footer-section-3:before {
    top: -4%;
  }
}
@media (max-width: 991px) {
  .footer-section-3:before {
    top: -2%;
  }
}
.footer-section-3 .footer-top-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--black);
  padding: 40px 50px;
  border-radius: 20px;
}
@media (max-width: 1199px) {
  .footer-section-3 .footer-top-3 {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
}
.footer-section-3 .footer-top-3 h3 {
  color: var(--white);
}
@media (max-width: 991px) {
  .footer-section-3 .footer-top-3 h3 {
    text-align: center;
  }
}
.footer-section-3 .footer-top-3 form {
  max-width: 515px;
  width: 100%;
  position: relative;
}
.footer-section-3 .footer-top-3 form i {
  position: absolute;
  content: "";
  top: 21px;
  left: 21px;
  font-size: 25px;
}
.footer-section-3 .footer-top-3 form input {
  background: var(--white);
  border: none;
  outline: none;
  padding: 18px 20px 18px 60px;
  width: 100%;
  color: #777D7F;
  border-radius: 50px;
}
.footer-section-3 .footer-top-3 form input::placeholder {
  color: #777D7F;
}
.footer-section-3 .footer-top-3 form button {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  padding: 10px 40px;
  background-color: var(--theme);
  color: var(--white);
  transition: all 0.4s ease-in-out;
  border-radius: 50px;
}
@media (max-width: 767px) {
  .footer-section-3 .footer-top-3 form button {
    position: static;
    margin-top: 20px;
    width: 100%;
  }
}
.footer-section-3 .footer-top-3 form button:hover {
  background: var(--header);
}

.footer-section-2 .footer-logo {
  border-bottom: 1px solid rgba(191, 191, 191, 0.16);
}

/* Header */
@media (max-width: 1199px) {
  .menu-thumb {
    display: none !important;
  }
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0;
}
.header-main .contact-list {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 10px 0;
}
@media (max-width: 1199px) {
  .header-main .contact-list {
    display: none;
  }
}
.header-main .contact-list li {
  font-size: 16px;
  color: var(--text);
}
.header-main .contact-list li a {
  color: var(--text);
}
.header-main .contact-list li i {
  margin-right: 10px;
}
.header-main .main-menu ul {
  margin-bottom: 0;
}
.header-main .main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-inline-end: 48px;
}
.header-main .main-menu ul li:last-child {
  margin-inline-end: 0;
}
.header-main .main-menu ul li a {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: var(--header);
  padding: 20px 0;
  text-align: left;
  position: relative;
  text-transform: uppercase;
  transition: all 0.4s ease-in-out;
}
.header-main .main-menu ul li a:hover {
  color: #80565B !important
}
.header-main .main-menu ul li .submenu {
  position: absolute;
  top: 105%;
  inset-inline-start: 0;
  min-width: 180px;
  background: var(--white);
  padding: 10px 0;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transform-origin: top center;
  color: var(--header);
  transform: translateY(-10px);
  transition: all 0.4s ease-in-out;
  border-top: 6px solid var(--theme);
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.header-main .main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
}
.header-main .main-menu ul li .submenu li a {
  position: relative;
  z-index: 11;
  font-size: 16px;
  font-weight: 400;
  color: var(--header);
  line-height: 32px;
  padding: 0px 0px 0px 32px;
  width: 100%;
}
.header-main .main-menu ul li .submenu li a::before {
  content: "";
  position: absolute;
  width: 0px;
  height: 2px;
  background: var(--theme);
  left: 14px;
  bottom: 18px;
  transition: all 0.4s ease-in-out;
}
.header-main .main-menu ul li .submenu li a:hover {
  color: var(--theme) !important;
}
.header-main .main-menu ul li .submenu li:last-child a {
  border: none;
}
.header-main .main-menu ul li .submenu li .submenu {
  inset-inline-start: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.header-main .main-menu ul li .submenu li:hover > a {
  color: var(--theme) !important;
  margin-left: 10px;
}
.header-main .main-menu ul li .submenu li:hover > a::before {
  width: 10px;
}
.header-main .main-menu ul li .submenu li:hover > a::after {
  color: var(--theme);
}
.header-main .main-menu ul li .submenu li:hover > .submenu {
  -webkit-transform: translateY(1);
  -moz-transform: translateY(1);
  -ms-transform: translateY(1);
  -o-transform: translateY(1);
  transform: translateY(1);
  visibility: visible;
  opacity: 1;
}
.header-main .main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  inset-inline-end: 25px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: var(--theme);
}
.header-main .main-menu ul li .has-homemenu {
  width: 800px;
  padding: 30px 30px 10px 30px;
  opacity: 0;
  left: -250px;
  visibility: hidden;
  padding: 30px 30px 10px 30px;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .header-main .main-menu ul li .has-homemenu .homemenu-items {
    flex-wrap: wrap;
  }
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu {
  position: relative;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb {
  position: relative;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  gap: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  margin-top: 20px;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn {
  padding: 14px 20px;
  color: var(--white) !important;
  width: initial;
  font-size: 16px;
  text-align: center;
  border-radius: 30px !important;
  line-height: initial;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn::before, .header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn::after {
  display: none;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn:hover {
  background: var(--header);
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb::before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6));
  background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover::before {
  visibility: visible;
  opacity: 1;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover .demo-button {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb:hover .homemenu-btn {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
  transform: translateY(50%);
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-thumb img {
  width: 100%;
}
.header-main .main-menu ul li .has-homemenu .homemenu-items .homemenu .homemenu-title {
  text-align: center;
  margin: 15px auto;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  font-family: "Hedvig Letters Sans", sans-serif;
}
.header-main .main-menu ul li:hover > a {
  color: var(--theme);
}
.header-main .main-menu ul li:hover > a::after {
  color: var(--theme);
}
.header-main .main-menu ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}
.header-main .main-menu ul .search-icon {
  font-size: 20px;
}
.header-main .main-menu ul.style-2 .search-icon {
  color: var(--white);
}
.header-main .header-right {
  gap: 20px;
}
.header-main .header-right .main-button:hover .theme-btn, .header-main .header-right .main-button:hover .arrow-btn {
  background-color: var(--white);
  color: var(--black);
}
@media (max-width: 1399px) {
  .header-main .header-right {
    gap: 20px;
  }
}
.header-main .sidebar__toggle {
  cursor: pointer;
  font-size: 20px;
  color: var(--text);
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  border: 2px solid var(--text);
  text-align: center;
}

.header-1 {
  position: relative;
}
.header-1 .logo2 {
  display: none;
}
@media (max-width: 1399px) {
  .header-1 .logo2 {
    display: block;
  }
}
@media (max-width: 1399px) {
  .header-1 .logo {
    display: none;
  }
}
@media (max-width: 1199px) {
  .header-1 .main-button {
    display: none;
  }
}
@media (max-width: 1199px) {
  .header-1 .sidebar__toggle {
    color: var(--header);
  }
}
.header-1 .main-menu {
  padding-top: 15px;
}
.header-1::before {
  content: "";
  position: absolute;
  width: 580px;
  height: 100%;
  background:f0f0f0;
  top: 0;
  left: 0;
  z-index: -1;
  clip-path: polygon(0 0, 95% 0, 75% 100%, 0% 100%);
}
@media (max-width: 1600px) {
  .header-1::before {
    width: 330px;
  }
}
@media (max-width: 1399px) {
  .header-1::before {
    width: 100% !important;
    clip-path: none !important;
  }
}
.header-1::after {
  content: "";
  position: absolute;
  width: 615px;
  height: 100%;
  background: f0f0f0;
  right: 0;
  top: 0;
  z-index: -1;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 1600px) {
  .header-1::after {
    width: 380px;
  }
}
@media (max-width: 1399px) {
  .header-1::after {
    display: none;
  }
}
.header-1 .header-main {
  position: relative;
}
.header-1 .header-main::before {
  position: absolute;
  content: "";
/*  height: 1px;*/
  width: 964px;
  left: 15%;
  top: 42%;
  background: linear-gradient(90deg, #9B2AFF 0%, #D30971 40%, #9B2AFF 80%);
}
@media (max-width: 1399px) {
  .header-1 .header-main::before {
    display: none;
  }
}
.header-1 .container {
  max-width: 1634px;
}
.header-1 .menu-sear {
  padding: 0;
}
@media (max-width: 1399px) {
  .header-1 .menu-sear {
    display: none;
  }
}
.header-1 .menu-sear a {
  padding: 0 !important;
  text-align: center !important;
}
/*.header-1 .search-trigger {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #C6C9CA;
  display: inline-block;
  text-align: center;
  justify-content: center;
}*/

.header-2 {
  position: absolute;
  background-color: var(--white);
  top: 16px;
  left: 120px;
  width: 100%;
  right: 0;
  z-index: 9999;
  width: calc(100% - 240px);
  padding: 0 32px;
  padding-left: 50px;
}
@media (max-width: 1600px) {
  .header-2 {
    padding-right: 30px;
    left: 30px;
    width: calc(100% - 60px);
  }
}
@media (max-width: 1399px) {
  .header-2 {
    left: 20px;
    width: calc(100% - 40px);
    padding: 0 20px;
  }
}
.header-2 .logo2 {
  display: none;
}
@media (max-width: 1399px) {
  .header-2 .logo2 {
    display: block;
  }
}
@media (max-width: 1399px) {
  .header-2 .logo {
    display: none;
  }
}
.header-2::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  width: 370px;
  background-color: var(--theme);
}
@media (max-width: 1399px) {
  .header-2::before {
    display: none;
  }
}
.header-2::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  height: 100%;
  width: 414px;
  background-color: var(--theme);
}
@media (max-width: 1600px) {
  .header-2::after {
    width: 400px;
  }
}
@media (max-width: 1399px) {
  .header-2::after {
    display: none;
  }
}
.header-2 .logo {
  position: relative;
  z-index: 1;
}
.header-2 .header-right {
  position: relative;
  z-index: 2;
}
.header-2 .header-right .search-icon {
  color: var(--text);
}
@media (max-width: 1399px) {
  .header-2 .header-right .search-trigger {
    background-color: var(--header) !important;
    color: var(--white) !important;
  }
}
.header-2 .header-right .sidebar__toggle {
  background-color: var(--header);
}
.header-2 .container {
  max-width: 1634px;
}
.header-2 .main-menu ul li a {
  color: var(--header);
}
.header-2 .search-icon {
  font-size: 20px;
  color: var(--white);
}
.header-2 .main-button {
  margin-top: 0;
}
@media (max-width: 1399px) {
  .header-2 .main-button {
    display: none;
  }
}
.header-2 .main-button .theme-btn {
  background-color: var(--white);
  color: var(--header);
}
.header-2 .main-button .arrow-btn {
  background-color: var(--white);
  color: var(--header);
}
.header-2 .header-right .search-trigger {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--white);
  display: inline-block;
  text-align: center;
  justify-content: center;
  color: var(--header);
}

.header-section-3 {
  position: relative;
  z-index: 9999;
  background: #F1F1F1;
}
.header-section-3::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 437px;
  height: 100%;
  background-color: #000E12;
  z-index: 1;
  clip-path: polygon(0 0, 95% 0, 75% 100%, 0% 100%);
}
@media (max-width: 1899px) {
  .header-section-3::before {
    width: 325px;
  }
}
@media (max-width: 1399px) {
  .header-section-3::before {
    display: none;
  }
}
.header-section-3 .head-logo {
  position: relative;
  z-index: 9;
}
.header-section-3::after {
  position: absolute;
  top: 41%;
  left: 0;
  right: 0;
  content: "";
  width: 100%;
  height: 55%;
  background-color: var(--white);
  z-index: -1;
}
@media (max-width: 991px) {
  .header-section-3::after {
    display: none;
  }
}
.header-section-3 .container {
  max-width: 1665px;
}
.header-section-3 .header-wrapper-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 140px;
}
.header-section-3 .header-wrapper-3 .head-right-item {
  width: 100%;
}
.header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}
@media (max-width: 991px) {
  .header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 {
    display: none;
  }
}
.header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 .head-top {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 .head-top li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 .heads-right {
  display: flex;
  align-items: center;
  gap: 30px;
}
.header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 .heads-right p {
  color: var(--header);
}
.header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 .heads-right .social-icon {
  gap: 12px;
}
.header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 .heads-right .social-icon a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: var(--white);
  border-radius: 4px;
  color: var(--text);
}
.header-section-3 .header-wrapper-3 .head-right-item .header-top-wrapper-3 .heads-right .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.header-section-3 .header-wrapper-3 .header-3 {
  padding-right: 0;
  position: relative;
}
.header-section-3 .header-wrapper-3 .header-3::before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  width: 354px;
  height: 100%;
  background-color: var(--theme);
}
@media (max-width: 1399px) {
  .header-section-3 .header-wrapper-3 .header-3::before {
    display: none;
  }
}
.header-section-3 .header-wrapper-3 .header-3 .search-trigger {
  display: inline-block;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  border: 1px solid #C6C9CA;
  text-align: center;
  line-height: 56px;
}
.header-section-3 .header-wrapper-3 .header-3 .header-right {
  gap: 60px;
  position: relative;
  z-index: 99;
}
@media (max-width: 991px) {
  .header-section-3 .header-wrapper-3 .header-3 .header-right {
    gap: 20px;
  }
}
.header-section-3 .header-wrapper-3 .header-3 .header-right .header-client-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 1399px) {
  .header-section-3 .header-wrapper-3 .header-3 .header-right .header-client-info {
    display: none;
  }
}
.header-section-3 .header-wrapper-3 .header-3 .header-right .header-client-info .icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  background-color: var(--white);
  text-align: center;
  border-radius: 50%;
  color: var(--header);
}
.header-section-3 .header-wrapper-3 .header-3 .header-right .header-client-info .content p {
  color: var(--white);
  opacity: 0.7;
}
.header-section-3 .header-wrapper-3 .header-3 .header-right .header-client-info .content h4 {
  color: var(--white);
  font-size: 18px;
  letter-spacing: 0.5px;
}
.header-section-3 .header-wrapper-3 .header-3 .sidebar__toggle {
  width: initial;
  height: initial;
  line-height: initial;
  border: none;
  background-color: transparent;
  color: var(--white);
  padding-right: 28px;
}
@media (max-width: 1399px) {
  .header-section-3 .header-wrapper-3 .header-3 .sidebar__toggle {
    color: var(--header);
  }
}

/* Add after line 3095 */
@media (max-width: 1199px) {
  .header-main .header-right .main-button {
    display: flex !important; /* Override the display: none */
    margin-top: 0 !important;
  }
  
  .header-main .header-right .theme-btn {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}
.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: all 0.9s;
  background-color: var(--white);
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.sticky.header-2::after {
  width: 475px;
}
.sticky.header-3 {
  padding-left: 30px;
}
.sticky.header-3 .header-left {
  display: block !important;
}

@media (max-width: 1199px) {
  .header-main .header-right .main-button {
    display: flex !important; /* Override the display: none */
    margin-top: 0 !important;
  }
  
  .header-main .header-right .theme-btn {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}

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

.offcanvas__info.info-open {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.offcanvas__wrapper {
  position: relative;
  height: 100%;
  padding: 20px 20px;
}
.offcanvas__wrapper .offcanvas__content .text {
  color: var(--text);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close i {
  color: var(--white);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact {
  margin-top: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul {
  margin-top: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li a {
  color: var(--text);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 15px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon {
  margin-right: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon i {
  color: var(--theme);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact span {
  text-transform: initial;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .header-button .theme-btn {
  width: 100%;
  padding: 20px 40px;
  text-transform: capitalize !important;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon {
  margin-top: 30px;
  gap: 10px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 16px;
  display: block;
  background: transparent;
  color: var(--text);
  border-radius: 50%;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-align: center;
  border: 1px solid var(--border);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}

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

.offcanvas__overlay.overlay-open {
  opacity: 0.8;
  visibility: visible;
}

@media (max-width: 450px) {
  .offcanvas__info {
    width: 300px;
  }
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.error-items {
  text-align: center;
}
.error-items .error-image {
  margin-bottom: 30px;
}
.error-items .error-image img {
  width: 100%;
  height: 100%;
}
.error-items .theme-btn {
  background-color: var(--header);
  color: var(--white);
}
.error-items .theme-btn::before {
  background-color: var(--theme);
}
.error-items .theme-btn:hover {
  color: var(--white);
}

.breadcrumb-wrapper {
  position: relative;
  z-index: 9;
}
@media (max-width: 1399px) {
  .breadcrumb-wrapper {
    margin-bottom: 0;
  }
}
.breadcrumb-wrapper .shape {
  position: absolute;
  bottom: -70px;  /*kaushik changed  70px to 90px*/
  right: 2%;
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .shape {
    display: none;
  }
}
.breadcrumb-wrapper .page-heading {
  position: relative;
  padding: 200px 0 200px;
  z-index: 9;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .page-heading {
    padding: 120px 0 120px;
  }
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .page-heading {
    text-align: center;
  }
}
.breadcrumb-wrapper .page-heading h1 {
  color: #323c46;	
  font-size: 40px;
  position: relative;
  text-transform: uppercase;
  z-index: 9;
  font-weight: 300;
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 42px;
  }
}
@media (max-width: 470px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 30px;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items {
  display: inline-flex;
  justify-content: center;
  margin-top: 2px;
  gap: 10px;
}
@media (max-width: 575px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items {
    margin-top: 2px;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li {
  color: #323c46;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  font-family: "Roboto Condensed", sans-serif;
  
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li a {
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.4s ease-in-out;
  color: #323c46;
  font-family: "Roboto Condensed", sans-serif;
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li a:hover {
  color: #323c46;
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li a i {
  color: var(--theme);
  margin-right: 5px;
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li i {
  color: #323c46;
}
.breadcrumb-wrapper .breadcrumb-image {
  position: absolute;
  bottom: 0;
  top: 0;
  right: 140px;
}
@media (max-width: 1600px) {
  .breadcrumb-wrapper .breadcrumb-image {
    right: 30px;
  }
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .breadcrumb-image {
    display: none;
  }
}

.error-items {
  text-align: center;
}
.error-items .thumb {
  max-width: 730px;
  margin: 0 auto;
}
.error-items .thumb img {
  width: 100%;
  height: 100%;
}
.error-items .content h2 {
  font-size: 72px;
  font-weight: 800;
}
@media (max-width: 991px) {
  .error-items .content h2 {
    font-size: 56px;
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .error-items .content h2 {
    font-size: 36px;
    margin-bottom: 20px;
  }
}
@media (max-width: 575px) {
  .error-items .content h2 {
    font-size: 26px;
    margin-bottom: 20px;
  }
}
.error-items .content p {
  margin-top: 30px;
}
.error-items .content .main-button {
  margin-top: 40px;
  justify-content: center;
}

/* Helping */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--theme);
  border-radius: 10px;
}

.fix {
  overflow: hidden;
}

.ralt {
  position: relative;
}

.ml-50 {
  margin-left: 50px;
}
@media (max-width: 1199px) {
  .ml-50 {
    margin-left: 0;
  }
}

.ripple {
  position: relative;
}
.ripple::before, .ripple::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110px;
  height: 110px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  -webkit-animation: rippleOne 3s infinite;
  animation: rippleOne 3s infinite;
}
.ripple::before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}
.ripple::after {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}

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

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

.sticky-style {
  position: sticky !important;
  top: 100px;
}

.gt-slide-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.gt-brand-slide-element {
  width: auto;
  display: inline-block;
}

.swiper-dot {
  text-align: center;
  margin-top: 50px;
  z-index: 1;
}
.swiper-dot .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  transition: 0.6s;
  background: var(--header);
  opacity: 1;
  border-radius: 10px;
}
.swiper-dot .swiper-pagination-bullet:not(:last-child) {
  margin-right: 20px;
}
.swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: rgb(40, 44, 50);
  transition: 0.6s;
  position: relative;
}
.swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  position: absolute;
  width: 21px;
  height: 21px;
  line-height: 21px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid rgb(0, 56, 101);
  content: "";
}
.swiper-dot.style-2 .swiper-pagination-bullet {
  background: var(--theme);
}
.swiper-dot.style-2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--theme);
}
.swiper-dot.style-2 .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border: 2px solid var(--header);
}

.page-nav-wrap {
  margin-top: 60px;
}
.page-nav-wrap ul li {
  display: inline-block;
}
.page-nav-wrap ul li.active .page-numbers {
  background-color: var(--theme);
  color: var(--white);
}
.page-nav-wrap ul li .page-numbers {
  display: inline-block;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 100px;
  border: 1px solid rgba(22, 22, 22, 0.2);
  background: transparent;
  color: var(--black);
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  margin: 0 2px;
}
.page-nav-wrap ul li .page-numbers.current {
  background-color: var(--theme);
  color: var(--white);
}
@media (max-width: 767px) {
  .page-nav-wrap ul li .page-numbers {
    margin-top: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
}
.page-nav-wrap ul li .page-numbers i {
  margin-top: 2px;
}
.page-nav-wrap ul li .page-numbers:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid var(--theme);
}

.array-button {
  display: flex;
  align-items: center;
  gap: 16px;
}
.array-button .array-prev, .array-button .array-next {
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: all 0.4s ease-in-out;
}
.array-button .array-prev {
  border: 1px solid var(--header);
}
.array-button .array-prev:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid var(--theme);
}
.array-button .array-next {
  background-color: var(--theme);
  color: var(--white);
}
.array-button .array-next:hover {
  background-color: var(--header);
  color: var(--white);
}

.footer-bg {
  background-color: #162726;
}

.footer-bg-2 {
  background-color: #F2F4F7;
}

.ml-40 {
  margin-left: 40px;
}
@media (max-width: 1399px) {
  .ml-40 {
    margin-left: 0;
  }
}

.page-nav-wrap {
  margin-top: 30px;
}
.page-nav-wrap ul li {
  display: inline-block;
}
.page-nav-wrap ul li.active .page-numbers {
  background-color: var(--theme);
  color: var(--white);
}
.page-nav-wrap ul li .page-numbers {
  display: inline-block;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  background: var(--bg);
  border: none;
  color: var(--header);
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  margin: 0 2px;
  border-radius: 50%;
  font-family: "Radio Canada Big", sans-serif;
}
.page-nav-wrap ul li .page-numbers.current {
  background-color: var(--theme);
  color: var(--white);
}
@media (max-width: 767px) {
  .page-nav-wrap ul li .page-numbers {
    margin-top: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
}
.page-nav-wrap ul li .page-numbers i {
  margin-top: 2px;
  color: var(--header);
  transition: all 0.4s ease-in-out;
}
.page-nav-wrap ul li .page-numbers:hover {
  background-color: var(--theme);
  color: var(--white);
  border: none;
}
.page-nav-wrap ul li .page-numbers:hover i {
  color: var(--white);
}

.slide-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.brand-slide-element {
  width: auto;
  display: inline-block;
}

/* Hero */
.hero-1 {
  padding: 10px 0 0;
}
@media (max-width: 991px) {
  .hero-1 {
    padding-top: 80px;
  }
}
.hero-1 .hero-image {
  direction: rtl;
}
@media (max-width: 991px) {
  .hero-1 .hero-image {
    margin-top: 50px;
  }
  .hero-1 .hero-image img {
    width: 100%;
    height: 100%;
  }
}
.hero-1 .hero-content {
  margin-right: -100px;
  margin-left: 20px;
  margin-top: -100px;
}
@media (max-width: 1199px) {
  .hero-1 .hero-content {
    margin-top: 0;
  }
}
@media (max-width: 991px) {
  .hero-1 .hero-content {
    margin-right: 0;
    margin-left: 0;
  }
}
.hero-1 .hero-content .hero-text {
  margin-top: 10px;
  color: #171717 !important;
  margin-bottom: 27px;
  max-width: 590px;
  letter-spacing: 0.04rem;
  font-family: "Rokkitt", serif;
}
@media (max-width: 767px) {
  .hero-1 .hero-content .hero-text {
    margin-bottom: 30px;
    opacity: 1;
  }
}
.hero-1 .hero-content .main-button:hover .theme-btn, .hero-1 .hero-content .main-button:hover .arrow-btn {
  background-color: var(--white);
  color: var(--black);
}
@media (max-width: 991px) {
  .hero-1 {
    background-image: none !important;
    background: linear-gradient(180deg, rgba(94, 228, 228, 0.3) 0%, rgba(255, 255, 255, 0) 100%)!important;
  }
}

.hero-2 {
  padding: 210px 0 100px;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .hero-2 {
    padding: 200px 25px;
  }
}
@media (max-width: 991px) {
  .hero-2 {
    padding: 170px 20px;
  }
}
.hero-2 .hero-content {
  max-width: 730px;
  margin-left: 155px;
}
@media (max-width: 1199px) {
  .hero-2 .hero-content {
    margin-left: 0;
  }
}
.hero-2 .hero-content h1 {
  font-size: 70px;
  line-height: 111%;
}
@media (max-width: 1600px) {
  .hero-2 .hero-content h1 {
    font-size: 54px;
  }
}
@media (max-width: 1399px) {
  .hero-2 .hero-content h1 {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  .hero-2 .hero-content h1 {
    font-size: 39px;
  }
}
@media (max-width: 575px) {
  .hero-2 .hero-content h1 {
    font-size: 32px;
  }
}
.hero-2 .hero-content p {
  color: var(--white);
  opacity: 0.7 !important;
  margin-bottom: 40px;
  max-width: 700px;
}
@media (max-width: 767px) {
  .hero-2 .hero-content p {
    margin-bottom: 30px;
    opacity: 1;
  }
}
.hero-2 .hero-content .hero-text {
  margin-top: 25px;
}
.hero-2 .hero-content .hero-button {
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 1199px) {
  .hero-2 .hero-content .hero-button {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.hero-2 .hero-content .hero-button .video-btn .video-text {
  padding: 16px 32px;
  display: inline-block;
  border: 1.5px solid var(--white);
  color: var(--white);
  font-family: "Radio Canada Big";
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 32px;
}
.hero-2 .hero-content .hero-button .video-btn i {
  width: 50px;
  height: 50px;
  line-height: 52px;
  text-align: center;
  border-radius: 100px;
  background-color: var(--theme);
  color: var(--white);
  display: inline-block;
  font-size: 18px;
}
@media (max-width: 767px) {
  .hero-2 .hero-content .hero-button .video-btn i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
}
.hero-2 .hero-content .hero-button .main-button {
  display: flex;
  align-items: center;
  gap: 30px;
}
.hero-2 .hero-content .hero-button .main-button:hover .theme-btn, .hero-2 .hero-content .hero-button .main-button:hover .arrow-btn {
  background-color: var(--white);
  color: var(--black);
}
.hero-2 .hero-image {
  margin-left: -40px;
}
@media (max-width: 1199px) {
  .hero-2 .hero-image {
    margin-left: 0;
  }
}
@media (max-width: 1899px) {
  .hero-2 .hero-image img {
    height: 100%;
    width: 100%;
  }
}

.hero-3 {
  padding: 0 0 150px 156px;
}
@media (max-width: 1399px) {
  .hero-3 {
    padding-left: 40px;
    padding-top: 100px;
  }
}
@media (max-width: 1199px) {
  .hero-3 {
    padding: 100px 0 100px 30px;
  }
}
@media (max-width: 991px) {
  .hero-3 {
    padding: 80px 0 80px 30px;
  }
}
.hero-3 .hero-content h1 {
  font-size: 70px;
  line-height: 111%;
}
@media (max-width: 1600px) {
  .hero-3 .hero-content h1 {
    font-size: 54px;
  }
}
@media (max-width: 1399px) {
  .hero-3 .hero-content h1 {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  .hero-3 .hero-content h1 {
    font-size: 39px;
  }
}
@media (max-width: 575px) {
  .hero-3 .hero-content h1 {
    font-size: 32px;
  }
}
.hero-3 .hero-content .hero-text {
  margin-top: 25px;
  color: var(--white);
  opacity: 0.7 !important;
  max-width: 663px;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .hero-3 .hero-content .hero-text {
    margin-bottom: 30px;
    opacity: 1;
  }
}
.hero-3 .hero-content .hero-button {
  display: flex;
  align-items: center;
  gap: 30px;
}
.hero-3 .hero-content .hero-button .video-btn .video-text {
  padding: 16px 32px;
  display: inline-block;
  border: 1.5px solid var(--white);
  color: var(--white);
  font-family: "Radio Canada Big";
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 32px;
}
.hero-3 .hero-content .hero-button .video-btn i {
  width: 50px;
  height: 50px;
  line-height: 52px;
  text-align: center;
  border-radius: 100px;
  background-color: var(--theme);
  color: var(--white);
  display: inline-block;
  font-size: 18px;
}
@media (max-width: 767px) {
  .hero-3 .hero-content .hero-button .video-btn i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
}
.hero-3 .hero-image {
  margin-left: -180px;
  margin-bottom: -80px;
}
@media (max-width: 1399px) {
  .hero-3 .hero-image {
    margin-left: 0;
    margin-bottom: 0;
  }
  .hero-3 .hero-image img {
    width: 100%;
    height: 100%;
  }
}

/* MeanMenu */
.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.mean-container .mean-nav > ul .homemenu-items {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
}
@media (max-width: 1199px) {
  .mean-container .mean-nav > ul .homemenu-items {
    flex-wrap: wrap;
  }
}
.mean-container .mean-nav > ul .homemenu-items .homemenu {
  position: relative;
}
@media (max-width: 1199px) {
  .mean-container .mean-nav > ul .homemenu-items .homemenu {
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid var(--border);
    padding: 10px;
  }
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb {
  position: relative;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  gap: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  margin-top: 20px;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn {
  padding: 12px 20px;
  color: var(--white) !important;
  width: initial;
  font-size: 16px;
  text-align: center;
  border-radius: 0;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn:hover {
  color: var(--white) !important;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb::before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 19, 19, 0)), to(#5e5ef6));
  background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #252527 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover::before {
  visibility: visible;
  opacity: 1;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover .demo-button {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb:hover .homemenu-btn {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
  transform: translateY(50%);
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-thumb img {
  width: 100%;
}
.mean-container .mean-nav > ul .homemenu-items .homemenu .homemenu-title {
  text-align: center;
  margin: 15px auto;
  display: inline-block;
  font-size: 16px;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px ;
  color: var(--header);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  text-transform: capitalize;
  border-bottom: 1px solid var(--border) !important;
  border: none;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--theme);
}

.mean-container .mean-nav ul li a:last-child {
  border-bottom: 0;
}

.mean-container .mean-nav ul li a:hover {
  color: var(--theme);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 5px;
  padding: 0 !important;
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
  font-size: 18px;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}

.mean-container .mean-nav ul li .mega-menu li a {
  height: 200px;
  width: 100%;
  padding: 0;
  border-top: 0;
  margin-bottom: 20px;
}

/* News */
.news-top-items {
  margin-top: 30px;
}
.news-top-items .news-image img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.news-top-items .news-content {
  margin-left: 40px;
}
@media (max-width: 1199px) {
  .news-top-items .news-content {
    margin-left: 0;
  }
}
.news-top-items .news-content.style-2 {
  margin-left: 0 !important;
}
.news-top-items .news-content ul {
  display: flex;
  gap: 32px;
}
.news-top-items .news-content ul li {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
  display: inline-block;
}
.news-top-items .news-content ul li::before {
  width: 16px;
  height: 2px;
  line-height: 4px;
  position: absolute;
  top: 12px;
  left: 0;
  content: "";
  background-color: var(--theme);
}
.news-top-items .news-content h3 {
  font-size: 32px;
  margin-bottom: 10px;
}
@media (max-width: 1199px) {
  .news-top-items .news-content h3 {
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  .news-top-items .news-content h3 {
    font-size: 22px;
  }
}
@media (max-width: 575px) {
  .news-top-items .news-content h3 {
    font-size: 20px;
  }
}
.news-top-items .news-content h3 a:hover {
  color: var(--theme);
}

.news-section {
  position: relative;
  z-index: 9;
}
.news-section .news-shape-1 {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: 0;
}
.news-section .news-shape-2 {
  position: absolute;
  z-index: -1;
  bottom: 10%;
  left: 0;
}

.news-box-items-2 {
  margin-top: 30px;
}
.news-box-items-2 .news-image img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.news-box-items-2 .news-content {
  margin-top: 15px;
}
.news-box-items-2 .news-content ul {
  display: flex;
  gap: 32px;
}
.news-box-items-2 .news-content ul li {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
  display: inline-block;
}
.news-box-items-2 .news-content ul li::before {
  width: 16px;
  height: 2px;
  line-height: 4px;
  position: absolute;
  top: 12px;
  left: 0;
  content: "";
  background-color: var(--theme);
}
.news-box-items-2 .news-content h3 a:hover {
  color: var(--theme);
}

.news-box-items-3 {
  margin-top: 30px;
  border-radius: 12px;
  background: var(--bg);
}
.news-box-items-3 .news-image img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.news-box-items-3 .news-content {
  padding: 20px 24px 32px 50px;
  position: relative;
}
.news-box-items-3 .news-content h3 a:hover {
  color: var(--theme);
}
.news-box-items-3 .news-content ul {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 20px;
}
.news-box-items-3 .news-content ul li {
  display: flex;
  gap: 7px;
  align-items: center;
}
.news-box-items-3 .news-content ul li i {
  color: var(--theme);
}
.news-box-items-3 .news-content .post-date {
  position: absolute;
  rotate: -90deg;
  content: "";
  top: 37%;
  left: -15%;
  width: 39%;
  height: 40px;
  background-color: transparent;
  padding: 8px 10px;
  text-align: center;
  transition: all 0.4s ease-in-out;
  border-radius: 5px 0 0 0;
}
.news-box-items-3:hover .post-date {
  background-color: var(--theme);
}
.news-box-items-3:hover .post-date span {
  color: var(--white);
}

.news-standard-wrapper .news-standard-items:not(:last-child) {
  margin-bottom: 50px;
}
.news-standard-wrapper .news-standard-items .news-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.news-standard-wrapper .news-standard-items .news-content {
  margin-top: 20px;
  position: relative;
  z-index: 9;
}
.news-standard-wrapper .news-standard-items .news-content ul {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 15px;
}
@media (max-width: 1199px) {
  .news-standard-wrapper .news-standard-items .news-content ul {
    gap: 20px;
  }
}
.news-standard-wrapper .news-standard-items .news-content ul li i {
  color: var(--theme);
  margin-right: 5px;
  font-size: 20px;
}
.news-standard-wrapper .news-standard-items .news-content ul li:hover .style-2 {
  background-color: var(--theme);
  border-radius: 100px;
  padding: 5px 15px;
}
.news-standard-wrapper .news-standard-items .news-content h3 {
  margin-bottom: 15px;
  font-size: 32px;
}
@media (max-width: 575px) {
  .news-standard-wrapper .news-standard-items .news-content h3 {
    font-size: 24px;
  }
}
.news-standard-wrapper .news-standard-items .news-content h3 a:hover {
  color: var(--theme);
}
.news-standard-wrapper .highlight-box {
  background-color: #FFF0EB;
  color: var(--header);
  margin-top: 30px;
  display: block;
  padding: 24px 32px;
  border-left: 6px solid var(--theme);
  border-radius: 8px;
}
.news-standard-wrapper .highlight-box p {
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
}
.news-standard-wrapper .introduced-box {
  margin-top: 40px;
}
.news-standard-wrapper .introduced-box h3 {
  margin-bottom: 8px;
}
.news-standard-wrapper .introduced-box .list-area ul {
  margin-top: 16px;
}
.news-standard-wrapper .introduced-box .list-area ul li {
  font-weight: 600;
  display: block;
  font-size: 16px;
  font-family: "Radio Canada Big", sans-serif;
  color: var(--header);
}
.news-standard-wrapper .introduced-box .list-area ul li i {
  color: var(--white);
  margin-right: 10px;
  background-color: var(--theme);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 21px;
  font-size: 10px;
  text-align: center;
  font-weight: 400;
}
.news-standard-wrapper .introduced-box .list-area ul li:not(:last-child) {
  margin-bottom: 14px;
}
.news-standard-wrapper .introduced-box .list-area ul li span {
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  font-family: "Hedvig Letters Sans", sans-serif;
}
.news-standard-wrapper .introduced-box .list-area ul li span.color-2 {
  color: var(--header);
}
.news-standard-wrapper .operation-box {
  margin-top: 30px;
}
.news-standard-wrapper .operation-box h3 {
  margin-bottom: 24px;
}
.news-standard-wrapper .operation-box .list-area h4 {
  margin-bottom: 8px;
}
.news-standard-wrapper .operation-box .list-area p {
  margin-bottom: 20px;
}
.news-standard-wrapper .feature-box .feature-items .feature-img img {
  border-radius: 8px;
  height: 100%;
  width: 100%;
}
.news-standard-wrapper .feature-box .feature-items .content {
  margin-top: 32px;
  margin-bottom: 32px;
}
.news-standard-wrapper .feature-box .feature-items .content h3 {
  margin-bottom: 16px;
}
.news-standard-wrapper .feature-box .feature-items .content ul li {
  font-weight: 500;
  color: var(--header);
  display: block;
  font-size: 16px;
  font-family: "Radio Canada Big", sans-serif;
}
.news-standard-wrapper .feature-box .feature-items .content ul li i {
  color: var(--white);
  margin-right: 10px;
  background-color: var(--theme);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  font-weight: 400;
}
.news-standard-wrapper .feature-box .feature-items .content ul li:not(:last-child) {
  margin-bottom: 14px;
}
.news-standard-wrapper .tag-share-wrap {
  border-bottom: 1.2px solid rgba(191, 191, 191, 0.24);
  padding: 30px 0;
}
.news-standard-wrapper .tag-share-wrap .tagcloud span {
  font-size: 20px;
  font-weight: 600;
  display: inline-block;
  color: var(--header);
  margin-right: 15px;
}
.news-standard-wrapper .tag-share-wrap .tagcloud a {
  display: inline-block;
  padding: 14px 26px;
  line-height: 1;
  background: var(--bg);
  margin-right: 8px;
  text-transform: capitalize;
  font-weight: 600;
  transition: all 0.4s ease-in-out;
  border-radius: 30px;
}
@media (max-width: 1199px) {
  .news-standard-wrapper .tag-share-wrap .tagcloud a {
    padding: 10px 20px;
  }
}
@media (max-width: 1199px) {
  .news-standard-wrapper .tag-share-wrap .tagcloud a {
    margin-bottom: 15px;
  }
}
.news-standard-wrapper .tag-share-wrap .tagcloud a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.news-standard-wrapper .tag-share-wrap .social-share a {
  font-size: 16px;
  color: var(--header);
  display: inline-block;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background-color: var(--bg);
  border-radius: 50%;
}
.news-standard-wrapper .tag-share-wrap .social-share a:not(:last-child) {
  margin-right: 10px;
}
.news-standard-wrapper .tag-share-wrap .social-share a:hover {
  color: var(--white);
  background-color: var(--theme);
}
.news-standard-wrapper .comments-area {
  margin-top: 40px;
}
.news-standard-wrapper .comments-area h3 {
  font-size: 28px;
}
@media (max-width: 575px) {
  .news-standard-wrapper .comments-area .blog-single-comment {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.news-standard-wrapper .comments-area .blog-single-comment.style-2 {
  margin-left: 100px;
}
.news-standard-wrapper .comments-area .blog-single-comment .content .head .con h5 {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 20px;
}
.news-standard-wrapper .comments-area .blog-single-comment .content .reply {
  padding: 5px 18px;
  font-weight: 400;
  background-color: var(--theme);
  color: var(--white);
  transition: all 0.4s ease-in-out;
  border-radius: 20px;
}
.news-standard-wrapper .comments-area .blog-single-comment .content .reply:hover {
  background-color: var(--header);
}
.news-standard-wrapper .comment-form-wrap h3 {
  font-size: 32px;
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .news-standard-wrapper .comment-form-wrap h3 {
    font-size: 28px;
    margin-bottom: 20px;
  }
}
.news-standard-wrapper .comment-form-wrap .form-clt input, .news-standard-wrapper .comment-form-wrap .form-clt textarea {
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  border: 1px solid var(--border);
  padding: 16px 20px;
  font-weight: 500;
}
.news-standard-wrapper .comment-form-wrap .form-clt input::placeholder, .news-standard-wrapper .comment-form-wrap .form-clt textarea::placeholder {
  color: var(--text);
}
.news-standard-wrapper .comment-form-wrap .form-clt textarea {
  padding-bottom: 100px;
}

.main-sidebar .single-sidebar-widget {
  padding: 40px 30px;
  background-color: var(--bg);
  margin-bottom: 30px;
  border-radius: 16px;
}
.main-sidebar .single-sidebar-widget .search-widget form {
  width: 100%;
  position: relative;
}
.main-sidebar .single-sidebar-widget .search-widget form input {
  background-color: var(--white);
  font-size: 15px;
  padding: 20px;
  width: 100%;
  border: none;
  color: var(--text);
  border-radius: 100px;
}
.main-sidebar .single-sidebar-widget .search-widget form button {
  position: absolute;
  right: 16px;
  top: 13px;
  width: 40px;
  font-size: 18px;
  height: 40px;
  line-height: 40px;
  background-color: var(--theme);
  color: var(--white);
  text-align: center;
  transition: all 0.3s ease-in-out;
  border-radius: 100px;
}
.main-sidebar .single-sidebar-widget .search-widget form button:hover {
  background-color: var(--header);
}
.main-sidebar .single-sidebar-widget .widget-title {
  border-bottom: 1.5px solid rgba(129, 129, 129, 0.24);
  padding-bottom: 16px;
  margin-bottom: 30px;
  position: relative;
}
.main-sidebar .single-sidebar-widget .widget-title::before {
  position: absolute;
  content: "";
  width: 80px;
  height: 3px;
  background-color: var(--theme);
  left: 0;
  bottom: -2px;
}
.main-sidebar .single-sidebar-widget .widget-title h3 {
  font-weight: 700;
  font-size: 24px;
}
.main-sidebar .single-sidebar-widget .category-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  color: var(--header);
  transition: all 0.4s ease-in-out;
  background-color: var(--white);
  padding: 20px 22px;
  line-height: 1;
  border-radius: 100px;
}
.main-sidebar .single-sidebar-widget .category-list li a {
  color: var(--text);
}
.main-sidebar .single-sidebar-widget .category-list li i {
  transition: all 0.4s ease-in-out;
  color: var(--text);
}
.main-sidebar .single-sidebar-widget .category-list li:not(:last-child) {
  margin-bottom: 20px;
}
.main-sidebar .single-sidebar-widget .category-list li span b {
  font-weight: 400;
  color: var(--theme);
}
.main-sidebar .single-sidebar-widget .category-list li:hover {
  background-color: var(--theme);
}
.main-sidebar .single-sidebar-widget .category-list li:hover a {
  color: var(--white);
}
.main-sidebar .single-sidebar-widget .category-list li:hover i, .main-sidebar .single-sidebar-widget .category-list li:hover span {
  color: var(--white);
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items:not(:last-child) {
  margin-bottom: 20px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-thumb img {
  border-radius: 8px;
  height: 100%;
  width: 100%;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content {
  margin-top: 16px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content ul {
  margin-bottom: 8px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content ul li {
  color: var(--theme);
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content ul li i {
  margin-right: 5px;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content h6 {
  font-weight: 700;
}
.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-content h6 a:hover {
  color: var(--theme);
}
.main-sidebar .single-sidebar-widget .tagcloud a {
  display: inline-block;
  padding: 11px 20px;
  line-height: 1;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid rgba(129, 129, 129, 0.24);
  margin-right: 5px;
  border-radius: 100px;
  text-transform: capitalize;
  margin-bottom: 10px;
  transition: all 0.4s ease-in-out;
}
.main-sidebar .single-sidebar-widget .tagcloud a:last-child {
  margin-right: 0;
}
.main-sidebar .single-sidebar-widget .tagcloud a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.main-sidebar .single-sidebar-image {
  height: 400px;
  max-width: 500px;
  position: relative;
}
@media (max-width: 991px) {
  .main-sidebar .single-sidebar-image {
    max-width: 800px;
  }
}
.main-sidebar .single-sidebar-image::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(180deg, #3C72FC 0%, rgba(0, 6, 12, 0) 100%);
  opacity: 0.9;
}
.main-sidebar .single-sidebar-image .contact-text {
  position: relative;
  text-align: center;
  padding: 130px 30px;
  margin: 0 auto;
}
.main-sidebar .single-sidebar-image .contact-text .icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background-color: var(--white);
  text-align: center;
  color: var(--theme);
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}
.main-sidebar .single-sidebar-image .contact-text .icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--white);
  content: "";
  transform: translate(-50%, -50%);
}
.main-sidebar .single-sidebar-image .contact-text h4 {
  color: var(--white);
  margin-top: 30px;
}
.main-sidebar .single-sidebar-image .contact-text h5 {
  margin-top: 15px;
}
.main-sidebar .single-sidebar-image .contact-text h5 a {
  color: var(--white);
}

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

.back-to-top {
  background-color: var(--theme);
  width: 50px;
  height: 50px;
  line-height: 40px;
  color: var(--white);
  font-size: 16px;
  position: fixed;
  display: inline-block;
  z-index: 9999;
  right: 30px;
  bottom: 30px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}
@media (max-width: 575px) {
  .back-to-top {
    display: none;
  }
}
.back-to-top:hover {
  background-color: var(--header);
  color: var(--bg);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translate(0);
}

.cursor-outer {
  -webkit-margin-start: -12px;
  margin-inline-start: -12px;
  margin-top: -12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--theme);
  background-color: var(--theme);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.34;
  -webkit-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
}

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

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

.mouseCursor {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
  text-align: center;
}

.mouseCursor.cursor-big {
  width: 20px;
  height: 20px;
  -webkit-margin-start: -12px;
  margin-inline-start: -12px;
  margin-top: -12px;
}

.cursor-inner {
  -webkit-margin-start: -3px;
  margin-inline-start: -3px;
  margin-top: -3px;
  width: 10px;
  height: 10px;
  z-index: 10000001;
  background-color: var(--theme);
  opacity: 1;
  -webkit-transition: all 0.24s ease-out 0s;
  transition: all 0.24s ease-out 0s;
}
.cursor-inner span {
  color: var(--text);
  line-height: 60px;
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}

.cursor-inner.cursor-big span {
  opacity: 1;
}

.cursor-inner.cursor-hover {
  -webkit-margin-start: -10px;
  margin-inline-start: -10px;
  margin-top: -10px;
  width: 30px;
  height: 30px;
  background-color: var(--theme);
  border: 1px solid #686363;
  opacity: 0;
}

.search-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background-color: rgba(255, 255, 255, 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;
  text-transform: capitalize;
  background: transparent;
  font-size: 25px;
  color: var(--theme);
  border-bottom: 2px solid var(--theme);
  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(--theme);
}

input.main-search-input::placeholder {
  color: var(--theme);
  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(--theme);
  cursor: pointer;
}

/* Project */
.project-wrapper {
  margin-left: -6%;
  margin-right: -10%;
}
@media (max-width: 1199px) {
  .project-wrapper {
    margin: 0;
  }
}
.project-wrapper .project-box-items {
  position: relative;
}
.project-wrapper .project-box-items .project-image {
  position: relative;
}
.project-wrapper .project-box-items .project-image img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.project-wrapper .project-box-items .project-image:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.32);
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.project-wrapper .project-box-items .project-image .project-content {
  background-color: var(--white);
  padding: 24px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.project-wrapper .project-box-items .project-image .project-content h3 {
  margin-bottom: 10px;
}
.project-wrapper .project-box-items .project-image .project-content h3 a:hover {
  color: var(--theme);
}
.project-wrapper .project-box-items:hover .project-content {
  opacity: 1;
  visibility: visible;
}
.project-wrapper .project-box-items:hover .project-image:before {
  opacity: 0.9;
}

.project-image-items-3 {
  position: relative;
  z-index: 9;
}
.project-image-items-3::before {
  border-radius: 16px;
  background: rgba(0, 14, 18, 0.32);
  backdrop-filter: blur(28px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  left: 24px;
  top: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  justify-content: center;
}
.project-image-items-3 img {
  border-radius: 12px;
  width: 100%;
  height: 100%;
}
.project-image-items-3 .project-content {
  position: absolute;
  bottom: 56px;
  left: 56px;
  right: 56px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.project-image-items-3 .project-content h3 a {
  color: var(--white);
}
.project-image-items-3 .project-content h3 a:hover {
  color: var(--theme);
}
.project-image-items-3 .project-content p {
  margin-top: 10px;
  color: var(--white);
}
.project-image-items-3 .project-content .link-btns {
  margin-top: 10px;
}
.project-image-items-3 .project-content .link-btns:hover {
  color: var(--white);
}
.project-image-items-3:hover::before {
  opacity: 1;
  visibility: visible;
}
.project-image-items-3:hover .project-content {
  opacity: 1;
  visibility: visible;
}

.project-section-3 {
  position: relative;
  z-index: 9;
}
.project-section-3::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--white);
  height: 40%;
}

.project-details-items .details-image img {
  border-radius: 16px;
  height: 100%;
  width: 100%;
}
.project-details-items .details-content {
  margin-top: 32px;
}
.project-details-items .details-content ul {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 15px;
}
@media (max-width: 1199px) {
  .project-details-items .details-content ul {
    gap: 20px;
  }
}
.project-details-items .details-content ul li {
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 575px) {
  .project-details-items .details-content ul li {
    font-size: 14px;
  }
}
.project-details-items .details-content ul li i {
  color: var(--theme);
  margin-right: 5px;
  font-size: 22px;
}
.project-details-items .details-content h3 {
  margin-bottom: 15px;
  font-size: 48px;
}
@media (max-width: 767px) {
  .project-details-items .details-content h3 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .project-details-items .details-content h3 {
    font-size: 24px;
  }
}
.project-details-items .details-list-items h3 {
  margin-top: 32px;
  margin-bottom: 16px;
}
@media (max-width: 767px) {
  .project-details-items .details-list-items h3 {
    margin-top: 20px;
  }
}
.project-details-items .details-list-items p {
  margin-top: 16px;
}
.project-details-items .details-list-items ul li {
  font-weight: 400;
  color: var(--header);
  display: block;
  font-size: 16px;
  font-family: "Hedvig Letters Sans", sans-serif;
}
.project-details-items .details-list-items ul li i {
  color: var(--white);
  margin-right: 10px;
  background-color: var(--theme);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 21px;
  font-size: 10px;
  text-align: center;
  font-weight: 400;
}
.project-details-items .details-list-items ul li:not(:last-child) {
  margin-bottom: 14px;
}
.project-details-items .details-img {
  margin-top: 24px;
}
.project-details-items .details-img img {
  border-radius: 8px;
  height: 100%;
  width: 100%;
}
.project-details-items .project-category {
  padding: 40px 30px;
  margin-top: -67px;
  background-color: var(--bg);
  border-radius: 16px;
}
@media (max-width: 1199px) {
  .project-details-items .project-category {
    margin-top: 0;
  }
}
.project-details-items .project-category h3 {
  border-bottom: 1px solid rgba(198, 201, 202, 0.2392156863);
  padding-bottom: 30px;
}
.project-details-items .project-category ul li {
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(198, 201, 202, 0.2392156863);
  padding: 16px 0;
  color: var(--text);
}
.project-details-items .project-category ul li span {
  font-weight: 500;
  color: var(--header);
  font-size: 16px;
  font-weight: 600;
}
.project-details-items .project-category ul li span i {
  color: var(--text);
  transition: all 0.4s ease-in-out;
}
.project-details-items .project-category ul li span i:hover {
  color: var(--theme);
}
.project-details-items .social-list {
  padding: 40px 30px;
  margin-top: 64px;
  background-color: var(--bg);
  border-radius: 16px;
}
@media (max-width: 1399px) {
  .project-details-items .social-list {
    margin-top: 40px;
  }
}
.project-details-items .social-list h3 {
  border-bottom: 1px solid rgba(198, 201, 202, 0.2392156863);
  padding-bottom: 20px;
}
.project-details-items .social-list .social-icon {
  gap: 15px;
  position: relative;
  z-index: 9;
  margin-top: 24px;
}
.project-details-items .social-list .social-icon a {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  display: block;
  border-radius: 50%;
  color: var(--text);
  transition: all 0.4s ease-in-out;
  text-align: center;
  background-color: var(--white);
}
.project-details-items .social-list .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}

/* Section */
.section-title {
  position: relative;
  z-index: 99;
  margin-bottom: 30px;
}
.section-title h6 {
  color: #323c46;
  font-size: 19px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 15px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: "Roboto Condensed", sans-serif;
}
@media (max-width: 991px) {
  .section-title h6 {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .section-title h6 {
    font-size: 16px;
  }
}
.section-title h6.style-2 {
  color: var(--white);
}
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 0;
  }
}

.section-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 9;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .section-title-area {
    margin-bottom: 0;
  }
}
.section-title-area .section-title {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .section-title-area {
    flex-wrap: wrap;
  }
}
.section-title-area p {
  max-width: 532px;
}
.section-title-area .nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 1199px) {
  .section-title-area .nav {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.section-title-area .nav .nav-item .nav-link {
  font-size: 16px;
  font-weight: 600;
  color: #6C706F;
}
.section-title-area .nav .nav-item .nav-link.active {
  color: var(--header);
}

.center {
  text-align: center;
  margin: 0 auto;
}

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

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

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

.section-padding {
  padding: 0px 0; /*Kaushik changed 120px to 0px */
}
@media (max-width: 1199px) {
  .section-padding {
    padding: 100px 0;
  }
}
@media (max-width: 991px) {
  .section-padding {
    padding: 0px 0;
  }
}

/* Service */
.service-box-items {
  border-radius: 12px;
  background-color: var(--white);
  border: 1.5px solid var(--white);
  padding: 30px 50px;
  margin-top: 30px;
  transition: all 0.4s ease-in-out;
}
.service-box-items .service-image img {
  width: 100%;
  height: 100%;
}
.service-box-items .service-content {
  text-align: center;
}
.service-box-items .service-content .service-icon {
  position: relative;
  width: 64px;
  height: 64px;
  background-color: var(--bg);
  line-height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  margin-top: -35px;
  transition: all 0.4s ease-in-out;
}
.service-box-items .service-content .service-icon svg {
  position: relative;
  z-index: 3;
  text-align: center;
}
.service-box-items .service-content h3 {
  margin-top: 22px;
}
.service-box-items .service-content h3 a:hover {
  color: var(--theme);
}
.service-box-items:hover {
  border-radius: 12px;
  border: 1.5px solid var(--theme);
}
.service-box-items:hover .service-content .service-icon {
  background-color: var(--theme);
}
.service-box-items:hover .service-content .service-icon svg path {
  fill: var(--white);
}

.service-section {
  position: relative;
  z-index: 9;
}
.service-section .service-shape-1 {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
}
@media (max-width: 1399px) {
  .service-section .array-button {
    display: none;
  }
}
.service-section .array-button .array-prev {
  position: absolute;
  content: "";
  top: 23%;
  left: 18%;
  z-index: 99;
}
.service-section .array-button .array-next {
  position: absolute;
  content: "";
  top: 23%;
  right: 18%;
  z-index: 99;
}

.service-box-items-2 {
  margin-top: 30px;
}
.service-box-items-2 .service-image {
  position: relative;
}
.service-box-items-2 .service-image img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.service-box-items-2 .service-image .icon-text {
  height: 36px;
  line-height: 36px;
  background-color: #000E12;
  font-size: 18px;
  font-weight: 400;
  display: inline-block;
  padding: 0 16px;
  position: absolute;
  bottom: 15px;
  left: 94px;
  opacity: 0;
  visibility: hidden;
  color: var(--white);
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) {
  .service-box-items-2 .service-image .icon-text {
    display: none;
  }
}
.service-box-items-2 .service-image .icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-color: var(--header);
  border-radius: 4px;
  text-align: center;
  position: absolute;
  bottom: 15px;
  left: 15px;
  transition: all 0.4s ease-in-out;
}
.service-box-items-2 .service-image .icon img {
  width: initial;
  height: initial;
}
.service-box-items-2 .service-content {
  padding: 16px 22px;
}
.service-box-items-2 .service-content h3 {
  margin-bottom: 8px;
}
.service-box-items-2 .service-content h3 a:hover {
  color: var(--theme);
}
.service-box-items-2 .service-content .link-btns {
  color: var(--header);
  margin-top: 10px;
}
.service-box-items-2 .service-content .link-btns:hover {
  color: var(--theme);
}
.service-box-items-2:hover .service-image .icon {
  background-color: var(--theme);
}
.service-box-items-2:hover .service-image .icon-text {
  opacity: 0.9;
  visibility: visible;
}

.service-section-2 {
  position: relative;
  z-index: 9;
}
.service-section-2 .service-shape-1 {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.service-box-items-3 {
  margin-top: 30px;
  border-radius: 12px;
  background: #F1F1F1;
}
.service-box-items-3 .service-content {
  padding: 32px;
}
.service-box-items-3 .service-content h3 {
  margin-bottom: 8px;
}
.service-box-items-3 .service-content h3 a:hover {
  color: var(--theme);
}
.service-box-items-3 .service-image img {
  border-radius: 12px;
}
.service-box-items-3 .service-image {
  position: relative;
}
.service-box-items-3 .service-image img {
  width: 100%;
  height: 100%;
}
.service-box-items-3 .service-image .icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-color: var(--theme);
  border-radius: 4px;
  text-align: center;
  position: absolute;
  top: -12px;
  right: 30px;
}
.service-box-items-3 .service-image .icon img {
  width: initial;
  height: initial;
}

.service-details-wrapper .details-image img {
  height: 100%;
  width: 100%;
}
.service-details-wrapper h3 {
  color: var(--header);
  font-size: 40px;
  margin-bottom: 12px;
}
@media (max-width: 767px) {
  .service-details-wrapper h3 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .service-details-wrapper h3 {
    font-size: 24px;
  }
}
.service-details-wrapper .highlight-box {
  background-color: #FFF0EB;
  color: var(--header);
  margin-top: 30px;
  display: block;
  padding: 24px 32px;
  border-left: 6px solid var(--theme);
  border-radius: 8px;
}
.service-details-wrapper .highlight-box p {
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
}
.service-details-wrapper .details-list-item {
  margin-top: 30px;
  margin-bottom: 40px;
}
.service-details-wrapper .details-list-item h3 {
  font-size: 24px;
  margin-bottom: 24px;
}
.service-details-wrapper .details-list-item ul li {
  text-transform: capitalize;
}
.service-details-wrapper .details-list-item ul li span {
  font-weight: 500;
  color: var(--header);
  display: block;
  font-size: 18px;
  font-family: "Radio Canada Big", sans-serif;
  margin-bottom: 8px;
}
.service-details-wrapper .details-list-item ul li span i {
  color: var(--white);
  margin-right: 10px;
  background-color: var(--theme);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  font-weight: 400;
}
.service-details-wrapper .details-list-item ul li:not(:last-child) {
  margin-bottom: 16px;
}
.service-details-wrapper .details-list-item p {
  margin-top: 24px;
}
.service-details-wrapper .feature-box {
  margin-bottom: 32px;
}
.service-details-wrapper .feature-box .feature-image img {
  height: 100%;
  width: 100%;
}
.service-details-wrapper .feature-box .feature-content h3 {
  font-size: 24px;
  margin-bottom: 24px;
}
.service-details-wrapper .feature-box .feature-content ul li {
  font-weight: 500;
  color: var(--header);
  display: block;
  font-size: 16px;
  font-family: "Radio Canada Big", sans-serif;
}
.service-details-wrapper .feature-box .feature-content ul li i {
  color: var(--white);
  margin-right: 10px;
  background-color: var(--theme);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  font-weight: 400;
}
.service-details-wrapper .feature-box .feature-content ul li:not(:last-child) {
  margin-bottom: 14px;
}
.service-details-wrapper .faq-content {
  margin-top: 40px;
}
.service-details-wrapper .faq-content .accordion-item {
  border: none !important;
  background: var(--bg);
  border-radius: 5px;
}
.service-details-wrapper .faq-content .accordion-item .accordion-header .accordion-button {
  font-weight: 500;
  color: var(--header);
  letter-spacing: -0.2px;
  border: none !important;
  font-family: "Radio Canada Big", sans-serif;
  border-radius: 0;
  box-shadow: none;
  background: #F4F4F4;
  padding: 20px 30px 0;
  text-transform: capitalize;
  font-size: 20px;
}
@media (max-width: 1199px) {
  .service-details-wrapper .faq-content .accordion-item .accordion-header .accordion-button {
    font-size: 18px;
  }
}
@media (max-width: 575px) {
  .service-details-wrapper .faq-content .accordion-item .accordion-header .accordion-button {
    font-size: 18px;
    padding: 20px 20px 0;
  }
}
.service-details-wrapper .faq-content .accordion-item .accordion-header .accordion-button::after {
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  position: absolute;
  top: 22px;
  right: 24px;
  content: "\f324";
  color: var(--header);
  font-family: "Font Awesome 6 Pro";
  background-image: none;
}
.service-details-wrapper .faq-content .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  font-weight: 500;
  color: var(--theme);
  transform: rotate(0);
  background-image: none;
  content: "\f322";
}
.service-details-wrapper .faq-content .accordion-item .accordion-header .accordion-button.collapsed {
  background: #F4F4F4;
  padding: 22px 30px;
  color: var(--header);
  border-radius: 16px;
}
.service-details-wrapper .faq-content .accordion-item .accordion-collapse .accordion-body {
  padding-left: 33px;
  padding-top: 15px;
  padding-right: 40px;
  color: var(--text);
  background: var(--bg);
  padding-bottom: 28px;
  border-radius: 16px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
@media (max-width: 767px) {
  .service-details-wrapper .faq-content .accordion-item .accordion-collapse .accordion-body {
    padding-left: 60px;
  }
}
@media (max-width: 575px) {
  .service-details-wrapper .faq-content .accordion-item .accordion-collapse .accordion-body {
    padding-left: 20px;
    padding-bottom: 20px;
  }
}
.service-details-wrapper .main-sideber .single-sideber-widget {
  margin-bottom: 40px;
  background-color: var(--bg);
  padding: 30px;
  border-radius: 16px;
}
.service-details-wrapper .main-sideber .single-sideber-widget .search-widget form {
  width: 100%;
  position: relative;
}
.service-details-wrapper .main-sideber .single-sideber-widget .search-widget form input, .service-details-wrapper .main-sideber .single-sideber-widget .search-widget form textarea {
  background-color: var(--white);
  font-size: 18px;
  font-weight: 400;
  padding: 16px 20px;
  width: 100%;
  border: none;
  color: var(--text);
}
.service-details-wrapper .main-sideber .single-sideber-widget .search-widget form textarea {
  padding-bottom: 90px;
  resize: none;
  outline: none;
}
.service-details-wrapper .main-sideber .single-sideber-widget .search-widget form button {
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  background-color: var(--theme);
  color: var(--white);
  text-align: center;
  transition: all 0.3s ease-in-out;
  padding: 20px 24px;
  border-radius: 100px;
  margin: 0;
}
.service-details-wrapper .main-sideber .single-sideber-widget .search-widget form button i {
  margin-left: 10px;
}
.service-details-wrapper .main-sideber .single-sideber-widget .search-widget form button:hover {
  background-color: var(--header);
}
.service-details-wrapper .main-sideber .single-sideber-widget .widget-title {
  border-bottom: 1.5px solid rgba(129, 129, 129, 0.24);
  padding-bottom: 16px;
  margin-bottom: 30px;
  position: relative;
}
.service-details-wrapper .main-sideber .single-sideber-widget .widget-title::before {
  position: absolute;
  content: "";
  width: 80px;
  height: 3px;
  background-color: var(--theme);
  left: 0;
  bottom: -2px;
}
.service-details-wrapper .main-sideber .single-sideber-widget .widget-title h3 {
  font-weight: 700;
  font-size: 24px;
}
.service-details-wrapper .main-sideber .single-sideber-widget .category-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 400;
  color: var(--header);
  transition: all 0.4s ease-in-out;
  background-color: var(--white);
  padding: 20px 22px;
  line-height: 1;
  border-radius: 100px;
}
.service-details-wrapper .main-sideber .single-sideber-widget .category-list li a {
  color: var(--text);
}
.service-details-wrapper .main-sideber .single-sideber-widget .category-list li i {
  transition: all 0.4s ease-in-out;
  color: var(--text);
}
.service-details-wrapper .main-sideber .single-sideber-widget .category-list li:not(:last-child) {
  margin-bottom: 20px;
}
.service-details-wrapper .main-sideber .single-sideber-widget .category-list li span b {
  font-weight: 400;
  color: var(--theme);
}
.service-details-wrapper .main-sideber .single-sideber-widget .category-list li:hover {
  background-color: var(--theme);
}
.service-details-wrapper .main-sideber .single-sideber-widget .category-list li:hover a {
  color: var(--white);
}
.service-details-wrapper .main-sideber .single-sideber-widget .category-list li:hover i, .service-details-wrapper .main-sideber .single-sideber-widget .category-list li:hover span {
  color: var(--white);
}
.service-details-wrapper .main-sideber .service-details-contact-bg {
  border-radius: 8px;
  padding: 48px 40px;
}
.service-details-wrapper .main-sideber .service-details-contact-bg h3 {
  text-align: center;
  color: var(--white);
}
.service-details-wrapper .main-sideber .service-details-contact-bg .icon {
  width: 80px;
  height: 80px;
  line-height: 88px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--header);
  margin: 30px auto 20px;
}
.service-details-wrapper .main-sideber .service-details-contact-bg .icon i {
  color: var(--white);
  font-size: 30px;
}
.service-details-wrapper .main-sideber .service-details-contact-bg p {
  color: var(--white);
  opacity: 0.7;
}
.service-details-wrapper .main-sideber .service-details-contact-bg h3 {
  font-size: 20px;
  margin-top: 8px;
}
.service-details-wrapper .main-sideber .service-details-contact-bg h3 a {
  color: var(--white);
}

/* Team */
.team-box-items {
  margin-top: 30px;
}
.team-box-items .team-image {
  position: relative;
}
.team-box-items .team-image img {
  width: 100%;
  height: 100%;
}
.team-box-items .team-image .content {
  border-radius: 0 12px;
  background-color: var(--white);
  display: inline-block;
  padding: 10px 34px;
  line-height: 1;
  position: absolute;
  bottom: 0;
  left: 0;
}
.team-box-items .team-image .content h4 {
  margin-bottom: 6px;
}
.team-box-items .team-image .content h4 a:hover {
  color: var(--theme);
}
.team-box-items .team-image .social-profile {
  position: absolute;
  right: -5px;
  top: 0;
  content: "";
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  padding: 0 6px;
}
.team-box-items .team-image .social-profile:hover {
  background-color: #F1F1F1;
  padding-bottom: 10px;
  border-bottom-left-radius: 10px;
}
.team-box-items .team-image .social-profile ul {
  transform: translateY(-100px);
  transition: all 0.6s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  display: grid;
  gap: 10px;
  align-items: center;
}
.team-box-items .team-image .social-profile ul li a {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: block;
  background: var(--white);
  color: var(--header);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  border-radius: 50%;
}
.team-box-items .team-image .social-profile ul li a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.team-box-items .team-image .social-profile .plus-btn {
  z-index: 99;
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: inline-block;
  background-color: var(--theme);
  color: var(--white);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.team-box-items .team-image .social-profile .plus-btn:hover {
  border: 1px solid rgba(30, 32, 35, 0.12);
  background: var(--white);
  box-shadow: 10px 16px 120px 1px rgba(4, 7, 56, 0.12);
  color: var(--header);
}
.team-box-items .team-image .social-profile:hover ul {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.team-section {
  position: relative;
  z-index: 9;
}
.team-section .team-shape-1 {
  position: absolute;
  z-index: -1;
  top: 10%;
  right: 0;
}

.team-box-items-2 {
  position: relative;
  background-color: var(--bg);
  padding: 40px;
  border-radius: 20px;
  z-index: 9;
}
.team-box-items-2::before {
  position: absolute;
  content: "";
  width: 75px;
  height: 75px;
  background-color: var(--white);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  border-top-left-radius: 15px;
}
.team-box-items-2 .bg-hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.team-box-items-2 .bg-hover::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(180deg, rgba(0, 14, 18, 0) 34.28%, var(--Text-Primary, #000E12) 100%);
  border-radius: 20px;
}
.team-box-items-2 .team-image {
  transition: all 0.4s ease-in-out;
}
.team-box-items-2 .team-image img {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  object-fit: cover;
}
.team-box-items-2 .content {
  margin-top: 45px;
}
.team-box-items-2 .content h4 a {
  font-size: 24px;
}
.team-box-items-2 .content h4 a:hover {
  color: var(--theme);
}
.team-box-items-2 .social-profile {
  position: absolute;
  right: 10px;
  bottom: 10px;
  content: "";
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
.team-box-items-2 .social-profile ul {
  transform: translateY(100px);
  transition: all 0.6s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  display: grid;
  gap: 10px;
  align-items: center;
}
.team-box-items-2 .social-profile ul li a {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: block;
  background: var(--white);
  color: var(--header);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  border-radius: 50%;
}
.team-box-items-2 .social-profile ul li a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.team-box-items-2 .social-profile .plus-btn {
  z-index: 99;
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: inline-block;
  background-color: var(--theme);
  color: var(--white);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
  border-radius: 50%;
  margin-top: 10px;
  position: relative;
}
.team-box-items-2 .social-profile .plus-btn:hover {
  border: 1px solid rgba(30, 32, 35, 0.12);
  background: var(--white);
  box-shadow: 10px 16px 120px 1px rgba(4, 7, 56, 0.12);
  color: var(--header);
}
.team-box-items-2 .social-profile:hover ul {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.team-box-items-2:hover .bg-hover {
  opacity: 1;
  visibility: visible;
}
.team-box-items-2:hover .team-image {
  opacity: 0;
  visibility: hidden;
}
.team-box-items-2:hover .content h4 a {
  color: var(--white);
}
.team-box-items-2:hover .content p {
  color: var(--white);
}

.team-box-items-3 {
  margin-top: 30px;
}
.team-box-items-3 .team-image {
  position: relative;
  overflow: hidden;
}
.team-box-items-3 .team-image img {
  width: 100%;
  height: 100%;
  transition: all 0.4s ease-in-out;
  border-radius: 12px;
}
.team-box-items-3 .team-image .team-content {
  position: absolute;
  bottom: 0;
  padding-left: 24px;
  padding-top: 8px;
  padding-bottom: 8px;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--white);
  border-radius: 0 0 12px 12px;
}
.team-box-items-3 .team-image .team-content .arrow-4 {
  position: absolute;
  top: 0;
  right: 76px;
  bottom: 0;
}
.team-box-items-3 .team-image .team-content .arrow-4 img {
  width: initial;
  border-radius: 0;
}
.team-box-items-3 .team-image .team-content::before {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  background-color: #000E12;
  height: 100%;
  width: 76px;
  transition: all 0.4s ease-in-out;
}
.team-box-items-3 .team-image .team-content h3 {
  margin-bottom: 5px;
}
.team-box-items-3 .team-image .team-content h3 a:hover {
  color: var(--theme);
}
.team-box-items-3 .team-image .team-content p {
  color: var(--text);
}
.team-box-items-3 .team-image .social-profile {
  position: absolute;
  right: 14px;
  bottom: 16px;
  content: "";
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 9;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
.team-box-items-3 .team-image .social-profile ul {
  transform: translateY(100px);
  transition: all 0.6s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  display: grid;
  gap: 10px;
  align-items: center;
}
.team-box-items-3 .team-image .social-profile ul li a {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: block;
  background: var(--white);
  color: var(--header);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  border-radius: 50%;
}
.team-box-items-3 .team-image .social-profile ul li a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.team-box-items-3 .team-image .social-profile .plus-btn {
  z-index: 99;
  cursor: pointer;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: inline-block;
  background-color: transparent;
  color: var(--white);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  font-size: 16px;
  border: 1px solid transparent;
  margin-top: 30px;
  border-radius: 12px;
}
.team-box-items-3 .team-image .social-profile:hover ul {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.team-box-items-3:hover .team-image::after {
  left: -30%;
  opacity: 1;
  top: -20%;
  transition-duration: 0.5s, 0.5s, 0.15s;
  transition-property: left, top, opacity;
  transition-timing-function: linear;
}
.team-box-items-3:hover .team-image .team-content::before {
  background-color: var(--theme);
}

.team-details-wrapper .team-details-image img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.team-details-wrapper .team-details-content {
  margin-left: 40px;
}
@media (max-width: 991px) {
  .team-details-wrapper .team-details-content {
    margin-left: 0;
  }
}
.team-details-wrapper .team-details-content .details-info {
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.team-details-wrapper .team-details-content .details-info h3 {
  margin-bottom: 5px;
}
.team-details-wrapper .team-details-content .details-info span {
  color: var(--text);
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items {
  width: 100%;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items:not(:last-child) {
  margin-bottom: 30px;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .pro-head .title {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .pro-head .point {
  font-size: 16px;
  color: var(--black);
  font-weight: 600;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .progress {
  background: var(--bg);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  display: flex;
  height: 12px;
  width: 100%;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .progress-value {
  animation: load 3s normal forwards;
  border-radius: 0;
  background: var(--theme);
  height: 12px;
  width: 0;
  border-radius: 16px;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .style-two {
  animation: load2 3s normal forwards;
}
@keyframes load {
  0% {
    width: 0;
  }
  100% {
    width: 85%;
  }
}
@keyframes load2 {
  0% {
    width: 0;
  }
  100% {
    width: 95%;
  }
}
.team-details-wrapper .team-details-content .social-icon {
  margin-top: 40px;
}
.team-details-wrapper .team-details-content .social-icon span {
  font-size: 16px;
  font-weight: 700;
  color: var(--header);
  margin-right: 15px;
}
.team-details-wrapper .team-details-content .social-icon a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: 1px solid var(--border);
  display: inline-block;
  color: var(--text);
  transition: all 0.4s ease-in-out;
}
.team-details-wrapper .team-details-content .social-icon a:not(:last-child) {
  margin-right: 5px;
}
.team-details-wrapper .team-details-content .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid transparent;
}
.team-details-wrapper .team-single-history .title {
  border-bottom: 1px solid #CDCED0;
  padding-bottom: 30px;
}
.team-details-wrapper .team-single-history h5 {
  font-weight: 600;
}
.team-details-wrapper .team-single-history h5 span {
  border: 1px solid var(--theme);
  color: var(--theme);
  font-size: 14px;
  font-weight: 400;
  padding: 6px 16px;
  border-radius: 16px;
  margin-left: 20px;
}

/* Testimonial */
.testimonial-box-item-3 {
  text-align: center;
}
.testimonial-box-item-3 .star {
  color: #ECB014;
}
.testimonial-box-item-3 h4 {
  font-size: 32px;
  font-style: italic;
  font-weight: 500;
  color: var(--text);
  margin-top: 20px;
}
@media (max-width: 1199px) {
  .testimonial-box-item-3 h4 {
    font-size: 25px;
  }
}
@media (max-width: 1199px) {
  .testimonial-box-item-3 h4 {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .testimonial-box-item-3 h4 {
    font-size: 16px;
    font-weight: 400;
  }
}
.testimonial-box-item-3 .client-info {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
}
@media (max-width: 767px) {
  .testimonial-box-item-3 .client-info {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }
}
.testimonial-box-item-3 .client-info span {
  color: #777D7F;
  position: relative;
  padding-left: 15px;
}
.testimonial-box-item-3 .client-info span::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 8px;
  left: 0;
  background-color: var(--theme);
}

.testimonial-section-2 {
  position: relative;
}
.testimonial-section-2 .testimonial-wrapper-2 .testimonial-left-items .testimonial-content-box-2 {
  border-left: 5px solid var(--theme);
  padding-left: 30px;
}
@media (max-width: 1199px) {
  .testimonial-section-2 .testimonial-wrapper-2 .testimonial-left-items .testimonial-content-box-2 {
    border-left: none;
    padding-left: 0;
  }
}
.testimonial-section-2 .testimonial-wrapper-2 .testimonial-left-items .testimonial-content-box-2 .star {
  margin-top: 30px;
  color: #ECB014;
}
.testimonial-section-2 .testimonial-wrapper-2 .testimonial-left-items .testimonial-content-box-2 h4 {
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  color: var(--text);
  margin-top: 10px;
}
.testimonial-section-2 .testimonial-wrapper-2 .testimonial-left-items .testimonial-content-box-2 .client-info {
  margin-top: 25px;
}
.testimonial-section-2 .testimonial-wrapper-2 .array-button {
  justify-content: center;
  gap: 30px;
  margin-top: -49px;
  z-index: 99;
  position: relative;
}
@media (max-width: 1199px) {
  .testimonial-section-2 .testimonial-wrapper-2 .array-button {
    justify-content: start;
    margin-top: 30px;
  }
}
.testimonial-section-2 .testimonial-wrapper-2 .testimonial-image img {
  width: 100%;
  height: 100%;
}

.testimonial-section-3 {
  position: relative;
  z-index: 9;
}
.testimonial-section-3 .testimonial-shape-1 {
  position: absolute;
  z-index: -1;
  top: 17%;
  left: 15%;
}

.testimonial-section {
  position: relative;
  z-index: 9;
}
.testimonial-section .shape-1 {
  position: absolute;
  z-index: -1;
  top: 17%;
  left: 12%;
}
@media (max-width: 1199px) {
  .testimonial-section .shape-1 {
    display: none;
  }
}
.testimonial-section .shape-2 {
  position: absolute;
  z-index: -1;
  bottom: 11%;
  left: 9%;
}
@media (max-width: 1199px) {
  .testimonial-section .shape-2 {
    display: none;
  }
}
.testimonial-section .shape-3 {
  position: absolute;
  z-index: -1;
  top: 22%;
  right: 20%;
}
@media (max-width: 1199px) {
  .testimonial-section .shape-3 {
    display: none;
  }
}
.testimonial-section .shape-4 {
  position: absolute;
  z-index: -1;
  top: 40%;
  right: 7%;
}
@media (max-width: 1199px) {
  .testimonial-section .shape-4 {
    display: none;
  }
}
.testimonial-section .shape-5 {
  position: absolute;
  z-index: -1;
  bottom: 10%;
  right: 20%;
}
@media (max-width: 1199px) {
  .testimonial-section .shape-5 {
    display: none;
  }
}

.testimonial-wrapper .testimonial-left-items {
  margin-top: 30px;
}
.testimonial-wrapper .testimonial-left-items .client-info-area .client-info-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.testimonial-wrapper .testimonial-left-items .client-info-area .client-info-box .client-content p {
  margin-top: 5px;
}
.testimonial-wrapper .testimonial-left-items .client-info-area .client-info-box.style-2 {
  background-color: var(--theme);
  margin-left: 80px;
  padding: 8px 16px;
  border-radius: 10px;
}
@media (max-width: 1199px) {
  .testimonial-wrapper .testimonial-left-items .client-info-area .client-info-box.style-2 {
    margin-left: 0;
  }
}
.testimonial-wrapper .testimonial-left-items .client-info-area .client-info-box.style-2 .client-content h4 {
  color: var(--white);
}
.testimonial-wrapper .testimonial-left-items .client-info-area .client-info-box.style-2 .client-content p {
  color: var(--white);
  opacity: 0.7;
}
.testimonial-wrapper .testimonial-right-items {
  margin-top: 30px;
  padding-left: 60px;
  position: relative;
  margin-left: 50px;
}
@media (max-width: 991px) {
  .testimonial-wrapper .testimonial-right-items {
    margin-top: 20px;
    font-size: 16px;
    margin-left: 0;
    padding-left: 0;
  }
}
.testimonial-wrapper .testimonial-right-items .icon {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
}
@media (max-width: 991px) {
  .testimonial-wrapper .testimonial-right-items .icon {
    display: none;
  }
}
.testimonial-wrapper .testimonial-right-items .star {
  color: #ECB014;
}
.testimonial-wrapper .testimonial-right-items .array-button {
  margin-top: 50px;
}
.testimonial-wrapper .testimonial-right-items .testimonial-text {
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  margin-top: 20px;
  color: var(--header);
}
@media (max-width: 991px) {
  .testimonial-wrapper .testimonial-right-items .testimonial-text {
    margin-top: 0;
    font-size: 16px;
  }
}

.testi-top-slider {
  height: 330px;
}
.testi-top-slider .swiper-slide.swiper-slide-active .client-info-box {
  background-color: var(--theme);
  padding: 8px 16px;
  border-radius: 8px;
  margin-left: 88px;
}
@media (max-width: 1199px) {
  .testi-top-slider .swiper-slide.swiper-slide-active .client-info-box {
    margin-left: 0;
  }
}
.testi-top-slider .swiper-slide.swiper-slide-active .client-info-box h4, .testi-top-slider .swiper-slide.swiper-slide-active .client-info-box p {
  color: var(--white);
}

/*--------------------------------------------------------------
>>> TEMPLATE SECTION STYLES END
--------------------------------------------------------------*/

.animated-text {
    font-size: 64px;
    font-weight: 700;
    color: #020A47 !important;
    min-height: 10px;
    opacity: 1 !important;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
	 /*var\(--bs-body-font-family*/
    font-family: --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
@media (max-width: 768px) {
  .animated-text {
    font-size: 28px;
    white-space: normal; /* Allow wrapping on very small screens if needed */
  }
}

@media (max-width: 480px) {
  .animated-text {
    font-size: 22px;
  }
}

.service-box-items-3 .service-content {
  padding: 32px;
  height: 350px;
}
.breadcrumb-wrapper .page-heading {
  position: relative;
  padding: 35px 0 25px;
  z-index: 9;
}

/*kaushik changes */
.header-left {
    display: flex;
    align-items: center;
    gap: 12px; /* spacing between logo & SRL */
}

.brand-text {
    font-family: "Faster One", system-ui;
    font-size: 42px;
    font-weight: 800;
    color: #80565B; /* your header font color */
}

.container {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 0;

}

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

.header-main .main-menu ul li a {
  font-family: "Roboto Condensed", sans-serif;  
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.07rem;
  color:#5d5f5d;
}

.hero-section .theme-btn {
    display: block;
    width: 140px;
    text-align: center;
    padding: 12px 0 !important;
    font-size: 15px;
    border-radius: 10px;
	background: #a767a2;
    color: #f0f0f0;0.1) 100%)
	max-width: 100%;
	margin: 0 auto;
}
@media (max-width: 768px) {
  .hero-section .theme-btn {
    width: 90% !important;
    max-width: 400px !important;
    padding: 12px 0 !important;
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .hero-section .theme-btn {
    width: 95% !important;
    font-size: 14px !important;
    padding: 10px 0 !important;
  }
}

/*linear-gradient(180deg, rgba(94, 228, 228, 0.3) 0%, rgba(255, 255, 255, 0) 100%);*/
.hero-section .theme-btn:hover {
    display: block;
    width: 180px;
    text-align: center;
    padding: 10px 0 !important;
    font-size: 17px;
    border-radius: 10px;
    background: linear-gradient(90deg, #9B2AFF 0%, #D30971 100%);
    color: white !important;
}
.service-section-3 .challenge-card {
  padding: 22px;          /* inner spacing */
  margin-bottom: 32px;    /* vertical gap between rows */
}

.service-section-3 .challenge-title {
  margin-bottom: 46px;
}

.service-section-3 .challenge-text {
  margin-bottom: 26px;
  color: #171717 !important;
  
}

.service-section-3 .challenge-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-section-3 .challenge-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 8px;     /* space between bullet points */
  color: #171717 !important;
}

.service-section-3 .challenge-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #171717 !important;  
  
}

.service-section-3 .challenge-icon i {
  font-size: 12px;        /* keep subtle */
  color: #171717 !important;

}
.service-section-3 .service-box-items-3 .service-content h3.challenge-title {
  margin-bottom: 46px !important;
}

.service-details .why-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-details .why-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  color: #171717 !important;
}

.service-details .why-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.service-details .why-icon i {
  font-size: 12px;
  color: #171717 !important;
}

/* Fix footer position */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer-bottom {
  margin-top: auto;
}

/* About section text color fix */
.about-section-3 .about-text {
  color: #171717 !important;
}

@media (max-width: 991px) {
.header-1 {
  background: linear-gradient(90deg, #1FA2FF 0%, #5A5AF3 50%, #9B34F5 100%);
}
}


/* Smooth slide from right animation: slideInRight 1.1s ease-out forwards;*/
.slide-in-right {
    opacity: 0;
    animation: slideInRight 1.1s ease-out forwards;
}
@keyframes slideInRight {
    0% {
        transform: translateX(60px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


/* Smooth slide from left */
.slide-in-left {
    opacity: 0;
    animation: slideInLeft 2.1s ease-out forwards;
}
@keyframes slideInLeft {
    0% {
        transform: translateX(-90px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Smooth diagonal upward slide */
.slide-in-up-diagonal {
    opacity: 0;
    animation: slideInUpDiagonal 0.5s ease-out forwards;
}
@keyframes slideInUpDiagonal {
    0% {
        transform: translate(0, 60px) rotate(100deg);
        opacity: 0;
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
}

.breadcrumb-wrapper .shape {
  position: absolute;
  bottom: -324px;
  transform: scale(0.7);
  
}

/* About Page - About Section */
.about-section-3 .about-card {
          /* inner spacing */
    margin-bottom: 32px;    /* vertical gap between rows */
}

.about-section-3 .about-card .about-content p.about-text {
    margin-bottom: 16px;
    color: #171717 !important;  /* text color */
}

.about-section-3 .about-card .about-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-section-3 .about-card .about-list li {
    display: flex;
    margin-bottom: 8px;
    color: #171717 !important;  /* bullet text color */
}

.about-section-3 .about-card .about-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: #171717 !important;
}

.about-section-3 .about-card .about-icon i,
.about-section-3 .about-card .about-list li i {
    font-size: 16px;        /* adjust icon size */
    color:#171717 !important; /* icon color */
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;

}

/* PERFECT CIRCLE */
.circle-item {
    width: 130px;           /* Circle width */
    height: 130px;          /* Must be same as width */

    border-radius: 50%;
    border: 0px solid #e0e0e0;
	border-color: linear-gradient(90deg, #9B2AFF 0%, #D30971 40%, #9B2AFF 80%);
	border-style:solid;
	line-height: 1.3;
	font-weight:500;

	
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
	font-size: 11px;
	flex-shrink: 0;


    opacity: 0;
    transform: translateX(-60px);
    animation: slideIn 2.8s ease forwards;
}

.circle-item::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px; /* Border thickness */
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(31, 162, 255, 0.1) 0%, rgba(90, 90, 243, 0.1) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;

    z-index: -1;
}

/* ICON STYLE */
.circle-item i {
    font-size: 32px;
    color: #171717;
    margin-bottom: 10px;
}

/* TEXT STYLE */
.circle-item p {
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
}

/* ANIMATION */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* DELAY FOR EACH CIRCLE */
.circle-item:nth-child(1) { animation-delay: 0s; }
.circle-item:nth-child(2) { animation-delay: 0.2s; }
.circle-item:nth-child(3) { animation-delay: 0.4s; }
.circle-item:nth-child(4) { animation-delay: 0.6s; }
.circle-item:nth-child(5) { animation-delay: 0.8s; }
.circle-item:nth-child(6) { animation-delay: 1s; }

/* Mobile responsive circles */
@media (max-width: 576px) {
    .circle-item {
        width: 140px;
        height: 140px;
        padding: 15px;
    }

    .circle-item i {
        font-size: 26px;
    }

    .circle-item p {
        font-size: 13px;
    }
}

/* ===================================================================
   CHALLENGE CARD HOVER EFFECT - Add this to your main.css
   =================================================================== */

/* Base card styling with overflow hidden */
.service-section-3 .challenge-card {
  padding: 22px;
  margin-bottom: 32px;
 /* overflow: hidden;*/
  position: relative;
  transition: all 0.4s ease-in-out;
  min-height: 200px; /* Adjust based on your needs */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Title container - centers title initially */
.service-section-3 .service-box-items-3 .service-content {
  padding: 32px;
  height: auto; /* Changed from fixed 350px */
  position: relative;
  transition: all 0.4s ease-in-out;
}

/* Title styling - centered when not hovered */
.service-section-3 .challenge-title {
  margin-bottom: 0; /* Remove bottom margin initially */
  transition: all 0.4s ease-in-out;
  text-align: center;
}

/* Hide the content initially */
.service-section-3 .challenge-text,
.service-section-3 .challenge-list {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  transform: translateY(-20px);
}

/* Card hover state */
.service-section-3 .service-box-items-3:hover .challenge-card {
  background-color: #f8f9fa; /* Light background on hover */
}

/* Title moves up on hover */
.service-section-3 .service-box-items-3:hover .challenge-title {
  margin-bottom: 20px;
  text-align: left;
  transform: translateY(-10px);
}

/* Show content on hover with smooth transition */
.service-section-3 .service-box-items-3:hover .challenge-text {
  opacity: 1;
  max-height: 200px;
  margin-bottom: 20px;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.service-section-3 .service-box-items-3:hover .challenge-list {
  opacity: 1;
  max-height: 500px;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* List styling remains the same */
.service-section-3 .challenge-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-section-3 .challenge-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 8px;
  color: #171717 !important;
}

.service-section-3 .challenge-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #171717 !important;
}

.service-section-3 .challenge-icon i {
  font-size: 12px;
  color: #171717 !important;
}

/* Add subtle border effect on hover */
.service-section-3 .service-box-items-3 {
  border: 1px solid #171717;
  transition: all 0.4s ease-in-out;
  background: transparent;
}

.service-section-3 .service-box-items-3:hover {
  border-color: var(--theme);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-35px);
  cursor: pointer;
}

/* Ensure minimum card height when not hovered */
.service-section-3 .service-box-items-3 {
  min-height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .service-section-3 .challenge-card {
    min-height: 150px;
  }
  
  .service-section-3 .service-box-items-3 {
    min-height: 150px;
  }
}

.gradient-text {
  background: linear-gradient(90deg,#525881 0%,#282F63 30%,#A0ADC1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* For Firefox */
  background-clip: text;
  color: transparent;
}

.contact-section::before {
    position: absolute; 
    top: 99.9% !important; 
    
    /* Crucially, reduce its height to near zero so it doesn't push down or overlap content */
    height: 1px !important; 
    
    /* Keep other properties but use !important to override the existing rule */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    content: "" !important;
    background-color: transparent !important; /* Make it transparent just in case */
}

/* Custom rule to ensure a gap between the map/form section and the content below it */
.map-section.section-padding {
    /* Retain top padding fix */
    padding-top: 60px !important; 
    
    /* CRITICAL CHANGE: Increase padding-bottom to create the gap */
    /* Change '60px' to a larger value, like '100px', '120px', or '150px' */
    /* I recommend starting with 120px, which is a common section separation value. */
    padding-bottom: 120px !important; 
}

.breadcrumb-wrapper .page-heading h1 {
font-family: "Roboto Condensed", sans-serif;
font-weight: 300;
}

/* ===================================================================
   WHY SRL PAGE - MODERN CARD DESIGN
   Add this to your main.css file
   =================================================================== */

/* Why SRL Title */
.why-srl-title {
    font-family: 'Radio Canada Big', sans-serif;
    font-size: 15px;
    font-weight: 200;
    color: #171717;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.why-srl-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    border-radius: 2px;
}

/* Cards Grid Layout */
.why-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* Individual Card */
.why-card {
    background: transparent;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    
    /* Initial state for pop-in animation */
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    animation: popIn 0.6s ease-out forwards;
}

/* Staggered animation delays */
.why-card:nth-child(1) { animation-delay: 0.1s; }
.why-card:nth-child(2) { animation-delay: 0.2s; }
.why-card:nth-child(3) { animation-delay: 0.3s; }
.why-card:nth-child(4) { animation-delay: 0.4s; }
.why-card:nth-child(5) { animation-delay: 0.5s; }
.why-card:nth-child(6) { animation-delay: 0.6s; }
.why-card:nth-child(7) { animation-delay: 0.7s; }

/* Pop-in Animation Keyframes */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    60% {
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Top gradient line that appears on load */
.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, #00D4FF 0%, #00A0D0 100%);
    opacity: 0;
    animation: slideGradient 0.6s ease-out forwards;
    animation-delay: inherit;
}

@keyframes slideGradient {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Icon Container */
.why-card-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.why-card-icon i {
    font-size: 32px;
    background: #171717;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card Title */
.why-card-title {
    font-family: 'Radio Canada Big', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--header);
    margin: 0;
    line-height: 1.4;
}

/* Description Text */
.why-description {
    font-size: 18px;
    color: var(--text);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
    animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1199px) {
    .why-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .why-srl-title {
        font-size: 32px;
    }
    
    .why-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .why-card {
        padding: 30px 20px;
    }
    
    .why-card-icon {
        width: 60px;
        height: 60px;
    }
    
    .why-card-icon i {
        font-size: 28px;
    }
    
    .why-card-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .why-srl-title {
        font-size: 26px;
    }
    
    .why-description {
        font-size: 16px;
    }
}

/* ===================================================================
   CHALLENGE SECTION - ENHANCED ICON STYLING + AUTO-SHOW FIRST ITEM
   =================================================================== */

/* Section container */
.challenge-section-wrapper {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    position: relative;
    min-height: 600px;
}

/* Left column - Titles */
.challenge-titles-column {
    flex: 0 0 40%;
    position: sticky;
    top: 120px;
    z-index: 10;
}

/* Right column - Content display area */
.challenge-content-column {
    flex: 0 0 55%;
    background: transparent;
    border-radius: 0;
    padding: 0;
    min-height: 400px;
    position: relative;
    box-shadow: none;
    transition: none;
}

/* Title items with ENHANCED ICON WRAPPER */
.challenge-title-item {
    padding: 20px 25px;
    background: #f7f3ff;
    border: 0px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-left: #5A5AF3;
    transform: translateX(-10px);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.challenge-title-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(
        180deg,
        #1FA2FF 0%,
        #5A5AF3 50%,
        #9B34F5 100%
    );
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.challenge-title-item:hover::before,
.challenge-title-item.active::before {
    transform: scaleY(1);
}

.challenge-title-item:hover,
.challenge-title-item.active {
    border-color: #5A5AF3;
    transform: translateX(10px);
    box-shadow: 0 6px 20px rgba(90, 90, 243, 0.15);
    color: #171717;
}

/* ENHANCED ICON STYLING - Same as Our Edge */
.challenge-title-item i {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #1FA2FF 0%, #5A5AF3 100%);
    font-size: 20px;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(90, 90, 243, 0.2);
}

.challenge-title-item:hover i,
.challenge-title-item.active i {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 18px rgba(90, 90, 243, 0.4);
}

.challenge-title-item h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #323c46;
    transition: color 0.3s ease;
    flex: 1;
}

.challenge-title-item:hover h3,
.challenge-title-item.active h3 {
    background: linear-gradient(90deg, #1FA2FF 0%, #5A5AF3 50%, #9B34F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Content display area */
.challenge-content-display {
    position: relative;
    min-height: 350px;
}

/* Individual content items */
.challenge-content-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* FIRST ITEM SHOWN BY DEFAULT */
.challenge-content-item.initial-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

.challenge-content-item.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

/* Content styling */
.challenge-content-item h4 {
    font-size: 24px;
    font-weight: 700;
    color: #323c46;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #1FA2FF 0%, #5A5AF3 50%, #9B34F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.challenge-content-item p {
    font-size: 15px;
    color: #323c46;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Challenge list styling */
.challenge-content-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.challenge-content-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding: 12px 0;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.4s ease forwards;
}

.challenge-content-list li:last-child {
    border-bottom: none;
}

.challenge-content-list li:nth-child(1) { animation-delay: 0.1s; }
.challenge-content-list li:nth-child(2) { animation-delay: 0.2s; }
.challenge-content-list li:nth-child(3) { animation-delay: 0.3s; }
.challenge-content-list li:nth-child(4) { animation-delay: 0.4s; }
.challenge-content-list li:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.challenge-content-list li:hover {
    background: rgba(90, 90, 243, 0.03);
    transform: translateX(5px);
    padding-left: 10px;
}

/* Bootstrap tick icon styling */
.challenge-list-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #1FA2FF 0%, #5A5AF3 100%);
    margin-top: 2px;
}

.challenge-list-icon i {
    font-size: 14px;
    color: white;
    font-weight: bold;
}

.challenge-content-list li span:not(.challenge-list-icon) {
    flex: 1;
    color: #323c46;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
}

/* Responsive Design */
@media (max-width: 991px) {
    .challenge-section-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    .challenge-titles-column,
    .challenge-content-column {
        flex: 1 1 100%;
        position: static;
    }
    
    .challenge-content-column {
        min-height: 300px;
    }
    
    .challenge-content-item {
        padding: 25px;
    }
    
    .challenge-title-item i {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .challenge-content-item {
        padding: 20px;
    }
    
    .challenge-title-item {
        padding: 15px 20px;
        gap: 12px;
    }
    
    .challenge-title-item i {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
    
    .challenge-title-item h3 {
        font-size: 18px;
    }
    
    .challenge-content-item h4 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .challenge-section-wrapper {
        gap: 30px;
    }
    
    .challenge-content-item {
        padding: 20px;
    }
    
    .challenge-title-item {
        padding: 12px 15px;
        margin-bottom: 10px;
        gap: 10px;
    }
    
    .challenge-title-item i {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .challenge-title-item h3 {
        font-size: 16px;
    }
    
    .challenge-content-list li {
        padding: 10px 0;
    }
    
    .challenge-list-icon {
        width: 20px;
        height: 20px;
    }
    
    .challenge-list-icon i {
        font-size: 12px;
    }
}

/* ===================================================================
   OUR EDGE SECTION - TABBED HORIZONTAL DESIGN WITH CENTERED CONTENT
   FIXED VERSION - Prevents flickering on card 3
   =================================================================== */

/* Section container */
.our-edge-section {
    padding: 0px 0;
}

.edge-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    position: relative;
}

/* Top row - Tab Cards (formerly left column) - SMALLER SIZE */
.edge-titles-column {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}

/* Bottom area - Content display (centered) - LARGER WIDTH */
/* FIX #1: Set minimum height to prevent page jumping */
.edge-content-column {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    padding: 0;
    min-height: 900px; /* CRITICAL: Prevents height changes */
    position: relative;
}

/* Tab card items - SMALLER HORIZONTAL DESIGN */
.edge-title-item {
    flex: 0 1 auto;
    min-width: 220px;
    max-width: 260px;
    padding: 16px 20px;
    background: #f7f3ff;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transform: translateY(0);
}

.edge-title-item::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #1FA2FF 0%, #5A5AF3 50%, #9B34F5 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.edge-title-item:hover::before,
.edge-title-item.active::before {
    transform: scaleX(1);
}

.edge-title-item:hover,
.edge-title-item.active {
    border-color: #5A5AF3;
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(90, 90, 243, 0.25);
}

/* Icon wrapper - SMALLER */
.edge-icon-wrapper {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #1FA2FF 0%, #5A5AF3 100%);
    transition: all 0.3s ease;
}

.edge-title-item:hover .edge-icon-wrapper,
.edge-title-item.active .edge-icon-wrapper {
    transform: scale(1.12) rotate(5deg);
    box-shadow: 0 6px 18px rgba(90, 90, 243, 0.4);
}

.edge-icon-wrapper i {
    font-size: 24px;
    color: white;
}

/* Title content - SMALLER TEXT */
.edge-title-content {
    width: 100%;
}

.edge-title-content h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: #323c46;
    transition: color 0.3s ease;
    line-height: 1.3;
}

.edge-title-item:hover h3,
.edge-title-item.active h3 {
    background: linear-gradient(90deg, #1FA2FF 0%, #5A5AF3 50%, #9B34F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.edge-subtitle {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

/* Content display area - CENTERED WITH PROPER POSITIONING */
/* FIX #2: Ensure proper containment */
.edge-content-display {
    position: relative;
    width: 100%;
    min-height: 850px; /* CRITICAL: Maintains consistent height */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Individual content items - PROPERLY CENTERED WITH SMALLER FONT */
/* FIX #3: Use absolute positioning for smooth transitions without height jumps */
.edge-content-item {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    width: 100%;
    max-width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    background: #f8f9fa;
    padding: 32px;
    border-radius: 14px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
}

/* FIX #4: Active state maintains absolute positioning to prevent layout shift */
.edge-content-item.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    position: absolute; /* Keep absolute to prevent height changes */
    z-index: 1;
}

.edge-content-item h4 {
    font-size: 24px;
    font-weight: 700;
    color: #323c46;
    margin-bottom: 12px;
    text-align: center;
    background: linear-gradient(90deg, #1FA2FF 0%, #5A5AF3 50%, #9B34F5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.edge-content-item > p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    text-align: center;
    max-width: 100%;
    margin: 0 auto 20px;
}

/* ===================================================================
   TRACKING FLOWCHART STYLING - COMPACT VERTICAL FLOW
   =================================================================== */

.tracking-flowchart {
    margin-top: 25px;
    max-width: 100%;
}

.flow-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: white;
    border-radius: 10px;
    border-left: 3px solid #1FA2FF;
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.flow-step:nth-child(1) { animation-delay: 0.1s; }
.flow-step:nth-child(3) { animation-delay: 0.15s; }
.flow-step:nth-child(5) { animation-delay: 0.2s; }
.flow-step:nth-child(7) { animation-delay: 0.25s; }
.flow-step:nth-child(9) { animation-delay: 0.3s; }
.flow-step:nth-child(11) { animation-delay: 0.35s; }
.flow-step:nth-child(13) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.flow-step:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 15px rgba(31, 162, 255, 0.15);
    border-left-color: #5A5AF3;
}

.flow-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #1FA2FF 0%, #5A5AF3 100%);
}

.flow-icon i {
    font-size: 20px;
    color: white;
}

.flow-content {
    flex: 1;
}

.flow-content h5 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: #323c46;
}

.flow-content p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.flow-connector {
    width: 3px;
    height: 18px;
    background: linear-gradient(180deg, #1FA2FF 0%, #5A5AF3 100%);
    margin-left: 35px;
    opacity: 0.4;
}

/* Promise box - COMPACT */
.edge-promise {
    margin-top: 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(31, 162, 255, 0.1) 0%, rgba(90, 90, 243, 0.1) 100%);
    border-left: 3px solid #1FA2FF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.edge-promise i {
    font-size: 22px;
    color: #1FA2FF;
    flex-shrink: 0;
}

.edge-promise span {
    font-size: 14px;
    color: #323c46;
    line-height: 1.5;
}

/* ===================================================================
   VERIFIED DRIVERS LIST STYLING - COMPACT
   =================================================================== */

.verified-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    max-width: 100%;
}

.verified-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

.verified-list li:nth-child(1) { animation-delay: 0.1s; }
.verified-list li:nth-child(2) { animation-delay: 0.15s; }
.verified-list li:nth-child(3) { animation-delay: 0.2s; }
.verified-list li:nth-child(4) { animation-delay: 0.25s; }
.verified-list li:nth-child(5) { animation-delay: 0.3s; }
.verified-list li:nth-child(6) { animation-delay: 0.35s; }

.verified-list li:last-child {
    border-bottom: none;
}

.verified-list li:hover {
    background: rgba(40, 167, 69, 0.04);
    padding-left: 10px;
    border-radius: 6px;
}

.verified-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verified-icon i {
    font-size: 22px;
    color: #28a745;
}

.verified-list li span:not(.verified-icon) {
    flex: 1;
    font-size: 14px;
    color: #171717;
    line-height: 1.6;
    font-weight: 400;
}

/* Result box - COMPACT */
.edge-result {
    margin-top: 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(76, 175, 80, 0.1) 100%);
    border-left: 3px solid #28a745;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.edge-result i {
    font-size: 22px;
    color: #28a745;
    flex-shrink: 0;
}

.edge-result span {
    font-size: 14px;
    color: #323c46;
    text-align: center;
    line-height: 1.5;
}

/* Quote styling - COMPACT */
.edge-quote {
    margin-top: 18px;
    padding: 16px 20px;
    background: white;
    border-left: 3px solid #5A5AF3;
    border-radius: 8px;
    position: relative;
    max-width: 100%;
}

.edge-quote i {
    position: absolute;
    top: 14px;
    left: 18px;
    font-size: 28px;
    color: #5A5AF3;
    opacity: 0.12;
}

.edge-quote p {
    margin: 0;
    padding-left: 32px;
    font-size: 14px;
    font-style: italic;
    color: #323c46;
    line-height: 1.6;
    text-align: center;
}

/* ===================================================================
   VERIFIED VEHICLES - 3 CARDS IN A ROW
   =================================================================== */

.vehicle-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 25px;
}

.vehicle-category {
    background: white;
    padding: 18px;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.vehicle-category:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: #5A5AF3;
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.category-header i {
    font-size: 24px;
    color: #5A5AF3;
}

.category-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #323c46;
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    font-size: 13px;
    color: #171717;
    transition: all 0.2s ease;
    line-height: 1.4;
	font-weight:400;
	
}

.category-list li:hover {
    color: #5A5AF3;
    padding-left: 6px;
}

.category-list li i {
    font-size: 16px;
    color: #5A5AF3;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Highlight box - COMPACT */
.edge-highlight {
    margin-top: 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
    border-left: 3px solid #ffc107;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.edge-highlight i {
    font-size: 22px;
    color: #ffc107;
    flex-shrink: 0;
}

.edge-highlight span {
    font-size: 14px;
    color: #323c46;
    line-height: 1.5;
    text-align: center;
}

/* ===================================================================
   RESPONSIVE DESIGN
   =================================================================== */

@media (max-width: 1200px) {
    .edge-titles-column {
        gap: 16px;
    }
    
    .edge-title-item {
        min-width: 200px;
        max-width: 240px;
    }
    
    .edge-content-column {
        max-width: 950px;
        min-height: 950px;
    }
    
    .edge-content-display {
        min-height: 900px;
    }
}

@media (max-width: 991px) {
    .edge-section-wrapper {
        gap: 35px;
    }
    
    .edge-titles-column {
        gap: 14px;
    }
    
    .edge-title-item {
        min-width: 190px;
        max-width: 220px;
        padding: 14px 16px;
    }
    
    .edge-content-column {
        max-width: 700px;
        min-height: 1100px;
    }
    
    .edge-content-display {
        min-height: 1050px;
    }
    
    .edge-content-item {
        padding: 28px;
    }
    
    .vehicle-categories {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .our-edge-section {
        padding: 60px 0;
    }
    
    .edge-section-wrapper {
        gap: 30px;
    }
    
    .edge-titles-column {
        flex-direction: column;
        gap: 10px;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .edge-title-item {
        min-width: 100%;
        max-width: 100%;
        padding: 14px 18px;
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }
    
    .edge-icon-wrapper {
        width: 45px;
        height: 45px;
    }
    
    .edge-icon-wrapper i {
        font-size: 22px;
    }
    
    .edge-title-content {
        text-align: left;
    }
    
    .edge-title-content h3 {
        font-size: 15px;
    }
    
    .edge-content-column {
        min-height: 1300px;
    }
    
    .edge-content-display {
        min-height: 1250px;
    }
    
    .edge-content-item {
        padding: 24px 20px;
    }
    
    .edge-content-item h4 {
        font-size: 20px;
    }
    
    .flow-step {
        gap: 12px;
        padding: 12px 14px;
    }
    
    .flow-icon {
        width: 36px;
        height: 36px;
    }
    
    .flow-icon i {
        font-size: 18px;
    }
    
    .flow-connector {
        margin-left: 30px;
        height: 16px;
    }
    
    .vehicle-categories {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .our-edge-section {
        padding: 50px 0;
    }
    
    .edge-section-wrapper {
        gap: 25px;
    }
    
    .edge-title-item {
        padding: 12px 16px;
        gap: 10px;
    }
    
    .edge-icon-wrapper {
        width: 40px;
        height: 40px;
    }
    
    .edge-icon-wrapper i {
        font-size: 20px;
    }
    
    .edge-title-content h3 {
        font-size: 14px;
    }
    
    .edge-subtitle {
        font-size: 11px;
    }
    
    .edge-content-column {
        min-height: 1400px;
    }
    
    .edge-content-display {
        min-height: 1350px;
    }
    
    .edge-content-item {
        padding: 20px 16px;
    }
    
    .edge-content-item h4 {
        font-size: 18px;
    }
    
    .edge-content-item > p {
        font-size: 13px;
    }
    
    .flow-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 12px;
    }
    
    .flow-connector {
        margin-left: 0;
        width: 100%;
        height: 3px;
        margin: 6px 0;
    }
    
    .edge-promise,
    .edge-result,
    .edge-highlight {
        flex-direction: column;
        text-align: center;
        padding: 14px 16px;
    }
    
    .verified-list {
        margin: 18px 0;
    }
    
    .verified-list li {
        padding: 10px 0;
    }
    
    .edge-quote {
        padding: 16px 18px;
    }
    
    .edge-quote p {
        font-size: 13px;
        padding-left: 28px;
    }
}

/* Our Edge mobile collapsible */
@media (max-width: 991px) {
  .edge-content-item.initial-active {
    display: block !important;
  }
  
  /* Make tab items more prominent on mobile */
  .edge-title-item {
    padding: 18px 20px !important;
  }
  
  .edge-title-item.active {
    background: linear-gradient(135deg, rgba(31, 162, 255, 0.1) 0%, rgba(90, 90, 243, 0.15) 100%) !important;
  }
}

/* FIX #5: Prevent body scroll jumping during transitions */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* ========================================
   CONTACT PAGE REDESIGN STYLES
   Add this to your main.css file
======================================== */

/* Contact Section Redesign */
.contact-section-redesign {

    padding: 0px 0;
}

/* Corporate Office Card */
.corporate-office-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    height: 100%;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.office-title {
    font-size: 26px;
    font-weight: 400;
    color: #323c46;
    margin-bottom: 15px;
}

.office-subtitle {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Contact Details List */
.contact-details-list {
    margin-bottom: 35px;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e8e8e8;
}

.contact-detail-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.contact-icon-wrapper {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #5ee4e4 0%, #4dd4d4 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 20px;
}

.contact-icon-wrapper i {
    color: #ffffff;
    font-size: 20px;
}

.contact-detail-content h4 {
    font-size: 16px;
    font-weight: 400;
    color: #323c46;
    margin-bottom: 8px;
}

.contact-detail-content p,
.contact-detail-content a {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0;
    text-decoration: none;
	font-weight: 400;
}

.contact-detail-content a:hover {
    color: #5ee4e4;
    transition: color 0.3s ease;
}

/* Map Container */
.map-container {
    margin-top: 30px;
    overflow: hidden;
    border-radius: 8px;
}

/* Get in Touch Card */
.get-in-touch-card {
    background: transparent;
    border-radius: 12px;
    padding: 40px 35px;
    height: 100%;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.form-header {
    margin-bottom: 30px;
}

.form-title {
    font-size: 26px;
    font-weight: 400;
    color: #323c46;
    margin-bottom: 10px;
}

.form-subtitle {
    font-size: 16px;
    margin-bottom: 0;
}

/* Contact Actions */
.contact-actions {
    background: linear-gradient(135deg, rgba(94, 228, 228, 0.1) 0%, rgba(94, 228, 228, 0.05) 100%);
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 35px;
}

.action-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.action-item:last-child {
    margin-bottom: 0;
}

.action-item i {
    width: 35px;
    height: 35px;
    background: #5ee4e4;
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 15px;
    flex-shrink: 0;
}

.action-item span {
    font-size: 15px;
    color: #323c46;
    font-weight: 500;
}

/* Contact Form Redesign */
.contact-form-redesign .form-group {
    margin-bottom: 0;
}

.contact-form-redesign label {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #323c46;
    margin-bottom: 8px;
}

.contact-form-redesign input,
.contact-form-redesign textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #ffffff;
    transition: all 0.3s ease;
}

.contact-form-redesign input:focus,
.contact-form-redesign textarea:focus {
    outline: none;
    border-color: #5ee4e4;
    box-shadow: 0 0 0 3px rgba(94, 228, 228, 0.1);
}

.contact-form-redesign textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form-redesign input::placeholder,
.contact-form-redesign textarea::placeholder {
    color: #999;
}

.submit-btn {
    width: 100%;
    padding: 16px 30px;
    background: linear-gradient(135deg, #5ee4e4 0%, #4dd4d4 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.submit-btn:hover {
    background: linear-gradient(135deg, #4dd4d4 0%, #3cc4c4 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(94, 228, 228, 0.4);
}

.submit-btn i {
    font-size: 14px;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .contact-section-redesign {
        padding: 60px 0;
    }

    .corporate-office-card,
    .get-in-touch-card {
        padding: 30px 25px;
        margin-bottom: 30px;
    }

    .office-title,
    .form-title {
        font-size: 24px;
    }
}

@media (max-width: 767px) {
    .contact-section-redesign {
        padding: 50px 0;
    }

    .corporate-office-card,
    .get-in-touch-card {
        padding: 25px 20px;
    }

    .office-title,
    .form-title {
        font-size: 22px;
    }

    .contact-icon-wrapper {
        width: 45px;
        height: 45px;
    }

    .contact-icon-wrapper i {
        font-size: 18px;
    }

    .contact-actions {
        padding: 20px;
    }

    .action-item i {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .action-item span {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .contact-form-redesign input,
    .contact-form-redesign textarea {
        padding: 12px 15px;
        font-size: 13px;
    }

    .submit-btn {
        padding: 14px 25px;
        font-size: 14px;
    }
}

/* Login Button Styling - Matches Hero Section Buttons */
.login-btn {
    display: inline-block;
    text-decoration: none;
	margin-top:20px;
}

.login-btn span {
    width: 120px;
    text-align: center;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--text);
    color: #f0f0f0;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-btn span:hover {
    background: linear-gradient(90deg, #9B2AFF 0%, #D30971 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(155, 42, 255, 0.3);
}


@media (max-width: 768px) {
    .login-btn span {
        width: 100px;
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* ===================================================================
   MOBILE HEADER BACKGROUND FIX
   Add this to the end of your main.css file
   =================================================================== */

/* Override the mobile header gradient to match your new design */
@media (max-width: 991px) {
  .header-1 {
    background: linear-gradient(135deg, #EBD8DC 0%, #f0f0f0 30%, #f0f0f0 70%) !important;
  }
  
  /* Also ensure the body background is consistent */
  body {
    background: linear-gradient(135deg, #EBD8DC 0%, #f0f0f0 30%, #f0f0f0 70%) !important;
  }
  
  /* Fix the hero section background on mobile */
  .hero-1 {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(236, 244, 249, 0.90) 50%, rgba(236, 244, 249, 0.90) 100% )!important;
  }
}

/* Additional fix for sticky header on mobile */
@media (max-width: 991px) {
  .sticky.header-1 {
    background: linear-gradient(135deg, #EBD8DC 0%, #f0f0f0 30%, #f0f0f0 70%) !important;
  }
}

/* Ensure hamburger menu icon is visible against light background */
@media (max-width: 991px) {
  .header-1 .sidebar__toggle {
    color: #323c46 !important;
    border-color: #323c46 !important;
  }
}

/* Make sure menu items are readable on mobile */
@media (max-width: 991px) {
  .mean-container .mean-nav ul li a {
    color: #323c46 !important;
  }
}

* Desktop - Increase button width */
.hero-section .theme-btn {
    width: 160px !important;  /* Increased from 120px */
}

/* Tablet - Adjust width */
@media (max-width: 991px) and (min-width: 768px) {
    .hero-section .theme-btn {
        width: 120px !important;
    }
}

/* Mobile - Keep responsive */
@media (max-width: 767px) {
    .hero-section .theme-btn {
        width: 105px !important;
    }
}

@media (max-width: 480px) {
    .hero-section .theme-btn {
        /*width: 80px !important;*/
    }
}
/* ============================================================================
   CUSTOM HERO BACKGROUND STYLES - ADD TO END OF main.css
   ============================================================================ */

/**
 * Hero section with background.png image
 * Add this CSS block at the end of your main.css file
 */

/* Hero section with background image */
.hero-section.hero-with-bg {
    position: relative;
    overflow: hidden;
    min-height: auto;
    padding: 120px 0 150px;
    display: flex;
    align-items: center;
    background: #f5f5f5;
}

/* Background image layer */
.hero-section.hero-with-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.95;
    z-index: 0;
}

/* Optional: Add subtle overlay for better text readability */
.hero-section.hero-with-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    z-index: 1;
}

/* Ensure content is above background */
.hero-section.hero-with-bg .container {
    position: relative;
    z-index: 2;
}

/* Large heading style matching reference */
.hero-section.hero-with-bg .hero-content .section-title h2.hero-main-title {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.1;
    color: #000;
    margin-bottom: 20px;
    text-transform: none;
    letter-spacing: -1px;
}

@media (max-width: 1199px) {
    .hero-section.hero-with-bg .hero-content .section-title h2.hero-main-title {
        font-size: 56px;
    }
}

@media (max-width: 991px) {
    .hero-section.hero-with-bg .hero-content .section-title h2.hero-main-title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .hero-section.hero-with-bg .hero-content .section-title h2.hero-main-title {
        font-size: 32px;
    }
}

/* Subtitle/tagline style */
.hero-section.hero-with-bg .hero-content .hero-subtitle {
    font-size: 20px;
    color: #333;
    margin-bottom: 30px;
    font-weight: 400;
}

@media (max-width: 767px) {
    .hero-section.hero-with-bg .hero-content .hero-subtitle {
        font-size: 16px;
    }
}

/* Adjust existing hero text color for better readability */
.hero-section.hero-with-bg .hero-content .hero-text {
    color: #333 !important;
}

/* Welcome text adjustment */
.hero-section.hero-with-bg .section-title h6 {
    color: #555;
}

/* Responsive height adjustments */
@media (max-width: 991px) {
    .hero-section.hero-with-bg {
        min-height: 80vh;
        padding: 80px 0 60px;
    }
}

@media (max-width: 767px) {
    .hero-section.hero-with-bg {
        min-height: auto;
        padding: 60px 0 40px;
    }
}

/* Optional: If background image is too bright, add darker overlay */
.hero-section.hero-with-bg.dark-overlay::after {
    background: rgba(0, 0, 0, 0.2);
}

/* Optional: If you want to dim the background more */
.hero-section.hero-with-bg.light-overlay::before {
    opacity: 0.7;
}

/* ============================================================================
   END OF CUSTOM HERO STYLES
   ============================================================================ */
   
/* Remove body inline gradient */
body {
    background: #f5f5f5 !important;
}

/* Make header transparent and position OVER hero section */
#header-sticky {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent !important;
    box-shadow: none !important;
}

.header-1 {
    background: transparent !important;
}

/* Hero section - full viewport */
.hero-section.hero-1 {
    position: relative;
    min-height: auto;
    padding: 120px 0 150px;
    padding-top: 0 !important;
    background: transparent;
}

.hero-section.hero-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../img/background.png');
    background-size: 50%;  /* 80% of viewport - adjust as needed */
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
}
/* VERTICAL DUAL-TONE SPLIT - Column wise (50/50) */
.hero-section.hero-1::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(245, 245, 245, 0.75) 0%,
        rgba(245, 245, 245, 0.75) 50%,
        rgba(235, 240, 242, 0.75) 50%,
        rgba(235, 240, 242, 0.75) 100%
    );
    z-index: 1;
}

/* Ensure all content is above the overlays */
.hero-section.hero-1 .container,
.hero-section.hero-1 .row,
.hero-section.hero-1 .hero-content,
.hero-section.hero-1 .hero-image {
    position: relative;
    z-index: 2;
}

/* Adjust hero content positioning */
.hero-1 .hero-content {
    margin-top: 120px;
}

/* Title styling - black as in screenshot */
.hero-1 .hero-content .section-title h2 {
    color: #000 !important;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 1199px) {
    .hero-1 .hero-content .section-title h2 {
        font-size: 56px;
    }
}

@media (max-width: 991px) {
    .hero-1 .hero-content .section-title h2 {
        font-size: 42px;
    }
    
    .hero-1 .hero-content {
        margin-top: 100px;
    }
    
    /* Single color on mobile */
    .hero-section.hero-1::after {
        background: rgba(245, 245, 245, 0.75);
    }
}

@media (max-width: 767px) {
    .hero-1 .hero-content .section-title h2 {
        font-size: 32px;
    }
    
    .hero-1 .hero-content {
        margin-top: 80px;
    }
}

/* Text colors for readability */
.hero-1 .hero-content .hero-text {
    color: #333 !important;
}

.hero-1 .section-title h6 {
    color: #555;
}

/* Animation for rotating text */
.animated-text {
    transition: opacity 0.5s ease-in-out;
}

/* Ensure hero image stays visible */
.hero-1 .hero-image {
    z-index: 2;
}

/* ============================================================================
   BACKGROUND IMAGE FIX - REPLACE PREVIOUS CSS WITH THIS
   ============================================================================ */

/* Remove body inline gradient */
body {
    background: #ffffff !important;
}

/* Make header transparent and position OVER hero section */
#header-sticky {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent !important;
    box-shadow: none !important;
}

.header-1 {
    background: transparent !important;
}

/* Remove the existing header pseudo-elements */
.header-1::before,
.header-1::after {
    display: none !important;
}

/* Hero section - full viewport */
.hero-section.hero-1.hero-with-bg {
    position: relative;
    min-height: 100vh;
    padding-top: 0 !important;
    background: transparent;
}

/* Background image layer - CRISP AND CLEAR, NO ZOOM */
.hero-section.hero-1.hero-with-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/background.png');
    background-size: contain;  /* Changed from 'cover' to 'contain' - keeps full image visible background-size: 70%, background-size: auto 90% */
    background-position: center ;  /* Position to show full truck */
    background-repeat: no-repeat;
    opacity: 1;  /* Full opacity - no dullness */
    z-index: 0;
}

/* REMOVE ANY OVERLAY - This was causing the dullness */
.hero-section.hero-1.hero-with-bg::after {
    display: none !important;  /* Remove the overlay completely */
}

/* Ensure all content is above the background */
.hero-section.hero-1.hero-with-bg .container,
.hero-section.hero-1.hero-with-bg .row,
.hero-section.hero-1.hero-with-bg .hero-content {
    position: relative;
    z-index: 2;
}

/* Adjust hero content positioning */
.hero-1.hero-with-bg .hero-content {
    margin-top: 120px;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .hero-1.hero-with-bg .hero-content {
        margin-top: 100px;
    }
    
    .hero-section.hero-1.hero-with-bg::before {
        background-size: 80%;  /* Slightly smaller on tablets */
    }
}

@media (max-width: 991px) {
    .hero-1.hero-with-bg .hero-content {
        margin-top: 100px;
    }
    
    /* Keep header visible on mobile */
    #header-sticky {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .hero-section.hero-1.hero-with-bg::before {
        background-size: cover;  /* Cover on mobile */
        background-position: center;
    }
}

@media (max-width: 767px) {
    .hero-1.hero-with-bg .hero-content {
        margin-top: 80px;
    }
}

/* ============================================================================
   END OF BACKGROUND IMAGE STYLES
   ============================================================================ */
   
   
/* ===================================================================
   BREADCRUMB POSITION FIX - Optimal spacing
   =================================================================== */

/* Reduce top padding for closer positioning */
.breadcrumb-wrapper .page-heading {
    padding: 100px 0 40px !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .breadcrumb-wrapper .page-heading {
        padding: 90px 0 35px !important;
    }
}

@media (max-width: 767px) {
    .breadcrumb-wrapper .page-heading {
        padding: 80px 0 30px !important;
    }
}

/* Reduce gap between breadcrumb items and title */
.breadcrumb-wrapper .page-heading .breadcrumb-items {
    margin-top: 8px !important;
}

/* Reduce margin below breadcrumb wrapper to bring content closer */
.breadcrumb-wrapper {
    margin-bottom: 40px !important;
}

@media (max-width: 767px) {
    .breadcrumb-wrapper {
        margin-bottom: 30px !important;
    }
}

/* ============================================================================
   DUAL-TONE OVERLAY ON BACKGROUND IMAGE - FINAL VERSION
   Add this to the END of main.css
   ============================================================================ */

/* Remove any existing body background */
body {
    background: #ffffff !important;
}

/* Make header transparent and position OVER hero section */
#header-sticky {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent !important;
    box-shadow: none !important;
}

.header-1 {
    background: transparent !important;
}

/* Remove the existing header pseudo-elements that create colored backgrounds */
.header-1::before,
.header-1::after {
    display: none !important;
}

/* Hero section - full viewport with dual-tone overlay */
.hero-section.hero-1.hero-dual-tone {
    position: relative;
    min-height: 100vh;
    padding-top: 0 !important;
    background: transparent;
    overflow: hidden;
}

/* Background image layer - CRISP AND CLEAR */
.hero-section.hero-1.hero-dual-tone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/background.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
}
/* ========================================
   DUAL TONE OVERLAY EFFECT + TRUCK IMAGE
   Add this CSS at the end of main.css
   ======================================== */

/* Hero Section with Background Image and Dual Tone Overlay */
.hero-section.hero-dual-tone {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 120px;
    overflow: visible;
}

/* Dual Tone Overlay - Sits on top of background image */
.hero-section.hero-dual-tone .dual-tone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Desktop: Split vertically 50/50 - White left, Light blue right */
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(255, 255, 255, 0.85) 50%, 
        rgba(236, 244, 249, 0.90) 50%, 
        rgba(236, 244, 249, 0.90) 100%
    );
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through */
}

/* Make sure container and content are above the overlay */
.hero-section.hero-dual-tone .container {
    position: relative;
    z-index: 2;
}

/* Ensure hero content is properly visible */
.hero-section.hero-dual-tone .hero-content {
    position: relative;
    z-index: 3;
}

/* Make text stand out better on overlay */
.hero-section.hero-dual-tone .hero-content .section-title h6 {
    color: var(--text);
    font-weight: 700;
}

.hero-section.hero-dual-tone .hero-content .hero-main-title {
    color: #000;
    font-weight: 700;
}

.hero-section.hero-dual-tone .hero-content .hero-text {
    color: #171717;
}

/* ========================================
   TRUCK IMAGE POSITIONING - REFERENCE STYLE (CORRECTED)
   ======================================== */

/* Truck Wrapper - Large and prominent like reference */
.hero-truck-wrapper {
    position: absolute;
    right: -5%; /* Slightly off-screen right edge like reference */
    bottom: -20px; /* Aligned with button row */
    z-index: 2;
    width: 50%; /* Much larger - 50% of container */
    max-width: 500px; /* Increased max size */
    pointer-events: none;
	
}

/* Truck Image Styling */
.hero-truck-image {
    width: 70%;
    height: auto;
    object-fit: contain;
    /* Subtle drop shadow for depth */
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.08));
    display: block;
	transform: perspective(1200px) rotateY(-14deg) rotate(1.5deg);

}

/* Remove the col-lg-6 constraints for truck on desktop */
@media (min-width: 992px) {
    .hero-section.hero-dual-tone .col-lg-6.order-1 {
        position: static;
    }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Extra Large Desktop - Biggest truck */
@media (min-width: 1600px) {
    .hero-truck-wrapper {
        bottom: 60px;
        right: -3%;
        max-width: 750px;
        width: 48%;
    }
}

/* Large Desktop */
@media (min-width: 1400px) and (max-width: 1599px) {
    .hero-truck-wrapper {
        bottom: 5px;
        right: -2%;
        max-width: 680px;
        width: 49%;
		
    }
}

/* Standard Desktop */
@media (min-width: 1200px) and (max-width: 1399px) {
    .hero-truck-wrapper {
        bottom: 50px;
        right: -5%;
        max-width: 620px;
        width: 50%;
    }
}

/* Medium Desktop */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-truck-wrapper {
        bottom: 45px;
        right: -6%;
        max-width: 550px;
        width: 52%;
    }
}

/* ========================================
   MOBILE RESPONSIVE FIXES FOR INDEX PAGE
   ======================================== */

/* Tablet View - 991px and below */
@media (max-width: 991px) {
    .hero-section.hero-dual-tone {
        padding-top: 120px;
        padding-bottom: 60px;
        min-height: auto;
        overflow: visible;  /* Changed from hidden */
    }
    
    /* Keep dual-tone VERTICAL on mobile - Left white, Right light blue */
    .hero-section.hero-dual-tone .dual-tone-overlay {
        background: linear-gradient(90deg, 
            rgba(255, 255, 255, 0.85) 0%, 
            rgba(255, 255, 255, 0.85) 50%, 
            rgba(236, 244, 249, 0.90) 50%, 
            rgba(236, 244, 249, 0.90) 100%
        );
    }
    
    /* Truck positioning for tablet */
    .hero-truck-wrapper {
        position: relative;
        right: auto;
        bottom: auto;
        width: 70%;
        max-width: 400px;
        margin: 0 auto 30px auto;  /* Top margin 0, bottom 30px */
        pointer-events: auto;
        transform: none;  /* Remove 3D transform on mobile */
    }
    
    .hero-truck-image {
        width: 100%;
        transform: none;  /* Remove perspective transform */
    }
    
    /* Hero content spacing */
    .hero-section.hero-dual-tone .hero-content {
        text-align: center;
        padding: 0 20px;
    }
    
    /* Center buttons on mobile */
    .hero-section.hero-dual-tone .main-button {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px !important;
    }
}

/* Mobile View - 767px and below */
@media (max-width: 767px) {
    .hero-section.hero-dual-tone {
        padding-top: 100px;
        padding-bottom: 40px;
    }
    
    /* Smaller truck on mobile */
    .hero-truck-wrapper {
        width: 80%;
        max-width: 320px;
        margin: 0 auto 25px auto;
    }
    
    /* Adjust text sizes */
    .hero-section.hero-dual-tone .hero-main-title {
        font-size: 32px !important;
        line-height: 1.2;
    }
    
    .hero-section.hero-dual-tone .hero-text {
        font-size: 15px;
        line-height: 1.6;
    }
    
    /* Stack buttons vertically on very small screens */
    .hero-section.hero-dual-tone .main-button {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-section.hero-dual-tone .main-button .theme-btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Small Mobile - 575px and below */
@media (max-width: 575px) {
    .hero-section.hero-dual-tone {
        padding-top: 90px;
        padding-bottom: 30px;
    }
    
    .hero-truck-wrapper {
        width: 90%;
        max-width: 280px;
        margin: 0 auto 20px auto;
    }
    
    .hero-section.hero-dual-tone .hero-main-title {
        font-size: 28px !important;
    }
    
    .hero-section.hero-dual-tone .hero-content {
        padding: 0 15px;
    }
}

/* ========================================
   END OF MOBILE RESPONSIVE FIXES
   ======================================== */

/* ========================================
   BUTTON ENHANCEMENTS
   ======================================== */

/* Make buttons more prominent on dual tone background */
.hero-section.hero-dual-tone .main-button .theme-btn {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
	background-color: var(--text);
}

.hero-section.hero-dual-tone .main-button .theme-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ========================================
   END OF DUAL TONE + TRUCK CSS
   ======================================== */
   
/* ========================================
   ABOUT PAGE - BACKGROUND IMAGE LARGER WITH FULL VISIBILITY
   ======================================== */

/* Reduce breadcrumb bottom spacing */
.breadcrumb-wrapper {
    margin-bottom: 20px !important;
}

.breadcrumb-wrapper .page-heading {
    padding: 100px 0 20px !important;
}

/* About section - TALLER container for larger background */
.about-section-3.bg-cover {
    position: relative;
    overflow: visible;
    min-height: 800px;  /* Tall container = larger background image */
    padding: 40px 0 60px;
}

/* Background image layer - FULL IMAGE VISIBLE but LARGER */
.about-section-3.bg-cover::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/background.png');
    background-size: contain;  /* Keep FULL image visible */
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
}

/* Ensure content is above background */
.about-section-3.bg-cover .container,
.about-section-3.bg-cover .about-wrapper-3 {
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .about-section-3.bg-cover {
        min-height: 700px;
        padding: 30px 0 50px;
    }
}

@media (max-width: 991px) {
    .breadcrumb-wrapper .page-heading {
        padding: 90px 0 15px !important;
    }
    
    .about-section-3.bg-cover {
        min-height: 600px;
        padding: 30px 0 40px;
    }
}

@media (max-width: 767px) {
    .breadcrumb-wrapper .page-heading {
        padding: 80px 0 15px !important;
    }
    
    .about-section-3.bg-cover {
        min-height: auto;  /* Let content determine height on mobile */
        padding: 20px 0 30px;
    }
}

/* ========================================
   END OF ABOUT PAGE STYLES
   ======================================== */
   
/* ========================================
   CHALLENGES PAGE - BACKGROUND IMAGE
   ======================================== */

/* Challenges section - TALLER container for larger background */
.service-section-3.section-padding {
    position: relative;
    overflow: visible;
    min-height: 800px;
    padding: 40px 0 60px;
}

/* Background image layer - MOVED UPWARDS */
.service-section-3.section-padding::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    background-image: url('../img/background.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
}

/* Ensure content is above background */
.service-section-3.section-padding .container,
.service-section-3.section-padding .challenge-section-wrapper {
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .service-section-3.section-padding {
        min-height: 700px;
    }
    
    .service-section-3.section-padding::before {
        top: -80px;
        height: calc(100% + 80px);
    }
}

@media (max-width: 991px) {
    .service-section-3.section-padding {
        min-height: 600px;
    }
    
    .service-section-3.section-padding::before {
        top: -60px;
        height: calc(100% + 60px);
    }
}

@media (max-width: 767px) {
    .service-section-3.section-padding {
        min-height: auto;
    }
    
    .service-section-3.section-padding::before {
        top: 0;
        height: 100%;
    }
}

/* ========================================
   OUR EDGE PAGE - BACKGROUND IMAGE (FIXED)
   ======================================== */

/* Our Edge section - Let content determine height naturally */
.our-edge-section.section-padding {
    position: relative;
    overflow: visible;
    min-height: auto;  /* Changed from 800px to auto */
    padding: 40px 0 60px;
}

/* Background image layer - MOVED UPWARDS */
.our-edge-section.section-padding::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 200px);  /* Extended height more */
    background-image: url('../img/background.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
}

/* Ensure content is above background */
.our-edge-section.section-padding .container,
.our-edge-section.section-padding .edge-section-wrapper {
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .our-edge-section.section-padding::before {
        top: -80px;
        height: calc(100% + 160px);
    }
}

@media (max-width: 991px) {
    .our-edge-section.section-padding::before {
        top: -60px;
        height: calc(100% + 120px);
    }
}

@media (max-width: 767px) {
    .our-edge-section.section-padding::before {
        top: 0;
        height: 100%;
    }
}

/* ========================================
   WHY SRL PAGE - BACKGROUND IMAGE
   ======================================== */

/* Why SRL section - TALLER container for larger background */
.service-details.section-padding {
    position: relative;
    overflow: visible;
    min-height: 800px;
    
}

/* Background image layer - MOVED UPWARDS */
.service-details.section-padding::before {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    background-image: url('../img/background.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: 0;
}

/* Ensure content is above background */
.service-details.section-padding .container,
.service-details.section-padding .service-details-wrapper {
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .service-details.section-padding {
        min-height: 700px;
    }
    
    .service-details.section-padding::before {
        top: -80px;
        height: calc(100% + 80px);
    }
}

@media (max-width: 991px) {
    .service-details.section-padding {
        min-height: 600px;
    }
    
    .service-details.section-padding::before {
        top: -60px;
        height: calc(100% + 60px);
    }
}

@media (max-width: 767px) {
    .service-details.section-padding {
        min-height: auto;
    }
    
    .service-details.section-padding::before {
        top: 0;
        height: 100%;
    }
}

/* ========================================
   END OF ALL PAGES BACKGROUND STYLES
   ======================================== */
   
/* ========================================
   HERO POINTS LIST (NO ANIMATION)
   ======================================== */

.hero-points-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hero-point {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    opacity: 1;
}

/* Responsive sizing */
@media (max-width: 1399px) {
    .hero-point {
        font-size: 38px;
    }
}

@media (max-width: 991px) {
    .hero-point {
        font-size: 32px;
    }
    
    .hero-points-list {
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .hero-point {
        font-size: 28px;
    }
    
    .hero-points-list {
        gap: 10px;
    }
}

@media (max-width: 575px) {
    .hero-point {
        font-size: 24px;
    }
    
    .hero-points-list {
        gap: 8px;
    }
}

/* ========================================
   END OF HERO POINTS LIST
   ======================================== */
   
/* ===================================================================
   CHALLENGE PAGE CSS UPDATES
   =================================================================== */

/* 1. HIDE BREADCRUMB NAVIGATION (but keep the heading) */
.breadcrumb-wrapper .page-heading .breadcrumb-items {
    display: none !important;
}

/* 2. CENTER THE CHALLENGE HEADING */
.breadcrumb-wrapper .page-heading {
    text-align: center !important;
}

.breadcrumb-wrapper .page-heading h1 {
    text-align: center !important;
}

/* 3. LAYOUT: 2 columns total - Left (6 points in 2 columns) + Right (Generic Card) */
.challenge-section-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Left section wider, right section for content */
    gap: 40px;
    align-items: flex-start;
    position: relative;
    min-height: 600px;
}

/* Make the challenge titles wrap into 2 columns of 3 items each */
.challenge-titles-column > div {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns */
    gap: 15px 20px; /* vertical gap, horizontal gap */
}

/* Adjust challenge items for grid layout */
.challenge-title-item {
    margin-bottom: 0 !important; /* Remove bottom margin since grid handles spacing */
    transform: translateX(0) !important; /* Reset transform for grid layout */
}

.challenge-title-item:hover,
.challenge-title-item.active {
    transform: translateX(5px) !important; /* Smaller hover effect for grid */
}

/* Content column stays on the right - MAKE IT STICKY */
.challenge-content-column {
    background: transparent;
    border-radius: 0;
    padding: 0;
    min-height: 400px;
    position: sticky !important;
    top: 120px !important;
    box-shadow: none;
    transition: none;
    align-self: flex-start;
}

/* 4. UPDATE GRADIENT COLORS TO BLUE/TEAL THEME (matching the screenshot) */

/* MODERN CARD DESIGN - Glassmorphism/Neumorphism Style */
.challenge-title-item {
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.7) !important; /* Semi-transparent white */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px !important; /* Modern rounded corners */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 8px 32px rgba(0, 131, 176, 0.1);
}

/* Hover state with enhanced glassmorphism */
.challenge-title-item:hover,
.challenge-title-item.active {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 131, 176, 0.4);
    transform: translateX(5px) translateY(-2px) !important;
    box-shadow: 0 12px 40px rgba(0, 131, 176, 0.25);
    color: #171717;
}

/* Update the left border gradient */
.challenge-title-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(
        180deg,
        #00B4DB 0%,      /* Light cyan/teal */
        #0083B0 50%,     /* Medium blue */
        #005F8F 100%     /* Darker blue */
    );
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.3s ease;
}

/* Update icon background gradient - Modern style */
.challenge-title-item i {
    flex-shrink: 0;
    width: 50px !important;
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px !important; /* More modern rounded corners */
    background: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%);
    font-size: 22px;
    color: white;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy animation */
    box-shadow: 0 4px 20px rgba(0, 131, 176, 0.4);
}

/* Update icon hover shadow - Enhanced effect */
.challenge-title-item:hover i,
.challenge-title-item.active i {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 8px 30px rgba(0, 131, 176, 0.6);
    background: linear-gradient(135deg, #00D4FF 0%, #00A0D0 100%); /* Brighter on hover */
}

/* Update title hover gradient */
.challenge-title-item:hover h3,
.challenge-title-item.active h3 {
    background: linear-gradient(90deg, #00B4DB 0%, #0083B0 50%, #005F8F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Better title styling */
.challenge-title-item h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #323c46;
    transition: all 0.3s ease;
    flex: 1;
    letter-spacing: 0.3px;
}

/* Update content heading gradient */
.challenge-content-item h4 {
    font-size: 24px;
    font-weight: 700;
    color: #323c46;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #00B4DB 0%, #0083B0 50%, #005F8F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* MODERN CONTENT CARD DESIGN - Glassmorphism */
.challenge-content-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.75) !important; /* Semi-transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 30px;
    border-radius: 24px !important; /* Larger radius for content card */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 131, 176, 0.15);
}

.challenge-content-item.initial-active,
.challenge-content-item.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

/* Update checkmark icon background */
.challenge-list-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%);
    margin-top: 2px;
    box-shadow: 0 2px 8px rgba(0, 131, 176, 0.3);
}

/* Update list items with modern styling */
.challenge-content-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding: 15px 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.4s ease forwards;
    border: 1px solid rgba(0, 131, 176, 0.1);
}

.challenge-content-list li:hover {
    background: rgba(0, 180, 219, 0.15);
    transform: translateX(5px) translateY(0);
    padding-left: 18px;
    border-radius: 12px;
    border-color: rgba(0, 131, 176, 0.3);
    box-shadow: 0 4px 12px rgba(0, 131, 176, 0.15);
}

/* Responsive Design Updates */
@media (max-width: 1200px) {
    .challenge-section-wrapper {
        grid-template-columns: 1fr; /* Single column on tablets */
        gap: 30px;
    }
    
    .challenge-titles-column > div {
        grid-template-columns: 1fr 1fr; /* Keep 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .challenge-titles-column > div {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 15px;
    }
    
    .challenge-content-column {
        min-height: 300px;
    }
}

/* ===================================================================
   EXPLORE BUTTON HOVER EXPAND EFFECT
   =================================================================== */

/* Container for the button group */
.explore-button-container {
    position: relative;
    display: inline-flex;
    align-items: center !important; /* Ensure vertical centering */
    gap: 15px;
    margin-top: 50px;
    overflow: visible;
}

/* Main Explore button - Rectangular dark style */
.explore-main-btn {
    position: relative;
    z-index: 10;
    display: inline-flex; /* Changed to flex for better alignment */
    align-items: center;
    justify-content: center;
    background: #3d3d3d !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 500;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    text-transform: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin: 0; /* Remove any default margins */
}

.explore-main-btn:hover {
    background: #2a2a2a !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Hidden buttons container */
.explore-hidden-buttons {
    display: flex;
    gap: 12px;
    align-items: center; /* Ensure all buttons align vertically */
}

/* Individual hidden buttons - Initially hidden */
.explore-hidden-buttons a {
    opacity: 0;
    transform: translateX(-30px) scale(0.8);
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

/* Show buttons on container hover with staggered effect */
.explore-button-container:hover .explore-hidden-buttons a {
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
    pointer-events: all;
}

/* Staggered animation delays for each button */
.explore-button-container:hover .explore-hidden-buttons a:nth-child(1) {
    transition-delay: 0.1s;
}

.explore-button-container:hover .explore-hidden-buttons a:nth-child(2) {
    transition-delay: 0.2s;
}

.explore-button-container:hover .explore-hidden-buttons a:nth-child(3) {
    transition-delay: 0.3s;
}

.explore-button-container:hover .explore-hidden-buttons a:nth-child(4) {
    transition-delay: 0.4s;
}

/* Style for the hidden buttons - matching flat design */
.explore-hidden-buttons .theme-btn {
    position: relative;
    display: inline-flex; /* Changed to flex for better alignment */
    align-items: center;
    justify-content: center;
    background: white !important;
    color: #3d3d3d !important;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 28px; /* Match Explore button vertical padding */
    border-radius: 8px !important;
    text-transform: none;
    letter-spacing: 0.3px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    font-family: "Radio Canada Big", sans-serif;
    margin: 0; /* Remove any default margins */
    height: auto; /* Let padding control height */
    line-height: 1; /* Consistent line height */
}

/* Button hover effect - simple and clean */
.explore-hidden-buttons .theme-btn:hover {
    background: #3d3d3d !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: #3d3d3d;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .explore-button-container {
        flex-wrap: wrap;
    }
    
    .explore-hidden-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .explore-button-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .explore-hidden-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    
    .explore-hidden-buttons a {
        width: 100%;
        transform: translateY(-20px) scale(0.9);
    }
    
    .explore-button-container:hover .explore-hidden-buttons a {
        transform: translateY(0) scale(1);
    }
    
    .explore-main-btn {
        width: 100%;
        text-align: center;
    }
}
/* ===================================================================
   OUR EDGE PAGE CSS UPDATES - BLUE/TEAL THEME WITH GLASSMORPHISM
   =================================================================== */

/* Update title cards with glassmorphism and reduced opacity */
.edge-title-item {
    flex: 0 1 auto;
    min-width: 220px;
    max-width: 260px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.7) !important; /* Semi-transparent for background visibility */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px !important; /* More modern rounded corners */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transform: translateY(0);
    box-shadow: 0 8px 32px rgba(0, 131, 176, 0.1);
}

/* Update bottom border gradient to blue/teal theme */
.edge-title-item::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #00B4DB 0%, #0083B0 50%, #005F8F 100%);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.edge-title-item:hover::before,
.edge-title-item.active::before {
    transform: scaleX(1);
}

/* Update hover state with enhanced glassmorphism */
.edge-title-item:hover,
.edge-title-item.active {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 131, 176, 0.4);
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 131, 176, 0.25);
}

/* Update icon wrapper to blue/teal gradient */
.edge-icon-wrapper {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px !important; /* More modern */
    background: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 131, 176, 0.4);
}

.edge-title-item:hover .edge-icon-wrapper,
.edge-title-item.active .edge-icon-wrapper {
    transform: scale(1.12) rotate(5deg);
    box-shadow: 0 6px 25px rgba(0, 131, 176, 0.6);
    background: linear-gradient(135deg, #00D4FF 0%, #00A0D0 100%); /* Brighter on hover */
}

.edge-icon-wrapper i {
    font-size: 24px;
    color: white;
}

/* Update title text gradient on hover */
.edge-title-item:hover h3,
.edge-title-item.active h3 {
    background: linear-gradient(90deg, #00B4DB 0%, #0083B0 50%, #005F8F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Update content cards with glassmorphism */
.edge-content-item {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    width: 100%;
    max-width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    background: rgba(255, 255, 255, 0.75) !important; /* Semi-transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 32px;
    border-radius: 24px !important; /* Larger radius */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 35px rgba(0, 131, 176, 0.15);
}

.edge-content-item.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    position: absolute;
    z-index: 1;
}

/* Update content heading gradient */
.edge-content-item h4 {
    font-size: 24px;
    font-weight: 700;
    color: #323c46;
    margin-bottom: 12px;
    text-align: center;
    background: linear-gradient(90deg, #00B4DB 0%, #0083B0 50%, #005F8F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Update all icons and checkmarks throughout the content */
.verified-icon i,
.edge-result i,
.edge-highlight i {
    color: #0083B0 !important;
}

/* Update checkmark/verified icons specifically */
.verified-icon {
    color: #00B4DB !important;
}

/* Update result box styling */
.edge-result {
    background: rgba(0, 180, 219, 0.08) !important;
    border-left: 4px solid #0083B0 !important;
}

/* Update highlight box styling */
.edge-highlight {
    background: rgba(0, 180, 219, 0.08) !important;
    border-left: 4px solid #00B4DB !important;
}

/* Update quote styling */
.edge-quote {
    border-left-color: #0083B0 !important;
}

.edge-quote i {
    color: #00B4DB !important;
}

/* Update category headers */
.category-header i {
    color: #0083B0 !important;
}

.category-header {
    background: rgba(0, 180, 219, 0.08) !important;
}

/* Update list item dots */
.category-list li i {
    color: #00B4DB !important;
}

/* Update tracking flow step icons */
.flow-icon {
    background: linear-gradient(135deg, #00B4DB 0%, #0083B0 100%) !important;
    box-shadow: 0 4px 15px rgba(0, 131, 176, 0.3) !important;
}

.flow-arrow {
    color: #0083B0 !important;
}

/* Update operational checkmarks */
.operational-checklist li::before {
    color: #00B4DB !important;
}

/* Update verified list checkmarks */
.verified-list li .verified-icon i {
    color: #00B4DB !important;
}

/* Update vehicle category styles */
.vehicle-category {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 131, 176, 0.1);
    border-radius: 16px !important;
}

.vehicle-category:hover {
    border-color: rgba(0, 131, 176, 0.3);
    box-shadow: 0 4px 20px rgba(0, 131, 176, 0.1);
}

/* Responsive adjustments remain the same */
@media (max-width: 1200px) {
    .edge-title-item {
        min-width: 200px;
        max-width: 240px;
    }
}

@media (max-width: 768px) {
    .edge-title-item {
        min-width: 160px;
        max-width: 180px;
        padding: 14px 16px;
    }
    
    .edge-icon-wrapper {
        width: 45px;
        height: 45px;
    }
    
    .edge-icon-wrapper i {
        font-size: 20px;
    }
}

/* Move Welcome text down slightly */
.hero-section.hero-with-bg .section-title h6 {
    margin-top: 30px !important;
    margin-bottom: 50px !important;  /* Increased spacing between welcome and heading */
}

/* Keep heading spacing consistent */
.hero-section.hero-with-bg .hero-content .section-title h2.hero-main-title {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
}

/* Reduce description bottom margin */
.hero-section.hero-with-bg .hero-content .section-title .hero-text {
    margin-bottom: 20px !important;
}

/* Move buttons up closer to description */
.hero-section.hero-with-bg .main-button {
    margin-top: 35px !important;
}
/* Fix mobile responsive - prevent footer from hiding buttons */
@media (max-width: 991px) {
    .hero-section.hero-with-bg,
    .hero-section.hero-1.hero-with-bg {
        min-height: auto !important;
        padding: 100px 0 80px !important;
    }
    
    .hero-1 .hero-content {
        margin-top: 60px;
    }
}

@media (max-width: 767px) {
    .hero-section.hero-with-bg,
    .hero-section.hero-1.hero-with-bg {
        min-height: auto !important;
        padding: 80px 0 100px !important; /* Extra bottom padding */
    }
    
    .hero-1 .hero-content {
        margin-top: 40px;
    }
    
    /* Make buttons stack vertically on mobile */
    .hero-1 .main-button {
        flex-direction: column !important;
        width: 100%;
        gap: 15px !important;
    }
    
    .hero-1 .main-button a {
        width: 100% !important;
        text-align: center;
    }
}

@media (max-width: 575px) {
    .hero-section.hero-with-bg,
    .hero-section.hero-1.hero-with-bg {
        padding: 70px 0 120px !important; /* Even more bottom padding for small screens */
    }
}
@media (max-width: 991px) {
    .hero-truck-wrapper {
        display: none !important;
    }
}

/* Height-based media query for dev tools / reduced viewport height */
@media (max-height: 700px) {
    .hero-section.hero-with-bg,
    .hero-section.hero-1.hero-with-bg,
    .hero-section.hero-1 {
        padding: 80px 0 100px !important;
    }
    
    .hero-1 .hero-content {
        margin-top: 40px !important;
    }
}

@media (max-height: 550px) {
    .hero-section.hero-with-bg,
    .hero-section.hero-1.hero-with-bg,
    .hero-section.hero-1 {
        padding: 60px 0 80px !important;
    }
    
    .hero-1 .hero-content {
        margin-top: 20px !important;
    }
}

/* ============================================================================

   ============================================================================ */

/* Fix body flex behavior when viewport height is reduced */
@media (max-height: 700px) {
    body {
        min-height: auto !important;
        display: block !important;
    }
    
    .hero-section.hero-with-bg,
    .hero-section.hero-1.hero-with-bg,
    .hero-section.hero-1 {
        padding: 80px 0 100px !important;
        min-height: auto !important;
    }
    
    .hero-1 .hero-content {
        margin-top: 40px !important;
    }
    
    .footer-bottom {
        margin-top: 60px !important;
        position: relative !important;
    }
}

/* Extra aggressive fix for very small viewports (dev tools fully expanded) */
@media (max-height: 550px) {
    body {
        min-height: auto !important;
        display: block !important;
    }
    
    .hero-section.hero-with-bg,
    .hero-section.hero-1.hero-with-bg,
    .hero-section.hero-1 {
        padding: 60px 0 80px !important;
        min-height: auto !important;
    }
    
    .hero-1 .hero-content {
        margin-top: 20px !important;
    }
    
    .hero-section.hero-1 .hero-content .section-title h6 {
        margin-top: 20px !important;
        margin-bottom: 30px !important;
    }
    
    .hero-section.hero-1 .main-button {
        margin-top: 25px !important;
    }
}

/* Ensure hero section never forces full viewport height */
.hero-section.hero-1,
.hero-section.hero-with-bg {
    min-height: auto !important;
    overflow: visible !important;
}

/* Make sure buttons always have space above footer */
.explore-button-container,
.main-button {
    margin-bottom: 20px !important;
}

/* Prevent footer from ever overlapping content */
.footer-bottom {
    position: relative;
    margin-top: 60px !important;
    clear: both;
}



/* 2. MOVE EXPLORE BUTTON CLOSER TO DESCRIPTION TEXT */
.hero-section.hero-with-bg .main-button,
.hero-section.hero-1 .main-button,
.explore-button-container {
    margin-top: 20px !important; /* Reduced from 35px */
}

/* Reduce bottom margin of description text for tighter spacing */
.hero-section.hero-with-bg .hero-content .section-title .hero-text,
.hero-1 .hero-content .hero-text {
    margin-bottom: 10px !important; /* Reduced from 20px */
}

/* Override any conflicting spacing rules */
.hero-section.hero-1 .hero-content .main-button {
    margin-top: 25px !important;
}

/* Mobile responsive - keep same spacing */
@media (max-width: 991px) {
    .hero-section.hero-with-bg .main-button,
    .hero-section.hero-1 .main-button,
    .explore-button-container {
        margin-top: 20px !important;
    }
}

@media (max-width: 767px) {
    .hero-section.hero-with-bg .main-button,
    .hero-section.hero-1 .main-button,
    .explore-button-container {
        margin-top: 20px !important;
    }
    
    .hero-content .hero-text {
        margin-bottom: 8px !important;
    }
}

/* ============================================================================
   END OF POSITIONING FIXES
   ============================================================================ */
   
/* ============================================================================
   ABOUT PAGE - CIRCLE ITEMS BORDER STYLING
   Add this to the END of main.css
   ============================================================================ */

/* Add gradient border to circle items */
.circle-item {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(135deg, #00B4DB 0%, #0083B0 50%, #005F8F 100%) border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
    flex-shrink: 0;
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
	animation: slideIn 2.8s ease forwards;
}

/* Hover effect for circles */
.circle-item:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 131, 176, 0.3);
    border-width: 3px;
}

/* Icon styling inside circles */
.circle-item i {
    font-size: 32px;
    color: #0083B0;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.circle-item:hover i {
    color: #00B4DB;
    transform: scale(1.1);
}

/* Text color inside circles */
.circle-item {
    color: #323c46;
}

/* Make circles more prominent */
.about-list {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .circle-item {
        width: 140px;
        height: 140px;
        padding: 15px;
        border-width: 2px;
    }

    .circle-item i {
        font-size: 26px;
    }

    .circle-item {
        font-size: 13px;
    }
}

/* ============================================================================
   END OF CIRCLE BORDER STYLING
   ============================================================================ */

/* ============================================================================
   MOBILE POPUP MODAL FOR CHALLENGES & OUR EDGE PAGES
   ============================================================================ */

/* Modal backdrop and container - only for mobile */
@media (max-width: 767px) {
    .mobile-popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        animation: fadeIn 0.3s ease;
    }

    .mobile-popup-overlay.active {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .mobile-popup-content {
        background: white;
        border-radius: 16px;
        padding: 30px 25px;
        max-width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.3s ease;
    }

    .mobile-popup-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f44336;
        color: white;
        border: none;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 10;
    }

    .mobile-popup-close:hover {
        background: #d32f2f;
        transform: rotate(90deg);
    }

    .mobile-popup-content h4 {
        margin-bottom: 15px;
        color: #323c46;
        padding-right: 40px;
    }

    .mobile-popup-content p {
        margin-bottom: 12px;
        line-height: 1.6;
    }

    .mobile-popup-content ul {
        margin-top: 15px;
    }

    .mobile-popup-content li {
        margin-bottom: 10px;
    }

    /* Animations */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Hide the inline content display on mobile for both pages */
    .challenge-content-column,
    .edge-content-column {
        display: none !important;
    }

    /* Make challenge title cards clickable on mobile */
    .challenge-title-item,
    .edge-title-item {
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .challenge-title-item:active,
    .edge-title-item:active {
        transform: scale(0.95);
    }
}

/* ============================================================================
   OUR EDGE PAGE - CENTER CARDS ON MOBILE
   ============================================================================ */

@media (max-width: 767px) {
    .edge-title-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .edge-title-item {
        max-width: 100%;
        margin: 0 auto 20px auto;
    }
}

/* ============================================================================
   END OF MOBILE POPUP MODAL STYLES
   ============================================================================ */
   
/* --- Fix for Scrolling and Bottom Gap (Pure CSS) --- */

/* 1. Force the body to be scrollable and prevent ghost height */
html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important; /* Forces vertical scrolling to work */
    height: auto !important;      /* Prevents the page from being locked to a fixed height */
    position: relative;
}

@media (max-width: 991px) {
    /* 2. Remove the element creating the gap below the footer */
    .contact-section::before {
        display: none !important;
        height: 0 !important;
        content: none !important;
    }

    /* 3. Ensure background shapes do not bleed out of the viewport */
    .about-shape-3, 
    .contact-shape, 
    .footer-shape,
    .line-image,
    .arrow-image {
        display: none !important;
    }

    /* 4. Reset padding to ensure the footer stays at the bottom */
    .contact-section, 
    .footer-section,
    .main-footer {
        margin-bottom: 0 !important;
    }
}

/* ============================================================================
   BULLETPROOF FOOTER FIX - WORKS ON ALL DEVICES
   Add this to the VERY END of main.css
   ============================================================================ */

/* 1. Reset body to proper flexbox layout */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 2. Make main content fill available space */
#main-content,
main {
    flex: 1 0 auto;
    width: 100%;
}

/* 3. Footer stays at bottom */
.footer-section,
.footer-bottom,
footer {
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    position: relative;
    z-index: 10;
}

/* 4. MOBILE FIXES - Kill all ghost spaces */
@media (max-width: 991px) {
    /* Reset body height completely */
    html, body {
        height: auto !important;
        min-height: 100vh !important;
    }
    
    body {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Make sure hero section doesn't create extra space */
    .hero-section,
    .hero-1 {
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Remove ghost height from pseudo-elements */
    .hero-section::before,
    .hero-section::after,
    .contact-section::before,
    .about-section::before {
        position: absolute !important;
    }
    
    /* Force footer to bottom with no extra space */
    .footer-section,
    .footer-bottom,
    footer {
        margin-top: auto !important;  
        margin-bottom: 0 !important;
        padding-bottom: 20px !important;
    }
    
    /* Kill mean menu padding */
    .mean-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* 5. iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
}

/* 6. Prevent elastic scroll white space on mobile */
@media (max-width: 767px) {
    html {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    body {
        position: relative;
        overflow-x: hidden;
    }
    
    /* Add padding to last section before footer */
    .hero-section,
    section:last-of-type {
        padding-bottom: 40px;
    }
}

/* ============================================================================
   END OF BULLETPROOF FOOTER FIX
   ============================================================================ */