/*
Theme Name: HVAC
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: HVAC is specially designed product packaged for HVAC services by TemplatesJungle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

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

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
  2.4 Buttons
    - Primary Buttons
    - Button Hover Effect

3. CONTENT ELEMENTS
  - Dropdown
  - Breadcrumb
  - Pagination
  - Accordion
  - Form
  - Swiper
  - Modal Video

4. SITE STRUCTURE
  4.1 Header
  4.2 Brand Section
  4.3 About Section
  4.4 Services Section
  4.5 Project Section
  4.6 CTA Section

5. PAGES STYLE
  5.1 Projects Page
  5.2 Pricing page 
  5.3 Reviews page
    

  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #73afd2;
  --secondary-color: #05213C;
  --black-color: #292929;
  --light-black-color: #343536;
  --dark-color: #313131;
  --body-color: #5A5A5A;
  --gray-color: #777F81;
  --light-color: #fdfdfd;
  --dark-blue-color : #0a0343;
  --dark-gray-color: #f8f9fa

  /* Bootstrap Theme Color  */
  --bs-gray-100: #F6F6F6;
  --bs-gray-300: #DCDCDC;
  --bs-primary-text-emphasis: var(--primary-color);
  --bs-body-color-rgb: 90, 90, 90;
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-dark-rgb: 41, 41, 41;
  --bs-primary-rgb: 178, 142, 113;
}

/* Fonts */
:root {
  --heading-font: "Outfit", sans-serif;
  --body-font: "Outfit", sans-serif;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  background-color: var(--light-color);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--body-color);
  margin: 0;
}

p {
  color: var(--body-color);
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}

.text-light {
  color: var(--light-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-black {
  color: var(--black-color) !important;
}

/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
  background-color: var(--light-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-gray {
  background-color: var(--bs-gray-100) !important;
}

.sticky-navbar {
  position: relative; /* Default, akan berubah ketika discroll */
  transition: top 0.3s ease-in-out;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* agar navbar selalu di atas */
}

/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-medium {
  padding-top: 10em;
  padding-bottom: 10em;
}

.padding-large {
  padding-top: 12em;
  padding-bottom: 12em;
}

@media only screen and (max-width: 990px) {
  .padding-small {
    padding-top: 6em;
    padding-bottom: 6em;
  }
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 8.125em;
  margin-bottom: 8.125em;
}

.margin-medium {
  margin-top: 10em;
  margin-bottom: 10em;
}

.margin-large {
  margin-top: 12em;
  margin-bottom: 12em;
}


/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
  font-family: var(--heading-font);
  font-weight: 600;
  letter-spacing: 0.84px;
  line-height: 115%;
}

h6 {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}

/* - Content width
--------------------------------------------------------------*/
.container-md {
  max-width: 1465px;
}

.container-lg {
  max-width: 1750px;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/




.btn {
  --bs-btn-padding-x: 2rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 500;
  text-transform: uppercase;
  border-radius: 0px;
  transition: all 0.5s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
  --bs-btn-color: var(--light-color);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: var(--light-color);
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--light-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--light-color);
  --bs-btn-disabled-bg: var(--primary-color);
  --bs-btn-disabled-border-color: var(--primary-color);
}

/* - Button Hover Effect
--------------------------------------------------------------*/
.btn-slide.btn-bg {
  background-color: var(--light-color);
}

.btn-slide {
  position: relative;
  display: inline-block;
  border: none;
  cursor: pointer;
  background-color: var(--secondary-color);
}

.btn-slide.hover-slide-right::before {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 3%;
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  transition: 0.3s ease-in-out;
}


.btn-slide.hovertwo-slide-right::before {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 3%;
  position: absolute;
  content: "";
  background-color: var(--dark-blue-color);
  transition: 0.3s ease-in-out;
}

.btn-slide span {
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  transition: 0.3s;
  font-weight: 600;
}

.btn-slide.hover-slide-right:hover::before {
  width: 100%;
}

.btn-slide.hover-slide-right:hover span {
  color: var(--light-color);
}

/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  font-weight: 500;
  color: var(--dark-color);
  font-family: var(--heading-font);
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
  color: var(--dark-color);
  background-color: var(--bs-gray-300);
}

.dropdown-toggle::after {
  border: none;
  margin-left: 0em;
  vertical-align: 0em;
}


/* Breadcrumb
------------------------------------------------------------- */
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--bs-light);
  position: relative;
}


/* Pagination
------------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--black-color);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--primary-color);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}


/* Accordion
------------------------------------------------------------- */
.accordion {
  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
  --bs-accordion-border-radius: 0px;
}

.accordion-button:focus {
  box-shadow: none;
}

.card {
  border-radius: 0px; /* Mengatur border radius untuk seluruh card */
  border: transparent; /* Menghilangkan border */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Menambahkan box shadow */
  transition: all 0.3s ease; /* Menambahkan transisi untuk efek hover */
}

