@charset "utf-8";

/* ROOT SECTION - ANY COLOURS YOU WILL BE USING REPEATEDLY CAN BE DEFINED HERE AS A VARIABLE */
:root {
	--primary-color: #28282a;
	--secondary-color: #0867b1;
	--font-family: 'Roboto', sans-serif, Arial, Verdana, Helvetica;
}

.contactDetails li a {
    display: inline-block;
    margin-top: 0px;
}

.phone-group a {
    display: block;
    line-height: 1.2;     
    margin-bottom: 2px;    
}


body{width:100%; height:auto; float:left; padding:0; margin:0 auto; background-color: #000;; background-image: url('background-image-min.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; font-family:var(--font-family);}
body::before {
  content: "";
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
  z-index: -1; 
}
.header{width:100%; margin:6% 0 0 0; padding:0; text-align:center; float:left;}
.header_content{width:45%; max-width: 1200px; margin:0 auto; padding:4% 5%; text-align:center; display: inline-block;}
.header_logo{width:auto; height:auto; text-align: center; margin:5px; padding:0;}
.header_logo img{max-width:100%;}

.maincontent{width:100%; margin:0; padding:0; float: left;}
.cell_full{width:70%; height:auto; text-align:center; margin:3% 15%; padding:0; display:block; float:left;}
.companyDetails{width:95%; height:auto; float:left; padding:2.5%; margin:0;}
.companyDetails h1{width:100%; height:auto; padding:0; margin:0; font-weight:700; text-transform:capitalize; font-size:28px; line-height:1.5; color:#FFF; display:inline-block;}
.companyDetails p{font-family:var(--font-family); font-size: 20px; line-height: 1.5; color: #FFF; display:inline-block; margin: 1% auto;}

.contactDetails{width:100%; height:auto; float:left; margin:2% auto 0 auto; padding:2% 0; z-index: 1; position: relative;}
.contactDetails::before{content:""; position:absolute; inset:0; background-color:var(--secondary-color); opacity:0.5; z-index:-1; pointer-events:none;}
.contactDetails ul{width:100%; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; gap:20px; list-style-type: none;}
.contactDetails ul li{text-align: center; color: #FFF; font-size:16px; display:flex; align-items:center; gap:8px; justify-content:center;}
.contactDetails ul li a{color: #FFF; text-decoration: none; display:flex; align-items:center; gap:8px; justify-content:center;}
.contactDetails ul li a:hover{opacity:0.7;}
.contactVisual{width:100%; height:400px; float:left; padding:0; margin:0;}
.contactVisual iframe{width:100%; height:100%; border:none; filter: grayscale(100%);}

.footer_social{width:100%; height:auto; float:left; margin:0 auto; padding:2.5% 0;}
.footer_social ul{display:flex; flex-wrap:wrap; justify-content:center; padding:0;}
.footer_social li{list-style-type:none; margin:0 .5%; line-height: 1;}
.footer_social img{width:50px; height:50px;}
.footer_social img:hover{opacity:0.7;}
footer{width:100%; height:auto; float:left; margin:0 auto; padding:0; position:relative; display:block;}
.footer{width:100%; height:auto; float:left; padding:2.5% 0; margin:0; color:#FFF; text-align:center;}
.footer span{width:auto; height:auto; display:inline-block; font-size:20px; color:#FFF; margin:0 20px; padding:0; font-weight:300;}
.footer span a, .footer span a:link, .footer span a:active, .footer span a:visited{color:var(--secondary-color); text-decoration:underline; font-weight:300;}
.footer a:hover{opacity: 0.7;}

@media only screen and (min-width:0px) and (max-width:479px){
    .header_content{width:78%; padding:10% 5%;}
    .header_logo{width:90%; margin:20px 5%; padding:0; text-align: center;}
    .cell_full{width:86%; margin:10% 7%;}
    .bullet{display:none;}
    .companyDetails{width:90%; padding:5%;}
    .contactDetails{padding:5% 0; margin: 10% auto;}
    .contactDetails ul{grid-template-columns:repeat(1,1fr);}
    .contactDetails ul li{margin:5% auto;}
    .footer_social li{margin:1% 3%;}
    .footer span{width:100%; margin:2% 0;}
    .footer{margin-top:5%;}
}
@media only screen and (min-width:480px) and (max-width:767px){
    .header_logo{width:90%; margin:20px 5%; padding:0; text-align: center;}
    .cell_full{width:90%; margin:10% 5%;}
    .companyDetails{width:90%; padding:5%;}
    .contactDetails{padding:4% 0;}
    .contactDetails ul{grid-template-columns:repeat(1,1fr);}
    .footer_social li{margin:0 1%;}
    .footer span{width:100%; margin:2% 0;}
}
@media only screen and (min-width:768px) and (max-width:1023px){
    .cell_full{width:92%; margin:3% 4%;}
    .contactDetails ul li{font-size: 12px;}
}
@media only screen and (min-width:1024px) and (max-width:1270px){
    .cell_full{width:80%; margin:3% 10%;}
}