@import url('https://fonts.googleapis.com/css2?family=Jost&family=Source+Sans+Pro&display=swap');

//colors
$primary-green: #285C4D;
$accent-green: #78BE20;
$accent-brown: #444444;
$accent-mint: #F1F8E8;
$white: white;
$black: black;


//fonts
$body-font: 'Source Sans Pro', sans-serif;
$title-font: 'Jost', sans-serif;

h1,
h2,
h3,
h4 {
    font-family: $title-font;
    /* text-transform: capitalize; */
    font-weight: 700;
}

h5 {
    font-family: $title-font;
    font-weight: 400;
    font-size: x-large;
    color: $primary-green;
    font-style: italic;
}

button {
    font-family: $title-font;
    color: $accent-brown;
    background: $accent-green;
    border-style: none;
    transition: all .3s ease-in-out;
}

button:hover{
    background-color: $accent-brown;
    color: $accent-green;
}

html{
    background-image: url('../img/endless-constellation2.svg');
    background-attachment: fixed;
    background-repeat:repeat;
}

body {
    /* max-width: 1248px;
    padding: 0px 10px 0px 10px; */
    margin: 0 auto;
    font-family: $body-font;
}

header {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 40px);
    font-family: $title-font;
}

.hcontact{
    grid-column: 1 / 7;
    grid-row: 1 / 2;
    background: $primary-green;
    color: $white;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    align-content: center;
}

.fa-brands {
    color: $accent-green;
    text-decoration: none;
    transition: all .3s ease-in-out;
    padding: 0px 5px;
    font-size: 1.5em;
}

.fa-brands:hover {
    opacity: 0.3;
}

.navbar {
    grid-column: 1 / 7;
    grid-row: 2 / 4;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    background: $white;
}

nav img {
    object-fit:fill;
    height: auto;
    width: 80px;
    grid-column: 1 / 2;
    justify-self: center; 
}

nav ul {
    grid-column: 2 / 7;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-items: center;
    column-gap: 10px;
}

nav ul li:after{
    display: block;
    content: '';
    border-bottom: solid 1px $accent-green;
    padding-bottom: 1%;
    transform: scaleX(0);
    transition: transform 300ms ease-in-out;
}

nav ul li:hover:after {
    transform: scaleX(1);
}

nav ul li a {
    text-decoration: none;
    color: $black;
}

ul .active {
    font-weight: 900;
    color: $primary-green;
    border-bottom: solid 1px $accent-green;
}

.hero {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    column-gap: 10px;
    max-height: 600px;
    color: $white;
    transition: all .3s ease-in-out;
}

.hleft {
    background-image: url(../img/HeroBonosdeCarbono.jpg);
    animation: fade-in-left 0.5s ease-in-out;
}

.hcenter {
    background-image: url(../img/HeroMadera.jpg);
    animation: fade-in-center 0.5s ease-in-out;
}

.hright {
    background-image: url(../img/HeroEmbalaje.jpg);
    animation: fade-in-right 0.5s ease-in-out;
}

