/*Navigation*/
nav{
    width: 100%;
    max-width: 1200px;
    padding: 0.1rem;
    display: flex;
    align-items: center;
    margin: auto;
    justify-content: space-between; 
    background-color: #F8F8F8; 
}
#main_menu{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 38px;
    align-items: center;
    font-size: 14px;
    padding: 10px;
    -webkit-gap:38px;
    margin: 10px;
    
}

/*Logo*/
#logo{
    padding: 10px;
    margin: 10px;
}


#logo svg path{
    fill:#FD1C1C;
    transition: 0.5s;
}
#logo svg:hover path{
    fill:#D01C1C;
    transition: 0.5s;
}

/*Links*/
.nav_link{
    text-decoration: none;
    color: #151515;
    font-weight: bold;
    font-size: 14px;
}
.nav_link:hover{
    text-decoration: none;
    color: #D01C1C;
    font-weight:700;
    transition: 0.5s;
}

#link-active{
    color: #FD1C1C;
    text-decoration: line-through;
}

#connect_link{
    background-color: transparent;
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: 33px;
    border: 6px solid #D01C1C;
    align-items: center;
    color: #151515;
    font-size: 14px;
}
#connect_link:hover{
    background-color: #FD1C1C;
    border: 6px solid #D01C1C;
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: 33px;
    align-items: center;
    color: #F8F8F8;
    
}


/*footer*/
footer{
    background-color: #151515;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 70px;
    margin: auto;
}
.white{
    color: #F8F8F8;
}

/*Logo*/
.footer-logo{
    margin:auto;
    justify-content: center;
    align-items: baseline;
    text-align: center
}


.logo svg path{
    fill:#FD1C1C;
    transition: 0.5s;
}
.logo svg:hover path{
    fill:#D01C1C;
    transition: 0.5s;
}

.footer-section{
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: 1200px;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    padding-bottom: 70px;
    justify-content: center;
}

.footer-card{
    display: grid;
    grid-template-rows: auto;
     width: auto;
    margin: 10px;
    padding: 24px;
    gap: 20px;
}
.service-card:hover{
    display: grid;
    grid-template-rows: auto;
    background-color: #FEE1DB;
    width: auto;
    margin: 10px;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;
    border: 4px solid #D01C1C;
    transition: 0.5s ease-in;
}

.social-media{
    padding: 50px;
    padding: 50px;
    margin: auto;
    align-items: center;
    justify-content: center;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 20px;
}

#social-media{
    display: grid;
    grid-template-rows: auto;
    row-gap: 10px;
    position: fixed;
    margin-left: 20px;
    margin-top: 90px;
    align-items: centers;
}




.social-link svg path{
    fill:#FD1C1C;
    transition: 0.5s;
}
.social-link svg:hover path{
    fill:#D01C1C;
    transition: 0.5s;
}










/*Desktop*/
@media screen and (max-width:5000px) {

    #hamburger,.closebtn,.open,.logo-header{
        display: none;
    }

    .social-media{
        display: none;
    }
    
   
}
@media screen and (max-width:1250px) {

    #social-media{
        display: none;
    }
    
    .social-media{
        margin: auto;
        align-items: center;
        justify-content: center;
        display: grid;
        grid-template-columns: auto auto auto auto auto auto;
        gap: 20px;
    }
   
}

@media screen and (max-width:1031px) {
    /*footer*/
footer{
    background-color: #151515;
    margin-top: 70px;
    margin: auto;
 
}
.white{
    color: #F8F8F8;
}

.footer-section{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: auto;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
}

.footer-card{
    display: grid;
    grid-template-rows: auto;
     width: auto;
    margin: 10px;
    padding: 24px;
    gap: 20px;
}
.service-card:hover{
    display: grid;
    grid-template-rows: auto;
    background-color: #FEE1DB;
    width: auto;
    margin: 10px;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;
    border: 4px solid #D01C1C;
    transition: 0.5s ease-in;
}






}

/*Phone Layout*/
@media only screen and (max-width: 600px) and (min-width: 100px)  {

    nav{
        margin: auto;
    }

    .nav_link,#logo{
        display: none;
    }

    #hammy svg path{
        fill:#FD1C1C;
        transition: 0.5s;
    }
    #hammy svg:hover path{
        fill:#D01C1C;
        transition: 0.5s;
    }


    #hamburger,.closebtn,.open,.logo-header{
        display: block;
        margin: 10px;
        font-size:20px;
        cursor:pointer;
        text-align: left;
    }

    .overlay {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 30;
        background-color: rgba(245, 245, 245, 0.98);
        overflow: hidden;
        transition: 0.5s;

      }
      
      .hamburger-menu-links {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
      }
      
      .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #151515;
        display: block;
        transition: 0.3s;
      }
      
      .overlay a:hover, .overlay a:hover {
        color: #D01C1C;
      }
      
      .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
      }

      .overlay a {
        font-size: 18px
    }
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }


 

   




/*footer*/
footer{
    background-color: #151515;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 90px;
    margin: auto;
 
}
.white{
    color: #F8F8F8;
}

.footer-section{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    column-gap: 30px;
    row-gap: 30px;
    width: auto;
    margin: auto;
    margin-top: 10px;
    padding: 10px;
    justify-content: center;
}

.footer-card{
    display: grid;
    grid-template-rows: auto;
     width: auto;
    margin: 10px;
    padding: 24px;
    gap: 20px;
}
.service-card:hover{
    display: grid;
    grid-template-rows: auto;
    background-color: #FEE1DB;
    width: auto;
    margin: 10px;
    padding: 24px;
    border-radius: 20px;
    gap: 20px;
    border: 4px solid #D01C1C;
    transition: 0.5s ease-in;
}

.social-media{
    display: grid;
    grid-template-columns: auto auto auto;
    margin: auto;
    align-items: center;
    justify-content: center;
    gap: 20px;
}


}

@media only screen and (max-width: 300px){
    .footer-section{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        column-gap: 30px;
        row-gap: 30px;
        width: auto;
        margin: auto;
        margin-top: 10px;
        padding: 10px;
        justify-content: center;
    }
}