@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: #C01212;
	--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.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; font-family:var(--font-family);}
.header{width:100%; margin:6% 0 0 0; padding:0; text-align:center; float:left;}
.header_content{width:90%; max-width: 1200px; margin:0 auto; padding:2% 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: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(2,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:96%; height:auto; float:left; padding:2.5% 2%; 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 (max-width: 479px) { /*Chat GPT Phone adjustment code*/
    body{background-image: url('banner-image-mobile.png');}
    .header_logo {
        width: 70%;          
        margin: 10px 15%;  
        padding: 0;
        text-align: center;
    }
    .cell_full {
        width: 95%;         
        margin: 2% 2.5%;
    }
    .companyDetails {
        width: 95%;         
        padding: 3%;
    }
    .contactDetails {
        padding: 3% 0;
    }
    .contactDetails ul {
        grid-template-columns: repeat(1, 1fr);
    }
    .footer_social li {
        margin: 1% 2%;
    }
    .footer span {
        width: 98%;
        margin: 1% auto;
    }
}

/*ORIGINALCOPY OF PHONE SCREEN

@media only screen and (min-width:0px) and (max-width:479px){
    .header_logo{width:90%; margin:20px 5%; padding:0; text-align: center;}
    .cell_full{width:86%; margin:10% 7%;}
    .companyDetails{width:90%; padding:5%;}
    .contactDetails{padding:5% 0;}
    .contactDetails ul{grid-template-columns:repeat(1,1fr);}
    .footer_social li{margin:1% 3%;}
    .footer span{width:96%; margin:2.5% 2%;}    
}
/**/

@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%;}
}