*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,
body {
    overflow-x: hidden;
    width: 100%;
}
body{
   
background:
linear-gradient(
180deg,
#05010D 0%,
#0A0418 55%,
#120624 100%
);
    transition:
        background 0.5s ease,
        color 0.5s ease;

min-height:100vh;


animation: pageSlide .7s ease;

}
html{
    scroll-behavior: smooth;
}
.page-section {
    min-height: 100vh;
    padding: 100px 8%;
}

/* Light Theme */
/* 
.bg{
    background: linear-gradient(
    180deg,
    #FDFBFF 0%,
    #F3ECFF 55%,
    #E8DDFF 100%
    );
       
} */
 .bg{
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(181,126,220,0.20),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #FDFBFF 0%,
            #F3ECFF 55%,
            #E8DDFF 100%
        );
}
.bg{
    transition:
        background 0.5s ease,
        color 0.5s ease;
}

/* Navbar */
.bg nav{
  background: #967BB6;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 8px 25px rgba(86, 60, 120, 0.15);
    
}

.bg nav h1{
    color:#3B1D78;
}

.bg nav a{
    margin-top: 2vh;
    color:white;
}

.bg .main-heading h4{
   color:#3B1D78 ;
}
.bg .left h2{
    color: #3B1D78;
    text-shadow: 0 0 25px rgba(150,123,182,0.25);
}
.bg .x{
    color: white ;
}

.bg nav a{
    transition: 
        color 0.3s ease,
        transform 0.3s ease;
}

.bg nav a:hover{
    color: #3B3154;
    transform: translateY(-2px);
}

.bg #homeIcon{
    color: #967BB6;
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.bg #homeIcon:hover{
    color: #B57EDC;
    transform: translateY(-5px) scale(1.1);
}
.bg .box{
    background: rgba(255,255,255,0.65);
    border: 1px solid #D8CCFF;
    box-shadow: 0 8px 20px rgba(124,58,237,.10);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.bg .box:hover{
    transform: translateY(-8px);
    /* box-shadow: 0 18px 35px rgba(124,58,237,.18); */
    box-shadow:
77 77 75px #2d1642;

}
.bg .project-box{
    background: rgba(255,255,255,0.65);
    border: 1px solid #D8CCFF;
    box-shadow: 0 8px 20px rgba(124,58,237,.10);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.bg .project-box:hover{
    transform: translateY(-8px);
    /* box-shadow: 0 18px 35px rgba(124,58,237,.18); */
    box-shadow:
77 77 75px #2d1642;

}
/* Hero */
.bg .left h2{
    color:#3B1D78;
}

.bg .left h3{
    color:#6D28D9;
}

.bg .left p{
    color:#7C3AED;
}


/* Buttons */
.bg button{
    background:#7C3AED;
    color:#fff;
}

.bg button:hover{
    background:#6D28D9;
}

/* Icons */
.bg i{
    color:#6D28D9;
}

.bg i:hover{
    color:#8B5CF6;
}

/* Cards */
.bg .card{
    background:#FFFFFF;
    border:1px solid #D8CCFF;
    box-shadow:0 8px 20px rgba(124,58,237,.12);
}

.bg button.live-btn{
   
        height: 6vh;
    width: 49vw;
    font-size: 15px;
    padding: 2px;
    margin-top: 11px;
    margin-left: 30px;
    margin-right: 1vw;
     border-radius: 6px;
background:
#8B5CF6;

color:
#FFFFFF;


}
.bg .project-container h2{
   color: #8B5CF6;
}
.bg .about-container h1{
    color: #8B5CF6;
}
.bg .about-container p{
 color: #8B5CF6;
}
.bg .skill-header h1{
    color: #8B5CF6;
}
.bg .skill-header p{
    color: #8B5CF6;
}
.bg .span1{
  color:#8B5CF6 ;
}
.bg .span2{
  color:#8B5CF6 ;
}
.bg .span3{
  color:#8B5CF6 ;
}
.bg #span{
  color:#8B5CF6 ;
}
/* Inputs */
.bg input,
.bg textarea{
    background:#FFFFFF;
    color:#3B1D78;
    border:1px solid #D8CCFF;
}

.bg input::placeholder,
.bg textarea::placeholder{
    color:#8B7BAA;
}


/* Footer */
.bg footer{
    color:#5F5B75;
    
}

@keyframes pageSlide{

from{

opacity:0;

transform:translateX(50px);

}

to{

opacity:1;

transform:translateX(0);

}




}


/* #mode{
    background-color: #05010D;
    color: white;
} */
nav{
    /* background:
rgba(12, 5, 31, 0.55); */
background-color: transparent;
    backdrop-filter:blur(15px);
    height:90px;
    width: 99vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
 z-index: 999;
  border-bottom: 1px solid rgb(50, 39, 62);
}

#nav-list{
    
    display: flex;
    gap: 65px;
    padding-right: 55px;
    margin-left: 27vw;
    
}
a{ 
    text-decoration:none;
  margin-top: 2vh;
  font-size: 1.2rem;
color:#DCCEFF;

}
a:hover{

color:#B15EFF;

}
h1{
    color:#FFFFFF;
    /* color: #e5e7eb; */
    padding-left: 45px;
    font-size: 50px;
}
.x{
    color:#B15EFF;
    background-color: transparent;
    font-size:45px;
}
.ri-menu-line{
    display: none;
}

