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

    01. General Settings
    02. Scrollbar style
    03. Selection style
    04. Preloader style
    05. Owl Carousel style
    06. Lines style
    07. Header style
    08. Slider style
    09. Parallax Image style
    10. Kenburns Slider style
    11. Video Background style
	12. Services style
    13. About style
    14. tools style 
    15. Gallery style
    16. Video Gallery style
    17. Accordion Box (for Faqs) style
    18. Testimonials style
    19. Team style
    20. Team Details style
    21. Careers style
    22. Clients style
    23. Blog style
    24. Post style
    25. Contact style
    26. Coming Soon style
    27. 404 page style
    28. Buttons style
	29. Footer style
    30. Overlay Effect Bg image
	31. Media Query

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


/* =======  General Settings  ======= */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    word-wrap: break-word;
}

:root {
    scroll-behavior: auto;
    --primary-blue: #002266;
    --secondary-green: #2C9212;
    --accent-orange: #D46A24;
    --neutral-light: #F5F5F5;
    --neutral-medium: #777777;
    --neutral-dark: #333333;
}

body {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.9em;
    font-weight: 300;
    color: var(--neutral-medium);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
}

p {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.9em;
    font-weight: 300;
    color: var(--neutral-medium);
    margin-bottom: 20px;
}

img {
    width: 100%;
    height: auto;
}

span,
a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

span:hover,
a:hover {
    text-decoration: none;
    color: var(--secondary-green);
}

b {
    color: var(--secondary-green);
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--neutral-dark);
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
}

h1 { font-size: 60px; }
h2 { font-size: 50px; }
h3 { font-size: 40px; }
h4 { font-size: 30px; }
h5 { font-size: 20px; }
h6 { font-size: 15px; }

/* text field */
button,
input,
optgroup,
select,
textarea {
    font-family: 'Oswald', sans-serif;
}

input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
    outline: none;
}

input[type="password"],
input[type="email"],
input[type="text"],
input[type="file"],
textarea {
    max-width: 100%;
    margin-bottom: 10px;
    padding: 10px 0;
    height: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-width: 0 0 1px;
    border-style: solid;
    display: block;
    width: 100%;
    line-height: 1.5em;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #777;
    background-image: none;
    border-bottom: 1px solid #f4f4f4;
    border-color: ease-in-out .15s, box-shadow ease-in-out .15s;
}

input:focus,
textarea:focus {
    border-bottom-width: 1px;
    border-color: var(--secondary-green);
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.75em;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    background: var(--secondary-green);
    border: 1px solid transparent;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    background-color: var(--primary-blue);
    color: #fff;
    border: 1px solid transparent;
}

select {
    padding: 10px;
    border-radius: 5px;
}

table,
th,
tr,
td {
    border: 1px solid #f4f4f4;
}

th,
tr,
td {
    padding: 10px;
}

input[type="radio"],
input[type="checkbox"] {
    display: inline;
}

/* submit and alert success  */
input[type="submit"] {
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    background: var(--secondary-green);
    color: #fff;
    padding: 12px 24px;
    margin: 0;
    position: relative;
    font-size: 14px;
    letter-spacing: 3px;
}

.alert-success {
    background: transparent;
    color: var(--neutral-medium);
    border: 1px solid var(--secondary-green);
    border-radius: 0px;
}

.title {
    font-size: 40px;
    margin-bottom: 20px;
    color: var(--neutral-dark);
    word-spacing: 3px;
    text-transform: uppercase;
    letter-spacing: 10px;
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    line-height: 1.5em;
}

.small-title {
    color: var(--secondary-green);
    margin-bottom: 5px;
    font-size: 13px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    letter-spacing: 7px;
}

/* margin & padding */
.mt-80 {
    margin-top: 80px !important;
}

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

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

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

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

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

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

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

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

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

/* important */
.o-hidden {
    overflow: hidden;
}

.pos-re {
    position: relative;
}

.full-width {
    width: 100% !important;
}

.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-fixed {
    background-attachment: fixed;
}

.v-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.section-padding {
    padding-top: 100px;
    padding-bottom: 100px;
}


/* =======  3D Model style  ======= */
spline-viewer {
    position: absolute;
    top: 0;
    left: 0;
    /* Optional: if you want to ensure it's above other elements */
    z-index: 1;
    /* Optional: if you want it to take full width/height */
    width: 100%;
    height: 100%;
}