@keyframes fade-in-center {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
@keyframes fade-in-right {
    0% {
      opacity: 0;
      transform: translateX(100%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
}

@keyframes fade-in-left {
    0% {
      opacity: 0;
      transform: translateX(-100%);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
}

.herocard {
    height: 470px;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.htext {
    grid-row: 3 /3;
    margin: 0;
    padding: 0px 20px 20px 20px;
    background: rgba($color: $black, $alpha: 0.3);
    h2 {
        font-weight: 400;
    }
    p {
        font-family: $title-font;
    }
    button{
        padding: 10px 20px;
        font-weight: 700;
        font-size: 1em;
    }
}

.htext button:hover {
    background: $accent-brown;
    color: $accent-green;
    box-shadow: rgba(255, 255, 255, 0.25) 0px 14px 28px, rgba(255, 255, 255, 0.22) 0px 10px 10px;
}

.hero:has(.hleft:hover) {
    grid-template-columns: 3fr 1fr 1fr;
}

.hero:has(.hcenter:hover) {
    grid-template-columns: 1fr 3fr 1fr;
}

.hero:has(.hright:hover) {
    grid-template-columns: 1fr 1fr 3fr;
}

.slogan {
    height: auto;
    text-align: center;
    font-family: $title-font;
    font-size: xx-large;
    font-style: italic;
    margin: auto;
    border-style: solid;
    margin: 35px;
    animation: fade-in-right 2s ease-in-out;
    color: $black;
    em{
        color: $accent-green;
        text-decoration: underline;
        text-decoration-color: $accent-green;
        letter-spacing: 4px;
        animation: text-shadow 1.5s ease-in-out infinite;
    }
}

@keyframes text-shadow {
    0% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #3c5141, 
            0 0 0 #2cfcfd, 
            0 0 0 #2a3932, 
            0 0 0 #ffffff;
    }

    20% {  
        transform: translateY(-10px);
        text-shadow: 
            0 0.125px 0 #3c5141, 
            0 0.25px 0 #2cfcfd, 
            0 -0.125px 0 #2a3932, 
            0 -0.25px 0 #ffffff;
    }

    40% {  
        transform: translateY(5px);
        text-shadow: 
            0 -0.0625em 0 #3c5141, 
            0 -0.125em 0 #2cfcfd, 
            0 0.0625em 0 #2a3932, 
            0 0.125em 0 #ffffff;
    }
    
   60% {
        transform: translateY(-0.25px);
        text-shadow: 
            0 0.03125em 0 #3c5141, 
            0 0.0625em 0 #2cfcfd, 
            0 -0.03125em 0 #2a3932, 
            0 -0.0625em 0 #ffffff;
    }

    80% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #3c5141, 
            0 0 0 #2cfcfd, 
            0 0 0 #2a3932, 
            0 0 0 #ffffff;
    }
}

.product_title{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: fade-in-left 2s ease-in-out;
}

.titles{
    color: $white;
    text-align: center;
    background-color: rgba($color: $black, $alpha: 0.3);
    font-size: x-large;
}

.titles1 {
    padding:  100px 100px;
}

.product_title p {
    font-family: $body-font;
    font-weight: 400;
}

.ptitle1 {
    background-image: url(../img/drone-vista-bosque.jpg);
}

.product_content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
    text-align: center;
    justify-content: space-evenly;
    padding: 30px;
}

.cont_card {
    display: grid;
    grid-template-rows: 3fr 1fr 1fr;
    max-height: 400px;
}

.cont_card img{
    border-radius: 100%;
    width: 9rem;
    height: auto;
    justify-self: center;
}

.img_circle {
    grid-row: 1 / 2;
}

.cont_card h3 {
    color: $primary-green;
    /* text-transform: capitalize; */
}

.content_text p {
    color: $black;
    font-family: $body-font;
    font-weight: 400;
}

.cont_card button {
    padding: 5px 10px;
    grid-row: 3 / 4;
    font-weight: 800;
}

.cont_card button:hover{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.product_single{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    background-color: rgba($color: $primary-green, $alpha: 0.4);
}

.product_single img {
    grid-column: 1 / 2;
    object-fit:contain;
    height: auto;
    width: 70%;
}

.product_single .psingle_text {
    grid-column: 2 / 4;
    padding: 90px 100px;
    color: $white;
    font-size: x-large;
    font-weight: 400;
}

.ptitle2 {
    background-image: url(../img/Bonos_de_Carbono_Fondo.jpg);
    background-position: 50% 20%;
}

.titles2 {
    padding:  100px 100px;
}

.footer_content{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-items: center;
    text-align: center;
    background-color: $accent-mint;
    padding-top: 20px;
}

footer img {
    width: 80%;
    height: auto;
    max-width: 110px;
}

footer .social img {
    width: 100%;
    height: auto;
}

.footer_content .links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    text-align: start;
} 

.footer_content .links ul {
    grid-column: 1 / 3;
}

/* footer .links img {
    width: 70%;
} */

footer .links ul{
    list-style:circle $white;
    text-align: left;
    /* text-transform: capitalize; */
}

footer .links ul li{
    margin: 10px;
}

footer .links ul li a{
    color: $primary-green;
    text-decoration: none;
    font-family: $title-font;
    transition: all .3s ease-in-out;
}

footer .links ul li a:hover{
    color: $accent-green;
}

footer .video,
footer .location {
    width: auto;
    height: auto;
    padding: 0px 40px;
}

footer .video p,
footer .location p {
    color: $primary-green;
    text-align: center;
    padding-left: 30px;
    font-size: 0.9rem;
}

.copyright {
    background: $primary-green;
    text-align: center;
    font-family: $title-font;
    padding: 1px;
    color: $accent-mint;
}

.section {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
  
.section.active {
    opacity: 1;
    animation: fade-in-left 3s ease-in-out;
}

.timeline {
    display: grid; 
    grid-template-columns: 1.4fr 0.2fr 1.4fr; 
    grid-template-rows: repeat(7,1fr); 
    grid-template-areas: 
    "image01 time text01"
    "text02 time image02"
    "image03 time text03"
    "text04 time image04"
    "image05 time text05"
    "text06 time image06"
    "image07 time text07";
    padding: 30px;
  }
  
.time { grid-area: time; }

.image01 { 
    grid-area: image01;
    background-image: url(../img/PensilvaniaOld.jpg); 
}

.image02 { 
    grid-area: image02; 
    background-image: url(../img/aserrio-antiguo.jpg);
}

.image03 { 
    grid-area: image03;
    background-image: url(../img/plantulas.jpg);
}

.image04 { 
    grid-area: image04;
    background-image: url(../img/Aserrío.jpg);
}

.image05 { 
    grid-area: image05; 
    background-image: url(../img/fsc_custodia.jpg);
}

.image06 { 
    grid-area: image06;
    background-image: url(../img/HeroBonosdeCarbono.jpg);
}

.image07 { 
    grid-area: image07;
    background-image: url(../img/fsc_forestal.jpg);
}

.text01 { grid-area: text01; }
.text02 { grid-area: text02; }
.text03 { grid-area: text03; }
.text04 { grid-area: text04; }
.text05 { grid-area: text05; }
.text06 { grid-area: text06; }
.text07 { grid-area: text07; }

.image01,
.image02,
.image03,
.image04,
.image05,
.image06,
.image07 {
    background-position: center;
    background-size: cover;
}

.image01,
.image03,
.image05,
.image07 {
    margin-left: 80px;
}

.image02,
.image04,
.image06 {
    margin-right: 80px;
}

.text01,
.text03,
.text05,
.text07 {
    padding: 0px 70px 0px 10px;
}

.text02,
.text04,
.text06 {
    padding: 0px 10px 0px 70px;
    text-align: right;
}

.pagetitle {
    background-color: $primary-green;
    color: $accent-mint;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 30px;
    align-items: center;
}

.pagetitle h1 {
    font-size: 4rem;
    padding-left: 50px;
    grid-column: 1 / 2;
}

.pagetitle p {
    grid-column: 2 / -1;
    padding-right: 50px;
}

.circlebtns {
    justify-self: center;
    align-items: center;
    text-align: center;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
}

.titlecontent{
    grid-column: 2 / -1;
}

.titlebtn img {
    width: 4rem;
    height: auto;
    justify-self: center;
    background-color: $accent-mint;
    border-radius: 100%;
    padding: 10px;
    border-style: solid;
    border-color: $accent-green;
    border-width: 10px;
}

.titlebtn2 img {
    width: 4rem;
    height: auto;
    justify-self: center;
    background-color: $white;
    border-radius: 100%;
    padding: 10px;
    border-style: solid;
    border-color: $accent-green;
    border-width: 10px;
}

.banner1col {
    text-align: center;
    padding: 70px 300px;
}

.banner2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    padding: 70px;
}

.banner3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    padding: 0px 50px;
    grid-gap: 30px;
}

.banner6col {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    padding: 20px 50px;
    grid-gap: 20px;
}

.banner7col {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    padding: 20px 50px;
    grid-gap: 10px;
    text-align: center;
}

.banner2col h2{
    text-align: center;
}

.maderaarquitectonica {
    background-image: url(../img/casa-madera-techo.jpg);
}

.maderarolliza {
    background-image: url(../img/madera_rolliza.jpg);
    padding: 20px;
}

.rollizatext,
.bonostext,
.silviculturatext,
.aserradotext,
.cepilladotext {
    background: rgba($color: $black, $alpha: 0.4);
}

.bonos {
    background-image: url(../img/bonos-de-carbono.jpg);
    padding: 20px;
}

.maderaarquitectonica,
.maderarolliza,
.bonos,
.silvicultura,
.aprforestal,
.aserrado,
.cepillado {
    color: $white;
    background-position: center;
    background-size: cover;
}

li {
    margin-bottom: 8px;
}

.title-estibas {
    font-size: 3rem;
    text-align: center;
    background-color: $primary-green;
    color: $accent-mint;
    letter-spacing: 0.15em;
    padding: 0px 20px;
}

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

.venta-estibas h3,
.alquiler-estibas h3 {
    text-align: center;
}

.txthistory h3,
.txthistory h4 {
    color: $primary-green;
    text-transform:uppercase;
}

.mision {
    background-image: url(../img/Tángara-verdiplata.jpg);
    background-position: 25% 17%;
}

.vision {
    background-image: url(../img/buho_andino.jpg);
    background-position: 50% 17%;
    text-align: right;
}

.mision,
.vision,
.fsc {
    color: $white;
    align-items: end;
    background-size: cover;
}

.visiontext {
    padding-left: 100px;
    padding-right: 60px;
}

.misiontext {
    padding-right: 100px;
    padding-left: 10px;
    background: rgba($color: $black, $alpha: 0.3);
}

.pie-imagen {
    font-size: 0.7rem;
}

.valores-icons {
    grid-column: 1 / 5;
    display: contents;
    text-align: center;
}

.valores-text {
    grid-column: 5 / 7;
}

.fsc {
    background-image: url(../img/fsc-fondo.jpg);
    height: 200px;
    justify-items: center;
    align-items: center;
}

.fsc-btns{
    display: flex;
    flex-direction: column;
}

.fsc-logo {
    width: 50px;
    height: auto;
    color: $white;
}

.docs-btn{
    margin: 20px;
    padding: 10px 20px;
    width: 200px;
    align-items: center;
    border-radius: 5%;
    background-color: $white;
    opacity: 70%;
}

.filter-logo {
    filter: invert(100%);
}

.silvicultura {
    background-image: url(../img/plantulas.jpg);
    padding: 30px 0px;
}

.proceso-siembra {
    grid-template-columns: repeat(4,1fr);
    display: grid;
}

.icon-siembra img {
    width: 100px;
}

.aprforestal {
    background-image: url(../img/campo.jpg);
    padding: 30px;
    text-align: center;
}

.icon-apr img {
    width: 60px;
    justify-self: center;
    background-color: $white;
    border-radius: 100%;
    padding: 5px;
    border-style: solid;
    border-color: $primary-green;
}

.banner2 {
    padding: 30px;
    text-align: center;
}

.banner2 img {
    grid-column: 1 / 2;
    justify-self: right;
}

.banner2 p {
    grid-column: 2 / 4;
}

.aserrado {
    background-image: url(../img/aserrado.jpg);
    padding: 40px 0px;
}

.cepillado {
    background-image: url(../img/imagen-edificio-madera-bosque.jpg);
    padding: 30px 0px;
}

.aserrado p,
.cepillado p {
    grid-column: 1 / 3;
    padding: 30px 80px;
}

.aserrado h3,
.cepillado h3 {
    grid-column: 3 / 4;
}

.secado {
    padding: 50px;
}

.secado h3{
    grid-column: 1 / 2;
    justify-self: center;
}

.secado p{
    grid-column: 2 / 4;
    padding-right: 100px;
}

.icon-siembra{
    padding: 10px;
}

.icon-siembra p {
    background-color: $primary-green;
    padding: 20px;
    color: $white;
}

.siembra h2 {
    background-color: $accent-green;
    color: $white;
    padding: 30px 0px 10px 0px;
    margin-top: -50px;
}

.mtoforestal-txt {
    grid-column: 1 / 3;
    background-color: rgba(0, 0, 0, 0.7);
    color: $white;
    padding: 0px 40px;
}

.contacto-dist .formulario {
    background-color: $accent-mint;
}

.formulario {
    padding: 20px;
    display: flex;
}

.contacto-dist .datos-ubicacion{
    background-color: $primary-green;
    color:$accent-mint;
}

.datos-ubicacion {
    padding: 30px;
}

.dir2col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px;
}

