/*
*
* Default functionality
*
  font-family: 'VisbyCF-Bold';


*/

body::-webkit-scrollbar {
  width: 0.8em;
}

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background: #fff;
}

body::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 25px;
}

::-moz-selection {
  background-color: #000;
  color: #fff;
}

::selection {
  background-color: #000;
  color: #fff;
}

section {
  padding: 80px 0px;
  position: relative;
}

html,
body {
  position: relative;
  overflow-x: hidden;
}

h1,
.h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  display: block;
  color: #3A3A3A;
}

a {
  text-decoration: none;
}

h2,
.h2 {
  font-size: 30px;
  font-weight: 700;
  color: #3A3A3A;
  display: block;
}

h3,
.h3 {
  font-size: 28px;
  font-weight: 600;
  color: #3A3A3A;
  display: block;
}

h4,
.h4 {
  font-size: 24px;
  color: #3A3A3A;
  font-weight: 700;
  display: block;
}

h5,
.h5 {
  font-size: 20px;
  color: #3A3A3A;
  font-weight: 700;
  display: block;
}

h6,
.h6 {
  font-size: 18px;
  display: block;
  color: #818181;
  font-weight: 400;
}

p {
  font-size: 12px;
  color: #3A3A3A;
  letter-spacing: 1px;
}

p a {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

p .no-boder-left {
  border-left: none;
}

p .no-boder-right {
  border-right: none;
}

p .white-highlights {
  color: white;
  text-transform: uppercase;
}

.btn-check:focus+.btn,
.btn:focus {
  box-shadow: none;
}

.google-reviews {
  position: absolute;
  top: 31%;
  right: 0px;
}

.yellow-1 {
  background: #1F365C;
  color: white;
  display: inline-block;
  padding: 0px 10px;
}

ul {
  list-style-type: none !important;
}

ul li {
  font-size: 16px;
  font-weight: 400;
  color: #3A3A3A;
}

.btn-order {
  background: #FFCC00;
  color: black !important;
  border-radius: 30px;
  font-size: 16px;
  border: none;
  padding: 6px 30px;
}

.btn-order:hover,
.btn-order:focus,
.btn-order.active {
  background: #3A3A3A;
  border-color: transparent;
  color: white !important;
  border-color: white !important;
}

.btn-live {
  border: 1px solid #707070;
  font-size: 16px;
  color: #3A3A3A;
  border-radius: 30px;
  padding: 6px 40px;
  font-weight: 500;
}

.btn-live:hover {
  background: #FFCC00 !important;
  color: rgb(0, 0, 0) !important;
  border-color: transparent !important;
}

.hr-line {
  border: 1px solid #242424;
  width: 15%;
  margin: 0px 0px 8px;
}

.hr-blue {
  border: 1px solid #34D4FF;
  width: 30%;
  margin: 20px 0px 30px;
  opacity: 2;
  background: #34d4ff;
}

.number {
  color: #53B6D0;
  font-size: 40px;
  font-weight: 700;
}

.form-control:focus {
  box-shadow: none;
  outline: none;
}

.sitemap {
  padding: 50px 0px;
}

.sitemap .h1 {
  font-weight: 400;
  font-size: 36px;
  font-family: "cerapro";
  color: grey;
}

.sitemap .h2 {
  color: #fff;
  padding: 10px 30px;
  background: #53B6D0;
}

.sitemap ul {
  width: 100%;
  margin: 0;
  padding: 0;
}

.sitemap ul li {
  list-style-type: none;
  padding-left: 0px;
  text-decoration: none;
  display: inline-block;
  line-height: 24px;
  margin-bottom: 30px;
  width: 25%;
}

.sitemap ul li a {
  color: grey;
  font-size: 15px;
}

.sitemap ul li a i {
  margin-right: 5px;
  background: #53B6D0;
  padding: 10px 10px;
  border-radius: 25px;
  color: white;
  border: 1px solid #53B6D0;
}

#notfound {
  position: relative;
  height: 70vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.notfound {
  max-width: 520px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
}

.notfound .notfound-404 {
  position: relative;
  height: 200px;
  margin: 0 auto 20px;
  z-index: -1;
}

.notfound .notfound-404 h1,
.notfound .notfound-404 h2 {
  text-transform: uppercase;
  position: absolute;
}

.notfound .notfound-404 h1 {
  font-size: 236px;
  font-weight: 200;
  margin: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.notfound .notfound-404 h2 {
  font-size: 28px;
  font-weight: 400;
  color: #313233;
  background: #fff;
  padding: 10px 5px;
  margin: auto;
  display: inline-block;
  bottom: 0;
  left: 0;
  right: 0;
}

.notfound a,
.notfound a:hover {
  color: #fff;
  background: #53b6d0;
}

.notfound a {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  padding: 13px 23px;
  font-size: 18px;
  transition: all 0.2s;
}

.form-select:focus {
  box-shadow: none;
  outline: none;
}

.or {
  color: #3A3A3A;
  margin: 0px 5px;
}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */

input[type=number] {
  -moz-appearance: textfield;
}

.opacity-0 {
  opacity: 0 !important;
}

/** 
push auto
**/

/** 
pseudo elements
**/

/** 
responsive ratio
**/

/** 
placeholder
**/

/** 
hardware
**/

/** 
truncate
**/

/** 
transition
**/

/* *** Spacing
This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
It will generate several classes such as:
.m-r-10 which gives margin-right 10 pixels.
.m-r-15 gives MARGIN to the RIGHT 15 pixels.
.m-t-15 gives MARGIN to the TOP 15 pixels and so on.
.p-b-5 gives PADDING to the BOTTOM of 5 pixels
.p-l-40 gives PADDING to the LEFT of 40 pixels
The first letter is "m" or "p" for MARGIN or PADDING
Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT
Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below.
*/

.m-t-0 {
  margin-top: 0px !important;
}

.p-t-0 {
  padding-top: 0px !important;
}

.m-b-0 {
  margin-bottom: 0px !important;
}

.p-b-0 {
  padding-bottom: 0px !important;
}

.m-l-0 {
  margin-left: 0px !important;
}

.p-l-0 {
  padding-left: 0px !important;
}

.m-r-0 {
  margin-right: 0px !important;
}

.p-r-0 {
  padding-right: 0px !important;
}

.m-t-5 {
  margin-top: 5px !important;
}

.p-t-5 {
  padding-top: 5px !important;
}

.m-b-5 {
  margin-bottom: 5px !important;
}

.p-b-5 {
  padding-bottom: 5px !important;
}

.m-l-5 {
  margin-left: 5px !important;
}

.p-l-5 {
  padding-left: 5px !important;
}

.m-r-5 {
  margin-right: 5px !important;
}

.p-r-5 {
  padding-right: 5px !important;
}

.m-t-10 {
  margin-top: 10px !important;
}

.p-t-10 {
  padding-top: 10px !important;
}

.m-b-10 {
  margin-bottom: 10px !important;
}

.p-b-10 {
  padding-bottom: 10px !important;
}

.m-l-10 {
  margin-left: 10px !important;
}

.p-l-10 {
  padding-left: 10px !important;
}

.m-r-10 {
  margin-right: 10px !important;
}

.p-r-10 {
  padding-right: 10px !important;
}

.m-t-15 {
  margin-top: 15px !important;
}

.p-t-15 {
  padding-top: 15px !important;
}

.m-b-15 {
  margin-bottom: 15px !important;
}

.p-b-15 {
  padding-bottom: 15px !important;
}

.m-l-15 {
  margin-left: 15px !important;
}

.p-l-15 {
  padding-left: 15px !important;
}

.m-r-15 {
  margin-right: 15px !important;
}

.p-r-15 {
  padding-right: 15px !important;
}

.m-t-20 {
  margin-top: 20px !important;
}

.p-t-20 {
  padding-top: 20px !important;
}

.m-b-20 {
  margin-bottom: 20px !important;
}

.p-b-20 {
  padding-bottom: 20px !important;
}

.m-l-20 {
  margin-left: 20px !important;
}

.p-l-20 {
  padding-left: 20px !important;
}

.m-r-20 {
  margin-right: 20px !important;
}

.p-r-20 {
  padding-right: 20px !important;
}

.m-t-25 {
  margin-top: 25px !important;
}

.p-t-25 {
  padding-top: 25px !important;
}

.m-b-25 {
  margin-bottom: 25px !important;
}

.p-b-25 {
  padding-bottom: 25px !important;
}

.m-l-25 {
  margin-left: 25px !important;
}

.p-l-25 {
  padding-left: 25px !important;
}

.m-r-25 {
  margin-right: 25px !important;
}

.p-r-25 {
  padding-right: 25px !important;
}

.m-t-30 {
  margin-top: 30px !important;
}

.p-t-30 {
  padding-top: 30px !important;
}

.m-b-30 {
  margin-bottom: 30px !important;
}

.p-b-30 {
  padding-bottom: 30px !important;
}

.m-l-30 {
  margin-left: 30px !important;
}

.p-l-30 {
  padding-left: 30px !important;
}

.m-r-30 {
  margin-right: 30px !important;
}

.p-r-30 {
  padding-right: 30px !important;
}

.m-t-35 {
  margin-top: 35px !important;
}

.p-t-35 {
  padding-top: 35px !important;
}

.m-b-35 {
  margin-bottom: 35px !important;
}

.p-b-35 {
  padding-bottom: 35px !important;
}

.m-l-35 {
  margin-left: 35px !important;
}

.p-l-35 {
  padding-left: 35px !important;
}

.m-r-35 {
  margin-right: 35px !important;
}

.p-r-35 {
  padding-right: 35px !important;
}

.m-t-40 {
  margin-top: 40px !important;
}

.p-t-40 {
  padding-top: 40px !important;
}

.m-b-40 {
  margin-bottom: 40px !important;
}

.p-b-40 {
  padding-bottom: 40px !important;
}

.m-l-40 {
  margin-left: 40px !important;
}

.p-l-40 {
  padding-left: 40px !important;
}

.m-r-40 {
  margin-right: 40px !important;
}

.p-r-40 {
  padding-right: 40px !important;
}

.m-t-45 {
  margin-top: 45px !important;
}

.p-t-45 {
  padding-top: 45px !important;
}

.m-b-45 {
  margin-bottom: 45px !important;
}

.p-b-45 {
  padding-bottom: 45px !important;
}

.m-l-45 {
  margin-left: 45px !important;
}

.p-l-45 {
  padding-left: 45px !important;
}

.m-r-45 {
  margin-right: 45px !important;
}

.p-r-45 {
  padding-right: 45px !important;
}

.m-t-50 {
  margin-top: 50px !important;
}

.p-t-50 {
  padding-top: 50px !important;
}

.m-b-50 {
  margin-bottom: 50px !important;
}

.p-b-50 {
  padding-bottom: 50px !important;
}

.m-l-50 {
  margin-left: 50px !important;
}

.p-l-50 {
  padding-left: 50px !important;
}

.m-r-50 {
  margin-right: 50px !important;
}

.p-r-50 {
  padding-right: 50px !important;
}

.m-t-75 {
  margin-top: 75px !important;
}

.p-t-75 {
  padding-top: 75px !important;
}

.m-b-75 {
  margin-bottom: 75px !important;
}

.p-b-75 {
  padding-bottom: 75px !important;
}

.m-l-75 {
  margin-left: 75px !important;
}

.p-l-75 {
  padding-left: 75px !important;
}

.m-r-75 {
  margin-right: 75px !important;
}

.p-r-75 {
  padding-right: 75px !important;
}

.m-t-100 {
  margin-top: 100px !important;
}

.p-t-100 {
  padding-top: 100px !important;
}

.m-b-100 {
  margin-bottom: 100px !important;
}

.p-b-100 {
  padding-bottom: 100px !important;
}

.m-l-100 {
  margin-left: 100px !important;
}

.p-l-100 {
  padding-left: 100px !important;
}

.m-r-100 {
  margin-right: 100px !important;
}

.p-r-100 {
  padding-right: 100px !important;
}

header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s ease;
}

header.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ecfbff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

header.fixed-top .header-top-bar {
  display: none !important;
}

header .navbar {
  background-color: #ecfbff;
  padding: 10px 0;
  transition: padding 0.3s ease;
}

header .navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0 20px 0 0;
}

