@font-face{
    font-family: 'Inter-bold';
    src: url('assets/fonts/static/Inter-Bold.ttf');
}
@font-face {
    font-family: 'Inter-extraBold';
    src: url('assets/fonts/static/Inter-Bold.ttf');

}
@font-face {
    font-family: 'Inter-regular';
    src: url('assets/fonts/static/Inter-Bold.ttf');
}
@font-face {
    font-family: 'Inter-light';
    src: url('assets/fonts/static/Inter-Light.ttf');
}

*,*::before,*::after{
    box-sizing: border-box;
}

body{
    background-color: hsl(36, 100%, 99%);
    overflow-x: hidden;
}

p, h1, h2, h3{
    margin : 0;
    padding : 0;
}
h1{
    font-family: 'Inter-extraBold';
    font-size: 3rem;
}
h2{
    font-family: 'Inter-regular';
    font-size : 2.3rem;
}
h3{
    font-family: 'Inter-bold';
    font-size: 1rem;
    letter-spacing: 0.03rem;

    
    
}
p{
    font-family: 'Inter-light';
    line-height: 1.6rem;
    font-size : 1rem;
}



.container{
    
    display : grid;
    
}
.nav{
    display : flex;
    gap :1rem;
    justify-content: space-between;

}

.nav ul{
    display : flex;
    
    font-family: 'Inter-light';
}
.nav a{
    text-decoration: none;
    color : inherit;
    transition-property: color;
    transition-duration: 200ms;
    transition-timing-function: ease-in;
}
.nav a:hover{
    text-decoration: none;
    color : hsl(5, 85%, 63%);
}

.bigtitle{
    padding : 0;
    line-height:3.2rem;
}
.paragbutton{
    display : grid;

}

.paragbutton p{
    color :hsl(236, 13%, 42%)
}
.paragbutton button{
    width: fit-content;
    background-color: hsl(5, 85%, 63%);
    color: white;
    font-size: 1rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    transition-duration: 250ms, 250ms;
    transition-property: background, color;
    transition-timing-function: ease-in-out;
    border :  none;
}

.paragbutton button:hover{
    background-color: white;
    color :hsl(5, 85%, 63%);
    font-weight: 500;
    cursor:pointer;
    
}

.news{
    background-color: hsl(240, 100%, 5%);
    display: grid;
    padding : 0 1.5rem;
}
.news h2{
    color :hsl(35, 77%, 62%);
    font-size : 2rem;
}
.new{
    color : white;
    display : grid;
    gap : 1rem;
    padding : 2rem 0;
    align-items: center;
}
.new p{
    color :hsl(36, 100%, 99%)

}
.new:nth-child(2){
    border-top : white solid 0.5px ;
    border-bottom : white solid 0.5px ;

   
}

.cards{
    display: grid;
   

}

[class^="card-n"]
{
    display: grid;
    grid-template-columns: 30% 1fr;
    gap:1.5rem;
    transition-duration: 200ms;
    width:100%;
    
}


[class^="card-n"]:hover{
    width: 90%;

} 

.card-image{
    align-self: center;
    max-width : 100%
}
.card-content{
    display: grid;
    gap : max(1rem, 1vh);
    grid-template-columns: 1fr;
    align-content: center;
}

.card-content h2{
    color :hsl(237, 7%, 47%)
}
.card-content p{
    color :hsl(237, 7%, 47%)
}


@media(min-width : 370px){
    .container{
        grid-template-columns: 100%;
        padding : 2% 6%;
        gap : 2.5rem;

    }
    
    .image-web-3{   
       width: 100%;
        height : fit-content
    }

    .toggle-mobile-nav{
        position : absolute;
        display: block;
        z-index: 9999;
        background : url('assets/images/icon-menu.svg');
        background-repeat: no-repeat;
        padding-block: auto;
        width: 2rem;
        top : 3.3rem;
        right : max(2rem, 7%);
        border : 0;
        aspect-ratio: 1;
    }

    .toggle-mobile-nav:hover,.toggle-mobile-nav:focus{
        cursor: pointer;

    }
    .toggle-mobile-nav[aria-expanded='true']{
        background : url('assets/images/icon-menu-close.svg');
        background-repeat: no-repeat;
        width :  2rem;
        aspect-ratio: 1;

    }
    .nav ul{
        position: fixed;
        gap : 2rem;
        padding : 7rem 3rem;
        flex-direction: column;
        inset: 0 0 0 30%;
        color:black;
        font-weight: 600;
        background: hsl(36 100% 99% / 0.8);
        backdrop-filter: blur(.4rem);
        transform: translateX(100%);
        transition: transform 300ms ease-out;
    } 

    .nav ul[data-visible="true"]{
        transform: translateX(0%);
    }
    .nav li{
        justify-content: flex-end;
        list-style: none;
    }

    .logo{
        background-image: url('./assets/images/logo.svg');
        background-repeat: no-repeat;
        background-position: center center;
        padding-block: 2rem;
        padding-inline : 2rem;
        width:fit-content;
        
    }
    
    .paragbutton{
        grid-template-columns: 1fr;
        gap: 1rem;
        
    }

    .paragbutton button{
        padding : 1rem 2rem;
       
    }
    .news{ 
        
        grid-template-rows: 40% 30% 30%;
      
    }
    .cards{
       
        gap : 2rem;
        margin-inline:3%;

    
    }
}

@media(min-width : 1200px){
    .container{
        grid-template-columns: 1fr 1fr 1fr;
        padding : 2% 10%;
        gap : 2rem;

    }
      .bigtitle{
        grid-row: 3;
        grid-column: 1;
    }
    picture {
        grid-column: span 2;
        
    }

    .image-web-3{   
       width: 100%;
        height : fit-content
    }

    .nav{
        grid-column: span 3;
    }
    .toggle-mobile-nav{
        display: none;
    }
    .nav ul{
        position: inherit;
        gap : 4rem;
        padding : 0;
        flex-direction: row;
        align-items: center;
        color:  hsl(236, 13%, 42%);
        
        font-weight: 100;
        transform: translateX(0%);
       
        background: transparent;
        backdrop-filter: none;
    }
    .nav li{
        justify-content: flex-end;

        list-style: none;
    }

    .logo{
        background-image: url('./assets/images/logo.svg');
        background-repeat: no-repeat;
        background-position: center center;

        padding : 3%;
        width: fit-content;
        
    }
  
    .paragbutton{
        grid-row : 3;
        grid-column : 2;
    }

    .paragbutton button{
        padding : 0 3rem;
    }
    .news{ 
        grid-column: 3;
        grid-row : span 2;
        grid-template-rows: 40% 30% 30%;
      
    }
    .cards{
        grid-column: span 3;
        grid-template-columns: 1fr 1fr 1fr;
        gap : 2rem;
        margin-inline:0;
    
    }
}