/*------------------------------------------------------------------
[Master Stylesheet]

Project:  Eleganzo
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Header  / .header
3. Banner  /.banner-con
4. Category  /.category-con
5. About  /.about-con
6. Service  /.service-con
7. Project  /.project-con
8. Testimonial  /.testimonial-con
9. Journey  /.journey-con
10. Faq  /.faq-con
11. Update  /.update-con
12. Footer  /.footer-con
*/
/*------------------------------------------------------------------
# [Color Codes]

#    --e-global-color-primary: #141430;
#    --e-global-color-secondary: #0f0200;
#    --e-global-color-accent: #f94a24;
#    --e-global-color-text: #4c4c4c;
#	 --e-global-color-white: #ffffff;
#    --e-global-color-black: #000000;
#    --e-global-color-very-dark-mostly-black-red: #1e1411;
#    --e-global-color-very-dark-mostly-white-orange: #fff5ea;
#    --e-global-color-light-grayish-red: #ddd5d4;
#    --e-global-color-very-pale-red: #ffd2c8;
#    --e-global-color-light-grayish-orange: #eddac5;
#    --e-global-color-light-orange: #ebdbca;
#    --e-global-color-very-pale-orange: #fff8f0;
#    --e-global-color-light-yellow: #fcd936;
#    --e-global-color-star-yellow: #fbc729;
#    --e-global-color-pure-red: #ff0000;

*/
/*------------------------------------------------------------------
# [Typography]

Body copy: "DM Sans", sans-serif;
Heading: "Playfair Display", serif;
*/

/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); */

/* body { */
/* font-family: "Playfair Display", serif; */
/* font-family: "DM Sans", sans-serif; */
/* } */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

body {
  font-family: "Inter", sans-serif;
}

:root {
  --e-global-color-primary: #141430;
  --e-global-color-secondary: #0f0200;
  --e-global-color-accent: #f94a24;
  --e-global-color-text: #4c4c4c;
  --e-global-color-white: #ffffff;
  --e-global-color-black: #000000;
  --e-global-color-very-dark-mostly-black-red: #1e1411;
  --e-global-color-very-dark-mostly-white-orange: #fff5ea;
  --e-global-color-light-grayish-red: #ddd5d4;
  --e-global-color-very-pale-red: #ffd2c8;
  --e-global-color-light-grayish-orange: #eddac5;
  --e-global-color-light-orange: #ebdbca;
  --e-global-color-very-pale-orange: #fff8f0;
  --e-global-color-orange: #ebcfb3;
  --e-global-color-light-yellow: #fcd936;
  --e-global-color-star-yellow: #fbc729;
  --e-global-color-pure-red: #ff0000;
}

h1 {
  font-size: 72px;
  line-height: 84px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}

h2 {
  font-size: 46px;
  line-height: 60px;
  font-weight: 700;
  color: var(--e-global-color-secondary);
  font-family: "Inter", sans-serif;
}

h3 {
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}

h4 {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}

h5 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}

h6 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--e-global-color-accent);
}

p {
  font-size: 20px;
  line-height: 34px;
  font-weight: 400;
  color: var(--e-global-color-text);
}

.text-size-18 {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  color: var(--e-global-color-text);
}

.text-size-16 {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--e-global-color-text);
}

.text-size-14 {
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
  color: var(--e-global-color-text);
}

.all_button {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  border-radius: 30px;
  position: relative;
  display: inline-block;
  color: var(--e-global-color-white);
  background: var(--e-global-color-accent);
  transition: all 0.3s ease-in-out;
}

.all_button:hover {
  color: var(--e-global-color-white);
  background: var(--e-global-color-secondary);
}

.all_button i {
  font-size: 12px;
  margin-left: 14px;
  transition: all 0.3s ease-in-out;
  color: var(--e-global-color-white);
}

html {
  scroll-behavior: smooth;
}

/* Home Page */

.header {
  padding: 25px 0px;
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--e-global-color-light-grayish-orange);
}

.header .logo img {
  width: 46px;
}

.navbar-collapse ul {
  text-align: center;
  align-items: center;
  display: inherit;
}

.navbar-expand-lg {
  position: relative;
  z-index: 1;
}

