@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Radley:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Radley:ital@1&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
/* Loading screen styles */
#loading-screen {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
 .spinner {
   width: 50px;
   height: 50px;
   border: 3px solid #000;
   border-top-color: #ccc;
   border-radius: 50%;
   animation: spin 1s infinite linear;
 }
 
 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }
 

 #content {
   display: block;
 }
 

:root {
  --container: 112rem;
  --m-auto: 0 auto;
}

html,body {
  overflow-x:hidden;
  scroll-behavior: smooth;
}
#scrollToTopBtn {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   background-color: transparent;
   border: none;
   z-index: 9999;
   cursor: pointer;
   transition: transform 0.3s ease-in-out;
 }
 
 #scrollToTopBtn .circle {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
 }
 
 #scrollToTopBtn .circle-bg {
   fill: #000;
 }
 
 #scrollToTopBtn .circle-fill {
   fill: none;
   stroke: #fff;
   stroke-width: 3px;
   stroke-dasharray: 100;
   stroke-dashoffset: 100;
   transition: stroke-dashoffset 0.3s ease-in-out;
 }
 
 #scrollToTopBtn.show {
   display: block;
 }
 
 #scrollToTopBtn.show:hover {
   transform: scale(1.1);
 }
 
 #scrollToTopBtn.show .circle-fill {
   stroke-dashoffset: 0;
 }
 
 #scrollToTopBtn .arrow {
   display: block;
   width: 12px;
   height: 12px;
   border-width: 2px 2px 0 0;
   border-style: solid;
   border-color: #fff;
   transform: rotate(-45deg);
   position: absolute;
   top: 14px;
   left: 14px;
 }
 
 
body {
  background:#262626;
  color:#fff;
  position: relative;
}

.containers {
  max-width: var(--container);
  padding: 2rem 2rem;
  margin: var(--m-auto);
}

.swiper {
  position: relative;
  width: 240px;
  height: 320px;
}

.swiper-slide {
  border-radius: 18px;
}

.swiper-slide img {
  width: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.heading {
  padding-top: 3rem;
  text-align: center;
}

#home {
   width: 100%;
   height: 100vh;
 
   
   position: relative;
}

#home::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(images/header\(full\).png) no-repeat bottom center;
   background-position: bottom left 300px;
   background-size: cover;
   opacity: 0;
   animation: fade-in 2.5s forwards;
}

@keyframes fade-in {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}
.custom-link, .custom-link:visited {
   text-decoration: none; /* Removes underline */
   color: inherit; /* Inherits the color from the parent element, removing the default blue */
 }
 
 .custom-link:hover, .custom-link:focus {
   text-decoration: underline; /* Optional: Adds underline on hover/focus for better accessibility */
 }

.back {
   
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   z-index:-1;
 }



.container{
padding : 10px 5%;

}
nav{
   padding:10px 5%;
   position: relative;
   z-index:2;
   
   width:100%;
}

nav a.active{
   color:#f44336;
}
.sticky{
   background-color: #000;
   transition: background-color 1s ease;
   position: fixed;

}


.nav__{
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 
  animation:appear 2s linear forwards;
   

}
.logo{
   width:170px;
   
   
   
   
}
nav ul li {
   display : inline-block;
   list-style: none;
   margin: 10px 20px;
}
nav ul li a{
   color:#fff;
   text-decoration: none;  
   font-size: 16px;
   position: relative;

}

nav ul li a::after{
   content: "";
   width: 0;
   height: 3px;
   background: #f44336;
   position:absolute;
   left:0;
   bottom:-6px
}
nav ul li a:hover::after{
   width: 100%;
   transition: 0.5s;
}




#yo {
   position: absolute;
   top: 0;
   left: 0;
   width: 50%;
   height: 100vh;
   margin-left:15%;
 }
 
 .header-text {
   padding-top:13%;
   width: 100%;
   height: 100vh;
   animation: appear 2s linear forwards;
   position: relative;
   animation: hoverDown 2.5s forwards;
 }
 @keyframes hoverDown {
   from {
     transform: translateY(-50px);
   }
   to {
     transform: translateY(0);
   }
 }
