:root {
  --primary: #0090C9;
  --accent: #06a800ff;
  --dark: rgb(21, 19, 18);
  --muted: #6b7280;
  --light: #ffffff;
  --card: #f3f4f6;
  font-size: calc(1vw + 0.6em);
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  font-family: "Poppins";
  color: var(--light);
  background: rgb(21, 19, 18);
  line-height: 1.45;
  scroll-behavior: smooth;
}

.main-header{
  display: flex;
  gap: 30px;
  margin-top: 35px !important;
  margin: auto;
  width: fit-content;
  text-align: center;
  font-size: 1px;
  background-color: #44444415;
  border-radius: 15px;
  padding: 12px 35px 12px 35px;
}
#mainHeaderBtn{
  cursor: pointer;
}
#headerBtn{
  background-color: #333;
  color: white;
  font-family: "montserrat";
  padding: 7px;
  border-radius: 5px;
  border: none;
}
.main-sub-header svg:hover{
background: linear-gradient(135deg, #ff5e01, #ff0000);
padding: 3px;
border-radius: 5px;
}
.main-sub-header svg{
background-color: #3f202015;
padding: 3px;
}
.menu-text{
font-size: 10px;
}


/*---------- Hero And Main Section -------------*/

.main-section{
  display: flex;
  margin-top: 80px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 100px;
  gap: 40px;
}
.main-fixed {
  width: 30%;
  border-radius: 15px;
  position: sticky;
  top: 40px; /* start sticking 20px from top */
  align-self: flex-start;
}
@media(max-width:768px){
.main-fixed {
  top: unset;
   position: static;
}

}
.main-info{
  width: 70%;
}

/*---------- Hero And Main Section -------------*/

.main-fixed p{
  text-align: center;
}
.main-fixed-box{
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
}
.social-icons{
  text-align: center;
}
.social-icons i{
  margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
}
.social-icons a{
   background: rgb(255, 60, 0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   transition: transform 0.3s ease;
}
.main-fixed-box h4{
  color: #333;
   text-align: center;
   margin-top: 15px;
   margin-bottom: 10px;
}
.main-fixed-box p{
  color: #333;
  font-size: 16px;
  margin-left: 10px;
  margin-right: 10px;
}
.main-fixed img{
 height: 100%;
 width: 100%;
 margin-top:0px;
}
.main-info h1{
  font-size: 110px;
  line-height: 0.8;
}
.dev-line{
  color: #333;
}
.main-info p{
font-size: 18px;
margin-top: 20px;
margin-left: 10px;
margin-right: 130px;
color: #b8b8b8;
}
@media (max-width:768px) {
  .main-section{
  flex-wrap: wrap;
  margin-top: 80px;
  margin-left: 30px;
  margin-right: 30px;

}
.reverse-section{
  flex-wrap: wrap-reverse !important;
}
.main-fixed{
  width: 100%;
}
.main-info{
  width: 100%;
}
.main-info h1{
  font-size: 50px;
  line-height: 0.9;
  text-align: center;
}
.main-info p{
font-size: 15px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
color: #b8b8b8;
text-align: center;
};

}
@media (max-width:768px) {
  .main-info-box-one{
gap: 200px !important;
margin-left: -10px;
}
.make-right{
  margin-left: 20px;
}
.main-info-text-box h1{
  font-size: 20px !important;
  font-weight: 600;
  margin-left: 10px;
}
footer{
  margin-bottom: 30px !important;
}

}
.main-info-box-one{
  display: flex;
  margin-top: 30px;
  gap: 0px;

}
.main-info-text-box h1{
  font-size: 70px;
  font-weight: 600;
  margin-left: 10px;
}
.main-info-text-box{
  width: 430%;;
}
.make-right{
  margin-left: -200px;
}
.main-info-text-box P{
  line-height: 1.1;
  margin-top: 5px;
}





@media (max-width:768px) {
  .projects-main-box{
    flex-wrap: wrap;
    margin-left: 0px !important;
  }
  .projects-main-box-one{
  width: 100% !important;
  }
  .projects-main-box-two {
  width: 100% !important;
}
.projects-main-box-one h4{
font-size: 20px;

}
.projects-main-box-two h4{
font-size: 20px;
}
}
.projects-main-box{
  display: flex;
  margin-left: 10px;
  margin-top: 50px;
  gap: 10px;
}
.projects-main-box-one{
  width: 40%;
  background-image: url("../images/hello.svg");
  background: linear-gradient(135deg, #ff5e01, #ff0000);
  border-radius: 5px;
  padding: 20px;
}
.projects-main-box-two {
  width: 60%;
  background-image: url("../images/another.svg");
  background-size: cover;       /* makes the image cover the container */
  background-repeat: no-repeat; /* prevents tiling */
  background-position: center;  /* centers the image */
  background: linear-gradient(135deg, #aaf300, #ffe600);
  border-radius: 5px;
  padding: 20px;
}
.projects-main-box-one h4{
font-size: 27px;
font-weight: 400;
line-height: 1;
margin-top: 10px;
margin-bottom: 30px;
}
.projects-main-box-two h4{
font-size: 27px;
font-weight: 400;
line-height: 1;
margin-top: 10px;
margin-bottom: 30px;
color: black;
}
#one-black i{
color: black;


}
.one-white{
  border: 1px solid black;
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
  color: rgb(255, 255, 255) !important;
}
.one-white:hover{
  background-color: rgb(255, 255, 255);
  transform: translateY(-5px);
  border: 1px solid rgb(255, 255, 255);
}
.main-link {
  margin-top: 30px;
  text-align: right;
}
.main-link{
  border: 1px solid rgb(255, 255, 255);
  padding-left: 7px;
  padding-right: 7px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
  color: white;
}
.main-link:hover{
  background-color: white;
  color:  #ff0000;
  transform: translateY(-5px);
}
.right-side-btn{
text-align: right;
}
@media (max-width:768px) {
  #recent-projects{
margin-top: 50px !important;
font-size: 50px !important;
line-height: 0.9;
}
.project-section-bar{
display: flex;
flex-wrap: wrap;
}
.projects-section{
  width:100% !important;
}
.projects-section-two{
  width:100% !important;
}
.projects-section-two h4{
  
}
.projects-section-two p{
  text-align: left !important;
  margin-top: -20px !important;
  margin-left: 10px !important;
}
.projects-section img{
  height: 100% !important;
  width: 100% !important;
  object-fit:fill;
  border-radius: 10px;
}
.experience-level p{
  margin-top: 20px !important;
}
.premium-tools {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
}
#move-premium{
  margin-top: 17px !important;
}
.contact-form .form-group {
  margin-left: -7px !important;
}
}
#recent-projects{
  margin-top: 120px;
  font-size: 90px;
  line-height: 0.8;
}
.projects-section img{
  height: 100%;
  width: 100%;
  object-fit:fill;
  border-radius: 10px;
}
.right-side-btn-one {
    text-align: right;
}
.projects-div{
display: flex;
gap: 20px;
margin-top: 50px;
cursor: pointer;
position: relative;
background: rgba(255, 255, 255, 0.007);
backdrop-filter: blur(10px);          
border-radius: 10px;
padding: 20px;
border: 1px solid transparent;      
transition: all 0.3s ease;
}
.projects-div::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; bottom: -2px; right: -2px;
  border-radius: 12px; 
  padding: 1px;     
  background: linear-gradient(145deg, #ff5e001e, #51fd0215); 
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude; 
  pointer-events: none;
}
.projects-div:hover {
  transform: translateY(-3px);
}
.projects-section-two a i {
  border: none;
  background: transparent;  
  padding: 8px;            
  transition: all 0.3s ease; 
}
.projects-div:hover .projects-section-two a i {
  color: #88ff00;                        
  transform: translateY(-8px) scale(1.1); 
}
#move-up{
  margin-top: 20px;
}
.projects-section{
  width: 40%;
}
.projects-section-two{
  width: 60%;
}
.projects-section-two p{
  margin-left: -1px;
  margin-right: -10px;
  margin-bottom: 5px;
  margin-top: 9px;
  font-size: 14px;
  color: rgb(255, 255, 255);
}
.projects-section-two a{
  padding-left: 10px ;
  padding-right: 10px ;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-top: 20px !important;
  color: rgb(209, 209, 209);
}
.projects-section-two h4{
  margin-top: 45px !important;
}
#experience {
  width:100%;
}
.newexperience{
  width:100%
}
#yearsOfExperience{
  margin-top: 20px;
}
.premium-tools{
  display: flex;
  gap: 20px;
  margin-top: 70px;
}
.premium-tools-box img{
height: 90%;
width: 100%;
}
#move-premium{
  margin-top: 0px;
}
#thoughts-move{
  margin-top: 20px;
}


