body {
    background: transparent;
    font-family: 'Arial', sans-serif; 
    text-align: center; 
    margin: 0;
    font-style: italic;
    overflow-x: hidden !important;
}


main{
    width:80% !important;
    margin-left: 150px !important;
    overflow: hidden;
}
header{
    overflow:hidden;
}
.navbar-custom{
    border-radius: 50px !important;
}

@media  (max-width:667px) {
    main{
        width: 100% !important;
        margin-left: 0px !important;
        background-color: white !important;
    }
    .nav-link{
        color:#f9f4f4 !important;
        float: center !important;
        display: flex !important;
        width: 100% !important;
        text-align: left !important;
        
    }
    .navbar{
        background-color: rgb(234, 104, 104) !important;
    }
   .nav-item{
    display: flex !important;
   }
   .social_info{
    margin-left: -10px !important;
   }
   .nav-link::after {
    width:10% !important;
   }

   
    
}


.nav-link{
    text-decoration: none; /* pehle underline hatawe */
    color: black; /* original color set kela */
    position: relative; /* underline sathi */
  }

 

  
  .nav-link::after {
    content: ""; 
    position: absolute;
    width: 100%;
    height: 2px; /* underline height */
    left: 0;
    bottom: -2px; /* underline thodi khali set keli */
    background-color: rgb(222, 220, 215);
    transform: scaleX(0); /* pehle zero scale set kela */
    transform-origin: left;
    transition: transform 0.3s ease; /* animation effect */
  }

 .nav-link1:hover{
    color:rgb(34, 200, 245) !important;
 
  }



  
  .nav-link:hover::after {
    transform: scaleX(1); /* hover jhalyavar underline full hotil */
    
    
  }
  .icon1{
    background-color:rgb(39, 38, 38) !important;
    color: white !important;
    border-radius: 5px !important;
    padding: 10px !important;
    padding-bottom: 5px !important;
    box-shadow: 0px 0px 5px 0px rgb(235, 233, 233);
    margin-top: 10px;


}

.icon1:hover{
    background-color:rgb(57, 60, 61) !important;
    color: white !important;
    border-radius: 5px !important;
    padding: 10px !important;
    padding-bottom: 5px !important;
    box-shadow: 0px 0px 5px 0px dimgrey;
    margin-top: 10px;




}



.h12 {
    font-weight: bold;
    font-family: 'Barlow', sans-serif;
    /* text-transform: uppercase; */
    color: transparent;
    font-size: 20px; /* Adjust font size */
    animation: animateH1 5s ease-in-out infinite; /* Apply animation */
    font-style: italic !important;
    text-align: center; 


}
@media(max-width:667px){
    .h12{
        font-size: 20px; /* Adjust font size */
        


    }
    .h11{
        font-size: 10px;

    }
    .navbar-brand{
        display: inline-block;
    }
}

@keyframes animateH1 {
    0% {
        opacity: 0; /* Start invisible */
        transform: translateY(-20px); /* Start slightly above */
    }
    50% {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* Move to normal position */
    }
    100% {
        opacity: 0; /* Fade out */
        transform: translateY(20px); /* Move slightly down */
    }
}

.h11 {
    font-size: 30px; /* Adjust font size */
    font-weight: 800;
    font-family: 'Barlow', sans-serif;
    -webkit-text-fill-color: transparent;
    z-index: 987865;
    text-align: center;
    text-shadow: 2px 0px 0px rgb(10, 119, 214) !important;
    animation: animateH11 5s ease-in-out infinite; /* Apply animation */
}
.btn_info:hover{
    color: white  !important;
    background-color:rgb(57, 60, 61) !important;
    border: white !important;

}





@keyframes animateH11 {
    0% {
        opacity: 0; /* Start invisible */
        transform: scale(1); /* Start slightly smaller */
    }
    50% {
        opacity: 1; /* Fully visible */
        transform: scale(1); /* Normal size */
    }
    100% {
        opacity: 0; /* Fade out */
        transform: scale(1.1); /* Slightly larger at end */
    }
}

/* Animation for the header title */
.animate-title {
color: #ff6600;
animation: bounceIn 1.5s ease-in-out;
}

/* Keyframe animations */
@keyframes bounceIn {
0% {
    transform: scale(0.5);
    opacity: 0;
}
60% {
    transform: scale(1.2);
}
100% {
    transform: scale(1);
    opacity: 1;
}
}

