/****** General ******/
@media (max-width: 319px) {
    .header, .navigation-items, .mobile-navmenu, .nav-button, .information, .pattern, .blog, .contact, .footer{
        display: none;
    }.business-name{
        text-align: center;
    }
}

/****** Pattern ******/
@media(min-width: 420px){
    .card-grid{
      grid-template-columns: repeat(2, 1fr); 
    }
}
@media(min-width: 600px){
    .card-grid{
      grid-template-columns: repeat(3, 1fr); 
    }
}
@media(min-width: 960px){
    .card-grid{
      grid-template-columns: repeat(5, 1fr); 
    }
}

/****** blog ******/
@media(min-width: 420px){
    .blog-card-grid{
      grid-template-columns: repeat(2, 1fr); 
    }
}
@media(min-width: 600px){
    .blog-card-grid{
      grid-template-columns: repeat(3, 1fr); 
    }
}
@media(min-width: 960px){
    .blog-card-grid{
      grid-template-columns: repeat(4, 2fr); 
    }
}

/******xs - 320px & 767px (phones)******/
@media (min-width: 320px) and (max-width: 767px) {

    /* For Navigation */
    .business-name span{
        position: absolute;
        top: 40px;
        right: 20px;
    }.navigation-items{
        display: none;
    }.mobile-navmenu{
        position: absolute;
        top: 20px;
        left: 20px;
        text-align: left;
        font-weight: 500;
    }.device-size-error{
        display: none;
    }

    /* for header */
    .header{
        margin-top: 180px;
    }.image-section{
        display: none;
    }.text-section{
        display: inline;
        margin: auto;
    }.text-section h1{
        font-weight: 800;
        font-size: 38px;
        margin-bottom: 29px;
        margin-right: 0;
        text-align: center;
        line-height: 1.35;
    }.text-section p{
        font-size: 14px;
        max-width: 350px;
        line-height: 1.20;
        text-align: center;
        margin: 0 auto;
    }.text-section a{
        display: none;
    }.header-background-svg{
        width: 900px;
        top: 70px;
        right: 50%;
        margin-right: -450px;
    }

    /* for information */
    .information{
        margin-top: 130px;
    }.information-text{
        font-size: 14px;
        padding: 20px 20px;
    }.information-header::before{
        width: 60%;
        height: 70%;
        bottom: -4px;
        right: 20%;
    }

    /* for pattern */
    .pattern{
        margin-top: var(--margin-section-xs);
    }

    /* for blog */
    .blog{
        margin-top: var(--margin-section-xs);
    }

    /* for contact */
    .cantact{
        margin-top: var(--margin-section-xs);
    }
    
    /* for footer */
    .footer{
        margin-top: var(--margin-section-xs);
    }

    /* For Body */
    body {
		line-height: 1;
		margin: 0 20px;
	}
    
}@media (min-width: 320px) and (max-width: 420px) {
    .footer{
        height: 90px;
        text-align: center;
    }.copyright{
        padding: 24px 0 0 0;
    }.call{
        left: 0; right: 0;
    }
}

/******sm - 768px & 991px (tablets)******/
@media (min-width: 768px) and (max-width: 991px) {

    /* For Navigation */
    .navigation-items{
        position: absolute;
        top: 40px;
        left: 40px;
        display: inline;
    }.business-name{
        margin-top: 40px;
        font-size: 17px;
    }.navigation-items ul li{
        padding-right: 20px;
    }.mobile-navmenu{
        display: none;
    }.nav-button{
        display: none;
    }.device-size-error{
        display: none;
    }

    /* for header */
    .header{
        margin-top: 200px;
    }.image-section{
        display: inline;
        float: left;
        margin-top: -100px;
    }.image-section img{
        width: 280px;
    }.text-section{
        display: inline;
    }.text-section h1{
        max-width: 500px;
        font-weight: 800;
        font-size: 40px;
        margin-bottom: 29px;
        line-height: 1.35;
    }.text-section p{
        max-width: 300px;
        line-height: 1.25;
        font-size: 14px;
    }.text-section a{
        font-size: 11px;
    }.header-background-svg{
        width: 600px;
        right: -300px;
        -ms-transform: translateY(-66%);
        transform: translateY(-66%);
    }

    /* for information */
    .information{
        margin-top: 200px;
    }.information-text{
        font-size: 14px;
    }.information-header::before{
        width: 24%;
        height: 70%;
        bottom: -4px;
        right: 38%;
    }

    /* for pattern */
    .pattern{
        margin-top: var(--margin-section-sm);
    }

    /* for blog */
    .blog{
        margin-top: var(--margin-section-sm);
    }

    /* for contact */
    .cantact{
        margin-top: var(--margin-section-sm);
    }
    
    /* for footer */
    .footer{
        margin-top: var(--margin-section-sm);
    }

    /* For Body */
    body {
		line-height: 1;
		margin: 0 40px;
	}
}

