body {
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
  }

  header.container {
  max-width: 100%; /* Width less than 100% */
  margin: 0 auto; /* Center the header */
  padding: 0 15px; /* Optional padding */
}

@keyframes animateTopToBottom {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

header.animate-top-to-bottom {
  animation: animateTopToBottom 1.5s ease-in-out;
   /* Smooth and slow animation */
  -webkit-animation: animateTopToBottom 1.5s ease-in-out;
}


  .logo span{
    font-size: 30px;
  }
  .hero-section {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 3rem 2rem;
  }
  .hero-text {
    max-width: 600px;
  }
  .hero-text h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c2c6c;
  }
  .hero-text h1 span,
  #info span {
    color: #0078ff;
    font-weight:700;
  }
  .hero-text a{
  }
  .btn-primary, .btn-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
  }
  .btn-secondary {
    background-color: #0078ff;
    color: #fff;
    border: none;
  }
  .profile-img {
    max-width: 300px;
    border-radius: 50%;
  }

  /* about page !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

/* Animation keyframes for sliding down */
@keyframes slideTopToBottom {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  

  /* Apply the animation */
  .animate-top-to-bottom {
    animation: slideTopToBottom 1s ease-out;
    opacity: 1;
  }
  
  /* Optional: Styling the header */
  header.container {
    background-color: #f8f9fa; /* Light background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  }
  


  /* Animation keyframes */
@keyframes slideLeftToRight {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Apply animation to the element */
  .animate-left-to-right {
    animation: slideLeftToRight 1s ease-out;
    opacity: 1;
  }
  
#col{
    padding-right: 5px;
}

  #info span{
    font-size: 30px;
  }
  #info{
    padding: 50px;
  }

  #info p:hover,
  #experience p:hover{
    color: #383887;
  }

  #experience .hov{
    padding: 30px;
    background-color:#afafeab3 ;
    border-radius:20px ;
    -webkit-border-radius:20px ;
    -moz-border-radius:20px ;
    -ms-border-radius:20px ;
    -o-border-radius:20px ;
}

 /* Animation styles */
 .animate-left {
  animation: slideInLeft 1s ease ease-in-out;
  -webkit-animation: slideInLeft 1s ease ease-in-out;
}

.animate-right {
  animation: slideInRight 1s ease-in-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(50%);
    opacity: 0;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
}
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Hover effect styles */
.hov p {
  transition: transform 0.3s, color 0.3s;
}

.hov p:hover {
  transform: scale(1.05);
  color: #007bff; /* Change to desired hover color */
}


  #info:hover,
  #experience p:hover{
    border-radius: 20px;
    background-color: #7f7ff950;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#img{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* Animation keyframes */
@keyframes slideRightToLeft {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  /* Apply animation to the image container */
  .animate-right-to-left {
    animation: slideRightToLeft 1s ease-out;
    opacity: 1;
  }
  
  
  #education{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #0078ff;
    padding: 20px;
    border-radius: 10px; /* Rounded edges */
    text-align: center;

  }
#education i{
    padding-bottom: 20px;
    font-size: 30px;
    color: #fff;
    font-weight: 700;
}

#education p{
    font-size: 20px;
    color: aliceblue;
}

#education .p:hover{
    color:#fff;
    border-bottom:2px solid #383887;
    font-weight: 700;
}

#education .edu{
    font-size: 10px;
}


/* Animation keyframes for spinning */
@keyframes rotateAnimation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* Apply the round animation */
  .animate-rotate {
    animation: rotateAnimation 1s linear;
    display: inline-block;
    /*Ensuretheelementstaysinlineforanimation*/:;
    -webkit-animation: rotateAnimation 1s linear;
}
  
  /* Optional: Styling the section */
  
  .hov {
    margin-top: 10px;
  }
  
  .p, .edu {
    font-weight: bold;
  }
  
  .skills-section h2 {
    color:  #007bff;
  }

  #card-body{
    background-color: #2c2c6c;
    border-radius: 0px 0px 10px 10px;
    -webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    -ms-border-radius: 0px 0px 10px 10px;
    -o-border-radius: 0px 0px 10px 10px;
}
  
#html {
  padding: 10px 58.5px;
  color: #fff !important;
}

#css {
  padding: 10px 64px;
  color: #fff !important;
}

#js {
  padding: 10px 41px;
  color: #fff !important;
}

