/* Contact section design end */

/* When the viewport size is read at 1200px, the webpage style would be */
@media (max-width: 1200px){
    html{
        font-size: 85%; /* Reducing the font size to 85% */
    }
}

/* When the viewport size is read at 900px, the webpage style would be */
@media (max-width:900px){
    .header{
        padding: 10px 3%; /* Adjusting the padding for the header */
    }
    section{
        padding: 10px 3% 2rem; /* Adjusting the padding for the sections */
        height: 100vh; /* Making the sections fill the viewport height */
    }
    .services{
        padding-bottom: 7rem; /* Adding bottom padding to the services section */
    }
}

/* When the viewport size is read at 790px, the webpage style would be */
@media (max-width: 976px){
    .header #menu-icon{
        display: block; /* Showing the menu icon */
        transform: rotate(0deg);
        transition: transform .5s ease;
    }
    .header .xmark{
        display: block; /* Showing the close icon */
        transform: rotate(0deg);
        transition: transform .5s ease;
    }
       
    .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        width: 30%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: .1rem solid white;
        /* border: .5px solid gray; */
        display: none; /* Hiding the navbar by default */
        
    }
    .navbar.active{
        display: block; /* Showing the navbar when it has the 'active' class */
        z-index: 1000;
    }
    .navbar a{
        display: block;
        /* line-height: 3rem; */
        font-size: 1.6rem;
        margin: 3rem 1rem;
        border-bottom: .1px solid gray; /* Adding a bottom border to the navbar links */ 
    }
    .about-img img{
        height: 20rem;
        flex-direction: column-reverse;
    }
    /* .skills{
        height: 100%;
    } */
    .skills-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .contact-container{
        position: relative;
        width: 450px;
        height: 420px;
    }
    .input-box input {
        position: relative;
        padding: 15px;
        font-size: 1.1rem;
        margin-left:5px;
        border-radius: 10px;
        margin-bottom: 10px;
        background-color: #092643;
        color: var(--text-color);
      }
      
      textarea {
        width: 95%;
        border-radius: 15px;
        background: #092643;
        padding: 10px;
        
      }
}

@media (max-width: 740px){
    section{
        display: flex;
        flex-direction: column; /* Changing the direction of the sections to column */
        width: 90%;
        height: 100%;
        position: relative;
        top: 20px;
        margin-left: 20px;
        z-index: 0;
    }
    
    .home{
        flex-direction: column-reverse; /* Changing the direction of the home section to column */
        z-index: 1;
    }
    .home-content{
        margin-top: 5rem;
       
    }
    .home-content h3{
        font-size: 2.5rem;
    }
    .multi-text{
        font-size: 1rem;
    }
    .home-content h1{
        font-size: 3rem;
    }
    .home-content h2{
        font-size: 2rem;
    }
    
    .home-img{
        display: flex;
        height: 300px;
        justify-content: center;
        position: static;  
        margin-top: 1rem;      
    }
  
    .about{
        /* flex-direction: column-reverse; Reversing the direction of the about section */
        justify-content: center;
        z-index: -1;
    }
    .about-content{
        margin-top: 4rem;
        padding: 2rem;
        text-align: center; /* Centering the text in the about content */
    }

    .service-container{
        flex-wrap: wrap; /* Allow the boxes to wrap to the next line */
    }
    .service-box{
        /* flex-basis: calc(50% - 1rem); Make each box take up half the width of the screen minus the gap */
        margin: 0.5rem; /* Add a small margin to create a gap between the boxes */
        flex-basis: calc(100% - 1rem); /* Make each box take up the full width of the screen minus the gap */
    }
    .service-box:nth-child(3){
        flex-basis: calc(100% - 1rem); /* Make the third box take up the full width of the screen minus the gap */
    }

   
  .portfolio{
    height: 100%;
  }
    .portfolio-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
        gap: 2.5rem;
    }
    #Portfolio{
        position: relative;
        top: 30px;
    }
    
}


@media (max-width: 400px) {
    html {
        font-size: 75%; /* Reducing the font size to 75% */
    }

    .header {
        padding: 5px 2%; /* Adjusting the padding for the header */
        
    }

    section {
        padding: 5px 6% 1rem; /* Adjusting the padding for the sections */
    }

    .home-content h3 {
        font-size: 2rem; /* Adjusting the font size for the home content heading */
    }

    .multi-text {
        font-size: 1rem; /* Adjusting the font size for the multi-text */
    }

    .home-content h1 {
        font-size: 2.5rem; /* Adjusting the font size for the home content title */
    }

    .home-content h2 {
        font-size: 1.5rem; /* Adjusting the font size for the home content subtitle */
    }

    .home-img {
        height: 200px; /* Adjusting the height of the home image */
    }

    .about-content {
        margin-top: 2rem; /* Adjusting the top margin for the about content */
        padding: 1rem; /* Adjusting the padding for the about content */
    }

    .service-box {
        flex-basis: calc(100% - 1rem); /* Make each box take up the full width of the screen minus the gap */
    }

    .portfolio-container {
        grid-template-columns: repeat(1, 1fr); /* Make each portfolio item take up the full width of the screen */
    }

    .contact-container {
        width: 300px; /* Adjusting the width of the contact container */
        height: 320px; /* Adjusting the height of the contact container */
    }

    .input-box input {
        padding: 10px; /* Adjusting the padding for the input box */
        font-size: 1rem; /* Adjusting the font size for the input box */
    }

    textarea {
        width: 90%; /* Adjusting the width of the textarea */
    }

    footer {
        padding: 5px; /* Adjusting the padding for the footer */
        
    }

    #linkedin, #github {
        margin: 5px 0; /* Adjusting the margin for the LinkedIn and GitHub links */
    }
}