.navbar-brand {
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.navbar-nav li {
  margin: 0 14px;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.navbar-nav li:first-child {
  margin-left: 0;
}

.navbar-nav .nav-item a {
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--e-global-color-secondary) !important;
  transition: all 0.3s ease-in-out;
}

.navbar-nav .nav-item a:hover {
  color: var(--e-global-color-accent) !important;
  background-color: transparent;
}

.navbar-nav .active > a {
  color: var(--e-global-color-accent) !important;
}

.navbar-nav li:last-child {
  margin-right: 0;
  padding-right: 0;
  /* margin-left: 50px; */
}

.navbar-nav li .contact_us {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  min-width: 160px;
  height: 52px;
  padding: 18px;
  border-radius: 30px;
  position: relative;
  display: inline-block;
  color: var(--e-global-color-secondary);
  background-color: var(--e-global-color-white);
  box-shadow: 0 5px 19px rgb(0 0 0 / 8%);
  border: 1px solid var(--e-global-color-secondary);
  transition: all 0.3s ease-in-out;
}

.navbar-nav li .contact_us i {
  font-size: 12px;
  margin-left: 24px;
  transition: all 0.3s ease-in-out;
  color: var(--e-global-color-secondary);
}

.navbar-nav li .contact_us:hover {
  color: var(--e-global-color-white) !important;
  background-color: var(--e-global-color-secondary);
  border: 1px solid var(--e-global-color-secondary);
}

.navbar-nav .active > .contact_us {
  color: var(--e-global-color-white) !important;
  background-color: var(--e-global-color-accent);
  border: 1px solid var(--e-global-color-accent);
}

.navbar-nav li .contact_us:hover i {
  color: var(--e-global-color-white);
}

.navbar-nav .active > .contact_us i {
  color: var(--e-global-color-white);
}

.navbar-collapse .drop-down-pages {
  text-align: left;
  margin-left: 0;
}

.navbar-nav .dropdown-menu {
  position: absolute;
  left: 0;
  top: 64px;
  min-width: 212px;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: 0px 0px 100px rgb(0 0 0 / 10%);
  background-color: var(--e-global-color-white);
}

.navbar-nav .drop-down-pages li {
  margin: 0;
  border-bottom: 1px solid var(--e-global-color-white);
}

.navbar-nav .drop-down-pages .nav-item a {
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  padding: 10px 20px;
  text-transform: uppercase;
  color: var(--e-global-color-secondary) !important;
  transition: all 0.3s ease-in-out;
}

.navbar-nav .drop-down-pages li:hover::after {
  display: none;
}

.navbar-nav .drop-down-pages li:first-child a::before {
  content: "";
  width: 24px;
  height: 12px;
  position: absolute;
  background-image: url(../images/nav-node.png);
  top: -12px;
  left: 8%;
  transition: all 0.3s ease-in-out;
}

.navbar-nav .drop-down-pages li:first-child a:hover::before {
  background-image: url(../images/nav-node-hover.png);
}

.navbar-nav .drop-down-pages .active:first-child > a::before {
  background-image: url(../images/nav-node-hover.png);
}

.navbar-nav .drop-down-pages li:last-child {
  margin: 0;
  border: none;
}

.navbar-nav .nav-item .dropdown-item:hover {
  color: var(--e-global-color-white) !important;
  background-color: var(--e-global-color-accent) !important;
}

.navbar-nav .drop-down-pages .active > a {
  color: var(--e-global-color-white) !important;
  background-color: var(--e-global-color-accent) !important;
}

.navbar-nav .drop-down-pages .active > a:hover {
  color: var(--e-global-color-white) !important;
  background-color: var(--e-global-color-accent) !important;
}

.navbar-expand-lg .drop-down-pages .nav-link {
  padding-left: 0;
}
.project-card-link {
  color: #000000;
}
/* language  */

#languageSelect {
  background-color: transparent;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  width: 60px;
  padding: 8px 12px;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: all 0.3s ease;
}

#languageSelect:hover {
  background-color: #f8f9fa;
  border-color: #333;
}

#languageSelect:focus {
  border-color: #333;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

#languageSelect::-ms-expand {
  display: none;
}

#languageSelect {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%333' d='M2 0L0 2h4zM2 5l2-2H0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 8px;
}

.language-wrapper {
  position: absolute;
  top: 10px;
  right: 20px;
}


/* Running Banner Styles */
.running-banner-container {
  width: 100%;
  /* height: 200px; */
  padding: 25px 0;
  overflow: hidden;
  /* background-color: #f8f9fa; */
  position: relative;
}

.running-banner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.banner-content {
  display: flex;
  /* white-space: nowrap; */
  animation: scroll 20s linear infinite;
}

.banner-content span {
  margin-right: 50px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  width: 100%;
  text-align: center;
  /* text-transform: uppercase; */
}

@keyframes scroll {
  0% {
      transform: translateX(100%);
  }
  100% {
      transform: translateX(-100%);
  }
}

/* Pause animation on hover */
.running-banner:hover .banner-content {
  animation-play-state: paused;
}

/* Banner */
.owl-carousel .owl-item img {
  max-height: 700px;
  object-fit: cover;
}
.architecture_banner_outer {
  background-color: var(--e-global-color-very-dark-mostly-white-orange);
}

.architecture-banner-con {
  padding: 50px 0;
}

.architecture-banner-con .banner-leftimage {
  position: absolute;
  top: 80px;
  left: 0;
}

.architecture-banner-con .banner-rightimage {
  position: absolute;
  bottom: 102px;
  right: 0;
}

.architecture-banner-con .banner_outer_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.architecture-banner-con .banner_outer_content h1 {
  width: 87%;
}

.architecture-banner-con .banner_outer_content p {
  margin-bottom: 32px;
}

.architecture-banner-con .banner_outer_content .banner_content {
  width: 77.5%;
}

.architecture-banner-con .banner_outer_content .banner_video,
.architecture-banner-con .banner_outer_content .video-icon {
  display: flex;
  align-items: center;
}

.architecture-banner-con .banner_outer_content .all_button {
  font-size: 16px;
  line-height: 16px;
  padding: 23px 35px;
}

.architecture-banner-con .banner_outer_content .all_button i {
  margin-left: 16px;
}

.architecture-banner-con .banner_outer_content .icon {
  height: 62px;
  width: 62px;
  line-height: 62px;
  margin: 0 16px 0 18px;
  position: relative;
  text-align: center;
  background-color: var(--e-global-color-secondary);
  border-radius: 100px;
  transition: all 0.3s ease-in-out;
}

.architecture-banner-con .banner_outer_content span {
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--e-global-color-secondary);
  transition: all 0.3s ease-in-out;
}

.architecture-banner-con .banner_outer_content .video-icon:hover .icon {
  background-color: var(--e-global-color-accent);
}

.architecture-banner-con .banner_outer_content .video-icon:hover span {
  color: var(--e-global-color-accent);
}

/* Categroy */

.category-con img {
  width: 100%;
}

