/* This is for Responsive design */

@media (min-width: 1600px) {
    body {
      max-width: 1400px;
      margin: 0 auto;
      font-size: 1.8rem;
    }
    .header {
        padding: 2rem 8%;
    }    
    .home,
    .about-section,
    .services-section,
    .skills-section,
    .contact-section {
        padding:0;
    }
   
}


@media (min-width: 1920px) {
body {
    max-width: 1800px;
    font-size: 2rem;
}
.header {
    padding: 2rem 3%;
}

}

  
@media (min-width: 2560px) {
body {
    max-width: 2200px;
    font-size: 2.2rem;
}
.header {
    padding: 2rem 8%;
}

}
  

@media (max-width: 1300px){
    .image-design .design-overlay {
        width: 150%;
        height: 100%;
    }
    .image-design {
        height: 90%;
    } 
 
    .feature-title,
    .feature-title  {
        font-size: 3rem;
        margin-bottom: 2rem;

    }
    .feature-description,
    .service-description {
        font-size: 2rem;
        line-height: 2.8rem;
    }
    .services-container,
    .projects-grid,
    .feature-box-container
     {
        grid-template-columns: repeat(2, 1fr);
    }        
    .service-title {
        font-size: 3rem;
    }
    .project-layer h4 {
        font-size: 3rem;
    }
    .project-layer p {
        font-size: 2rem;
    }
    .project-layer a i {
        font-size: 2rem;

    }
    .project-layer a {
        padding: 1.5rem;
    }    

    
}


@media (max-width: 990px){

  
    .navbar a {
        margin-left: 2.6rem;
    }    
    .home {
        max-height: 700px;
    }
    .image-design {
        height: 80%;
    }    
    .home-content h1,
    .home-content h2 {
        font-size: 4rem;
    }
    .home-content {
        margin-top: 10rem;
    }
    .home-content h3 {
        font-size: 3rem;
    }    
    .services-title,
    .skills-title,
    .about-title,
    .projects-title  
     {
        font-size: 4rem;
    }
    .feature-title  {
        font-size: 2.5rem;
        margin-bottom: 1.9rem;

    }
    .feature-description,
    .service-description {
        font-size: 1.8rem;
        line-height: 2.5rem;
    }
    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }        
    .service-title {
        font-size: 2.5rem;
    }
    .projects-description {
        font-size: 2.2rem;
    }
    .project-layer h4 {
        font-size: 2.8rem;
    }
    .project-layer p {
        font-size: 1.8rem;
        line-height: 2.5rem;

    }
    .project-layer a i {
        font-size: 1.8rem;

    }
    .project-layer a {
        padding: 1.2rem;
    }    

    
}


@media (max-width: 870px){
    .about-text,
    .services-section .service-text,
    .skill-text{
        max-width: 90%;
    }
    .project-layer h4 {
        font-size: 2.5rem;
    }
    .project-layer p {
        font-size: 1.6rem;
        line-height: 2.2rem;
    }

}


