@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    --primary-color: #01eeff;         
    
    --secondary-color: #313743;       
    --neutral-color: #bcbcbc;          
    --highlight-color: #4682B4;       
    --text-color: #708090;            
    --bg-color: #1f232e;      
    
    --font: "Poppins", sans-serif;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
    color: white;
}

body {
    background-color: var(--bg-color);
    
}

.loader {
    background:  var(--bg-color);
    height:  100vh;
    width:  100vw;
    position:  fixed;
    top:  0;
    left:  0;
    z-index:  99;
    display: flex;
    justify-content:  center;
    align-items:  center;
}


.navbar-toggler {
    border: none;
}

.navbar-toggler:hover,
.navbar-toggler:focus,
#btn-close:hover,
#btn-close:focus {
    box-shadow: none;
}

#btn-close {
    color: white;
    position:  absolute;
    right:  5%;
    top:  5%;
    color:  var(--neutral-color);
}

#btn-close i{
    color:  white;
}

.navbar {
    transition: box-shadow 0.3s;
    background:  var(--bg-color);
}

.navbar.shadow {
    box-shadow: 0 4px 2px -2px gray;
}

.offcanvas-top{
    background: var(--secondary-color);
}


.navbar-a  {
    color: var(--primary-color);
    font-size:  1.5vw;
}

.nav_ul li,
.nav_ul li a{
    position:  relative;    
    color:  var(--neutral-color);
    font-size:  1vw;
    
}

.nav_ul li::before {
    position:  absolute;
    content: "";
    bottom: 0;
    left: 0;
    transform: translateX(50%);
    transition:  .2s;
    background: var(--primary-color);
    height:  1px;
    width:  0%;
    border-radius: 50px;
}

.nav_ul li:hover a{
    color:  white;
}


.nav_ul li:hover::before  {
    width:  50%;
}

.nav_ul li.active a {
    color: white;
}

.nav_ul li.active::before {
    width: 50%;
}


.nav-link {
    padding: 10px 20px;
    text-align: center;
}

.navbar-nav {
    flex-direction: column;
    align-items: center;
}

section {
    padding:  3% 0;
    position:  relative;
}


main{   
    margin-top:  8vh;
}

p{
    font-weight: var(--font-normal);
}

.typed-cursor{
    color:  var(--primary-color);
}

#home div {
    align-items: center;
    justify-content:  center;
    /* min-height:  50vh; */
    
}

.pic-container {
    aspect-ratio:3/4;    
    object-fit:  cover;       

}

.pic{
    height: 100%;
    width: 100%;
}


.home-data {
    width:  50%;
    display: flex;
    justify-content:  center;
    align-items: center;
    flex-direction: column;  
    height:  auto;
    
    
}

.home-data h5{
    font-size:  2.5vw;
    color: #ededed;
    text-align:  left;
    width:  100%;
    
}

.home-data h3 {
    font-size: 4.5vw;
    font-weight: 550;    
    text-align:  left;
    width: 100%;
    color: #ededed;
}

.home-data h3 span{
    font-size:  4.5vw;
}

#element  {
    color:  var(--primary-color);
    
}

.home-data p {
    font-size:  1.5vw;
    color: var(--neutral-color);
    font-weight:  400;
    text-align:  left;
}

.social-links {
    /* background:  red; */
    width:  100%;
    
}

.social-links li {
    display: flex;
    justify-content: center;
    align-items:  center;
    border-radius: 50%;
    border:  1px solid var(--primary-color);
    cursor: pointer;
    transition:  .2s ease;
    padding:  2%;
    width:  100%;
    height:  3vw;
    width:  3vw;
   
}

.social-links li a i {
    color:  var(--primary-color);
    font-size:  1vw;
}

.social-links li:hover {
    background: var(--primary-color);
    box-shadow:  0px 3px 15px var(--primary-color);
    
}

.social-links li:hover a i {
    color: #fff;
}



.heading {
    color:  var(--primary-color);
    font-size:  2.5vw;
    letter-spacing:  1px;
    font-weight:  450;
}

.para {
    width:  80%;
    margin: auto;
    color: var(--neutral-color );
    font-weight: 400;
    font-size: 1.5vw;
    text-align:  center;
}


.exp-parent-box {
    width: 80%;
    margin: 0 auto;
    padding: 0px;
    justify-content:  center;
}