.category-con .box {
  margin-top: -82px;
  padding: 35px 100px 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/black-backgroundimage.jpg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-con .box ul li {
  padding: 0 75px;
  display: inline-block;
  border-right: 1px solid rgb(255 255 255 / 17%);
}

.category-con .box ul li:first-child {
  padding-left: 0;
}

.category-con .box ul li:last-child {
  border: none;
  padding-right: 0;
}

.category-con .box ul li .value {
  margin-bottom: 8px;
}

.category-con .box ul li .number,
.category-con .box ul li .plus {
  font-size: 48px;
  line-height: 50px;
  font-weight: 700;
  color: var(--e-global-color-white);
}

.category-con .box ul li .text {
  font-size: 16px;
  line-height: 20px;
  display: block;
  color: var(--e-global-color-white);
}

.custom-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

.owl-dots {
  position: absolute;
  bottom: 20px;
  /* Điều chỉnh vị trí dots trong ảnh */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.owl-dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: 0.3s;
}

.owl-dot.active {
  background-color: white;
}

.owl-prev {
  left: 10px;
}

.owl-next {
  right: 10px;
}

/* About */

.about-con {
  padding: 230px 0;
}

.about-con .about-backgroundimage {
  position: absolute;
  right: 0;
  bottom: 0;
}

.about-con .about-backgroundimage img {
  opacity: 23%;
}

.about-con .about_content {
  padding: 50px 0 55px;
  background-color: var(--e-global-color-white);
}

.about-con .about_content h6 {
  margin-bottom: 12px;
}

.about-con .about_content h2 {
  margin-bottom: 18px;
}

.about-con .about_content .text1 {
  margin-bottom: 12px;
}

.about-con .about_content .text2 {
  margin-bottom: 38px;
}

.about-con .about_content a {
  padding: 22px 41px;
  background-color: var(--e-global-color-secondary);
}

.about-con .about_content a:hover {
  background-color: var(--e-global-color-accent);
}

.about-con .about_wrapper .about-image {
  position: relative;
  top: 0;
  left: 0;
}

.about-con .about_wrapper .rectangle {
  width: 556px;
  height: 694px;
  top: -70px;
  right: -285px;
  z-index: -1;
  position: absolute;
  border: 6px solid var(--e-global-color-accent);
}

.member-box {
  width: 100%;
  height: 430px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  cursor: pointer;
}

@media (max-width: 575px) {
  .member-box {
    display: flex;
    flex-direction: column;
  }
  .custom-nav-btn img {
    height: 40px;
  }
}

/* Service */
.service-con.service-about-con {
  background-color: white!important;
}

.service-con {
  padding: 148px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--e-global-color-very-pale-orange);
  /* background-image: url(../images/black-backgroundimage.jpg); */
}

.service-con .service_content h6 {
  margin-bottom: 12px;
}

.service-con .service_content h2 {
  margin-bottom: 25px;
}

.service-con .service_content .text {
  margin-bottom: 52px;
  padding: 0 40px;
  color: var(--dark);
}

.service-con .service_wrapper {
  margin-bottom: 60px;
}

.service-con .service-box {
  /* height: 440px; */
  padding: 50px 32px;
  text-align: center;
  color: var(--e-global-color-black);
  cursor: pointer;
  background-color: var(--e-global-color-light-grayish-orange);
  transition: all 0.3s ease-in-out;
}

.service-con .service-box .icon {
  width: 126px;
  height: 126px;
  line-height: 126px;
  margin-bottom: 32px;
  border-radius: 100%;
  text-align: center;
  display: inline-block;
  background-color: var(--e-global-color-very-dark-mostly-white-orange);
  transition: all 0.3s ease-in-out;
}

.service-con .service-box .icon img {
  width: 60px;
}

.service-con .service-box h4 {
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 15px;
}

.service-con .service-box p {
  margin-bottom: 12px;
  transition: all 0.3s ease-in-out;
}

.service-con .service-box:hover .icon {
  background-color: var(--e-global-color-white);
}

.service-con .service-box:hover .icon img {
  filter: none;
}

.service-con .view_all {
  padding: 21px 43px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.service-con .view_all i {
  margin-left: 24px;
}

.service-con .view_all:hover {
  background-color: var(--e-global-color-accent);
  border: 1px solid var(--e-global-color-accent);
}

/* Project */

.project-con {
  padding: 155px 0 158px;
  background-color: var(--e-global-color-very-dark-mostly-white-orange);
}

.project-con .project-leftimage {
  position: absolute;
  top: 355px;
  left: 0;
}

.project-con .project-rightimage {
  position: absolute;
  bottom: 395px;
  right: 0;
}

.project-con .project_wrapper {
  gap: 60px;
  display: grid;
  grid-template-columns: 40% 60%;
}

.project-con .project_content h6 {
  margin-bottom: 10px;
}

.project-con .project_content h2 {
  margin-bottom: 68px;
}

.project-con .project_wrapper1 .project-box {
  margin-bottom: 120px;
}

.project-con .project-box {
  transition: all 0.3s ease-in-out;
}

.project-con .project-box .project-image {
  margin-bottom: 28px;
}

.project-con .project-box .lower_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-con .project-box span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  display: block;
  margin-bottom: 12px;
  color: var(--e-global-color-accent);
}

.project-con .project-box i {
  font-size: 16px;
  width: 57px;
  height: 57px;
  line-height: 57px;
  right: 58px;
  position: relative;
  text-align: center;
  border-radius: 100%;
  color: var(--e-global-color-secondary);
  background-color: var(--e-global-color-white);
  border: 1px solid var(--e-global-color-secondary);
  box-shadow: 0 5px 19px 5px rgb(0 0 0 / 8%);
  transition: all 0.3s ease-in-out;
}

.project-con .project-box:hover i {
  color: var(--e-global-color-white);
  background-color: var(--e-global-color-accent);
  border: 1px solid var(--e-global-color-accent);
}

.project-con .project-box i:hover {
  color: var(--e-global-color-white);
  background-color: var(--e-global-color-secondary);
  border: 1px solid var(--e-global-color-secondary);
}

.project-con .project-box-content i {
  right: 42px;
}

.project-con .project_wrapper2 {
  gap: 44px;
  grid-template-columns: 60% 40%;
}

.project-con .project_wrapper2 .project-box4 {
  position: relative;
  top: -212px;
}


