:root {
    --red-main: #BF1E2D;
    --red-secondary: #dc3544;
    --dark: #403c3c;
}

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

html, body {
    margin: 0;
    padding: 0;
}

#body, #home {
  /*  background-color: var(--dark);
    background-image: radial-gradient( #403C3C, black);
    background-attachment: fixed;*/
    background-color: black;
	background-image: url('res/hero1280.avif');
	background-size: cover;
	background-attachment: fixed;
}
#header {
    width: 98vw;
    height: 5rem;
    background-color: darkgray;
    background-image: radial-gradient(lightgray, darkgray);
    position: sticky;
    border-radius: 15px;
    z-index: 2;
    border-color: var(--red-main);
    border-width: 3px;
    border-style: solid;
    box-sizing: border-box;
    top: 10px;
    margin: 0 auto;

}

#logo {
    float: left;
    margin: 5px;
}

#logo img {
    height: calc(5rem - 16px);
    object-fit: contain;
}

#navbar {
    float: right;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    line-height: calc(5rem - 6px);
    position: absolute;
    right: 25%;
    width: 50%;
    text-align: center;
    gap: 2px;
}

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

/*#curlink, .navlink:hover,  {
    color: var(--red-main);
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-underline-offset: 0.5rem;
} */

/* #home .homelink, #services .serviceslink, #about .aboutlink, #contact .contactlink, .homelink:hover, .serviceslink:hover, .aboutlink:hover, .contactlink:hover {
	color: var(--red-main);
	text-decoration: underline;
	text-decoration-thickness: 0.2rem;
	text-underline-offset: 0.5rem;


} */


/* active page */
#home .homelink .navtab,
#services .serviceslink .navtab,
#about .aboutlink .navtab,
#contact .contactlink .navtab,

/* hover */
#navbar a:hover .navtab {
  color: var(--red-main);
  text-decoration: underline;
  text-decoration-thickness: 0.2rem;
  text-underline-offset: 0.5rem;
}



.serviceslink:hover .dropdownlist, .aboutlink:hover .dropdownlist {
	display: block;
}


.navlink {
}

.dropdownlist {
    display: none;
    position: absolute;
    background-color: rgb(0 0 0 / 0.5);
    width: calc(25% - 4px);
/*    border-style: solid;
    border-width: 2px;
    border-color: var(--red-main);*/
    z-index: 2;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    padding: 5px;
}

.dropdownlist .subtab1 {
/*    background-color: grey;*/
    line-height: 1.8rem;
    color: lightgray;
}

.dropdownlist .subtab {
/*    background-color: lightgrey;*/
    line-height: 1.8rem;
    color: lightgray;
}

.dropdownlist .subtab1:hover, .dropdownlist .subtab:hover {
    color: var(--red-main);
}

.subtab:hover, #curtab {
    color: var(--red-main);
}

/* .navlink:hover .dropdownlist, #curlink:hover .dropdownlist {
    display:block;
} */

.serviceslink:hover .dropdownlist, .aboutlink:hover .dropdownlist {
	display: block;
}

.navtab {
}

#quote {
    background-color: var(--red-main);
    background-image: radial-gradient(var(--red-main), darkred);
    border-color: white;
    border-width: 30px;
    border-radius: 30px;
    line-height: calc(3rem - 6px);
    width: 15%;
    margin: 1rem auto;
    position: absolute;
    right: 1rem;
    text-align: center;
    color: lightgray;
}

#quote:hover {
   background-image: radial-gradient(maroon, darkred);
   color: darkgray
}

#wcontainer {
    background-color: black;
}

#container {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    color: silver;

}

#banner {
  /*  background-image: url('res/work2.jpg'); 
    background-size: cover;
    height: 200vh;
    width: 100%;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 30vh;
    z-index: -2;
    position: relative;
    top: -6rem; */
	height: 200vh;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-top: 30vh;
	position: relative;
	z-index: -2;
}

#greeting {
    text-align: center;
    height: 20vh;
    background-color: rgb(0 0 0 / 0.3);
    border-radius: 20px;
    padding: 0px 30px;
    backdrop-filter: blur(4px);
    color: white;
    position: fixed;
    z-index: -1;
}