.contact-form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  margin-top: 50px;
  margin-left: 20px;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
  outline: none;
  font-size: 16px;
  transition: 0.3s;
  font-family: "poppins";
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #4f7cff;
  box-shadow: 0 0 0 3px rgba(79,124,255,0.15);
}

.contact-btn {
  background: linear-gradient(135deg, #ff5e01, #ff0000);
  border: none;
  padding: 14px 20px;
  color: #fff;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
  margin-left: 20px;
}

.contact-btn:hover {
  transform: translateY(-3px);
}


.sticky-btn {
  position: fixed;
  right: 25px;      
  bottom: 40px;     
  width: 200px;
  height: 35px;
  border-radius: 5px;
  background: linear-gradient(135deg, #ff5e01, #ff0000);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 5px 20px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 9999;   /* stays on top */
}

.sticky-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0,0,0,0.32);
}

#Portfolio{
  bottom: 95px; 
}

#getIntouch{
bottom: 52px;
 background: linear-gradient(135deg, #aaf300, #ffe600);
color: #000000;
}

#projects{
bottom: 10px; 
background: linear-gradient(135deg, #ffffff, #fbffd4);
color: #000000;
}

#left-side{
left: 25px;
bottom: 10px;
}
@media (max-width:768px) {
  #left-side{
    display:none;
  }
}

