/* hero styles */
.hero { 
  text-align: center;
  height:400px;
  position:relative;
}

.hero h1 { 
  font-family:"Kanit", sans-serif;
  font-weight:900;
  font-style: normal;
  text-transform: uppercase;
  position:absolute;
  top: 20%; 
  color:white;
  text-align: center;
  width:100%;
  -webkit-text-stroke: 1px #333;
}

.lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  gap: 0;
  background-color: #CCCCCC;
  height:100%;
}
  
.lane {
  height:100%;
  padding-top: 100%;
  background-position: center;
  overflow: hidden;
  background-color:#222;
  text-align: center;
  background-repeat:no-repeat; 
  background-position:center;
  background-blend-mode:soft-light;
  transition: 0.3s;
}

.lane h3 {
  font-size:14pt;
  text-align:center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  width:75%;
  margin:auto;
  
  background-color: rgba(96, 95, 99, 0.75);
  padding:0.5rem 0.75rem;
  border-radius: 0.5rem;
}

.lanes a { 
  text-decoration:none; 
  color:white; 
}

.lane:hover { 
  background-color:#b1b1b1;
  cursor: pointer;
}

.lane:hover h3 { 
  background-color:white;
  color:#dc3545;
  border: 2px solid #dc3545;
}

.lanes:hover a:active h3 { 
  color:white; 
  background-color: #dc3545;
}

/* Blast styles */
#blast { 
  text-align: center;
  background-image: url("/template_resource/img/blast.png");
  background-repeat:no-repeat;
  background-position: 50% 60%;
  background-size: 10%;
  padding:7rem;
  padding-top:9rem;
}

#blast .title {
  font-family: "Fascinate Inline", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size:40pt;
  color:#dc3545;  
  -webkit-text-stroke: 1px #333;
  text-align: center;
  margin-bottom: 2rem;
}

#blast .text { 
  width:50%;
  min-width:300px;
  margin:0 auto;
}
   
   /* banner styles */
   .banner {
    font-family:"Kanit", sans-serif;
    text-transform: uppercase;
     background-color: #dc3545;
     color: #fff;
     text-align: center;
     padding: 4rem 0;
     background-image:url('/template_resource/img/website-background.png'); 
     background-repeat:no-repeat; 
     background-size:100%; 
     background-position:center;
     background-blend-mode:soft-light;
   }
   
   .banner img {
     margin-bottom: 2rem;
   }

   .low-banner { 
    background-position: bottom;
   }
   
   .banner h1 {
     font-size: 2.5rem;
     margin-bottom: 1rem;
   }
   
   .banner p {
     font-size: 1.2rem;
     margin-bottom: 2rem;
   }

   .service { 
    padding-top: 5%;  
    margin: auto;
    
   }

   .service .card { 
    border-radius: 0;
    border:none;
   }

   .service .container { 
    padding-bottom:5%;
    border-bottom:1px solid #CCC;
    text-align: center;
   }

   .service .card-title { 
    font-family:"Kanit", sans-serif;
    font-size:24pt;
    text-align: center;
    font-weight:bold;
   }

   .service h4 { 
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:16pt;
    border-top: 1px dashed #CCC;
    padding-top:20px;
   }

   .service ul { 
    width:75%;
    margin:auto;
    min-width:300px;
    list-style: none;
    padding-top:20px;
   }

   .service ul li { 
    margin-bottom: 10px; 
    padding:10px; 
    border-top: 2px solid rgba(192, 18, 18, 0.557);
   }

   #creation .card { 
    border-right:4px solid #dc3545;
   }

   #development .card { 
    border-left: 4px solid #dc3545;
   }
   
   /* Contact styles */
   #contact .container { 
    padding-top:20px; 
   }

   .contact {
     text-align: center;
     padding: 4rem 0;
   }
   
   .contact h2 {
     margin-bottom: 1rem;
   }
   
   .contact p {
     margin-bottom: 2rem;
   }

   .contact .form-control { 
    border-color: black;
   }

   .contact .form-group { 
    margin-bottom: 16px; 
   }

   .contact .card {
      text-align:left; 
      background-color:#b1b1b1;
      border-radius: 0.5em;
   }

   .contact .card-head{ 
    text-align: center;
   }

   .contact .card-footer { 
    text-align:center;
   }

   .contact label { 
    font-weight:bold;
    margin-bottom:6px; 
   }
   
   #blast .btn-danger:hover, .contact .btn-danger:hover { 
    color:black; 
    background-color:#dc3545;
  }

   /* Responsive design */
   @media (max-width: 768px) {
     .banner h1 {
       font-size: 2rem;
     }
   
     .banner p {
       font-size: 1rem;
     }
   }