.cursor {
            z-index: 999;
            background: #99e4ed7a;
            position: fixed;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            pointer-events: none;
            box-shadow: 0 0 20px pink, 0 0 60px pink, 0 0 100px pink;
            animation: colors 5s infinite;
            transform: translate(-50%, -50%);
            display: none;
        }

        @keyframes colors {
            from { filter: hue-rotate(0deg); }
            to { filter: hue-rotate(360deg); }
        }

        .cursor::before {
            content: '';
            position: absolute;
            background: #ffff0000;
            width: 200px;
            height: 200px;
            opacity: 0.2;
            transform: translate(-30%, -30%);
            border-radius: 50%;
            border: 2px solid #00b7ff49;
        }

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        
         body {
            margin: 0px;
            padding: 0px;
        
            background-image:
    
       url('extra2 (1).png') ;
         width: 100%;
            min-height: 100vh;
                      background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
          position:relative;
        }
        .main{
            width:100%;
        }
        body::before {
    content: "";
    position: fixed;
    inset: 0;

    background: url("extra(1).png")
                center/cover no-repeat;

    opacity: 0.8; /* image transparency */
    z-index: -1;
}
@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes glowing-border{
    from{
        --angle:0deg;
    }
    to{
        --angle:360deg;
    }
}
.ham{
     display:none;
}
 .navbar{
     --angle: 0deg;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap: wrap;
    gap: 12px;
    padding:18px 5%;
    margin: 20px 11%;
    background:rgba(10,25,47,.95);
    border-radius:45px;
    backdrop-filter:blur(10px);
    position:relative;
    z-index:1;
}
.ham{
     display:none;
}
@media(max-width:600px){
    .nav-links a{
        display:none;
    }
    .navbar{
        flex-wrap:nowrap;
    }
    .ham{
        display:flex;
        justify-content:flex-end;
    }
      .btn{
         padding: 8px 15px;
         flex-direction:row;
      }
   
.logo{
    justify-content:flex-start;
    align-items:center;
}
}

.navbar::before{
    content:"";
    position:absolute;
    inset:0;
    padding:3px;
    border-radius:inherit;

    background:conic-gradient(
        from var(--angle),
        #FF6B6B,
        #4CAF7D,
        #FFFBE0,
        #3949AB,
        #DC3DAF,
        #43A047,
        #FFD700,
        #FF6B6B
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
    mask-composite:exclude;

    z-index:-1;
}

.navbar::before{
    animation: glowing-border 2.5s linear infinite;
}



        .logo {
            color: white;
            font-size: clamp(1.2rem, 3vw, 1.8rem);
            font-weight: bold;
        }
     
 
        .nav-links {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            gap: 20px;
            justify-content: center;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-size: 1rem;
            transition: 0.3s;
            white-space: nowrap;
        }

        .nav-links a:hover {
            color: #60a5fa;
        }

        .btn {
            text-decoration: none;
            color: white;
            background: #94A3B8;
            padding: 10px 20px;
            border-radius: 8px;
            transition: 0.3s;
            white-space: nowrap;
            display:flex;
        }

        .btn:hover {
            background: #F4C430;
        }

       
footer{
    background: #08111F;;
    color:#fff;
    font-family:Poppins;
    margin-top:80px;
}

.footer-container{
    width:85%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    padding:55px 0 40px;
    gap:60px;
}

.footer-col{
    flex:1;
}

.footer-col h2{
    font-size:23px;
    font-family:Poppins;
    font-weight:600;
    color:#fff;
}

.line{
    width:180px;
    height:2px;
    background:#ff7b28;
    margin:12px 0 28px;
}

.footer-col p{
    color:#ececec;
    line-height:1.9;
    font-size:17px;
}

.footer-col strong{
    color:#fff;
}

.footer-col ul{
    list-style:none;
}

.footer-col ul li{
    margin-bottom:14px;
    color:#ececec;
    font-size:15px;
}

.footer-col ul li i{
    color:#fff;
   
}

.contact li{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

.contact li i{
    margin-top:6px;
    color:#fff;
}

.social-icons{
    margin-top:35px;
}

.social-icons a{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:35px;
    height:35px;
    background:#655f9259;
    border-radius:50%;
    margin-right:12px;
    text-decoration:none;
    transition:.3s;
}

.social-icons a i{
    color:
    #d7c1b3;
    font-size:22px;
}

.social-icons a:hover{
    background:#ff7b28;
}

.social-icons a:hover i{
    color:#fff;
}

.copyright{
    background:#000;
    color:#fff;
    text-align:center;
    padding:18px;
    font-size:13px;
}
.copyright a{color:#fff; text-decoration:underline;}

@media(max-width:991px){

.footer-container{
    flex-direction:column;
    gap:40px;
}

.footer-col h2{
    font-size:28px;
}

.line{
    width:160px;
}
}  h1{
        color: purple;
    display: flex;
    justify-content: center;
    font-size: 3.5rem;
    font-family: 'Poppins';
}

.grid{
      display: grid;
    width: 75%;
    gap: 10px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 300px;
    margin-top: 5vw;
    margin-left: 12%;
}
.gridd{
    position:relative;
    padding:3px;
      height: 300px;
    border-radius:15px;
    overflow:hidden;
}

.gridd::before{
    content:"";
    position:absolute;
    inset:0%;
    background:conic-gradient(
        red,
        orange,
        yellow,
        lime,
        cyan,
        blue,
        violet,
        red
    );

}

.gridd img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
}