header .navbar .header-logo {
  max-height: 70px;
  width: auto;
  object-fit: contain;
  display: block;
}

header .navbar .navbar-collapse {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

/* Upper Row: Contact Details & Social */
header .header-top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 5px;
}

header .header-top-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

header .header-top-list li {
  font-size: 13px;
  line-height: 1;
}

header .header-top-list li a {
  color: #1e293b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

header .header-top-list li a:hover {
  color: #047391;
}

header .header-top-list li i {
  margin-right: 6px;
  font-size: 13px;
  color: #1e293b;
}

header .header-social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}

header .header-social-links a {
  color: #1e293b;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s ease;
}

header .header-social-links a:hover {
  color: #047391;
}

/* Lower Row: Main Navigation */
header .header-main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
}

header .header-main-nav .nav-item {
  display: inline-flex;
  align-items: center;
}

header .header-main-nav .nav-link {
  color: #111827 !important;
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 13px !important;
  margin: 0 !important;
  border-radius: 4px;
  transition: color 0.18s ease;
}

header .header-main-nav .nav-link:hover {
  color: #047391 !important;
}

header .header-main-nav .dropdown-toggle::after {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 0.15em;
  content: "";
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
}

header .navbar .btn-order {
  background: #FFCC00;
  color: #000000 !important;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 22px;
  border: none;
  margin-left: 12px;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
  white-space: nowrap;
}

header .navbar .btn-order:hover {
  background: #3A3A3A;
  color: #ffffff !important;
}

header .navbar .dropdown {
  cursor: pointer;
}

@media (min-width: 992px) {
  header .navbar .dropdown:hover .dropdown-menu {
    display: block !important;
  }
}

@media (max-width: 991px) {
  header .navbar .navbar-collapse {
    background: #ecfbff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    margin-top: 12px;
    align-items: flex-start !important;
  }

  header .header-top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #d0e7ed;
  }

  header .header-top-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  header .header-social-links {
    margin-left: 0;
  }

  header .header-main-nav {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 4px;
  }

  header .header-main-nav .nav-item {
    width: 100%;
  }

  header .header-main-nav .nav-link {
    padding: 8px 0 !important;
    font-size: 15px;
    width: 100%;
  }

  header .navbar .btn-order {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
}

.hero-section {
  background-color: rgba(213, 246, 255, 0.4588235294);
  padding-top: 150px;
}

.hero-section .btn-order {
  font-size: 16px;
}

.hero-section .btn-live {
  font-size: 16px;
  font-weight: 400;
}

.hero-section .client-box {
  border: 2px dashed rgba(201, 201, 201, 0.3490196078);
  margin: 20px 0px;
  padding: 10px;
  position: relative;
  border-radius: 5px;
}

.hero-section .client-box .h4 {
  font-weight: 400;
  font-size: 20px;
}

.hero-section .client-box .rating i {
  color: #348A1D !important;
  font-size: 15px;
}

.hero-section .client-box .rating .e-text {
  display: block;
  font-size: 14px;
  color: #3A3A3A;
  padding: 5px 0px;
  font-weight: 600;
}

.hero-section .h5 {
  position: relative;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 20px;
}

.hero-section .h5::after {
  position: absolute;
  content: "";
  height: 1px;
  width: 50%;
  right: 0%;
  background-color: #C9C9C9;
  top: 0;
  bottom: 0;
  margin: auto;
}

.hero-section .h5::before {
  position: absolute;
  content: "";
  height: 10px;
  width: 2px;
  right: 50%;
  background-color: #C9C9C9;
  top: 0;
  bottom: 0;
  margin: auto;
}

.hero-section .writer-box {
  position: relative;
  border: 1px solid white;
  background: linear-gradient(-25deg, rgba(34, 139, 173, 0.6784313725), #295D8F);
  border-radius: 7px;
  padding: 15px 15px;
  text-align: center;
}

.hero-section .writer-box .hr-line2 {
  width: 98%;
  margin: 18px auto;
}

.hero-section .writer-box .h4 {
  margin: 7px 0px 0px;
  color: #fff;
}

.hero-section .writer-box .writer {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.hero-section .writer-box .rate {
  position: absolute;
  right: 0px;
  top: 9px;
  font-size: 12px;
  background: #ffffff;
  color: black;
  border-radius: 10px 0px 0px 10px;
  padding: 0px 10px;
}

.hero-section .writer-box p {
  font-size: 12px;
  color: #fff;
  height: 140px;
}

.hero-section .writer-box .c-text {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.hero-section .writer-box .c-text i {
  color: #FFCC00;
}

.hero-section .writer-box .circle {
  display: inline-block;
  margin-top: 10px;
  color: #3A3A3A;
  background: #ffcc00;
  font-family: "Gza";
  font-size: 10px;
  border-radius: 20px;
  padding: 5px 12px;
}

.hero-section .writer-box .btn-live {
  background: #ffcc00;
  padding: 5px 30px;
}

.hero-section .writer-slider {
  overflow: hidden;
  position: relative;
  padding-right: 10px;
}

.hero-section .left-arrow {
  position: absolute;
  top: 40%;
  right: 0px;
  color: rgb(0, 0, 0);
  background: #ffffff;
  z-index: 1;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  display: flex;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid;
}

.google-brand {
  background-color: #D5F6FF;
  padding: 30px 0px;
}

.google-brand .brand {
  overflow: hidden;
  height: 100%;
}

.google-brand .brand .swiper-slide {
  display: flex;
  align-items: center;
}

.google-brand .brand .swiper-slide img {
  margin: auto;
  display: block;
}

.gurantee {
  background-color: #fff;
}

.gurantee ul li {
  line-height: 30px;
}

.gurantee ul li i {
  color: #000000;
  font-size: 12px;
  margin-right: 10px;
}

.gurantee .professional-box .btn-order {
  background: transparent;
  color: #3A3A3A !important;
  padding: 0px 0px;
  text-decoration: underline;
  font-weight: 500;
}

.show-piece {
  background: #e8fdff;
}

.best-seller {
  background-color: #d5f6ff;
  padding: 30px 0;
}

.our-book .col-12.col-sm-12.col-md-4.col-lg-4.col-xl-4 p {
  padding: 0 60px 0 0;
}

.show-piece {
  background: linear-gradient(90deg, #d5f6ff 50%, #e8fdff 50%);
}

.show-piece .left-service {
  padding: 30px 10px;
}

.show-piece .left-service .writer-box {
  position: relative;
  border: 1px solid white;
  background: linear-gradient(-25deg, rgba(34, 139, 173, 0.6784313725), #295D8F);
  border-radius: 7px;
  padding: 15px 15px;
  text-align: center;
}

.show-piece .left-service .writer-box .hr-line2 {
  width: 98%;
  margin: 18px auto;
}

.show-piece .left-service .writer-box .h4 {
  margin: 7px 0px 0px;
  color: #fff;
}

.show-piece .left-service .writer-box .writer {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.show-piece .left-service .writer-box .rate {
  position: absolute;
  right: 0px;
  top: 9px;
  font-size: 12px;
  background: #ffffff;
  color: black;
  border-radius: 10px 0px 0px 10px;
  padding: 0px 10px;
}

.show-piece .left-service .writer-box p {
  font-size: 14px;
  color: #fff;
  height: 190px;
}

.show-piece .left-service .writer-box .c-text {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.show-piece .left-service .writer-box .c-text i {
  color: #FFCC00;
}

.show-piece .left-service .writer-box .circle {
  display: inline-block;
  margin-top: 10px;
  color: #3A3A3A;
  background: #ffcc00;
  font-family: "Gza";
  font-size: 10px;
  border-radius: 20px;
  padding: 5px 12px;
}

.show-piece .left-service .writer-box .btn-live {
  background: #ffcc00;
  padding: 5px 30px;
}

.show-piece .left-service .writer-slider {
  overflow: hidden;
  position: relative;
}

.show-piece .left-service .writer-slider .client-pagination {
  text-align: center;
}

.show-piece .left-service .writer-slider .client-pagination .swiper-pagination-bullet {
  background: #047391;
  margin: 0px 2px;
}

.show-piece .left-service .writer-slider .client-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 35px;
  border-radius: 10px;
}

.show-piece .left-service .writer-slider .right-arrow {
  color: #D4E3D4;
  position: absolute;
  left: 38%;
}

.show-piece .left-service .writer-slider .left-arrow {
  color: #D4E3D4;
  position: absolute;
  left: 59%;
}

.show-piece .right-service {
  padding: 30px 10px;
}

.show-piece .right-service .creations-slider {
  overflow: hidden;
}

.show-piece .right-service .img1 {
  height: 440px;
  margin-left: 10px;
}

.show-piece .right-service .client-pagination {
  text-align: center;
}

.show-piece .right-service .client-pagination .swiper-pagination-bullet {
  background: #047391;
  margin: 0px 2px;
}

.show-piece .right-service .client-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 35px;
  border-radius: 10px;
}

.show-piece .right-service .right-arrow1 {
  color: #D4E3D4;
  position: absolute;
  left: 30%;
}

.show-piece .right-service .left-arrow1 {
  color: #D4E3D4;
  position: absolute;
  left: 67%;
}

.our-customer {
  background: #fff;
}

.our-customer .customer-box {
  position: relative;
  text-align: center;
  margin: 30px 0px;
}

.our-customer .customer-box::after {
  background: url(/assets/images/simple/quotes.png) no-repeat;
  position: absolute;
  content: "";
  width: 251px;
  height: 167px;
  left: 38%;
  top: 5%;
  z-index: -1;
}

.our-customer .customer-box .h3 {
  color: #000000;
  background: #d5f6ff;
  border-radius: 50%;
  border: 0;
  height: 80px;
  align-items: center;
  justify-content: center;
  width: 80px;
  display: flex;
  box-shadow: 0px 0px 10px 0px rgba(128, 128, 128, 0.4196078431);
  font-weight: 700;
}

.our-customer .customer-box .customer {
  display: block;
  color: #000000;
  font-weight: 700;
  font-size: 20px;
}

.our-customer .customer-box .service {
  line-height: 12px;
  color: #3A3A3A;
  font-size: 12px;
  display: block;
  font-weight: 700;
}

.our-customer .customer-slider {
  overflow: hidden;
}

.our-customer .client-pagination {
  text-align: center;
}

.our-customer .client-pagination .swiper-pagination-bullet {
  background: #047391;
  margin: 0px 2px;
}

.our-customer .client-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 35px;
  border-radius: 10px;
}

.our-customer .right-arrow2 {
  color: #D4E3D4;
  position: absolute;
  left: 38%;
}

.our-customer .left-arrow2 {
  color: #D4E3D4;
  position: absolute;
  left: 59%;
}

.faq {
  background-color: #D5F6FF;
}

.faq .btn-order {
  font-weight: 700;
  background: transparent;
  color: #00c8ff !important;
  padding: 0px 0px;
  text-decoration: underline;
}

.our-expert {
  background-color: #fff;
}

section.about-bg {
  background: rgba(213, 246, 255, 0.4588235294);
  padding-top: 150px;
}

.our-journey {
  background-color: #fff;
}

.our-team {
  background-color: #fff;
}

.our-team .team-box {
  position: relative;
  margin-top: 30px;
}

.our-team .team-box img {
  width: 100%;
  height: 350px;
}

.our-team .team-box .box1 {
  position: absolute;
  background: #34d4ff;
  padding: 10px 30px;
  bottom: 0%;
  border-radius: 7px 7px 0px 0px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 70%;
}

.our-team .team-box .customer {
  display: block;
  font-weight: 700;
  color: rgb(0, 0, 0);
  letter-spacing: 1px;
}

.our-team .team-box .e-text {
  display: block;
  font-weight: 300;
  color: rgb(0, 0, 0);
  font-size: 12px;
}

.our-team .team-slider {
  overflow: hidden;
}

.our-team .team-slider .client-pagination {
  text-align: center;
}

.our-team .team-slider .client-pagination .swiper-pagination-bullet {
  background: #047391;
  margin: 0px 2px;
}

.our-team .team-slider .client-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 35px;
  border-radius: 10px;
}

.our-team .team-slider .right-arrow3 {
  color: #D4E3D4;
  position: absolute;
  left: 38%;
}

.our-team .team-slider .left-arrow3 {
  color: #D4E3D4;
  position: absolute;
  left: 59%;
}

.facts {
  background-color: #d5f6ff;
  padding: 50px 0;
}

.facts .fac-box {
  position: relative;
  text-align: center;
}

.facts .fac-box img {
  height: 90px;
  margin-bottom: 10px;
}

.facts .fac-box.box2 {
  border-right: 2px solid white;
}

.facts .fac-box .e-text {
  font-size: 20px;
  color: #3A3A3A;
}

.facts .fac-box span.h3 {
  font-size: 50px;
}

.service-bg {
  background-color: #e8fdff;
  padding-top: 150px;
}

.professional-expert .service-form {
  position: relative;
  background: white;
  border-radius: 7px;
  box-shadow: 0px 0px 5px 0px rgba(128, 128, 128, 0.2784313725);
  padding: 15px 40px;
}

.professional-expert .service-form .h3 {
  text-align: center;
}

.professional-expert .service-form .green {
  color: #34D4FF;
  font-weight: 700;
}

.professional-expert .service-form .form-control {
  border: none;
  border-bottom: 1px solid #c9c9c9;
  border-radius: unset;
  padding: 25px 0px 5px !important;
  font-size: 14px;
}

.professional-expert ::-moz-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(58, 58, 58, 0.7490196078);
}

.professional-expert ::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgba(58, 58, 58, 0.7490196078);
}

.professional-expert :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(58, 58, 58, 0.7490196078);
}

