/******************************************************************
  Theme Name: Ecugie Technologies
  Description: Ecugie Technologies bootstrap tamplate
  Author: Colorib
  Author URI: https://www.colorib.com//
  Version: 1.0
  Created: Colorib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Banner Section
6.  Product Section
7.  Intagram Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

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

/* Template default CSS
/*----------------------------------------*/

html,
body {
  height: 100%;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* To adjust margins */
  /* position: relative; */
  /* max-width: 100%; */
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: #d15220;
  font-weight: 500;
  font-family: "Aldrich", sans-serif;
  
}
h5,
h6 {
  margin: 0;
  color: #0A1B2A;
  font-weight: 400;
  font-family: "Aldrich", sans-serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  color: #0A1B2A;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
  border-radius: 12px;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a {
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #F8F9FA;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
  margin-bottom: 40px;
}

.section-title span {
  background: #0A1B2A;
  color: #F8F9FA;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  padding: 4px 16px;
  margin-bottom: 12px;
}

.section-title h2 {
  font-size: 36px;
  color: #004AAD;
  line-height: 50px;
  text-transform: uppercase;
}

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

.spad {
  /* padding-top: 100px; */
  padding-bottom: 57px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */

.primary-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 50px;
  color: #f8faf8;
  position: relative;
}

.primary-btn.normal-btn {
  color: #0A1B2A;
}

.primary-btn.normal-btn:before {
  border-color: #0072FF;
}

.primary-btn.normal-btn:after {
  border-color: #0072FF;
}

.primary-btn:before {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 28px;
  width: 28px;
  border-left: 2px solid #0072FF;
  border-bottom: 2px solid #0072FF;
  content: "";
  border-radius: 0 0 0 4px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.primary-btn:after {
  position: absolute;
  right: 0;
  top: 0;
  height: 28px;
  width: 28px;
  border-right: 2px solid #0072FF;
  border-top: 2px solid #0072FF;
  content: "";
  border-radius: 0 4px 0 0;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.primary-btn:hover:before {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}

.primary-btn:hover:after {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}

.site-btn {
  font-size: 16px;
  color: #F8F9FA;
  background: #0072FF;
  font-weight: 600;
  border: none;
  display: inline-block;
  padding: 14px 36px;
}

/* Preloder */

#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #0A1B2A;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }

  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }

  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

/*---------------------
  Header
-----------------------*/

.header {
  position: fixed;
  background: #0072FF;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  padding: 40px 0 0;
  transition: transform 0.4s ease-in-out;
}

.header.header-normal {
  position: relative;
  padding: 30px 0 30px;
}

.header.header-normal {
  position: relative;
  padding: 30px 0 30px;
}

.header__menu {
  text-align: center;
}

.header__menu ul li {
  list-style: none;
  display: inline-block;
  position: relative;
  margin-right: 40px;
}

.header__menu ul li a:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.header__menu ul li:hover a:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.header__menu ul li:hover .dropdown {
  top: 32px;
  opacity: 1;
  visibility: visible;
}

.header__menu ul li:last-child {
  margin-right: 0;
}

.header__menu ul li a {
  font-size: 15px;
  color: #F8F9FA;
  display: inline-block;
  font-weight: 600;
  padding: 5px 0;
  position: relative;
  text-decoration: none;
}

.header__menu ul li a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #004AAD;
  -webkit-transition: all, 0.4s;
  -o-transition: all, 0.4s;
  transition: all, 0.4s;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scaleX(0);
  transform-origin: left;
}

/* commented this part because dropdown box is showing in list form and rewritten it with copy and pasting */

/* .header__menu ul li .dropdown {
  position: absolute;
  left: 0;
  top: 62px;
  width: 140px;
  background: #F8F9FA;
  text-align: left;
  padding: 5px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}

.header__menu ul li .dropdown li a {
  font-size: 14px;
  color: #031716;
  font-weight: 400;
  padding: 5px 20px;
  text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
  display: none;
} */
/* change this part for Drop Down Height */
.header__menu ul li:hover .dropdown {
  top: 88px;
  opacity: 1;
  visibility: visible;
}

.header__menu ul li .dropdown {
  font-size: 16px;
  position: fixed;
  left: 0;
  right: 0;
  top: 105px;
  width: 100%;
  background: #0072FF;
  padding: 30px 30px;
  height: 250px;
  /* Optional: directly set height */
  overflow-y: auto;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-wrap: wrap;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); */
  /* border-radius: 4px; */
  text-align: left;
}

/* Dropdown columns */
.header__menu ul li .dropdown li {
  width: 33.33%;
  display: block;
  margin: 8px 0;
  padding: 0 10px;
  text-align: left;
}

/* Dropdown links */
.header__menu ul li .dropdown li a {
  font-size: 14px;
  color: #F8F9FA;
  font-weight: 400;
  padding: 5px 0;
  text-transform: capitalize;
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.header__menu ul li .dropdown li a:after {
  content: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #004AAD;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.header.hide-header {
  transform: translateY(-100%);
  opacity: 0;
}

.header {
  opacity: 1;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.header__widget {
  text-align: right;
}

.header__widget span {
  font-size: 14px;
  font-family: "Aldrich", sans-serif;
  color: #F8F9FA;
  display: block;
  /* margin-bottom: 10px; */
}

.header__widget h4 {
  font-size: 22px;
  color: #004AAD;
}

.offcanvas-menu-wrapper {
  display: none;
}

.canvas__open {
  display: none;
}

/* Overlay covers the full screen */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1050;
}

/* Panel positioned bottom-right */
.slide-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100vh;
  background: #ffffff;
  /* Panel background */
  overflow-y: auto;
  box-shadow: -4px -4px 15px #004AAD;
  /* Updated shadow color */
  border-top-left-radius: 12px;
  border: 2px solid #004AAD;
  /* Updated border color */
  animation: slideIn 0.3s ease-out;
  color: #004AAD;
  /* Updated text color */
}

/* Style for headings inside the form */
.slide-panel h1,
.slide-panel h2,
.slide-panel h3,
.slide-panel label,
.slide-panel p {
  color: #004AAD;
}

/* Buttons inside the form */
.form .primary-btn {
  /* background: transparent; */
  border: none;
  background: #004AAD;
  color: #F8F9FA;
  transition: 0.3s ease-in-out;
}

.form span {
  color: #F8F9FA;
}

.form .callto__text span {
  color: #F8F9FA;
  margin: 0 0 0 0px;
}

.form .primary-btn.normal-btn:hover {
  border-radius: 4px;
  background: #004AAD;
  color: #ffffff;
}

/* Make the first empty option look like a placeholder */

.form input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus {
  border-color: #004AAD;
  box-shadow: 0 0 0 0.2rem #0A1B2A;
}

.form-check {
  text-align-last: left;
}

.form-check-input {
  border-color: #004AAD;
}

.form-check-input:checked {
  background-color: #004AAD;
  border-color: #0A1B2A;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem #004AAD;
}

.job-options ul li {
  margin: 0 0 0 28px;
}

.apply {
  left: 500px;
}

/* Smooth slide from bottom-right */
@keyframes slideIn {
  from {
    transform: translate(100%, 100%);
  }

  to {
    transform: translate(0, 0);
  }
}

/* Responsive for phones and tablets */
@media (max-width: 768px) {
  .slide-panel {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    /* Remove rounded corners on mobile */
  }
}

/* Base styling for the floating form panel */
.resume-upload {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50vw;
  /* max-width: 600px; */
  /* height: 100%; */
  background: #fff;
  box-shadow: -4px -4px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(48px);
  /* transition: opacity 0.4s ease-in-out; */
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.resume-upload h4 {
  text-align: left;
  margin: 31px 0 18px 0px;
}

.resume-upload.active {
  transform: translateY(0);
}

.resume-upload>* {
  flex: 1;
  /* stretch child content to fill height */
  overflow-y: auto;
  /* scroll inside */
}

/* Mobile responsive */
@media (max-width: 768px) {
  .resume-upload {
    width: 100%;
  }
}

.resume-upload .container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 20px;
}

/* Form background */
.form-background {
  padding: 20px;
}

/* Smooth scrolling inside */
.resume-upload::-webkit-scrollbar {
  width: 6px;
}

.resume-upload::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.resume-upload::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#addSocialBtn {
  background-color: #004AAD;
  color: white;
  font-weight: 600;
  padding: 8px 18px;
  font-size: 15px;
  border-radius: 8px;
  border: none;
  transition: all 0.25s ease-in-out;
}

.resume-upload input.is-invalid+.invalid-feedback,
input.is-invalid~.invalid-feedback {
  display: block;
}

#addSocialBtn:hover {
  background-color: #004AAD;
  transform: scale(1.05);
}

#addSocialBtn:active {
  background-color: #004AAD;
  transform: scale(0.96);
}

