html {
    scroll-behavior: smooth;
  }

body{background-color:rgb(252, 252, 252);
    margin: auto;
    }
    @font-face {font-family: 'GROSTICK';
        font-style: normal;
        font-weight: 400;
        src: url(../typo/grostick/GROSTICK.ttf) format('woff2');
      }

    header{width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        position: absolute;
        z-index: 1;}

    nav{width: 100%;
        height: 10vh;
        margin: 0%;
        padding: 0%;
      
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(252, 252, 252);
        box-shadow: 9px 9px 16px rgba(0, 0, 0, 0.6);
        position: fixed;}

        #nav-list{margin-left: 5%;
            margin-right: 15%;
            display: flex;
            padding-right: 15px;
            gap:10px;}

            a{color: rgb(0, 0, 0);
                text-decoration: none;}

            li{list-style: none;
                font-family:"GROSTICK", sans-serif;
                font-weight: 400;
                 font-style: normal;
                margin-right: 15%;
                font-size: 1.3em;}
       
       a:hover{color:rgb(185, 125, 11);}

       h1{width: 100%;
        font-family: 'GROSTICK';
            font-style: normal;
            font-weight: 400;
        margin-left: 15%;
        font-size: 4em;}


        .introduction{width: auto;
            height: 900px;
        
           display: flex;
        justify-content: center;}
        

        #logointro{height: 800px;
            padding-top: 100px;
            padding-bottom: 10px;}

            


img{width: auto;}

        #back1{
            border-color: black;
            border-style: solid;
            margin-top: 0%;
        height: 300px;}

            

        h11{width: 100%;
            font-family: 'GROSTICK';
                font-style: normal;
                font-weight: 400;
            margin-left: 50%;
            font-size: 5em;
            margin-top: 0%;
        padding: 10px;}


            h12{font-family: "Fira Sans Condensed", serif;
                font-weight: 600;
                font-style: normal;
            font-size: 6em;
           
          }

                h13{width: 100%;
                    font-family: 'GROSTICK';
                        font-style: normal;
                        font-weight: 400;
                    margin-left: 50%;
                    font-size: 5em;
                    margin-top: -20%;}    

            #align{display: flex;
                justify-content: center;
                align-items: center;
                height: 65vh;
                margin-top: 0%;
                }
    


#card{width: 1200px;
    height: 400px;
    border-radius: 4px;
    display: flex;
    gap: 5px;
   
    }

    #card p{height: 100%;
        
            display: flex;
             justify-content: center;
             align-items: center;
            flex:1;
            border: 1px solid rgb(166, 87, 168);
            background-size: cover;
             background-position: center;
            transition: all .2s;
            cursor: pointer;}

             #card p:hover {flex:5;
                            }


#card p span{transform: rotate(-90deg);
             letter-spacing: .1em;
            
            color: white;
            text-align: center;
            font-weight: bold;
        transition: all .2s ease-in;}

