/*
Theme Name: Solgas
Theme URI: Seoconsultingperu.com
Author: Seo Consulting 
Author URI: 
Description: Plantilla Básica Seo Consulting

*/

*{padding: 0; margin: 0;}
body{--color1: #10184f; --color2: #ff4200; --color3: #807c77; --font1: "Poppins", sans-serif;}
.container{width: 1200px; margin: 0 auto;}
.row{display: flex; justify-content: space-between;} .direction{flex-direction: row-reverse;}
.padded{padding: 100px 0px;}
.grid_5{display: grid; grid-template-columns: repeat(5, 3fr); grid-column-gap: 0px;}
.grid_4{display: grid; grid-template-columns: repeat(4, 3fr); grid-column-gap: 15px; grid-row-gap: 15px;}
.grid_3{display: grid; grid-template-columns: repeat(3, 3fr); grid-column-gap: 20px; grid-row-gap: 20px;}
.grid_2{display: grid; grid-template-columns: repeat(2, 3fr); grid-column-gap: 20px; grid-row-gap: 20px;}
.row-center{display: flex; align-items: center; justify-content: space-between;}
#icoNav_movil{box-sizing: border-box; margin-left: 20px; display: none;}
.movil{display: none;}
a{text-decoration: none;}a,p,span,li,div{font-family: var(--font2);}
.fixed{position: fixed; width: 100%; padding: 3px 3% 20px;}

.cabecera{background: #f4f4f4;}
.cabecera .menu ul{text-align: center; display: flex; justify-content: space-between;}
.cabecera .menu li{display: inline-block;}
.cabecera .menu li a{font: 18px var(--font1); color: var(--color1); line-height: 57px;}



.nosotros{background: #f7f7f7; padding: 70px 0px; border-radius: 40px;}.thumb-nos{width: 590px;}.thumb-nos div{overflow: hidden; border-radius: 32px; display: inline-block;}
.thumb-nos div img{display: block;}.tmb1{margin-left: 40px;}
.tmb1{margin-left: 99px;}.tmb2{transform: translateY(-122px);}.tmb3{transform: translate(-68px, 25px);}.txt-nos img{width: 12px;}
.txt-nos{width: 650px;}
.txt-nos h4{font-size: 35px; font-weight: 700; margin-bottom: 20px; border-radius: 20px; display: inline-block; background: var(--color2); color: #fff; padding: 10px 30px;}
.txt-nos p, .txt-nos li{font-size: 18px; color: #666; line-height: 38px;}
.txt-nos ul{padding-bottom: 15px;}.txt-nos ul li{padding: 5px 0px; margin-left: 10px; list-style: none;}.txt-nos p{padding-bottom: 15px;}

.entry{background: var(--color1); padding: 20px 0px;}
.entry a img{height: 70px;}

.fixed-btn{position: fixed; left: 10px; bottom: 10px;width: 400px; max-width: 50%; z-index: 1000;}
.fixed-btn img{ width: 100%;}

.slider{background: url(img/slider.jpg); background-size: cover; background-attachment: fixed; padding: 90px 0px 150px;}
.slider h4{background: var(--color1); color: #fff; font: 300 31px var(--font1); font-style: italic; padding: 0px 25px; border-radius: 10px; display: inline-block;}
.slider h2{font: 600 84px var(--font1); color: #fff; line-height: 87px; padding: 16px 0px;}
.slider h5{background: var(--color2); color: #fff; font: 300 27px var(--font1); padding: 4px 25px; border-radius: 20px; display: inline-block;}

.ubic{width: 530px; align-items: center; margin-top: 40px;}
.ubic p{color: #fff; font:300 25px var(--font1);}
.nube{margin-top: -80px;}

.productos{margin-top: -70px; padding-bottom: 90px;}
.thumb-gas{width: 50%; height: 295px; overflow: hidden;}
.thumb-gas img{width: 100%; height: 100%; object-fit: cover; object-position: center;}

.txt-gas{width: 45%;}
.txt-gas h2{color: var(--color2); font: 700 30px var(--font1); padding-bottom: 15px;}
.txt-gas p{color: var(--color1); font: 400 14px var(--font1); padding-bottom: 20px;}
.txt-gas .btn{background: #01760f; border-radius: 20px; text-align: center; display: inline-block; padding: 3px 15px;}
h3.title{color: var(--color1); font-size: 48px; margin-bottom: 25px; font-family: var(--font1);}
h3.title::after{content: ""; display: block; width: 80px; height: 5px; background: var(--color2);}

.video{background: url(img/gas1.jpg); background-size: cover; background-position: center; padding: 60px 0px; position: relative;}
.video::after{content: ""; background: #00041ee0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 552;}

.productos center .btn{background: #01760f; border-radius: 20px; display: inline-block;}
.productos center .btn img{width: 50%;}

.video .not .btn{background: #01760f; border-radius: 20px; display: inline-block; position: relative; z-index: 222; width: 300px; max-width: 100%;}
.video .not{position: relative; z-index: 555;}

.video-wrap{position: relative; z-index: 555; border-radius: 40px; max-width: 800px; margin: 0 auto;}
.video-wrap{aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.08)}
    .indicators{display:flex;flex-direction:column;gap:12px}
    .indicator{display:flex;gap:12px;align-items:center;background:#f8fff9;padding:12px;border-radius:12px}
    .indicator .icon{width:56px;height:56px;border-radius:10px;background:#ff4c00;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}

  /* Section styles */
section{padding:88px 0;}
.section-title{display:flex;align-items:center;gap:12px;margin-bottom:18px; justify-content: center;}
.section-title h2{margin:0;color:var(--brand); font-size: 40px;}
.section-title span{font-size: 20px;}
/* About us */
    .about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .about-card{background: var(--color1);padding:25px;border-radius:12px;box-shadow:0 8px 20px rgba(10,10,10,0.03); text-align: center;}
    .about-card p, .about-card li{color: #fff; font: 16px var(--font1); line-height: 25px;}
    .about-card h4{margin:0 0 8px; color: var(--color2); font: 700 30px var(--font1);}



     .footer {

  padding: 70px 20px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #333;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.footer-logo img {
  width: 240px;
}

.footer-logo .telefono {
  margin-top: 10px;
  font-weight: bold;
  font-size: 26px;
}

.footer-products ul {
  list-style: none;
  padding: 0;
}

.footer-products ul li {
  margin-bottom: 5px;
}

.footer h4 {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 600;
}
.footer li a{color: #fff; font-size: 18px; line-height: 29px;}


.footer-seo p {
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .footer-logo img {
    margin: 0 auto;
  }
}

.footer{background: linear-gradient(131deg,rgba(18, 0, 122, 1) 23%, rgba(255, 94, 0, 1) 81%); color: #fff;}

    @media(max-width:900px){ .about-grid{grid-template-columns:1fr} }

.single-banner{background: url(img/slider.jpg); padding: 50px 0px; color: #fff; text-align: center;}
h3.title::after{margin: 0 auto;}
.single-banner h3.title{color: #fff;}
h3.title::after{color: #fff;}





/* ===============================
   RESPONSIVE DESIGN
   =============================== */

/* Base responsive */
* {
  box-sizing: border-box;
}

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

/* Tablets y pantallas medianas */
@media (max-width: 1024px) {

  .container {
    width: 95%;
  }

}

/* Celulares y tablets */
@media (max-width: 768px) {

  .container {
    width: 92%;
  }

  /* Header */
  .entry a img {
    width: 90%; height: auto;
  }

  /* Slider */
  .slider {
    padding: 60px 0 80px;
    background-attachment: scroll;
  }

  .slider .row-center {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .slider h2 {
    font-size: 42px;
    line-height: 46px;
  }

  .slider h4 {
    font-size: 20px;
  }

  .slider h5 {
    font-size: 18px;
  }

  .ubic {
    width: 100%;
    justify-content: center;
  }

  .ubic p {
    font-size: 16px;
  }

  .thumb-solgas img {
    max-width: 280px;
    margin: 0 auto;
  }

  /* Productos */
  .productos .row-center {
    flex-direction: column;
    gap: 25px;
  }
  .productos{margin-top: 0px;}
  .footer-coverage{padding: 30px 0px;}

  .thumb-gas,
  .txt-gas {
    width: 100%;
    height: auto;
    text-align: center;
  }

  .thumb-gas {
    max-height: 260px;
  }

  .txt-gas h2 {
    font-size: 22px;
  }

  /* Títulos */
  h3.title {
    font-size: 32px;
  }

  section {
    padding: 50px 0;
  }

  /* Video */
  .video-wrap {
    border-radius: 18px;
  }
  .nosotros .row{display: block; font: 15px var(--font1);}
  .thumb-nos, .txt-nos{width: 100%;}.thumb-nos div{margin-left: 0px;}

}

/* Smartphones pequeños */
@media (max-width: 480px) {

  .slider h2 {
    font-size: 34px;
    line-height: 38px;
  }

  .slider h4,
  .slider h5 {
    font-size: 16px;
  }

  .ubic p {
    font-size: 14px;
  }

  .entry {
    padding: 15px 0;
  }

}