@import url('https:*/fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700;1,900&display=swap');

/*hamburger secion*/
.xIcon{
    color: white;
}

#john_perez_logo{
    width: 80px;
}

.menu{
    color: #FAFAFA;
}
.menu:hover{
    color: #FF2727;
    cursor: pointer;
    transition: 0.5s;
}

#my_community_footer{
    background-color: #012039;
    width: 100%;
}

.social_media {
    padding: 50px;
    padding: 50px;
    margin: auto;
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 20px;
    border-top: 2px solid #2d2d2d90;
}


/*Navigation*/
a:-webkit-any-link {
    cursor: pointer;
}

nav{
    max-width: 1200px;
    text-align: center;
    margin: auto;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 20px;
    font-family: 'Source Sans Pro', sans-serif;
}

.logo{
    float: left;
}

.navigation{
float: right;
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
gap: 35px;
padding-top: 20px;
}

#menu{
    align-items: center;
    justify-content: center;
}
.menu{
    align-items: center;
    justify-content: center;
}

a{
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}
.-webkit-a{
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
}

html{
scroll-behavior: smooth;
}

/*Dropdown*/

.dropdown_icon{
    width: 10px;
    
}
.dropdown_icon:hover{
    width: 10px;
    color: red;
    
}



.dropdown{
    color: #171717;
}
.dropdown:hover{
    color: #FF2727;
    cursor: pointer;
    transition: 0.5s;
}
.portfolio_dropdown {
    position: relative;
    display: inline-block;
    
  }
  
  .portfolio_dropdown_menu {
    display: none;
    position: absolute;
    background-color: rgba(236, 236, 236, 0.937);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    text-align: left;

  }
  
  .portfolio_dropdown:hover .portfolio_dropdown_menu {
    display: block;
  }






@media screen and (max-width:1920px){

    .hamburgerMenu,.xMenu{
        display: none;
    }
   
   }
@media screen and (max-width:1020px){
   
   }
   
   @media screen and (max-width:827px){


   
   
   
   }
   
   @media screen and (max-width:603px){


    .menu{
        display: block;
    }

        .navigation {
            float: right;
            display: flex;
            justify-content: center;
            list-style-type: none;
            gap: 35px;
            padding-top: 20px;
        }
    
   


    nav{
        display: grid;
        grid-template-rows: auto auto;
        justify-content: center;
        margin: auto;
    }




    #dropdown{
        color: #171717;
    }
    .portfolio_dropdown {
        position: relative;
        display: inline-block;
      }
      
      .portfolio_dropdown_menu:active{
        display: none;
        position: absolute;
        background-color: #FF2727;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        padding: 12px 16px;
        z-index: 1;
        text-align: left;
      }
      
      .portfolio_dropdown:active .portfolio_dropdown_menu {
        display: block;
      }
    

      
   
   }
   
   @media screen and (max-width:320px){
   
   }