body{ margin:0px; padding: 0px;
font-family: "lato", sans-serif;
font-weight: 100;
font-style:normal;
line-height: 1.5;
font-size: 1.5em; 
color:#FAFAFA;

}

.wrapper {
background: radial-gradient(circle, rgb(210, 244, 210), rgb(208, 174, 179));
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
animation: fadein 1s;
position: relative;  
}

.sixtyfour-text {
font-family: "Space Mono", monospace;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size:32px;
letter-spacing: -1px;
color: rgb(33, 4, 47);
animation: fadeIn 2s ease-out, moveLeft 3s ease-out;
width:45%;
display: block;
}

.logo {
display: block;
font-family: "dystopian", sans-serif;
font-weight: 400;
font-style: normal;
color: black;
font-size:240px;
animation: fadeIn 1s ease-out, moveRight 1s ease-out;
z-index: 100;
width:45%;
}

@media (max-width: 1400px) {
.logo {
font-size:120px;
}

.bigtitle {  font-size:18px !important; color: #ffffff;  padding:10px; display: flex;   }
.bigcases {display:none; font-size:24px !important; color: #ffffff; padding:10px; width:100%; position: absolute;  background-color: rgba(0,0,0,0.3)}

.mobiltitle{display: flex !important; font-family:"Space Mono",monospace;  font-size: 36px !important; color: #ffffff; transition: all 0.5s ease-out;width: 100%; MARGIN-BOTTOM:5PX;}
.mobiltitle::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scale(0); transition: all 0.5s ease-out;}

}


/* Phones  Phones  Phones  Phones  Phones  Phones  Phones  Phones  Phones  Phones */
@media (max-width: 500px) {

.logo {
font-size:120px;
line-height: 160px;
padding-top: 50px;
padding-left: 20px;
}
.logo2{  font-size: 32px !important; padding:20px;}


.sixtyfour-text {
font-size:24px;
letter-spacing: -1px;
color: rgb(33, 4, 47);
animation: none;
display: block;
width: fit-content;
}


body{ margin:0px; padding: 0px; margin-top:-110px;
width: fit-content;     
color:#FAFAFA;

}
.wrapper {
margin-top:0px;
height: 500px;

display: block;

}

.goodbye{font-size: 18px;}

.services {
position: relative;
background-color: black;
color:#fefefe;
display:flex;
width: 100%;

justify-content: center;
align-items: center;

display: flex;
flex-wrap: wrap;
padding-top:50px;}

.about {
position: relative;
color:#262525;
display:flex;
width: 100%;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding:5%; 
}

.column {
flex: 100% !important;
padding: 5% !important;
padding-top: 30px;
padding-bottom:80px;
}

.mobiltitle{display: flex; font-family:"Space Mono",monospace;  font-size: 36px !important; color: #ffffff; transition: all 0.5s ease-out;width: 100%; MARGIN-BOTTOM:5PX;}
.mobiltitle::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; transform: scale(0); transition: all 0.5s ease-out;}

.casep{padding-left:2px !important; background-color: rgba(0,0,0,0.6); padding:2px;  font-size:20px; line-height: 1; margin-bottom:55px; text-align: left;}

.bigtitle {  display:none;  }

.bigcases {display:none; }

.case1{
align-items:normal;
}
.case2 {background-image: url('stelter.webp');  background-repeat: no-repeat;background-position-x: 53% !important; background-size:auto !important; background-attachment: fixed;   
align-items:normal;
}

.case3 {background-image: url('whitelabel.webp');  background-repeat: no-repeat;background-position-x: center; background-size:cover;       
align-items:normal;}

.case4 {background-image: url('nightlife.webp');  background-repeat: no-repeat;background-position-x: center; background-size:105% !important; background-attachment: fixed;       
align-items:normal;}

/*  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  */
}
/*  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  END Phones  */

.mobiltitle{display: none;}


@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes moveLeft {
from {
transform: translateX(-50px);
}
to {
transform: translateX(0px);
}
}

@keyframes moveRight {
from {
transform: translateX(50px);
}
to {
transform: translateX(0px);
}
}

#scene {
position: absolute;
top: 0; 
left: 0;
width: 100%;
height: 100%;
}


.services {
position: relative;
background-color: black;
color:#fefefe;
display:flex;
width: 100%;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
padding-top:50px;

}

.about {
position: relative;
/* background-color: rgb(222, 222, 222); */
color:#262525;
display:flex;
width: 90%;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding:5%; 
background: linear-gradient(to bottom, #FEFEFE 1%, #e6e6e6 13%, #ffffff 100%);
}

.column {
flex: 30%;
padding: 1%;
padding-top: 30px;
padding-bottom:80px;
}

@media (max-width: 600px) {
.column {
flex: 100%;
}  
}

#scene2 {
position: absolute; 
width: 256px;
height: 256px;
}


.botsvg {
fill-rule: evenodd;
stroke-width: 1px;
fill: rgb(210, 244, 210);
width:max-content;
height:max-content;
}

.staffsvg{
fill: #FEFEFE;
fill-opacity: 0.5;
}

.codesvg{
fill:rgb(208, 174, 179);
}

#development{Width: 99px; height:99px;  padding:0px; }
#bot{Width: 99px; height: 99px; padding:0px; }
#staffing{Width: 99px; height:99px;  padding:0px; }

h3{font-size: 38px;  font-family: dystopian; font-weight: 100; text-transform:uppercase; letter-spacing: 2px;}

.case1 {background-image: url('hakkasan.webp');  background-repeat: no-repeat;background-position-x: center; background-size:cover; background-attachment: scroll;       
display:flex;
width: 100%;
height: 100vh;
align-items: flex-end;
padding:0; }

.case2 {background-image: url('stelter.webp');  background-repeat: no-repeat;background-position-x: center; background-size:cover; background-attachment: fixed;       
display:flex;
width: 100%;
height: 100vh;
align-items: flex-end;
padding:0; }

.case3 {background-image: url('whitelabel.webp');  background-repeat: no-repeat;background-position-x: center; background-size:cover;       
display:flex;
width: 100%;
height: 100vh;
align-items: flex-end;
padding:0; }

.case4 {background-image: url('nightlife.webp');  background-repeat: no-repeat;background-position-x: center; background-size:cover;background-attachment: fixed;       
display:flex;
width: 100%;
height: 100vh;
align-items: flex-end;
padding:0; }

.casep{padding-left:20px !important; background-color: rgba(0,0,0,0.6); padding:20px; border 3px solid green;}
.scanlines{background-color: #000000; opacity: 0.6; width: 100%; height: auto; }
.bigtitle { font-size:64px; color: #ffffff; padding:10px;}
.bigcases { font-family: "Space Mono", monospace; font-size:64px; color: #ffffff;   padding:10px; }

/*forms*/
.input-form{
display: block;
padding: 10px;
width: 350px;
height:40px;
font-size: 24px;
border: 1px solid black;
border-radius: 0;
background: #FFFFFF;
color: #000000;
margin: 5px 0px 30px 0px !important;
}

.input-textarea{
display: block;
padding: 10px;
width: 350px;
font-size: 24px;
border: 1px solid black;
border-radius: 0;
background: #FFFFFF;
color: #000000;
margin: 5px 0px 30px 0px !important;
}

label{padding: 0px;}

.input:focus {
outline: none; 
}

button{height:70px; width:120px; font-size: 24px;  background-color: #000000; color: #ffffff; border: 1px solid black;  border-radius: 0; padding: 10px; }

button:hover {
background: transparent;
color:#000000;
transition: all 0.2s ease-in-out;
cursor: pointer;
}

#footer{
position: absolute;
top:120px;
margin:0px; padding:0px;  
opacity: 0.5;}

#thankyou{
background-color: #efeeae;
color:#000000;
opacity:0;
transition: all 0.3s ease-in-out;
position: relative;
padding:5px 5px 5px 5px !important;
margin-top: 10px;
border-radius: 10px;
font-family: "Space Mono",monospace;
text-transform: uppercase;
top:20px;
}

#goodbye {
position: relative;
width: 100%;
height: 300px;
background-color:#4c4135;
justify-content: center;
align-items: center;
flex-wrap: wrap;
/* yea nope. 
background-image: url('casestudies.webp');
background-repeat:no-repeat;
background-blend-mode:multiply;  
filter: blur(2px);
border:0px !important; */
}

.logo2 {
font-family: "Space Mono", sans-serif; 
text-transform: uppercase;
font-weight: 400;
font-style: normal;
color:#87735f;
font-size:48px;
align-items: center;
/* margin: auto; */
text-align: center;
}

/* Container to hold buttons and make sure they are centered and can wrap */
.buttons {
display: flex;
flex-wrap: wrap; /* Allows buttons to wrap onto the next line if needed */
justify-content: center;
gap: 10px;
z-index: 9999;
}

/* Styling for each button */
.confettiButton {
border: none;
background-color: transparent;
cursor: pointer;
transition: transform 0.2s ease; /* Smooth transition for hover and click effects */
height:70px;   font-size: 24px;  background-color: #000000; color: #ffffff; border: 1px solid black;  border-radius: 0; padding: 10px;  
}


/* Hover effect to scale up the button */
.confettiButton:hover {
background: transparent;
color:#000000;
transition: all 0.2s ease-in-out;
cursor: pointer;
}