.nav2{
      position: fixed;
         top: 82px;
         right: -212px;

    background:
linear-gradient(
180deg,
#05010D 0%,
#0A0418 55%,
#120624 100%
);
    height: 95vh;
    z-index:99999;
pointer-events:auto;
    display: none;
   
}
.side-bar{
    text-decoration: none;
    text-align: center;
    padding-bottom: 25px;
    padding-right: 9px;
    color:white;
   right: 0;
    height: 95vh;

    
}

.side-bar:hover{

color:#B15EFF;
}

.container{
      
      display: grid;
      grid-template-columns: 1fr 1fr; 
    align-items: center;
}

.left{

    width: 650px;
    margin-top: 18vh;
    margin-right: 0px;
    margin-left: 100px;
   margin-bottom: 10vh;
}
h2{ 
    color:#FFFFFF;
    font-size: 55px;
    font-weight: 800;
}
h3{
    color:#B15EFF;
    font-size: 39px;
}
p{
    color:#B8A6D9;
    font-size: 18px;
}

.right video {
    width: 100%;
    max-width: 500px;
    height: 700px;
   margin-left: 4vw;
    object-fit: contain;
    object-position: center;
    margin-top: 9vh;
    border: none;
    outline: none;
  
    -webkit-mask-image:
        linear-gradient(to right,
            transparent 0%,
            black 12%,
            black 88%,
            transparent 100%
        ),
        linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%
        );

    -webkit-mask-composite: intersect;
    mask-image:
        linear-gradient(to right,
            transparent 0%,
            black 12%,
            black 88%,
            transparent 100%
        ),
        linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%
        );

    mask-composite: intersect;

   filter: drop-shadow(0 0 50px rgba(177, 94, 255, .35));
  
}
#homeIcon{
   color:#C56DFF;
    padding: 5px;
    font-size: 35px; 
    position: relative;
    top: 2vh;
}

#btn{
    height: 8vh;
    border:none;
width: 10vw;
border-radius:8px;
 font-size: 1rem;
color:white;

background:
linear-gradient(
90deg,
#6F2BFF,
#B15EFF
);

box-shadow:
0 0 40px
rgba(177,94,255,.35);
    padding: 9px;
    margin-left: 0.2vw;
    margin-top: 7vh;
}
#homeIcon {
    color: #C56DFF;
    padding: 5px;
    font-size: 35px;
    position: relative;
    top: 2vh;
    transition: all 0.3s ease;
}

#homeIcon:hover {
    transform: translateY(-10px) scale(1.1);
    color: #D99AFF;
    filter: drop-shadow(0 0 10px rgba(197, 109, 255, 0.6));
}
#btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(177, 94, 255, 0.6);
}
.container{

position:relative;

}

.container::before{

content:"";

position:absolute;

right:120px;

top:120px;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(177,94,255,.35),

rgba(139,61,255,.18),

transparent

);

filter:blur(110px);

z-index:-1;

}

#Btn {
    background: transparent;
    border: none;
    padding: 0;
    margin-right: 5vw;
    margin-top: 7vh;
}


.switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.8em;
    height: 2em;
    border-radius: 30px;
}


.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


.slider {
    height: 5vh;
    width: 5vw;
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   inset: 0;
    background-color: #1b102d;
    /* border: 1px solid #9b4dff; */
    border-radius: 10px;

    overflow: hidden;
    transition: 0.4s ease;

    box-shadow: 0 0 8px rgba(177, 94, 255, 0.35);
}



.slider:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;

    border-radius: 20px;

    left: 0.5em;
    bottom: 0.5em;
     transform: scale(1.1);
    transition: 0.4s;
    transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);

    /* Original crescent moon */
    box-shadow: inset 8px -4px 0px 0px #fff;
}


.switch input:checked + .slider {
    background-color: #B15EFF;
    border-color: #B15EFF;

    box-shadow: 0 0 12px rgba(177, 94, 255, 0.6);
}


.switch input:checked + .slider:before {
    transform: translateX(1.8em) scale(1.1);
    box-shadow: inset 15px -4px 0px 15px #ffcf48;
}


.star {
    background-color: #fff;

    border-radius: 50%;

    position: absolute;

    width: 5px;
    height: 5px;

    transition: all 0.4s;
}

.star_1 {
    left: 2.5em;
    top: 0.5em;
}

