@font-face {
    font-family: 'Raleway';
    src: url('fonts/static/Raleway-Black.ttf') format('truetype');
    font-weight: 900;
    /* Matches the specified font weight (900) */
    font-style: normal;
    /* Specify font style as needed */
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/static/Raleway-Medium.ttf') format('truetype');
    font-weight: 500;
    /* Matches the specified font weight (500 for medium) */
    font-style: normal;
    /* Specify font style as needed */
}

@font-face {
    font-family: 'Raleway_thin';
    src: url('fonts/static/Raleway-Thin.ttf') format('truetype');
    font-style: normal;
    /* Specify font style as needed */
}

@font-face {
    font-family: 'Raleway_regular';
    src: url('fonts/static/Raleway-Regular.ttf') format('truetype');
    font-style: normal;
    /* Specify font style as needed */
}

@font-face {
    font-family: 'Futura';
    src: url('fonts/Futura Extra Black font.ttf') format('truetype');
    font-weight: bold;
}

/* Reset some default margin and padding */
.alldiv {
    font-family: 'raleway', sans-serif;
    background: transparent url(../image/TAGLIATELLEALLABOLOGNESE.png) 0% 0% no-repeat padding-box;
    background-size: 100%;
    margin-top: -4%;


    /* Use the same font name as defined in @font-face */
}

/* Add an overlay to the background */


/* Add an overlay to the image */



a {
    text-decoration: none;
}

body ,html {
    font-family: 'raleway', sans-serif;
    background: #fff !important;
    margin:0;
    top:0;
}

/* Style the navigation bar */
.navbar ul {
    width: 86%;
    height: 180.92px;

    display: flex;
    margin-top: 3.5%;
    margin-left: 7.3%;
    margin-right: 7.3%;
    /* line-height : 75px;*/
    justify-content: space-between;
    align-items: center;

}

.navbar ul li {
    list-style: none;
    display: flex;
    align-items: center;
    position: relative;
    /* Add relative positioning */
}


/* Add a pseudo-element for the water shape border */


/* Style the navigation links */




/* Add responsive styles for smaller screens */
.hamburger {
    display: none;

    /* Initially hide the hamburger icon */
}


.Recipes {
    width: 100%;
  
    text-align: left;
    padding-bottom : 5%;
}

.Recipes .title {

    font: normal normal 900 76px/69px Raleway;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-top: 9%;
    margin-left: 7.3%;
}

.Recipes .title p:nth-child(3) {
    font: normal normal 900 38px/240px Raleway;
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
}
.Recipes .title p:nth-child(4),.Recipes .title p:nth-child(5) {
    text-align: left;
    font: normal normal normal 21px/25px Raleway_thin;
    letter-spacing: 0px;
    color: #FFFFFF;
    
}


hr{
   
    position: absolute;
    
    width: 20%;
  
   
}

.containerRecipes p{
    text-align: left;
font: normal normal 900 55px/46px Raleway;
letter-spacing: 0px;
color: #03538B;
text-transform: uppercase;
margin-left:9%;
}
.instruction {
    width: 100%;
    margin:0;
    background-color: #fff;
}
.instruction .text_container{
   color: #03538B;
   width:33%;
   margin-left:9%;
}
.instruction .text_container p:nth-child(1){
    text-align: left;
font: normal normal 900 38px/240px Raleway;
letter-spacing: 0px;

text-transform: uppercase;
 }
 .instruction .text_container p:nth-child(2){
    text-align: left;
font: normal normal normal 26px/28px Raleway;
letter-spacing: 0px;
color: #03538B;
    margin-top: -10%;

 }
 .instruction img{
 width: 50%;
 float: right;
 margin-top: -38%;
 }

footer a {
    color: #03538B !important;
}

@media (min-width : 1600px) and (max-width : 1875px) {
    .Recipes .title {
        font: normal normal 900 50px/69px Raleway;
       margin-top:0%;
        line-height: 1;
    }
    .Recipes .title p:nth-child(3) {
        font: normal normal 900 38px/136px Raleway;
        
    }
    
}
@media (min-width : 1440px) and (max-width : 1599px) {
    .Recipes .title {
        font: normal normal 900 50px/69px Raleway;
       margin-top:0%;
        line-height: 1;
    }
    .Recipes .title p:nth-child(3) {
        font: normal normal 900 38px/136px Raleway;
        
    }
  

}
@media (min-width : 1220px) and (max-width : 1439px) {
    .Recipes .title {
        font: normal normal 900 44px/69px Raleway;
       margin-top:0%;
        line-height: 1;
    }
    .Recipes .title p:nth-child(3) {
        font: normal normal 900 38px/136px Raleway;
        
    }
   
    .Recipes .title p:nth-child(4) {
       
        font: normal normal normal 20px/23px Raleway_thin;
       
    }
    instruction .text_container {
        
        width: 49%;
       
    }
}