#notjs {
  padding: 10px 53px;
  color: #fff !important;
}

#git {
  padding: 10px 55px;
  color: #fff !important;
}

@media (max-width:2800px) {

  #html {
    padding: 10px 73.5px;
    color: #fff !important;
}

#css {
      padding: 10px 79px;
      color: #fff !important;
  }

#js {
padding: 10px 56px;
color: #fff !important;
}

#notjs {
padding: 10px 68px;
color: #fff !important;
}

#git {
padding: 10px 70px;
color: #fff !important;
}

}


@media (max-width:1500px) {

  #html {
    padding: 10px 73.5px;
    color: #fff !important;
}

#css {
      padding: 10px 79px;
      color: #fff !important;
  }

#js {
padding: 10px 56px;
color: #fff !important;
}

#notjs {
padding: 10px 67px;
color: #fff !important;
}

#git {
padding: 10px 70px;
color: #fff !important;
}

}

@media (max-width:1390px) {

  #html {
    padding: 10px 58.5px;
    color: #fff !important;
}

#css {
      padding: 10px 64px;
      color: #fff !important;
  }

#js {
padding: 10px 41px;
color: #fff !important;
}

#notjs {
padding: 10px 53px;
color: #fff !important;
}

#git {
padding: 10px 55px;
color: #fff !important;
}

}

@media (max-width:1200px) {

  #html {
    padding: 10px 43.5px;
    color: #fff !important;
}

#css {
      padding: 10px 49px;
      color: #fff !important;
  }

#js {
padding: 10px 27px;
color: #fff !important;
}

#notjs {
padding: 10px 38px;
color: #fff !important;
}

#git {
padding: 10px 40px;
color: #fff !important;
}

}

@media (max-width:1000px) {

  #html {
    padding: 10px 83.5px;
    color: #fff !important;
}

#css {
      padding: 10px 90px;
      color: #fff !important;
  }

#js {
padding: 10px 66px;
color: #fff !important;
}

#notjs {
padding: 10px 78px;
color: #fff !important;
}

#git {
padding: 10px 80px;
color: #fff !important;
}

}

@media (max-width:995px) {

  #html {
    padding: 10px 43.5px;
    color: #fff !important;
}

#css {
      padding: 10px 50px;
      color: #fff !important;
  }

#js {
padding: 10px 27px;
color: #fff !important;
}

#notjs {
padding: 10px 38px;
color: #fff !important;
}

#git {
padding: 10px 40px;
color: #fff !important;
}

}


@media (max-width:985px) {

  #html {
    padding: 10px 83.5px;
    color: #fff !important;
}

#css {
      padding: 10px 90px;
      color: #fff !important;
  }

#js {
padding: 10px 67px;
color: #fff !important;
}

#notjs {
padding: 10px 78px;
color: #fff !important;
}

#git {
padding: 10px 80px;
color: #fff !important;
}

}


@media (max-width:780px) {

  #html {
    padding: 10px 84px;
    color: #fff !important;
}

#css {
      padding: 10px 89px;
      color: #fff !important;
  }

#js {
padding: 10px 66px;
color: #fff !important;
}

#notjs {
padding: 10px 78px;
color: #fff !important;
}

#git {
padding: 10px 80px;
color: #fff !important;
}

}
@media (max-width:770px) {

  #html {
    padding: 10px 84px;
    color: #fff !important;
}

#css {
      padding: 10px 89px;
      color: #fff !important;
  }

#js {
padding: 10px 66px;
color: #fff !important;
}

#notjs {
padding: 10px 78px;
color: #fff !important;
}

#git {
padding: 10px 80px;
color: #fff !important;
}

}

@media (max-width:770px) {

  #html {
    padding: 10px 84px;
    color: #fff !important;
}

#css {
      padding: 10px 89px;
      color: #fff !important;
  }

#js {
padding: 10px 66px;
color: #fff !important;
}

#notjs {
padding: 10px 78px;
color: #fff !important;
}

#git {
padding: 10px 80px;
color: #fff !important;
}

}


@media (max-width:765px) {

  #html {
    padding: 10px 98.5px;
    color: #fff !important;
}

#css {
      padding: 10px 105px;
      color: #fff !important;
  }

#js {
padding: 10px 81px;
color: #fff !important;
}

#notjs {
padding: 10px 93px;
color: #fff !important;
}