/* Ensure mobile responsiveness */
@media screen and (max-width: 991px) {
    spline-viewer {
        width: 100%;
        height: auto; /* Adjust height for responsiveness */
    }
}

/* ======= Scrollbar style  ======= */
::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-dark);
}


/* ======= Selection style  ======= */
::-webkit-selection {
    color: var(--neutral-medium);
    background: rgba(0, 0, 0, 0.1);
}

::-moz-selection {
    color: var(--neutral-medium);
    background: rgba(0, 0, 0, 0.1);
}

::selection {
    color: var(--neutral-medium);
    background: rgba(0, 0, 0, 0.1);
}


/* =======  Preloader style  =======  */
#loader {
  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;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999999; }
#loader .loading,
#loader .loading > div {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
#loader .loading {
    display: block;
    font-size: 0;
    color: var(--secondary-green);
    width: 55px;
    height: 55px; }
#loader .loading > div {
      display: inline-block;
      float: none;
      border: 2px solid;
      width: 55px;
      height: 55px;
      background: transparent;
      border-bottom-color: transparent;
      border-radius: 100%;
      -webkit-animation: loading .75s linear infinite;
      -moz-animation: loading .75s linear infinite;
      -o-animation: loading .75s linear infinite;
      animation: loading .75s linear infinite; }
@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }


/* ======= Owl Carousel style  ======= */
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 20px;
    line-height: .7;
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: 50%;
    background: #ddd;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--secondary-green);
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
  outline: none;
}


/* =======  Lines style  ======= */
.content-lines-wrapper {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.content-lines-inner {
    position: absolute;
    width: 1140px;
    left: 50%;
    margin-left: -570px;
    top: 0;
    height: 100%;
    border-left: 1px solid #f4f4f4;
    border-right: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
}

.content-lines {
    position: absolute;
    left: 33.666666%;
    right: 33.666666%;
    height: 100%;
    border-left: 1px solid #f4f4f4;
    border-right: 1px solid #f4f4f4;
}


/* =======  Header style  ======= */
.header {
    min-height: 100vh;
    position: relative;
}

.header.video {
    overflow: hidden;
}

.header .caption .o-hidden {
    display: inline-block;
}

.header .caption h4 {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 10px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    letter-spacing: 15px;
}

.header .caption h1 {
    font-size: 75px;
    color: #fff;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-weight: 400;
}

.header .caption p {
    font-size: 18px;
    font-weight: 300;
    margin-top: 15px;
    color: #fff;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.header .caption p span {
    text-transform: uppercase;
    margin: 0 5px;
    padding-right: 15px;
    position: relative;
}

.header .caption p span:last-child {
    padding: 0;
}

.header .caption p span:last-child:after {
    display: none;
}

.header .caption p span:after {
    content: '';
    width: 7px;
    height: 7px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--secondary-green);
    position: absolute;
    top: 10px;
    right: 0;
    opacity: .5;
}

.header .caption .btn {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    border: none;
}


/* =======  Slider style  ======= */
.slider .owl-item,
.slider-fade .owl-item {
    height: 100vh;
    position: relative;
}

.slider .item,
.slider-fade .item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
}

.slider .item .caption,
.slider-fade .item .caption {
    z-index: 9;
}

.slider .owl-theme .owl-dots,
.slider-fade .owl-theme .owl-dots {
    position: absolute;
    bottom: 5vh;
    width: 100%;
}


/* ======= Parallax Image style ======= */
.banner-header {
    padding: 160px 0;
}

.banner-header.full-height {
    min-height: 100vh;
}

.banner-header h4 {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 10px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    letter-spacing: 15px;
}

.banner-header h1 {
    font-size: 75px;
    color: #fff;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-weight: 400;
}

.banner-header p {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .banner-header {}
    .banner-header h1 {
        font-size: 45px;
    }
    .banner-header h4 {
        font-size: 30px;
    }
}


/* ===== Kenburns Slider style ===== */
.kenburns-section {
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    min-height: 100vh;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.kenburns-section::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    background: #fff;
}

.kenburns-inner {
    position: relative;
    z-index: 15;
}

.kenburns-inner .caption {
    position: relative;
}

.kenburns-inner .caption h4 {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 10px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    letter-spacing: 15px;
}