.star_2 {
    left: 2.2em;
    top: 1.2em;
}

.star_3 {
    left: 3em;
    top: 0.9em;
}


.switch input:checked ~ .slider .star {
    opacity: 0;
}
.cloud {
    width: 3.5em;

    position: absolute;

    bottom: -1.4em;
    left: -1.1em;

    opacity: 0;

    transition: all 0.4s;
}

.switch input:checked ~ .slider .cloud {
    opacity: 1;
}

    
  /* // About CSS  */
.about-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 60px;
    text-align: center;
    
}
.about-container h1{
    font-size: 50px;
    font-weight: 900;
    color: #FFFFFF;
       margin-left: 0vw;
       
    
}
.about-container h2{
     color:#B15EFF;
    font-size: 30px;
       margin-left: 3vw;
}
.about-container p{
    margin-left: 29px;
    margin-right: 29px;
   /* margin: 15px 15px 15px 15px; */
    font-size: 20px;
    color:#B8A6D9;
    text-align: center;
    
}
.about-container >div{
    position: relative;
    bottom: 35vh;
     margin-left: 35vw;
     right: 0vw;

     
     
}
.about-image img{

    width: 36vw;
    height: auto;
      margin-left: 0%;
      margin-right: 20vw;
     position: relative;
     top: 22vh;
    filter:
drop-shadow(
0 0 80px
rgba(177,94,255,.45));

}


/* //Skill CSS // */
.skill-header{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 10px;
}
.skill-header h1{
    margin-top: 30px;
    font-size: 45px;
     margin-bottom: 3vh;
     position: relative;
     right: 3vw;
}
.skill-header h2{
   color: #B15EFF;

    /* color:#FFFFFF; */
    font-size: 45px;
    font-weight: 600;
    margin-top: 19px;
   
}
.skill-header p{
    color: #B8A6D9;
     max-width: 900px;
    font-size: 18px;
    /* margin-left: 25px;
    margin-right: 25px; */
}
.skill-container1{
    max-width:80vw;
    width:500%;
    height: 200px;
    margin-top: 7VH;
    margin-left: 6VW;
    display: flex;
    flex-wrap: nowrap;
flex-direction: row;
text-align: center;
    justify-content:space-between;
    align-items:center;

}

.circle{
    --p: 0%;
    color: white;
    height: 130px;
    width: 130px;
    border-radius: 50%;
   padding-top: 35px;
   background: #140B26;
   border: 2px solid #B15EFF;
   box-shadow:
0 0 30px
rgba(177,94,255,.25);
background:conic-gradient(
     #B15EFF var(--p), #E8DFFF 0);
    display:flex;
    align-items:center;
    justify-content:center;
  flex-direction: column;
 /* #3A2455 */
}
.circle::before{
    content:"";
    position:absolute;
    width:113px;
    height:115px;
    border-radius:50%;
    background:white;
      margin-bottom: 5.5vh;
}
@property --p{
  syntax:"<percentage>";
  initial-value:0%;
  inherits:false;
}
.circle{
 
    --p: 0%;
}
@keyframes fill{
  from{
    --p: 0%;
  }
  to{
    --p:var(--target);
  }
}
#skill.active .circle {
    animation: fill 2s ease forwards;
}
.circle i,
.circle span{
    position:relative;
    z-index:1;
    bottom: 1vh;
}
.circle span{
      position:relative;
    bottom:2vh;
    background-color: transparent;
    border: none;
    color: #B15EFF;
    
}

.circle{
  transition: 0.3s ease;
}

.circle:hover{
    transition: transform 0.3s ease;
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 0 25px #C47CFF;
}
.skill-container1 i {
 font-size: 45px;
color:#C47CFF;

}
.skill-container1:hover i{
    transform: scale(1.15) rotate(5deg);
    transition: 0.3s ease;
}

.span1{
    /* font-size:30px ;
    color: white;
    position: relative;
    top: 20vh;
    right: 7vw;
    height: 5vh; */
     font-size:25px;
    color:white;
    position:relative;
    top:15vh;
    right:auto;
    width:130px;
    margin-left:-190px;
    text-align:center;
    background-color: transparent;
}
.span2{
     /* font-size:30px ;
    color: white;
    position: relative;
    top: 20vh;
    right: 6vw;
     height: 5vh; */
      font-size:25px;
    color:white;
    position:relative;
    top:15vh;
    right:auto;
    width:130px;
    margin-left:-190px;
    text-align:center;
    background-color: transparent;
}
.span3{
    /* font-size:30px ;
    color: white;
    position: relative;
    top: 20vh;
     height: 5vh;
    right: 8vw; */
     font-size:25px;
    color:white;
    position:relative;
    top:15vh;
    right:auto;
    width:130px;
    margin-left:-190px;
    text-align:center;
    background-color: transparent;
}
#span{
    display: block;
    font-size:25px ;
    color: white;
   position: relative;
   top:15vh;
    right: 11vw;
     height: 5vh;
     background-color: transparent;

}
.circle:hover + .span1,
.circle:hover + .span2,
.circle:hover + .span3,
.circle:hover + #span{
    color: #C47CFF;
    transition: 0.3s ease;
}

