/* Why did i use Rem? */
/* After conclusive research I found out that using rem units over px units in CSS offers better scalability, 
accessibility, and consistency. 
Rem units are relative to the root font size, 
allowing easy adjustments across the entire site, respecting user preferences for font size, 
and ensuring a more responsive and maintainable design. */
/*https://youtu.be/GteJWhCikCk?si=I6zP1fCC3oLwLRTr*/
/*https://youtu.be/phWxA89Dy94?si=EOUfOfwUTm3vrmQ5*/
/*https://youtu.be/01Yjlrr1-30?si=K30qViyN1midszSw*/
/*https://youtu.be/eLY5KSXcQ6c?si=w-1ANWX_XvQXe839*/
/*https://youtu.be/oFnIe-RpkE4?si=6nDXKpjXEFlMCnJw*/
/*https://youtu.be/h3E68tTyE34?si=tNoo5GCxelu1_BNM*/


@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic.woff2') format('woff2'),
        url('Roboto-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Black.woff2') format('woff2'),
        url('Roboto-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BlackItalic.woff2') format('woff2'),
        url('Roboto-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Italic.woff2') format('woff2'),
        url('Roboto-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light.woff2') format('woff2'),
        url('Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Medium.woff2') format('woff2'),
        url('Roboto-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-LightItalic.woff2') format('woff2'),
        url('Roboto-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-MediumItalic.woff2') format('woff2'),
        url('Roboto-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Thin.woff2') format('woff2'),
        url('Roboto-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic.woff2') format('woff2'),
        url('Roboto-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}






*{
    /* Global styles */
    margin: 0; 
    padding: 5px; /* Add padding */
    box-sizing: border-box; /* to include padding and border*/ 
    text-decoration: 0; 
    border: none; 
    outline: none; 
    scroll-behavior: smooth; /*to enable smooth scrolling */
    font-family:'Roboto'; 
}
:root{
    /* the theme*/
    --bg-color: #1f242d; 
    --second-bg-color: #323946; 
    --text-color: #fff; 
    --main-color: #0ef; 
}
html{
    /* Set base font size and handle overflow */
    font-size: 62.5%; /* Set base font size to 62.5% */
    overflow-x: hidden; /* to prevent horizontal overflow */
}
body{
    
    background: var(--bg-color); 
    color: var(--text-color);
    padding-top: 7rem; /* Add padding to the top for headers */
}


/* Style for headings */
.heading{
    text-align: center; /* Center-align text */
    font-size: 4.5rem; /* Font size */
}






/* Dropdown Menu */
.dropdown-content { 
    display: none;   /*Hides the dropdown content by default.*/
    position: absolute; 
    background-color: var(--second-bg-color); 
    min-width: 160px;   /*Ensures the dropdown content has a minimum width of 160 pixels.*/
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  /* Adds a slight shadow around the dropdown content*/
    z-index: 1; 
}

.dropdown-content ul {
    list-style-type: none; /*Removes the default list item markers (bullets) from the unordered list.*/
    padding: 0;  
    margin: 0;  
}

.dropdown-content a {
    color: black; /*text color of the links to black.*/
    padding: 12px 16px; /*Adds padding inside each link*/
    text-decoration: none; /* Removes the underline from the links.*/
    display: block; /*Makes each link to occupy the full width available.*/
}

.dropdown-content a:hover {
    background-color: #f1f1f1;} /*Changes the background color of the link when the user hovers over it.*/

.dropdown:hover .dropdown-content {
    display: block;  /*When the user hovers over the dropdown element, it makes the hidden dropdown content visible by changing its display property from none to block.*/
}





/* Style for the header */
.header{
    position: fixed; /* to fix the header at the top of the page */
    top: 0;
    left: 0;
    width: 100%; 
    padding: 2rem 9%; /* for padding around the content */
    background: var(--bg-color); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 100; 
}

/* Style for  header */
.header {
    border-bottom: .1rem solid rgba(0,0,0,.2); /* Border at the bottom */
}

/* Style for the logo */
.logo{
    font-size: 2.5rem;
    color: var(--text-color); 
    font-weight: 600; 
    cursor: pointer; 
    text-decoration: none;
}

/* Style for the navigation bar */
.navbar{
    display: flex; 
    align-items: center; /* to center items vertically */
}

/* Style for links in the navigation bar */
.navbar a{
    font-size: 1.7rem; /* Font size */
    color: var(--text-color); 
    margin-left: 4rem; /* Space between links */
    transition: .3s; /* Transition for hover effect */
    text-decoration: none;
}

/* Hover and active state for navigation links */
.navbar a:hover,
.navbar a.active{
    color: var(--main-color); /* Change color on hover*/
}

/* Style for menu icon (hidden by default) */
#menu-icon{
    font-size: 3.6rem; /* Font size */
    color: var(--text-color); /* Text color  */
    display: none; /* to hide by default */
}






/*index.html page*/

/* Style for sections */
.section{
    min-height: 100vh; 
    padding: 10rem 9% 2rem; /* Padding around the content */
}

/* Style for home section */
.home{
    display: flex; 
    justify-content: center; /* to center content horizontally */
    align-items: center; /* to center content vertically */
    margin: 0 70px;
}

/* Style for home image */
.home-img img{
    width: 20vw; 
    height: -45vw; 
    object-fit: contain; 
    border-radius: 10px; /* rounded corners */
    animation: floatImage 4s ease-in-out infinite; /* Floating animation */
    padding-right: 40px; /* for padding on the right */
}

/* Keyframes for floating animation */
@keyframes floatImage{
    0%{
        transform: translateY(0); /* Start position */
    }
    50%{
        transform: translateY(-4.4rem); /* Move up */
    }
    100%{
        transform: translateY(0); /* End position */
    }
}

/* Style for home content heading */
.home-content h3{
    font-size: 3.2rem; 
    font-weight: 700; 
}

/* Style for specific heading (second h3) */
.home-content h3:nth-of-type(2){
    margin-bottom: 2rem; /* Margin at the bottom */
}

/* Style for span elements */
span{
    color: var(--main-color); 
}

/* Style for home content main heading */
.home-content h1{
    font-size: 5.6rem; 
    font-weight: 700; 
    line-height: 1.3; 
}

/* Style for home content paragraph */
.home-content p{
    font-size: 1.6rem; 
}

/* Style for social links */
.social-links a{
    display: inline-flex; 
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 4rem; 
    height: 4rem; 
    background: transparent; 
    border: .2rem solid var(--main-color); /* Border with the main color */
    border-radius: 50%; /* Round shape */
    margin: 3rem 1.5rem 3rem 0;
    color: var(--main-color); 
    transition: .5s ease; /* Transition for hover effect */
    font-size: 4rem;
    text-decoration: none;
}



/* Hover for social links */
.social-links a:hover{
    background: var(--main-color); /* to change background on hover */
    color: var(--second-bg-color); /* to change text color on hover */
    box-shadow: 0 0 1rem var(--main-color); /* Add shadow on hover */
}

/* Style for buttons */
.btn{
    display: inline-block; 
    padding: 1rem 2.8rem; 
    background: var(--main-color); 
    border-radius: 4rem; /* Rounded corners */
    box-shadow: 0 0 1rem var(--main-color); /* Shadow */
    font-size: 1.6rem; 
    color: var(--second-bg-color); /* Text color */
    letter-spacing: .1rem; /* Letter spacing */
    font-weight: 600; 
    transition: .5s ease; /* Transition for hover effect */
    cursor: pointer; 
}

/* Hover for buttons */
.btn:hover{
    box-shadow: none; /* to remove shadow on hover */
}









/*about me page*/

/* Style for the about section */
.about{
    display: flex; 
    justify-content: center; /* to center content horizontally */
    align-items: center; /* to center content vertically */
    gap: 2rem; /* for gap between flex items */
    background: var(--second-bg-color); 
}

/* Style for the about section image */
.about-img img{
    width: 25vw; 
    height: auto; 
    object-fit: cover; 
    border-radius: 10px; 
    padding-left: 20px; /* for padding on the left */
    padding-top: 40px; /* for padding on the top */
   
}

/* Style for about section content headings */
.about-content h2{
    text-align: left; 
    line-height: 1.2; 
}

/* Style for about section subheadings */
.about-content h3{
    font-size: 2.6rem; 
}

/* Style for about section paragraphs */
.about-content p{
    font-size: 2.0rem; 
    margin: 2rem 0 3rem; /* Margin around paragraphs */
    line-height: 2.0;
    margin: 0 70px;
}








/* contact.html page */
.contact{
    margin: 40px 0;
}

/* Style for contact section heading */
.contact h2{
    margin-bottom: 3rem; /* Margin below the heading */
}

/* Style for contact form */
.contact form{
    max-width: 70rem; 
    margin: 1rem auto; /* to center form with margins*/
    text-align: center; /* to center-align text */
    margin-bottom: 3rem; /* for margins below the form */
}

/* Style for input boxes in the form */
.contact form .input-box{
    display: flex; 
    justify-content: space-between; /* Space between input boxes */
    flex-wrap: wrap; /* to wrap input boxes to next line if needed */
}

/* Style for input fields and textarea in the form */
.contact form .input-box input, .contact form textarea{
    width: 100%; 
    padding: 1.5rem; /* Padding inside the input/textarea */
    font-size: 1.6rem; 
    color: var(--text-color); 
    background: var(--second-bg-color); 
    border-radius: .8rem; /* Rounded corners */
    margin: .7rem 0; /* for margins above and below input/textarea */
}

/* Style for individual input fields in the form */
.contact form .input-box input{
    width: 49%; /* Width for individual input fields */
}

/* Style for textarea in the form */
.contact form textarea{
    resize: none; /* to turn off resizing of the textarea */
}

/* Style for submit button in the form */
.contact form .btn{
    margin-top: 2rem; /* for margins above the button */
    cursor: pointer; /* for pointer cursor on hover */
}








/* project.html page */

/* Style for project section heading */
.projects h2{
    margin-bottom: 5rem; /* for margins below the heading */
}

/* Style for the project container */
.project-container{
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; /* to wrap flex items to the next line if needed*/
    gap: 2rem; /* Gap between project boxes */
    margin: 80px 0;
}

/* Hover effect for project boxes */
.project-container .project-box:hover{
    border-color: var(--main-color); /* to change border color on hover */
    transform: scale(1.02); /* to slightly enlarge the box on hover */
}

/* Style for individual project boxes */
.project-container .project-box{
    flex: 1 1 30rem; /* Flex-grow, flex-shrink, and base size */
    background: var(--second-bg-color); /* Background color */
    padding: 3rem 2rem 4rem; /* for padding inside the box */
    border-radius: 2rem; /* Rounded corners */
    text-align: center; 
    border: .2rem solid var(--bg-color); 
    transition: .5s ease; /* Transition for hover effect */
}

/* Style for icons in project boxes */
.project-box i{
    font-size: 7rem; 
    color: var(--main-color); /* Icon color */
}

/* Style for project titles */
.project-box h3{
    font-size: 2.6rem; 
}

/* Style for project descriptions */
.project-box p{
    font-size: 1.6rem; 
    margin: 1rem 0 3rem; /* for margins around the paragraph */
}








/*psskills.html page*/

/* Style for the psskills section */
.psskills{
    background: var(--second-bg-color); 
}

/* Style for the heading in the psskills section */
.psskills h2{
    margin-bottom: 4rem; /* for margins below the heading */
}

/* Style for the container of psskills */
.psskills-container{
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* to get three equal columns */
    align-items: center; /* to center items vertically */
    gap: 2.5rem; /* Gap between grid items */
}

/* Style for individual pssskill boxes and containers */
.psskills-container .ps-box{
    position: relative; /* Position relative for layering */
    border-radius: 2rem; /* for rounded corners */
    box-shadow: 0 0 1rem var(--bg-color); /*  for Shadow effect */
    overflow: hidden; /* to hide overflow */
    display: flex; 
}

/* Style for images in psskills boxes */
.ps-box img{
    width: 100%; 
    transition: .5s ease; /* Transition for hover effect */
    
}

/* Hover effect for images in psskills boxes */
.ps-box:hover img{
    transform: scale(1.1); /* to enlarge image slightly on hover */
}

/* Style for the ps-layer in problem-solving skill boxes */
.ps-box .ps-layer{
    position: absolute; 
    bottom: 0; /* to align to bottom */
    left: 0; /* to align to left */
    width: 100%; 
    height: 100%; 
    background: linear-gradient(rgba(0, 0, 0, 1), var(--main-color)); /* Gradient background */
    display: flex; 
    justify-content: center; /* to center content horizontally */
    align-items: center; /* to center content vertically */
    flex-direction: column; 
    text-align: center; /* to center-align text */
    padding: 1 4rem; /* for padding on the sides */
    transform: translateY(100%); /* Initially hide below the box */
    transition: .5s ease; /* Transition for hover effect */
}

/* Hover effect for the ps-layer */
.ps-box:hover .ps-layer{
    transform: translateY(0); /* to slide up on hover */
}

/* Style for headings in the ps-layer */
.ps-layer h3{
    font-size: 3rem; 
}

/* Style for paragraphs in the ps-layer */
.ps-layer p{
    font-size: 1.6rem; 
    margin: .3rem 0 1rem; /* for margins around the paragraph */
}

/* Style for links in the ps-layer */
.ps-layer a{
    display: inline-flex; 
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 5rem; 
    height: 5rem; 
    background: var(--text-color); 
    border-radius: 50%; /* Round shape */
    text-decoration: none;
}

/* Style for icons inside the links */
.ps-layer a i{
    font-size: 2rem; 
    color: var(--second-bg-color); /* Icon color  */
}







/*techskills.html page*/

/* Style for the tech skills section */
.techskills{
    background: var(--second-bg-color); /* Background color */
}

/* Style for the heading in the tech skills section */
.techskills h2{
    margin-bottom: 4rem; /* for margins below the heading */
}

/* Style for the tech skills container */
.tech-container{
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* to get three equal columns */
    align-items: center; /* to center items vertically */
    gap: 2.5rem; /* Gap between grid items */
    
}

/* Style for individual tech skills boxes */
.tech-container .ts-box{
    position: relative; 
    border-radius: 2rem; /* Rounded corners */
    box-shadow: 0 0 1rem var(--bg-color); /* for shadow effect */
    overflow: hidden; /* to hide overflow */
    display: flex; 
}

/* Style for images in tech skills boxes */
.ts-box img{
    width: 100%; 
    transition: .5s ease; /* Transition for hover effect */
   
}

/* Hover effect for images in tech skills boxes */
.ts-box:hover img{
    transform: scale(1.1); /* to enlarge image slightly on hover */
}

/* Style for the overlay layer in tech skills boxes */
.ts-box .ts-layer{
    position: absolute; 
    bottom: 0; /* to align to bottom */
    left: 0; /* to align to left */
    width: 100%; 
    height: 100%; 
    background: linear-gradient(rgba(0, 0, 0, 1), var(--main-color)); /* Gradient background */
    display: flex; 
    justify-content: center; /* to center content horizontally */
    align-items: center; /* to center content vertically */
    flex-direction: column; 
    text-align: center; 
    padding: 0 4rem; /* for padding on the sides */
    transform: translateY(100%); 
    transition: .5s ease; /* Transition for hover effect */
}

/* Hover effect for the overlay layer */
.ts-box:hover .ts-layer{
    transform: translateY(0); /* Slide up on hover */
}

/* Style for headings in the overlay layer */
.ts-layer h3{
    font-size: 3rem; 
}

/* Style for paragraphs in the ts-layer */
.ts-layer p{
    font-size: 1.6rem; 
    margin: .3rem 0 1rem; /* for margins around the paragraph */
}

/* Style for links in the ts-layer */
.ts-layer a{
    display: inline-flex; 
    justify-content: center; /* to center content horizontally */
    align-items: center; /* to center content vertically */
    width: 5rem; 
    height: 5rem; 
    background: var(--text-color); /* Background color*/
    border-radius: 50%; /* Round shape */
    text-decoration: none;
}

/* Style for icons inside the links */
.ts-layer a i{
    font-size: 2rem; 
    color: var(--second-bg-color); /* Icon color */
   
}







/*Feedbackpage.html page*/

/* Style for feedback section */
.feedback{
    background: var(--second-bg-color); /* Background color */
}

/* Style for the heading in the feedback section */
.feedback h2{
    margin-bottom: 4rem; /* for margins below the heading */
}

/* Style for the feedback container */
.feedback-container{
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* for three equal columns */
    align-items: center; /* to center items vertically */
    gap: 2.5rem; /* Gap between grid items */
}

/* Style for individual feedback boxes */
.feedback-container .feedback-box{
    position: relative; 
    border-radius: 2rem; /* Rounded corners */
    box-shadow: 0 0 1rem var(--bg-color); /* for shadow effect */
    overflow: hidden; /* to hide overflow */
    display: flex; 
}

/* Style for images in feedback boxes */
.feedback-box img{
    width: 100%; /* Full width */
    transition: .5s ease; /* Transition for hover effect */
   
}

/* Hover effect for images in feedback boxes */
.feedback-box:hover img{
    transform: scale(1.1); /* Enlarge image slightly on hover */
}

/* Style for the feedback layer in tech skills boxes */
.feedback-box .feedback-layer{
    position: absolute; /* Absolute position for overlay */
    bottom: 0; /* Align to bottom */
    left: 0; /* Align to left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: linear-gradient(rgba(0, 0, 0, 1), var(--main-color)); /* Gradient background */
    display: flex; 
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Column layout */
    text-align: center; /* Center-align text */
    padding: 0 4rem; /* Padding on the sides */
    transform: translateY(100%); /* Initially hide below the box */
    transition: .5s ease; /* Transition for hover effect */
}

/* Hover effect for the feedbacklayer */
.feedback-box:hover .feedback-layer{
    transform: translateY(0); /* Slide up on hover */
}

/* Style for headings in the feedback layer */
.feedback-layer h3{
    font-size: 3rem; 
}

/* Style for paragraphs in the feedback-layer */
.feedback-layer p{
    font-size: 1.6rem; 
    margin: .3rem 0 1rem; /* Margin around the paragraph */
}

/* Style for links in the feedback-layer */
.feedback-layer a{
    display: inline-flex; /* Inline flexbox layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 5rem; 
    height: 5rem; 
    background: var(--text-color); /* Background color*/
    border-radius: 50%; /* Round shape */
    text-decoration: none;
}

/* Style for icons inside the links */
.feedback-layer a i{
    font-size: 2rem; 
    color: var(--second-bg-color); /* Icon color */
   
}









/*footer section*/

/* Style for the footer */
.footer{
    display: flex; 
    justify-content: space-between; /* for space between flex items */
    align-items: center; /* to center items vertically */
    flex-wrap: wrap; /* to wrap flex items to the next line if needed */
    padding: 2rem 9%; /* for padding around the content */
    background: var(--second-bg-color); /* Background color*/
    
}

/* Style for footer text */
.footer-text p{
    font-size: 1.6rem; 
}

/* Style for footer icon top links */
.footer-icontop a{
    display: inline-flex; 
    justify-content: center; /* to center content horizontally */
    align-items: center; /* to center content vertically */
    padding: .8rem; /* for padding inside the link */
    background: var(--main-color); /* Background color*/
    border-radius: .8rem; /* Rounded corners */
    transition: .5s ease; /* Transition for hover effect */
    text-decoration: none;
}

/* Hover effect for footer icon top links */
.footer-icontop a:hover{
    box-shadow: 0 0 1rem var(--main-color); /* to add shadow on hover */
}

/* Style for icons inside footer links */
.footer-icontop a i{
    font-size: 2.4rem; 
    color: var(--second-bg-color); /* Icon color */
}










/* The modal container */
.modal {
    display: none; 
    position: fixed; /* for it to stay in place */
    z-index: 1000; /* Sit on top */
    left: 0; 
    top: 0; 
    height: 100%;
    height: 100%;
    overflow: auto; /* to enable scroll if needed */
    background-color: var(--bg-color);
}

/* The modal content */
.modal-content {
    background-color: var(--bg-color); 
    margin: 0 75px; 
    padding: 40px; /* for padding inside the modal */
    border: 1px solid var(--bg-color); /* Border style */
    width: auto; 
    height: auto; 
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box; /* to include padding and border in the element's total width and height */
    font-size: 2rem;
    text-align: left;
    line-height: 1.4;
    
    
}

/* The close button */
.close {
    color: #aaa; 
    float: right; 
    font-weight: bold; 
    font-size: 40px;
   
}

/* Close button hover and focus states */
.close:hover,
.close:focus {
    color: var(--main-color); /* to change color on hover/focus */
    text-decoration: none; /* to remove underline */
    cursor: pointer; /* for pointer cursor */
}

h2{
    font-size: 4rem;
    text-align: center;
}

.small-img {
    width: 600px; 
    height: auto; 
    max-width: 100%; /* to ensure the image doesn't overflow its container */
    border-radius: 20px;
 
  
}


  
@media( max-width:1200px){
    html{
        font-size: 55%;
    }
}
@media(max-width: 991px){
   .header{
    padding: 2rem 3%;
   }
   section{
    padding: 10rem 3% 2rem
   }
   .projects{
    padding-bottom: 7rem;
   }
   .contact{
    min-height: auto;
   }
   .footer{
    padding: 2rem 3%;
   }
 }
 @media(max-width: 760px){
    .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: .1rem solid rgba(0,0,0,.2);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
    }
    .navbar a{
        display: block;
        font-size: 2rem;
        margin:3rem 0;
    }
    .home{
        flex-direction: column;
    }
    .home-content h1{
        font-size: 5rem;
    }
    .home-content h3{
        font-size: 2.6rem;
    }
    .home-img{
        width: 70vw;
        margin-top: 4rem;
    }
    .about{
        flex-direction: column-reverse;
    }
    .about-img{
        width: 70vw;
        margin-top: 4rem;
    }
    .projects h2{
        margin-bottom: 3rem;
    }
    .psskills h2{
        margin-bottom: 3rem;
    }
    .psskills-container{
        grid-template-columns: repeat(2,1fr);
    }
 }
@media(max-width:617px){
    .psskills-container{
        grid-template-columns:1fr;
    }
}
@media (max-width: 450px){
    html{
        
        font-size: 50%;
    }
    .contact form .input-box{
        width: 100%
    }
}