/* Category Tabs Styles */
.nav-tabs {
  border: none;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-tabs .nav-item {
  margin: 0;
}

.nav-tabs .nav-link {
  border: none;
  padding: 10px 25px;
  border-radius: 30px;
  background: #f5f5f5;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
}

.nav-tabs .nav-link:hover {
  color: var(--e-global-color-white);
  background-color: var(--e-global-color-accent);
}

.nav-tabs .nav-link.active {
  color: var(--e-global-color-white);
  background-color: var(--e-global-color-accent);
}

/* Responsive styles */
@media (max-width: 768px) {
  .nav-tabs {
      flex-direction: column;
      align-items: center;
  }

  .nav-tabs .nav-item {
      width: 100%;
      max-width: 300px;
      margin-bottom: 10px;
  }

  .nav-tabs .nav-link {
      width: 100%;
      text-align: center;
  }
}


/* shop  */
.shop-product-select {
  width: 211px;
  height: 50px;
  outline: none;
  padding: 4px 8px;
}

.shop-product-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;
}

.shop-product-card {
  width: 100%;
  height: 480px;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  cursor: pointer;
}

.shop-product-card:hover {
  transform: translateY(-5px);
}

.shop-product-card img {
  max-width: 100%;
  width: 100%;
  height: 311px;
  object-fit: cover;
}

.product-info {
  /* text-align: center; */
  width: 100%;
}

.product-title {
  font-weight: 700;
  color: black;
  font-size: 16px;
}

.product-price {
  font-size: 14px;
  margin: 0;
}

@media (max-width: 768px) {
  .shop-product-card {
    width: 100%;
    height: auto;
  }

  .shop-product-card img {
    width: 100%;
    height: auto;
  }
}
/* Journey */

.journey-con {
  padding: 154px 0 158px;
  background-color: var(--e-global-color-black);
}

.journey-con:before {
  content: "";
  position: absolute;
  opacity: 45%;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/about2.webp);
}

.journey-con .journey_content h1 {
  margin-bottom: 44px;
}

.journey-con .journey_content .all_button {
  font-size: 16px;
  line-height: 20px;
  padding: 21px 35px;
}

.journey-con .journey_content .all_button i {
  margin-left: 18px;
}

/* Faq */

.faq-con {
  padding: 152px 0 168px;
}

.faq-con .faq_content h6 {
  margin-bottom: 12px;
}

.faq-con .faq_content h2 {
  margin-bottom: 48px;
}

.faq-con .accordion-card {
  margin-bottom: 28px;
  width: 100%;
  background-color: var(--e-global-color-white);
}

.faq-con .accordion-card h5 {
  margin-bottom: 0;
  color: var(--e-global-color-secondary);
}

.faq-con .accordion-card:last-child {
  margin-bottom: 0;
}

.faq-con .accordion-card:has(.btn-link) {
  box-shadow: 0 1px 58px 1px rgb(249 74 36 / 8%);
}

.faq-con .accordion-card:has(.collapsed) {
  box-shadow: 0 1px 58px 1px rgb(0 0 0 / 5%);
}

.faq-con .accordion-card .btn-link h5 {
  color: var(--e-global-color-accent);
}

.faq-con .accordion-card .collapsed h5 {
  color: var(--e-global-color-secondary);
}

.faq-con .accordian-inner .card-header {
  padding: 0;
  margin-bottom: 0;
  background: none;
  border: none;
}

.faq-con .accordian-inner .card-header a {
  padding: 16px 24px 20px 30px;
}

.faq-con .accordian-inner .card-body {
  padding: 0 30px 20px;
}

.faq-con .accordion-card a.btn.btn-link:focus {
  outline: none;
  box-shadow: none;
}

.faq-con .accordian-inner .accordion-card i {
  position: absolute;
  right: 20px;
  margin: -6px 0;
}

.faq-con .accordian-inner .accordion-card .btn {
  text-decoration: none;
  text-align: left;
  display: block;
  color: var(--e-global-color-white);
}

.faq-con .accordion-card a.btn.btn-link {
  position: relative;
}

.faq-con .accordion-card .btn-link:before {
  content: "\f063";
  font-size: 19px;
  top: 25%;
  right: 24px;
  position: absolute;
  font-family: "FontAwesome";
  color: var(--e-global-color-accent);
}

.faq-con .accordion-card .collapsed:before {
  content: "\f061";
  color: var(--e-global-color-secondary);
}

/* Update */

.update-con {
  padding: 145px 0 150px;
  background-color: var(--e-global-color-very-dark-mostly-white-orange);
}

.update-con .update-leftimage {
  position: absolute;
  bottom: 110px;
  left: 0;
}

.update-con .update-rightimage {
  position: absolute;
  top: 55px;
  right: 0;
}

.update-con .update_wrapper .update-image {
  position: absolute;
}

.update-con .update_wrapper .top-image {
  top: -145px;
}

.update-con .update_wrapper .update-image1 {
  left: -110px;
}

.update-con .update_wrapper .update-image2 {
  right: -110px;
}

.update-con .update_wrapper .bottom-image {
  bottom: -150px;
}

.update-con .update_wrapper .update-image3 {
  left: -214px;
}

.update-con .update_wrapper .update-image4 {
  right: -215px;
}

.update-con .update_content h6 {
  margin-bottom: 12px;
}

.update-con .update_content h2 {
  margin-bottom: 40px;
}

.update-con .update_content input {
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  padding: 19px 38px;
  margin-right: 18px;
  width: 496px;
  position: relative;
  color: var(--e-global-color-text);
  background-color: var(--e-global-color-white);
  border: 1px solid var(--e-global-color-white);
  border-radius: 30px;
  overflow: visible;
  outline: none;
}

.update-con .update_content input:focus {
  border: 1px solid var(--e-global-color-accent);
}