footer{
  text-align: center;
  font-size: 15px;
 padding-bottom: -20px;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.footer-color{
  color:  #ff0000;
}

/* ===== Smooth Scroll ===== */
html {
  scroll-behavior: smooth;
}

/* ===== Scroll Reveal Fade Up ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Scale Reveal ===== */
.scale-reveal {
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.6s ease-out;
}
.scale-reveal.active {
  opacity: 1;
  transform: scale(1);
}

/* ===== Parallax Items ===== */
.parallax {
  transform: translateY(0);
  transition: transform 0.2s ease-out;
}

/* ===== Magnetic Buttons ===== */
.magnetic {
  position: relative;
  transition: transform 0.2s ease;
}

/* ===== Hover Glow (cards) ===== */
.glow-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glow-hover:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 0 30px rgba(255,0,150,0.35);
}

/* ===== Floating Animation ===== */
.float {
  animation: floating 4s ease-in-out infinite;
}
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ===== 3D Tilt Cards ===== */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s ease;
}

.projects-page{
  margin-top: -3px !important;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip bubble */
.tooltip-text {
  position: absolute;
  bottom: 130%;   /* above the icon */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Show on hover */
.tooltip:hover .tooltip-text {
  opacity: 1;
}



.images-per-projects{
  margin-top: -40px;

}

.images-per-projects img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.highlight-text h4{
margin-left: 10px;
}

.highlight-text p{
text-align: left;
}

.highlight-text a{
margin-left: 10px;
margin-top: 40px !important;
padding: 7px 25px;
text-decoration: none;
font-size: 20px;
border-radius: 5px;
background: linear-gradient(135deg, #ff5e01, #ff0000);
color: white;
}

.project-link{
 margin-top: 20px !important; 
}

.highlight-text ul li{
margin-left: 30px;
font-size: 18px;
}


  #skills-header{
    margin-top: 5px !important;
    
  }
@media (max-width:768px) {
  #skills-header{
  margin-left: 0px !important;
  margin-bottom: 10px !important;
}
  #check-left{
margin-left: 0px !important;
margin-top: 5px !important;
}
.volunteering{

  font-size: 30px !important;
  margin-left: 1px !important;

}
#check-up{
  margin-top: -10px !important;
  margin-left: 11px !important;
  margin-bottom: 40px !important;
}
}

.volunteering{
  margin-top: 30px !important;
  margin-bottom: 30px !important;
  font-size: 40px !important;
  margin-left: 15px !important;
  line-height: 1;
}



/*---- THE END ----*/