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

 body {
   min-height: 100vh;
   overflow: hidden;
   background: #0b0c10;
   color: #fff;
   position: relative;

 }

 /* Particle Background */
 #particles-js {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
 }

 /* Main Container */
 .frame-Container {
   position: relative;
   width: 80%;
   max-width: 1100px;
   margin: 50px auto;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 20px;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
   padding: 40px;
   backdrop-filter: blur(10px);
   z-index: 1;
   height: 580px;

 }

 .navbar {
   position: absolute;
   left: 100%;
   height: 520px;
 }

 /* Profile Section */

 .profile {
   position: absolute;
   top: -18px;
   /* height: 512px; */
   bottom: -18px;
   display: flex;
   left: 1%;
   background-image: url("img/profile.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   color: #fff;
   box-sizing: border-box;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
   border-radius: 10px;

 }

 .left-box {
   display: flex;
   flex-direction: column;
   width: 100%;
   box-shadow: 0 25px 8px 0 rgba(0, 0, 0, 0.2), 0 18px 20px 0 rgba(0, 0, 0, 0.19);
   position: relative;
   background-size: cover;
   background-repeat: no-repeat;
   /* opacity: 2.5; */
   object-fit: cover;
   filter: brightness(0.7);
   color: white;
   background: rgb(15 32 39 / 65%)
 }

 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .hd_button {
   background: linear-gradient(135deg, #387876eb, #617f7e9e);
   border: none;
   padding: 8px 16px;
   border-radius: 30px;
   color: #fff;
   cursor: pointer;
   font-weight: 500;
   transition: 0.3s;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
 
 }

 .hd_button:hover {
   background: #fff;
   transform: translateY(-5px);
   color: #000;
   box-shadow: 0 5px 15px rgba(195, 193, 193, 0.67);
 }

 .footer {
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 65%;
   justify-content: space-evenly;
   align-items: center;
   line-break: anywhere;
   gap: 10px;
   font-family: "Cossette Titre", sans-serif;
   font-weight: 400;
   font-style: normal;
   width: 100%;
   color: #e6e6e6;
 }

 .footer h5 {
   margin: 5px 0;
   font-size: 16px;
 }


 .footer .copyright {
   font-size: 12px;
   opacity: 0.7;
 }



 ol,
 ul {
   padding-left: 0rem !important;
 }


 /* Details Section */

 .card_info {
   background: rgba(255, 255, 255, 0.07);
   border-radius: 15px;
   width: 280px;
   margin: 15px;
   padding: 20px;
   text-align: center;
   transition: all 0.3s ease;
   border: 1px solid transparent;
   word-break: break-all;
 }

 .card_info:hover {
   transform: translateY(-10px);
   border: 1px solid #72f6f2;
   box-shadow: 0 0 20px rgba(114, 246, 242, 0.3);
 }

 .card_info h3 {
   margin-top: 10px;
   font-size: 1.2rem;
   color: #50aca9;
 }

 .card_info p {
   margin-top: 10px;
   font-size: 0.9rem;
   color: #ccc;
 }


 /* Responsive */
 @media (max-width: 768px) {
   .content {
     flex-direction: column;
     align-items: center;
   }

   .card_info {
     width: 90%;
   }
 }

 /* Scroll Bar Styles */
 .main {
   overflow-y: auto;
   overflow-x: hidden;
   height: 500px;
   width: 72%;
  cursor: auto; /* default cursor */

 }

 .main::-webkit-scrollbar {
   width: 8px;
 }

 .main::-webkit-scrollbar-thumb {
   background-color: #72f6f2bb;
   border-radius: 10px;
   padding: 12px;
 }

 .main::-webkit-scrollbar-thumb:hover {
   background-color: #fff;
   box-shadow: 0 5px 15px rgba(244, 242, 242, 0.436);

 }

 /* Home pages H1 Styles */

 .NInfo {
   font-size: 3rem;
   color: #50aca9;
   font-weight: 900;
   letter-spacing: 2px;
   font-family: "Changa", sans-serif;
   font-optical-sizing: auto;
    font-style: normal;
 }

 /* Button styling */
 .Btn {
      text-decoration-line: unset;
   padding: 10px 20px;
   background: linear-gradient(135deg, #387876eb, #617f7e9e);
   border: none;
   border-radius: 25px;
   color: #fff;
   font-size: 1rem;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
 }

 .Btn:hover {
   background: #fff;
   color: #000;
   transform: scale(1.05);
   box-shadow: 0 5px 15px rgba(195, 193, 193, 0.67);
 }

 hr {
   color: #fff;
 }


 /* All the Pages H1,H3,P,H5 tags styles Used */

 .timeline-title h3 {
   color: #fff;
   font-weight: 600;
   letter-spacing: 2px;
 }

 .timeline-title p {
   color: #ECF0F1;
   font-size: 0.9rem;
 }

 .timeline-title h1 {
   color: #ECF0F1;
   font-weight: 900;
   letter-spacing: 5px;
   font-family: "Bebas Neue", sans-serif;
   font-style: normal;
 }

 .timeline-title h4 {
   color: #ECF0F1;
   font-size: 1.2rem;
   font-weight: 700;

 }

 .resume_title h2 {
   color: #50aca9;
   font-weight: 900;
   letter-spacing: 2px;
   font-family: "Changa", sans-serif;
   font-optical-sizing: auto;

   font-style: normal;
 }
 .resume_title strong
 {
    color: #ECF0F1;
 }

 /* Contact Section */

 .contact {
   text-align: center;
 }

 .contact a {
   display: inline-block;
   margin: 10px;
   color: #72f6f2;
   font-size: 1.4rem;
   transition: color 0.3s;
 }

 .contact a:hover {
   color: #fff;
 }

 /* Details */
 .details {
   position: absolute;
   right: 18px;
 }

 .details h1 {
   opacity: 0;
   transform: translateX(50px);
   animation: detailsSlide 1s forwards;
   animation-delay: 1s;
   line-height: 1.4;
   margin: 8px 0 10px 0;
 }

 .details h3 {
   margin: 8px 0 18px 0;
   font-size: 1rem;
 }


 /* Headings */

 .details h5 {
   font-size: 1.1rem;
   margin-bottom: 15px;
   font-weight: 600;
   color: #50aca9;
 }



 .details ul li span {
   font-weight: 900;
   color: #50aca9;
 }


 @keyframes detailsSlide {
   to {
     opacity: 1;
     transform: translateX(0);
   }
 }
/* Floating Ball animation */


.glow-doll {
    position: absolute;
    width: 100%;
    height: 485px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    perspective: 800px;
    top: 0;
    right: 0%;
}

.orb {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #72f6f2, #2e6c6b 70%);
  border-radius: 50%;
  box-shadow: 0 0 40px #72f6f2, 0 0 80px rgba(114, 246, 242, 0.5);
  animation: floaty 4s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite;
  position: relative;
  transition: transform 0.2s ease-out;
}

/* Floating Skills animation  */

.shadow {
  position: absolute;
  bottom: 50px;
  width: 80px;
  height: 20px;
  background: rgba(114, 246, 242, 0.25);
  border-radius: 50%;
  filter: blur(4px);
  animation: shadowScale 4s ease-in-out infinite;
  transition: transform 0.2s ease-out;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
}

@keyframes glowPulse {
  0%,100% { box-shadow:0 0 40px #72f6f2,0 0 80px rgba(114,246,242,0.5); }
  50% { box-shadow:0 0 60px #72f6f2,0 0 120px rgba(114,246,242,0.6); }
}

@keyframes shadowScale {
  0%,100% { transform: scaleX(1); opacity:0.4; }
  50% { transform: scaleX(1.4); opacity:0.2; }
}

@media (max-width: 768px) {
  .orb { width: 80px; height: 80px; }
  .shadow { width: 60px; height: 15px; bottom: 30px; }
  .glow-doll{ height: 100%; right: 0; bottom: 0; top:0;}
}
@media (max-width: 1000px) {
  .orb { width: 80px; height: 80px; }
  .shadow { width: 60px; height: 15px; bottom: 30px; }
  .glow-doll{ height: 100%; right: 0; bottom: 0; top:0%;}
}
@media (max-width: 700px) {
  .orb { width: 80px; height: 80px; }
  .shadow { width: 60px; height: 15px; bottom: 30px; }
  .glow-doll
  {
        height: 100%;
        right: 0;
        bottom: 0;
        top: 0%;
  }
}
@media (max-width: 600px) {
  .orb { width: 80px; height: 80px; }
  .shadow { width: 60px; height: 15px; bottom: 30px; }
  .glow-doll
  {
        height: 100%;
        right: 0;
        bottom: 0;
        top: 8%;
  }
}

.skills-cloud {
  position: relative;
  width: 100%;
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  letter-spacing: 1px;
  color: #72f6f2;
  text-transform: uppercase;
  overflow: hidden;
}

@media (max-width: 768px) {
  .skills-cloud {
    height: 300px;
    font-size: 14px;
  }
}



 /* Responsive For All the Pages Layout */


 @media only screen and (max-width:600px) {
   body {
     overflow: auto;
   }

   .frame-Container {
     height: unset;
     padding: 0;
   }

   .profile {
     position: unset;
     min-height: 350px;
   }

   .details {
     position: unset;
     padding: 25px;
   }

   .main {
     min-width: 100%;
   }

   .NInfo {
     font-size: 1.8rem;
   }

   .footer {
     position: unset;
     margin-top: 38%;
   }

   .hd_button {
     padding: 3px;
     font-size: 13px;
   }

   .navbar {
     position: unset;
     display: flow;
     height: auto;
   }

   .resume_title {
     padding: 40px;
   }

   .projects {
     grid-template-columns: auto;
   }

   .contact {
     text-align: center;
     display: flex;
     justify-content: space-evenly;
   }
   .left-box
   {
    padding: 12px;
   }
   .glow-doll
   {
    right: unset;
   }

 }
   @media only screen and (min-width: 1272px) and (max-width:1300px) {
     .details {
       right: 18px;
     }

     .main {
       width: 62%;
     }
   }

   @media only screen and (min-width: 1300px) and (max-width:1400px) {
     .details {
       right: 18px;
     }

     .main {
       width: 62%;
     }
   }

   @media only screen and (min-width: 1400px) and (max-width:1500px) {
     .details {
       right: 18px;
     }

     .main {
       width: 71%;
     }
   }

   @media only screen and (min-width:1284) and (max-width:1300px) {
     .details {
       right: 18px;
     }

     .main {
       width: 60%;
     }


   }

   @media only screen and (min-width:1260) and (max-width:1272px) {
     .details {
       right: 18px;
     }

     .main {
       width: 65%;
     }

     .profile {
       grid-template-columns: auto;
     }
   }

   @media only screen and (max-width:1260px) {
     .details {
       right: 18px;
     }

     .main {
       width: 61%;
     }

   }

   @media only screen and (max-width:991px) {
     .details {
       right: 18px;
     }

     .main {
       width: 53%;
     }

     .profile {
       grid-template-columns: auto;
     }
   }

   @media only screen and (max-width:750px) {
     body {
       overflow: auto;
     }

     .frame-Container {
       height: unset;
       padding: 0;
     }

     .profile {
       position: unset;
       min-height: 350px;
     }

     .details {
       position: unset;
       padding: 25px;
     }

     .main {
       min-width: 100%;
     }

     .NInfo {
       font-size: 1.8rem;
     }

     .footer {
       position: unset;
       margin-top: 38%;
      padding: 33px;
     }

     .hd_button {
       padding: 15px;
       font-size: 15px;
     }

     .resume_title {
       padding: 40px;
     }

     .projects {
       grid-template-columns: auto;
     }
      .contact {
     text-align: center;
     display: flex;
     justify-content: space-evenly;
   }
   .navbar {
     position: unset;
     display: flow;
     height: auto;
   }
   .header img 
   {
    width: 120px;
    height: 120px;
   }
   }

   @media only screen and (max-width:800px) {
     .details {
       right: 18px;
     }

     .main {
       width: 53%;
     }

     .resume_title {
       padding: 40px;
     }

     .projects {
       grid-template-columns: auto
     }
   }

   @media only screen and (min-width:749) and (max-width:800px) {
     body {
       overflow: auto;
     }

     .frame-Container {
       height: unset;
       padding: 0;
     }

     .profile {
       position: unset;
       min-height: 350px;
     }

     .details {
       position: unset;
       padding: 25px;
     }

     .main {
       min-width: 100%;
     }

     .NInfo {
       font-size: 1.8rem;
     }

     .footer {
       position: unset;
       margin-top: 38%;
     }

     .hd_button {
       padding: 3px;
       font-size: 13px;
     }

     .resume_title {
       padding: 40px;
     }

     .projects {
       grid-template-columns: auto;
     }

   .contact {
     text-align: center;
     display: flex;
     justify-content: space-evenly;
   }
   .navbar {
     position: unset;
     display: flow;
     height: auto;
   }
    .glow-doll
   {
    right: unset;
   }
}

/* Heading Main Animation */

.random-word {
    display: inline-block;
    text-transform: uppercase;
    color: #5abab8;
    letter-spacing: 3px;
    width: auto;
    /* transition: all 1.25s; */
    animation: slidedown 4s infinite;
    -webkit-animation: slidedown 3s infinite;
    -moz-animation: slidedown 4s infinite;
    font-weight: 700;
    font-size: 1rem;
}

@keyframes slidedown {
  0% {
    opacity: 50;
  }
  
  5% {
    opacity: 0;
    transform: translateY(0.5em);
  }
  
  7% {
    transform: translateY(-1em);
  }
  
  10% {
    opacity: 0;
  }
  
  20% {
    transform: translateY(0);
    opacity: 100;
  }
}