/* .skill-container2{
  
    max-width:700px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin:40px auto;
} */

/* .skill-container2 h2 {
    
color:#B15EFF;
font-size:45px;
font-weight:600;
margin-top:25px;
text-align:center;

}
.box{

display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
gap:12px;

width:250px;
height:170px;

margin:10px;
padding:20px;

} */
/* .skill-container1 i {
   margin-top: 15px;
     font-size: 75px;
    color: #C47CFF;
   
}
span{
    
font-size:22px;
color:white;
margin-top:10px;
} */
 



/* ================= PROJECT ONLY ================= */

#project {
    width: 100%;
    padding: 80px 5%;
    box-sizing: border-box;
}

#project .main-heading {
    color: #FFFFFF;
    text-align: center;
    margin: 0 0 10px;
    font-size: 40px;
}

#project > h4 {
    color: #D1C4E9;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 45px;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
}


/* 3 BOXES IN ONE ROW */

#project .project-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 50px;
}


/* BOX */
#project .box,
#project .project-box {
    width: 290px;
    height: 380px;
    min-height: 380px;

    background: #141026;
    border: 1px solid #6A2EEA;
    border-radius: 10px;

    box-shadow: 0 0 30px rgba(139,92,246,.30);

    transition: .3s;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#project .box:hover,
#project .project-box:hover {
    box-shadow: 0 0 35px #C084FC;
    transform: translateY(-5px);
}


/* IMAGE */

#project .box img,
#project .project-box img {
    width: 95%;
    height: 150px;
    object-fit: cover;
    display: block;
    margin-left: 0.5vw;
    margin-top: 1vh;
}


/* TITLE */

#project .project-title {
    padding: 15px 15px 5px;
    margin: 0;

    font-size: 20px;
    color: #FFFFFF;
}


/* DESCRIPTION */

#project .box p,
#project .project-box p {
    font-size: 15px;
    padding: 0 15px;
    /* margin: 5px 0 10px; */

    color: #D1C4E9;
    line-height: 1.5;
}


/* TAGS */

#project .tags,
#project .tags1 {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    
   margin-bottom: 8vh;
   margin-left: 5vw;
    position: static;
}

#project .tags span,
#project .tags1 span {
    font-size: 12px;

    margin: 0;
    padding: 5px 8px;

    color: #E9DDFF;
    background: #2B174D;
    border-radius: 4px;
    
}


/* BUTTONS */

#project .live-btn,
#project .Github-btn,
#project .live-btn1,
#project .Github-btn1 {
    display: block;

    width: calc(100% - 30px);
    height: 38px;

    margin-left: 15px;
    margin-right: 15px;
 
    position: static;

    font-size: 15px;
    padding: 5px;

    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
}


/* LIVE DEMO - TOP */

#project .live-btn,
#project .live-btn1 {
    margin-top: -38px;
    display: flex;
  
    margin-bottom:3px;
}

#project .Github-btn,
#project .Github-btn1 {
    margin-top: 0;
    margin-bottom: 10px;
}

/* LINKS */

#project .live-btn a,
#project .Github-btn a,
#project .live-btn1 a,
#project .Github-btn1 a {
    display: block;
    width: 100%;
   margin-top: 0.5vh;
    color: inherit;
    text-decoration: none;
}


/* HOVER */

#project .live-btn:hover,
#project .Github-btn:hover,
#project .live-btn1:hover,
#project .Github-btn1:hover {
    border: 1px solid #F6F4FC;
    background: #A855F7;
}


















/* contact-container */
.contact-container{
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 90px;
   margin-left: 100px;
   
}
.content-left{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    
}
.content-tittle{
    color: #C89BFF;
    font-size: 25px;
    font-weight: 400;
     /* color: rgb(172, 82, 96); */
    margin-bottom: 9px;
}
.content-tittle h1{
    color: #C89BFF;
    font-size: 45px;
    font-weight: 800;
    
   
}
.content-tittle hr{
      background:
    linear-gradient(
    90deg,
    #B15EFF,
    #7A2BFF
    );
     /* background-color: rgba(158, 98, 108, 0.979); */
    height: 4px;
    border-radius: 6px;
    border: none;
    margin-top: 10px;
}
.content-input{
    color: #140B26;
    padding: 10px;
    border-radius: 15px;
    border: 1px solid #7A2BFF ;
    width: 250px;
    height: 35px;   
     background: #140B26;

    color: white;

    box-shadow:
    0 0 25px rgba(177,94,255,.15);

    transition: .3s;
}
.content-msg{
     padding: 10px;
    border-radius: 15px;
     border: 1px solid #7A2BFF ;
    width: 250px;
    height: 130px;
    /* color: rgb(54, 51, 51); */
     background: #140B26;

    color: white;

    box-shadow:
    0 0 25px rgba(177,94,255,.15);

    transition: .3s;

}
.content-msg:focus{
    outline: none;
 /* border: 2px solid rgb(184, 100, 114); */
  /* color: #A69BB8; */
   outline: none;

    border: 2px solid #B15EFF;

    box-shadow:
    0 0 30px rgba(177,94,255,.45);



}
.content-input:focus{
     outline: none;

    border: 2px solid #B15EFF;

    box-shadow:
    0 0 30px rgba(177,94,255,.45);

}