.kenburns-inner .caption h1 {
    font-size: 75px;
    color: #fff;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-weight: 400;
}

#kenburnsSliderContainer .vegas-overlay {
    outline: none;
}

@media screen and (max-width: 767px) {
    .kenburns-inner .caption h1 {
        font-size: 45px;
    }
    .kenburns-inner .caption h4 {
        font-size: 30px;
    }
    .kenburns-inner .caption {
        text-align: center;
    }
}


/* =======  Video Background style  ======= */
.video-fullscreen-wrap {
    height: 100vh;
    overflow: hidden;
}

.video-fullscreen-wrap .caption {
    position: relative;
}

.video-fullscreen-wrap .caption.text-left {
    text-align: left;
}

.video-fullscreen-wrap h4 {
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 10px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
    letter-spacing: 15px;
}

.video-fullscreen-wrap h1 {
    font-size: 75px;
    color: #fff;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-weight: 400;
}

.video-fullscreen-video {
    height: 100%;
}

.video-fullscreen-wrap video {
    width: 100vw;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.video-fullscreen-wrap .video-fullscreen-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: right;
}

.video-lauch-wrapper {
    border: none;
    background: none;
    width: 100%;
    padding: 0;
}

.video-fullscreen-wrap .overlay {
    /*  background-image: linear-gradient(to bottom right, #000000, #000000);*/
    opacity: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 4;
}

.position-relative {
    position: relative !important;
}


/* ======= Services style  ======== */
.services {
    position: relative;
}

.services .item {
    padding: 5px 10px;
    position: relative;
    background-size: cover;
    background-position: 50% 0% !important;
}

.services .item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 12, 12, 0.5);
}

.services .item:hover:after {
    opacity: 0;
}

.services .item:hover h5,
.services .item:hover p,
.services .item:hover h5 .services .item:hover span {
    color: #fff;
}

.services .item:hover .numb {
    -webkit-text-stroke: 1px #fff
}

.services .item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.services .item .con {
    position: relative;
    z-index: 7;
}

.services .item h5 {
    font-size: 18px;
    margin-bottom: 20px;
    color: var(--secondary-green);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 300;
}

.services .item .numb {
    font-size: 60px;
    line-height: 60px;
    font-weight: 500;
    font-family: 'Oswald', sans-serif;
    color: transparent;
    -webkit-text-stroke: 1px var(--neutral-medium);
    opacity: .8;
    margin-bottom: 20px;
}

.services .item p {
    font-size: 15px;
}

/* services background image */
.services .sr-1 {
    background-image: url(../img/service/1.jpg);
}

.services .sr-2 {
    background-image: url(../img/service/2.jpg);
}

.services .sr-3 {       
    background-image: url(../img/service/3.jpg);
}

.services .sr-4 {
    background-image: url(../img/service/4.jpg);
}

.services .sr-5 {
    background-image: url(../img/service/5.jpg);
}

.services .sr-6 {
    background-image: url(../img/service/6.jpg);
}  


/* =======  About style  ======= */
.about {
    position: relative;
}

.about .image {
    position: relative;
}

.about .image .img {
    position: relative;
}

.about .image .img .vid {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 2.1em;
    font-size: 40px;
    color: #e8cdac;
    z-index: 3;
}

.about .image .img .vid:hover:after {
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    opacity: 0;
}

.about .image .img .vid:after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--secondary-green);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -4px;
    z-index: -1;
    /* opacity: .7; */
    -webkit-transition: all .5s;
    transition: all .5s;
}

.about .image .img img {}

.about .numb {
    font-size: 160px;
    line-height: 200px;
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    color: var(--secondary-green);
    margin-bottom: 0;
}

.about .year {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 25px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Oswald';
    padding-left: 20px;
}

.about .yearimg {
    margin: 0;
    display: inline-block;
    vertical-align: bottom;
}

.about .yearimg img{
    width: 200px;
}


/* ======= tools style ======= */
.tools {
    position: relative;
    background: #fff;
}

