* {
            margin: 0;
               width: 100%;  padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
          }
#cb{
  width: 100%;
}
html{
  scroll-behavior:smooth;
}
nav{
    background:#000;
    height:60px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 15px;
}

.logo{
    color:#fff;
    margin:0;
    font-size:28px;
    font-weight:bold;
}

.menu-btn{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:white;
    font-size:32px;
    cursor:pointer;
    padding:0;
    line-height:1;
}

#sidebar{
    display:none;
    position:absolute;
    top:60px;
    right:0;
    width:220px;
    background:#111;
    list-style:none;
    padding:0;
    margin:0;
    z-index:999;
}

#sidebar.show{
    display:block;
}

#sidebar li{
    border-bottom:1px solid #222;
}

#sidebar li a{
    display:block;
    padding:15px;
    color:white;
    text-decoration:none;
}

#sidebar li a:hover{
    background:#222;
}
#learnBtn {
         background: #111;
            color: #fff;
            padding: 15px 40px;
            display: flex;
         border-radius: 20px;
            justify-content: center;
            align-items: center;}
      body {
            line-height: 1.6;
         background: #f4f4f4;
          }

          .hi{
            color: rgb(255, 0, 153);
          }
          /* NAVBAR */
          nav {
            background: #111;
            color: #fff;
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          nav ul {
            list-style: none;
            display: flex;
          }

          nav ul li {
            margin-left: 20px;
            cursor: pointer;
          }

          nav ul li:hover {
            color: #00adb5;
          }

          /* HERO */
          #hero {
            background-image: url("home.jpg");
            background-size: cover;
          background-position:center;
            background-repeat:no-repeat;
            margin: 0;;
           height: 100vh;
           
            color:rgb(255, 21, 0);
            text-align: center;
          
           /*  padding: 100px 200px; */
          }

          #hero h1 {
            font-size: 3rem;
          }

          #hero p {
            margin: 15px 0;
          }

          .btn {
            padding: 10px 20px;
            background: gold;
            color: #111;
            border: none;
            border-radius: 20px;
          
            cursor: pointer;
            margin-top: 10px;
          }
.kk{
width: 100%;
border-color: black;}
.kkk{

  width: 100%;
  border-radius: 10px;
}
#zz{
  text-align: right;
  width: 50%;
  color:blue;
}
.i{
  
  color:red;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
          .btn:hover {
            background: #00adb5;
            color: white;
          }

          /* SECTIONS */
          section {
            padding: 60px 40px;
          }

          .section-title {
            text-align: center;
          align-content: center;
            margin-bottom: 30px;
          }

          /* CARDS */
          .cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
          }

          .card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
          }

          .card h3 {
            margin-bottom: 10px;
          }

          /* ABOUT */
          #about { 
            padding:10px;
            background: white;
          }

          /* LEARNING HUB */
          #learning {
            background: #eef7f8;
          }

          /* PROJECTS */
          #projects {
            background: #fff;
          }

          /* CONTACT */
          #contact {
            background: #222;
            color: white;
            text-align: center;
          }

          #contact a {
            color: #00adb5;
            text-decoration: none;
          }

          /* FOOTER */
          footer {
            text-align: center;
            padding: 15px;
            background: #111;
            color: white;
          }

          /* RESPONSIVE */
          @media (max-width: 768px) {
            .hero h1 {
              font-size: 2rem;
            }
          }