/*
Theme Name: Sola - Solar Energy HTML Website Template
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Sola is specially designed product packaged for Solar Energy 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
    - Content width
  2.4 Buttons
    - Primary Buttons
    - Outline Buttons

3. CONTENT ELEMENTS
  - Dropdown
  - Form
  - Svg Color
- Swiper
- Modal

4. SITE STRUCTURE
  4.1 Header
  4.2 Slider Section
  4.3 About Section
  4.4 Services Section
  4.5 Projects Section

5. PAGES STYLE
  5.1 About page
  5.2 Blog page 
  5.3 Pricing page 
  5.4 reviews page
  5.5 faqs page 

6. Images
  6.1 Rounded Images

  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #0f2a62;
  --black-color: #1A2A36;
  --light-black-color: #4E4C49;
  --dark-color: #9B9B9B;
  --primary-color-200: #E8F0F1;
  --primary-color-400: #c4e9ed;
  --gray-color: #777F81;
  --bs-body-bg: ##ffffff;
  --bs-dark-rgb: 80, 80, 80;
  --bs-gray-100: #EAE5DD;
  --bs-gray-300: #DCDCDC;
  --bs-primary-text-emphasis: var(--primary-color);
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-primary-rgb: 15, 42, 98;
  --light-color: #fdfdfd;
  --swiper-theme-color: #111 !important;
  --cadet-blue-color: #9AB4B7;
}

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

.p-mejorado {
  font-size: 1.4rem !important; /* Tamaño de fuente estándar para pantallas grandes */
  line-height: 1.6 !important;  /* Aumenta el espacio entre líneas para mejorar la lectura */
  color: #333;       /* Color del texto */
  font-weight: 400;  /* Peso de fuente estándar */
  margin-bottom: 1.5rem; /* Espacio inferior entre párrafos */
  text-align: justify !important; /* Justifica el texto */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) {
  .p-mejorado {
    font-size: 1rem !important;   /* Tamaño de fuente más pequeño para pantallas muy pequeñas */
    line-height: 1.4 !important;   /* Espacio entre líneas más compacto */
    text-align: justify !important; /* Justificación en pantallas pequeñas */
  }
}

/* Ajustes para pantallas medianas y superiores */
@media (min-width: 576px) and (max-width: 768px) {
  .p-mejorado {
    font-size: 1.1rem !important; /* Tamaño ligeramente menor en móviles más grandes y tablets */
    line-height: 1.5 !important;  /* Espacio entre líneas ajustado */
    text-align: justify !important; /* Justificación en pantallas medianas */
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .p-mejorado {
    font-size: 1.2rem !important; /* Tamaño en tablets y pantallas menores a 1280px */
    line-height: 1.6 !important;  /* Espacio entre líneas estándar */
    text-align: justify !important; /* Justificación en pantallas grandes */
  }
}

@media (min-width: 1280px) {
  .p-mejorado {
    font-size: 1.2rem !important; /* Tamaño de fuente más grande para pantallas mayores */
    line-height: 1.55 !important; /* Espacio entre líneas estándar */
    text-align: justify !important; /* Justificación en pantallas grandes */
  }
}

p {
  text-align: justify !important;
}



.h3-responsive {
  font-size: 3.5rem !important; /* Tamaño de fuente estándar */
  line-height: 1.3; /* Espacio entre líneas */
  color: #333; /* Color del texto */
  margin-bottom: 1.5rem; /* Espacio inferior */
  text-align: center; /* Centrar el texto */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) {
  .h3-responsive {
    font-size: 1.8rem !important; /* Tamaño de fuente más pequeño para pantallas muy pequeñas */
    line-height: 1.2;  /* Espacio entre líneas más compacto */
  }
}

/* Ajustes para pantallas medianas y superiores */
@media (min-width: 576px) and (max-width: 768px) {
  .h3-responsive {
    font-size: 1.8rem; /* Tamaño en móviles más grandes y tablets */
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .h3-responsive {
    font-size: 2rem; /* Tamaño en tablets y pantallas menores a 1280px */
  }
}

@media (min-width: 1280px) {
  .h3-responsive {
    font-size: 2.5rem; /* Tamaño de fuente más grande para pantallas mayores */
  }
}





/*----------------------------------------------*/
/* 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 {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--dark-color);
  margin: 0;
}

p {
  color: var(--dark-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-gray {
  background-color: var(--bs-gray-100) !important;
}

.bg-accent-gradient {
  background: linear-gradient(90deg, #18A7E4 0%, #1BADEC 0.01%, #0A9CDB 100%);
}

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

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

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

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

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

.padding-new {
  padding-top: 3em;
  padding-bottom: 5em;
}

/* - 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(--black-color);
  font-family: var(--heading-font);
  font-weight: 700;
  letter-spacing: 0.84px;
  line-height: 115%;
}

h6 {
  color: var(--light-black-color);
  font-family: var(--body-font);
  font-weight: 500;
  text-transform: uppercase;
}


/* - 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: 400;
  text-transform: uppercase;
  border-radius: 60px;
  letter-spacing: 0.1rem;
  transition: all 0.4s ease-in-out;
}

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

.btn-outline-primary {
  --bs-btn-color: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --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(--primary-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--primary-color);
  --bs-gradient: none;
}

.carousel-indicators {
  padding-top: 10px !important; /* Añadir espacio superior al contenedor */
  margin-bottom: 0rem !important;
}

.carousel-indicators button {
  background-color: #0f2a62 !important; /* Color azul como los h2 */
  border: none; /* Eliminar el borde */
  width: 30px !important; /* Ancho de los botones */
  height: 5px !important; /* Alto de los botones */
  border-radius: 50% !important; /* Hacerlos circulares */
}

.carousel-indicators button.active {
  background-color: #E6E1D9 !important; /* Color para el botón activo */
}



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

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  color: var(--dark-color);
}

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