.tools .item {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.tools .item .position-re {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.tools .item .position-re img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tools .item .layered-images {
    position: relative;
    width: 100%;
    height: 300px;
}

.tools .item .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.tools .item .foreground-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
}

.tools .item img {
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-filter: brightness(100%);
}

.tools .item .position-re {
    position: relative;
}

.tools .item:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-filter: brightness(40%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.tools .item .con {
    padding: 30px;
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-align: center;
    z-index: 20;
}

.tools .item:hover .con {
    bottom: 0;
}

.tools .item .con .category {
    color: var(--secondary-green);
    font-size: 13px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 5px;
}

.tools .item .con h5 {
    font-size: 24px;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.tools .item .con i {
    color: #fff;
    font-size: 20px;
}


/* ======= Gallery style ======= */
.gallery {
    position: relative;
}

.gallery-item {
    position: relative;
    margin-bottom: 20px;
}

.gallery-box {
    overflow: hidden;
    position: relative;
}

.gallery-box .gallery-img {
    position: relative;
    overflow: hidden;
}

.gallery-box .gallery-img:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
}

.gallery-box .gallery-img > img {
    transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    border-radius: 0;
}

.gallery-box .gallery-detail {
    opacity: 0;
    color: #ffffff;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    overflow: hidden;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
}

.gallery-box .gallery-detail h4 {
    font-size: 18px;
}

.gallery-box .gallery-detail p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
}

.gallery-box:hover .gallery-detail {
    top: 50%;
    transform: translate(0, -50%);
    opacity: 1;
}

.gallery-box:hover .gallery-img:after {
    background: rgba(0, 0, 0, 0.5);
}

.gallery-box:hover .gallery-img > img {
    transform: scale(1.05);
}


/* ======= Video Gallery style ======= */
.vid-icon {
    position: relative;
    overflow: hidden;
}

.vid-icon:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.video-gallery-button {
    position: relative;
    margin: auto;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    z-index: 4;
    margin-right: 20px;
    float: left;
}

.video-gallery-polygon {
    z-index: 2;
    padding-right: 5px;
    display: inline-block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--secondary-green);
    border-radius: 50%;
    color: #fff;
    padding: 10px 9px 10px 11px;
    line-height: 0;
    box-shadow: 0px 0px 0px 5px rgb(255 255 255 / 10%);
}

.video-gallery-polygon:hover {
    background: #fff;
    color: var(--neutral-dark);
}

.video-gallery-polygon {
    font-size: 13px;
}

/* magnific popup custom */
.mfp-figure button {
    border: 0px solid transparent;
}

button.mfp-close,
button.mfp-arrow {
    border: 0px solid transparent;
    background: transparent;
}


/* ======= Accordion Box (for Faqs) style ======= */
.faq {
    position: relative;
}

.accordion-box {
  position: relative;
  padding-left: 3px;
}

.accordion-box .block {
    position: relative;
    background: #f4f4f4;
    border-radius: 0px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #f4f4f4;
}

.accordion-box .block.active-block {
  background-color: #f4f4f4;
}

.accordion-box .block:last-child {
  margin-bottom: 0;
}

.accordion-box .block .acc-btn {
    position: relative;
    font-size: 15px;
    line-height: 27px;
    font-weight: 400;
    cursor: pointer;
    padding: 20px 40px;
    padding-right: 60px;
    color: var(--neutral-medium);
    transition: all 500ms ease;
}

.accordion-box .block .acc-btn .count {
  color: var(--secondary-green);
  padding-right: 3px;
}

.accordion-box .block .acc-btn:before {
  position: absolute;
    right: 35px;
    top: 20px;
    height: 30px;
    font-size: 12px;
    font-weight: normal;
    color: var(--neutral-medium);
    line-height: 30px;
    content: "\e64b";
    font-family: "Themify";
    transition: all 500ms ease;
}

.accordion-box .block .acc-btn.active {
  background-color: #f4f4f4;
    color: var(--secondary-green);
}

.accordion-box .block .acc-btn.active:before {
  color: "Themify";
  content: "\e648";
    color: var(--secondary-green);
}

.accordion-box .block .acc-content {
  position: relative;
  display: none;
}

.accordion-box .block .content {
  position: relative;
    padding: 0px 40px 30px;
    background-color: #f4f4f4;
    color: var(--neutral-medium);
}

.accordion-box .block .acc-content.current {
  display: block;
}

.accordion-box .block .content .text {
  display: block;
  position: relative;
  top: 0px;
  display: block;
}


/* =======  Testimonials style  ======= */
.testimonials {
    padding: 60px 30px;
    border-top: 0;
    margin-bottom: 0;
}