.professional-expert ::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgba(58, 58, 58, 0.7490196078);
}

.you-get ul li {
  letter-spacing: 1px;
  font-size: 16px;
  margin-bottom: 20px;
  text-indent: -15px;
}

.you-get ul li i {
  color: #34d4ff;
  margin-right: 10px;
}

.you-get .btn-order {
  padding: 10px 30px !important;
}

.you-get .btn-live {
  padding: 10px 20px !important;
}

.what-you-get .you-box {
  position: relative;
  text-align: center;
}

.order-ebook {
  background-color: #fbfbfb;
}

.order-ebook .box {
  padding: 50px 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.16);
  background: #e8fdff;
}

.order-ebook .box p {
  font-size: 14px;
}

.order-ebook .box .form-group .file-upload {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

.order-ebook .box .form-group .file-upload__label {
  display: block;
  padding: 1em 2em;
  color: #6d7e7e;
  background: transparent;
  border: 1px dashed #acacac;
  border-radius: 0.4em;
  transition: all 0.5s ease;
}

.order-ebook .box .form-group .file-upload__label:hover {
  cursor: pointer;
  background: red;
  color: #fff;
  transition: all 0.5s ease;
}

.order-ebook .box .form-group .file-upload__label i {
  position: relative;
  font-size: 40px;
  color: #cec7c7;
  margin-right: 10px;
  float: left;
  top: 10px;
}

.order-ebook .box .form-group .file-upload__input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  font-size: 1;
  width: 0;
  height: 100%;
  opacity: 0;
}

.order-ebook .box .form-group label {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
}

.order-ebook .box .form-group label span {
  color: red;
}

.order-ebook .box .form-group .form-control {
  height: 50px;
  border: 0px;
  background-color: #ebebeb;
  border-radius: 10px;
  margin-bottom: 20px;
}

.order-ebook .box .h3 {
  font-size: 20px;
  color: #223644;
  font-weight: 800;
  padding-top: 20px;
}

.order-ebook .box .pro {
  font-weight: 300;
  font-size: 17px;
  color: #003333;
  display: block;
}

.order-ebook .box .dollar {
  font-size: 60px;
  color: #ffcc00;
  font-weight: 800;
}

.pricing-bg {
  background-color: #E8FDFF;
  padding-top: 150px;
}

.pricing-bg .box {
  background: rgba(255, 255, 255, 0.2784313725);
  padding: 20px 10px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0px #e9e9e9;
}

.pricing-bg .box .form-control {
  border-radius: 10px;
  background: transparent;
}

.pricing-bg .box .estimate-text {
  padding: 20px 0;
  display: block;
}

.pricing-bg .box .zero-text {
  font-size: 30px;
  font-weight: 700;
  text-align: right;
  display: block;
  color: #ffcc00;
  text-shadow: 0px 1px 2px #3a3a3a;
  padding: 10px 0;
}

.pricing-bg .box .btn-order {
  margin-left: auto;
  margin-right: 0;
  display: block;
  margin-top: 20px;
}

.pricing-bg .img-box {
  margin-top: 30px;
}

.pricing-bg .img-box img {
  margin: 0px 15px 0px 0px;
}

.our-services .h2 {
  text-align: center;
  margin-bottom: 30px;
}

.our-services .box {
  border: 2px solid #d5f6ff;
  border-radius: 20px;
  padding: 20px 30px;
  text-align: center;
  background: #e8fdff;
  margin: 20px 0;
}