.card:hover {
  transform: translateY(-5px); /* Menggeser kartu ke atas saat hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Mengubah bayangan saat hover */
}

.card img {
  border-radius: 0px; /* Mengatur border radius untuk gambar di dalam card */
}

.card-img-top {
  width: 100%; /* Memastikan gambar memenuhi lebar kartu */
  height: 350px; /* Atur tinggi tetap untuk gambar */
  object-fit: cover; /* Memastikan gambar tetap dalam proporsi dan terpotong jika perlu */
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}


/* Form
------------------------------------------------------------- */
.form-control:focus {
  border: 1px solid #acacac;
  box-shadow: none;
}


/* Swiper
------------------------------------------------------------- */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--dark-color);
}


/* Modal Video
------------------------------------------------------------- */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}



/*----------------------------------------------*/
/* 4 SITE STRUCTURE */
/*----------------------------------------------*/

/* 4.1 Header
/*----------------------------------------------*/
a.nav-link {
  text-transform: capitalize;
  font-weight: 500;
  color: white;
  font-family: var(--heading-font);
  transition: all 0.3s ease-in-out;
}

a.nav-link::after {
  content: "";
  text-align: center;
  display: block;
  width: 0;
  height: 2px;
  background: var(--dark-blue-color);
  transition: width 0.9s;
}

a.nav-link.active::after,
a.nav-link:focus::after,
a.nav-link:hover::after {
  width: 100%;
  transition: width 0.9s;
}

#primary-header .dropdown .search::after {
  content: none;
}

#primary-header .search-dropdown .dropdown-menu {
  width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
  min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
  padding: 0 12px;
  min-height: -webkit-fill-available;
  border-radius: 0.25rem;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--dark-blue-color) !important;
}

@media only screen and (max-width: 990px) {
  a.nav-link {
    font-size: 1.5rem;
  }

  a.nav-link.active::after,
  a.nav-link:focus::after,
  a.nav-link:hover::after {
    width: 0%;
  }

  a.nav-link.active,
  a.nav-link:focus,
  a.nav-link:hover {
    color: var(--primary-color) !important;
  }
}

#kontak h3 {
  margin-bottom: 20px;
}

#kontak p {
  font-size: 16px;
  margin: 10px 0;
}

.img-subsidiary {
  width: 300px;
  height: auto;
}

.review-item {
  position: relative; /* Memastikan overlay dan title berada di atas gambar */
  overflow: hidden; /* Menyembunyikan bagian yang keluar dari area */
}

.title-main-box {
  display: inline-block; /* Agar kotak mengikuti ukuran konten */
  padding: 10px; /* Memberikan ruang di dalam kotak */
  border: 2px solid var(--primary-color); /* Garis putus-putus dengan warna */
  background-color: transparent; /* Latar belakang transparan */
 /* Membuat sudut kotak menjadi melengkung */
  color: var(--primary-color) !important; /* Warna teks */
}

.title-main-box-two {
  display: inline-block; /* Agar kotak mengikuti ukuran konten */
  padding: 10px; /* Memberikan ruang di dalam kotak */
  border: 2px solid white; /* Garis putus-putus dengan warna */
  background-color: transparent; /* Latar belakang transparan */
 /* Membuat sudut kotak menjadi melengkung */
  color: white !important; /* Warna teks */
}

.title-box {
  display: inline-block; /* Agar kotak mengikuti ukuran konten */
  padding: 10px; /* Memberikan ruang di dalam kotak */
  border: 2px dashed var(--light-color); /* Garis putus-putus dengan warna */
  background-color: rgba(255, 255, 255, 0.2); /* Latar belakang transparan */
 /* Membuat sudut kotak menjadi melengkung */
  color: #fff; /* Warna teks */
}


.title-two {
  color: var(--dark-gray-color);
}

.img-value {
  width: 100%; /* Mengatur lebar gambar 100% dari kontainer */
  height: 768px; /* Mengatur tinggi gambar */
  max-width: 720px; /* Batas maksimum lebar */
  max-height: 480px; /* Batas maksimum tinggi */
  object-fit: cover; /* Memastikan gambar memenuhi area tanpa merusak rasio aspek */
  transition: .3s ease-in-out; /* Transisi untuk perubahan */
}

.img-value:hover {
  filter: brightness(0.8); /* Menggelapkan gambar saat hover */
}

.margin-top-vismis {
  margin-top: 10.5rem; /* Ganti dengan nilai yang sesuai */
}

.review-item:hover .img-value::before {
  content: ""; /* Menambahkan elemen kosong */
  position: absolute; /* Memastikan posisi tetap di atas gambar */
  top: 0; /* Menutupi dari atas */
  left: 0; /* Menutupi dari kiri */
  width: 100%; /* Mengisi lebar kontainer */
  height: 100%; /* Mengisi tinggi kontainer */
  background-color: hsla(217, 89%, 51%, 0.5); /* Warna biru dengan transparansi */
  z-index: 1; /* Menempatkan di atas gambar */
  transition: background-color 0.3s ease-in-out; /* Transisi halus untuk warna latar belakang */
}