.work-mode label {
  color: black !important;
}

.mobile-close-btn {
  display: none;
  /* hidden by default */
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  font-weight: bold;
  color: #004AAD;
  cursor: pointer;
  z-index: 1100;
}

/* Show close button only on mobile */
@media (max-width: 768px) {
  .mobile-close-btn {
    display: block;
  }
}

/*---------------------
  Hero
-----------------------*/

.hero {
  position: relative;
}

.hero__items {
  height: 960px;
  padding: 0 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-height: 100vh;
}

.hero__text {
  max-width: 820px;
  text-align: center;
}

.hero__text h2 {
  color: #F8F9FA;
  font-size: 42px;
  line-height: 80px;
  text-transform: uppercase;
  margin-bottom: 45px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.hero__text h3 {
  padding: 0 0 33px 0;
}

.Keypoint {
  color: #F8F9FA;
}

.hero__text .primary-btn {
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.6s;
  -o-transition: all, 0.6s;
  transition: all, 0.6s;
}

.hero__text .more_btn {
  font-size: 14px;
  color: #F8F9FA;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: 55px;
}

.hero__text .hero__social {
  position: absolute;
  right: 145px;
  bottom: 55px;
}

.hero__text .hero__social a {
  display: inline-block;
  font-size: 18px;
  color: #F8F9FA;
  margin-right: 36px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.hero__text .hero__social a:hover {
  color: #004AAD;
}

.hero__text .hero__social a:last-child {
  margin-right: 0;
}

.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-dots {
  display: none;
}

.hero__slider.owl-carousel .owl-nav button {
  font-size: 28px;
  color: #031716;
  position: absolute;
  left: 145px;
  top: 50%;
  display: inline-block;
  height: 50px;
  width: 50px;
  margin-top: -25px;
}

.hero__slider.owl-carousel .owl-nav button.owl-next {
  left: auto;
  right: 145px;
}

.hero__slider.owl-carousel .owl-nav button:before {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 20px;
  width: 20px;
  border-left: 2px solid #F8F9FA;
  border-bottom: 2px solid #F8F9FA;
  content: "";
  border-radius: 0 0 0 4px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.hero__slider.owl-carousel .owl-nav button:after {
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  width: 20px;
  border-right: 2px solid #F8F9FA;
  border-top: 2px solid #F8F9FA;
  content: "";
  border-radius: 0 4px 0 0;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.hero__slider.owl-carousel .owl-nav button:hover:before {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}

.hero__slider.owl-carousel .owl-nav button:hover:after {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}

.slide-num {
  position: absolute;
  left: 145px;
  bottom: 55px;
  z-index: 9;
}

.slide-num span {
  font-size: 16px;
  color: #F8F9FA;
  font-weight: 600;
  margin-right: 140px;
}

.slide-num span:last-child {
  margin-right: 0;
}

.slider__progress {
  width: 100px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  position: absolute;
  left: 180px;
  bottom: 67px;
  z-index: 9;
}

.slider__progress span {
  background: #F8F9FA;
  height: 2px;
  display: block;
  -webkit-transition: all, 0.4s;
  -o-transition: all, 0.4s;
  transition: all, 0.4s;
  position: relative;
  top: -1px;
}

.Enquiry .section-title span {
  background: #004AAD;
  color: #F8F9FA;
  border-radius: 4px;
  padding: 11px 16px;
  margin-bottom: 100px;
}

.Enquiry-floating-btn {
  position: fixed;
  right: 0;
  bottom: -100px;
  /* Default for desktop */
  /* background-color: #031716; */
  /* color: #F8F9FA; */
  padding: 12px 25px;
  font-size: 7px;
  font-weight: 500;
  writing-mode: vertical-rl;
  transform: rotate(360deg);
  /* text-align: Left; */
  text-decoration: none;
  z-index: 9999;
  /* border-radius: 12px; */
  /* box-shadow: 0 0 0 0.17rem rgba(0, 0, 0, 0.2); */
  transition: background-color 0.3s ease;
}

.Enquiry-floating-btn:hover {
  background-color: #004AAD;
  color: #004AAD;
  cursor: default;
}

/*---------------------
  Project Slider
-----------------------*/

.project {
  padding: 0 15px;
}

.project__slider__item {
  height: 600px;
  left: 10%;
  width: 340px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.project__slider__item:hover .project__slider__item__hover {
  bottom: 30px;
}

.project__slider__item:hover .project__slider__item__hover span {
  left: 0;
}

.project__slider__item:hover .project__slider__item__hover h5 {
  right: 0;
}

.project__slider__item h2 {
  background: transparent;
  text-align: center;
  margin-top: 400px;
}

.project__slider__item:hover h2 {
  /* position: absolute; */
  margin-top: 0px;
}

.project__slider.owl-carousel .col-lg-3 {
  max-width: 100%;
}

.project__slider.owl-carousel .owl-nav button {
  height: 50px;
  width: 50px;
  background: transparent;
  font-size: 24px;
  color: #031716;
  position: absolute;
  left: 35px;
  top: 50%;
  margin-top: -25px;
  line-height: 54px;
  text-align: center;
}

.project__slider.owl-carousel .owl-nav button.owl-next {
  left: auto;
  right: 35px;
}

.project__slider__item__hover {
  text-align: center;
  background: #F8F9FA;
  position: absolute;
  left: 25px;
  bottom: -500px;
  width: calc(100% - 50px);
  padding: 25px 15px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
  overflow: hidden;
  border-radius: 12px;
}

.project__slider__item__hover span {
  color: #004AAD;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
  position: relative;
  left: 30px;
  -webkit-transition: all, 1s;
  -o-transition: all, 1s;
  transition: all, 1s;
}

.project__slider__item__hover h5 {
  color: #031716;
  font-size: 20px;
  text-transform: uppercase;
  position: relative;
  right: 30px;
  -webkit-transition: all, 1s;
  -o-transition: all, 1s;
  transition: all, 1s;
}

/*---------------------
  Testimonial
-----------------------*/

.testimonial__carousel {
  position: relative;
  overflow: hidden;
  background: #F8F9FA;
  padding: 75px 60px 90px;
  margin-bottom: 20px;
  -webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
  box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
  border-radius: 12px;
}

.testimonial__carousel:after {
  position: absolute;
  content: "";
  left: calc(50% - 85px);
  bottom: -115px;
  width: 170px;
  height: 170px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 21px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 21px rgba(0, 0, 0, 0.2);
}

.testimonial__carousel button.slick-arrow {
  font-size: 28px;
  color: #031716;
  position: absolute;
  left: 30px;
  top: 50%;
  display: inline-block;
  height: 50px;
  width: 50px;
  margin-top: -25px;
  background: transparent;
  border: none;
}

.testimonial__carousel button.slick-arrow.slick-next {
  left: auto;
  right: 30px;
}

.testimonial__carousel button.slick-arrow:before {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 20px;
  width: 20px;
  border-left: 2px solid #F8F9FA;
  border-bottom: 2px solid #F8F9FA;
  content: "";
  border-radius: 0 0 0 4px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.testimonial__carousel button.slick-arrow:after {
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  width: 20px;
  border-right: 2px solid #F8F9FA;
  border-top: 2px solid #F8F9FA;
  content: "";
  border-radius: 0 4px 0 0;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.testimonial__carousel button.slick-arrow:hover:before {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}

.testimonial__carousel button.slick-arrow:hover:after {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}

.testimonial__item {
  text-align: center;
}

.testimonial__item p {
  font-size: 24px;
  color: #031716;
  font-weight: 300;
  font-style: italic;
  line-height: 48px;
}

.testimonial__client {
  margin-top: -75px;
  margin-bottom: 50px;
}

.testimonial__client .slick-track {
  -webkit-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

.testimonial__client .slick-slide {
  padding-top: 80px;
}

.testimonial__client .slick-slide {
  width: 100px;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.testimonial__client .slick-slide.slick-center {
  width: 180px;
}

.testimonial__client .testimonial__client__pic h1 {
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  margin-top: 24px;
}

.slick-active.slick-center {
  padding-top: 35px;
}

.slick-active.slick-center .testimonial__client__pic {
  height: 148px;
  width: 160px;
  position: absolute;
  left: 0px;
  top: -33px;
  right: -15px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding-top: 5px;
  background-color: #004AAD;
  border-radius: 50%;
}

.slick-active.slick-center .testimonial__client__pic img {
  margin: 0 auto;
  width: 150px;
  height: 150px;
}

.slick-active.slick-center .testimonial__client__text {
  display: block;
  margin-top: -8px;
}

.testimonial__client__item {
  text-align: center;
  cursor: pointer;
}

.testimonial__client__item .testimonial__client__pic {
  height: 70px;
  width: 70px;
  margin: 0 auto;
}

.testimonial__client__item .testimonial__client__pic img {
  border-radius: 50%;
}

.testimonial__client__item .testimonial__client__text {
  display: none;
}

.testimonial__client__item h5 {
  color: #e24c15;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  margin-bottom: 5px;
}

.testimonial__client__item span {
  font-size: 14px;
  color: #004AAD;
  display: block;
}

.logo__carousel.owl-carousel .owl-item img {
  display: inline-block;
  width: auto;
}

.logo__carousel .logo__carousel__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 62px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/*---------------------
  Team
-----------------------*/

.team {
  padding-top: 120px;
  padding-bottom: 90px;
}

.team__btn {
  text-align: right;
}

.team__item {
  height: 480px;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  border-radius: 12px;
  cursor: pointer;
}

.team__item:after {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(17, 17, 17, 0.9);
  content: "";
  z-index: -1;
  opacity: 0;
  -webkit-transition: all, 0.5s, ease-out, 0.5s;
  -o-transition: all, 0.5s, ease-out, 0.5s;
  transition: all, 0.5s, ease-out, 0.5s;
  border-radius: 12px;
}

.team__item:hover:after {
  opacity: 1;
}

.team__item:hover .team__text .team__title {
  border-bottom: 1px solid rgba(183, 183, 183, 0.2);
  padding: 0 0 32px;
  margin-bottom: 34px;
  opacity: 0;
  visibility: hidden;
  position: relative;
  bottom: initial;
  opacity: 1;
  visibility: visible;
}

.team__item:hover .team__text p {
  opacity: 1;
  visibility: visible;
}

.team__item:hover .team__text .team__social {
  opacity: 1;
  visibility: visible;
  bottom: 34px;
}

.team__text {
  height: 100%;
  position: relative;
  padding: 35px 30px 40px;
}

.team__text .team__title {
  position: absolute;
  left: 0;
  bottom: 42px;
  width: 100%;
  padding: 0 30px;
  -webkit-transition: all, 0.7s, ease-out, 0.7s;
  -o-transition: all, 0.7s, ease-out, 0.7s;
  transition: all, 0.7s, ease-out, 0.7s;
}

.team__text .team__title h5 {
  color: #F8F9FA;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 6px;
}

.team__text .team__title span {
  font-size: 14px;
  color: #004AAD;
}

.team__text p {
  color: #F8F9FA;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.7s, ease-out, 0.7s;
  -o-transition: all, 0.7s, ease-out, 0.7s;
  transition: all, 0.7s, ease-out, 0.7s;
}

.team__text .team__social {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 30px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.7s, ease-out, 0.7s;
  -o-transition: all, 0.7s, ease-out, 0.7s;
  transition: all, 0.7s, ease-out, 0.7s;
}

.team__text .team__social a {
  display: inline-block;
  font-size: 20px;
  color: #F8F9FA;
  margin-right: 34px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.team__text .team__social a:last-child {
  margin-right: 0;
}

.team__text .team__social a:hover {
  color: #0072FF;
}

/*---------------------
  Call To Action
-----------------------*/

.callto {
  padding-top: 130px;
  padding-bottom: 135px;
}

.callto__text span {
  font-size: 16px;
  color: #004AAD;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 35px;
}

.callto__text h2 {
  font-size: 36px;
  color: #F8F9FA;
  line-height: 52px;
  text-transform: uppercase;
  margin-bottom: 36px;
}

.callto__text .primary-btn {
  background: #004AAD;
  color: #F8F9FA;
  border-radius: 14px;
}

.callto__text .primary-btn:before {
  display: none;
}

.callto__text .primary-btn:after {
  display: none;
}

/*---------------------
  Latest
-----------------------*/

.latest {
  padding-top: 120px;
  padding-bottom: 90px;
}

.latest__btn {
  text-align: right;
}

.latest__item {
  -webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
  box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
  margin-bottom: 30px;
  cursor: pointer;
}

.latest__item img {
  min-width: 100%;
}

.latest__item:hover a {
  padding-left: 0;
}

.latest__item:hover a:after {
  left: auto;
  right: -50px;
}

.latest__item__text {
  padding-top: 25px;
  background: #F8F9FA;
  padding: 25px 35px 20px;
  border-radius: 12px;
}

.latest__item__text span {
  color: #F8F9FA;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

.latest__item__text h4 {
  color: #031716;
  font-size: 22px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 12px;
}

.latest__item__text a {
  font-size: 14px;
  color: #031716;
  font-weight: 600;
  position: relative;
  padding-left: 40px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.latest__item__text a:after {
  position: absolute;
  left: 0;
  top: 8px;
  height: 1px;
  width: 30px;
  background: #004AAD;
  content: "";
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

/*---------------------
  Project
-----------------------*/

.project-row {
  margin-bottom: 50px;
}

.project-row img {
  width: 78%;
  height: auto;
  display: block;
  /* padding-top: 19px; */
  border-radius: 0px;
}

.text-col {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.text-col h4 a {
  color: #031716;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: bold;
}

@media (max-width: 767px) {

  .order-md-1,
  .order-md-2 {
    order: unset !important;
  }
}

/*---------------------
  Project Details
-----------------------*/

.project-details {
  padding-top: 120px;
  padding-bottom: 90px;
}

.project-details img {
  margin-bottom: 30px;
  min-width: 100%;
}

.project__sidebar__about {
  margin-bottom: 35px;
}

.project__sidebar__about h2 {
  color: #031716;
  line-height: 50px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.project__sidebar__about p {
  margin-bottom: 26px;
}

.project__sidebar__about p:last-child {
  margin-bottom: 0;
}

.product__details__widget__item {
  margin-bottom: 30px;
}

.product__details__widget__item span {
  color: #707070;
  font-size: 15px;
  display: block;
  margin-bottom: 10px;
}

.product__details__widget__item h4 {
  color: #031716;
  text-transform: uppercase;
}

.product__details__widget__item p {
  color: #031716;
  font-size: 24px;
  line-height: 36px;
}

/*---------------------
  Footer
-----------------------*/

.footer {
  padding-top: 90px;
}

.footer__top {
  border-bottom: 1px solid rgba(183, 183, 183, 0.2);
  padding-bottom: 75px;
  margin-bottom: 85px;
}

.footer__top__text h2 {
  color: #F8F9FA;
  font-size: 38px;
  text-transform: uppercase;
}

.footer__top__newslatter form {
  position: relative;
}

.footer__top__newslatter form input {
  width: 100%;
  height: 50px;
  color: #b7b7b7;
  padding-left: 30px;
  font-size: 14px;
  border: none;
}

.footer__top__newslatter form input::-webkit-input-placeholder {
  color: #b7b7b7;
}

.footer__top__newslatter form input::-moz-placeholder {
  color: #b7b7b7;
}

.footer__top__newslatter form input:-ms-input-placeholder {
  color: #b7b7b7;
}

.footer__top__newslatter form input::-ms-input-placeholder {
  color: #b7b7b7;
}

.footer__top__newslatter form input::placeholder {
  color: #b7b7b7;
}

.footer__top__newslatter form button {
  font-size: 14px;
  color: #F8F9FA;
  background: #004AAD;
  border: none;
  height: 100%;
  padding: 0 20px;
  position: absolute;
  right: 0;
  top: 0;
}

.footer__about {
  margin-bottom: 30px;
}

.footer__about .footer__logo {
  margin-bottom: 24px;
}

.footer__about .footer__logo a {
  display: inline-block;
}

.footer__about p {
  margin-bottom: 30px;
}

.footer__about ul {
  margin-bottom: 38px;
}

.footer__about ul li {
  font-size: 15px;
  list-style: none;
  line-height: 26px;
  color: #707070;
}

.footer__about .footer__social a {
  font-size: 18px;
  color: #F8F9FA;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  margin-right: 30px;
}

.footer__about .footer__social a:hover {
  color: #004AAD;
}

.footer__about .footer__social a:last-child {
  margin-right: 0;
}

.footer__widget {
  margin-bottom: 30px;
}

.footer__widget h6 {
  color: #F8F9FA;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 30px;
}

.footer__widget ul li {
  list-style: none;
}

.footer__widget ul li a {
  font-size: 15px;
  color: #707070;
  line-height: 36px;
}

.footer__address {
  margin-bottom: 30px;
}

.footer__address h6 {
  color: #F8F9FA;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 30px;
}

.footer__address p {
  margin-bottom: 30px;
}

.footer__address ul li {
  font-size: 15px;
  list-style: none;
  line-height: 26px;
  color: #707070;
}

.copyright {
  border-top: 1px solid rgba(183, 183, 183, 0.2);
  padding: 25px 0;
  margin-top: 60px;
}

.copyright__text p {
  margin-bottom: 0;
}

.copyright__text p i {
  color: #004AAD;
}

.copyright__text p a {
  color: #F8F9FA;
}

.copyright__widget {
  text-align: right;
}

.copyright__widget a {
  font-size: 14px;
  color: #707070;
  margin-right: 36px;
  position: relative;
}

.copyright__widget a:after {
  position: absolute;
  right: -22px;
  top: -3px;
  content: "|";
}

.copyright__widget a:last-child {
  margin-right: 0;
}

.copyright__widget a:last-child:after {
  display: none;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
  /* padding-top: 170px;
  padding-bottom: 120px; */
  height: 100vh;
  padding: 93px 257px 0 0;
}

.breadcrumb__text h2 {
  font-size: 36px;
  color: #F8F9FA;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-top: 10%;
}

.breadcrumb__text a {
  color: #F8F9FA;
}

.breadcrumb__text a:hover {
  color: #F8F9FA;
}

.breadcrumb__links a {
  font-size: 15px;
  color: #F8F9FA;
  display: inline-block;
  position: relative;
  margin-right: 12px;
}

.breadcrumb__links a:after {
  position: absolute;
  right: -13px;
  top: 1px;
  content: "~";
}

.breadcrumb__links span {
  font-size: 15px;
  color: #004AAD;
  display: inline-block;
}

.breadcrumb__text_main h2 {
  font-size: 63px;
  color: #F8F9FA;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-top: 50%;
}

.job-container {
  width: 100%;
  max-width: 1136px;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto 56px auto;
  /* Center horizontally */
  padding: 0;
  /* No extra padding unless needed */
}

.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  /* background: #f7f7f7; */
  cursor: pointer;
  font-weight: bold;
}

.plus-icon {
  font-size: 18px;
  transition: transform 0.3s;
}

.plus-icon.rotate {
  transform: rotate(45deg);
}

.job-options {
  display: none;
  border-top: 1px solid #ddd;
}

.job-options div {
  padding: 10px 12px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.job-options .primary-btn {
  left: auto;
  margin: 0 0 0 20px;
  /* default margin */
}

@media (min-width: 768px) {
  .job-options .primary-btn {
    left: 439px;
    /* margin: 0 0 0 465px; */
  }
}

@media (max-width: 767px) {
  .job-options .primary-btn {
    left: auto;
    margin: 0 0 0 81px;
  }
}

/* .job-options div:last-child {
  border-bottom: none;
  left: 500px;
} */

/* 📱 Mobile responsiveness */
@media (max-width: 768px) {
  .job-container {
    max-width: 90%;
    margin: 0 auto 40px auto;
  }

  .job-header {
    font-size: 16px;
    padding: 10px;
  }

  .plus-icon {
    font-size: 16px;
  }
}

/* 📱 Extra small devices */
@media (max-width: 480px) {
  .job-container {
    max-width: 95%;
    margin: 0 auto 30px auto;
  }

  .job-header {
    font-size: 14px;
    padding: 8px;
  }

  .plus-icon {
    font-size: 14px;
  }

  .job-options div {
    font-size: 14px;
    padding: 8px;
  }
}

/*---------------------
  About
-----------------------*/

.about {
  padding-top: 120px;
  padding-bottom: 116px;
  overflow: hidden;
}

.about-page {
  padding-top: 120px;
  padding-bottom: 90px;
}

.about__text {
  padding-top: 80px;
}

.about__text.about__page__text {
  padding-top: 0;
}

.about__text.about__page__text .section-title {
  margin-bottom: 12px;
}

.about__text .section-title {
  margin-bottom: 35px;
}

.about__para__text {
  margin-bottom: 70px;
}

.about__para__text p {
  margin-bottom: 26px;
}

.about__para__text p:last-child {
  margin-bottom: 0;
}

.about__pic {
  padding-left: 34px;
}

.about__pic__inner {
  position: relative;
  display: inline-block;
}

.about__pic__inner:after {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 577px;
  width: 449px;
  border: 15px solid #e24c15;
  border-radius: 15px;
  content: "";
  z-index: -1;
}

.about__page__services__text {
  margin-bottom: 30px;
}

.about-page .primary-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 50px;
  color: #F8F9FA;
  position: relative;
}

.about-page .primary-btn.normal-btn {
  color: #031716;
}

.about-page .primary-btn.normal-btn:before {
  border-color: #F8F9FA;
}

.about-page .primary-btn.normal-btn:after {
  border-color: #F8F9FA;
}

/* Originally bottom-left → now top-left, show only top border */
.about-page .primary-btn:before {
  position: absolute;
  left: 0;
  top: 0;
  /* moved from bottom */
  height: 28px;
  width: 28px;
  border-left: 2px solid #F8F9FA;
  border-top: 2px solid #F8F9FA;
  /* top line visible */
  border-bottom: none;
  /* bottom line hidden */
  content: "";
  border-radius: 4px 0 0 0;
  transition: all 0.5s;
}

/* Originally top-right → now bottom-right, show only bottom border */
.about-page .primary-btn:after {
  position: absolute;
  right: 0;
  bottom: 0;
  /* was top: 0; → now bottom: 0 */
  height: 28px;
  width: 28px;
  border-right: 2px solid #F8F9FA;
  border-bottom: 2px solid #F8F9FA;
  /* bottom line visible */
  border-top: none;
  /* hide top line */
  content: "";
  border-radius: 0 0 4px 0;
  /* bottom-right corner */
  transition: all 0.5s;
}

.about-page .primary-btn:hover:before,
.about-page .primary-btn:hover:after {
  height: 100%;
  width: 100%;
  border-radius: 4px;
}

.heading-animated h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #F8F9FA;
  left: 140px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  position: relative;
  display: inline-block;
  animation: fadeInOut 4s ease-in-out infinite;
}

/* Fade In & Out Loop (No Movement) */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.details {
  margin-top: 67px;
  margin-bottom: 70px;
}

#tabMenu .list-group-item {
  cursor: pointer;
  border: none;
  padding: 12px 15px;
  font-weight: 500;
  color: #666;
  background-color: transparent;
  border-bottom: 1px solid #ddd;
}

#tabMenu .list-group-item.active {
  color: #031716;
  font-weight: bold;
  background-color: transparent;
  border-left: 3px solid #031716;
}

#tabContent p {
  font-size: 16px;
  line-height: 1.6;
  padding-left: 61px;

  /* color: #; */
}

/* Hide all non-active items */
.testimonial__client .slick-slide {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

/* Show only center active */
.testimonial__client .slick-slide.slick-center {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Smooth animation */
.testimonial__client .slick-slide {
  transition: all 0.5s ease-in-out;
}

/*---------------------
  Services
-----------------------*/

.services {
  /* padding-top: 120px; */
  padding-top: 63px;
  padding-bottom: 90px;
}

.services .project__slider__item {
  height: 367px;
  left: auto;
  margin: 0auto;
  width: 340px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.v-wrapper {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(61deg);
  opacity: 0.5;
  left: 123px;
  top: 45px;
}

.v-wrapper2 {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(61deg);
  opacity: 0.5;
  left: 121px;
  top: 46px;
}

.v-wrapper3 {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(61deg);
  opacity: 0.5;
  left: 124px;
  top: 48px;
}

.v-wrapper4 {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(61deg);
  opacity: 0.5;
  left: 126px;
  top: 46px;
}

.v-wrapper5 {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(61deg);
  opacity: 0.5;
  left: 122px;
  top: 42px;
}

.v-wrapper6 {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(61deg);
  opacity: 0.5;
  left: 120px;
  top: 42px;
}

.v-wrapper7 {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(61deg);
  opacity: 0.5;
  left: 122px;
  top: 48px;
}

.v-wrapper8 {
  position: absolute;
  width: 100px;
  height: 100px;
  transform: rotate(61deg);
  opacity: 0.5;
  left: 123px;
  top: 42px;
}

.v-line {
  position: absolute;
  width: 7px;
  height: 42px;
  /* background-color: #F8F9FA; */
  background-color: #ec7632;
  mix-blend-mode: lighten;
}

/* First V shape */
.v1-left {
  top: 23px;
  left: -19px;
  transform: rotate(45deg);
  transform-origin: bottom;
}

.v1-right {
  top: 24px;
  left: 36px;
  transform: rotate(-45deg);
  transform-origin: bottom;
}

/* Second V shape overlapping */
.V2 .v-line {
  height: 45px;
}

.v2-left {
  top: 35px;
  left: 34px;
  transform: rotate(-45deg);
  transform-origin: top;
}

.v2-right {
  top: 34px;
  left: 38px;
  transform: rotate(45deg);
  transform-origin: top;
}

.v3 .v-line {
  position: absolute;
  width: 7px;
  height: 34px;
  /* background-color: #F8F9FA; */
  background-color: #ec7632;
}

.v1-v2-join {
  top: 67px;
  left: 38px;
  transform: rotate(90deg);
  transform-origin: top;
}

.v4 .v-line {
  position: absolute;
  width: 7px;
  height: 23px;
  /* background-color: #F8F9FA; */
  background-color: rgba(65, 131, 131, 0.5);
}

.v1-v2-join1 {
  top: 61px;
  left: 33px;
  transform: rotate(90deg);
  transform-origin: top;
}

.v5 .v-line {
  position: absolute;
  width: 3px;
  height: 8px;
  /* background-color: #F8F9FA; */
  background-color: rgba(65, 131, 131, 0.5);
}

.v1-v2-join2 {
  top: 56px;
  left: 27px;
  transform: rotate(90deg);
  transform-origin: top;
}

@media (max-width: 400px) {
  .v-wrapper {
    scale: 0.9;
  }
}

@media (max-width: 300px) {
  .v-wrapper {
    scale: 0.8;
  }
}

.image-1 {
  width: 191px;
  height: 86px;
  padding: 21px 90px 2px 34px;
  margin: 0 0 4px 50px;
}

.image-2 {
  width: 200px;
  /* change display width */
  height: 100px;
  /* keeps aspect ratio */
  padding: 21px 90px 2px 34px;
  margin: 0 0 9px 28px;
}

.services .project__slider.owl-carousel .col-lg-3 {
  max-width: 100%;
}

.services .project__slider.owl-carousel .owl-nav button {
  height: 50px;
  width: 50px;
  /* background: #F8F9FA; */
  font-size: 28px;
  color: #0072FF;
  position: absolute;
  left: 35px;
  top: 50%;
  margin-top: -25px;
  line-height: 54px;
  text-align: center;
}

.services .project__slider.owl-carousel .owl-nav button.owl-next {
  left: auto;
  right: 35px;
}

.services .project__slider__item__hover {
  text-align: center;
  background: transparent;
  position: absolute;
  left: 12px;
  /* bottom: -500px; */
  bottom: 30px;
  width: calc(100% - 50px);
  padding: 25px 25px;
  margin-left: 20px;
  /* -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s; */
  transition: all, 0.5s;
  overflow: hidden;
  border-radius: 4px;
}

.project__slider__item__hover::before,
.project__slider__item__hover::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #F8F9FA;
  z-index: -1;
  transition: all 0.5s;
  border-radius: 0 0 0 4px;
}

.project__slider__item__hover::before {
  left: 0;
  bottom: 0;
  border-top: none;
  border-right: none;
}

.project__slider__item__hover::after {
  right: 0;
  top: 0;
  border-left: none;
  border-bottom: none;
  border-radius: 0 4px 0 0;
}

.project__slider__item__hover:hover::before,
.project__slider__item__hover:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.services .project__slider__item__hover span {
  color: #0072FF;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
  position: relative;
  /* left: 30px; */
  left: 0;
  /* -webkit-transition: all, 1s; */
  /* -o-transition: all, 1s; */
  transition: all, 1s;
}

.services .project__slider__item__hover h5 {
  color: #0072FF;
  font-size: 20px;
  text-transform: uppercase;
  position: relative;
  /* right: 30px; */
  right: 0;
  -webkit-transition: all, 1s;
  -o-transition: all, 1s;
  transition: all, 1s;
  margin-top: 12px;
}

.services .project__slider__item__hover p {
  text-align: center;
}

.services__item {
  position: relative;
  background: transparent;
  border-radius: 4px;
  padding: 30px 20px;
  margin-bottom: 30px;
  text-align: center;
  transition: all 0.5s ease;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
}

/* Hover border effect */
.services__item::before,
.services__item::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #0072FF;
  z-index: -1;
  transition: all 0.5s;
}

.services__item::before {
  left: 0;
  bottom: 0;
  border-top: none;
  border-right: none;
  border-radius: 0 0 0 4px;
}

.services__item::after {
  right: 0;
  top: 0;
  border-left: none;
  border-bottom: none;
  border-radius: 0 4px 0 0;
}

.services__item:hover::before,
.services__item:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

/* .services.services-page {
  padding-bottom: 80px;
}

.services.services-page .services__item p {
  margin-bottom: 12px;
}

.services.services-page .services__item ul li {
  color: #031716;
  font-size: 15px;
  line-height: 36px;
  list-style: none;
}

.services__item {
  margin-bottom: 30px;
}

.services__item h4 {
  color: #031716;
  text-transform: uppercase;
  margin-top: 35px;
  margin-bottom: 22px;
}

.services__item p {
  margin-bottom: 0;
} */

/*---------------------
  Counter
-----------------------*/

.counter {
  padding-bottom: 70px;
}

.counter .counter__content {
  border: none;
  padding-top: 0;
  margin-top: 0;
}

.counter .counter__item .counter__item__text h5 {
  color: #F8F9FA;
}

.counter__content {
  border-top: 1px solid rgba(183, 183, 183, 0.2);
  padding-top: 70px;
  margin-top: 40px;
}

.counter__item {
  margin-bottom: 30px;
}

.counter__item__number {
  float: left;
  margin-right: 28px;
}

.counter__item__number h2 {
  color: #004AAD;
  font-size: 60px;
  line-height: 52px;
}

.counter__item__text {
  overflow: hidden;
}

.counter__item__text h5 {
  color: #031716;
  line-height: 24px;
  text-transform: uppercase;
}

/*---------------------
  Clients
-----------------------*/

.clients {
  padding-top: 120px;
  padding-bottom: 60px;
}

.clients img {
  margin-bottom: 60px;
}

/*---------------------
    Blog
-----------------------*/

.blog {
  padding-top: 120px;
  padding-bottom: 120px;
}

.blog__item__list .blog__item:first-child {
  border: none;
  margin-bottom: 0;
}

.blog__item__list .blog__item:last-child {
  margin-bottom: 0;
}

.blog__item {
  margin-bottom: 55px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 55px;
}

.blog__item img {
  -webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
  box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
}

.blog__item ul {
  margin-bottom: 18px;
}

.blog__item ul li {
  list-style: none;
  font-size: 14px;
  color: #b7b7b7;
  font-weight: 500;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 50px;
  position: relative;
  letter-spacing: 2px;
}

.blog__item ul li:after {
  position: absolute;
  right: -30px;
  top: -16px;
  content: ".";
  font-size: 15px;
  color: #b7b7b7;
  font-size: 25px;
}

.blog__item ul li:last-child {
  margin-right: 0;
}

.blog__item ul li:last-child:after {
  display: none;
}

.blog__item h2 {
  color: #031716;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  line-height: 48px;
  margin-bottom: 30px;
}

.blog__item img {
  min-width: 100%;
}

.blog__item__text {
  padding: 35px 50px 0;
}

.blog__item__text a {
  font-size: 14px;
  color: #031716;
  font-weight: 600;
  position: relative;
  padding-left: 40px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.blog__item__text a:after {
  position: absolute;
  left: 0;
  top: 8px;
  height: 1px;
  width: 30px;
  background: #031716;
  content: "";
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.blog__item__quote {
  background: #0072FF;
  padding: 35px 50px;
  position: relative;
  margin-bottom: 55px;
}

.blog__item__quote:after {
  position: absolute;
  right: 50px;
  bottom: 26px;
  content: "“";
  font-family: "Aldrich", sans-serif;
  font-size: 120px;
  color: #F8F9FA;
  opacity: 0.5;
  line-height: 0px;
}

.blog__item__quote p {
  color: #F8F9FA;
  font-size: 20px;
  font-family: "Aldrich", sans-serif;
  line-height: 32px;
  text-transform: uppercase;
}

.blog__item__quote span {
  color: #F8F9FA;
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 4px;
}

.blog__pagination {
  padding-top: 30px;
}

.blog__pagination a {
  font-size: 15px;
  color: #0A1B2A;
  font-weight: 600;
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border: 2px solid transparent;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  margin-right: 12px;
}

.blog__pagination a i {
  font-size: 15px;
  font-weight: 600;
}

.blog__pagination a:last-child {
  margin-right: 0;
}

.blog__pagination a:hover {
  border: 2px solid #0072FF;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar__about {
  text-align: center;
  margin-bottom: 60px;
}

.blog__sidebar__about .author__pic {
  height: 140px;
  width: 140px;
  border-radius: 50%;
}

.blog__sidebar__about p {
  color: #353535;
  margin-top: 22px;
  margin-bottom: 25px;
}

.blog__sidebar__search {
  margin-bottom: 55px;
}

.blog__sidebar__search form {
  position: relative;
}

.blog__sidebar__search form input {
  width: 100%;
  font-size: 15px;
  color: #b7b7b7;
  border: none;
  background: transparent;
  border-bottom: 1px solid #b7b7b7;
  padding-bottom: 12px;
}

.blog__sidebar__search form input::-webkit-input-placeholder {
  color: #b7b7b7;
}

.blog__sidebar__search form input::-moz-placeholder {
  color: #b7b7b7;
}

.blog__sidebar__search form input:-ms-input-placeholder {
  color: #b7b7b7;
}

.blog__sidebar__search form input::-ms-input-placeholder {
  color: #b7b7b7;
}

.blog__sidebar__search form input::placeholder {
  color: #b7b7b7;
}

.blog__sidebar__search form button {
  font-size: 15px;
  color: #b7b7b7;
  border: none;
  background: transparent;
  position: absolute;
  right: 0;
  top: 0;
}

.blog__sidebar__categories {
  margin-bottom: 40px;
}

.blog__sidebar__categories h5 {
  font-size: 20px;
  color: #031716;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.blog__sidebar__categories ul li {
  list-style: none;
  font-size: 15px;
  color: #b7b7b7;
  line-height: 42px;
}

.blog__sidebar__feature {
  margin-bottom: 55px;
}

.blog__sidebar__feature h5 {
  font-size: 20px;
  color: #031716;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.blog__sidebar__feature__item {
  display: block;
  overflow: hidden;
  margin-bottom: 25px;
}

.blog__sidebar__feature__item:last-child {
  margin-bottom: 0;
}

.blog__sidebar__feature__item__pic {
  float: left;
  margin-right: 20px;
}

.blog__sidebar__feature__item__text {
  overflow: hidden;
}

.blog__sidebar__feature__item__text span {
  font-size: 12px;
  color: #b7b7b7;
  font-weight: 600;
  letter-spacing: 2px;
  display: block;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.blog__sidebar__feature__item__text h6 {
  color: #031716;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 26px;
}

.blog__sidebar__tag {
  margin-bottom: 60px;
}

.blog__sidebar__tag h5 {
  font-size: 20px;
  color: #031716;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.blog__sidebar__tag a {
  display: inline-block;
  font-size: 13px;
  color: #b7b7b7;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 12px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  position: relative;
  margin-bottom: 4px;
}

.blog__sidebar__tag a:after {
  position: absolute;
  right: -10px;
  top: 7px;
  height: 4px;
  width: 4px;
  background: #b7b7b7;
  border-radius: 50%;
  content: "";
}

.blog__sidebar__tag a:last-child:after {
  display: none;
}

.blog__sidebar__tag a:hover {
  color: #031716;
}

.blog__sidebar__social {
  margin-bottom: 55px;
}

.blog__sidebar__social h5 {
  font-size: 20px;
  color: #031716;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.blog__sidebar__social a {
  display: inline-block;
  height: 34px;
  width: 34px;
  font-size: 18px;
  color: #707070;
  line-height: 34px;
  text-align: center;
  border: 1px solid transparent;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  margin-right: 46px;
  position: relative;
}

.blog__sidebar__social a:after {
  position: absolute;
  right: -40px;
  top: 15px;
  height: 1px;
  width: 30px;
  background: rgba(0, 0, 0, 0.2);
  content: "";
}

.blog__sidebar__social a:last-child {
  margin-right: 0;
}

.blog__sidebar__social a:last-child:after {
  display: none;
}

.blog__sidebar__social a:hover {
  color: #F8F9FA;
  border-color: #F8F9FA;
}

.blog__sidebar__newslatter h5 {
  font-size: 20px;
  color: #031716;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.blog__sidebar__newslatter form {
  position: relative;
}

.blog__sidebar__newslatter form input {
  width: 100%;
  font-size: 15px;
  color: #b7b7b7;
  border: none;
  background: transparent;
  border-bottom: 1px solid #b7b7b7;
  padding-bottom: 12px;
}

.blog__sidebar__newslatter form input::-webkit-input-placeholder {
  color: #b7b7b7;
}

.blog__sidebar__newslatter form input::-moz-placeholder {
  color: #b7b7b7;
}

.blog__sidebar__newslatter form input:-ms-input-placeholder {
  color: #b7b7b7;
}

.blog__sidebar__newslatter form input::-ms-input-placeholder {
  color: #b7b7b7;
}

.blog__sidebar__newslatter form input::placeholder {
  color: #b7b7b7;
}

.blog__sidebar__newslatter form button {
  font-size: 18px;
  color: #031716;
  border: none;
  background: transparent;
  position: absolute;
  right: 0;
  top: 0;
}

/*---------------------
  Blog Details
-----------------------*/

.blog__details {
  padding-top: 120px;
  padding-bottom: 120px;
}

.blog__details__content .blog__item__quote {
  margin-bottom: 40px;
}

.blog__details__content .blog__item__quote p {
  text-transform: none;
  font-size: 24px;
  line-height: 36px;
}

.blog__details__title {
  margin-bottom: 32px;
}

.blog__details__title ul {
  margin-bottom: 18px;
}

.blog__details__title ul li {
  list-style: none;
  font-size: 14px;
  color: #b7b7b7;
  font-weight: 500;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 50px;
  position: relative;
  letter-spacing: 2px;
}

.blog__details__title ul li:after {
  position: absolute;
  right: -30px;
  top: -16px;
  content: ".";
  font-size: 15px;
  color: #b7b7b7;
  font-size: 25px;
}

.blog__details__title ul li:last-child {
  margin-right: 0;
}

.blog__details__title ul li:last-child:after {
  display: none;
}

.blog__details__title h2 {
  color: #031716;
  font-size: 48px;
  font-family: "Poppins", sans-serif;
  line-height: 60px;
  font-weight: 600;
  margin-bottom: 30px;
}

.blog__details__title img {
  margin-bottom: 32px;
  min-width: 100%;
  -webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
  box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
}

.blog__details__title p {
  font-size: 18px;
  color: #7d8184;
  line-height: 32px;
  margin-bottom: 0;
}

.blog__details__text {
  margin-bottom: 35px;
}

.blog__details__text p {
  font-size: 18px;
  color: #7d8184;
  line-height: 32px;
}

.blog__details__text p:last-child {
  margin-bottom: 0;
}

.blog__details__pic {
  margin-bottom: 35px;
}

.blog__details__pic img {
  min-width: 100%;
  margin-bottom: 30px;
}

.blog__details__widget {
  margin-bottom: 45px;
}

.blog__details__tags {
  margin-bottom: 20px;
}

.blog__details__tags span {
  font-size: 13px;
  color: #031716;
  margin-right: 6px;
}

.blog__details__tags a {
  display: inline-block;
  font-size: 13px;
  color: #b7b7b7;
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 12px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  position: relative;
  margin-bottom: 4px;
}

.blog__details__tags a:after {
  position: absolute;
  right: -10px;
  top: 7px;
  height: 4px;
  width: 4px;
  background: #b7b7b7;
  border-radius: 50%;
  content: "";
}

.blog__details__tags a:last-child:after {
  display: none;
}

.blog__details__tags a:hover {
  color: #031716;
}

.blog__details__social {
  text-align: right;
  margin-bottom: 20px;
}

.blog__details__social a {
  display: inline-block;
  font-size: 18px;
  color: #353535;
  margin-right: 28px;
}

.blog__details__social a:last-child {
  margin-right: 0;
}

.blog__details__author {
  background: #f8f8f8;
  padding: 50px;
  overflow: hidden;
  margin-bottom: 40px;
}

.blog__details__author__pic {
  float: left;
  margin-right: 50px;
  height: 140px;
  width: 140px;
  border-radius: 50%;
}

.blog__details__author__text {
  overflow: hidden;
}

.blog__details__author__text h5 {
  color: #031716;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 12px;
}

.blog__details__author__text p {
  color: #7d8184;
  font-size: 18px;
  line-height: 32px;
  margin-bottom: 0;
}

.blog__details__btns {
  margin-bottom: 50px;
}

.blog__details__btns__item {
  margin-bottom: 25px;
  display: block;
  overflow: hidden;
}

.blog__details__btns__item.blog__details__btns__item--next .blog__details__btns__item__pic {
  float: right;
  margin-left: 30px;
  margin-right: 0;
}

.blog__details__btns__item.blog__details__btns__item--next .blog__details__btns__item__text {
  text-align: right;
}

.blog__details__btns__item__pic {
  float: left;
  margin-right: 30px;
}

.blog__details__btns__item__text {
  overflow: hidden;
  padding-top: 16px;
}

.blog__details__btns__item__text h6 {
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  color: #8d8d8d;
  margin-bottom: 6px;
}

.blog__details__btns__item__text h6 span {
  font-size: 20px;
  position: relative;
  top: 3px;
}

.blog__details__btns__item__text h5 {
  font-size: 20px;
  font-family: "Poppins", sans-serif;
  color: #353535;
  font-weight: 600;
}

.blog__details__comment__form h4 {
  color: #031716;
  text-transform: uppercase;
  margin-bottom: 35px;
}

.blog__details__comment__form form input {
  font-size: 15px;
  color: #b7b7b7;
  width: 100%;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 20px;
  margin-bottom: 30px;
}

.blog__details__comment__form form input::-webkit-input-placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form input::-moz-placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form input:-ms-input-placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form input::-ms-input-placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form input::placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form textarea {
  font-size: 15px;
  color: #b7b7b7;
  width: 100%;
  height: 130px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 20px;
  padding-top: 12px;
  resize: none;
  margin-bottom: 24px;
}

.blog__details__comment__form form textarea::-webkit-input-placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form textarea::-moz-placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form textarea:-ms-input-placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form textarea::-ms-input-placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form textarea::placeholder {
  color: #b7b7b7;
}

.blog__details__comment__form form button {
  background: #031716;
}

/*---------------------
  Contact
-----------------------*/

.contact {
  padding-top: 120px;
  padding-bottom: 120px;
}

.contact__text {
  margin-bottom: 50px;
}

.contact__text .section-title {
  margin-bottom: 12px;
}

.contact__text p {
  margin-bottom: 0;
}

.contact__widget__item {
  position: relative;
  margin-bottom: 30px;
}

.contact__widget__item.last__item:after {
  display: none;
}

.contact__widget__item:after {
  position: absolute;
  right: 50px;
  top: 0px;
  width: 1px;
  height: 50px;
  background: #F8F9FA;
  content: "";
}

.contact__widget__item__icon {
  float: left;
  margin-right: 20px;
}

.contact__widget__item__text {
  overflow: hidden;
}

.contact__widget__item__text h5 {
  color: #F8F9FA;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact__widget__item__text span {
  color: #031716;
  display: block;
}

.map {
  height: 460px;
  margin-top: 40px;
  margin-bottom: 75px;
  -webkit-box-shadow: 0px 3px 15px rgba(0, 59, 85, 0.1);
  box-shadow: 0px 3px 15px rgba(0, 59, 85, 0.1);
}

.map iframe {
  width: 100%;
}

.contact__form__text {
  margin-bottom: 35px;
}

.contact__form__text .section-title {
  margin-bottom: 12px;
}

.contact__form__text p {
  margin-bottom: 0;
}

.contact__form form input {
  height: 50px;
  width: 100%;
  font-size: 15px;
  color: #b7b7b7;
  padding-left: 20px;
  border: 1px solid #F8F9FA;
  margin-bottom: 30px;
}

.contact__form form input::-webkit-input-placeholder {
  color: #b7b7b7;
}

.contact__form form input::-moz-placeholder {
  color: #b7b7b7;
}

.contact__form form input:-ms-input-placeholder {
  color: #b7b7b7;
}

.contact__form form input::-ms-input-placeholder {
  color: #b7b7b7;
}

.contact__form form input::placeholder {
  color: #b7b7b7;
}

.contact__form form textarea {
  height: 170px;
  width: 100%;
  font-size: 15px;
  color: #b7b7b7;
  padding-left: 20px;
  padding-top: 12px;
  border: 1px solid #e1e1e1;
  resize: none;
  margin-bottom: 24px;
}

.contact__form form textarea::-webkit-input-placeholder {
  color: #b7b7b7;
}

.contact__form form textarea::-moz-placeholder {
  color: #b7b7b7;
}

.contact__form form textarea:-ms-input-placeholder {
  color: #b7b7b7;
}

.contact__form form textarea::-ms-input-placeholder {
  color: #b7b7b7;
}

.contact__form form textarea::placeholder {
  color: #b7b7b7;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media only screen and (min-width: 1450px) {
  .container {
    max-width: 1170px;
  }

  .header {
    padding: 30px 130px 9px;
  }
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about__pic {
    padding-left: 0;
  }

  .about__pic__inner:after {
    left: 8px;
    top: 8px;
  }

  .header__menu ul li {
    margin-right: 15px;
  }

  .hero__slider.owl-carousel .owl-nav button {
    left: 15px;
  }

  .hero__slider.owl-carousel .owl-nav button.owl-next {
    right: 15px;
  }
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider.owl-carousel .owl-nav button {
    left: 0;
  }

  .hero__slider.owl-carousel .owl-nav button.owl-next {
    right: 0;
  }

  .about__text {
    padding-top: 0;
    margin-bottom: 40px;
  }

  .about__pic {
    padding-left: 0;
  }

  .blog__sidebar {
    padding-top: 50px;
  }

  .hero__text .hero__social {
    right: 80px;
  }

  .slide-num {
    left: 70px;
  }

  .slider__progress {
    left: 106px;
  }

  .canvas__open {
    display: block;
    font-size: 22px;
    color: #F8F9FA;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #F8F9FA;
    border-radius: 2px;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
  }

  .offcanvas-menu-overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    content: "";
    z-index: 98;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    visibility: hidden;
  }

  .offcanvas-menu-overlay.active {
    visibility: visible;
  }

  .offcanvas-menu-wrapper {
    position: fixed;
    left: -300px;
    width: 300px;
    height: 100%;
    background: #031716;
    padding: 50px 20px 30px 30px;
    display: block;
    z-index: 99;
    overflow-y: auto;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    opacity: 0;
  }

  .offcanvas-menu-wrapper.active {
    opacity: 1;
    left: 0;
  }

  .offcanvas__logo {
    margin-bottom: 30px;
  }

  .offcanvas__logo a {
    display: inline-block;
  }

  .slicknav_btn {
    display: none;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    margin-bottom: 30px;
  }

  .slicknav_nav ul {
    margin: 0;
  }

  .slicknav_nav .slicknav_row,
  .slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: #F8F9FA;
    font-weight: 600;
  }

  .slicknav_nav .slicknav_arrow {
    color: #F8F9FA;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #F8F9FA;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #F8F9FA;
  }

  .slicknav_nav {
    display: block !important;
  }

  .offcanvas__widget span {
    font-size: 14px;
    font-family: "Aldrich", sans-serif;
    color: #b7b7b7;
    display: block;
    margin-bottom: 10px;
  }

  .offcanvas__widget h4 {
    font-size: 22px;
    color: #0072FF;
  }

  .header__menu {
    display: none;
  }

  .header__widget {
    display: none;
  }
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
  .hero__text h2 {
    font-size: 34px;
    line-height: 45px;
  }

  .hero__items {
    height: 710px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 40px;
  }

  .about__text {
    padding-top: 0;
    margin-bottom: 40px;
  }

  .about__pic {
    padding-left: 0;
  }

  .blog__sidebar {
    padding-top: 50px;
  }

  .canvas__open {
    display: block;
    font-size: 22px;
    color: #F8F9FA;
    height: 35px;
    width: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #F8F9FA;
    border-radius: 2px;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 15px;
  }

  .offcanvas-menu-overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    content: "";
    z-index: 98;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    visibility: hidden;
  }

  .offcanvas-menu-overlay.active {
    visibility: visible;
  }

  .offcanvas-menu-wrapper {
    position: fixed;
    left: -300px;
    width: 300px;
    height: 100%;
    background: #031716;
    padding: 50px 20px 30px 30px;
    display: block;
    z-index: 99;
    overflow-y: auto;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    opacity: 0;
  }

  .offcanvas-menu-wrapper.active {
    opacity: 1;
    left: 0;
  }

  .offcanvas__logo {
    margin-bottom: 25px;
  }

  .offcanvas__logo a {
    display: inline-block;
  }

  .slicknav_btn {
    display: none;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    margin-bottom: 30px;
  }

  .slicknav_nav ul {
    margin: 0;
  }

  .slicknav_nav .slicknav_row,
  .slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: #F8F9FA;
    font-weight: 600;
  }

  .slicknav_nav .slicknav_arrow {
    color: #F8F9FA;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #F8F9FA;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #F8F9FA;
  }

  .slicknav_nav {
    display: block !important;
  }

  .offcanvas__widget span {
    font-size: 14px;
    font-family: "Aldrich", sans-serif;
    color: #b7b7b7;
    display: block;
    margin-bottom: 10px;
  }

  .offcanvas__widget h4 {
    font-size: 22px;
    color: #0072FF;
  }

  .header__menu {
    display: none;
  }

  .header__widget {
    display: none;
  }

  .about__pic__inner {
    display: block;
  }

  .about__pic__inner img {
    min-width: 100%;
  }

  .about__pic__inner:after {
    left: 0;
    width: 100%;
  }

  .hero__slider.owl-carousel .owl-nav button {
    left: 0;
  }

  .hero__slider.owl-carousel .owl-nav button.owl-next {
    right: 0;
  }

  .hero__text h2 {
    font-size: 46px;
    line-height: 58px;
  }

  .hero__text .hero__social {
    right: 0;
    left: 0;
    margin: 0 auto;
    bottom: 100px;
  }

  .slide-num {
    bottom: 25px;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .slider__progress {
    left: 0;
    bottom: 35px;
    right: 0;
    margin: 0 auto;
  }

  .hero__text .more_btn {
    bottom: 62px;
  }

  .footer__top__text {
    margin-bottom: 35px;
  }

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

  .copyright__widget {
    text-align: center;
  }

  .project__sidebar {
    padding-top: 20px;
  }

  .blog__details__tags {
    text-align: center;
  }

  .blog__details__social {
    text-align: center;
  }

  .blog__details__author__pic {
    float: none;
    margin-right: 0;
  }

  .blog__details__author__text {
    padding-top: 40px;
  }

  .project {
    padding: 0;
  }

  .about__para__text {
    margin-bottom: 35px;
  }

  .clients {
    padding-bottom: 90px;
  }

  .clients a {
    margin-bottom: 30px;
  }

  .testimonial__carousel.owl-carousel .owl-nav button {
    left: 0;
  }

  .testimonial__carousel.owl-carousel .owl-nav button.owl-next {
    right: 0;
  }
}

@media only screen and (max-width: 575px) {
  .team__btn {
    margin-bottom: 40px;
    text-align: left;
  }

  .latest__btn {
    margin-bottom: 40px;
    text-align: left;
  }
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
  .section-title h2 {
    font-size: 28px;
    line-height: 1;
  }

  .hero__text h2 {
    font-size: 28px;
    line-height: 42px;
  }

  .hero__items {
    height: 610px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 40px;
  }

  .testimonial__item p {
    font-size: 16px;
    line-height: normal;
  }

  .about__pic__inner:after {
    display: none;
  }

  .callto__text h2 {
    font-size: 22px;
    line-height: 46px;
  }

  .project__slider.owl-carousel .owl-nav button {
    left: 15px;
  }

  .project__slider.owl-carousel .owl-nav button.owl-next {
    right: 15px;
  }

  .project {
    padding: 0;
  }

  .breadcrumb__text h2 {
    font-size: 32px;
  }

  .breadcrumb__text h3 {
    font-size: 22px;
  }

  .testimonial__carousel {
    padding: 60px 45px 65px;
  }

  .slick-active.slick-center .testimonial__client__pic img,
  .slick-active.slick-center .testimonial__client__pic {
    width: 110px;
    height: 110px;
    opacity: 1;
  }

  .testimonial__client__item .testimonial__client__pic {
    width: 110px;
    height: 110px;
    opacity: 0;
  }

  .testimonial__carousel:after {
    left: calc(50% - 70px);
    bottom: -80px;
    width: 140px;
    height: 140px;
  }

  .testimonial__carousel button.slick-arrow {
    left: 10px;
    height: 40px;
    width: 40px;
  }

  .testimonial__carousel button.slick-arrow.slick-next {
    left: auto;
    right: 10px;
  }

  .testimonial__client .slick-slide {
    padding-top: 30px;
  }

  .about .section-title h2 {
    font-size: 28px;
    line-height: 45px;
  }

  .footer__top__text h2 {
    font-size: 32px;
  }

  .square__pic {
    padding-left: 34px;
  }

  .square__pic__inner {
    position: relative;
    display: inline-block;
  }

  .square__pic__inner:after {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 400px;
    width: 400px;
    border: 15px solid #E63946;
    border-radius: 12px;
    content: "";
    z-index: -1;
  }

  /* Accordion Custom CSS */

      :root {
      --primary: #052c65;
      --bg-light: #f8f9fa;
      --bg-active: #e9ecef;
      --font-size: 1.2rem;
    }

    body {
      font-family: 'Segoe UI', sans-serif;
      background: #fff;
      padding: 40px 20px;
    }

    .accordion {
      max-width: 800px;
      margin: auto;
    }

    .accordion-item {
      border: none;
      border-radius: 0.5rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      margin-bottom: 1rem;
      overflow: hidden;
    }

    .accordion-button {
      background-color: var(--bg-light);
      color: var(--primary);
      font-size: var(--font-size);
      font-weight: 600;
      padding: 1.2rem 1.5rem;
      position: relative;
      transition: background-color 0.3s ease;
      box-shadow: none;
    }

    .accordion-button:not(.collapsed) {
      background-color: var(--bg-active);
      color: var(--primary);
    }

    /* Remove Bootstrap's default arrow */
    .accordion-button::after {
      display: none;
    }

    /* Custom + / − icon */
    .accordion-button::before {
      content: '+';
      position: absolute;
      right: 1.5rem;
      font-size: 1.5rem;
      transition: transform 0.3s ease, content 0.3s ease;
    }

    .accordion-button[aria-expanded="true"]::before {
      content: '−';
      transform: rotate(180deg);
    }

    .accordion-body {
      background-color: #fff;
      color: #333;
      padding: 1.25rem 1.5rem;
      font-size: 1rem;
      border-top: 1px solid #ddd;
    }

    @media (max-width: 768px) {
      .accordion-button {
        font-size: 1rem;
      }

      .accordion-button::before {
        font-size: 1.2rem;
      }

      .accordion-body {
        font-size: 0.95rem;
      }
    }

    /* End of Accordion Custom CSS */


    /* Custom List Begin */

    body {
    background: #031716; /* dark futuristic bg */
    font-family: "Orbitron", "Roboto", sans-serif;
    color: #F8F9FA;
    display: flex;
    justify-content: center;
    align-items: left;
    min-height: 100vh;
  }

  .circuit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
  }

  .circuit-list li {
    position: relative;
    padding-left: 60px;
    margin: 40px 0;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* Glowing Node */
  .circuit-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #00f0ff;
    box-shadow: 0 0 10px #00f0ff, 0 0 30px #00f0ff, inset 0 0 10px #F8F9FA;
    animation: glowPulse 2s infinite;
  }

  /* Connecting vertical line */
  .circuit-list li::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 28px;
    width: 2px;
    height: calc(100% + 12px);
    background: linear-gradient(to bottom, #F8F9FA, transparent);
  }

  .circuit-list li:last-child::after {
    display: none;
  }

  /* Neon glowing hover effect */
  .circuit-list li span {
    transition: color 0.3s, text-shadow 0.3s;
  }

  .circuit-list li:hover span {
    color: #00f0ff;
    text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff;
  }

  @keyframes glowPulse {
    0% { box-shadow: 0 0 5px #00f0ff, 0 0 20px #00f0ff, inset 0 0 5px #F8F9FA; }
    50% { box-shadow: 0 0 20px #00f0ff, 0 0 40px #00f0ff, inset 0 0 15px #F8F9FA; }
    100% { box-shadow: 0 0 5px #00f0ff, 0 0 20px #00f0ff, inset 0 0 5px #F8F9FA; }
  }

    /* Custom List End */

  /* Custom Green Check List Begin */
  .green-check::marker {
    content: "✔ ";        /* add emoji or symbol */
    color: green;
    font-weight: bold;
  }

 
}

/* Square Container */
.accent-square {
    width: 280px;
    height: 280px;
    background: #F8F9FA; /* Ice White (Background) */
    border-left: 6px solid #2B2B2B; /* Charcoal Grey (Outer Arc) */
    border-radius: 14px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 14px 34px rgba(10, 27, 42, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Square Container */
.accent-square {
    width: 280px;
    height: 180px;
    background: #F8F9FA; /* Ice White (Background) */
    border-left: 6px solid #2B2B2B; /* Charcoal Grey (Outer Arc) */
    border-radius: 14px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 14px 34px rgba(10, 27, 42, 0.18);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Hover Lift */
.accent-square:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 46px rgba(10, 27, 42, 0.28);
}

/* Heading – Cyan–Teal Gradient */
.accent-square h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    background: linear-gradient(90deg, #0072FF,#ffd60a, #d15220 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Description Text */
.accent-square p {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #0A1B2A; /* Deep Navy (Sharp Details) */
    opacity: 0.85;
    flex-grow: 1;
}

/* CTA Button */
.accent-square button {
    align-self: flex-start;
    background: transparent;
    color: #004AAD; /* Royal Blue (Balance) */
    border: 2px solid #E63946; /* Crimson Red (Accent) */
    padding: 10px 22px;
    border-radius: 26px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Hover + Glow */
.accent-square button:hover {
    background: #0A1B2A;
    color: #FFD60A; /* Cyber Yellow */
    border-color: #F8F9FA;
    box-shadow: 0 0 22px rgba(255, 214, 10, 0.6);
}


.primary-btn-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    font-weight: 700;
    padding: 14px 34px;

    color: #F8F9FA;
    text-decoration: none;
    position: relative;

    background: linear-gradient(50deg, #ffd60a, #d15220, #0072FF);
    border: none;
    border-radius: 8px;

    cursor: pointer;
    transition: all 0.35s ease;
}

/* Hover / Lift Effect */
.primary-btn-square:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 114, 255, 0.45);
}

/* Optional Focus State */
.primary-btn-square:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.35);
}