.update-con .update_content button {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  padding: 22px 39px;
  border: none;
  position: relative;
  border-radius: 30px;
  text-transform: uppercase;
  color: var(--e-global-color-white);
  background: var(--e-global-color-accent);
  overflow: visible;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.update-con .update_content button i {
  font-size: 12px;
  margin-left: 24px;
  transition: all 0.3s ease-in-out;
  color: var(--e-global-color-white);
}

.update-con .update_content button:hover {
  color: var(--e-global-color-white);
  background: var(--e-global-color-secondary);
}

/* Footer */

.footer-con {
  background-color: var(--e-global-color-secondary);
}

.footer-con .middle_portion {
  padding: 125px 0;
}

.footer-con .middle_portion .footer-logo {
  margin-bottom: 24px;
  display: flex;
  border-bottom: 1px solid var(--e-global-color-light-grayish-red);
  padding-bottom: 24px;
  align-items: center;
  gap: 12px;
  color: white;
  font-size: 30px;
}

.footer-con .middle_portion .footer-logo img {
  width: 45px;
}

.footer-con .middle_portion .logo-content p {
  margin-bottom: 24px;
  color: var(--e-global-color-light-grayish-red);
}

.footer-con .middle_portion .social-icons li {
  display: inline-block;
  margin: 0 3px;
  padding: 0 !important;
  transition: all 0.3s ease-in-out;
}

.footer-con .middle_portion .social-icons li:first-child {
  margin-left: 0;
}

.footer-con .middle_portion .social-icons li:last-child {
  margin-right: 0;
}

.footer-con .middle_portion .social-icons i {
  font-size: 14px;
  height: 40px;
  width: 40px;
  line-height: 37px;
  top: 0;
  left: 0;
  border-radius: 100%;
  text-align: center;
  color: var(--e-global-color-white);
  background-color: transparent;
  border: 1px solid rgb(255 255 255 / 25%);
  transition: all 0.3s ease-in-out;
}

.footer-con .middle_portion .social-icons a:hover i {
  color: var(--e-global-color-white);
  background: var(--e-global-color-accent);
  border: 1px solid var(--e-global-color-accent);
}

.footer-con .middle_portion h4 {
  margin-bottom: 36px;
  color: var(--e-global-color-white);
}

.footer-con .middle_portion li {
  padding-left: 14px;
  margin-bottom: 5px;
}

.footer-con .middle_portion li i {
  font-size: 10px;
  top: -2px;
  left: -15px;
  position: relative;
  color: var(--e-global-color-accent);
}

.footer-con .middle_portion li a {
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  text-decoration: none;
  color: var(--e-global-color-light-grayish-red);
  transition: all 0.3s ease-in-out;
}

.footer-con .middle_portion li a:hover {
  color: var(--e-global-color-accent);
}

.footer-con .middle_portion li:last-child {
  margin-bottom: 0 !important;
}

.footer-con .middle_portion .links {
  padding-left: 86px;
}

.footer-con .middle_portion .support_links {
  padding-left: 25px;
}

.footer-con .middle_portion .icon {
  padding-left: 60px;
}

.footer-con .middle_portion .icon .text {
  position: relative;
  margin-bottom: 12px;
  padding-left: 32px;
  display: inline-block;
}

.footer-con .middle_portion .icon a,
.footer-con .middle_portion .icon p {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--e-global-color-light-grayish-red);
  transition: all 0.3s ease-in-out;
}

.footer-con .middle_portion .icon i {
  font-size: 14px;
  left: 1px;
  top: 7px;
  position: absolute;
  color: var(--e-global-color-light-grayish-red);
  transition: all 0.3s ease-in-out;
}

.footer-con .middle_portion .icon li:hover a,
.footer-con .middle_portion .icon li:hover p,
.footer-con .middle_portion .icon li:hover i {
  color: var(--e-global-color-accent);
}

.footer-con .copyright p {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  padding: 25px 0;
  text-align: center;
  color: var(--e-global-color-light-grayish-red);
  border-top: 1px solid rgb(95 86 85 / 15%);
}

/* Footer Upper */

.footer-upper-con {
  padding: 58px 0;
  background-color: var(--e-global-color-accent);
}

.footer-upper-con .upper_portion .row {
  align-items: center;
}

.footer-upper-con .upper_portion input {
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  padding: 19px 28px;
  margin-right: 16px;
  width: 476px;
  position: relative;
  color: var(--e-global-color-text);
  background-color: var(--e-global-color-white);
  border: 1px solid transparent;
  border-radius: 30px;
  overflow: visible;
  outline: none;
}

.footer-upper-con .upper_portion input:focus {
  border: 1px solid var(--e-global-color-secondary);
}

.footer-upper-con .upper_portion button {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  padding: 22px 39px;
  text-transform: uppercase;
  color: var(--e-global-color-white);
  background-color: var(--e-global-color-secondary);
  position: relative;
  border: none;
  border-radius: 30px;
  overflow: visible;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.footer-upper-con .upper_portion button i {
  font-size: 12px;
  margin-left: 24px;
  transition: all 0.3s ease-in-out;
  color: var(--e-global-color-white);
}

.footer-upper-con .upper_portion button:hover {
  color: var(--e-global-color-secondary);
  background-color: var(--e-global-color-white);
}

.footer-upper-con .upper_portion button:hover i {
  color: var(--e-global-color-secondary);
}

/* Sub banner */

.sub_banner_outer .header {
  border: none;
  background-color: var(--e-global-color-very-dark-mostly-white-orange);
}

.sub-banner {
  padding: 152px 0 165px;
  background-color: var(--e-global-color-black);
}

.sub-banner::before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 50%;
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--dynamic-background, url(../images/about-banner.jpg)); /* Fallback to default */
}

.sub-banner .sub_banner_content h1 {
  margin-bottom: 40px;
  position: relative;
}

.sub-banner .sub_banner_content .box {
  padding: 14px 32px;
  border-radius: 30px;
  text-align: center;
  display: inline-block;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 40%);
  transition: all 0.3s ease-in-out;
}

.sub-banner .sub_banner_content .box span {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  display: inline-block;
  color: var(--e-global-color-white);
  transition: all 0.3s ease-in-out;
}

.sub-banner .sub_banner_content .box a span:hover {
  color: var(--e-global-color-accent);
}

.sub-banner .sub_banner_content .box .slash {
  margin: 0 10px 0 8px;
}

/* Contact Page */

/* Contact Info */

.contact-con {
  padding: 152px 0 155px;
}

.contact-con .contact_info {
  padding: 52px 36px 56px;
  background-color: #EBCFB3;
  color: var(--e-global-color-black);
}

.contact-con .contact-box {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(255 255 255 / 30%);
  transition: all 0.3s ease-in-out;
}

