:root{
    /*colors*/
    --bg-color:#3c4844;
    --dark-green:#2e3634;
    --text-color-white:#f1f1ef;
    --text-color-yellow:#f5f5d2;
    --main-color:#587149;
    --red-color:#be333f;
    --brown-color:#6a4e4c;


    /*fonts*/
    --big-font: 5rem;
    --p-font: 1rem;
} 
 
 
 
 /*//////////////==== MEDIA 1850px====//////////////*/
@media (max-width: 1850px){
header{
    padding: 12px 8%;
    transition: .2s;
  
}

section{
    padding: 0 8%;
    transition: .2s;
}

.info-about{
    margin-top: 5px;
}

.share{
    right: 40%;
    transition: .2s;
}
}

/*//////////////==== MEDIA 1370px====//////////////*/
@media (max-width: 1370px){
    header{
        padding: 12px 2%;
        transition: .2s;
        
    }
    
    section{
        padding: 0 4%;
        transition: .2s;
    }
    
    .info-about{
        margin-top: 24px;
    }

    .share{
        left:4%;
        transition: .2s;
    }

    :root{
        --big-font: 5.5rem;
        --p-font: 0.9rem;
        transition: .2s;
    }
    }

  /*==== MEDIA 1078px====*/
  @media (min-width:950px) and (max-width: 1078px){
    header{
        padding: 3px 1%;
        transition: .2s;
        
    }
   
}


/*//////////////==== MEDIA 1020px====//////////////*/
    @media (max-width: 1020px){
.navbar a{
    margin: 0 15px;

}
:root{
    --big-font: 5rem;
    --p-font: 0.9rem;
    transition: .2s;
}

.info-about{
    margin-top: -5px;
}
    }


/*//////////////==== MEDIA 950px====//////////////*/
    @media (max-width: 950px){
.share{  
}
.homeImg{
    max-width: 300px;
   width: 100%;
   height: auto; 
   margin-top: 57px;
}
section{
padding: 70px 4%;
}
.info-about{
    margin-top: -70px;
}
header{
    padding: 1px 2%;
    background-color: #333a30;
}

.home{
    height: auto;
    display: flex;
    flex-wrap: wrap;
}
.home-text{
    order: 2;
    margin-top: -70px;
}

.home-img{
    margin:auto;
    height: auto;
    width: auto;
}

.home-text h1{
        margin: 7px 0; 
}
    

.share{
    top: 43rem;
    right:  10%;
}
}

/*//////////////==== MEDIA 850px====//////////////*/
                @media (max-width: 850px){
 .navbar{
    position: absolute;
    width: 100%;
    height: 100vh;
    padding: 40px 50px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100%;
    display: flex;
    flex-direction: column;
    background-color: #333a30;
    transition: all 0.4s ease-in-out;
 }       
 
 .navbar a{
    display: block;
    color: var(--text-color-yellow);
    padding: 0px;
    margin:  0px 0px 40px 0px;
    font-size: 2rem;
    font-weight: 400;
 }

 .navbar.open{
    left: 0;
 }



.homeImg {
    margin-top: 30px;
}

.navbar a{
    font-size:1rem;
    }

    .homeImg{
        animation: imgg 2s ease-in-out infinite;
        animation-delay: 2s;
    }
    
    @keyframes imgg{
        0%{
            transform: translateY(0);
        }
        50%{
            transform: translateY(-12px);
        }
        100%{
            transform: translateY(0px);
        }
    }
}

 /*//////////////==== MEDIA 745px//////////////====*/
@media (max-width: 745px){  
    .share{
        top: 50rem;
        right: 6%;
        
    } 
    .share p{
        font-size: 12px;
    }

    .homeImg {
        object-fit: contain;
        max-width: 300px;
        height: auto;
        margin: 50px 0px;
    }

}          


   /*//////////////==== MEDIA 572px====//////////////*/
  @media (max-width: 572px){
    :root{
        --big-font: 3rem;
        --p-font: 13px;
        transition: .2s;
   }
   .share p{
    font-size: 11px;
}

.share{
      bottom: -1.5rem;
}
.social i {
    font-size: 15px;
}

.btn{
    padding: 9px 26px;
    font-size: smaller;
}

.menu-btn{
    padding: 9px 0.5px;
    font-size: smaller;
}

  }

 /*//////////////==== MEDIA 409px====//////////////*/

 @media (max-width: 409px){
    .share{
       display: none;
  }
 }