* { margin: 0; padding: 0; box-sizing: border-box; }

a { color: inherit; text-decoration: none; }


.aligned-flex-container{display: flex; justify-content: space-between; align-items: center;}

body { background-color: beige; 
	color: #4e4544;
	font-size: 16px; 
    font-family: Arial, sans-serif;;
} 
.container {
    width: 100%;
    min-width:1200px; 
    background: beige;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
        "aside-left main main aside-right"
        "footer footer footer footer";
    grid-gap: 0.5vw;
}
main{
    grid-area: main;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 0.5vw;
}
main h1, h2, h3, h4{ text-align: center; }
main header h1, h2, h3, h4{margin: 0.5rem 0; }
main span {color: red;}
main img {box-shadow: 0 10px 10px -10px;}
main header {
    display: flex; 
    flex-direction:row; 
    justify-content: space-between; 
    align-items: center; 
}
main header img{
    height: clamp(50px,5vw, 200px); 
    margin: 0 3rem;
}

.Pict{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1vw;
}
.Pict img{
   height: clamp(5rem, 7vw, 7rem) ;
   border: 2px solid wheat;
}
.Pict img:hover { transform: scale(1.5); }

.slogan{
    color: red; 
    text-transform: uppercase; 
    font-size: 2rem;
}

.contacts{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2rem;
	padding: 0.5rem; margin: 0; 
	vertical-align: middle; 
    color: beige;  
	background: red;
}

.services{
	width: 100%; 
	display: flex; flex-direction: row; 
	justify-content: space-between; 
	margin: 0; 
	gap: 1rem;
}
.service{
	border: 1px solid wheat; 
	margin: 0 0; 
    padding: 0 0.5rem;
	background: white; 
	box-shadow: 0 10px 10px -10px;
}
.service ul{
	padding: 0rem 1rem 0 4rem; 
	margin-bottom: 0.5em;
}
.service-name{
	line-height: 1.5rem;
    padding: 0.5rem 0 ; 
	border-bottom: 3px solid wheat;
}


.aside-left{ grid-area: aside-left; }

.aside-right{grid-area: aside-right;}

aside { width: 100%;  border: 2px solid wheat; }
aside section {margin-bottom: 0.5rem;}
aside article { background: white; margin: 0.5rem;}
.aside-picture {height:clamp(100px, 9vw, 10rem); width: 80%; margin: 0 auto; border: 0.5rem solid white; background-position:center;  background-size: cover; }
.aside-header {padding: 0.5em; text-align: center; margin: 0.5em 0.5em; background-color: wheat; color: black;  }
aside p { padding: 0.5em 1em 0em 1em; text-align:center; }
aside ul { 
    padding-left: 1.5em; 
    padding-bottom: 1em;
    margin-bottom: 0.5rem;
}
aside li { padding: 0.5em 0.5em 0em 0.5em; margin: 0;  }

.conclusion {color: red; font-weight: bold; }

.no-features{margin: 0 auto;}
.no-features ul{display: flex; flex-direction: row; justify-content: space-evenly; padding: 0 1rem; margin: 0 auto;}
.no-features li{display: inline; padding-right: 0em; font-size: 1.2rem; font-style: italic;margin: 0 0.5em;; }
.no-features span{color: red; font-weight: bold;}

footer{
    grid-area: footer;
	display: flex; 
	width: 100%;  
    gap: 1rem;
    padding: 0.5rem 2rem;
	border: 2px solid wheat; 
	justify-content: space-between; 
	background: radial-gradient(24rem circle at bottom, yellow,orange, red);
}
footer section{
	padding: 0.5rem 0.5rem;
	background: beige;
	border: 2px solid wheat;
	text-align: center;
}
.trademark{display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 0.5rem;}
footer p{ padding-left: 1em;}
footer h3{text-align: center; margin-bottom:  0.5em;}
footer li{ display: inline;}
footer section img {height: 6rem;}

@media (max-width: 1440px) {
    .container{
        width: 100vw;
        margin: 1vw;
        grid-template-columns: repeat(3,1fr);
        grid-template-areas: 
            "aside-left main aside-right"
             "footer footer footer";
            }
    main, main header,.contacts,.no-features ul,.services, footer{
        display: flex;
        flex-direction: column;
    }
    .no-features li, footer li{display: block;}

    main{gap: 0.5rem;}
    
    main header img,#p1{display: none;}

    .Pict img{height: 100px; }

    .slogan{font-size: 3vh;}

    .adequate-pricing{font-size: 1.5rem;}

    .no-features{margin: 0 auto;}
        
    .aside-picture {height: 10rem;}
}


@media (max-width: 600px) {
    .container{
        width: 100vw;
        margin: 1vw;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "main"
            "aside-left"
            "aside-right"
            "footer";
            }
    main, aside, footer{
        width: 96vw;
        margin: 1vw;
    }
    main{
        display: flex;
        flex-direction: column;
    }
    main header{ flex-direction: column;}
    main header img{display: none;}

    #p1{display: none; }

    .Pict img{ height: 100px; }
    .slogan{font-size: 3vh; }

    .contacts{ flex-direction: column; }

    .adequate-pricing{font-size: 1.5rem;}

    .no-features ul{flex-direction:column;}
    .no-features li{display: block; }

    .services{flex-direction: column; }
    
    footer{ flex-direction: column; }
    footer li{ display: block; }

    .aside-picture { height: 10rem; }
}