.contact-con .contact-box:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: none;
}

.contact-con .contact-box .box-image {
  float: left;
  width: 15%;
}

.contact-con .contact-box figure {
  position: relative;
  top: 8px;
  transition: all 0.3s ease-in-out;
}

.contact-con .contact-box:hover figure {
  transform: translateY(-5px);
}

.contact-con .contact-box .box-content {
  position: relative;
  padding-left: 20px;
  display: inline-block;
  width: 85%;
}

.contact-con .contact-box h5 {
  margin-bottom: 12px;
  color: var(--e-global-color-black);
}

.contact-con .contact-box .heading {
  margin-bottom: 11px;
}

.contact-con .contact-box p {
  margin-bottom: 0;
}

.contact-con .contact-box .box-content p,
.contact-con .contact-box .box-content a {
  color: var(--e-global-color-black);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.contact-con .contact-box .box-image i {
  font-size: 24px;

}
.contact-con .contact-box .box-content a:hover {
  color: var(--e-global-color-secondary);
}

/* Contact Form */

.contact-con .contact_form {
  padding-left: 40px;
}

.contact-con .contact_form h6 {
  margin-bottom: 3px;
}

.contact-con .contact_form h2 {
  margin-bottom: 35px;
}

.contact-con .contact_form .form-group {
  margin-bottom: 24px;
}

.contact-con .contact_form .small_box {
  margin-right: 14px;
}

.contact-con .contact_form input,
.contact-con .contact_form textarea {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  width: 338px;
  color: var(--e-global-color-text);
  background-color: var(--e-global-color-white);
  border: 1px solid var(--e-global-color-white);
  box-shadow: 0 1px 58px 1px rgb(0 0 0 / 4%);
  position: relative;
  border-radius: 28px;
  padding: 17px 30px;
  overflow: visible;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.contact-con .contact_form textarea {
  height: 107px;
  resize: none;
  overflow: auto;
  border-radius: 20px;
}

.contact-con .contact_form .message {
  margin-bottom: 25px;
}

.contact-con .contact_form input:focus,
.contact-con .contact_form textarea:focus {
  border: 1px solid var(--e-global-color-secondary);
}

.contact-con .contact_form span {
  font-size: 12px;
  line-height: 12px;
  font-weight: 400;
  margin-top: 5px;
  left: 22px;
  display: block;
  position: absolute;
  color: var(--e-global-color-pure-red);
}

.contact-con .contact_form .submit_now {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  padding: 22px 46px;
  text-align: center;
  display: inline-block;
  position: relative;
  border-radius: 30px;
  text-transform: uppercase;
  color: var(--e-global-color-white);
  background-color: var(--e-global-color-secondary);
  transition: all 0.3s ease-in-out;
  text-align: center;
  outline: none;
  border-style: none;
}

.contact-con .contact_form .submit_now:hover {
  color: var(--e-global-color-white);
  background-color: var(--e-global-color-accent);
}

.contact-con .contact_form .submit_now i {
  font-size: 12px;
  padding-left: 32px;
  color: var(--e-global-color-white);
  transition: all 0.3s ease-in-out;
}

/* Map */

.map-con {
  overflow: hidden;
  margin-bottom: -7px;
}

.map-con iframe {
  width: 100%;
  height: 590px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.map-con iframe:hover {
  filter: none;
}

/* Faq Page */

/* Design */

.design-con {
  padding: 142px 0 226px;
  background-color: var(--e-global-color-black);
}

.design-con:before {
  content: "";
  position: absolute;
  opacity: 65%;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/banner4.webp);
}

.design-con .design_content h1 {
  margin-bottom: 44px;
}

.design-con .design_content .all_button {
  font-size: 16px;
  line-height: 20px;
  padding: 21px 35px;
}

.design-con .design_content .all_button i {
  margin-left: 18px;
}

/* Article */

.article-con {
  padding: 162px 0 156px;
}

.article-con .article_content h6 {
  margin-bottom: 12px;
}

.article-con .article_content h2 {
  margin-bottom: 48px;
}

.article-con .article-box .article-image {
  margin-bottom: 20px;
  overflow: hidden;
}

.article-con .article-box .article-image img {
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.article-con .article-box:hover .article-image img {
  transform: scale(1.1);
}

.article-con .article-box .content span {
  font-size: 12px;
  line-height: 12px;
  display: inline-block;
  margin-bottom: 14px;
  color: var(--e-global-color-accent);
}

.article-con .article-box .content .dash {
  margin: 0 3px;
}

.article-con .article-box .content h5 {
  padding-right: 58px;
  color: var(--e-global-color-secondary);
  transition: all 0.3s ease-in-out;
}

.article-con .article-box .content h5:hover {
  color: var(--e-global-color-accent);
}

/* Project Page */

/* Project */

.projectpage-con {
  padding: 155px 0 132px;
}

.projectpage-con .project_content h6 {
  margin-bottom: 12px;
}

.projectpage-con .project_content h2 {
  margin-bottom: 48px;
}

.projectpage-con .project-box {
  margin-bottom: 30px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.projectpage-con .project-box:hover img {
  opacity: 40%;
}

.projectpage-con .project-box:hover figure {
  background-color: var(--e-global-color-black);
}

.projectpage-con .project-box .project-image,
.projectpage-con .project-box img {
  transition: all 0.3s ease-in-out;
}

.projectpage-con .lower_content {
  padding: 0 20px;
}

.projectpage-con .lower_content .content {
  position: absolute;
  bottom: 18px;
  background-color: var(--e-global-color-white);
  width: 310px;
  height: 79px;
  padding: 12px 20px;
}

.projectpage-con .project-box span {
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  display: block;
  margin-bottom: 3px;
  color: var(--e-global-color-accent);
}

.projectpage-con .project-box a {
  color: var(--e-global-color-secondary);
  transition: all 0.3s ease-in-out;
}

.projectpage-con .project-box a:hover {
  color: var(--e-global-color-accent);
}

.projectpage-con .project-box h3 {
  font-size: 21px;
  line-height: 24px;
}

.projectpage-con .project-box i {
  font-size: 20px;
  width: 64px;
  height: 64px;
  line-height: 64px;
  bottom: 64px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  text-align: center;
  border-radius: 100%;
  color: var(--e-global-color-white);
  background-color: var(--e-global-color-accent);
  transition: all 0.3s ease-in-out;
  display: none;
}

.projectpage-con .project-box:hover i {
  display: block;
}

.projectpage-con .project-box i:hover {
  transform: translateY(-5px);
}

/* product  */
.productpage-con {
  background-color: var(--e-global-color-very-dark-mostly-white-orange);
}

/* About */

.serviceabout-con {
  background-color: var(--e-global-color-very-pale-orange);
}

.serviceabout-con::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 56%;
  height: 100%;
  background-image: url(../images/about-backgroundimage.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.serviceabout-con .circle {
  width: 293px;
  height: 293px;
  line-height: 293px;
  top: 260px;
  right: -94px;
  position: absolute;
  border-radius: 100%;
  background-color: var(--e-global-color-white);
}

.serviceabout-con .about_outer_content {
  padding: 160px 0;
}

.about_outer_content > .history-content > p,
h2 {
  color: black !important;
}

.serviceabout-con .about_content {
  padding: 82px 80px 88px;
  z-index: 1;
  position: relative;
  background-color: var(--e-global-color-accent);
}

.serviceabout-con .about_content h6 {
  margin-bottom: 12px;
}

.serviceabout-con .about_content h2 {
  margin-bottom: 18px;
}

.serviceabout-con .about_content p {
  margin-bottom: 34px;
  color: var(--e-global-color-very-pale-red);
}

.serviceabout-con .about_content a {
  padding: 22px 41px;
  background-color: var(--e-global-color-secondary);
}

.serviceabout-con .about_content a:hover {
  color: var(--e-global-color-secondary);
  background-color: var(--e-global-color-white);
}

.serviceabout-con .about_content a:hover i {
  color: var(--e-global-color-secondary);
}

/* About Page */

/* About */

.aboutpage-con {
  padding: 160px 0;
}

.aboutpage-con .about-backgroundimage {
  position: absolute;
  right: 0;
  bottom: 0;
}

.aboutpage-con .about-backgroundimage img {
  opacity: 23%;
}

.aboutpage-con .about_wrapper .about-image {
  position: absolute;
  top: 0;
  right: -190px;
}

.aboutpage-con .about_outer_content {
  padding: 80px 0;
}

.aboutpage-con .about_content {
  padding: 82px 80px 88px;
  background-color: var(--e-global-color-accent);
}

.aboutpage-con .about_content h6 {
  margin-bottom: 12px;
}

.aboutpage-con .about_content h2 {
  margin-bottom: 18px;
}

.aboutpage-con .about_content p {
  margin-bottom: 34px;
  color: var(--e-global-color-very-pale-red);
}

.aboutpage-con .about_content a {
  padding: 22px 41px;
  background-color: var(--e-global-color-secondary);
}

.aboutpage-con .about_content a:hover {
  color: var(--e-global-color-secondary);
  background-color: var(--e-global-color-white);
}

.aboutpage-con .about_content a:hover i {
  color: var(--e-global-color-secondary);
}

/* Vision */

.vision-con {
  padding: 178px 0 198px;
}

.vision-con .vision_content {
  padding-top: 80px;
}

.vision-con .vision_content h6 {
  margin-bottom: 12px;
}

.vision-con .vision_content h2 {
  margin-bottom: 18px;
  padding-right: 20px;
}

.vision-con .vision_content .text {
  margin-bottom: 17px;
}

.vision-con .vision_content ul {
  margin-bottom: 36px;
}

.vision-con .vision_content ul li {
  position: relative;
  margin-bottom: 9px;
}

.vision-con .vision_content ul li:last-child {
  margin-bottom: 0;
}

.vision-con .vision_content ul li i {
  font-size: 14px;
  top: 3px;
  left: 0;
  position: absolute;
  color: var(--e-global-color-accent);
}

.vision-con .vision_content ul li p {
  line-height: 20px;
  font-weight: 500;
  padding-left: 30px;
  color: var(--e-global-color-secondary);
}

.vision-con .vision_content a {
  padding: 22px 41px;
  background-color: var(--e-global-color-secondary);
}

.vision-con .vision_content a:hover {
  background-color: var(--e-global-color-accent);
}

.vision-con .vision_wrapper .vision-image1 {
  position: relative;
  left: 34px;
  /* top: 52px; */
}

.vision-con .vision_wrapper .image img {
  max-width: 285px;
}

.vision-con .vision_wrapper .vision-image2 {
  position: absolute;
  right: 0;
  top: 0;
}

/* Footer Upper */

.footer-con .upper_content {
  padding: 93px 150px 103px;
  margin-top: -235px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--e-global-color-accent);
  background-image: url(../images/footer3-backgroundimage.jpg);
}

.footer-con .upper_content h6 {
  margin-bottom: 12px;
}

.footer-con .upper_content h2 {
  margin-bottom: 40px;
  padding: 0 85px;
}

.footer-con .upper_content input {
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  padding: 19px 38px;
  margin-right: 18px;
  width: 596px;
  position: relative;
  color: var(--e-global-color-text);
  background-color: var(--e-global-color-white);
  border: 1px solid var(--e-global-color-white);
  border-radius: 30px;
  overflow: visible;
  outline: none;
}

.footer-con .upper_content input:focus {
  border: 1px solid var(--e-global-color-secondary);
}

.footer-con .upper_content button {
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  padding: 22px 39px;
  border: none;
  position: relative;
  border-radius: 30px;
  text-transform: uppercase;
  color: var(--e-global-color-white);
  background: var(--e-global-color-secondary);
  overflow: visible;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.footer-con .upper_content button i {
  font-size: 12px;
  margin-left: 24px;
  transition: all 0.3s ease-in-out;
  color: var(--e-global-color-white);
}

.footer-con .upper_content button:hover {
  color: var(--e-global-color-secondary);
  background: var(--e-global-color-white);
}

.footer-con .upper_content button:hover i {
  color: var(--e-global-color-secondary);
}

/* Service Detail */

.service_detail {
  padding: 130px 0 120px;
}

.service_detail .main-box {
  position: relative;
}

.service_detail .main-box .image {
  margin-bottom: 30px;
}

.service_detail .main-box .image img {
  width: 100%;
}

.service_detail .main-box h3 {
  font-size: 24px;
  line-height: 30px;
}

.service_detail .main-box p {
  margin-bottom: 10px;
}

.service_detail .main-box .text2 {
  margin-bottom: 20px;
}

.service_detail .main-box .list {
  margin-bottom: 20px;
}

.service_detail .main-box .list li {
  margin-bottom: 6px;
  padding-left: 28px;
  line-height: 20px;
  font-weight: 500;
  position: relative;
  color: var(--e-global-color-text);
}

.service_detail .main-box .list li i {
  font-size: 9px;
  height: 16px;
  width: 16px;
  line-height: 16px;
  top: 2px;
  left: 0;
  border-radius: 100px;
  position: absolute;
  text-align: center;
  display: inline-block;
  background-color: var(--e-global-color-accent);
  color: var(--e-global-color-white);
}

.servicedetail-page {
  background-color: var(--e-global-color-very-dark-mostly-white-orange);
}

.servicedetail-page h2 {
  margin-bottom: 45px !important;
}

.servicedetail-page .service-box {
  box-shadow: none;
}

/* 404 Page */

.error_page {
  height: 100vh;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background-color: var(--e-global-color-very-dark-mostly-white-orange);
}

.error_page .error_content h1 {
  font-size: 140px;
  line-height: 140px;
  margin-bottom: 40px;
  color: var(--e-global-color-secondary);
}

.error_page .error_content .text {
  font-size: 36px;
  line-height: 40px;
  font-weight: 500;
  margin-bottom: 20px;
  color: var(--e-global-color-secondary);
}

.error_page .error_content .text2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  margin-bottom: 30px;
  color: var(--e-global-color-text);
}

.error_page .error_content .back_home {
  font-size: 16px;
  line-height: 15px;
  font-weight: 500;
  padding: 21px 30px;
  text-align: center;
  border-radius: 30px;
  display: inline-block;
  position: relative;
  color: var(--e-global-color-white);
  background: var(--e-global-color-accent);
  transition: all 0.3s ease-in-out;
}

.error_page .error_content .back_home:hover {
  color: var(--e-global-color-white);
  background: var(--e-global-color-secondary);
}

.error_page .error_content .back_home i {
  font-size: 12px;
  margin-left: 24px;
  transition: all 0.3s ease-in-out;
  color: var(--e-global-color-white);
}

/* Back to top button */

#scroll-top {
  display: inline-block;
  background-color: var(--e-global-color-accent);
  width: 48px;
  height: 48px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 40px;
  right: 40px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: spineer 2s infinite;
  animation: spineer 2s infinite;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

#scroll-top::after {
  content: "\f062";
  font-family: "Font Awesome 5 free";
  font-size: 20px;
  line-height: 20px;
  color: #fff;
  font-weight: 600;
}

#scroll-top.show {
  opacity: 1;
  visibility: visible;
}

#scroll-top:hover {
  transform: translateY(-5px);
}

@-webkit-keyframes spineer {
  from {
    box-shadow: 0 0 0 0 rgb(230 177 39 / 41%);
  }

  to {
    box-shadow: 0 0 0 35px rgba(250, 87, 51, 0.01);
  }
}

@keyframes spineer {
  from {
    box-shadow: 0 0 0 0 rgb(230 177 39 / 41%);
  }

  to {
    box-shadow: 0 0 0 35px rgba(250, 87, 51, 0.01);
  }
}

/* zalo */
#zalo {
  display: inline-block;
  background-color: #1182fc;
  /* Màu xanh đặc trưng của Zalo */
  width: 48px;
  height: 48px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 100px;
  /* Để không bị chồng lên nút Back To Top */
  right: 40px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: spineer 2s infinite;
  animation: spineer 2s infinite;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

#zalo::after {
  background-image: url('../images/zalo-icon.png');
  content: "";
  display: inline-block;
  background-size: cover;
  width: 30px;
  height: 30px;
}