.testimonials .icon {
    position: absolute;
    top: 30px;
    width: 60px;
}

.testimonials .client-area {
    margin-bottom: 20px;
}

.testimonials .client-area .img {
    display: inline-block;
}

.testimonials .client-area .author {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
}

.testimonials .client-area h6 {
    font-size: 18px;
    color: var(--secondary-green);
    margin-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 300;
}

.testimonials .client-area span {
    font-size: 15px;
    color: #FFF;
}

.testimonials p {
    margin-bottom: 0px;
    color: var(--neutral-medium);
    font-style: italic;
}

.testimonials .owl-carousel {
    overflow: hidden;
}

.testimonials .owl-theme .owl-dots {
    float: right;
}


/* =======  Team style  ======= */
.team {
  position: relative;
  padding-bottom: 90px;
}

.team .item {
    text-align: center;
}

.team .item:hover .info {
  top: 0;
  opacity: 1;
}

.team .item .team-img {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.team .item .info {
  position: absolute;
  top: 100%;
  left: 0;
  height: 100%;
  width: 100%;
  background: #2C9212cc;
  color: #fff;
  opacity: 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.team .item h6 {
    margin-bottom: 0px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 300;
}

.team .item span {
  margin-bottom: 20px;
}

.team .item .icon {
    font-size: 12px;
    margin: 0 3px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.team .item .social a {
    color: #fff;
}

.team .item .icon:hover {
    background: var(--secondary-green);
    border: 1px solid var(--secondary-green);
    color: var(--neutral-dark);
}




/* hover */
.position:hover {
    background-color: #b19777;
}

.position:hover .position-title,
.position:hover .position-title span,
.position:hover .position-location,
.position:hover .position-location span,
.position:hover .position-time,
.position:hover .position-time span,
.position:hover .position-icon {
    color: #fff;
}

@media only screen and (max-width:991px) {
    .position {
        flex-direction: column;
        -webkit-box-pack: initial;
        -webkit-justify-content: initial;
        -ms-flex-pack: initial;
        justify-content: initial;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        -webkit-box-align: start;
        -webkit-align-items: flex-start
    }
    .position-title {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }
    .position-location {
        margin-top: 15px;
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }
    .position-time {
        margin-top: 15px;
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }
    .position-icon {
        display: none
    }
}


/* ======= Clients style  ======= */
.clients {
  padding: 15px 0;
}

.clients .owl-carousel {
  margin: 0;
}

.clients .client-logo {
  padding: 20px 15px;
  text-align: center;
}

.clients .client-logo img {
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

/* ======= Blog ======= */
.blog {
    position: relative;
    background: #fff;
}
.blog-item {
    border: 1px solid #eee;
}

.blog-item .item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

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

.blog-item .post-img {
    position: relative;
    overflow: hidden;
}

.blog-item .post-img img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: all 0.3s ease;
}

.blog-item .item:hover .post-img img {
    transform: scale(1.1);
}

.blog-item .content {
    padding: 25px;
}

.blog-item .tag {
    display: inline-block;
    padding: 5px 15px;
    background: var(--secondary-green);
    color: #fff;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 15px;
    white-space: nowrap;
    overflow: hidden;
}

.blog-item h5 {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.4;
}

.blog-item h5 a {
    color: var(--neutral-dark);
    text-decoration: none;
}

.blog-item p {
    margin-bottom: 15px;
    color: var(--neutral-medium);
    font-size: 14px;
    line-height: 1.6;
}

.blog-item .post-meta {
    font-size: 13px;
    color: var(--neutral-medium);
}

.blog-item .post-meta a {
    color: var(--secondary-green);
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-item {
        margin-bottom: 20px;
    }
    
    .filter-button {
        padding: 6px 15px;
        font-size: 13px;
    }
}


/* Blog Filter Styles */
.blog-filter {
    margin-bottom: 30px;
}

.filter-button {
    display: inline-block;
    padding: 8px 20px;
    margin: 5px;
    cursor: pointer;
    border: 1px solid var(--secondary-green);
    border-radius: 30px;
    background: transparent;
    transition: all 0.3s ease;
    color: var(--secondary-green);
}

.filter-button:hover,
.filter-button.active {
    background: var(--secondary-green);
    color: #fff;
}

.blog-grid {
    margin: 0 -15px;
}

.blog-item {
    padding: 0 15px;
    margin-bottom: 30px;
}

.blog-item .item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-item .post-img {
    height: 240px;
    overflow: hidden;
}

.blog-item .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-item .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px;
}

.blog-item .content p {
    flex: 1;
    margin-bottom: 15px;
}

/* ======= Contact ======= */
.contact {
    position: relative;
    background: #fff;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 60vh;
    padding: 0;
    margin-left: 0px;
    width: 100%;
    display: block;
    overflow: hidden; /* Crucial for Spline responsiveness */
}

.hero-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgb(255, 255, 255);
    padding: 1rem 0; /* Reduced and consistent padding */
    z-index: 10;
    text-align: center;
}

.banner-text {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem; /* Starting size */
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.banner-word {
    font-weight: 300;
    text-transform: uppercase;
    margin: 0.5rem 0; /* Add some vertical spacing */
}

.banner-word.blue {
    color: var(--primary-blue);
}

.banner-word.green {
    color: var(--secondary-green);
}

.banner-separator {
    color: var(--primary-blue);
    font-size: 2rem; /* Consistent with other text */
    margin: 0 0.5rem; /* Horizontal spacing */
}

/* Responsive adjustments for banner */
@media (max-width: 991px) {
    .banner-text {
        font-size: 1.5rem; /* Smaller size */
        gap: 10px; /* Reduced gap */
    }
    .banner-separator {
        font-size: 0.8rem;
    }
}

@media (max-width: 767px) {
    .banner-text {
        font-size: 1.2rem; /* Even smaller */
        gap: 5px;
    }
}

spline-viewer {
    width: 100%;
    height: 100%;
}


/* Button Styles */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 300;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    background-color: var(--secondary-green);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn:hover {
    background-color: var(--primary-blue);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



/* Specific button styles */
.btn.contact-popup-btn {
    background-color: var(--secondary-green);
}

.btn.contact-popup-btn:hover {
    background-color: var(--primary-blue);
}

/* Styles for buttons within specific sections */
/* Tools Section */
#tools .btn {
    /* Specific styles if needed */
}

/* Blog Section */
#blog .btn {
    /* Specific styles if needed */
}

/* Contact Section */
#contact .btn {
    /* Specific styles if needed */
}

