@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: #8ABB31;
	--font-family: 'Roboto', sans-serif, Arial, Verdana, Helvetica;
}
body{width:100%; height:auto; float:left; padding:0; margin:0 auto; background-color: #000;; background-image: url('background-image.png'); 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;}
#maincontent h1 {font-size: 3rem; font-weight: bold; line-height: 1.2;}
.cell_full{width:100%; height:auto; text-align:center; margin:0%; 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; 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:4% 0;z-index:1;position:relative;}
.contactDetails ul{width:40%;margin:0 auto;padding:0;display:grid;grid-template-columns: repeat(2,1fr);gap:40px;list-style-type:none;align-items:start;justify-content:center;}
.contactDetails ul .left-group{display:flex;flex-direction:column;gap:12px;}
.contactDetails ul .left-group li{display:flex;align-items:center;gap:8px;justify-content:flex-start;color:#FFF;font-size:16px;text-align:left;padding:0 8%;}
.contactDetails ul .left-group li a{color:#FFF;text-decoration:none;display:flex;align-items:center;gap:8px;justify-content:flex-start;pointer-events:none;}
.contactDetails ul .left-group li a:hover{opacity:0.7;}
.contactDetails ul .left-group li a.allowLink{pointer-events:auto;}
.contactDetails ul li.location{display:flex;align-items:flex-start;gap:8px;justify-content:flex-start;text-align:left;color:#FFF;font-size:16px;line-height: 1.4;padding:0 14%;}
.social_icon img{border-radius:40px; max-width:36px; max-height:36px;}

.contactSection{display:flex;width:100%;height:450px;text-align: left;}
.contactVisual{width:50%;height:100%;padding:0;margin:0;}
.contactVisual iframe{width:100%;height:100%;border:none;filter:grayscale(100%);}
.contactInfo{width:45%;height:100%;background-color:#010C22;color:#fff;padding:0 2.5%;display:flex;flex-direction:column;justify-content:center;}
.contactInfo h2{font-size:22px;line-height:1.6;margin-bottom:15px;font-weight:600;}
.contactInfo .highlight{color:#8ABB31;font-size:15px;font-weight:500;margin-bottom:20px;}
.contactInfo ul{padding:0;margin:0;}
.contactInfo ul li{font-size:15px; margin:0 0 10px 16px;}
.contactInfo ul li .dot{display:none; width:8px;height:8px;background-color:#8ABB31;border-radius:50%;}
.contactInfo ul li::marker{color: #8ABB31; font-size:18px;}


footer{width:100%; height:auto; float:left; margin:0 auto; padding:0; position:relative; display:block;}
.footer{width:96%; height:auto; background-color:#081335; float:left; padding:4% 2% 4% 2%; margin:0; color:#FFF; text-align:center;}
.footer span{width:auto; height:auto; display:inline-block; font-size:18px; color:#FFF; margin:0 0 20px 0; 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_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;}
    .contactDetails ul{grid-template-columns:repeat(1,1fr); width:90%;}
    .contactDetails ul li a{pointer-events:auto;}
    .contactDetails ul .left-group li a{pointer-events:auto;}
    .contactDetails ul .left-group li{padding:0;}
    .contactDetails ul li.location{padding:0;}
    .contactSection{display: inline-block; height:auto;}
    .contactVisual{width: 100%;}
    .contactInfo{width: 90%; padding:0 5% 4% 5%;}
    .contactInfo h2{font-size:18px; text-align: center;}
    .footer_social li{margin:1% 3%;}
    .footer span{width:100%; margin:2% 0;}
}
@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{width: 70%; grid-template-columns:repeat(1,1fr);}
    .contactDetails ul li.location{padding:0;}
    .contactDetails ul li a{pointer-events:auto;}
    .contactDetails ul .left-group li a{pointer-events:auto;}
    .contactDetails ul .left-group li{padding:0;}
    .contactSection{display: inline-block; height:auto;}
    .contactVisual{width: 100%;}
    .contactInfo{width: 90%; padding:0 5% 4% 5%;}
    .contactInfo h2{font-size:18px; text-align: center;}
    .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;}
    .contactDetails ul{width: 95%;}
    .contactInfo{width: 70%; padding:0 15px;}
    .contactInfo h2{font-size: 18px;}
}
@media only screen and (min-width:1024px) and (max-width:1270px){
    .cell_full{width:80%; margin:3% 10%;}
    .contactDetails ul{width:72%;}
    .contactDetails ul .left-group li{padding:0 15px;}
    .contactInfo{width: 66%; padding:0 25px;}
    .contactInfo h2{font-size:19px;}
}