{box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {
font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
front-size: calc(16px+0.390625vw)
margin:0;

}

.masterhead {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0em;
background-color: #D7D0C2;
padding:10px 30px;
flex-wrap: wrap;
}
.masterhead .logo {
Font: 2em;
font-weight:bold;
text-decoration: none;
transition: color 0.3s ease;
}

.masterhead .logo:hover {
color: #CDD5C6;
}

nav.main {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}

nav.main a{
text-transform: uppercase;
text-decoration: none;
background-color:#D7D0C2;
color: darkgray;
margin-left: 15px;
transition: color 0.5s ease, tranform 0.5 ease; 
}


nav.main :link {
text-transform: uppercase;
text-decoration:none;
background-color: #D7D0C2;
color: darkgrey;
}

nav.main a:visited {
color: darkred;
}

nav.main a:hover {
background-color:#D7D0C2;
color:blue;
transform: translateY(-2px);
}

.hero {
padding: 1em;
height:100vh;
display:flex;
flex-direction: row;
justify-content:flex-start;
align-items: flex-end;
}

.index-pic {
  background: darkslategray url(../images/company.jpg) no-repeat fixed center;
  background-size: cover;
}

.index-pic2 {
  background: url(../images/homepage.jpg) no-repeat fixed center center;
  background-size: cover;
}

.big {
min-height:100vh;
background-color:#B7BCBF;
color:darkslategray;
padding:2em 4em 1em;
display:flex;
flex-direction: row;
justify-content: flex-end;  
align-items:baseline;
}

.big div {
width:60%;
max-width:70%;
padding-left:1em;



}

.big hgroup {
font-style:bold;
font-size: x-large;
padding-left:5em;
padding-top: 2em;



}

article {
background-color:#CDD5C6;
width:100%;
max-width:840px;
padding: 1em;
margin: 0 em;



}

article.hero-article {
width:100%;
max-width: 840px;
text-align: end;
padding: 1em 2em 1em 4em;
margin-left: 5em;
font-size: xx-large;
}


h1 {
font-size: 5em;
line-height:60%;
margin: 0;

}

p {
margin: 1.5em

}

.sticky{
position:sticky;
top: 4em;


}

.gallery {
min-height:100vh;
height:auto;
background-color:#CDD5C6;
display: flex;
justify-content: center;
align-items: center;
display:flex;
flex-direction:row;
flex-wrap:wrap;

}

.card {
width:350px;
height:500px;
background-color:#B7BCBF
margin:0.5em;
overflow:hidden;
border: radius 10px;
transition: background-color 0.3s ease, border-radius 0.3s ease;
}

.card:hover {
background-color:#FFE2C3;
border-radius: 30px ;
transform: translateY(-5px);
}

.card img {
width:100%;
max-height:64%;
border-top-left-radius:30px;
border: top right radius 30px;

}
.card p{
padding: .5em;
font: size 0.8em;

}
.card .span {
width: 100px;
height: 100px;
background:#FFE2C3;
color:#FFE2C3;

}




.slide-left {
	-webkit-animation: slide-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-10-19 20:40:5
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}

/* responsive design smart phone */

@media (max-width:600px) {
 {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {
font-family:arial sans-serif
front-size: calc(16px+0.390625vw)
margin:0;

}

.masterhead {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0em;
background-color: #D7D0C2;
padding:10px 30px;
flex-wrap: wrap;
}
.masterhead .logo {
Font: 2em ;
font-weight:bold;
text-decoration: none ;
transition: color 0.3s ease;

}

.masterhead .logo:hover {
color: #CDD5C6;
}

nav.main {
display: flex ; 
flex-wrap: wrap;
justify-content:  flex-end;
}

nav.main a{
text-transform: uppercase;
text-decoration: none ;
background-color:#D7D0C2;
color: darkgray ;
margin-left: 15px;
transition: color 0.5s ease,  tranform 0.5 ease; 
}


nav.main :link  {
text-transform: uppercase;
text-decoration:none;
background-color: #D7D0C2 ;
color: darkgrey;
}

nav.main a:visited {
color: darkred  ;
}

nav.main a:hover {
background-color:#D7D0C2 ;
color:blue;
transform: translateY(-2px);
}

.hero {
padding: 1em;
height:100vh;
display:flex;
flex-direction: row ;
justify-content:flex-start ;
align-items: flex-end;


}

.index-pic {
  background: darkslategray url(../images/company.jpg) no-repeat fixed center;
  background-size: cover;
}

.index-pic2 {
  background: url(../images/homepage.jpg) no-repeat fixed center center;
  background-size: cover;
}

.big {
min-height:  100vh ;
background-color:#B7BCBF;
color:darkslategray;
padding:2em 4em 1em;
display:flex;
flex-direction: row ;
justify-content: flex-end   ;  
align-items: baseline ;
}

.big div {
width: 100%;
max-width:80%;
padding-left:1em;


}

.big hgroup {
font-style:bold;
font-size: xx-large ;
padding-left:  6em;
padding-top: 2em;



}

article {
background-color:#CDD5C6;
width:100% ;
max-width:840px;
padding: 1em;
margin: 0em ;



}

article.hero-article {
width:100%;
max-width: 840px ;
text-align: end;
padding: 1em 2em 1em 4em;
margin-left: 5em;
font-size:  large;
}


h1 {
font-size: 5em;
line-height:60%;
margin: 0;

}

p {
margin: 1.5em

}

.sticky{
position:sticky;
top: 4em;


}

.gallery {
min-height:100vh;
height:auto;
background-color:#CDD5C6 ;
display: flex;
justify-content: center;
align-items: center ;
display: flex;
flex-direction:row;
flex-wrap: wrap;

}

.card {
width:350px;
height:500px;
background-color:#B7BCBF
margin:0.5em;
overflow: hidden;
border: radius 10px ;
transition: background-color 0.3s ease, border-radius 0.3s ease ;
}

.card:hover {
background-color:#FFE2C3;
border-radius: 30px ;
transform: translateY(-5px) ;

}

.card img {
width:100%;
max-height:  64%;
border-top-left-radius:30px ;
border: top right radius 30px;

}
.card p{
padding: .5em ;
font: size 0.8em;

}
.card .span {
width: 100px ;
height: 100px;
background:#FFE2C3 ;
color:  #FFE2C3;


}




.slide-left {
	-webkit-animation: slide-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-10-19 20:40:5
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}