/* Row */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 5px; /* Adjust for horizontal and vertical spacing */
}

/* Column */
.col {
    margin: 5px; /* Creates horizontal and vertical gaps */
    box-sizing: border-box;
}

/* Box Styling */
.exp-box {
    
    border-radius: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
    
    padding: 20px;
    text-align: center;
    background:  var(--secondary-color);
}


/* Responsive Breakpoints */
@media (min-width: 992px) {
    .col {
        flex: 0 0 32%; /* 3 columns in a row on large screens */
        
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col:nth-child(1),
    .col:nth-child(2) {
        flex: 0 0 48%; /* 2 columns in a row */
    }
    .col:nth-child(3) {
        flex: 0 0 98%; /* 1 full-width column */
    }
    
       
   
}

@media (max-width: 767px) {
    .col {
        flex: 0 0 100%; /* 1 column in a row on small screens */
        margin:  5px 0;
        
    }
    .row{margin:  5px 0;}
    
     .exp-parent-box{width: 90%;}
}

.exp-box i{
    color: var(--primary-color);
    font-size: 2vw;
}

.skill-name {
    color: #ededed;
    font-size:  1.5vw;
}

.skill-para {
    color: var(--neutral-color);
    font-size:  1vw;
    font-weight: 350;
}

.work-container {
    width:  80%;
    gap: 2vw;
    height:  auto;
    margin-top:  5%;
}

.box {
    background:  var(--secondary-color);
    border-radius:  20px;
    box-shadow:  0px 3px 15px #181818ac;
    padding:  2%;
    width:  33%;
    
}

.img {
    border-radius: 20px;
    height:  60%;
    width:  100%;
}

.work-para {
    font-size:  1.8vw;
    font-weight:  450;
    margin:  3% 0 0 0;   
}

.redirect-a{
    color:  var(--primary-color);
    font-weight:  400;
    font-size:  1.5vw;
    text-decoration: none;
    cursor: pointer;
    margin:  0;
}

.redirect-a i{color: var(--primary-color);}

.mail-box {
    width:  80%;
    justify-content:  center;
    align-items:  center;
    background:  var(--secondary-color);
    border-radius: 20px;
    margin-top:  5%;
}


.mail-box i{
    font-size:  2vw;
    margin:  2% 0;
}

.mail-box a,
.mail-box a i {
    font-size:  1.2vw;
    cursor: pointer;
    color:  var(--primary-color);
    text-decoration: none;
    display: flex;
    justify-content:  center;    
    align-items:  center;
    margin:  2% 0;
   

}



#year {
    font-size:  1vw;
    min-height:  5vh;
    display: flex;
    align-items: center;
    justify-content:  center;
    padding:  2% 0;
    color:  var(--neutral-color);
    font-weight:  400;
    text-align:  center;
}

.nav-md  li a{
    font-size:  2.8vw;
    
}

.nav_lg {
    display: flex;
}



@media screen and (max-width:992.8px){
    .nav_lg{
        display: none;
        
        
    }

}

@media screen and (max-width:1440px){
    .social-links li a i{
        font-size:  2vw;
    }
    
    .social-links li {
        height: 5vw;
        width:  5vw;
    }
    
    
}



@media screen and (max-width:768px){
    #home div,
    .work-container,
    .mail-box {
        width:  90%;
        margin: auto;
    }
       
    .home-data h5,
    .skill-name,
    .home-data  h3 {
        font-size:  6vw;
        
    }

  .home-data p,
    .mail-box a,
    .mail-box a i ,
    .home-btn a{
        font-size:  .825rem;
        text-align: left;
    }
    
    
    
    .social-links li{
        width: 8.5vw;
        height:  8.5vw;
    }
    
    .social-links li a i,
    .work-para,
    .mail-box i,
    .navbar-a {
        font-size:  4vw;
    }
    
    .heading{
        font-size:  1.5rem;
    }
    
    
    .exp-box i{font-size:  6vw;}
    
    .para,
     .redirect-a,
     #year {
        font-size:  .925rem;
        width:  90%;
    }
    
    .img{
        height:  60%;
    }
                
    .box{
        width:  100%;
        margin-top: 4%;
        padding:  5%;
    }
    
    .skill-para{
        font-size:  3vw;
    }
       
    }