@keyframes fadeIn {
0% {
    opacity: 0;
    transform: translateY(20px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes fadeInText {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
.line{
    height: 80px;
    width: 4px;
    background-color: rgb(109, 143, 222);
    border-radius:5px;
}
.line {
    height: 80px; /* Fixed height */
    width: 5px;
    background-color: rgb(15, 16, 17);
    border-radius: 5px;
    animation: rotate 1s linear infinite; /* Infinite rotation animation */
}
.high_school3{
    margin-top:100px;
    margin-left: 20px !important;

}

.vertical_line {
    width: 2px;
    height: 100%;
    background-color: #9ee2f0;
    margin: 0 auto;
  }

  @media(max-width:667px){
    .high_school{
        position:relative;
        bottom:460px;
        left:0px !important;

    }
    .high_school1{
        position:relative;
        bottom:130px;
        left:0px !important;

    }
    .vertical_line{
        display: none;
    }
    .frontend{
        margin-top: -120px !important;
    }
    .high_school3{
        position:relative;
        bottom:460px;
        left: 0px !important;;

    }
    .full{
        margin-top:190px;

    }
 
  }
  .card:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease-in-out;
  }
  

/* Keyframes for rotation */
@keyframes rotate {
    0% {
        transform: rotate(0deg); /* Initial position */
    }
    100% {
        transform: rotate(360deg); /* Full rotation */
    }
}

@media(max-width:667px){
    .line{
        /* display: none !important; */
        margin-left:180px !important;
        margin-top:20px !important ;
    }
}





/* Name and role animations */
.animate-name {
font-weight: bold;
color: #333;
animation: fadeIn 1.5s ease-in-out;
}

.animate-role {
font-size: 1.2rem;
color: #666;
animation: fadeIn 1.8s ease-in-out;
}

/* Link hover effects */
.email-link, .social-link {
text-decoration: none;
color: #007bff;
position: relative;
}

.email-link:hover, .social-link:hover {
color: #ff6600;
}

.email-link::before, .social-link::before {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #ff6600;
visibility: hidden;
transition: all 0.3s ease-in-out;
}

.email-link:hover::before, .social-link:hover::before {
visibility: visible;
width: 100%;
}

/* Text highlight colors */
.highlight-orange {
color: orange;
animation: highlight 1s infinite alternate;
}

.highlight-blue {
color: blue;
}

.highlight-green {
color: green;
}

.highlight-red {
color: red;
}

/* Keyframe for highlight animation */
@keyframes highlight {
0% {
    text-shadow: 1px 1px 10px #ff6600;
}
100% {
    text-shadow: 1px 1px 20px #ff6600;
}
}

/* Profile text fade-in effect */
.profile-text {
font-size: 1.1rem;
line-height: 1.6;
}

/* Animation keyframes for fade-in and zoom effect */
@keyframes fadeInZoom {
0% {
    opacity: 0;
    transform: scale(0.8);
}
100% {
    opacity: 1;
    transform: scale(1);
}
}

/* Apply the animation to images inside the modal */
.modal-body img {
animation: fadeInZoom 0.8s ease-in-out;
opacity: 0; /* Initial state for the animation */
}

/* Fade-in images on modal display */
.modal.show .modal-body img {
opacity: 1;
}

.offcanvas-start {
transition: transform 0.6s ease-in-out;
}

.offcanvas.show {
transform: translateX(0);
}

.offcanvas-start {
transform: translateX(-100%);
}

/* Add animation to images */
.img-container figure img {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.img-container figure img.show {
opacity: 1;
transform: translateY(0);
}

@media(max-width:457px){

.skills{
    margin-left:0px !important;
}
.skill2{
    margin-left:0px !important;
    margin-top:0px !important;
}
.skillss{
    margin-left: 0px !important;
}

.skill-container{
    padding-left:0px !important;
}
.certify{
    height: 60% !important;
    width: 60% !important;
}


.skill-padding{
    padding-left: 0px !important;
}
}

.certificate-img {
opacity: 0; /* Start hidden */
transform: scale(0.8); /* Start slightly smaller */
transition: opacity 0.5s ease, transform 0.5s ease; /* Transition effects */
}

.collapse.show .certificate-img {
opacity: 1; /* Fully visible */
transform: scale(1); /* Full size */
}

.certificate-img {
opacity: 0; /* Start hidden */
transform: scale(0.8); /* Start slightly smaller */
transition: opacity 0.5s ease, transform 0.5s ease; /* Transition effects */
}

.collapse.show .certificate-img {
opacity: 1; /* Fully visible */
transform: scale(1); /* Full size */
}


.footer_icon:hover{
    background-color:F89809 !important;
    color: white !important;
    border-radius: 5px !important;
    padding: 5px 5px 5px 5px !important;
    box-shadow: 0px 0px 5px 0px white;

}



    /* Animation for social media icons */
    .footer-icon:hover {
        transform: scale(1.2);
        transition: transform 0.3s ease;
    }


    
    @media(max-width:667px){

        .girl-img{
            margin:0px !important;
            width:100% !important;
        }
        
    }

 

    @keyframes gradientAnimation {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    
    .about-container {
        /* background: linear-gradient(135deg, #171715, #fbfafa, #3e3e3d, #f4f1f1); */
        background-size: 200% 200%;
        animation: gradientAnimation 2s ease infinite;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    
    #aboutText {
        color: #f1ebeb;
        font-size:15px;
        font-weight:bold;
    }
    
    #readMoreBtn {
        margin-top: 15px;
        padding: 10px 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    @keyframes continuousRotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    .svg-icon {
        animation: continuousRotate 5s linear infinite;
    }
    

    @keyframes pulseEffect {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); } /* Adjust scale to control intensity */
        100% { transform: scale(1); }
    }
    
    .svg-icon2 {
        animation: pulseEffect 2s ease-in-out infinite; /* Adjust duration for faster or slower pulse */
        transform-origin: center;
    }



    .experience{
        box-shadow: 0px 0px 5px 0px gray;
        padding-bottom: 60px;
        border-radius: 20px;
    }
    .skill-container{
        box-shadow: 0px 0px 5px 0px gray !important;
        padding-bottom: 60px !important;
        border-radius: 20px !important;

        
    }


    .project{
        box-shadow: 0px 0px 5px 0px gray;
        border-radius: 20px;
        padding-bottom:30px !important
    }


    @media (max-width:667px) {
        .demo_images{
            padding-bottom:50px !important;
            /* display: none !important; */
        }
        .demo_button{
            margin-top: -70px !important;
        }
        .certify{
            /* width: 20px !important; */
            height: 200px !important;
            width: 200px !important;
        }
        
    }

    .demo{
        box-shadow: 0px 0px 5px 0px gray;
        padding-bottom:0px;
        border-radius: 20px;


    }
   

    .certificates{
        box-shadow: 0px 0px 5px 0px gray;
        padding-bottom: 60px;
        border-radius: 20px;
        padding-bottom:0px !important;
        padding-top:20px !important;
        
    }


    .Services{
        box-shadow: 0px 0px 5px 0px gray;
        padding-bottom: 60px;
        border-radius: 20px;
        padding-bottom:0px !important;
        padding-top:20px !important;
        
    }


    /* Initial state of the card */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for the card */
.card:hover {
    transform: translateY(-10px); /* Moves the card up slightly */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Adds a shadow effect */
}

/* Optionally, you can also add a scaling effect */
.card:hover img {
    transform: scale(1.05); /* Slight zoom effect on image */
    transition: transform 0.3s ease; /* Smooth zoom */
}


.counter-box {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .counter-box:hover {
    transform: translateY(-10px);
  }

  .counter-ico {
    margin-bottom: 15px;
  }

  .counter-ico i {
    font-size: 40px;
    color: #007bff;
  }

  .counter-num p {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
    color: #333;
  }

  .counter-text {
    font-size: 16px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Counter animation */
  .counter {
    animation: fadeIn 1s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @media(max-width:667px){
      .counter{
          padding-left:0px !important;
      }
      .counter-box{
          width: 80%;

      }
  }

  .counter-box {
          background-color: #f8f9fa;
          border-radius: 10px;
          padding: 30px;
          text-align: center;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          transition: transform 0.3s ease;
        }
      
        .counter-box:hover {
          transform: translateY(-10px);
        }
      
        .counter-ico {
          margin-bottom: 15px;
        }
      
        .counter-ico i {
          font-size: 40px;
          color: #007bff;
        }
      
        .counter-num p {
          font-size: 36px;
          font-weight: bold;
          margin: 0;
          color: #333;
        }
      
        .counter-text {
          font-size: 16px;
          color: #666;
          text-transform: uppercase;
          letter-spacing: 1px;
        }
      
        /* Counter animation */
        .counter {
          animation: fadeIn 1s ease-in-out;
        }
      
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: scale(0.8);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
        @media(max-width:667px){
            .counter{
                padding-left:0px !important;
            }
            .counter-box{
                width: 80%;

            }
        }

       
        /* Card Styling */
        .education-card {
          background: #ffffff;
          border-radius: 15px;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .education-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        
        .education-card h5 {
          font-size: 1.5rem;
          color: #e7b052;
          font-weight: 600;
        }
        
        .education-card h6 {
          font-size: 1.2rem;
          color: #555;
        }
        
        .education-card p {
          font-size: 0.9rem;
          color: #777;
        }
        
        /* Icon Styling */
        .icon {
          color: #efb358;
          margin-bottom: 15px;
          transition: transform 0.3s ease, color 0.3s ease;
          font-size:35px;
        }
        
        .education-card:hover .icon {
          transform: scale(1.2);
          color: #fadd6b;
        }
        
        /* Media Queries */
        @media (max-width: 768px) {
          .education-card {
            margin-bottom: 20px;
          }
        }