.header-btn{
   padding-top:2.5rem;
   position:absolute; 
   
   display:flex;
   gap:20px;
   flex-wrap:wrap;
   justify-content: space-between;
  
}
.header-btn-download{
   padding-top:5rem;
   position:absolute; 
   
   display:flex;
   gap:20px;
   flex-wrap:wrap;
   justify-content: space-between;
  
}

.header-text h1{
   font-size:6rem;
   animation:appear 2s linear forwards;
   position:relative;
   
   
   
   
  
  
}
.header-text h1::after{
   content: "";
   width: 30%;
   height: 3px;
   background: #f44336;
   position:absolute;
   left:0;
   bottom:-6px;
}
.guru{
   color:#f44336;
   animation:appear 2s linear forwards;
   
}
.hello{
   font-size:3rem;
   
   
}
.exclaim{
   color:#fff;
}

.logos{
   padding-top:2rem;
   
   display:flex;
   width:150px;
   justify-content:space-between;
   flex-wrap:wrap;
   font-size:1.6rem;
   
   
   
}


.header-icons{
   position: relative;
   background: #000;
   color: #000;
   padding: 15px;

   border-radius: 50%;
   width: 15px;
   height: 15px;
   font-size: 17px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   
 }
 
 .tooltip {
   position: absolute;
   top: 0;
   font-size: 14px;
   background: #fff;
   color: #ffffff;
   padding: 5px 8px;
   border-radius: 5px;
   box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
   opacity: 0;
   pointer-events: none;
   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   
 }
 .icon {
   color:#fff;
 }
 
 .tooltip::before {
   position: absolute;
   content: "";
   height: 8px;
   width: 8px;
   background: #ffffff;
   top: -3px;
   left: 50%;
   transform: translateX(-50%) rotate(45deg);
   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
 
 .header-icons:hover .tooltip {
   
   top:35px;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
 }
 
 svg:hover span,
 svg:hover .tooltip {
   text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
 }
 
 .header-icons:hover,
 .header-icons:hover .tooltip,
 .header-icons:hover .tooltip::before {
   background: linear-gradient(320deg, rgb(146, 3, 22), rgb(70, 5, 8));
   color: #ffffff;
 }



/* ABOUT */
#about{
   
   padding-top:20px;
   padding-bottom:80px;
   color:#ffff;
   
   
   background-color: #262626;
   height:fit-content;
   top:0;

   
}
#about h1 {
   text-align: center;
   font-size: 3rem;
   font-weight: 600;
   margin: 40px auto;
   color:#ff5757;
   position:relative;
   font-family: 'Playfair Display', serif;

   width:fit-content;
   
   
}
#about h1::before{
   display: block;
   content: "";
   width: 60px;
   height: 1px;
   background-color:#f44336;
   margin-top: -1.5px;
   position: absolute;
   left: -65px;
   top: 50%;
  
}
#about h1::after{
   display: block;
   content: "";
   width: 60px;
   height: 1px;
   background-color:#f44336;
   margin-top: -1.5px;
   position: absolute;
   right: -65px;
   top: 50%;
  
}
.about-text{
   text-align: center;
   line-height: 1.8;
   font-size:1.5rem;
   width:70%;
   margin:auto;
}
.tab-titles{
   display :flex;

   margin: auto;
   padding-top:5rem;
   justify-content: center;
  
   align-items: center;
   
}
.tab-titles p{
   font-size:1.5rem;
   text-align: center;
   
}
.tab-links{
   margin:0 30px;
   font-size: 18px;
   font-weight: 500;
   cursor: pointer;
   position: relative;

 
}
.tab-links::after{
   content: "";
   width: 0;
   height: 3px;
   background: #f44336;
   position:absolute;
   left:0;
   bottom:-8px;
   transition: 0.5s;
}
.tab-links.active-link::after{
   width: 50%;
   
}