/******md - 992px & 1199px (smallLaptops)******/
@media (min-width: 992px) and (max-width: 1199px) {

    /* For Navigation */
    .navigation-items{
        position: absolute;
        top: 40px;
        left: 60px;
        display: inline;
    }.business-name{
        margin-top: 40px;
        font-size: 18px;
    }.navigation-items ul li{
        padding-right: 30px;
        font-size: 13px;
    }.mobile-navmenu{
        display: none;
    }.nav-button{
        display: none;
    }.device-size-error{
        display: none;
    }

    /* for header */
    .header{
        margin-top: 250px;
    }.image-section{
        display: inline;
        float: left;
        margin-top: -100px;
    }.image-section img{
        width: 300px;
        margin-left: 0;
    }.text-section{
        display: inline;
    }.text-section h1{
        max-width: 500px;
        font-weight: 800;
        font-size: 40px;
        margin-bottom: 29px;
        margin-right: 0;
        line-height: 1.35;
    }.text-section p{
        max-width: 430px;
        line-height: 1.35;
        margin-right: 0;
    }.text-section a{
        margin-right: 0;
    }.header-background-svg{
        width: 700px;
        right: -350px;
        -ms-transform: translateY(-58%);
        transform: translateY(-58%);
    }
    
    /* for information */
    .information{
        margin-top: 250px;
    }.information-text{
        font-size: 14px;
    }.information-header::before{
        width: 19%;
        height: 70%;
        bottom: -4px;
        right: 40.5%;
    }

    /* for pattern */
    .pattern{
        margin-top: var(--margin-section-md);
    }

    /* for blog */
    .blog{
        margin-top: var(--margin-section-md);
    }

    /* for contact */
    .cantact{
        margin-top: var(--margin-section-md);
    }

    /* for footer */
    .footer{
        margin-top: var(--margin-section-md);
    }
    
    /* For Body */
    body {
		line-height: 1;
		margin: 0 60px;
	}
}

/******lg - 1200px and 1699px (wideMonitors)******/
@media (min-width: 1200px) and (max-width: 1699px) {

    /* For Navigation */
    .navigation-items{
        position: absolute;
        top: 40px;
        left: 100px;
        display: inline;
    }.business-name{
        margin-top: 40px;
        font-size: 22px;
    }.navigation-items ul li{
        padding-right: 40px;
        font-size: 13px;
    }.mobile-navmenu{
        display: none;
    }.nav-button{
        display: none;
    }.device-size-error{
        display: none;
    }

    /* for header */
    .header{
        margin-top: 270px;
    }.image-section{
        margin-top: -180px;
    }.image-section img{
        width: 350px;
    }.text-section{
        display: inline;
    }.text-section h1{
        font-weight: 800;
        font-size: 40px;
        margin-bottom: 29px;
    }.text-section p{
        max-width: 500px;
        line-height: 1.35;
    }.header-background-svg{
        -ms-transform: translateY(-58%);
        transform: translateY(-58%);
    }

    /* for information */
    .information{
        margin-top: 290px;
    }.information-header::before{
        width: 17%;
        height: 70%;
        bottom: -4px;
        right: 41.5%;
    }

    /* for pattern */
    .pattern{
        margin-top: var(--margin-section-lg);
    }

    /* for blog */
    .blog{
        margin-top: var(--margin-section-lg);
    }.blog-card-content{
        padding: 20px 30px;
    }

    /* for contact */
    .cantact{
        margin-top: var(--margin-section-lg);
    }

    /* for footer */
    .footer{
        margin-top: var(--margin-section-lg);
    }
    
    /* For Body */
    body {
		line-height: 1;
		margin: 0 100px;
    }
}

/******ex lg - 1700px and higher (wideMonitors)******/
@media only screen and (min-width: 1700px) {

    /* For Navigation */
    .navigation-items{
        position: absolute;
        top: 40px;
        left: 130px;
        display: inline;
    }.business-name{
        margin-top: 40px;
        font-weight: 800;
        font-size: 22px;
    }.navigation-items ul li{
        padding-right: 45px;
        font-size: 14px;
    }.mobile-navmenu{
        display: none;
    }.nav-button{
        display: none;
    }.device-size-error{
        display: none;
    }

    /* for header */
    .text-section h1{
        font-size: 50px;
    }.text-section p{
        max-width: 500px;
    }

    /* for information */
    .information{
        margin-top: 365px;
    }.information-header::before{
        width: 12%;
        height: 70%;
        bottom: -4px;
        right: 44%;
    }

    /* for footer */
    footer{}
    
    /* For Body */
    body {
		line-height: 1;
		margin: 0 130px;
	}
}