.content-msg::placeholder{
    font-size: 15px;
     color: #A69BB8;
}

.content-input::placeholder{
    /* color: rgb(54, 51, 51); */
     color: #A69BB8;
}
button{
    color:#ffff;
    margin-top: 15px;
    /* margin-left: 25px; */
    border: none;
    padding: 9px;
    width: 100px;
    border-radius: 8px;
    /* background-color: rgba(201, 95, 110, 0.712); */
    background:
    linear-gradient(
    90deg,
    #8E3EFF,
    #B15EFF
    );

    transition: .3s;

}
/* button:hover{
     transform: translateY(-4px);

    box-shadow:
    0 0 25px rgba(177,94,255,.55);
} */

img{
    width: 580px;
    height: 400px;
}
.content-left button {
    transition: all 0.3s ease;
}

.content-left button:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 25px rgba(177, 94, 255, 0.55);
    background: linear-gradient(
        90deg,
        #A855F7,
        #C47CFF
    );
}

/* ===== MOBILE ===== */

@media (max-width:600px){




.contact-container{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

margin:40px 15px;

}

.content-left{

margin:0;

width:100%;

align-items:center;

}

.content-input,
.content-msg{

width:90%;

max-width:320px;

}


.content-tittle{

text-align:center;

}

button{

width:90%;

max-width:320px;

}

}

/* ===== TABLET ===== */
   @media (max-width: 1024px) {

    /* NAVBAR */
    nav {
        width: 100%;
        height: 80px;
        padding: 0 25px;
    }

    nav h1 {
        font-size: 40px;
        padding-left: 10px;
    }

    #nav-list {
        gap: 30px;
        padding-right: 15px;
    }

    #nav-list a {
        font-size: 1rem;
    }


    /* HOME */

    .container {
        width: 100%;
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 20px;
        padding: 90px 5% 40px;
        margin: 0;
    }

    .left {
        width: 100%;
        margin: 0;
        position: static;
        text-align: left;
    }

    .left h2 {
        font-size: 42px;
        line-height: 1.15;
    }

    .left h3 {
        font-size: 30px;
        line-height: 1.2;
    }

    .left p {
        font-size: 16px;
        line-height: 1.6;
    }

    .right {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .right video {
        width: 100%;
        max-width: 380px;
        height: 470px;
        margin: 0;
        object-fit: contain;
    }

    #btn {
        width: 150px;
        height: 55px;
        margin-top: 35px;
    }


    /* ABOUT */

    #about {
        min-height: auto;
        padding: 100px 5%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }

    .about-image {
        width: 45%;
    }

    .about-image img {
        width: 100%;
        max-width: 450px;
        height: auto;
        margin: 0;
        position: static;
    }

    .about-container {
        width: 55%;
        margin: 0;
        padding: 0;
        display: block;
        text-align: center;
    }

    .about-container > div {
        position: static;
        width: 100%;
        margin: 0;
    }

    .about-container h1 {
        font-size: 42px;
        padding: 0;
        margin: 0 0 10px;
    }

    .about-container h2 {
        font-size: 28px;
        margin: 0 0 20px;
    }

    .about-container p {
        font-size: 16px;
        line-height: 1.7;
        margin: 0;
    }


    /* SKILLS */

   
#skill {
    width: 100%;
    min-height: 100vh;
    padding: 100px 5%;
    box-sizing: border-box;
}

#skill .skill-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}

#skill .skill-header h1 {
    font-size: 40px;
    margin: 0 0 15px;
    padding: 0;
    right: auto;
}

#skill .skill-header p {
    width: 100%;
    max-width: 750px;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto;
    text-align: center;
}


/* SKILL CIRCLES */

#skill .skill-container1 {
    width: 100%;
    max-width: 850px;
    height: auto;

    margin: 60px auto 0;
    padding: 0;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 40px;
    row-gap: 70px;

    justify-items: center;
    align-items: start;
}


/* CIRCLE */

#skill .circle {
    width: 125px;
    height: 125px;

    margin: 0;
    padding: 0;

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    border-radius: 50%;
}


/* INNER CIRCLE */