.skill{
width: auto;
height: auto;

margin:0 10px;


position:relative;
}
.outer{
   height:160px;
   width:160px;
   border-radius: 50%;
   padding:20px;
   background-color: #c2c2c2;
}
.inner{
   height:120px;
   width:120px;
   border-radius: 50%;
   background-color: #262626;
   display:flex;
   align-items: center;
   justify-content: center;
}
.type{
   padding-top:2.5rem;
   
   text-align: center;
}
#python{
   font-weight: 600;
   color: #fff;

}
#sql{
   font-weight: 600;
   color: #fff;

}
#php{
   font-weight: 600;
   color: #fff;

}
#html{
   font-weight: 600;
   color: #fff;

}
#css{
   font-weight: 600;
   color: #fff;

}
#javascript{
   font-weight: 600;
   color: #fff;

}

#py{
fill:none;
stroke:url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;

}
#py.selected{
   animation: anim 1s linear forwards; 
}
#SQL{
fill:none;
stroke:url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;

}
#SQL.selected{
   animation: anim1 1s linear forwards; 
}
#PHP{
fill:none;
stroke:url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;
 
}
#PHP.selected{
   animation: anim2 1s linear forwards; 
}
#HTML{
fill:none;
stroke:url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;

}
#HTML.selected{
   animation: anim3 1s linear forwards; 
}
#CSS{
fill:none;
stroke:url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;

}
#CSS.selected{
   animation: anim4 1s linear forwards; 
}
#JAVASCRIPT{
fill:none;
stroke:url(#GradientColor);
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;

}
#JAVASCRIPT.selected{
   animation: anim5 1s linear forwards; 
}
svg{
   position:absolute;
   top:0;
   left:0;
}


@keyframes anim{
   100%{
       stroke-dashoffset: 80;
   }
}
@keyframes anim1{
   100%{
       stroke-dashoffset: 100;
   }
}
@keyframes anim2{
   100%{
       stroke-dashoffset: 80;
   }
}
@keyframes anim3{
   100%{
       stroke-dashoffset: 130;
   }
}
@keyframes anim4{
   100%{
       stroke-dashoffset: 160;
   }
}
@keyframes anim5{
   100%{
       stroke-dashoffset: 130;
   }
}
.tab-contents{
   display: none;
}
#skills.tab-contents.active-tab{
   
   
   max-width: 700px;
   display:flex;
   flex-wrap:wrap;
   align-items: center;
   margin:auto;
   align-content: space-between;
   justify-content: space-between;
   height:auto;
   gap:4rem;
   margin-top:5rem;
  
}
#Education.tab-contents.active-tab{
   display: flex;
   justify-content: space-between;
   max-width:1200px;
   height:25rem;
   margin:auto;
   gap:20px;
   margin-top:5rem;
   
   
}
#Achievements.tab-contents.active-tab{
   display: flex;
   justify-content: space-between;
   max-width:1400px;
   height:25rem;
   margin:auto;
   gap:10px;
   margin-top:5rem;
  
}