@media (max-width: 767px){
    
    /* This is start for header section*/

    .header{
        background: var(--bg-color);
        padding: 1rem 5%;
    }
    #menu-icon{
        display: block;
        font-size: 3rem;

    }
    .logo img {
        height: 50px;
        width: 60px;
        /* max-width: 100%; */
    }    
    .navbar{
        position: absolute;
        top: 100%;
        width: 100%;
        left: -100%;
        padding: 1rem 4%;
        background: var(--main-color);
        box-shadow: 0 .5rem 1rem rgba(0,0,0, .2);
        z-index:1;
        transition: .25s ease; 
        transition-delay: .25s;
    }
    .navbar.active{ 
        left: 0;  
        transition-delay: 0s;
    }
    .navbar .active-nav{
        position: absolute;
        left: -100%;
        top: 0;
        width: 100%;
        height: 100%;
        background:var(--bg-color);
        border-top: .1rem solid rgba(0,0,0, .2);
        z-index: -1;
        transition: .25s ease;
        transition-delay: 0s;
    }
    .navbar.active .active-nav{
        left: 0;
        transition-delay: .25s;
    }
    .navbar a{
        display: block;
        font-size: 1.5rem;
        margin: 1rem 0;
        transform: translateX(-20rem);
        transition: .25s ease;
        transition-delay: 0s;
    }
    .navbar.active a{
        transform: translateX(0);
        transition-delay: .25s;
    }

    /* This is end for header section*/
    
    .home {
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: none;
    }
    .home-content h1,
    .home-content h2 {
        font-size: 4rem;
    }
    .home-content h3 {
        font-size: 2.5rem;
    }
    .image-design .design-overlay{
        height: 120%;
    }
    .feature-description, .service-description {
        font-size: 1.6rem;
        line-height: 2.3rem;
    }
    .btn-grad {
        font-size: 1.6rem;
    }
    .services-title, .skills-title, .about-title, .projects-title {
        font-size: 3.5rem;
    }
    .projects-description {
        font-size: 2rem;
    }
    .contact-left h2 {
        font-size: 3.5rem;
    }
   
    .about-text{
        max-width: 100%;
    }   
    
    .services-section .service-text,
    .skill-text {
        max-width: 100%;
        margin: 0;
    } 
 

    .project-layer a i {
        font-size: 1.5rem;
    }

    .project-layer p {
        font-size: 1.8rem;
    }
    .project-layer a {
        padding: 1rem;
    }

    .feature-box-container,
    .services-container,
    .projects-grid {
        grid-template-columns: repeat(1, 1fr);
    }
 
    .contact-section {

        flex-direction: column;
        display:block;

    }
    .contact-left .subtext {
        font-size: 1.8rem;
        margin: 2rem 2rem 2rem 0;
    }
    .contact-right h2 {
        font-size:2.5rem;
    }

    .contact-left,
    .contact-right {
    max-width: 100%;
    }


    .about-text,
    .service-text,
    .skill-text {
        text-align: left;
    }


    .modal-content {
        width: 80%;
        margin: 10% 10% 0;
    }


}


@media (max-width: 425px){
    
    .home-content h1,
    .home-content h2{
        font-size: 3rem;
    }
   
    .home-content p {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .btn {
        padding: .8rem 2.5rem;
        font-size: 1.5rem;
    }
    .services-title, .skills-title, .about-title, .projects-title,.contact-left h2 {
        font-size: 3rem;
    }
    .about-text {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .feature-icon, .service-icon  {
        font-size: 4rem;
    }
    .btn-grad {
        font-size: 1.4rem;
    }

    .feature-title, .service-title {
        font-size: 2.2rem;
    }
    .feature-description, .service-description {
        font-size: 1.5rem;
        line-height: 2.2rem;
    }
    .skills-title,.services-title {
        margin-bottom: 2rem;
    }
    .projects-description {
        font-size: 1.7rem;
    }

    .project-layer h4 {
        font-size: 2.2rem;
    }
    .project-layer p {
        font-size: 1.5rem;
    }

    .project-layer a i {
        font-size: 1.5rem;
    }


}


@media (max-width: 330px){

    .shape-ring {
        position: absolute;
        width: 100%;
        max-width: 450px;
        height: 400px;

    }
    .navbar a {
        font-size: 1.5rem;
        margin: 1rem 0;
    }
    .home-content h1,
    .home-content h2 {
        font-size: 2.5rem;
    }
    .home-content h3 {
        font-size: 2rem;
    }
    .home-content p {
        font-size: 1.4rem;
    }
    .btn {
        padding: .5rem 2rem;
        font-size: 1.2rem;
    }
    .social-media a {
        width: 3rem;
        height: 3rem;
        font-size: 1.6rem;
    }
    .services-title, .skills-title, .about-title, .projects-title, .contact-left h2 {
        font-size: 2.5rem;
    }
    .profile-photo-container{
        width: 250px;
        height: 250px;
    }
    .about-text {
        font-size: 1.4rem;
        line-height: 2rem;
    }
    .btn-grad {
        font-size: 1.3rem;
    }
    .feature-icon, .service-icon {
        font-size: 3.5rem;
    }
    .feature-title, .service-title {
        font-size: 2rem;
    }
    .feature-description, .service-description {
        font-size: 1.4rem;
        line-height: 2rem;
    }
    .services-section .service-text,
    .skill-text {
        font-size: 1.4rem;
        line-height: 2rem;
    }
    .projects-description {
        font-size: 1.5rem;
    }
    .project-layer h4 {
        font-size: 1.5rem;
    }
    .project-layer p {
        font-size: 1rem;
        line-height: 1.4rem;
    }
    .project-layer a {
        padding: 1rem;
    }

    .project-layer a i {
        font-size: 1.2rem;
    }
    .contact-left .subtext {
        font-size: 1.5rem;
    }
    .contact-right h2 {
        font-size: 2rem;
    }




    
}