/* Form
------------------------------------------------------------- */
.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: none;
}

.form-check-input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

input,
select,
textarea {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

select:focus {
  box-shadow: none;
}

/* Svg Color
------------------------------------------------------------- */
svg.light-color {
  color: var(--light-color);
}

svg.dark-color {
  color: var(--dark-color);
}

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

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

svg.primary-color-500 {
  color: var(--bs-primary-rgb);
}

/* Swiper
------------------------------------------------------------- */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 8px;
}

.slider-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 3px;
  border-radius: 0;
  background: #FFFFFF;
}

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

.testimonial-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
}

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


/* modal video override
------------------------------------------------------------- */
.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: uppercase;
  color: var(--light-black-color);
}

a.nav-link:focus {
  color: var(--light-black-color);
}

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

#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;
}

/* Responsive font size for nav links on mobile */
@media (max-width: 999px) {
  a.nav-link {
    font-size: 30px;
    padding: 15px 0 !important;
  }
}

/* Fixed positioning for both headers */
.header-top,
#primary-header {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 1030;
}

.header-top {
  top: 0;
  margin: 0;
  padding: 0;
}

#primary-header {
  top: 33px; /* Altura del .header-top */
  margin: 0;
  padding: 0;
}

/* Offcanvas styling */
.offcanvas {
  background-color: white;
}

/* Center text on small screens */
@media (max-width: 992px) {
  .offcanvas-body {
    text-align: center;
  }
  .navbar-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* 4.2 Slider Section
/*----------------------------------------------*/
section#slider .banner-content {
  width: 40%;
  background: rgba(253, 253, 253, 0.90);
}

section#slider .main-slider-button-next,
.main-slider-button-prev {
  z-index: 111111;
  height: fit-content;
  opacity: 0.9;
}

section#slider .main-slider-button-next.swiper-button-disabled,
.main-slider-button-prev.swiper-button-disabled {
  opacity: 0.6;
}

@media only screen and (max-width: 999px) {
  section#slider .banner-content {
    width: 66%;
  }
}

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

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

  100% {
    transform: scale(1.1);
  }

}


/* 4.4 Services Section
/*----------------------------------------------*/
.service-post img.service-img {
  transition: all 0.5s ease-in-out;
}

.service-post:hover img.service-img {
  opacity: 0.2;
}



.service-post {
  position: relative;
  overflow: hidden; /* Asegura que los elementos no se desborden */
}

.service-img {
  object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
  height: 100%; /* Asegura que la imagen ocupe el 100% de la altura del contenedor */
}

.info-overlay {
  position: absolute;
  top: 40%; /* Ajusta según lo necesites para centrar el texto */
  left: 50%; /* Centrado horizontalmente */
  transform: translate(-50%, -50%); /* Centrado absoluto */
  text-align: center;
  width: 100%; /* Ocupa el 100% del ancho */
  padding: 10px; /* Espacio alrededor del texto */
  z-index: 1; /* Por encima de la imagen */
}

.stats-overlay {
  position: absolute;
  bottom: 10%; /* Ajusta según necesites el espacio */
  left: 50%; /* Centrado horizontalmente */
  transform: translateX(-50%); /* Centrado absoluto */
  text-align: center;
  width: 100%; /* Ocupa el 100% del ancho */
  padding: 10px; /* Espacio alrededor del texto */
  z-index: 1; /* Por encima de la imagen */
}