#card p:hover span{transform: rotate(0);
                   text-shadow: 0px 0px 15px rgb(192, 84, 84), 0px 0px 7px rgb(177, 121, 177), 0px 0px 45px rgb(214, 81, 103);}



                   #A{background-image: url(../images/KASBAH/1.png) ; }
                   #B{background-image: url(../images/KASBAH/6.png) ; }
                   #C{background-image: url(../images/KASBAH/5.png) ; }
                   #D{background-image: url(../images/KASBAH/4.png) ; }
                  

                   #F{background-image: url(../images/Capture\ d’écran\ 2025-02-12\ à\ 17.20.32.png) ; }
                   #G{background-image: url(../images/Capture\ d’écran\ 2025-02-12\ à\ 17.20.48.png) ; }
                   #H{background-image: url(../images/BALI/3.png) ; }
                   #I{background-image: url(../images/BALI/4.png) ; }
                   
                   #J{background-image: url(../images/Oishii/1.png) ; }
                   #K{background-image: url(../images/Oishii/2.png) ; }
                   #L{background-image: url(../images/Oishii/3.png) ; }
                   #M{background-image: url(../images/Oishii/4.png) ; }

                   #N{background-image: url(../images/VAN/1.png) ; }
                   #O{background-image: url(../images/VAN/2.png) ; }
                   #P{background-image: url(../images/VAN/3.png) ; }
                   #Q{background-image: url(../images/VAN/4.png) ; }

                   #R{background-image: url(../images/onepiece/1.png) ; }
                   #S{background-image: url(../images/onepiece/2.png) ; }
                   #T{background-image: url(../images/onepiece/3.png) ; }
                   #U{background-image: url(../images/onepiece/4.png) ; }

                   #V{background-image: url(../images/xbus/1.png) ; }
                   #W{background-image: url(../images/xbus/2.png) ; }
                   #X{background-image: url(../images/xbus/3.png) ; }
                   #Y{background-image: url(../images/xbus/4.png) ; }

                   #A1{background-image: url(../images/BRUSSEL/BRUSSEL2/BRU1.png) ; }
                   #A2{background-image: url(../images/BRUSSEL/BRUSSEL2/BRU2.png) ; }
                   #A3{background-image: url(../images/BRUSSEL/BRUSSEL2/BRU3.png) ; }
                   #A4{background-image: url(../images/BRUSSEL/BRUSSEL2/BRU4.png) ; }

                   #B1{background-image: url(../images/graph/1.png) ; }
                   #B2{background-image: url(../images/graph/2.png) ; }
                   #B3{background-image: url(../images/graph/3.png) ; }
                   #B4{background-image: url(../images/graph/4.png) ; }



                   #secillu{background-color:rgb(252, 252, 252)}
                   #secillu2{background-color:#FBD200}




                   #gallery{
                    padding: 9%;
                    border-color: black;
                    border-style: solid;
                    margin-top: 3%;
                    column-count:3;
                    column-gap: 5px;
                    -moz-column-count: 3;
                    -moz-column-gap: 5px;
                    -webkit-column-count: 3;
                    -webkit-column-gap: 5px;}
            
            #gallery img{width:100%;
                        height: auto;
                        
                        
                        transition: filter 1s;}
            
            #gallery img:hover{filter: none;}
            


            #gallery2{
                padding: 15%;
                background-color: white;
                
                column-count:3;
                column-gap: 5px;
                -moz-column-count: 3;
                -moz-column-gap: 5px;
                -webkit-column-count: 3;
                -webkit-column-gap: 5px;}
        
        #gallery2 img{width:100%;
                    height: auto;
                    ;
                    
                    transition: filter 1s;}
        
        #gallery2 img:hover{filter: none;}



        

    #titreillu1{height: 150px;
    display: flex;
    justify-content: center;
align-items: center;
margin-top: 10%;}




    h30{list-style: none;
        font-family:"GROSTICK", sans-serif;
        font-weight: 400;
         font-style: normal;
        font-size: 3.5em;
   }

   #button{display:flex;
    justify-content: end;
    align-items: center;
    height: 20vh;}

button{background-color:#ffffff;
    padding: 10px 20px;
    border:0;
    letter-spacing: 1.5px;
    font-size:15px;
    box-shadow: rgb(185, 125, 11)
    ;
    color: rgb(0, 0, 0);
    width:200px;
    border-radius: 0px;
    transition: all .3s ease}


button:hover{background-color: rgb(202, 184, 148);
            cursor: pointer;}

            #space1{margin-bottom: 80px;}
            #space2{margin-bottom: 80px;}
            #space3{margin-bottom: 80px;}







            #texte{display: flex;
                border-radius: 4px;
                gap: 4px;
              
            }


            .logiciels{ border-radius: 4px;}


            .contact{width: auto;
                height: 2000px;
               display: flex;
            justify-content: center;
       }

    
















       @media (max-width: 980px)
{

       #align{ height: 1000px;
        width: 980px;}
        
        
        #card{width: 100%;
        height: 1200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
         margin-top: 40%;}

       #button{margin-top: 40%;}


    h30{
        font-size: 2.5em;
   }

   .contact{
    height: 1400px;
   
}

        }