#fadein {
    background-image: linear-gradient( rgb(0 0 0 / 0), rgb(0 0 0 / 1));
    position: absolute;
    bottom: -6rem;
    height: 150vh;
    width: 100%;
}



.section {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20vh;

}

.title {
    margin: 0 auto;
    text-align: center;
}

.row {
    display: flex;
}

.col1, .col2 {
    flex: 1;
    box-sizing: border-box;
    padding: 1rem;
    justify-content: center;
    align-items: center;
    display: flex;
}

.col1 {
}

.col1 img {
    width: 100%;
}
.col2 {
}

.section2 {
    display: flex;
    flex-direction: column;
    padding: 5rem 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20vh;
    margin-top: 20vh;
   /* background-image: radial-gradient( #403C3C, black);*/
   background-image: radial-gradient(farthest-side, darkgray,  black);
/*   filter: blur(5px);*/

}

.grid {
    display: grid;
    width: 100%;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
/*    filter: blur(-5px);*/
    /*background-color: rgb( 211 211 211 / 0.2);*/
    border-radius: 20px;

}

.cell {
    padding: 5px;
    position: relative;
	display: block;
}



.cimg {
    height: 100%;
    overflow: hidden;
    border-radius: 20px;


}

.ctxt {
    z-index: 1;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    background-color: rgb(0 0 0 / 0.3);
    margin: 5px;
    border-radius: 20px;

}

.cimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
    max-width: 100%;
    transition: transform 0.3s ease;
    filter: grayscale(1);
    border-radius: 20px;
}

.cinfo {
    display: none;
    inset: 5px;
    background-image: linear-gradient(rgb(0 0 0 / 0.2), rgb(0 0 0 /0.5));
    position: absolute;
    align-items: center;
    padding: 5px;
    text-align: center;
    border-radius: 20px;
}

.cell:hover .cimg img {
    transform: scale(1);
    filter: none;
}

.cell:hover .cinfo {
    display: flex;;
}

.cell:hover .ctxt {
    display: none;
}

.section3 {
    display: flex;
    flex-direction: column;
    padding: 5rem 1rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20vh;
    margin-top: 20vh;
   /* background-image: linear-gradient(black, darkgray, black);*/
   background-image: radial-gradient(farthest-side, darkgray,  black);
}

.grid3 {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    border-radius: 20px;

}

.section4 {
    overflow: auto;
    white-space: nowrap;
    background-color: black;
}

.section4 a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;

}

.section4 a:hover {
    background-color: darkgray;
}

.grid4 {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    border-radius: 20px;
}

.cell2 {
    background-color: rgb(211 211 211 / 0.1);
    border-radius: 20px;
    text-align: center;
    padding: 5px;
}

.cell2:hover {
    background-color: rgb(211 211 211 / 0.5);
}

.revbutton {
    margin: 0 auto;
    background-color: rgb(211 211 211 / 0.1);
    line-height: 3rem;
    text-align: center;
    border-radius: 5px;
    width: fit-content;
    padding: 0 10px;
}

.revbutton:hover {
    background-color: var(--red-main);
}

.footer {
    height: 60vh;
    margin-top: 30vh;
/*    background-color: red;*/
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.fcells {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
/*    background-color: white;*/
    height: 40vh;
}


.fcell {
/*    background-color: lightgrey;*/
    color: lightgray;
    padding: 10px;
    margin: 0 auto;
}

.fcell img {
/*    height: calc(5rem - 10px);*/
    width: 90%;
    object-fit: contain;
}

.fc {
    color: lightgray;
    line-height: 20vh;
}

.fq {
    background-color: var(--red-main);
    background-image: radial-gradient(var(--red-main), darkred);
    border-color: white;
    border-width: 30px;
    border-radius: 30px;
    line-height: 3rem;
    width: 50%;
    margin: 1rem auto;
    text-align: center;
    color: lightgray;
}

.fq:hover {
   background-image: radial-gradient(maroon, darkred);
   color: darkgray
}



.fcell ul {
   list-style-type: none;  
}