.our-services .box .h3 {
  margin-bottom: 30px;
  font-weight: 700;
  background: linear-gradient(to right, #2a5188, #228fb0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.our-services .box ul {
  padding: 0;
}

.our-services .box ul li {
  margin: 10px 0;
  border-bottom: 1px dashed;
  padding: 10px 0 5px;
}

.our-services .box .dollar {
  display: block;
  margin: 40px 0 20px;
  font-size: 50px;
  font-weight: 700;
  background: linear-gradient(to right, #2a5188, #228fb0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-us {
  padding-top: 150px;
  background: #ecfbff;
}

.contact-us ul {
  padding: 0px 0px;
}

.contact-us ul li {
  background: #ECECEC;
  padding: 10px;
  margin: 10px 0px;
}

.contact-us ul li a {
  color: #3A3A3A;
}

.contact-us .btn-order {
  font-size: 20px;
  padding: 6px 50px;
}

.contact-us .form-group {
  margin-bottom: 20px;
}

.contact-us .form-group input,
.contact-us .form-group textarea {
  background-color: #ececec !important;
  border-radius: 10px;
  border: 0px;
  padding: 12px 20px;
}

.faqs-bg {
  background-color: #E8FDFF;
  padding-top: 150px;
}

.faqs ul {
  padding: 0px 0px;
}

.faqs ul li {
  line-height: 30px;
}

.testimonials-bg {
  background-color: #e8fdff;
  padding-top: 150px;
}

.testimonials .testimonials-box {
  position: relative;
  margin: 30px 0px;
}

.testimonials .testimonials-box::after {
  background: url(/frontend/images/icons/quote1.png) no-repeat;
  position: absolute;
  content: "";
  width: 172px;
  height: 70px;
  top: 25%;
  left: 10%;
  filter: grayscale(1);
  background-size: contain;
}

.testimonials .testimonials-box .h3 {
  color: #000000;
  font-size: 24px;
  background: #d5f6ff;
  border-radius: 60px;
  height: 80px;
  align-items: center;
  justify-content: center;
  width: 80px;
  display: flex;
  box-shadow: 0px 0px 5px 0px grey;
  font-weight: 700;
}

.testimonials .testimonials-box .customer {
  display: block;
  color: #34d4ff;
  font-weight: 600;
  font-size: 20px;
}

.testimonials .testimonials-box .service {
  line-height: 12px;
  color: #000000;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 700;
}

.sitemap {
  padding: 150px 0px 70px;
}

.sitemap .h1 {
  font-weight: 500;
  font-size: 36px;
  color: #ffcc00;
}

.sitemap .h2 {
  color: #3A3A3A;
  padding: 10px 30px;
  background: #E8FDFF;
}

.sitemap ul {
  width: 100%;
  margin: 0;
  padding: 0;
}

.sitemap ul li {
  float: left;
  list-style-type: none;
  padding-left: 0px;
  text-decoration: none;
  display: inline-block;
  line-height: 24px;
  margin-bottom: 30px;
  width: 25%;
}

.sitemap ul li a {
  color: grey;
  font-size: 15px;
}

.sitemap ul li a i {
  margin-right: 5px;
  background: #00c8ff;
  padding: 10px 10px;
  border-radius: 25px;
  color: #e8fdff;
  border: 1px solid #E8FDFF;
}

@media only screen and (max-width: 768px) {
  .sitemap ul li {
    width: 50%;
  }
}

@media only screen and (max-width: 480px) {
  .sitemap ul li {
    width: 50%;
  }
}

.checkout {
  padding: 180px 0px 70px;
}

.checkout .e-text {
  color: rgba(51, 51, 51, 0.8117647059);
}

.checkout .hr-blue {
  margin: 20px auto;
}

.checkout .h5 {
  font-size: 18px;
}

.checkout .card-footer {
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.checkout .h3 {
  display: inline;
  color: #34d4ff;
  font-size: 21px;
  margin: 0px 10px;
  font-weight: 600;
}

.checkout .h6 {
  display: inline;
}

.checkout .cards {
  text-align: center;
  text-align: center;
  box-shadow: 0px 0px 10px 0px #d3d3d3;
  padding: 40px 30px;
  margin-bottom: 50px;
  border-radius: 10px;
  background: #fff;
}

.checkout .cards .card-body .row {
  margin-bottom: 10px;
}

.checkout .cards .h4 {
  text-align: center;
  font-size: 20px;
  color: white;
  background: #17B9C8;
  display: inline-block;
  padding: 5px 174px;
}

.checkout .cards .h5 {
  display: inline-block;
  color: #1C2042;
  font-weight: 500;
  font-size: 18px;
}

.checkout .cards .e-text {
  color: rgba(28, 32, 66, 0.6392156863);
  display: block;
  text-align: left;
}

.checkout .cards .card-footer {
  background-color: transparent;
  text-align: center;
}

.checkout .cards .currency {
  color: #1c2042;
  font-family: "Overpass";
  font-weight: 500;
  display: block;
  padding: 10px 0px;
  font-size: 14px;
}

.checkout .cards .h3 {
  font-size: 40px;
  margin: 0px 0px 0px;
  font-weight: 700;
}

.checkout .cards .h6 {
  font-size: 18px;
  font-weight: 400;
  color: rgba(0, 51, 51, 0.4196078431);
  padding: 0px !important;
  margin: 0px 0px 0px;
}

.checkout .cards s {
  color: rgba(0, 51, 51, 0.8784313725);
  font-size: 12px;
}

.checkout form {
  transform: translate(0px, 50px);
}

.checkout form h2 {
  text-align: center;
  margin-bottom: 30px;
}

.checkout form input {
  outline: 0;
  width: 100%;
  border-radius: 10px;
  margin: 10px 0;
  padding: 15px 10px;
  border: 1px solid lightgrey;
  box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.1411764706);
}

.checkout form .btn-order {
  width: 100%;
  border-radius: 10px;
  margin: 0;
  margin-top: 10px;
  height: 55px;
  font-size: 22px;
  font-weight: 500;
  background: linear-gradient(to right, #ffae01, #fec03d);
  border-color: #ffbc30;
  color: white;
}

.checkout form .col-md-6.rem-padd {
  display: flex;
}

.checkout form .col-md-6.rem-padd input {
  border-radius: 0;
}

.checkout form .col-md-6.rem-padd input.month-field {
  border-radius: 10px 0px 0px 10px !important;
  border-right: 0 !important;
}

.checkout form .col-md-6.rem-padd input.year-field {
  border-radius: 0px 10px 10px 0px !important;
  border-left: 0 !important;
}

.footer {
  background: #3A3A3A;
}

.footer p {
  color: white;
}

.footer .h4 {
  color: #FFFFFF;
  margin-top: 20px;
}

.footer .hr-blue {
  border: 1px solid #ffffff;
}

.footer .hr-line1 {
  width: 100%;
  margin: 10px 0px 0px;
  background: #5a5a5a;
  opacity: 1;
  border: 1px solid #5a5a5a !important;
}

.footer .t-text {
  font-size: 14px;
  color: #FFFFFF;
}

.footer ul {
  padding: 0px 0px;
  margin-top: 20px;
}

.footer ul li {
  font-size: 16px;
  line-height: 35px;
  font-weight: 500;
}

.footer ul li a {
  color: #EBEBEB;
}

.footer .social-links {
  align-items: center;
  display: flex;
}

.footer .social-links i {
  margin: 0px 10px;
  color: #EBEBEB;
}

.footer .social-icons i {
  background: white;
  color: #0D4B5B;
  height: 30px;
  width: 30px;
  border-radius: 20px;
  padding: 8px;
  margin: 0px 7px;
}

@media (max-width: 576px) {
  .or {
    text-align: center;
    display: block;
    margin: 10px 0px;
  }

  .hero-section .h5::after {
    display: none;
  }

  .hr-line {
    display: none;
  }

  .hero-section .left-arrow {
    display: none !important;
  }

  .hero-section .writer-box .circle {
    padding: 5px 18px !important;
  }

  .gurantee .professional-box {
    text-align: center;
    margin: 20px 0px;
  }

  .best-seller .h2 {
    margin: 20px 0px;
  }

  .show-piece .left-service .writer-slider .left-arrow {
    display: none;
  }

  .show-piece .left-service .writer-slider .right-arrow {
    display: none;
  }

  .show-piece .left-service .writer-slider .client-pagination {
    display: none;
  }

  .show-piece .right-service .left-arrow1 {
    left: 74% !important;
  }

  .show-piece .right-service .right-arrow1 {
    left: 23% !important;
  }

  .our-customer .left-arrow2 {
    left: 63% !important;
  }

  .our-customer .right-arrow2 {
    left: 32% !important;
  }

  br {
    display: none;
  }

  .best-seller {
    text-align: center;
  }

  .our-book {
    text-align: center;
  }

  .our-journey {
    text-align: center;
  }

  .our-journey img {
    margin-top: 20px;
  }

  .facts .fac-box.box2 {
    margin: 40px 0px;
  }

  .professional-expert .service-form {
    margin: 30px 0px;
  }

  .our-services .h2 {
    margin-top: 30px;
  }

  .testimonials .testimonials-box::after {
    display: none;
  }

  .testimonials .testimonials-box {
    text-align: center;
  }

  .contact-us .h2 {
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .btn-live {
    display: block;
  }

  .btn-order {
    display: block;
    margin-bottom: 30px;
  }

  section.hero-section {
    text-align: center;
  }

  .hr-blue {
    display: none;
  }

  section.hero-section .h5::after {
    display: none;
  }

  section.gurantee {
    text-align: center;
  }

  section.show-piece {
    text-align: center;
  }

  section.faq {
    text-align: center;
  }

  section.our-services {
    text-align: center;
  }

  section.our-services .btn-order {
    margin: 0 auto;
  }

  .pricing-bg .h2,
  .pricing-bg p {
    text-align: center;
  }

  section.contact-us .h2,
  section.contact-us p {
    text-align: center;
  }

  section.contact-us ul li {
    text-align: center;
  }

  section.professional-expert {
    text-align: center;
  }

  section.you-get .h2,
  section.you-get p {
    text-align: center;
  }

  section.faq {
    text-align: center;
  }

  .footer img.img-fluid {
    margin: 20px auto 30px !important;
    display: block !important;
  }

  .footer .hr-line1 {
    width: 100%;
    margin: 10px 0px 8px;
  }

  .footer .t-text {
    text-align: center !important;
    display: block !important;
  }

  .our-team .team-slider .right-arrow3 {
    left: 10%;
  }

  .our-team .team-slider .left-arrow3 {
    left: 85%;
  }

  .checkout .cards .card-body span {
    text-align: center !important;
  }

  .checkout form {
    transform: translate(0px, 30px);
  }
}

@media (max-width: 992px) {
  .navbar .nav1 {
    display: none !important;
  }

  .navbar .nav2 {
    width: 100% !important;
  }

  .navbar-light .navbar-toggler {
    border: 0;
    outline: 0;
    box-shadow: none;
  }

  header .navbar .navbar-collapse {
    position: absolute;
    background: #ecfbff;
    left: 0;
    width: 80%;
    top: 0;
    height: 100vh;
    box-shadow: 0px 0px 10px 0px #c3c3c3;
    padding: 80px 20px;
  }

  header .navbar .navbar-brand img {
    transform: translate(0px, 5px);
  }

  .our-book .col-12.col-sm-12.col-md-4.col-lg-4.col-xl-4 p {
    padding: 0 0px 20px 0;
  }

  .checkout {
    padding: 120px 0px 70px;
  }

  .checkout form {
    padding: 0 10px 30px;
  }
}

@media (min-width: 992px) {
  /* .fixed-top img {
    position: relative;
    top: -15px;
  } */

  .fixed-top .nav1 {
    display: none !important;
  }

  .fixed-top .hr-line {
    display: none;
  }

  .fixed-top .nav2 {
    top: -50px;
    position: absolute;
    right: 0;
  }
}

.modal-backdrop {
  z-index: 1 !important;
}

.modal-open .modal {
  overflow: hidden;
}

.onload-popup {
  background: rgba(0, 0, 0, 0.639);
}

.onload-popup.active-popup {
  display: block;
}

.onload-popup.active-popup.fade:not(.show) {
  opacity: 1;
}

.onload-popup .modal-dialog {
  max-width: 800px;
}

.onload-popup .modal-dialog .bg-banner {
  padding: 20px;
  border-radius: 20px;
  background: url(/frontend/images/sample/popup-bg.webp) no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 550px;
}

.onload-popup .modal-dialog .modal-content {
  background: transparent;
  border: 5px solid #FFCC00;
  padding: 20px;
}

.onload-popup .modal-dialog .modal-content .modal-header {
  position: absolute;
  right: -30px;
  background: #FFCC00;
  border: 0;
  border-radius: 40px;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center !important;
  top: -30px;
}

.onload-popup .modal-dialog .modal-content .modal-header button {
  filter: invert(1);
  padding: 0;
  opacity: 1;
  margin: 0 auto;
  width: 20px !important;
  height: 20px !important;
  font-size: 30px;
}

.onload-popup .modal-dialog .modal-content .modal-body {
  padding: 5px 10px;
}

.onload-popup .modal-dialog .modal-content .modal-body .h1 {
  bottom: 0;
  color: #fff;
  display: table;
  font-size: 45px;
  margin-left: auto;
  position: relative;
  right: 0px;
  top: 90px;
  font-family: "cerapro";
}

.onload-popup .modal-dialog .modal-content .modal-body .h1 .heading-two {
  color: #FFCC00;
  font-weight: bold;
  margin: 0;
  font-family: "cerapro";
  line-height: 1;
}

.onload-popup .modal-dialog .modal-content .modal-body .h1 .heading-three {
  margin-right: 30px;
  text-align: end;
}

.onload-popup .modal-dialog .modal-content .modal-body .h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 0;
}

.onload-popup .modal-dialog .modal-content .modal-body .h3 .orange-highlight {
  color: #FFCC00;
  display: block;
  font-size: 30px;
  text-indent: -5px;
}

.onload-popup .modal-dialog .modal-content .modal-body .form-control {
  margin: 10px 0 0;
}

.onload-popup .modal-dialog .modal-content .modal-body input {
  height: 45px;
}

.onload-popup .modal-dialog .modal-content .modal-body .btn-order {
  background: #FFCC00;
  border-radius: 2px !important;
  color: #fff !important;
  display: block;
  font-size: 18px !important;
  height: 45px;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.onload-popup .modal-dialog .modal-content .modal-body p {
  color: #fff;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
}

.onload-popup .modal-dialog .modal-content img {
  position: absolute;
  left: -150px;
  top: 20px;
  border: 0;
  filter: drop-shadow(0px 10px 10px #333);
  width: 510px;
  bottom: 0px;
}

/* ==========================================================================
   MEGA MENU & SERVICES NAVIGATION STYLES
   ========================================================================== */
@media (min-width: 992px) {
  header .navbar .container {
    position: relative !important;
  }

  header .navbar .navbar-collapse .has-megamenu {
    position: static !important;
  }

  header .navbar .navbar-collapse .dropdown:hover .services-mega-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .services-mega-menu {
    position: absolute !important;
    left: 15px !important;
    right: 15px !important;
    top: 100% !important;
    width: calc(100% - 30px) !important;
    max-width: 1260px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    border: 1px solid #c9ecf7 !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 45px rgba(8, 48, 68, 0.16) !important;
    padding: 24px 26px 16px !important;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.25s ease-in-out;
    z-index: 1050 !important;
    overflow: visible !important;
  }
}

.services-mega-menu .mega-col-title {
  font-size: 14px;
  font-weight: 700;
  color: #0b4958;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e1f4f9;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.services-mega-menu .mega-col-title i {
  color: #1aa3c8;
  font-size: 15px;
}

.services-mega-menu .mega-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.services-mega-menu .mega-link-list li {
  margin-bottom: 3px;
}

.services-mega-menu .mega-link-list li a {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #2b3940;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.18s ease;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.services-mega-menu .mega-link-list li a:hover {
  background: #eef9fc;
  color: #0d4b5b !important;
  transform: translateX(4px);
  font-weight: 600;
}

.services-mega-menu .mega-bottom-cta {
  background: linear-gradient(90deg, #edf8fb 0%, #f4fbfe 100%);
  border-radius: 8px;
  padding: 10px 18px;
  margin-top: 14px;
  border: 1px solid #d5eff7;
}

@media (max-width: 991.98px) {
  .services-mega-menu {
    width: 100% !important;
    max-height: 480px;
    overflow-y: auto;
    border-radius: 8px !important;
    padding: 15px !important;
    background: #ffffff !important;
  }

  .services-mega-menu .mega-col-title {
    margin-top: 15px;
  }

  .services-mega-menu .mega-link-list li a {
    white-space: normal;
  }
}

/* ==========================================================================
/* ==========================================================================
   FOOTER ENHANCEMENTS - THEME COLOR (#34D4FF) ACCENTS
   ========================================================================== */
.footer {
  background: #1a202c !important;
  color: #94a3b8;
  font-family: inherit;
  border-top: 1px solid #2d3748;
}

.footer .footer-heading {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  display: inline-block;
  letter-spacing: 0.2px;
}

.footer .footer-theme-bar {
  width: 32px;
  height: 2.5px;
  background-color: #34d4ff;
  margin-top: 6px;
  margin-bottom: 14px;
  border-radius: 2px;
}

.footer .footer-desc {
  font-size: 13.5px;
  line-height: 22px;
  color: #94a3b8;
  margin-bottom: 18px;
}

.footer .footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.footer .footer-contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 11px;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 20px;
}

.footer .footer-contact-item i {
  color: #34d4ff;
  font-size: 14px;
  width: 20px;
  margin-top: 3px;
  margin-right: 8px;
  flex-shrink: 0;
  text-align: center;
}

.footer .footer-contact-item a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer .footer-contact-item a:hover {
  color: #34d4ff;
}

.footer .footer-social-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer .footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #242c38;
  border: 1px solid #333f50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.25s ease;
}

.footer .footer-social-btn:hover {
  background: #34d4ff;
  border-color: #34d4ff;
  color: #0b0e14;
  transform: translateY(-2px);
}

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

.footer .footer-link-list li {
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 20px;
}

.footer .footer-link-list li a {
  color: #cbd5e1 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  transition: all 0.18s ease;
}

.footer .footer-link-list li a:hover {
  color: #34d4ff !important;
  transform: translateX(3px);
}

.footer .footer-chevron {
  color: #34d4ff;
  font-weight: 700;
  font-size: 14px;
  margin-right: 6px;
  display: inline-block;
  user-select: none;
  line-height: 1;
}

.footer .footer-quick-links li {
  margin-bottom: 6px;
}

.footer .footer-top-row {
  border-bottom: 1px solid #2d3748;
}

.footer .footer-bottom-bar {
  border-top: 1px solid #2d3748;
  padding-top: 18px;
  margin-top: 25px;
  font-size: 13px;
  color: #64748b;
}

.footer .footer-bottom-bar a {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer .footer-bottom-bar a:hover {
  color: #34d4ff;
}

.professional-expert {
  background: rgb(4 168 228 / 30%);
  padding-top: 190px;
  padding-bottom: 70px;
}

/* ============================================================
   MODERN HOMEPAGE COMPONENT STYLES (MATCHING REFERENCE LAYOUT)
   ============================================================ */

.hero-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(52, 212, 255, 0.15);
  color: #047391;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 14px;
  border-radius: 50px;
  border: 1px solid rgba(52, 212, 255, 0.4);
  margin-bottom: 18px;
}

.section-tag-badge {
  display: inline-block;
  background: rgba(52, 212, 255, 0.12);
  color: #047391;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 5px 14px;
  border-radius: 50px;
  border: 1px solid rgba(52, 212, 255, 0.3);
  margin-bottom: 12px;
}

/* Modern Lead Capture Form Card */
.professional-expert .modern-service-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}

.modern-service-card .service-form-header .h3 {
  color: #111827 !important;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.modern-service-card .service-form-header .hr-blue {
  width: 50px;
  height: 3px;
  background: #34d4ff;
  border: none;
  margin: 0 auto 20px;
}

.modern-service-card .form-control {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #1e293b;
  transition: all 0.2s ease;
  height: auto;
}

.modern-service-card .form-control:focus {
  background: #ffffff;
  border-color: #34d4ff;
  box-shadow: 0 0 0 3px rgba(52, 212, 255, 0.2);
  outline: none;
}

.modern-service-card .form-control::placeholder {
  color: #94a3b8;
}

.modern-service-card .btn-order {
  border-radius: 50px;
  font-weight: 600;
  padding: 12px 24px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}

.professional-expert .client-box_home {
  background: #ffffff;
  border: 1px solid rgba(52, 212, 255, 0.35);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

/* Feature Pills Grid (Under One Roof) */
.feature-pills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0;
}

@media (max-width: 767px) {
  .feature-pills-grid {
    grid-template-columns: 1fr;
  }
}

.feature-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.feature-pill:hover {
  border-color: #34d4ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 212, 255, 0.15);
}

.feature-pill i {
  color: #10b981;
  font-size: 16px;
  flex-shrink: 0;
}

/* Horizontal Feature Cards */
.modern-feature-horizontal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  height: 100%;
  transition: all 0.25s ease;
}

.modern-feature-horizontal-card:hover {
  border-color: #34d4ff;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(52, 212, 255, 0.12);
}

.modern-feature-horizontal-card .card-icon-round {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #ecfbff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.modern-feature-horizontal-card .card-icon-round img {
  max-width: 32px;
  max-height: 32px;
}

.modern-feature-horizontal-card .h5 {
  color: #111827;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.modern-feature-horizontal-card p {
  color: #4b5563;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

/* Highlight Banner Card (Deliver Real Commercial Results) */
.highlight-banner-container {
  background: linear-gradient(135deg, #ecfbff 0%, #f0f9ff 100%);
  border: 1px solid rgba(52, 212, 255, 0.35);
  border-radius: 24px;
  padding: 45px 35px;
  box-shadow: 0 12px 35px rgba(52, 212, 255, 0.1);
}

.highlight-tag-badge {
  display: inline-block;
  background: #ffffff;
  color: #047391;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 5px 14px;
  border-radius: 50px;
  border: 1px solid rgba(52, 212, 255, 0.4);
  margin-bottom: 14px;
}

.stat-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  flex: 1;
}

.stat-pill .stat-number {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #047391;
}

.stat-pill .stat-label {
  display: block;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
}

/* Modern Process Cards (01, 02, 03) */
.modern-process-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 35px 25px 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modern-process-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(52, 212, 255, 0.15);
  border-color: #34d4ff;
}

.modern-process-card.featured-card {
  border-color: #34d4ff;
  box-shadow: 0 12px 30px rgba(52, 212, 255, 0.12);
}

.modern-process-card .featured-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #34d4ff;
  color: #0d2237;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: 3px 14px;
  border-radius: 20px;
  text-transform: uppercase;
}

.modern-process-card .step-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 26px;
  font-weight: 800;
  color: #cbd5e1;
  line-height: 1;
}