#git {
padding: 10px 95px;
color: #fff !important;
}

}

/* @media (max-width:775px) {

  #html {
    padding: 10px 250.5px;
    color: #fff !important;
}

#css {
      padding: 10px 256px;
      color: #fff !important;
  }

#js {
padding: 10px 233px;
color: #fff !important;
}

#notjs {
padding: 10px 245px;
color: #fff !important;
}

#git {
padding: 10px 248px;
color: #fff !important;
}

} */


@media (max-width:570px) {

  #html {
    padding: 10px 249px;
    color: #fff !important;
}

#css {
      padding: 10px 254px;
      color: #fff !important;
  }

#js {
padding: 10px 231px;
color: #fff !important;
}

#notjs {
padding: 10px 243px;
color: #fff !important;
}

#git {
padding: 10px 245px;
color: #fff !important;
}

}

@media (max-width:560px) {

  #html {
    padding: 10px 239px;
    color: #fff !important;
}

#css {
      padding: 10px 245px;
      color: #fff !important;
  }

#js {
padding: 10px 222px;
color: #fff !important;
}

#notjs {
padding: 10px 234px;
color: #fff !important;
}

#git {
padding: 10px 236px;
color: #fff !important;
}

}

@media (max-width:550px) {

  #html {
    padding: 10px 240px;
    color: #fff !important;
}

#css {
      padding: 10px 244px;
      color: #fff !important;
  }

#js {
padding: 10px 221px;
color: #fff !important;
}

#notjs {
padding: 10px 233px;
color: #fff !important;
}

#git {
padding: 10px 235px;
color: #fff !important;
}

}


@media (max-width:540px) {

  #html {
    padding: 10px 233px;
    color: #fff !important;
}

#css {
      padding: 10px 239px;
      color: #fff !important;
  }

#js {
padding: 10px 217px;
color: #fff !important;
}

#notjs {
padding: 10px 227px;
color: #fff !important;
}

#git {
padding: 10px 230px;
color: #fff !important;
}

}

@media (max-width:525px) {

  #html {
    padding: 10px 226px;
    color: #fff !important;
}

#css {
      padding: 10px 232px;
      color: #fff !important;
  }

#js {
padding: 10px 208px;
color: #fff !important;
}

#notjs {
padding: 10px 220px;
color: #fff !important;
}

#git {
padding: 10px 222px;
color: #fff !important;
}

}

@media (max-width:520px) {

  #html {
    padding: 10px 223px;
    color: #fff !important;
}

#css {
      padding: 10px 229px;
      color: #fff !important;
  }

#js {
padding: 10px 207px;
color: #fff !important;
}

#notjs {
padding: 10px 217px;
color: #fff !important;
}

#git {
padding: 10px 220px;
color: #fff !important;
}

}
@media (max-width:510px) {

  #html {
    padding: 10px 216px;
    color: #fff !important;
}

#css {
      padding: 10px 222px;
      color: #fff !important;
  }

#js {
padding: 10px 200px;
color: #fff !important;
}

#notjs {
padding: 10px 210px;
color: #fff !important;
}

#git {
padding: 10px 213px;
color: #fff !important;
}

}

@media (max-width:500px) {

    #html {
      padding: 10px 212.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 219px;
        color: #fff !important;
    }

#js {
  padding: 10px 196px;
  color: #fff !important;
}

#notjs {
  padding: 10px 208px;
  color: #fff !important;
}

#git {
  padding: 10px 210px;
  color: #fff !important;
}

}
@media (max-width:490px) {

    #html {
      padding: 10px 204.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 210px;
        color: #fff !important;
    }

#js {
  padding: 10px 188px;
  color: #fff !important;
}

#notjs {
  padding: 10px 199px;
  color: #fff !important;
}

#git {
  padding: 10px 201px;
  color: #fff !important;
}

}

@media (max-width:480px) {

    #html {
      padding: 10px 203.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 209px;
        color: #fff !important;
    }

#js {
  padding: 10px 186px;
  color: #fff !important;
}

#notjs {
  padding: 10px 198px;
  color: #fff !important;
}

#git {
  padding: 10px 200px;
  color: #fff !important;
}

}

@media (max-width:470px) {

    #html {
      padding: 10px 197.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 203px;
        color: #fff !important;
    }

#js {
  padding: 10px 180px;
  color: #fff !important;
}