.dir2col img {
    justify-self: center;
    align-self: center;
    width: 1.7rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 20px;
    border-radius: 100%;
    filter: invert(94%) sepia(16%) saturate(121%) hue-rotate(44deg) brightness(100%) contrast(98%);
}

.dir2col p{
    grid-column: 2 / 4;
    padding-right: 40px;
}

line {stroke:rgb(40, 92, 77); stroke-width: 2}

.time {
    justify-self: center;
    height: 100%;
}

.aprforestal h3 {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
}

.icon-apr p {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
}

.contacto-dist {
    font-family: $title-font;
}


form {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
    justify-content: left;
}

input,
textarea {
    border-radius: 5px;
    border-style: none;
    
}

input {
    height: 2rem;
    font-family: $title-font;
}

#name {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

#email {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#subject {
    grid-column: 1 / 3;
}

#message {
    grid-column: 1 / 3;
    height: 6rem;
}

#name,
#email,
#subject,
#message {
    width: 100%;
    padding: 5px;
}

.btn-submit{
    grid-column: 1 / 2;
    width: 50%;
    background-color: $accent-green;
}

.btn-submit:hover {
    background-color: $primary-green;
    color: $white;
}

.certificacion-fsc{
    justify-items: center;
    align-items: center;
    column-gap: 1.5rem;
}

.cert-custodia,
.cert-forestal{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: center;
}

.docs-btnmain{
    font-size:medium;
    border-radius: 5px;
    padding: 2rem;
}

.docs-btnmain:hover{
        background-color: $accent-green;
        color: $accent-brown;
}

.docs-btnlnk{
    margin: 20px;
    padding: 10px 20px;
    width: 200px;
    align-items: center;
    border-radius: 5px;
    background-color: $white;
    opacity: 70%;
    border-style: solid;
}

.title-career h1{
    font-size: 3rem;
}

.form-career{
    padding: 2rem;
    background-color: $accent-mint;
}