@charset "utf-8";

:root {
	--primary-color: #E01D7A;
	--secondary-color: #003E69;
	--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:0% 0 0 0; padding:0; text-align:center; float:left;}
.header_content{width:90%; max-width: 500px; margin:0 auto; padding:7.5% 5% 0 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%;}
.header_logo img {
    width: 100%;     /* logo takes 30% of parent width */
    height: auto;
}


.maincontent{width:100%; margin:0; padding:0; float: left;}
.cell_full{width:70%; height:auto; text-align:center; margin:0% 15%; padding:0; display:block; float:left;}
.companyDetails{width:95%; height:auto; float:left; padding:6% 0 8% 0; margin:0;}
.companyDetails h1 {width:100%; height:auto; padding:0; margin:10px 0 5px 0;   font-weight:700; text-transform:capitalize; font-size:3rem; line-height:1.2; color: var(--secondary-color); display:inline-block;}
.companyDetails p {font-family:var(--font-family); font-size:2rem; line-height:1.2; color: var(--primary-color); display:inline-block; margin:5px 0 0 0; font-weight:bold; font-style:italic;}

.contactDetails{width:100%; height:auto; float:left; margin:0 auto; padding:2.5% 0 7.5% 0; z-index: 1; position: relative;}
.contactDetails::before{content:""; position:absolute; inset:0; background-color:var(--secondary-color); opacity:1; z-index:-1; pointer-events:none;}
.contactDetails ul{width:100%; margin:0; padding:20; 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%);}
.contactButtonWrapper {text-align: center; margin: 3px 0;}
.contactButtonWrapper p {font-size: 1.5rem; font-weight: bold; margin-bottom: 15px; color: #FFF;}
.emailButton {max-width:72%; background-color: var(--primary-color); color: #FFF; padding: 15px 30px; border-radius: 8px; text-decoration: none; font-size: 1.2rem; font-weight: 300; display: inline-block; transition: background-color 0.3s ease;}

footer{width:100%; height:auto; float:left; margin:0 auto; padding:0; position:relative; display:block;}
.footer{width:100%; height:auto; float:left; padding:0% 0; margin:0; color:#FFF; text-align:center;}
.footer span{width:auto; height:auto; display:inline-block; font-size:12px; color:#FFF; margin:0 20px; padding:0; font-weight: 350;}
.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;}
    .header_content{padding:2% 5% 0 5%; text-align:center; display: inline-block;}
    .cell_full{width:100%; padding:0; margin:0; display:block; text-align:center;}
    .companyDetails{display:inline-block; text-align:center; width:auto; padding:10% 0;}
    .companyDetails h1{font-size:2.5rem; font-weight:bold; margin:0.5em 0;}
    .companyDetails p{font-size:1.8rem; font-style:italic; margin:0.5em 0;}
    .contactDetails{padding:5% 0 18% 0;}
    .contactDetails ul{grid-template-columns:repeat(1,1fr);}
    .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% 5px 5%; padding:0; text-align: center;}
    .header_content{padding:2% 5% 0 5%; text-align:center; display: inline-block;}
    .cell_full{width:90%; margin:0% 5%;}
    .companyDetails{width:90%; padding:2%;}
    .contactDetails{padding:4% 0 18% 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:0% 4%;}
    .companyDetails{padding:2.5% 0%;}
    .contactDetails ul li{font-size: 12px;}
    .contactDetails{padding:4% 0 8% 0;}
    
}
@media only screen and (min-width:1024px) and (max-width:1270px){
    .cell_full{width:80%; margin:0% 10%;}
    .contactDetails ul li{padding:4% 0 8% 0;}
    .companyDetails{padding:0% 5% 5% 0; margin:0% 0;}
}