#notjs {
  padding: 10px 192px;
  color: #fff !important;
}

#git {
  padding: 10px 194px;
  color: #fff !important;
}

}

@media (max-width:460px) {

    #html {
      padding: 10px 193.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 199px;
        color: #fff !important;
    }

#js {
  padding: 10px 176px;
  color: #fff !important;
}

#notjs {
  padding: 10px 188px;
  color: #fff !important;
}

#git {
  padding: 10px 190px;
  color: #fff !important;
}

}

@media (max-width:450px) {

    #html {
      padding: 10px 188.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 194px;
        color: #fff !important;
    }

#js {
  padding: 10px 171px;
  color: #fff !important;
}

#notjs {
  padding: 10px 183px;
  color: #fff !important;
}

#git {
  padding: 10px 185px;
  color: #fff !important;
}
}


@media (max-width:435px) {

    #html {
      padding: 10px 179.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 185px;
        color: #fff !important;
    }

#js {
  padding: 10px 162px;
  color: #fff !important;
}

#notjs {
  padding: 10px 174px;
  color: #fff !important;
}

#git {
  padding: 10px 176px;
  color: #fff !important;
}
}

@media (max-width:430px) {

    #html {
      padding: 10px 178.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 184px;
        color: #fff !important;
    }

#js {
  padding: 10px 161px;
  color: #fff !important;
}

#notjs {
  padding: 10px 173px;
  color: #fff !important;
}

#git {
  padding: 10px 175px;
  color: #fff !important;
}

}

@media (max-width:426px) {

    #html {
      padding: 10px 176.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 182px;
        color: #fff !important;
    }

#js {
  padding: 10px 159px;
  color: #fff !important;
}

#notjs {
  padding: 10px 171px;
  color: #fff !important;
}

#git {
  padding: 10px 173px;
  color: #fff !important;
}

}
@media (max-width:415px) {

    #html {
      padding: 10px 169.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 175px;
        color: #fff !important;
    }

#js {
  padding: 10px 152px;
  color: #fff !important;
}

#notjs {
  padding: 10px 164px;
  color: #fff !important;
}

#git {
  padding: 10px 166px;
  color: #fff !important;
}

}
@media (max-width:410px) {

    #html {
      padding: 10px 168.5px;
      color: #fff !important;
  }

#css {
        padding: 10px 174px;
        color: #fff !important;
    }

#js {
  padding: 10px 151px;
  color: #fff !important;
}

#notjs {
  padding: 10px 163px;
  color: #fff !important;
}

#git {
  padding: 10px 165px;
  color: #fff !important;
}
}

@media (max-width:400px) {
  #html {
    padding: 10px 163px;
    color: #fff !important;
}

#css {
  padding: 10px 169px;
  color: #fff !important;
}

#js {
  padding: 10px 146px;
  color: #fff !important;
}

#notjs {
  padding: 10px 157px;
  color: #fff !important;
}

#git {
  padding: 10px 159px;
  color: #fff !important;
}

}


@media (max-width:395px) {
  #html {
    padding: 10px 161.5px;
    color: #fff !important;
}

#css {
  padding: 10px 167px;
  color: #fff !important;
}

#js {
  padding: 10px 144px;
  color: #fff !important;
}

#notjs {
  padding: 10px 155px;
  color: #fff !important;
}

#git {
  padding: 10px 158px;
  color: #fff !important;
}

}

@media (max-width:390px) {
  #html {
    padding: 10px 156.5px;
    color: #fff !important;
}

#css {
  padding: 10px 163px;
  color: #fff !important;
}

#js {
  padding: 10px 140px;
  color: #fff !important;
}

#notjs {
  padding: 10px 152px;
  color: #fff !important;
}

#git {
  padding: 10px 154px;
  color: #fff !important;
}

}

@media (max-width:380px) {
  #html {
    padding: 10px 151.5px;
    color: #fff !important;
}

#css {
  padding: 10px 158px;
  color: #fff !important;
}

#js {
  padding: 10px 135px;
  color: #fff !important;
}

#notjs {
  padding: 10px 147px;
  color: #fff !important;
}

#git {
  padding: 10px 149px;
  color: #fff !important;
}

}
@media (max-width:365px) {
  #html {
    padding: 10px 145.5px;
    color: #fff !important;
}