.contact-popup-form {
    display: flex;
    flex-direction: column;
}

.contact-popup-form input,
.contact-popup-form textarea {
    width: 100%; /* Full width */
    margin-bottom: 15px; /* Spacing between elements */
    padding: 12px; /* Padding for inputs */
    border: 1px solid #ddd; /* Border for inputs */
    border-radius: 4px; /* Rounded corners */
    font-family: 'Didact Gothic', sans-serif; /* Consistent font */
    font-size: 16px; /* Font size */
}

.contact-popup-form button {
    background: var(--secondary-green); /* Button color */
    color: white; /* Text color */
    padding: 12px 20px; /* Button padding */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease; /* Smooth transition */
}

.contact-popup-form button:hover {
    background: var(--primary-blue); /* Change color on hover */
}

/* Hero Headline */
.hero-headline {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    padding: 0 5%;
    z-index: 5; /* Ensure it's in front of the Spline viewer */
    text-align: center;
}

.hero-headline h1 {
    color: var(--primary-blue);
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: 2.5rem;
    line-height: 1.3;
    max-width: 1200px;
    margin: 0 auto;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); /* Text shadow to improve readability */
}

/* Responsive styling for hero headline */
@media (max-width: 1200px) {
    .hero-headline h1 {
        font-size: 2rem;
    }
}

@media (max-width: 991px) {
    .hero-headline {
        top: 35%;
    }
    .hero-headline h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-headline {
        top: 35%;
    }
    .hero-headline h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .hero-headline {
        top: 30%;
    }
    .hero-headline h1 {
        font-size: 1.8rem;
    }
}
/* Quote Styles */
blockquote {
    font-style: italic; /* Italicize the text */
    color: #555; /* Change text color */
    border-left: 4px solid #2C9212; /* Add a left border */
    padding: 10px 20px; /* Add padding */
    margin: 20px 20px; /* Add margin above and below */
    background-color: #f9f9f9; /* Light background color */
    border-radius: 5px; /* Rounded corners */
    position: relative; /* Position for pseudo-element */
}