.modern-process-card .icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ecfbff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.modern-process-card .icon-wrapper img {
  max-width: 36px;
  max-height: 36px;
}

.modern-process-card .h5 {
  color: #111827;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.modern-process-card p {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Modern Book Cards */
.modern-book-card {
  position: relative;
  padding: 8px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.modern-book-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 30px rgba(52, 212, 255, 0.25);
}

.modern-book-card img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  display: block;
}

/* Modern Testimonials */
.modern-testimonial-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 30px 24px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  height: 100%;
  text-align: center;
  transition: all 0.25s ease;
}

.modern-testimonial-card:hover {
  border-color: #34d4ff;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(52, 212, 255, 0.12);
}

.testimonial-avatar-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #34d4ff 0%, #047391 100%);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 12px rgba(52, 212, 255, 0.3);
}

.modern-testimonial-card .rating-stars {
  color: #ffc107;
  font-size: 14px;
  margin-bottom: 14px;
}

.modern-testimonial-card p {
  color: #4b5563;
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
}

.modern-testimonial-card .customer-name {
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  display: block;
}

.modern-testimonial-card .verified-badge {
  color: #10b981;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  text-align: center;
  flex-direction: row;
  justify-content: center;
}

/* Modern Problem Cards */
.modern-problem-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 30px 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.modern-problem-card:hover {
  border-color: #34d4ff;
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(52, 212, 255, 0.14);
}