.edu{
   flex:1;
   margin:0 20px;

   
   
}
.date{
  
   margin-bottom:0.5rem;
   color:#f44336
}
.edu h2{
   
   line-height: 1.8;
   font-size:2rem;
   margin-bottom:1rem;
   position: relative;
}
.edu h2::after{
   content: "";
   width: 30%;
   height: 1px;
   background: #f44336;
   position:absolute;
   left:0;
   bottom:-6px;
}
.edu ul{
   /* position: absolute; */
   margin-left:15px;
}
.edu ul li{
   margin-bottom:10px;
}
#exp{
   padding:2rem;
   padding-bottom: 400px;
  
   margin: 0 auto;
   max-width: 1200px;
   min-height:100vh;
  
}
.top-section{
   text-align: center;
   padding: 4rem 0;
   max-width:600px;
   margin: 0 auto;
}
.top-section h1{
   text-align: center;
   font-size: 3rem;
   font-weight: 600;
   margin-bottom: 40px;
   color:#ff5757;
   position:relative;
   font-family: 'Playfair Display', serif;

   width:fit-content;
   margin:auto;
}
.top-section h1::before{
   display: block;
   content: "";
   width: 60px;
   height: 1px;
   background-color:#f44336;
   margin-top: -1.5px;
   position: absolute;
   left: -65px;
   top: 50%;
  
}
.top-section h1::after{
   display: block;
   content: "";
   width: 60px;
   height: 1px;
   background-color:#f44336;
   margin-top: -1.5px;
   position: absolute;
   right: -65px;
   top: 50%;
  
}
.timeline{
   position : relative;
   min-height:150px;
}
.line{
   position: absolute;
   z-index:-1;
   left: calc(50% - 1px);
   width:2px;
   top:-50px;
   bottom:-50px;
   background-color:#f44336;
  display: none;
}
.line::before,
.line:after{
   position: absolute;
   display: block;
   content: "";
   height:1rem;
   width:1rem;
   border-radius :50%;
   background-color:#f44336;
   left:50%;
   transform: translateX(-50%);
   
}
.line:after{
   bottom:0;
}
.section{
   display:flex;
   opacity:0;
   transform:translateX(-100%);
   transition: 600ms ease;
   position: relative;
   z-index:1;
   margin: 50px 0;
   padding: 1rem;
   border-radius: 1rem;
   align-items:center;
   min-height:300px;
   
 
   
}
.section:nth-child(odd){
   flex-direction: row-reverse;
   transform:translateX(100%);
}
.bead{
   position: absolute;
   display: block;
   content: "";
   height:1rem;
   width:1rem;
   border-radius :50%;
   background-color:#f44336;
   left:50%;
   top:20%;
   transform: translateX(-50%);
}
.content{
   width:calc(50% - 2rem);
}
.content h2{
   font-size:2.5rem;
}
.content p{
   margin-bottom:0.3rem;
   font-size: 1.1rem;
   
}
.content ul{
   
   margin-left:15px;
}
.content ul li{
  
   margin-bottom:10px;
   font-size:1rem;
}
.show-me:nth-child(n){
transform:none;
opacity:1;
}
h1{
   font-weight:400;
   letter-spacing:1px;
}
/* ------- PROJECTS --------- */
.projects{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    height:100vh;
    top:90%;
    margin:0;
    padding:0;

    box-shadow: inset 0 0 100px hsla(0,0%,0%,0.3);
 

}
.proback{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   z-index:-1;
}
.intro{
flex-basis:100%;
text-align: center;


  
}

.intro h1 {
   text-align: center;
   font-size: 3rem;
   font-weight: 600;
   margin: 40px auto;
   color:#fff;
   position:relative;
   font-family: 'Playfair Display', serif;

   width:fit-content;
   margin:auto;
   
}
.intro h1::before{
   display: block;
   content: "";
   width: 60px;
   height: 1px;
   background-color:#fff;
   margin-top: -1.5px;
   position: absolute;
   left: -65px;
   top: 50%;
  
}
.intro h1::after{
   display: block;
   content: "";
   width: 60px;
   height: 1px;
   background-color:#fff;
   margin-top: -1.5px;
   position: absolute;
   right: -65px;
   top: 50%;
  
}
.hilli{
   
 
   width:100%;
   padding:0 15%;
   

}
.heolll{
  width:100%;
  height:100%
}
.bro{
  display:flex;
  gap:10px;
  overflow:hidden;
  height:25rem;
  padding:2%;
  border:solid white;
}
:root {
   --container: 112rem;
   --m-auto: 0 auto;
}


.swiper {
   position: relative;
   width:240px;
   height:320px;
   
   
}



.swiper-slide{
 
   background-size:cover;
   background-position: center;

   border-radius:18px;

}
.swiper-slid{
    position:relative;
   width:100%;
   height:100%;
   flex:1;
  
   transition: flex 0.3s, filter 0.3s;
   overflow:hidden;
   box-shadow: rgba(0,0,0,0.25) 0px 25px 50px -12px;
   border:1px solid #8b9da9;
   background-size:cover;
   background-position: center;

   border-radius:18px;
}


.heading {
   padding-top: 3rem;
   text-align: center;
 }
 /* phone */
.swiper-slid:hover{
   flex:1.5;
   filter:none;

   
}