#css {
  padding: 10px 152px;
  color: #fff !important;
}

#js {
  padding: 10px 129px;
  color: #fff !important;
}

#notjs {
  padding: 10px 141px;
  color: #fff !important;
}

#git {
  padding: 10px 143px;
  color: #fff !important;
}

}

@media (max-width:360px) {
  #html {
    padding: 10px 144px;
    color: #fff !important;
}

#css {
  padding: 10px 150px;
  color: #fff !important;
}

#js {
  padding: 10px 126px;
  color: #fff !important;
}

#notjs {
  padding: 10px 137px;
  color: #fff !important;
}

#git {
  padding: 10px 140px;
  color: #fff !important;
}

}

@media (max-width:350px) {
  #html {
    padding: 10px 139px;
    color: #fff !important;
}

#css {
  padding: 10px 145px;
  color: #fff !important;
}

#js {
  padding: 10px 122px;
  color: #fff !important;
}

#notjs {
  padding: 10px 133px;
  color: #fff !important;
}

#git {
  padding: 10px 135px;
  color: #fff !important;
}

}

@media (max-width:330px) {
  #html {
    padding: 10px 128px;
    color: #fff !important;
}

#css {
  padding: 10px 134px;
  color: #fff !important;
}

#js {
  padding: 10px 111px;
  color: #fff !important;
}

#notjs {
  padding: 10px 122px;
  color: #fff !important;
}

#git {
  padding: 10px 124px;
  color: #fff !important;
}

}

@media (max-width:310px) {
  #html {
    padding: 10px 118px;
    color: #fff !important;
}

#css {
  padding: 10px 124px;
  color: #fff !important;
}

#js {
  padding: 10px 101px;
  color: #fff !important;
}

#notjs {
  padding: 10px 112px;
  color: #fff !important;
}

#git {
  padding: 10px 114px;
  color: #fff !important;
}

}

@media (max-width:300px) {
  
  #html {
    padding: 10px 110px;
    color: #fff !important;
}

#css {
  padding: 10px 116px;
  color: #fff !important;
}

#js {
  padding: 10px 95px;
  color: #fff !important;
}

#notjs {
  padding: 10px 104px;
  color: #fff !important;
}

#git {
  padding: 10px 107px;
  color: #fff !important;
}

}


  #card-body h5 {
    font-size: 1.1rem;
    color:  #007bff;
}

  .skills-section h2 {
    color: #007bff;
  }

  .card {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #007bff;
    border-radius: 10px;
    opacity: 0;
    transform: translateX(100px);
    animation: slide-in 1s ease-out forwards;;

}

.card:hover{
  border: 2px solid #2c2c6c;
}

.card img{
  transition: transform 0.3s ease;
  padding: 50px 0;
}
.card img:hover{
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
}

  /* Left-to-right animation */
  .card:nth-child(odd) {
    animation-name: slide-in-left;
  }

  /* Right-to-left animation */
  .card:nth-child(even) {
    animation-name: slide-in-right;
  }

  /* Delayed animations for each card */
  .card:nth-child(1) { animation-delay: 0.3s; }
  .card:nth-child(2) { animation-delay: 0.6s; }
  .card:nth-child(3) { animation-delay: 0.9s; }
  .card:nth-child(4) { animation-delay: 1.2s; }
  .card:nth-child(5) { animation-delay: 1.5s; }

  /* Keyframes for left-to-right */
  @keyframes slide-in-left {
    from {
      transform: translateX(-100px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Keyframes for right-to-left */
  @keyframes slide-in-right {
    from {
      transform: translateX(100px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }



  #experience h3{
    color:#0078ff;
    font-weight: 700;
  }

   /* Animation for h3 (left to right) */
   .animate-left {
    animation: slideInLeft 1s ease-out;
  }

  /* Animation for p tags (right to left) */
  .animate-right {
    animation: slideInRight 1s ease-out;
  }

  /* Keyframes for left to right slide */
  @keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Keyframes for right to left slide */
  @keyframes slideInRight {
    0% {
      transform: translateX(100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }


  /* contant page !!!!!!!!!!!!!!!!!!!!!!!!! */

  .tenor-gif-embed{
    font-size: 40px;
  }

  #gif{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top:30px ;
  }

  #gif{
    /* background-color:#bfe9f7f3 ; */
  }

  #a .card:hover{
border: 5px solid #007bff;
  }