body{
    background-color: white;
    margin: 0%;
    padding: 0%;
    overflow-x: hidden;

    font-family: "Poppins";
}
.dark{
    background-color: black;
    color: turquoise;
}
.light{
    background-color: white;
    color:black;
}
.homee{
    align-items: center;
    display: flex;
    justify-content: space-between;

}
 #btt{
  width: 30%;
  height:90px;
 }
.animated-text{
    font-size: 61px;
    font-weight: 600;
    min-width: 280px;
    text-align: center;
    margin-top: 10%;
}

.animated-text span{
     position: relative;
}

.animated-text span::before{
    content: "Youtuber";
    color: beige;
    animation: words 20s infinite;
}

.animated-text span::after{
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: 100%; 
    right: -8px;
    animation: cursor .8s infinite, typing 20s steps(14) infinite;
    
}

 
@keyframes words {
    0%,30%{
        content: "Talks About  ";
        color:chartreuse ;
    }
    30%,47%{
        content: "C++";
        color: green;
    }
    47%,64%{
        content: "Python";
        color: orange;
    }
    64%,81%{
        content: "React JS";
        color: rgb(109, 109, 202);
    }
    81%,100%{
        content: "Data-Bases";
        color: purple;
    }
    
} 

.nav-item{ 
    padding-right: 6%;
}
.nav-item :hover{ 
    border-radius: 6%;

}
.homee{
        margin-top: 3%;
        display: flex;
    }
.imag {
    margin-left: 8%;
}
.des {
    margin-right: 3%;
}
.display-2:hover{
     color: blue;
}
.nav-item:hover{
    color: blue;
    font-weight: bolder;
    transition: 0.2s ease;
}

@media (max-width: 768px) {
    .homee {
        flex-direction: column; /* Change flex direction to column */
        align-items: center;
        
    }
    .imag {
        margin-left: 25%;
        margin-top: 3%;
        margin-bottom: 3%; 
        align-items: center;
    }

    .des {
        margin-right: 0;
        text-align: center;
    }  
    .nav-item{
        padding: 4%;
    }
    .navi{
        padding:2%;
    }
}
@media (max-width:768px){
     .miii p{
        width: 100%;
     }
}

@media (max-width: 768px) {
     
    .intro {
        width: 100% !important;
        margin-top: 5%;
        padding-left: 10% !important;
    }
    .miii p{
        width: 100%;
    }
    .ab{
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
    .abb h2{
        width:100%;
       text-align: center;
    }
    #pass{ 
        margin-top: 10%;
         text-align: center;
        padding-left:12%;
        
    }
    .miii{
        padding-left: 10%;
    }
    .miii p {
        width: 100%;
        padding-left: 10%;
        text-align: center;
    }
    .pas h4{
       font-size: xxx-small;
        width:300%;
        margin-left: -110%;
    }
   
    .immm{
        margin-top: 9%;
        margin-left: -5%;
    }
    .immm img{
        width: 200%;
    }
    .animated-text{
        margin-top:39%;
    }

}

@media (max-width:768px){
    .nav-item{
        margin-left: 23%;
        padding: 0%;    
    }
   
}
 
    @media (max-width: 768px) {
        .all {
            flex-wrap: wrap;
            justify-content: center;
        }
    
        .cpp,
        .htm,
        .csss,
        .git {
            width: 33%; /* Adjust the width as needed */
            margin: 8%; /* Adjust the margin as needed */
        }

        .cpp,
        .htm,
        .csss,
        .git h3 { 
           margin-right: 5%;
        }
    }   


    @media (max-width: 768px) {
        .alll {
            flex-wrap: wrap;
            justify-content: center;
        }
    
        .sql,
        .jss,
        .reac,
        .pyt {
            width: 33%; /* Adjust the width as needed */
            margin: 8%; /* Adjust the margin as needed */
        }

        .sql,
        .jss,
        .reac,
        .pyt h3 { 
            margin-top: 8%;
           margin-right: 5%;
        }
    } 

.pas{
    width: 100%;
    
}
#mii{
    font-size: small;
    width: 70%;
}
#pass{
    font-size:x-large;
}
.sticky-top {
    position: fixed;
    top: 0;
    z-index: 1000; /* Ensure the navbar appears above other content */
}
.intro {
    width: 45%;
    margin-top: 2%;
    /* margin-left: 12%; */
    padding-left: 12%;
}
  
  .intro h4 {
    font-size: x-large;
  }
  
  .intro h2 {
    font-size: xxx-large;
  }
  
  .ab {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 9%;
    margin-bottom: 9%;
    padding: 12px;
    gap: 3%;
  }
  
  .abb {
    margin-bottom: 9%;
  }
  
  .immm {
    width: 24%;
    align-items: end;
    margin-right: 13%;
    margin-top: 1%;
  }
  
  .immm img {
    border-radius: 14%;
    border: black;
  }

.des button{
    padding: 2%;
    width: 33%;
    font-size: x-large;
}
.des button img{
    padding: 2%;
    margin-left:7%;
}

.ttl{
    text-align: center;
    margin-top: 8%;
    margin-bottom: 4%;
}
.ttl h1{
    font-size: xxx-large;
}
.all{
    display: flex;
    justify-content: center;
    margin-left: 11%;
}
.all h3{
    margin-top:6%;
     margin-left: 11%;
}
.alll{
    margin-top: 6%;
    display: flex;
    justify-content: center;
    margin-left: 11%;
}
.alll h3{
    margin-top:6%;
    margin-left: 11%;
}
.pro{
    margin-top: 10%;
    text-align: center;
}
 .card{
    transition: 0.4s ease;
    margin: 4%;
    overflow: hidden;
 }
 .card img:hover{
    transition: 0.8s ease;
       transform: scale(1.1);
 }

 
 section#contact {
    text-align: center;
  }

  .con {
    margin-top: 5%;
  }

  .for {
    margin-top: 4%;
    display: flex;
    justify-content: center;
  }

  .fo {
    width: 60%; /* Adjust the width as needed */
  }

  .fo input {
    margin: 10px;
    padding: 3%;
    border-radius: 9px;
    width: calc(100% - 24px); /* Adjusted width to consider padding */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
  }
 
  .fo button {
    margin: 10px;
    padding: 12px 20px; /* Adjusted padding for the button */
    border-radius: 9px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .fo button:hover {
    background-color: #0056b3;
  }

  .fim{
    display: flex;
    justify-content: center;

  }
  .fim img{
    padding: 21%;
  }
  #ho :hover{
    transform: scale(1.1);
  }
  .foot{
    margin-top: 4%;
    text-align: center;
    font-size: large;
    text-decoration: underline;
  }
  @media (max-width:768px){
    .foot{
        font-size: small;
    }
    #btt{
        margin-top: 4%;
        width: 70%;
    }
  }
.bac{
    background-color: rgb(89, 89, 155);
    color: beige; 
    overflow: hidden;
}

@media (max-width: 768px) {
    #po {
      text-align: right; /* Align the "Portfolio" title and icon to the right */
      margin-right: 20px;
     /* Add some space between the "Portfolio" title and the right edge of the screen */
    }
  }
  @media (max-width:768px){
    .navi{
        padding: -62%;
    }  
}

@media (max-width: 768px) {
    .navbar-toggler {
        position: absolute;
        top: 10px; /* Adjust this value to your preference */
        left: 10px; /* Adjust this value to your preference */
        z-index: 9999; /* Make sure it's on top */
    }
    
}