@media (min-width : 980px) and (max-width : 1219px) {
    .alldiv {
        
        background-size: 118%;
    }
    .instruction .text_container {
       
        margin-top: -2%;
    }
    .Recipes .title {
        font: normal normal 900 30px/69px Raleway;
       margin-top:0%;
        line-height: 1;
    }
    .Recipes .title p:nth-child(3) {
        font: normal normal 900 27px/100px Raleway;
    }
 
   
    .Recipes .title p:nth-child(4),.Recipes .title p:nth-child(5) {
        font: normal normal normal 18px/23px Raleway_thin;
    }
    .instruction .text_container {
        
        width: 49%;
       
    }
    .instruction img {
       
        margin-top: -60%;
    }
}
@media (min-width : 768px) and (max-width : 997px) {
   
    .alldiv {
        
        background-size: 140%;
    }
    .instruction .text_container {
       
        margin-top: -2%;
    }
    .Recipes .title {
        font: normal normal 900 30px/69px Raleway;
       margin-top:0%;
        line-height: 1;
    }
    .Recipes .title p:nth-child(3) {
        font: normal normal 900 27px/100px Raleway;
    }
 
    .instruction .text_container p:nth-child(2) {
        
        font: normal normal normal 20px/28px Raleway;
        
    }
    .Recipes .title p:nth-child(4),.Recipes .title p:nth-child(5) {
        font: normal normal normal 18px/23px Raleway_thin;
    }
    .instruction .text_container {
        
        width: 49%;
       
    }
    .instruction img {
       
        margin-top: -60%;
    }
}
@media  (min-width : 980px) and (max-width : 1020px) {
    
}
@media (min-width : 620px) and (max-width : 767px) {
    
    .alldiv {
        
        background-size: 140%;
    }
    .instruction .text_container {
       
        margin-top: -2%;
    }
    .Recipes .title {
        font: normal normal 900 22px/69px Raleway;
        margin-top: 0%;
        line-height: 1;
    }
    .Recipes .title p:nth-child(3) {
        font: normal normal 900 20px/58px Raleway;
    }
 
    .instruction .text_container p:nth-child(2) {
        
        font: normal normal normal 20px/28px Raleway;
        
    }
    .Recipes .title p:nth-child(4),.Recipes .title p:nth-child(5) {
        font: normal normal normal 16px/23px Raleway_thin;
    }
    .instruction .text_container {
        
        width: 49%;
       
    }
    .instruction img {
       
        margin-top: -60%;
    }
    .instruction .text_container p:nth-child(1) {
        
        font: normal normal 900 26px/133px Raleway;
        
    }
    .instruction .text_container p:nth-child(2) {
        font: normal normal normal 16px/28px Raleway;
    }
    .instruction img {
        margin-top: -80%;
    }
    .containerRecipes p {
        
        font: normal normal 900 36px/46px Raleway;
    }

}
@media (min-width : 500px) and (max-width : 619px) {
    
    .alldiv {
        
        background-size: 172%;
    }
    .instruction .text_container {
        width: 90%;
    }
    .Recipes .title {
        font: normal normal 900 22px/69px Raleway;
        margin-top: 0%;
        line-height: 1;
    }
    .Recipes .title p:nth-child(3) {
        font: normal normal 900 20px/58px Raleway;
    }
 
    .instruction .text_container p:nth-child(2) {
        
        font: normal normal normal 20px/28px Raleway;
        
    }
    .Recipes .title p:nth-child(4),.Recipes .title p:nth-child(5) {
        font: normal normal normal 16px/23px Raleway_thin;
    }
 
    .instruction img {
        width: 100%;
        margin-top:0% !important;
    }
    .instruction .text_container p:nth-child(1) {
        
        font: normal normal 900 26px/133px Raleway;
        
    }
    .instruction .text_container p:nth-child(2) {
        font: normal normal normal 16px/28px Raleway;
    }
   
    .containerRecipes p {
        
        font: normal normal 900 36px/46px Raleway;
    }
    
}
@media (min-width : 320px) and (max-width : 499px) {
   
    .alldiv {
        background-size: 185%;
    }
    .instruction .text_container {
        width: 90%;
    }
    .Recipes .title {
        font: normal normal 900 18px/34px Raleway;
        margin-top: 0%;
        line-height: 1;
    }
    .Recipes .title p:nth-child(3) {
        font: normal normal 900 16px/45px Raleway;
    }
    .instruction .text_container p:nth-child(2) {
        
        font: normal normal normal 20px/28px Raleway;
        
    }
    .Recipes .title p:nth-child(4),.Recipes .title p:nth-child(5) {
        font: normal normal normal 13px/18px Raleway_thin;
    }
   
    .instruction img {
        width: 100%;
        margin-top: 0% !important;
    }
    .instruction .text_container p:nth-child(1) {
        font: normal normal 900 18px/91px Raleway;
    }
    .instruction .text_container p:nth-child(2) {
        font: normal normal normal 14px/28px Raleway;
    }
   
    .containerRecipes p {
        
        font: normal normal 900 36px/46px Raleway;
    }
    
}
/* Add responsiveness for tablet and mobile */
@media (max-width: 768px) {
    .navbar ul li a{
        color: #03538B !important;
    }

    
    .navbar ul .hamburger-container {
        display: block;
        text-align: center;
        order: 2;
        /* Move the logo to the top for mobile */
    }

    .navbar ul.show {
        z-index: 999 !important;
        margin-top:4%  !important;
    }

    .logo-container {
        order: 2;
        /* Move the logo to the top for mobile */
    }


    .navbar ul li {
        display: none;
        /* Hide links for mobile */
    }

    .hamburger {
        display: block;
        /* Display the hamburger icon for mobile */
    }

    .toggled-menu {
        display: none;
        /* Initially hide the toggled menu icon */
    }

    /* Show links when the hamburger icon is clicked */
   

    .navbar ul {
        flex-direction: row;

        /* Add any other styles needed for the PC version */
    }

    .navbar ul .hamburger-container {
        display: block;
        text-align: center;
        order: 2;
        /* Move the logo to the top for mobile */
    }

    
    .logo-container {
        order: 2;
        /* Move the logo to the top for mobile */
    }


    .navbar ul li {
        display: none;
        /* Hide links for mobile */
    }

    .hamburger {
        display: block;
        /* Display the hamburger icon for mobile */
        font-size: 24px;
    }

    .toggled-menu {
        display: none;
        /* Initially hide the toggled menu icon */
    }

    /* Show links when the hamburger icon is clicked */

}