.review-item:hover .author-text {
  opacity: 1; /* Tampilkan judul saat hover */
}


.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Warna hitam dengan transparansi */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* Awalnya tersembunyi */
  transition: opacity 0.3s ease; /* Transisi untuk efek hover */
}

.review-item:hover .overlay {
  opacity: 1; /* Tampilkan overlay saat hover */
}



.container {
  overflow: visible;
  .slider-my {
    animation: slidein 30s linear infinite;
    white-space: nowrap;
    .logos {
      width: 100%;
      display: inline-block;
      margin: 0px 0;
      .fab {
        width: calc(100% / 5);
        animation: fade-in 0.5s 
          cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
      }
    }
  }
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/* 4.2 Brand Section
/*----------------------------------------------*/
img.brand-image {
  filter: contrast(0);
  transition: all 0.3s ease-in;
}

img.brand-image:hover {
  filter: contrast(1);
}

/* Ensure the logo is properly centered */
.logo-head {
  max-height: 60px; /* Adjust this value as needed to fit your design */
  width: auto; /* Maintain aspect ratio */
  margin: 0 auto; /* Center the image horizontally */
  display: block; /* Make sure the image behaves as a block element */
  object-fit: contain; /* Keeps the aspect ratio intact without stretching */
}

.img-jumbotron {
  height: 538px !important;
  width: 359px !important; 
}

.text-justify {
  text-align: justify;
}
/* 4.3 About Section 
/*----------------------------------------------*/
svg.play-icon {
  animation: play 1.5s alternate infinite ease-in;
}

.investment-card-group .card {
  cursor: pointer;
}

/* Scale effect on hover for cards */
.investment-card-group .card.hoverable {
  transition: transform 0.2s ease;
}

.investment-card-group .card.hoverable:hover {
  transform: scale(1.05);
}

/* Overlay styling */
.investment-card-group .card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #4bc4ec80; /* Red overlay with opacity */
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  text-align: center;
}

/* Show overlay when card is hovered or clicked */
.investment-card-group .card:hover .overlay,
.investment-card-group .card.clicked .overlay {
  opacity: 1;
}

/* Text styling inside overlay */
.investment-card-group .overlay-text {
  font-size: 1.1rem;
  margin: 0;
}

/* Icon Circle Styling */
.icon-circle {
  background-color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  margin-bottom: 1rem; /* Adjust spacing between icon and text */
}

.icon-circle i {
  font-size: 1.5rem;
}

/* Scale effect on hover */
.icon-circle:hover {
  transform: scale(1.1);
}

/* Strategic Approach item styling */
.strategy-item {
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.strategy-item h6 {
  font-weight: 600;
  font-size: 1rem;
  margin-top: 0.75rem;
}

.strategy-item p {
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}



@keyframes play {
  0% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1.1);
  }
}



/* 4.4 Services Section
/*----------------------------------------------*/
/* Jarallax */
.jarallax {
  min-height: 350px;
  transition: all 0.5s ease-in-out;
}

.service-block {
  transition: all 0.5s ease-in-out;
}

.service-block:hover .jarallax {
  opacity: 0;
}

.service-btn {
  transition: all 0.5s ease-in-out;
}

.service-block:hover .service-btn {
  color: var(--dark-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.cta-section {
  background-image:
  linear-gradient(to bottom, rgba(115, 175, 210), rgba(0, 58, 108, 0.5)), url('assets/images/getintouch.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 50px; /* Optional padding */
  text-align: center; /* Optional text alignment */
  color: white; /* Optional text color for contrast */
  filter: var(--primary-color);
}


/* 4.5 Project Section
/*----------------------------------------------*/
.swiper-slide.swiper-width {
  width: auto !important;
}

.project-content .portfolio-img {
  transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-img {
  opacity: 0.3;
}

.portfolio-description {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-description {
  opacity: 1;
}



/* 4.6 CTA Section
/*----------------------------------------------*/
.border-dotted {
  border: 2px dashed rgba(255, 255, 255, 0.5);
}






/*----------------------------------------------*/
/* 5 PAGES STYLE */
/*----------------------------------------------*/


/* 5.1 Projects Page
/*----------------------------------------------*/

button.filter-button {
  border: 0;
  background: transparent;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
  color: var(--bs-light);
  background: var(--primary-color);
}


/*--------------------------------------------------------------
 5.2 Pricing page 
  --------------------------------------------------------------*/
.plan-post {
  border: 1px solid var(--secondary-color);
}

span.price-tick {
  color: var(--primary-color);
}

.price-option {
  height: 300px;
}


/*--------------------------------------------------------------
 5.3 Reviews page
--------------------------------------------------------------*/

.reviews-components {
  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
}

iconify-icon.quote {
  font-size: 60px;
  color: var(--primary-color);
}

.rate {
  color: var(--primary-color);
}