.desc{
   width:100%;
   height:0;
   background:linear-gradient(rgba(0,0,0,0.6),#ff004f);
   border-radius:20px;
   position:absolute;
   align-items: center;
   left:0;
   bottom:-100%;
   text-align: center;
   justify-content: center;
   display:flex;
   flex-direction: column;
   padding:0 40px;
   font-size:14px;
   transition:height 0.8s;
   
}
.desc h3{
   font-weight:500;
   margin-bottom:20px;
}
.desc a{
   margin-top:20px;
   color:#ff004f;
   text-decoration: none;
   font-size: 18px;
   line-height: 60px;
   background: #fff;
   width:60px;
   height:60px;
   border-radius:50%;
   text-align: center;
} 

.swiper-slid:hover .desc{
   height:300%;
}
.swiper-slide:hover .desc{
   height:300%;
}
.img1{
    background-image:url(images/project2.png)
}
.img2{
    background-image:url(images/FOMO.jpg)
}

.wip{
   padding-top:1rem;
   color:rgb(9, 207, 9);
}
/* -------------- contact --------------------- */
.row{
   display:flex;
   flex-wrap:wrap;
   justify-content: space-between;
   
}
.sub-title{
   font-size:60px;
   font-weight:600;
   color:#fff;
}
.contact-left{
   flex-basis:35%;
}
.contact-right{
   flex-basis:60%;
}

.contact-left p{
   margin-top:30px;
}
.containercontact{
   padding:5% 10%;
}
.contact-left p i{
   color:#f44336;
   margin-right:15px;
   font-size:25px;
}

.social-icons{
   margin-top:30px;

}
.fa-regular.fa-envelope{
   color:#f44336;
   margin-right:15px;
   font-size:25px;
}
.social-icons a{
   text-decoration: none;
   font-size:30px;
   margin-right:15px;
   color:#ababab;
   display:inline-block;
   transition: 0.5s;
}
.social-icons a:hover{
color:#f44336;
transform: translateY(-5px);
}

.btn{
   display: block;
   /* margin:50px auto; */
   width:fit-content;
   border:1px solid #fff;
   padding:14px 50px;
   border-radius: 6px;
   text-decoration: none;
   color:#fff;
   transition: background 0.5s;
}
.btn:hover{
   background: #000;
   border-color: #fff;

}
.btn.btn2{
margin-top:30px;
display: inline-block;
background: #f44336;
border:none;
}
.btn3 {
   background: #000;
   border-color: #fff;
   /* The rest of the properties from .btn to ensure consistency */
   display: block;
   width: fit-content;
   border: 1px solid #fff;
   padding: 14px 50px;
   border-radius: 6px;
   text-decoration: none;
   color: #fff;
   transition: background 0.5s;
 }
.btn3:hover {
   background: #555; /* Change to your desired hover background color */
   cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
}
.email{
   text-decoration: none;
   color:#fff;
}
.contact-right form{
   width:100%;
}
form input, form textarea{
   width:100%;
   padding: 15px;
   border:0;
   outline:none;
   border-radius:6px;
   margin:15px 0;
   background:#000;
   color:#fff;
   font-size:18px;
}
form .btn2{
   padding:14px 60px;
   font-size:18px;
   margin-top:20px;
   cursor: pointer;
}
.copyright{
   text-align: center;
   width: 100%;
   padding:25px 0;
   background: #262626;
   font-weight:300;
   margin-top:20px;
}
#msg{
   
   color:green;
}