#skill .circle::before {
    width: 108px;
    height: 109px;

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    margin: 0;
}


/* ICON */

#skill .circle i {
    position: relative;
    z-index: 2;

    font-size: 38px;

    bottom: 2px;
}


/* PERCENT */

#skill .circle .percent {
    position: relative;
    z-index: 2;

    font-size: 15px;

    bottom: 0;
}


/* SKILL NAME */

#skill .skill-container1 > .span1,
#skill .skill-container1 > .span2,
#skill .skill-container1 > .span3,
#skill .skill-container1 > #span {

    position: absolute;

    width: 130px;

    margin: 0;

    font-size: 18px;

    text-align: center;

    color: #FFFFFF;

    background: transparent;
}


/* HTML */

#skill .skill-container1 > .circle:nth-child(1)::after {
    content: "HTML";

    position: absolute;

    top: 140px;
    left: 50%;

    transform: translateX(-50%);

    width: 130px;

    font-size: 18px;
    color: #FFFFFF;

    text-align: center;
}


/* CSS */

#skill .skill-container1 > .circle:nth-child(3)::after {
    content: "CSS";

    position: absolute;

    top: 140px;
    left: 50%;

    transform: translateX(-50%);

    width: 130px;

    font-size: 18px;
    color: #FFFFFF;

    text-align: center;
}


/* JAVASCRIPT */

#skill .skill-container1 > .circle:nth-child(5)::after {
    content: "JavaScript";

    position: absolute;

    top: 140px;
    left: 50%;

    transform: translateX(-50%);

    width: 150px;

    font-size: 18px;
    color: #FFFFFF;

    text-align: center;
}


/* GIT */

#skill .skill-container1 > .circle:nth-child(7)::after {
    content: "Git";

    position: absolute;

    top: 140px;
    left: 50%;

    transform: translateX(-50%);

    width: 130px;

    font-size: 18px;
    color: #FFFFFF;

    text-align: center;
}


/* GITHUB */

#skill .skill-container1 > .circle:nth-child(9)::after {
    content: "GitHub";

    position: absolute;

    top: 140px;
    left: 50%;

    transform: translateX(-50%);

    width: 130px;

    font-size: 18px;
    color: #FFFFFF;

    text-align: center;
}


/* RESPONSIVE */

#skill .skill-container1 > .circle:nth-child(11)::after {
    content: "Responsive";

    position: absolute;

    top: 140px;
    left: 50%;

    transform: translateX(-50%);

    width: 150px;

    font-size: 18px;
    color: #FFFFFF;

    text-align: center;
}


/* ORIGINAL SPANS HIDE */

#skill .skill-container1 > .span1,
#skill .skill-container1 > .span2,
#skill .skill-container1 > .span3,
#skill .skill-container1 > #span {
    display: none;
}
     /* PROJECTS */

    #project {
        padding-left: 5%;
        padding-right: 5%;
    }

    .main-heading {
        text-align: center;
        margin: 0;
    }

    #project h4 {
        color: #AFA5BD;
        text-align: center;
        padding: 20px;
        line-height: 1.6;
    }

    .project-container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(250px, 1fr));
        justify-content: center;
        gap: 30px;
        margin-top: 30px;
    }

    .box,
    .project-box {
        width: 100%;
        max-width: 330px;
        min-height: 390px;
        height: auto;
        margin: auto;
        padding-bottom: 20px;
    }

    .project-container img {
        width: calc(100% - 20px);
        height: 160px;
        margin: 10px;
        object-fit: cover;
    }

    .project-title {
        font-size: 20px;
        text-align: center;
        padding: 10px;
    }

    .tags,
    .tags1 {
        position: static;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 15px;
    }

    .live-btn,
    .Github-btn,
    .live-btn1,
    .Github-btn1 {
        position: static;
        width: 42%;
        height: 45px;
        margin: 8px 2%;
    }


    /* CONTACT */

    .contact-container {
        width: 100%;
        margin: 80px 0 0;
        padding: 0 5%;
        justify-content: center;
    }

    .content-right img {
        width: 100%;
        max-width: 450px;
        height: auto;
    }
}



/* ================= MOBILE ================= */