.modern-problem-card .icon-round {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ecfbff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.modern-problem-card .icon-round img {
  max-width: 36px;
  max-height: 36px;
}

.modern-problem-card .h5 {
  color: #111827;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.modern-problem-card p {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Modern Accordion */
.modern-accordion .accordion-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px !important;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.modern-accordion .accordion-item:hover {
  border-color: #cbd5e1;
}

.modern-accordion .accordion-button {
  background: #ffffff;
  color: #111827;
  font-size: 16px;
  font-weight: 600;
  padding: 18px 22px;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.modern-accordion .accordion-button:not(.collapsed) {
  background: #f8fafc;
  color: #047391;
  border-bottom: 1px solid #e2e8f0;
}

.modern-accordion .accordion-body {
  padding: 18px 22px;
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.65;
}

/* Pre-Footer CTA */
.modern-prefooter-cta {
  background: transparent;
  padding: 40px 0 60px;
}

.modern-prefooter-cta .cta-inner-card {
  background: linear-gradient(135deg, #111827 0%, #1e293b 100%);
  border-radius: 24px;
  padding: 55px 40px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(52, 212, 255, 0.2);
}

.modern-prefooter-cta .cta-inner-card .h2 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.modern-prefooter-cta .cta-inner-card .hr-blue {
  width: 60px;
  height: 3px;
  background: #34d4ff;
  border: none;
  margin: 15px auto 20px;
}

.modern-prefooter-cta .cta-inner-card p {
  font-size: 16px;
  max-width: 650px;
  margin: 0 auto;
}

/* ==========================================================================
   MODERN SLIDER CONTROLS: CREATIONS SLIDER & CUSTOMER SLIDER
   Fixes pagination dots, prev/next arrows alignment and modern aesthetics
   ========================================================================== */

/* Swiper Container Compatibility for Swiper 11 */
.swiper-container,
.swiper {
  position: relative !important;
  overflow: hidden !important;
  list-style: none !important;
  padding: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
}

/* Slider container safety and spacing */
.creations-slider,
.customer-slider,
.writer-slider {
  position: relative !important;
  overflow: hidden !important;
  padding: 12px 4px 20px !important;
}

/* Centered Flexbox Controls Bar for Prev Arrow, Dots, and Next Arrow */
.creations-slider .position-relative.m-t-40,
.creations-slider .position-relative.m-t-20,
.customer-slider .position-relative.m-t-20,
.customer-slider .position-relative.m-t-40,
.show-piece .position-relative.m-t-40,
.our-customer .position-relative.m-t-20,
.our-customer .position-relative.m-t-40,
.service-customer-reviews .position-relative {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 36px !important;
  position: relative !important;
  width: 100% !important;
  z-index: 5 !important;
  float: none !important;
  clear: both !important;
}

/* Prev Arrow Button (displays on the left) */
.right-arrow1,
.right-arrow2,
.right-arrow3 {
  order: 1 !important;
  position: static !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #0b1f33 !important;
  border: 1.5px solid #d1d5db !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 15px !important;
  user-select: none !important;
  z-index: 10 !important;
}

/* Next Arrow Button (displays on the right) */
.left-arrow1,
.left-arrow2,
.left-arrow3 {
  order: 3 !important;
  position: static !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #0b1f33 !important;
  border: 1.5px solid #d1d5db !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 15px !important;
  user-select: none !important;
  z-index: 10 !important;
}

.right-arrow1:hover,
.right-arrow2:hover,
.right-arrow3:hover,
.left-arrow1:hover,
.left-arrow2:hover,
.left-arrow3:hover {
  background: #047391 !important;
  color: #ffffff !important;
  border-color: #047391 !important;
  box-shadow: 0 8px 18px rgba(4, 115, 145, 0.3) !important;
  transform: translateY(-2px) scale(1.06) !important;
}

.right-arrow1:active,
.right-arrow2:active,
.right-arrow3:active,
.left-arrow1:active,
.left-arrow2:active,
.left-arrow3:active {
  transform: scale(0.96) !important;
}

/* Disabled State for Arrows */
.swiper-button-disabled,
.right-arrow1.swiper-button-disabled,
.right-arrow2.swiper-button-disabled,
.left-arrow1.swiper-button-disabled,
.left-arrow2.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
}

/* Bullet Pagination (displays in the middle) */
.client-pagination,
.swiper-pagination {
  order: 2 !important;
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.client-pagination .swiper-pagination-bullet,
.swiper-pagination .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  border-radius: 10px !important;
  background: #cbd5e1 !important;
  opacity: 1 !important;
  margin: 0 4px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
  outline: none !important;
  display: inline-block !important;
}

.client-pagination .swiper-pagination-bullet:hover,
.swiper-pagination .swiper-pagination-bullet:hover {
  background: #94a3b8 !important;
}

.client-pagination .swiper-pagination-bullet-active,
.swiper-pagination .swiper-pagination-bullet-active {
  width: 32px !important;
  border-radius: 10px !important;
  background: #047391 !important;
  box-shadow: 0 2px 8px rgba(4, 115, 145, 0.35) !important;
}

/* Creations Slider Book Samples */
.creations-slider .swiper-wrapper {
  display: flex !important;
  align-items: center !important;
}

.creations-slider .swiper-slide {
  padding: 10px 8px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  height: auto !important;
}

.creations-slider img.img1,
.creations-slider .modern-book-card {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-height: 380px !important;
  max-width: 250px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

.creations-slider img.img1:hover,
.creations-slider .modern-book-card:hover {
  transform: translateY(-8px) scale(1.03) !important;
  box-shadow: 0 16px 36px rgba(4, 115, 145, 0.28) !important;
}


/* ==========================================================================
   OUR CUSTOMER REVIEWS SLIDER (3 BOXES PER VIEW + MODERN CARDS)
   ========================================================================== */

.our-customer {
  background: #f8fafc !important;
  padding: 85px 0 !important;
  position: relative !important;
}

/* Make sure the reviews row has full width across all pages */
.our-customer .col-12.col-sm-12.col-md-10.col-lg-10.col-xl-10.offset-md-1 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  flex: 0 0 100% !important;
}

.our-customer .h2,
.our-customer .h3 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
}

.our-customer .hr-blue {
  width: 60px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 16px auto 22px !important;
}

.our-customer p.text-muted,
.our-customer .container>.row:first-child p {
  color: #475569 !important;
  font-size: 16px !important;
  max-width: 720px !important;
  margin: 0 auto 30px !important;
  line-height: 1.7 !important;
}

/* Equal Height Flexbox Setup for Swiper Slides */
.customer-slider .swiper-wrapper {
  display: flex !important;
  align-items: stretch !important;
}

.customer-slider .swiper-slide {
  height: auto !important;
  display: flex !important;
  padding: 8px 4px !important;
  box-sizing: border-box !important;
}

/* Unified Modern Review Card for both .customer-box and .modern-testimonial-card */
.our-customer .customer-box,
.customer-slider .modern-testimonial-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 32px 24px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Top Accent line on Hover */
.our-customer .customer-box::before,
.customer-slider .modern-testimonial-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.our-customer .customer-box:hover,
.customer-slider .modern-testimonial-card:hover {
  border-color: #34d4ff !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 32px rgba(4, 115, 145, 0.12) !important;
}

.our-customer .customer-box:hover::before,
.customer-slider .modern-testimonial-card:hover::before {
  opacity: 1 !important;
}

/* Remove old ugly quote image overlay that obstructed text */
.our-customer .customer-box::after {
  display: none !important;
}

/* Avatar Circle */
.our-customer .customer-box .h3,
.customer-slider .testimonial-avatar-circle {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #047391 0%, #34d4ff 100%) !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  box-shadow: 0 4px 14px rgba(4, 115, 145, 0.25) !important;
  border: none !important;
}

/* Star Rating */
.customer-slider .rating-stars {
  color: #ffb703 !important;
  font-size: 15px !important;
  margin-bottom: 14px !important;
}

.our-customer .customer-box p::before {
  content: '★★★★★' !important;
  display: block !important;
  color: #ffb703 !important;
  font-size: 16px !important;
  letter-spacing: 2px !important;
  margin-bottom: 14px !important;
  font-style: normal !important;
}

/* Review text */
.our-customer .customer-box p,
.customer-slider .modern-testimonial-card p {
  color: #475569 !important;
  font-size: 14.5px !important;
  font-style: italic !important;
  line-height: 1.65 !important;
  margin-bottom: 20px !important;
  flex-grow: 1 !important;
  border-bottom: none !important;
  height: auto !important;
}

/* Author Info */
.our-customer .customer-box .customer,
.customer-slider .modern-testimonial-card .customer-name {
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.our-customer .customer-box .service {
  color: #64748b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: block !important;
}

/* 
.our-customer .customer-box .customer::after {
  content: '✔ Verified Client' !important;
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #10b981 !important;
  margin-top: 6px !important;
} */


/* ==========================================================================
   MODERN SERVICE HERO SECTION (.service-bg)
   New modern layout, tech gradient, ambient light and crisp typography
   ========================================================================== */

.service-bg {
  background: linear-gradient(180deg, #f0f9ff 0%, #e2f4fb 45%, #ffffff 100%) !important;
  position: relative !important;
  padding-top: 155px !important;
  padding-bottom: 85px !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(4, 115, 145, 0.08) !important;
}

/* Subtle ambient radial glows in hero */
.service-bg::before {
  content: '' !important;
  position: absolute !important;
  top: -120px !important;
  right: -100px !important;
  width: 520px !important;
  height: 520px !important;
  background: radial-gradient(circle, rgba(52, 212, 255, 0.25) 0%, rgba(4, 115, 145, 0.05) 50%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(45px) !important;
}

.service-bg::after {
  content: '' !important;
  position: absolute !important;
  bottom: -80px !important;
  left: -80px !important;
  width: 480px !important;
  height: 480px !important;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.16) 0%, rgba(52, 212, 255, 0.08) 50%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: blur(45px) !important;
}

.service-bg .container {
  position: relative !important;
  z-index: 2 !important;
}

/* Service Hero Title */
.service-bg h1,
.service-bg .h1,
.service-bg .h2 {
  color: #0b1f33 !important;
  font-size: clamp(26px, 3.6vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.6px !important;
  margin-bottom: 16px !important;
  text-transform: capitalize !important;
}

/* Modern Gradient Divider */
.service-bg .hr-blue {
  width: 72px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 18px auto 22px !important;
  opacity: 1 !important;
}

/* Hero Description */
.service-bg p {
  color: #475569 !important;
  font-size: clamp(15px, 1.2vw, 17px) !important;
  line-height: 1.75 !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-weight: 400 !important;
}

/* Feature/Pill Highlight Badges in Hero */
.service-bg .m-t-20.mb-3 p,
.service-bg p[style*="font-size: 14px"] {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(4, 115, 145, 0.16) !important;
  border-radius: 50px !important;
  padding: 10px 24px !important;
  display: inline-block !important;
  box-shadow: 0 6px 18px rgba(4, 115, 145, 0.06) !important;
  color: #1e293b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  margin: 18px auto 8px !important;
  max-width: 90% !important;
  line-height: 1.6 !important;
}

.service-bg .m-t-20.mb-3 p strong,
.service-bg p[style*="font-size: 14px"] strong {
  color: #047391 !important;
  font-weight: 700 !important;
}

/* Service Hero CTA Button */
.service-bg .btn-order {
  background: linear-gradient(135deg, #047391 0%, #035268 100%) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 38px !important;
  border-radius: 50px !important;
  border: 1.5px solid rgba(52, 212, 255, 0.3) !important;
  box-shadow: 0 10px 26px rgba(4, 115, 145, 0.32) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  margin-top: 10px !important;
}

.service-bg .btn-order:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 16px 32px rgba(4, 115, 145, 0.42) !important;
  background: linear-gradient(135deg, #0588ac 0%, #047391 100%) !important;
  color: #ffffff !important;
}

.service-bg .btn-order:active {
  transform: scale(0.98) !important;
}


/* ==========================================================================
   MODERN STYLING FOR ALL OTHER INNER PAGE SECTIONS
   ========================================================================== */

/* 1. PROFESSIONAL EXPERT & LEAD CAPTURE SECTION */
.professional-expert {
  background: #ffffff !important;
  padding: 85px 0 !important;
  position: relative !important;
}

.professional-expert .h2 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.4px !important;
}

.professional-expert .hr-blue {
  width: 60px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 16px 0 24px !important;
}

.professional-expert p {
  color: #475569 !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  margin-bottom: 16px !important;
}

.professional-expert .btn-order {
  background: linear-gradient(135deg, #047391 0%, #035268 100%) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  box-shadow: 0 8px 20px rgba(4, 115, 145, 0.25) !important;
  border: none !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.professional-expert .btn-order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(4, 115, 145, 0.35) !important;
  background: linear-gradient(135deg, #0588ac 0%, #047391 100%) !important;
}

.professional-expert .btn-live {
  background: transparent !important;
  color: #047391 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 11px 26px !important;
  border-radius: 50px !important;
  border: 2px solid #047391 !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.professional-expert .btn-live:hover {
  background: #047391 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(4, 115, 145, 0.2) !important;
}

.professional-expert .or {
  color: #94a3b8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 14px !important;
}

/* Modern Lead Generation Form */
.professional-expert .service-form {
  background: linear-gradient(145deg, #0b1f33 0%, #132f4c 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 45px rgba(11, 31, 51, 0.18) !important;
  padding: 32px 28px !important;
  position: relative !important;
  border: 1px solid rgba(52, 212, 255, 0.2) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.professional-expert .service-form::before {
  display: none !important;
}

.professional-expert .service-form .h3 {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.3px !important;
}

.professional-expert .service-form .hr-blue {
  width: 50px !important;
  height: 3px !important;
  background: #34d4ff !important;
  margin: 10px auto 22px !important;
  display: block !important;
}

.professional-expert .service-form .form-control {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-size: 14px !important;
  height: 46px !important;
  padding: 10px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.professional-expert .service-form textarea.form-control {
  height: auto !important;
  min-height: 95px !important;
  resize: vertical !important;
}

.professional-expert .service-form .form-control:focus {
  border-color: #34d4ff !important;
  box-shadow: 0 0 0 3px rgba(52, 212, 255, 0.25) !important;
  outline: none !important;
}

.professional-expert .service-form .btn-submit,
.professional-expert .service-form .btn-order {
  background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%) !important;
  color: #0b1f33 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 13px !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(255, 204, 0, 0.35) !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
}

.professional-expert .service-form .btn-submit:hover,
.professional-expert .service-form .btn-order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(255, 204, 0, 0.45) !important;
  color: #000000 !important;
}

/* 2. BEST SELLER / GUARANTEE BANNER */
.best-seller {
  background: linear-gradient(135deg, #0e2b3e 0%, #164e63 100%) !important;
  padding: 70px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.best-seller::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 350px !important;
  height: 100% !important;
  background: radial-gradient(circle, rgba(52, 212, 255, 0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.best-seller .h2 {
  color: #ffffff !important;
  /* font-size: clamp(24px, 2.6vw, 34px) !important; */
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.best-seller .hr-blue {
  width: 60px !important;
  height: 4px !important;
  background: #34d4ff !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 16px 0 22px !important;
}

.best-seller p {
  color: #e2e8f0 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
}

.best-seller .btn-order {
  background: #ffcc00 !important;
  color: #0b1f33 !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  border: none !important;
  padding: 12px 30px !important;
  box-shadow: 0 8px 20px rgba(255, 204, 0, 0.3) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.best-seller .btn-order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(255, 204, 0, 0.4) !important;
}

.best-seller .btn-live {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  padding: 11px 30px !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.best-seller .btn-live:hover {
  background: #ffffff !important;
  color: #0e2b3e !important;
  transform: translateY(-2px) !important;
}

.best-seller .or {
  color: #94a3b8 !important;
  font-weight: 600 !important;
  margin: 0 14px !important;
}

.best-seller img {
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25)) !important;
  transition: transform 0.3s ease !important;
}

.best-seller img:hover {
  transform: scale(1.04) !important;
}

/* 3. YOU GET / CHECKLIST SECTION */
.you-get {
  background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%) !important;
  padding: 85px 0 !important;
  position: relative !important;
}

.you-get .h2 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
}

.you-get .hr-blue {
  width: 60px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 16px 0 24px !important;
}

.you-get ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 20px !important;
}

.you-get ul li {
  color: #1e293b !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  text-indent: 0 !important;
}

.you-get ul li i {
  color: #10b981 !important;
  font-size: 18px !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
}

.you-get .btn-order {
  background: linear-gradient(135deg, #047391 0%, #035268 100%) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px rgba(4, 115, 145, 0.25) !important;
  border: none !important;
  text-decoration: none !important;
}

.you-get .btn-order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(4, 115, 145, 0.35) !important;
}

.you-get .btn-live {
  border: 2px solid #047391 !important;
  color: #047391 !important;
  border-radius: 50px !important;
  padding: 11px 26px !important;
  font-weight: 600 !important;
  background: transparent !important;
  text-decoration: none !important;
}

.you-get .btn-live:hover {
  background: #047391 !important;
  color: #ffffff !important;
}

/* 4. WHAT YOU GET / CAPABILITIES GRID */
.what-you-get {
  background: #ffffff !important;
  padding: 85px 0 !important;
}

.what-you-get .h2 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
}

.what-you-get .hr-blue {
  width: 60px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 16px auto 22px !important;
}

.what-you-get p.lead {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.what-you-get .you-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 34px 24px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03) !important;
  text-align: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  margin-bottom: 24px !important;
}

.what-you-get .you-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 20% !important;
  right: 20% !important;
  height: 3px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  border-radius: 0 0 4px 4px !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.what-you-get .you-box:hover {
  border-color: #34d4ff !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(4, 115, 145, 0.12) !important;
}

.what-you-get .you-box:hover::before {
  opacity: 1 !important;
}

.what-you-get .you-box img {
  margin-bottom: 18px !important;
  transition: transform 0.3s ease !important;
}

.what-you-get .you-box:hover img {
  transform: scale(1.1) !important;
}

.what-you-get .you-box .h5 {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

.what-you-get .you-box p {
  color: #64748b !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 5. SHOW PIECE / PORTFOLIO SECTION */
.show-piece {
  background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 100%) !important;
  padding: 85px 0 !important;
}

.show-piece .h2 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
}

.show-piece .hr-blue {
  width: 60px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 16px auto 22px !important;
}

.show-piece p {
  color: #475569 !important;
  font-size: 16px !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  line-height: 1.7 !important;
}

/* 6. FAQ & SOLUTIONS SECTION */
.faq,
.faqs {
  background: #ffffff !important;
  padding: 80px 0 !important;
}

.faq .h2,
.faqs .h2 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
}

.faq .hr-blue,
.faqs .hr-blue {
  width: 60px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #047391 0%, #34d4ff 100%) !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 16px 0 24px !important;
}

.faq .h4,
.faqs .h3 {
  color: #0f172a !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.faq p,
.faqs p {
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.faq .btn-order {
  background: linear-gradient(135deg, #047391 0%, #035268 100%) !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 11px 26px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

/* 7. PRE-FOOTER CTA SECTION (.our-expert) */
.our-expert {
  background: linear-gradient(135deg, #0b1f33 0%, #163b5c 100%) !important;
  padding: 75px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
}

.our-expert::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -20% !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(52, 212, 255, 0.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.our-expert .h2 {
  color: #ffffff !important;
  font-size: clamp(26px, 3.2vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
}

.our-expert .hr-blue {
  width: 60px !important;
  height: 3px !important;
  background: #34d4ff !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 16px auto 20px !important;
}

.our-expert p {
  color: #cbd5e1 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 680px !important;
  margin: 0 auto 30px !important;
}

.our-expert .btn-order {
  background: linear-gradient(135deg, #34d4ff 0%, #047391 100%) !important;
  color: #0b1f33 !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  padding: 13px 32px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(52, 212, 255, 0.35) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.our-expert .btn-order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(52, 212, 255, 0.45) !important;
  color: #ffffff !important;
}

.our-expert .btn-live {
  background: transparent !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  padding: 12px 30px !important;
  border-radius: 50px !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.our-expert .btn-live:hover {
  background: #ffffff !important;
  color: #0b1f33 !important;
  transform: translateY(-2px) !important;
}

.our-expert .or {
  color: #94a3b8 !important;
  font-weight: 600 !important;
  margin: 0 14px !important;
}


/* ==========================================================================
   RESPONSIVE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 991.98px) {
  .service-bg {
    padding-top: 130px !important;
    padding-bottom: 60px !important;
  }

  .professional-expert,
  .best-seller,
  .you-get,
  .what-you-get,
  .show-piece,
  .our-customer,
  .our-expert,
  .faq {
    padding: 60px 0 !important;
  }

  .professional-expert .service-form {
    margin-top: 40px !important;
  }
}

@media (max-width: 767.98px) {
  .service-bg {
    padding-top: 110px !important;
    padding-bottom: 50px !important;
  }

  .service-bg .m-t-20.mb-3 p,
  .service-bg p[style*="font-size: 14px"] {
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 12.5px !important;
  }

  .creations-slider .position-relative.m-t-40,
  .customer-slider .position-relative.m-t-20,
  .show-piece .position-relative.m-t-40,
  .our-customer .position-relative.m-t-20 {
    margin-top: 24px !important;
    gap: 12px !important;
  }

  .right-arrow1,
  .right-arrow2,
  .left-arrow1,
  .left-arrow2 {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   1. IMAGE 2 FIX: HIGHLIGHT BANNER CONTAINER CONTRAST & STYLING
   ============================================================ */
.highlight-banner-container,
.best-seller .highlight-banner-container {
  background: #ffffff !important;
  border: 1px solid rgba(4, 115, 145, 0.15) !important;
  border-radius: 24px !important;
  padding: 48px 40px !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important;
  position: relative !important;
  z-index: 2 !important;
}

.best-seller .highlight-banner-container .h2,
.highlight-banner-container .h2,
.highlight-banner-container h2 {
  color: #0b1f33 !important;
  /* font-size: clamp(22px, 2.5vw, 32px) !important; */
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
}

.best-seller .highlight-banner-container .hr-blue,
.highlight-banner-container .hr-blue {
  width: 55px !important;
  height: 4px !important;
  background: #047391 !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 14px 0 20px !important;
}

.best-seller .highlight-banner-container p,
.highlight-banner-container p {
  color: #475569 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
}

.best-seller .highlight-banner-container .highlight-tag-badge,
.highlight-banner-container .highlight-tag-badge {
  background: rgba(4, 115, 145, 0.08) !important;
  color: #047391 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(4, 115, 145, 0.3) !important;
  display: inline-block !important;
  margin-bottom: 14px !important;
}

.best-seller .highlight-banner-container .stat-pill,
.highlight-banner-container .stat-pill {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s ease !important;
  text-align: center !important;
  flex: 1 !important;
  min-width: 130px !important;
}

.best-seller .highlight-banner-container .stat-pill:hover,
.highlight-banner-container .stat-pill:hover {
  transform: translateY(-3px) !important;
  border-color: #047391 !important;
  box-shadow: 0 8px 20px rgba(4, 115, 145, 0.12) !important;
}

.best-seller .highlight-banner-container .stat-pill .stat-number,
.highlight-banner-container .stat-pill .stat-number {
  color: #047391 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  display: block !important;
}

.best-seller .highlight-banner-container .stat-pill .stat-label,
.highlight-banner-container .stat-pill .stat-label {
  color: #64748b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: block !important;
  margin-top: 3px !important;
}

.best-seller .highlight-banner-container .btn-order,
.highlight-banner-container .btn-order {
  background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%) !important;
  color: #0b1f33 !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 12px 28px !important;
  box-shadow: 0 6px 18px rgba(255, 204, 0, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
}

.best-seller .highlight-banner-container .btn-order:hover,
.highlight-banner-container .btn-order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(255, 204, 0, 0.45) !important;
  color: #000000 !important;
}

.best-seller .highlight-banner-container .or,
.highlight-banner-container .or {
  color: #64748b !important;
  font-weight: 700 !important;
  margin: 0 14px !important;
}

.best-seller .highlight-banner-container .btn-live,
.highlight-banner-container .btn-live {
  background: transparent !important;
  color: #047391 !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  border: 2px solid #047391 !important;
  padding: 10px 28px !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.best-seller .highlight-banner-container .btn-live:hover,
.highlight-banner-container .btn-live:hover {
  background: #047391 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(4, 115, 145, 0.25) !important;
}

/* ============================================================
   2. HOMEPAGE HERO SECTION (.hero-home-section)
   ============================================================ */
.hero-home-section {
  background: linear-gradient(180deg, #ecf8fb 0%, #f6fcfe 60%, #ffffff 100%) !important;
  padding-top: 155px !important;
  padding-bottom: 75px !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-home-section::before {
  content: '' !important;
  position: absolute !important;
  top: -50px !important;
  right: 8% !important;
  width: 550px !important;
  height: 480px !important;
  background: radial-gradient(circle, rgba(52, 212, 255, 0.16) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.hero-home-section h1.h2,
.hero-home-section .h2 {
  color: #0b1f33 !important;
  /* font-size: clamp(28px, 3.4vw, 44px) !important; */
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 14px !important;
}

.hero-home-section .col-lg-7 .hr-blue,
.hero-home-section>.container>.row>div:first-child .hr-blue {
  width: 55px !important;
  height: 4px !important;
  background: #047391 !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 14px 0 22px 0 !important;
}

.hero-home-section p {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin-bottom: 16px !important;
}

.hero-home-section .btn-order {
  background: #047391 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 13px 34px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(4, 115, 145, 0.3) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.hero-home-section .btn-order:hover {
  background: #035c75 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(4, 115, 145, 0.4) !important;
  color: #ffffff !important;
}

.hero-home-section .client-box_home {
  background: #ffffff !important;
  border: 1px solid rgba(4, 115, 145, 0.2) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  max-width: 520px !important;
}

.hero-home-section .client-box_home .client-title {
  color: #0b1f33 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.hero-home-section .client-box_home .rating i {
  color: #16a34a !important;
  font-size: 14px !important;
  margin: 0 1px !important;
}

.hero-home-section .client-box_home .e-text {
  color: #64748b !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* Hero Section Lead Generation Form Card (Clean Elevated Modern Card) */
.hero-home-section .service-form,
.hero-home-section .modern-service-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(4, 115, 145, 0.12), 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  padding: 34px 28px !important;
  border: 1px solid rgba(4, 115, 145, 0.15) !important;
  width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
}

.hero-home-section .service-form::before {
  display: none !important;
}

.hero-home-section .service-form .h3,
.hero-home-section .service-form-header .h3,
.hero-home-section .service-form .service-form-header .h3 {
  color: #0b1f33 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.3px !important;
  display: block !important;
}

.hero-home-section .service-form .hr-blue,
.hero-home-section .service-form-header .hr-blue,
.hero-home-section .service-form .service-form-header .hr-blue {
  width: 50px !important;
  height: 3.5px !important;
  background: #047391 !important;
  margin: 10px auto 22px auto !important;
  display: block !important;
  border: none !important;
  border-radius: 99px !important;
}

.hero-home-section .service-form .form-control {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-size: 14px !important;
  height: 46px !important;
  padding: 10px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.hero-home-section .service-form textarea.form-control {
  height: auto !important;
  min-height: 95px !important;
  resize: vertical !important;
}

.hero-home-section .service-form .form-control:focus {
  background: #ffffff !important;
  border-color: #047391 !important;
  box-shadow: 0 0 0 3px rgba(4, 115, 145, 0.18) !important;
  outline: none !important;
}

.hero-home-section .service-form .btn-submit,
.hero-home-section .service-form .btn-order {
  background: #047391 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 13px !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(4, 115, 145, 0.35) !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-home-section .service-form .btn-submit:hover,
.hero-home-section .service-form .btn-order:hover {
  background: #035c75 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(4, 115, 145, 0.45) !important;
  color: #ffffff !important;
}

/* ============================================================
   3. INNER PAGES HERO SECTION (.service-bg)
   ============================================================ */
.service-bg {
  background: linear-gradient(180deg, #e9f6fa 0%, #f5fcfe 60%, #ffffff 100%) !important;
  padding-top: 165px !important;
  padding-bottom: 75px !important;
  position: relative !important;
  overflow: hidden !important;
}

.service-bg::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 800px !important;
  height: 450px !important;
  background: radial-gradient(circle, rgba(52, 212, 255, 0.16) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.service-bg .h2,
.service-bg h1.h2 {
  color: #0b1f33 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 12px !important;
}

.service-bg .hr-blue {
  width: 60px !important;
  height: 4px !important;
  background: #047391 !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 18px auto 24px !important;
}

.service-bg p {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  max-width: 860px !important;
  margin: 0 auto 16px !important;
}

.service-bg .m-t-20.mb-3 p,
.service-bg p[style*="font-size: 14px"] {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(4, 115, 145, 0.2) !important;
  border-radius: 50px !important;
  padding: 10px 24px !important;
  display: inline-block !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  font-size: 13.5px !important;
  color: #334155 !important;
}

.service-bg .m-t-20.mb-3 p strong,
.service-bg p[style*="font-size: 14px"] strong {
  color: #047391 !important;
}

.service-bg .btn-order {
  background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%) !important;
  color: #0b1f33 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 13px 36px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(255, 204, 0, 0.38) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.service-bg .btn-order:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(255, 204, 0, 0.5) !important;
  color: #000000 !important;
}

/* Normal inner content .professional-expert sections */
.professional-expert {
  padding: 65px 0 !important;
  background: #ffffff;
}

.professional-expert .h2 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 36px) !important;
  font-weight: 800 !important;
}

.professional-expert p {
  color: #475569 !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
}

.professional-expert .h5 {
  color: #0b1f33 !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  display: block !important;
}

.professional-expert .feature-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.professional-expert .feature-item .circle-check {
  background: #10b981 !important;
  color: #ffffff !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

.professional-expert .feature-item .feature-text {
  color: #334155 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

.professional-expert .btn-order {
  background: #047391 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(4, 115, 145, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.professional-expert .btn-order:hover {
  background: #035c75 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.professional-expert .or {
  color: #64748b !important;
  font-weight: 700 !important;
  margin: 0 12px !important;
}

.professional-expert .btn-live {
  background: transparent !important;
  color: #047391 !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  border: 2px solid #047391 !important;
  padding: 10px 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.professional-expert .btn-live:hover {
  background: #047391 !important;
  color: #ffffff !important;
}

/* ============================================================
   INNER PAGES CHECKLIST SECTION (.you-get) - IMAGE 4 FIX
   ============================================================ */
.you-get {
  background: linear-gradient(180deg, #ecf8fb 0%, #f6fcfe 60%, #ffffff 100%) !important;
  padding: 75px 0 !important;
  position: relative !important;
}

.you-get .h2 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

.you-get .hr-blue {
  width: 55px !important;
  height: 4px !important;
  background: #047391 !important;
  border: none !important;
  border-radius: 99px !important;
  margin: 14px 0 20px !important;
}

.you-get p {
  color: #475569 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
}

.you-get ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 0 20px 0 !important;
}

.you-get ul li {
  color: #1e293b !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  margin-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.you-get ul li i {
  color: #10b981 !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.you-get .btn-order {
  background: #047391 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 12px 28px !important;
  box-shadow: 0 6px 18px rgba(4, 115, 145, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.you-get .btn-order:hover {
  background: #035c75 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(4, 115, 145, 0.35) !important;
}

.you-get .or {
  color: #64748b !important;
  font-weight: 700 !important;
  margin: 0 12px !important;
}

.you-get .btn-live {
  background: transparent !important;
  color: #047391 !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  border: 2px solid #047391 !important;
  padding: 10px 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.you-get .btn-live:hover {
  background: #047391 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}


/* ============================================================
   4. EXTRA EDITORIAL CONTENT SECTIONS (.editorial-info-section & section.faq)
   ============================================================ */
.editorial-info-section,
section.faq {
  background: #ffffff !important;
  padding: 70px 0 !important;
  text-align: center !important;
}

.editorial-info-section .h2,
.editorial-info-section h2,
section.faq .h2,
section.faq h2 {
  color: #0b1f33 !important;
  font-size: clamp(22px, 2.6vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin-top: 15px !important;
  margin-bottom: 12px !important;
}

.editorial-info-section .h4,
.editorial-info-section h4,
section.faq .h4,
section.faq h4 {
  color: #0e2b3e !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-top: 24px !important;
  margin-bottom: 10px !important;
}

.editorial-info-section p,
section.faq p {
  color: #475569 !important;
  font-size: 15.5px !important;
  line-height: 1.75 !important;
  margin-bottom: 16px !important;
}

.editorial-info-section hr,
section.faq hr {
  border: 0 !important;
  border-top: 1px solid #e2e8f0 !important;
  opacity: 0.8 !important;
  margin: 28px 0 !important;
}

.editorial-info-section .btn-order,
section.faq .btn-order {
  background: #ffcc00 !important;
  color: #0b1f33 !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 12px 30px !important;
  box-shadow: 0 6px 18px rgba(255, 204, 0, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 12px !important;
}

/* ============================================================
   5. DEDICATED FAQ SECTIONS & MODERN BOOTSTRAP ACCORDION
   ============================================================ */
.faqs-section,
section.faqs {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
  padding: 75px 0 !important;
  position: relative !important;
}

.faqs-section .h2,
section.faqs .h2,
section.faqs span.h2 {
  color: #0b1f33 !important;
  font-size: clamp(24px, 2.8vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center !important;
  display: block !important;
  margin-bottom: 12px !important;
}

section.faqs p.text-muted,
section.faqs .row>p {
  color: #64748b !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto 30px !important;
}

.modern-accordion {
  max-width: 960px !important;
  margin: 0 auto !important;
}

.modern-accordion .accordion-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.modern-accordion .accordion-item:hover {
  border-color: rgba(4, 115, 145, 0.35) !important;
  box-shadow: 0 8px 24px rgba(4, 115, 145, 0.08) !important;
  transform: translateY(-2px) !important;
}

.modern-accordion .accordion-header {
  margin-bottom: 0 !important;
}

.modern-accordion .accordion-button {
  background: #ffffff !important;
  color: #0b1f33 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 18px 24px !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1.45 !important;
  transition: all 0.25s ease !important;
}

.modern-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 100%) !important;
  color: #047391 !important;
  /*border-left: 4px solid #047391 !important;*/
  box-shadow: none !important;
}

.modern-accordion .accordion-button:focus {
  outline: none !important;
  box-shadow: none !important;
}

.modern-accordion .accordion-button::after {
  background-size: 18px !important;
  transition: transform 0.3s ease !important;
}

.modern-accordion .accordion-body {
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  padding: 14px 24px 24px 24px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.modern-accordion .accordion-body p {
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}

/* ============================================================
   MODERN CONTACT US PAGE (.contact-page-wrapper)
   ============================================================ */
.contact-hero {
  background: linear-gradient(180deg, #ecf8fb 0%, #f6fcfe 60%, #ffffff 100%) !important;
  padding-top: 150px !important;
  padding-bottom: 50px !important;
  position: relative !important;
  overflow: hidden !important;
}

.contact-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  right: 10% !important;
  width: 500px !important;
  height: 450px !important;
  background: radial-gradient(circle, rgba(52, 212, 255, 0.16) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.contact-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(4, 115, 145, 0.08) !important;
  color: #047391 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 5px 14px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(4, 115, 145, 0.25) !important;
  margin-bottom: 14px !important;
}

.contact-hero h1 {
  color: #0b1f33 !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

.contact-hero p {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 650px !important;
  margin: 0 auto !important;
}

.contact-main-section {
  padding: 40px 0 80px !important;
  background: #f8fafc !important;
}

.contact-card-form {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 36px !important;
  border: 1px solid rgba(4, 115, 145, 0.12) !important;
  box-shadow: 0 10px 30px rgba(11, 31, 51, 0.06) !important;
  height: 100% !important;
}

.contact-card-form .form-title {
  color: #0b1f33 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

.contact-card-form .form-subtitle {
  color: #64748b !important;
  font-size: 14.5px !important;
  margin-bottom: 24px !important;
}

.custom-form-group {
  margin-bottom: 20px !important;
}

.custom-form-label {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 6px !important;
}

.custom-input-wrap {
  position: relative !important;
}

.custom-input-wrap i {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #047391 !important;
  font-size: 15px !important;
  pointer-events: none !important;
}

.custom-form-control {
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 16px 12px 42px !important;
  font-size: 14.5px !important;
  color: #1e293b !important;
  transition: all 0.25s ease !important;
}

.custom-form-control:focus {
  background: #ffffff !important;
  border-color: #047391 !important;
  box-shadow: 0 0 0 3px rgba(4, 115, 145, 0.15) !important;
  outline: none !important;
}

.custom-select-control {
  width: 100% !important;
  background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 14px center/16px 12px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 38px 12px 16px !important;
  font-size: 14.5px !important;
  color: #1e293b !important;
  transition: all 0.25s ease !important;
  appearance: none !important;
}

.custom-select-control:focus {
  border-color: #047391 !important;
  box-shadow: 0 0 0 3px rgba(4, 115, 145, 0.15) !important;
  outline: none !important;
}

.custom-textarea {
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  color: #1e293b !important;
  transition: all 0.25s ease !important;
  resize: vertical !important;
}

.custom-textarea:focus {
  background: #ffffff !important;
  border-color: #047391 !important;
  box-shadow: 0 0 0 3px rgba(4, 115, 145, 0.15) !important;
  outline: none !important;
}

.btn-contact-submit {
  background: #047391 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 36px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(4, 115, 145, 0.3) !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  width: 100% !important;
}

.btn-contact-submit:hover {
  background: #035c75 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(4, 115, 145, 0.4) !important;
  color: #ffffff !important;
}

/* Contact Sidebar Card */
.contact-sidebar-card {
  background: linear-gradient(145deg, #0e2b3e 0%, #164e63 100%) !important;
  border-radius: 18px !important;
  padding: 36px !important;
  color: #ffffff !important;
  box-shadow: 0 12px 35px rgba(14, 43, 62, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  height: 100% !important;
}

.contact-sidebar-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 250px !important;
  height: 250px !important;
  background: radial-gradient(circle, rgba(52, 212, 255, 0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.contact-sidebar-card .sidebar-title {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

.contact-sidebar-card .sidebar-subtitle {
  color: #94a3b8 !important;
  font-size: 14px !important;
  margin-bottom: 26px !important;
}

.contact-item-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  transition: all 0.25s ease !important;
}

.contact-item-box:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(52, 212, 255, 0.4) !important;
  transform: translateX(4px) !important;
}

.contact-item-box .item-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: rgba(52, 212, 255, 0.15) !important;
  color: #34d4ff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.contact-item-box .item-label {
  display: block !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
  margin-bottom: 2px !important;
}

.contact-item-box .item-value {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  word-break: break-word !important;
  display: block !important;
}

.contact-item-box .item-value:hover {
  color: #34d4ff !important;
}

.contact-trust-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  background: rgba(52, 212, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

.contact-trust-pill i {
  color: #34d4ff !important;
}

/* ============================================================
   MODERN GET A FREE QUOTE PAGE (.quote-page-wrapper)
   ============================================================ */
.quote-hero {
  background: linear-gradient(180deg, #ecf8fb 0%, #f6fcfe 60%, #ffffff 100%) !important;
  padding-top: 150px !important;
  padding-bottom: 50px !important;
  position: relative !important;
  overflow: hidden !important;
}

.quote-hero::before {
  content: '' !important;
  position: absolute !important;
  top: -40px !important;
  right: 12% !important;
  width: 500px !important;
  height: 450px !important;
  background: radial-gradient(circle, rgba(52, 212, 255, 0.16) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.quote-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(4, 115, 145, 0.08) !important;
  color: #047391 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 5px 14px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(4, 115, 145, 0.25) !important;
  margin-bottom: 14px !important;
}

.quote-hero h1 {
  color: #0b1f33 !important;
  font-size: clamp(26px, 3.2vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

.quote-hero p {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.quote-main-section {
  padding: 30px 0 80px !important;
  background: #f8fafc !important;
}

.quote-form-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 36px !important;
  border: 1px solid rgba(4, 115, 145, 0.12) !important;
  box-shadow: 0 10px 30px rgba(11, 31, 51, 0.06) !important;
}

.quote-step-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 28px 0 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1.5px solid #f1f5f9 !important;
}

.quote-step-header:first-of-type {
  margin-top: 0 !important;
}

.quote-step-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #047391 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.quote-step-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0b1f33 !important;
  margin: 0 !important;
}

/* Service checkbox chips */
.service-chips-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.service-chip-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  user-select: none !important;
}

.service-chip-label:hover {
  border-color: #047391 !important;
  background: rgba(4, 115, 145, 0.03) !important;
}

.service-chip-label input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #047391 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.service-chip-label.active,
.service-chip-label:has(input[type="checkbox"]:checked) {
  border-color: #047391 !important;
  background: rgba(4, 115, 145, 0.08) !important;
  color: #047391 !important;
  box-shadow: 0 2px 8px rgba(4, 115, 145, 0.15) !important;
}

/* File Upload Zone */
.quote-file-zone {
  border: 2px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  background: #f8fafc !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

.quote-file-zone:hover {
  border-color: #047391 !important;
  background: rgba(4, 115, 145, 0.03) !important;
}

.quote-file-zone i {
  font-size: 32px !important;
  color: #047391 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.quote-file-zone .file-main-text {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 4px !important;
}

.quote-file-zone .file-sub-text {
  font-size: 12.5px !important;
  color: #64748b !important;
  margin: 0 !important;
}

.file-selected-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.file-selected-list li {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Quote Sidebar Card */
.quote-sidebar-wrap {
  position: sticky !important;
  top: 100px !important;
}

.quote-sidebar-box {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 28px !important;
  border: 1px solid rgba(4, 115, 145, 0.12) !important;
  box-shadow: 0 10px 30px rgba(11, 31, 51, 0.06) !important;
  margin-bottom: 24px !important;
}

.quote-sidebar-box .box-title {
  color: #0b1f33 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.timeline-step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  position: relative !important;
}

.timeline-step:last-child {
  margin-bottom: 0 !important;
}

.timeline-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(4, 115, 145, 0.1) !important;
  color: #047391 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.timeline-info h6 {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0b1f33 !important;
  margin-bottom: 2px !important;
}

.timeline-info p {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.quote-perk-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.quote-perk-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.quote-perk-item i {
  color: #10b981 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.quote-direct-card {
  background: linear-gradient(135deg, #0e2b3e 0%, #164e63 100%) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  color: #ffffff !important;
  text-align: center !important;
}

.quote-direct-card h6 {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

.quote-direct-card p {
  color: #94a3b8 !important;
  font-size: 13px !important;
  margin-bottom: 16px !important;
}