/* ------------ css for small screen ---------- */
/* Media Queries */
@media only screen and (max-width:1300px){

   .header-text{
       padding-top:10%;
   }

   .header-text h1{
       font-size:5rem;
   }
   .hello{
       font-size:2rem;
       
   }
   .header-btn-download{
      padding-top: 4rem;
   }
  
   .btn{
       padding:7px 25px;
       font-size: 1rem;
   }
   #about h1{
       font-size:2.5rem;
   }
   .about-text{
       line-height:1.5;
       font-size:1.5rem;
   }

   #Education.tab-contents.active-tab{
       max-width:800px;
   
   }
   .edu h2{
       /* line-height: 1.5; */
       font-size: 1.3rem;
   }
   .date p{
       font-size:0.9rem;
   }
   .edu p{
       font-size:1rem;
   }
   #Achievements.tab-contents.active-tab{
       max-width:950px;
   
   }
   .edu ul li{
       font-size:0.8rem;
   }
   .tab-titles{
       padding-top:40px;
   }
   .top-section h1{
       font-size:2.5rem;
   }
  
}
#checkbox{
   display:none;
   
}
label{
   display:none;
}
@media only screen and (max-width:950px){
   #home::before{
       width:100%;
       height: 100vh;
       background: url(images/header1\(768px\).png) no-repeat  bottom center;
       background-position: bottom left 200px;
       background-size:cover ;
      
    
       
       
   }
   .header-text{
       padding-top:40%;
   }
  
    .btn{
       padding:5px 20px;
       font-size: 1rem;
   }
   nav .fa-solid{
       display:block;
       font-size:2rem;
       z-index: 1;
   }
   nav ul{
       background:#000;
       position:absolute;
       top: 0;
       right:0;
       width:100%;
       height:auto;
       padding-top:50px;
       left:0;
       padding: 100px 40px 21px;
   
       display:none;
     
       
       transform-origin: top center;

   }
   @keyframes growUp {
       0% {
           transform: scaleY(1);
       }
       100% {
           transform: scaleY(0);
       }
   }
   
   nav ul.drop {
       animation: growDown 400ms ease-in-out forwards;
   }
   @keyframes growDown {
       0% {
           transform: scaleY(0)
       }
       80% {
           transform: scaleY(1.1)
       }
       100% {
           transform: scaleY(1)
       }
   }

   nav ul li{
       width:100%;
   }
   .logo{
       z-index: 1;
   }
   .header-text{
       z-index:-1;
   }

   label{
       display:block;
   }
     
     .toggle {
       position: relative;
       width: 40px;
       height: 40px;
       cursor: pointer;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 10px;
       transition-duration: .3s;
     }
     
     .bars {
       width: 100%;
       height: 4px;
       background-color: #fff;
       border-radius: 5px;
       transition-duration: .3s;
     }
     
     #checkbox:checked + .toggle .bars {
       margin-left: 13px;
     }
     
     #checkbox:checked + .toggle #bar2 {
       transform: rotate(135deg);
       margin-left: 0;
       transform-origin: center;
       transition-duration: .3s;
     }
     
     #checkbox:checked + .toggle #bar1 {
       transform: rotate(45deg);
       transition-duration: .3s;
       transform-origin: left center;
     }
     
     #checkbox:checked + .toggle #bar3 {
       transform: rotate(-45deg);
       transition-duration: .3s;
       transform-origin: left center;
     }
     

}
@media only screen and (max-width:800px) and (orientation:landscape){
.header-text{
   padding-top:8%;
   
}
.swiper{
   height:12rem;
}
.intro h1{
   font-size:2rem;
}
#home::before{
   width:100%;
   height: 100vh;
   background: url(images/header1\(768px\ ls\).png) no-repeat  bottom center;
   background-position: bottom left 180px;
   background-size:cover ;
  
  
   
   
}

.header-text h1{
   font-size:3rem;
}
.hello{
   font-size:1.5rem;
   
}


.btn{
   padding:7px 25px;
   font-size: 1rem;
}
#about h1{
   font-size:2rem;
}
.top-section h1 {
   font-size: 2rem;
}
.about-text{
   line-height:1.5;
   font-size:1.3rem;
}
.header-btn{
   padding-top:1rem;
}
.logos{
   padding-top: 1rem;
}
nav ul{
   padding:70px 40px 21px;
}
nav ul li{
   margin: 5px 10px;
}
.tab-titles p{
   font-size:1.4rem;
}
.outer{
transform: scale(0.7);

}
svg{
   transform: scale(0.7);
}