@media (max-width: 480px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    nav {
        width: 100%;
        height: 75px;
        padding: 0 20px;
        
    }

    nav h1 {
        font-size: 32px;
        padding-left: 0;
    }

    #nav-list {
        display: none !important;
    }
      #Btn {
      display: block !important;
        width: auto;
        height: auto;
       
        padding: 0;
                margin-right: 66px;
        margin-top: 4vh;
    }
    #humBuger {
        display: block !important;
        color: #FFFFFF;
        font-size: 30px;
        cursor: pointer;
    }

    .nav2 {
        display: flex;
        position: fixed;
        top: 75px;
        right: -250px;
        width: 220px;
        height: calc(100vh - 75px);

        flex-direction: column;
        align-items: center;
        gap: 25px;

        padding-top: 30px;

        background: linear-gradient(
            180deg,
            #05010D 0%,
            #0A0418 55%,
            #120624 100%
        );

        border-left: 1px solid rgb(50, 39, 62);
        z-index: 99999;

        transition: right 0.3s ease;
    }

    .nav2.side-bar {
        right: 0;
    }

    .nav2 a {
        color: white;
        text-decoration: none;
        font-size: 18px;
    }
     
      #Btn {
        display: block;
        margin-left: auto;
        margin-right: 15px;
    }

    .switch {
        width: 3.2em;
        height: 1.7em;
    }

    .slider {
        width: 52px;
        height: 32px;
    }

    .slider:before {
        height: 1.5rem;
        width: 1.5rem;
        left: 0.3em;
        bottom: 0.25em;
    }

    .switch input:checked + .slider:before {
        transform: translateX(1.45em) scale(1.05);
    }

    .star_1 {
        left: 2em;
        top: 0.35em;
    }

    .star_2 {
        left: 1.8em;
        top: 0.9em;
    }

    .star_3 {
        left: 2.5em;
        top: 0.7em;
    }


    /* HOME */

    .container {
        width: 100%;
        min-height: auto;

        display: flex;
        flex-direction: column;

        padding: 100px 20px 60px;
        margin: 0;
    }

    .left {
        width: 100%;
        margin: 0;
        position: static;
        text-align: center;

        order: 2;
    }

    .left h2 {
        font-size: 34px;
        line-height: 1.25;
    }

    .left h3 {
        font-size: 24px;
        line-height: 1.3;
    }

    .left p {
        font-size: 15px;
        line-height: 1.7;
    }

    #homeIcon {
        font-size: 30px;
        top: 0;
    }

    #btn {
        width: 145px;
        height: 50px;
        margin: 30px auto 0;
    }


    /* VIDEO */
      .right {
        width: 100%;
        height: 100vh;
        
    }

    .right video {
        width: 150%;
        height: 120%;
        object-fit: fill;
        max-width: none;
    }


    .container::before {
        width: 250px;
        height: 250px;

        right: 50%;
        top: 30%;

        transform: translate(50%, -50%);
    }
 

   
    /* =================================================
       ABOUT
       ================================================= */

    #about {
        width: 100%;
        min-height: auto;

        padding: 90px 20px 70px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        overflow: hidden;
    }

    #about .about-image {
        display: none;
    }

    #about .about-container {
        width: 100%;
        max-width: 350px;

        height: auto;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    #about .about-container > div {
        width: 100%;

        position: static;

        margin: 0;
        padding: 0;

        right: auto;
        left: auto;
        bottom: auto;

        text-align: center;
    }

    #about .about-container h1 {
        width: 100%;

        font-size: 34px;
        line-height: 1.2;

        margin: 0 0 12px;
        padding: 0;

        text-align: center;
    }

    #about .about-container h2 {
        width: 100%;

        font-size: 23px;
        line-height: 1.3;

        margin: 0 0 25px;
        padding: 0;

        text-align: center;
    }

    #about .about-container p {
        width: 100%;
        max-width: 340px;

        margin: 0 auto;
        padding: 0;

        font-size: 14px;
        line-height: 1.65;

        text-align: center;
    }


    /* =================================================
       SKILLS
       ================================================= */

    #skill {
        width: 100%;
        min-height: auto;

        padding: 90px 20px 80px;

        box-sizing: border-box;
        overflow: hidden;
    }

    #skill .skill-header {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 8px;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    #skill .skill-header h1 {
        width: 100%;

        font-size: 32px;

        margin: 0 0 10px;
        padding: 0;

        right: auto;

        text-align: center;
    }

    #skill .skill-header p {
        width: 100%;
        max-width: 340px;

        font-size: 14px;
        line-height: 1.6;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    #skill .skill-container1 {
        width: 100%;
        max-width: 350px;

        height: auto;

        margin: 55px auto 0;
        padding: 0;

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        column-gap: 25px;
        row-gap: 55px;

        justify-items: center;
        align-items: start;

        box-sizing: border-box;
    }

    #skill .skill-container1 .circle {
        width: 105px;
        height: 105px;

        margin: 0;
        padding: 0;

        position: relative;

        display: flex;
        justify-content: center;
        align-items: center;

        flex-direction: column;

        border-radius: 50%;
    }

    #skill .skill-container1 .circle::before {
        width: 90px;
        height: 91px;

        margin: 0;

        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }

    #skill .skill-container1 .circle i {
        position: relative;
        z-index: 2;

        font-size: 32px;

        margin: 0;
        bottom: 2px;
    }

    #skill .skill-container1 .circle .percent {
        position: relative;
        z-index: 2;

        font-size: 11px;

        margin: 0;
        bottom: 0;
    }

    /* Original skill-name spans hide */
    #skill .skill-container1 > .span1,
    #skill .skill-container1 > .span2,
    #skill .skill-container1 > .span3,
    #skill .skill-container1 > #span {
        display: none;
    }

    /* Skill names */
    #skill .skill-container1 .circle::after {
        position: absolute;

        top: 115px;
        left: 50%;
    margin-top: -4vh;
        transform: translateX(-50%);

        width: 140px;

        font-size: 16px;
        line-height: 1.3;

        color: #FFFFFF;

        text-align: center;

        white-space: nowrap;
    }

    #skill .skill-container1 .circle:nth-child(1)::after {
        content: "HTML";
    }

    #skill .skill-container1 .circle:nth-child(3)::after {
        content: "CSS";
    }

    #skill .skill-container1 .circle:nth-child(5)::after {
        content: "JavaScript";
    }

    #skill .skill-container1 .circle:nth-child(7)::after {
        content: "Git";
    }

    #skill .skill-container1 .circle:nth-child(9)::after {
        content: "GitHub";
    }

    #skill .skill-container1 .circle:nth-child(11)::after {
        content: "Responsive";
    }


    /* =================================================
       PROJECTS
       ================================================= */

    #project {
        width: 100%;
        min-height: auto;

        padding: 90px 15px 70px;

        box-sizing: border-box;
        overflow: hidden;
    }

    #project .main-heading {
        width: 100%;

        margin: 0 0 10px;
        padding: 0;

        font-size: 30px;
        line-height: 1.3;

        text-align: center;
    }

    #project > h4 {
        width: 100%;
        max-width: 340px;

        margin: 0 auto 30px;
        padding: 0;

        font-size: 14px;
        line-height: 1.6;

        text-align: center;
    }

    #project .project-container {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 25px;

        margin: 0;
        padding: 0;
    }

    #project .project-container .box,
    #project .project-container .project-box {
        width: 100%;
        max-width: 320px;
        height: 406px;

        min-height: 380px;

        margin: 0 auto;
        padding: 0;

        box-sizing: border-box;

        overflow: hidden;
    }

    #project .project-container .box img,
    #project .project-container .project-box img {
        width: calc(100% - 20px);
        height: 150px;

        margin: 10px;

        object-fit: cover;
    }

    #project .project-container .project-title {
        font-size: 20px;

        margin: 0;
        padding: 10px 15px 5px;

        text-align: center;
    }

    #project .project-container .box p,
    #project .project-container .project-box p {
        font-size: 14px;
        line-height: 1.5;

        margin: 5px 0 10px;
        padding: 0 15px;

        text-align: center;
    }

    #project .project-container .tags,
    #project .project-container .tags1 {
        position: static;

        display: flex;
        justify-content: center;
        align-items: center;

        flex-wrap: wrap;

        gap: 5px;

        margin: 10px 15px 12px;
    }

    #project .project-container .tags span,
    #project .project-container .tags1 span {
        font-size: 12px;

        margin: 0;
        padding: 5px 8px;
    }

    #project .project-container .live-btn,
    #project .project-container .Github-btn,
    #project .project-container .live-btn1,
    #project .project-container .Github-btn1 {
        position: static;

        display: block;

        width: calc(100% - 30px);
        height: 38px;

        margin: 6px 15px;

        box-sizing: border-box;
    }

    #project .project-container .live-btn,
    #project .project-container .live-btn1 {
        margin-top: 5px;
        margin-bottom: 6px;
    }

    #project .project-container .Github-btn,
    #project .project-container .Github-btn1 {
        margin-top: 0;
        margin-bottom: 10px;
    }


    /* =================================================
       CONTACT
       ================================================= */

    #contact {
        width: 100%;
        min-height: auto;

        padding: 90px 20px 70px;

        box-sizing: border-box;
        overflow: hidden;
    }

    #contact .contact-container {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        margin: 0;
        padding: 0;
    }

    #contact .content-left {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: center;

        margin: 0;
        padding: 0;
    }

    #contact .content-tittle {
        width: 100%;

        margin: 0 0 15px;

        text-align: center;
    }

    #contact .content-tittle h1 {
        font-size: 34px;

        margin: 0;
        padding: 0;

        text-align: center;
    }

    #contact .content-tittle hr {
        width: 100%;
        max-width: 250px;

        margin: 10px auto 0;
    }

    #contact .content-input,
    #contact .content-msg {
        width: 100%;
        max-width: 320px;

        box-sizing: border-box;
    }

    #contact .content-left > button {
        width: 100%;
        max-width: 320px;

        margin: 15px 0 0;
    }

    #contact .content-right {
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;

        margin: 30px 0 0;
        padding: 0;
    }

    #contact .content-right img {
        width: 100%;
        max-width: 320px;
        height: auto;

        margin: 0;
    }

    

}