*{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
html{
 font-family: 'Roboto Thin', sans-serif;
 font-size: 24px;
 scroll-behavior: smooth;
}
/* Styling for the top navifgation and social media icons */
.navigation ul li {display: inline-block; padding: 5px; font-size: 20px;text-decoration: none;}
.navigation{width: 100%; height: 88px; background:#201E1E; color: white;}
.navigation ul li {display: inline-block; padding: 5px; font-size: 20px;text-decoration: none;}
nav a {
    position: relative;
    display: inline-block;
    margin: 25px 25px;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 100;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.2em;
}
nav a:hover, nav a:focus {outline: none;}
.btn_effect a span {
    position: relative;
    display: inline-block;
    padding: 3px 15px 0;
    background: #F58634;
    box-shadow: inset 0 3px #000000;
    -webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    transition: background 0.6s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
} 
.btn_effect a span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ED3237;
    color: #000000;
    font-weight: bold;
    text-align: center;
    content: attr(data-hover);
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    transform: rotateX(270deg);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
} 
.btn_effect a:focus span {background: #ED3237;} 
.btn_effect a:hover span::before, .ij-effect-20 a:focus span::before {
-webkit-transform: rotateX(10deg);  
-moz-transform: rotateX(10deg);
transform: rotateX(10deg);
}
.social-media-icons{float: right;}
/* Styling for the contents */
.contents_container{
  width: 100%;
  height: auto;
  text-align: center ;
}
.contents_heading{
 font-size: clamp(1rem, 3vw, 1.55rem);
}
.banner_wrapper{  
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
}
.banner_wrapper img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter: brightness(0.8);
  transition: all 0.3s;
  z-index: -1;
}
.banner_wrapper img:hover{
 transform: scale(1.25);
 filter: brightness(1);
}
.image-text{
 display: none;
 position: absolute;
 bottom:50%;
 left: 40%;
 color: white;
 background-color: rgba(245, 134, 52, 1);
 padding: 5px;
 font-size: 2.5em;
}
/* Makng the Navigation and Banner responsive */
@media screen and (max-width: 878px){
 .social-media-icons{display: none;}
 .image-text{
  bottom: 35%;
  left: 35%;
  font-size: 0.85em;
 }
}
.apps-column{
  float:left;
  width: 33.33%;
  padding: 10px;
  height: 500px;
  color: #000;
  text-align: center;
  padding: 1.5%;
}
.apps-column img{
	border:2px solid #CCCCCC;
	max-width: 100%;
	height: auto;
}
.contents_text{
 font-family: 'Roboto Thin' ;
 font-size: clamp(0.80rem, 1.85vw, 1.5rem);
}
.apps-row:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 980px){
  .apps-column {
    width: 100%;
  }
}
.design-button {                                       
    color: #F58634;                                     
     text-align: center;                                                                              
     font-size: 1.1em;  
     padding: 0.5%;
     margin-top: 10px;                                                                                                        
}                                                                              
.design-button a{                                      
    color:inherit;                                      
    text-decoration: none;                                      
    display: inline-block;                                      
    border: 1px solid #000;                                      
    padding: 10px 15px;                                     
    border-radius: 3px;                                     
   }                                                                               
.design-button a:hover{                                        
    background-color: #F58634;                                       
    transition:0.2s;                                        
    color:#fff;                                     
}  
.design-row-1st4{
 height: auto;
 width: 100%;
 text-align: center;
 color: #000000;
 background-color: #CB0708;
 background-color:#fff ;
}
.design-column-1st4{
  float:left;
  width: 25%;
  height: auto;
}
.design-column-1st4 img{
  border:2px solid #CCCCCC;
	max-width: 100%;
	height: auto;
}
.design-row-1st:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 980px){
  .design-column-1st4{
    width: 100%;
  }
}
.design-row-2nd4{
 height: 300px;
 width: 100%;
 text-align: center;
 color: #000000;
 background-color:#fff ;
}
.design-column-2nd4{
  float:left;
  width: 25%;
  height: auto;
}
.design-column-2nd4 img{
  border:2px solid #CCCCCC;
	max-width: 100%;
	height: auto;
}
.design-row-2nd:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 980px){
  .design-column-2nd4{
    width: 100%;
  }
}
.design-row-3rd4{
 height: 300px;
 width: 100%;
 text-align: center;
 color: #000000;
 background-color:#fff ;
}
.design-column-3rd4{
  float:left;
  width: 25%;
  height: auto;
}
.design-column-3rd4 img{
  border:2px solid #CCCCCC;
	max-width: 100%;
	height: auto;
}
.design-row-3rd:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 980px){
  .design-column-3rd4{
    width: 100%;
  }
}
.design-row-4of4{
 height: 300px;
 width: 100%;
 text-align: center;
 color: #000000;
 background-color:#fff ;
}
.design-column-4of4{
  float:left;
  width: 25%;
  height: auto;
}
.design-column-4of4 img{
  border:2px solid #CCCCCC;
	max-width: 100%;
	height: auto;
}
.design-row-4of4:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 980px){
  .design-column-4of4{
    width: 100%;
  }
}
/* Styling for the footer */
.clearfooter {
    clear: both;
    }
footer{
    position: relative;
    width: 100%;
    bottom: 0;
    text-align: center;
}
.footer-contacts{
	background-color: #000;
	color: #fff;
}
.footer-socials{
	background-color: #F58634 ;
	color: #000000;
	text-align: center;
}
.footer-socials h2{
	padding-top: 15px;
}
.footer-socials ul li {
	display: inline-block;
  padding: 15px;
}
.footer-socials a{
	color: #000000; 
  cursor: pointer;
  font-size: 4rem;
}
/* Contact Form*/
.form-container{
	background-color: #ED3237;
	color: #fff;
 	height: auto ;
	 display: flex;
 	align-items: center;
 	justify-content: space-evenly;
}
.contact-left{
 display: flex;
 flex-direction: column;
 align-items: start;
 gap: 20px;
}
.contact-left-title h2{
 font-weight: 400;
 color: #000000;
 font-size: 1.8rem;
 margin-bottom: 5px;
}
.contact-left-title hr{
 border: none;
 width: 120px;
 height: 5px;
 background-color: #fff;
 border-radius: 10px;
 margin-bottom: 10px;
}
.contact-inputs{
 width: 275px;
 height: 50px;
 border: none;
 outline: none;
 padding-left: 25px;
 font-weight: 500;
 color: #666;
 border-radius: 50px;
}
.contact-left textarea{
 height: 140px;
 padding-top: 15px;
 border-radius: 20px;
}
.contact-inputs:focus{
 border: 2px solid red;
}
.contact-inputs::placeholder{
 color: grey;
}
.contact-left button{
 display: flex;
 align-items: center;
 padding: 5px 10px;
 font-size: 18px;
 color: #fff;
 gap: 5px;
 border-radius: 25px;
 background: linear-gradient(180deg, #ED3237, #F58434);
 cursor: pointer;
 margin-bottom: 20px;
}
.contact-left button img{
 height: 15px;
}
.footer-bottom{
	text-align: center;
  background-color:#1f1e1f;
  color: #ffffff;
	width: 100%;
	height: auto;
}
.footer-bottom ul li{
    display: inline-block;
		padding: 0.5em;
}
.footer-bottom ul li a{
	text-decoration: none;
	color: #ffffff;
}
.footer-bottom.coderlink a{
 text-decoration: none;
 color: red;
}