* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* border: 10px solid #29BF34; */
    font-family: "Monaco", monospace;
    background-image: url('../Pictures/back1.png');
    line-height: 1.6;
    padding: 20px;
    text-align: center;
}

header {
   /* border: 2px dashed #a59595; */
    text-align: center;
    margin-bottom: 40px;
}

header img {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 30%;
}
.nav {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin: 20px 0;
}

h1 a {
    color: #e21e1e; 
    text-decoration: none;
    font-size: 1.2em;
}

h1 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #29BF34;
}

.cta-button {
    background-color: #333;
    color: #29BF34;
    border: 1px solid #e21e1e;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
}

.cta-button:hover {
    background-color: #e21e1e; 
}

.language {    
    color: #29BF34;
    border: 1px solid #e21e1e;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    padding: 10px;
}

.language:hover {
    background-color: #0f0a0a; 
}

footer {
    color: #29BF34;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    }

.icon {
    margin-right: 10px;
}

.icon i {
    font-size: 30px;
}

.gif {
    width: 100%;
    height: 100%;
    margin-top: 0px;
}
  
.content-slider img {
    width: 100%;
}
  
.slider {
    width: 100%;
    margin: 50px auto;
}

.slider h1 {
    text-align: center;
    color: #e21e1e;
}
  
.slick-slide {
    transition: transfrom 2s ease;
}
  
.slick-center {
    transform: scale(1.2);
    z-index: 2;
}
  
.slick-slide:not(.slick-center) {
    transform: scale(0.7);
    opacity: 0.4;
}

.cyber {
    display: flex;
    justify-content: center; 
    align-items: center;   
     
}

.cyber img {
    align-items: center;
    width: 50%;
    height: 30%;

}

@keyframes zoom {
    0% {
        transform: scale(0.5);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.5);
        opacity: 0.5;
    }
}

.zoom-effect {
    display: inline-block;
    animation: zoom 10s infinite;
    animation-timing-function: ease-in-out;
    transform-origin: center;
}

h2 {
    border-top: 2px dashed #29BF34;
}

 p {
          color: #29BF34;
          font-size: 1.5em;
          text-shadow: 0 0 10px #29BF34;
          line-height: 1.6;
          margin: 20px;
          text-align: center;

        }
        .zone h1 {
            font-size: 3em;
            letter-spacing: 5px;
            text-transform: uppercase;
            animation: glitch 1.5s infinite; 
            
        }

         .cmd h1 {
            font-size: 3em;
            letter-spacing: 5px;
            text-transform: uppercase;
            animation: glitch3 1.5s infinite;
         }

        .para p {
            font-size: 1.5em;
            margin: 20px;
            line-height: 1.6;
            text-align: center;
            text-shadow: 0 0 10px #29BF34;
            animation: glitch2 2s infinite;
        }

        .para a {
            color: #e21e1e; 
            text-decoration: none;
            font-size: 1.2em;
        }

        .para a:hover {
            text-shadow: 0 0 5px #e21e1e, 0 0 10px #e21e1e; 
        }

      
        @keyframes glitch {
            0% {
                text-shadow: 2px 2px 0 #e21e1e, -2px -2px 0 #29BF34;
            }
            20% {
                text-shadow: -2px -2px 0 #e21e1e, 2px 2px 0 #29BF34;
            }
            40% {
                text-shadow: 2px -2px 0 #e21e1e, -2px 2px 0 #29BF34;
            }
            60% {
                text-shadow: -2px 2px 0 #e21e1e, 2px -2px 0 #29BF34;
            }
            80% {
                text-shadow: 0px 0px 10px #e21e1e, 0px 0px 10px #29BF34;
            }
            100% {
                text-shadow: 2px 2px 0 #e21e1e, -2px -2px 0 #29BF34;
            }
        }

        @keyframes glitch2 {
            0% {
                transform: translate(0);
            }
            20% {
                transform: translate(-3px, -3px);
            }
            40% {
                transform: translate(3px, 3px);
            }
            60% {
                transform: translate(-2px, 2px);
            }
            80% {
                transform: translate(2px, -2px);
            }
            100% {
                transform: translate(0);
            }
        }

        @keyframes glitch3 {
            0% {
                text-shadow: 2px 2px 0 #a59595, -2px -2px 0 #29BF34, -2px -2px 0 #e21e1e;
            }
            20% {
                text-shadow: 2px 2px 0 #29BF34, -2px -2px 0 #e21e1e, -2px 50px 0 #a59595;
            }
            40% {
                text-shadow: 2px 50px 0 #a59595, -2px 2px 0 #29BF34, -2px -2px 0 #e21e1e;
            }
            60% {
                text-shadow: 2px -2px 0 #29BF34, -2px -2px 0 #e21e1e, -2px 2px 0 #a59595;
            }
            80% {
                text-shadow: 0px 0px 10px #a59595, 2px -2px 0 #e21e1e, 0px 0px 50px #29BF34;
            }
            100% {
                text-shadow: 2px 2px 0 #a59595, -2px -2px 0 #29BF34, -2px -2px 0 #e21e1e;
            }
        }
.flex-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; 
        justify-content: center; 
}
.flex-container div {
       flex: 1 1 calc(33.333% - 10px); 
       max-width: 33.333%;
       text-align: center; 
}
.flex-container img {
       width: 100%;
       height: auto;
       display: block;
       /*border: 1px dashed  #b5b6bb;  /*Add border to each image */
       border-radius: 10px; 
       padding: 5px; 
}
.flex-container p {
       color: #e21e1e; 
       font-weight: bold; 
       margin: 5px 0 0 0;
       font-size: medium;
}
 .nav-toggle {
            display: none;
            font-size: 1.5em;
            background: none;
            border: none;
            color: #e21e1e;
            cursor: pointer;
            align-items: center;
        }

        @media (max-width: 768px) {
            .nav {
                display: none;
                flex-direction: column;
                align-items: center;
            }

            .nav-toggle {
                display: block;
            }

            .nav.open {
                display: flex;
            }
        }