/* 4.5 Projects Section
/*----------------------------------------------*/

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 PAGES STYLE */
/*----------------------------------------------*/

/*--------------------------------------------------------------
5.1 About page 
--------------------------------------------------------------*/

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--bs-light);
}


/*--------------------------------------------------------------
  5.2 Blog page 
  --------------------------------------------------------------*/
.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);
}


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

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

.price-option {
  height: 320px;
}


/*--------------------------------------------------------------
 5.4 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);
}



/*--------------------------------------------------------------
5.5 faqs page 
--------------------------------------------------------------*/

/* accordian style override  */

.accordion {
  --bs-accordion-border-color: var(--primary-color);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23d06051&width=30');
  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23d06051&width=30');
  --bs-accordion-border-radius: 0px;
}

.accordion-header {
  margin-bottom: 0;
  border-top: 1px solid var(--primary-color);
}

.accordion-button {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  letter-spacing: 0.065rem;
  text-transform: uppercase;
}

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

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




/* ---- LOGO ---- */

/* Estilo para el logo */
.logo {
  max-width: 400px;  /* Tamaño máximo del logo en pantallas grandes */
  height: auto;      /* Mantener la proporción del logo */
  display: block;    /* Asegurar que el logo se comporte como un bloque */
  margin: 0 auto;    /* Centrar el logo si es necesario */
}

/* Para pantallas pequeñas */
@media (max-width: 992px) {  
  .logo {
      max-width: 300px;  /* Ajusta el tamaño máximo del logo en pantallas medianas */
  }
}

/* Para pantallas más pequeñas (tabletas y dispositivos pequeños) */
@media (max-width: 768px) {  
  .logo {
      max-width: 200px;  /* Ajusta el tamaño máximo del logo en pantallas pequeñas */
  }
}

/* Para pantallas extra pequeñas (móviles en retrato) */
@media (max-width: 576px) {  
  .logo {
      max-width: 200px;  /* Ajusta el tamaño máximo del logo en pantallas muy pequeñas */
  }
}



.d-inline-flex {
  display: inline-flex;
  align-items: baseline;
}

.ms-1 {
  margin-left: 0.25rem; /* Ajusta el margen según sea necesario */
}

/* Aplica estilo solo a las imágenes dentro de la clase language-switcher */
.language-switcher button img {
  width: 20px; /* Ajusta este valor según el tamaño deseado */
  height: auto; /* Mantiene la proporción correcta de la imagen */
}

/* Opcional: estilo de los botones para remover el borde y fondo */
.language-switcher button {
  background: none;
  border: none;
  padding: 0;
  margin-right: 5px; /* Espaciado entre las banderas */
  cursor: pointer;
}


.service-icon {
  width: 80px; /* Ajusta el tamaño aquí */
  height: auto;
}


/*----------------------------------------------*/
/* 6 IMAGES */
/*----------------------------------------------*/

/*--------------------------------------------------------------
6.1 Rounded Images 
--------------------------------------------------------------*/
.rounded-image {
  border-radius: 15px; /* Ajusta el valor según el redondeo que desees */
}


/* ---- ACEPTAR COOKIES ---- */

#cookies-consent {
  display: block; /* Asegúrate de que se muestre el banner */
  position: fixed;
  bottom: 20px; /* Ajusta la distancia desde la parte inferior según sea necesario */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente */
  padding: 20px; /* Ajusta el relleno según sea necesario */
  border-radius: 5px; /* Bordes redondeados */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Sombra */
  max-width: 80%; /* Ancho máximo del div */
  color: #000; /* Color del texto */
}

@media (max-width: 576px) {
  #cookies-consent {
      max-width: 90%; /* Ajusta el ancho máximo para pantallas pequeñas */
      left: 5%;
      transform: none; /* Elimina la transformación para centrar en móviles */
  }

  #cookies-consent .row {
      flex-direction: column; /* Cambia a columna en pantallas pequeñas */
      text-align: center; /* Centra el texto */
  }

  #cookies-consent .col-12 {
      margin-bottom: 10px; /* Añade espacio entre los elementos */
  }
}

.custom-padding-section {
  margin-top: 6rem !important; /* Esto añadirá un espacio de 6rem arriba de la sección */
}


.accordion-header {
  border-top: none !important; /* Eliminar la línea encima */
}

.accordion-button::after {
  background-image: none !important;
}