#zalo:hover {
  transform: translateY(-5px);
}

 /* tiktok  */

 #tiktok {
  display: inline-block;
  background-color: var(--e-global-color-black);
  /* Màu xanh đặc trưng của Zalo */
  width: 48px;
  height: 48px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 160px;
  /* Để không bị chồng lên nút Back To Top */
  right: 40px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: spineer 2s infinite;
  animation: spineer 2s infinite;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* #tiktok::after {
  content: "\e07b";
  font-family: "Font Awesome 5 free";
  font-size: 20px;
  line-height: 20px;
  color: #fff;
  font-weight: 600;
} */

#tiktok:hover {
  transform: translateY(-5px);
}


/* facebook */
#facebook {
  display: inline-block;
  background-color: #1182fc;
  width: 48px;
  height: 48px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 220px;
  right: 40px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: spineer 2s infinite;
  animation: spineer 2s infinite;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

#facebook:hover {
  transform: translateY(-5px);
}

/* Preloader -------------------------------------------------------*/

/* Loader Styles start here */
.loader-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 99999;
}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  font-size: 0;
  color: var(--e-global-color-accent);
  display: inline-block;
  margin: -25px 0 0 -25px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.lead {
  font-size: 13px;
}

.loader div {
  background-color: var(--e-global-color-accent);
  display: inline-block;
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  opacity: 0.5;
  border-radius: 50%;
  -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
  animation: ballPulseDouble 2s ease-in-out infinite;
}

.loader div:last-child {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes ballPulseDouble {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes ballPulseDouble {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* Preloader -------------------------------------------------------*/