#skills.tab-contents.active-tab{
   gap:0;
   margin:auto;
}
.type{

   padding-top:3rem;
   font-size:1rem;
   
}
#Achievements.tab-contents.active-tab{
   flex-direction: column;
  height:auto;
  margin-top:2rem;
  
}
.edu{
   height:auto;
}
#Education.tab-contents.active-tab{
   margin-top: 2rem;
}
.content h2 {
   font-size: 2rem;
}
.content p {
   
   font-size: 0.9rem;
}
.content ul li {
 
   font-size: 0.7rem;
}
.sub-title {
   font-size: 2rem;
   
   
}
.contact-left,.contact-right{
   flex-basis:100%;
}
.contact-left{
   text-align:center;
}

.bro{
   height:10rem;
}
.desc{
   width:100%;
   height:0;
   background:linear-gradient(rgba(0,0,0,0.6),#ff004f);
   border-radius:20px;
   position:absolute;
   align-items: center;
   left:0;
   bottom:-100%;
   text-align: center;
   justify-content: center;
   display:flex;
   flex-direction: column;
   padding:0.1rem;
   font-size:0.7rem;
   transition:height 0.8s;
   
}
.desc h3{
   font-weight:500;
   margin-bottom:0;
}
.desc a{
   margin-top:5px;
   color:#ff004f;
   text-decoration: none;
   font-size: 15px;
   line-height: 40px;
   background: #fff;
   width:40px;
   height:40px;
   border-radius:50%;
   text-align: center;
} 

}
@media only screen and (max-width:600px){
   .header-text{
       z-index:0;
       padding-top:70%;
       
   }
   nav{
     
      z-index: 2;
      
      
   }
   #yo{
       width:100%;
       max-width:500px;
       margin-left:10%;
   }
   #home::before{
       width:100%;
       height: 100vh;
       background: url(images/header1\(600px\ p\).png) no-repeat  bottom center;
       background-position: bottom left -30px;
       background-size:cover ;
      
     
       
       
   }

   .header-text h1{
       font-size:3rem;
   }
   .hello{
       font-size:1.5rem;
       
   }

   
   .btn{
       padding:7px 25px;
       font-size: 1rem;
   }
   #about h1{
       font-size:2rem;
   }
   .about-text{
       line-height:1.5;
       font-size:1rem;
   }
   .top-section h1 {
       font-size: 2rem;
       line-height:1.5;
   }

   .tab-titles p{
       font-size:1rem;
   }
   .tab-links{
       margin:auto;
   }
   .outer{
       transform: scale(0.6);
      
      
   }
   svg{
       transform: scale(0.6);
     
       
   }
   .type{
       line-height: 1;
       padding-top:4rem;
       font-size:1rem;
      
   }
   .skill{
      width:50%;
       margin:0;
       align-items: center;
           
       
       
   }
   #skills.tab-contents.active-tab {
       max-width: 350px;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       margin:auto;
       align-content: center;
       justify-content: center;
       gap:0;
       width:fit-content;
       height: auto;
       margin-top: 2rem;
       
       
       
       }
   #Achievements.tab-contents.active-tab{
       flex-direction: column;
       height:auto;
       margin-top:2rem;
       
   }
   #Education.tab-contents.active-tab{
       flex-direction: column;
       height:auto;
       margin-top:2rem;
       gap:3rem;
   }
   .edu{
       height:auto;
   }
   #Education.tab-contents.active-tab{
       margin-top: 2rem;
   }
   .content h2 {
       font-size: 2rem;
   }
   .content p {
       
       font-size: 0.9rem;
   }
   .content ul li {
       
       font-size: 0.7rem;
   }
   .sub-title {
       font-size: 2rem;
       
       
   }
   .line{
       left:10%;
       z-index:-1;
   }
   .bead{
       left:10%;
   }
   .section{
       margin:0;
       min-height:100px;
       flex-direction: row-reverse;
       transform: translate(100%);
   }
   .content{
       width:100%;
       padding-left:2rem;
   }
   #exp{
       padding-bottom:8rem;
   }

   .intro h1{
       font-size:2rem;
   }
   .contact-left,.contact-right{
      flex-basis: 100%;
   }
  
}