@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); 

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 
:root {
	--maroon: #251017;
	--orange: #ea6b14;
	--altorange: #cc5500;
	--brightorange: #ff6500;
	--black: #010101;
	--darkgrey: #262626;
	--midgrey: #555555;
	--lightgrey: #ababab;
	--white: #ffffff;
	--creamwhite: #f6f4e8;
} 
body,
html {
    font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
    color: var(--darkgrey);
    background: var(--creamwhite);
    overflow-x: hidden;
    scroll-behavior: smooth;
} 
.disable-hover {
    pointer-events: none;
} 
.reveal {
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.5s ease;
} 
.reveal.active {
    transform: translateY(0);
    opacity: 1;
} 
.reveal-one {
	transition-delay: 0.1s;
} 
.reveal-two {
	transition-delay: 0.2s;
} 
.reveal-three {
	transition-delay: 0.3s;
} 
.reveal-four {
	transition-delay: 0.4s;
}
.reveal3 {
    position: relative;
    left: -30%;
    opacity: 0;
	transition-delay: 0.25s;
    transition-duration: 1s;
}
.reveal3.active3 {
    left: 0;
    opacity: 1;
}
@media (min-width: 1024px) { 
    #small-screens,
    .small-screens,
.client-logo-small 	{
	   display: none;
    } 
 .sideNavOpener.show {
    display: flex;
    opacity: 1;
  }
}

@media (max-width: 1023px) { 
	.desktop {
	   display: none;
    } 
	
	.sideNavOpenerSmall { 
display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer; 
} 

	#small-screens {  
	z-index: 0;
    margin-top: 0;
} 
}

/*
** Side Navigation **************************************************
*/
 
.sideNavOpener.show {
    display: flex !important; 
	position: fixed;
    opacity: 1;
  } 
.sideNavOpener {
  display: none;
  position: fixed;
  top: 2vh;
  right: 2%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
} 
.menuIconContainer {
  display: inline-block;
  cursor: pointer; 
  border: none;
  outline: none;   
} 
.bar1, .bar2, .bar3 {
  width: 25px;
  height: 5px;
  background-color: var(--creamwhite);
  margin: 4px 0;
  transition: 0.5s;
}  
.change .bar1 {
  transform: translate(0, 9px) rotate(-45deg);
} 
.change .bar2 {
	opacity: 0;
} 
.change .bar3 {
  transform: translate(0, -9px) rotate(45deg);
}  
.bx-menu {
  color: #11101d;
  font-size: 35px; 
  margin: 0 15px;
  cursor: pointer;
}  
.sidebar-logo {
	width: 100%;
	margin-top: 2vh;
} 
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  background-color: var(--orange);
  overflow-x: hidden;
  transition: 0.75s ease-in-out;
  padding-top: 60px;
  overflow-y: scroll;
  scrollbar-width: none; 
}
.sidenav>.side-page-link {
	width: 300px;
} 
.sidenav a { 
  text-decoration: none; 
} 
.sidenav .side-page-link {
  padding: 5px 8px 5px 25px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
        color: var(--darkgrey); 
  display: block;
  transition: 0.1s;
}
.sidenav .side-page-link:hover {
  color: var(--creamwhite);
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 30px;
  margin-left: 50px;
}
.sidenav-subjects {
		width: 190px;
        margin: 5px 0 5px 95px;
        height: 30px; 
        background: var(--creamwhite); 
        font-size: 13px;
		font-weight: 600;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: background 0.3s, transform 0.3s;
    }	 
	.sidenav-subjects:hover { 
        background: var(--altorange);  
    } 
	.sidenav-subjects a { 
        color: var(--darkgrey); 
    }	 
	.sidenav-subjects.last-one {  
        margin: 5px 0 15px 95px;
    }	 
	.sidenav-contacts {
		width: 190px;
        margin: 5px 0 5px 95px;
        height: 25px;
        color: var(--darkgrey); 
        background: transparent;
        font-size: 13px;
		font-weight: 600;
        text-align: right;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: background 0.5s, transform 0.5s;
		display: flex;
		align-items: center; 
		flex-wrap: wrap;
    }
	.sidenav-lines{
		border: 1px solid var(--altorange);
	} 
.social-links.side-nav {  
		width: 300px;
        max-height: 35px;
    margin: 2vh 0 5px 100px; 
} 
.social-links.side-nav a { 
    margin: 0 10px 10px 0; 
    background: var(--darkgrey);
        color: var(--creamwhite); 
} 

/*
** Landing Page **************************************************
*/

#landing {
    position: relative;
    height: 100vh;
    overflow: hidden;
} 
#landing.about-page { 
    height: 73vh; 
} 
 

@media (max-width: 1023px) {
	#landing { 
    height: 75vh;  
	width: 100%;  
} 
}

/*
** Header **************************************************
*/

.background{
    margin: 1vh 0.5% 0 0.5%;
	border-radius: 5px;
    height: auto;
    background-image: url(Images/b07.jpg);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	
    animation: breath 30s linear infinite;
} 


@media (max-width: 1023px) {
.background, .over{
    margin: 0;  
	border-radius: 0;
} 
}

@keyframes breath {
    0%   { background-size: 100% 100vh; }
    50% { background-size: 110% 110vh; }
    100% { background-size: 100% 100vh; }
  } 
.over{
	    background: rgba(0,0,0,0.8);
		height: auto;
	border-radius: 5px;
} 


@media (max-width: 1023px) {
.over{
	    background: rgba(0,0,0,0.8);
		height: 75vh;
	border-radius: 5px;
}
}
#header{
    height: 20vh; 
	width: 99%;
    padding: 0 2.5%;
	font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; 
}
.logo{
    height: auto;
    width: 160px; 
	margin-right: 20px;
}  
#header ul li {
    display: inline-block;
    list-style: none;
    margin: 10px 15px;
} 
#header ul li .header-link {
    color: var(--white);
    text-decoration: none; 
    font-weight: 600;
    position: relative;
} 
#header ul li .header-link.active {
    color: var(--orange);
}

#header ul li .header-link:hover {
    color: var(--orange);
} 
#header ul li .header-link:hover::after {
    width: 20%;
}

/******************** Services Dropdown container ********************/

.dropdown {
    position: relative;
    display: inline-block;
} 
.service-dropdown-menu {
	display: flex;
	align-items: center;
    justify-content: center;
    flex-wrap: wrap;
} 
.service-dropdown-menu.active-link {
	color: var(--orange);
} 
.dropdown-menu {
    display: flex; 
	align-items: center;
	justify-content: center;
    height: 0; 
    padding: 0; 
    overflow: hidden;  
    transition: height 0.5s ease, padding 0.5s ease;  
    position: absolute;
    background: var(--darkgrey);
    width: 900px; 
    border-radius: 0 0 10px 10px;	
    top: calc(100% + 6vh); 
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
} 
.service-item {
    flex-basis: 200px;
    text-align: center;  
	cursor: pointer;
	border-radius: 5px;
	padding: 1.5vh 0;
} 
.service-item.active-service { 
    background: var(--orange); 
} 
.service-item:hover { 
    background: var(--orange); 
} 
.service-item .img-container {
    width: 10vh;
    height: 10vh; 
    margin: 1vh auto;
	background: var(--orange);
	border-radius: 50%;
	display: flex;
	align-items: center;
    flex-wrap: wrap;
    justify-content: center;
} 
.service-item .img-container img {
    width: 6vh;
    height: 6vh;  
} 
.service-item a {
    display: block;
    font-weight: bold;
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s;
}  
.projects {
    width: 175px;
    height: 6vh;  
    font-weight: 600;
    border-radius: 50px;
    border: none;
    background: var(--orange);
    color: var(--maroon);
    cursor: pointer;  
} 
.projects.subsidiaries {
    width: 225px;
    height: 6vh;     
} 
.projects.subsidiaries.academy {
    background: teal;
    color: white;     
} 
.projects.subsidiaries.express { 
    background: maroon;
    color: white;     
} 
.projects.contact { 
    margin-top: 1vh;
    background: var(--white);
    color: var(--darkgrey); 
} 
.no-click  { 
	width: 175px; 
} 
.projects.margin-top {
    margin-top: 3vh; 
} 
.projects.margin-bottom {
    margin-bottom: 5vh; 
} 
.projects.inline { 
	 background: var(--white);
} 
.banner-buttons {
	margin-top: 2vh;
	width: auto;
    height: auto; 
}

/*
** Hero Section **************************************************
*/

#over { 
    width: 99%;
    height: 77vh;
    margin: 1vh 0.5%;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
} 


@media (max-width: 1023px) { 
#over { 
    width: 99%;
    height: 60vh; 
} 
}
#over:nth-child(1) { overflow: hidden; } 
#over:nth-child(2) { overflow: hidden; } 
#over:nth-child(3) { overflow: hidden; } 
#over:nth-child(4) { overflow: hidden; } 
#over:nth-child(5) { overflow: hidden; }

/******************** Glide Section ********************/

.background-left {
    width: 74.5%;
    height: 77vh;
	
	display: flex;
    flex-wrap: wrap;
	flex-direction: column;
    justify-content: space-between;
} 

@media (max-width: 1023px) { 
.background-left {
    width: 100%;
    height: 55vh;
	
}  
.hero-0 .left{
	width: 100%;
    height: 55vh; 
	padding-bottom: 5vh;
	display: flex;
    flex-wrap: wrap; 
	flex-direction: column;
    justify-content: flex-end;
	align-items: center;
	text-align: center;
} 

.hero-0 .left h1 {
    font-size: calc(15px + 2vw);  
	width: 100%;
}

.hero-0 .left p { 
	font-size: 15px;  
	text-align: center;
	width: 100%;
}  
}


.background-left.about-page {
    width: 100%; 
} 
.hero-0{
	width: 100%;
    height: 54vh;
	border-radius: 5px;
} 
.hero-0.about-page{ 
    height: 50vh; 
} 
.hero-0 h1 {
    font-size: 3.5vw;
    font-weight: 900;
    color: #ffffff;
	margin-top: 5vh;
} 
.hero-0 h1 span { 
    color: var(--orange); 
} 
.hero-0 p { 
	font-size: 14px;
    color: #ffffff;
    margin-top: 1vh;
} 
.load-1  {
    margin-left: -20%;
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0.75s;
} 
.load-2 {
    margin-left: -20%;
    opacity: 0;
    transition-delay: 0.35s;
    transition-duration: 0.75s;
} 
.load-3  {
    margin-left: -20%;
    opacity: 0;
    position: relative; 
    z-index: 2;
    transition-delay: 0.4s;
    transition-duration: 0.7s;
} 

.load-1-2  {
    margin-left: -20%;
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0.75s;
} 
.load-2-2 {
    margin-left: -20%;
    opacity: 0;
    transition-delay: 0.35s;
    transition-duration: 0.75s;
} 
.load-3-2  {
    margin-left: -20%;
    opacity: 0;
    position: relative; 
    z-index: 2;
    transition-delay: 0.4s;
    transition-duration: 0.7s;
} 

.load-4  {
    margin-left: -20%;
    opacity: 0;
    position: relative; 
    z-index: 1;
    transition-delay: 0.7s;
    transition-duration: 0.7s;
} 
.load-5{
	transform: translateY(5vh);
	opacity: 0;
	transition-delay: 0.10s;
	transition-duration: 0.5s;
}
.load-6{
	transform: translateY(5vh);
	opacity: 0;
	transition-delay: 0.20s;
	transition-duration: 0.5s;
}
.load-7{
	transform: translateY(5vh);
	opacity: 0;
	transition-delay: 0.30s;
	transition-duration: 0.5s;
}
.load-8{
	transform: translateY(5vh);
	opacity: 0;
	transition-delay: 0.40s;
	transition-duration: 0.5s;
} 
.load-9{
	transform: translateY(5vh);
	opacity: 0;
	transition-delay: 0.50s;
	transition-duration: 0.5s;
} 
.load-10{
	transform: translateY(5vh);
	opacity: 0;
	transition-delay: 0.60s;
	transition-duration: 0.5s;
} 
.load-11{
	transform: translateY(5vh);
	opacity: 0;
	transition-delay: 0.70s;
	transition-duration: 0.5s;
} 
.load-12{
	transform: translateY(5vh);
	opacity: 0;
	transition-delay: 0.8s;
	transition-duration: 0.5s;
} 
.background-2{
	border-radius: 5px;
    height: auto;
    background-image: url(Images/b07.jpg);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	 animation: breath 30s linear infinite;
}  
.over-2{ 
	padding: 0 20px;
	    background: rgba(0,0,0,0.8);
		height: auto;
	border-radius: 5px;
} 
.glide_slide{
	height: 100%;
	width: 100%;
	overflow: hidden;
} 
.center{
	display: flex;
	align-items: center;
    justify-content: space-between;
	height: 54vh;
	width: 100%;
} 
.center.about-page{ 
	height: 50vh; 
} 
.center .left{
	flex-basis: 65%;
	margin-left: 1%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: left;
    justify-content: flex-end;
	padding-bottom: 5vh;
} 
.center .left.services{
	flex-basis: 100%;  
	align-items: center; 
	padding-bottom: 13vh;
} 
.center .right{ 
	flex-basis: 35%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
    justify-content: flex-end;
} 

.center .right .img1{ 
	width: auto; 
	height: 45vh;
	margin-top: 7vh;
} 
.center .right .img1.about-page{ 
	width: auto; 
	height: 40vh; 
	margin: 0 5% 5vh 0;
} 
.center .right .img2{
	width: 90%;
}

/******************** Hero Services ********************/

.hero-1{
	width: 100%;
    height: 22vh;
	
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} 
 .background-3{
	 width: 24.5%;
    height: 22vh;
	border-radius: 5px; 
    background-image: url(Images/b07.jpg);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	 animation: breath 30s linear infinite;
} 
.over-3{  
	    background: rgba(0,0,0,0.8);
		height: auto;
	border-radius: 5px;
	width: 100%;
    height: 22vh;
} 
.hero-2{
	width: 100%;
    height: 22vh;
	border-radius: 5px; 
	display: flex;
	flex-direction: column; 
    align-items: center;
	padding: 1.25vh;
}  
.sub-service-icon {
    width: 11vh;
    height: 11vh;
	margin: 2vh 0;
	background: var(--orange);
	border-radius: 50%;
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	cursor: pointer;
} 
.sub-service-icon .icon {
    width: 5vh;
    height: 5vh; 
} 
.hero-2 h3 { 
    font-size: 15px;
    color: #ffffff; 
}
 
 /******************** Exclusive Deal ********************/

.side-banner{
	width: 55%;
	height: auto;
	border-radius: 5px;
} 
.side-banner.small-screens{
	width: 30vw;
	height: auto; 
	margin: 5vh auto;
} 
@media (max-width: 600px) {
	.side-banner.small-screens{
	width: 50vw;
	height: auto; 
	margin: 5vh auto;
}}
.background-4{
	 width: 25%;
    height: 77vh;
	border-radius: 5px; 
    background-image: url(Images/b07.jpg);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	 animation: breath 30s linear infinite;
} 
.over-4{  
	    background: rgba(0,0,0,0.8);
		height: auto;
	border-radius: 5px;
	width: 100%;
    height: 77vh;
} 
.background-right {
    width: 100%;
    height: 77vh; 
	border-radius: 5px;
	padding-top: 5vh;
	align-items: center;
	text-align: center;
} 

.background-right {
    width: 100%;
    height: 77vh; 
	border-radius: 5px;
	padding-top: 5vh;
	align-items: center;
	text-align: center;
}


@media (max-width: 1023px) {
.background-right {
    width: 100%;
    height: auto; 
	border-radius: 5px; 
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ex-btn {
    width: 200px;
	padding: 0 5%;
    height: 35px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    background: var(--black);
    color: var(--white);
    cursor: pointer;
	margin-bottom: 2vh;
}  
}
.exclusive-today {
    width: auto;
    font-size: 12px;
	font-weight: 900;
    color: var(--orange);
	margin: 3vh auto;
} 
.exclusive-today span{
    width: 2vh;
	height: 2vh;
    background: var(--orange);
	 border-radius: 1px;
	 color: var(--orange);
} 
.offer-end {
    width: auto;
    font-size: 13px;
	font-weight: 900;
    color: var(--orange);
	margin-top: 2vh;
} 
.offer-end-timer {
	width: 80%;
	margin: 2vh 10%;
	height: auto;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
} 
.timer {
	width: 23%;
	height: auto;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
	flex-direction: column;
	color: #ffffff;
} 
.count-down {
	width: 100%;
	height: 4vh;
	font-size: 20px;
	font-weight: 600;
} 
.date {
	width: 100%;
	height: 5vh;
	font-size: 11px;
} 
.btn-1 {
    width: auto;
	padding: 0 5%;
    height: 35px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 5px;
    border: none;
    background: var(--black);
    color: var(--white);
    cursor: pointer;
	margin-bottom: 2vh;
} 
.exclusive-deals-1 {
	font-weight: 300;
	font-size: 13px;
	color: #ffffff;
} 
.exclusive-deals-3 {
	font-weight: 900;
	font-size: 25px;
	color: #ffffff;
}

/*
** Pages Backgrounds **************************************************
*/ 

.background.web-development,
.background-2.web-development{ 
    background-image: url(Images/Illustrations/User-Centered.jpg); 
		 animation: none;
}    
.background.web-hosting,
.background-2.web-hosting{ 
    background-image: url(Images/Illustrations/Web-Hosting.jpg); 
		 animation: none;
}    
.background.it-support,
.background-2.it-support{ 
    background-image: url(Images/Illustrations/Cyber-Security-1.png); 
		 animation: none;
}    
.background.graphic-design,
.background-2.graphic-design{ 
    background-image: url(Images/Illustrations/Graphic-Design.png); 
		 animation: none;
}  
.background.subsidiaries,
.background-2.subsidiaries{ 
    background-image: url(Images/Illustrations/Software-Development.jpg); 
		 animation: none;
}  
.background.completed-projects,
.background-2.completed-projects{ 
    background-image: url(Images/Illustrations/Custom-Web.jpg); 
		 animation: none;
} 
 
/* Company Statistics **************************************** */

.stats {
    height: auto;
    margin-top: 5vh;  
	border-radius: 5px;
} 
.stats .counters {
    padding: 1em 1em;
    color: var(--creamwhite);
    text-align: center;
} 
.stats .counters>div {
    max-width: 750px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2vh 30px;
} 

@media (max-width: 600px) {  
.stats .counters>div { 
    grid-template-columns: repeat(1, 1fr); 
    gap: 4vh 30px;
}
}

.stats .counter {
    position: relative;
} 
.stats .counter h3 {
    font-size: 25px;
    margin-bottom: 0.5em;
} 
.stats .counter h4 {
    font-size: 12px;
    font-weight: 500;
}

/*
** Pages Icons **************************************************
*/ 

.service-display {
    margin-top: -8vh;
	margin-bottom: 5vh;
    font-weight: 600;
    width: 16vh;
    height: 16vh;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--white);
	position: relative;  
    background: var(--orange);
} 


@media (max-width: 900px) {
.service-display { 
    margin-top: -7vh; 
    width: 14vh;
    height: 14vh; 
} 
}
.service-display.location {
    width: 12vh;
    height: 12vh;
    margin-top: 5vh;  
	margin-bottom: 2vh;
} 
.service-display.projects-page {   
	margin-bottom: 0;
} 
.service-display img {
    width: 8vh;
    height: 8vh;
} 
.service-display.location img {
    width: 6vh;
    height: 6vh;
} 

/*
** Services Subservices **************************************************
*/ 

.sub-services {
    margin: 0 0.5% 10vh 0.5%;
	display: flex;
	justify-content: space-between;
} 
.sub-services .tab-links{
    font-size: 15px;
    font-weight: 600;
    width:24.5%;
    height: 7vh;
    border: none;
    border-radius: 3px;
    color: var(--white);
    background: var(--darkgrey);
}


@media (max-width: 750px) { 
.sub-services .tab-links{
    font-size: 13px;  
    min-height: 10vh;
}
}

/*
** About Services **************************************************
*/ 
 
.about-services {
    min-height: 25vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 5%;
} 
.about-services.small-home { 
    margin: 0 5%;
} 
.about-services .service-icon-container {
    height: auto;
    width: 23%;
    position: relative;
    overflow: hidden;
    padding: 10px;
    font-size: 12px;
    font-weight: 300;
    text-align: center; 
} 

.about-services .service-icon-container.small-home { 
    width: 25%; 
} 

.about-services .service-icon-container .service-icon {
	width: 12vh;
	height: 12vh;
	background: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
    border-radius: 50%;
	border: none;
	margin: 2vh auto;
} 

.about-services .service-icon-container.small-home .service-icon {
	width: 60px;
	height: 60px; 
} 

.about-services .service-icon-container.small-home .service-icon img {
    width: 40px;
    height: auto;
} 

.about-services .service-icon-container .service-icon img {
    width: 6vh;
    height: auto;
} 

.about-services .service-icon-container h2 { 
    font-size: 15px; 
    color: var(--midgrey);
	font-weight: 600; 
    position: relative;
} 

.about-services .service-icon-container.small-home h2 { 
    font-size: 10px;  
} 

/*
** About Page **************************************************
*/ 

.about-section-container {
	width: 99%;
	margin: 5vh 0.5% 0 0.5%;
} 
.about-section-container.contact {
	width: 99%;
	margin: 0 0.5%;
} 
.about-page-headings {
    width: auto;
	margin-bottom: 2vh;
    font-weight: 900;
    color: var(--darkgrey);
} 
.about-page-headings.our-commitment { 
	margin-top: 5vh;   
} 
.about-page-headings span{
    width: 5vh;
	height: 5vh;
    background: var(--orange);
	 border-radius: 3px;
	 color: var(--orange);
}  

/*
** Banner **************************************************
*/

.about-page-banner{
	width: 100%;
    height: auto; 
	background: radial-gradient(var(--darkgrey), var(--black));
	color: var(--white);
	border-radius: 5px;
	margin: 1vh 0;
}


@media (max-width: 600px) { 
.about-page-banner{  
	width: 99%;
	margin: 1vh .5% 0 .5%;
} 
}
 
.about-page-banner.transparent{ 
	background: transparent;
	color: var(--darkgrey);  
} 
.about-page-banner-left{
	flex-basis: 100%;
	padding: 20px;
} 
.about-page-banner-left.contact-form-container{
	flex-basis: 100%;
	padding: 20px;
	padding-right: 0;
} 
.about-page-banner-left.transparent{ 
	padding: 0;
} 
.about-page-banner h2 {
    font-size: 20px;
	margin-bottom: 2vh;
    font-weight: 900; 
} 
.about-page-banner-left.transparent h1 {
    font-size: 30px; 
}  
.about-page-banner h3 {
    font-size: 15px; 
	margin-bottom: 1vh;
} 
.about-page-banner p { 
	margin-bottom: 3vh;
} 
 
/************************* Clients Logos ************************** */

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
} 

@keyframes slidey {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100%);
    }
} 

.logos {
    overflow: hidden;
    padding: 20px 0; 
    white-space: nowrap;
    position: relative; 
} 

.logosy {
    overflow: hidden;
    padding: 20px 0; 
    white-space: nowrap;
    position: relative; 
	height: 60vh;
	margin: 10vh auto;
}

.logos:hover .logos-slide {
    animation-play-state: paused;
} 
.logos-slide {
    display: inline-block;
    animation: 45s slide infinite linear;
} 

.logos-slidey { 
    animation: 30s slidey infinite linear;
}

.logos-small {
    display: flex;
	flex-direction: column; 
} 

.client-logo {
    height: 15vh;
	border-radius: 5px;
	margin: 0 50px;
    width: auto;  
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.5s;
    cursor: pointer;
    transform: scale(0.9);
} 

.client-logo-small { 
	margin: 2vh auto;
    width: 30%;    
}


@media (max-width: 900px) {
.client-logo-small { 
	margin: 3vh auto;
    height: 15vh;
    width: auto; 
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%); 
    cursor: pointer; 
}
  
}
.client-logo.smaller {
    height: 14vh; 
	margin: 0.5vh 50px 0.5vh 50px;
} 
.client-logo.bigger {
    height: 18vh; 
	margin: 3vh 50px 0 50px;
} 
.client-logo.margins { 
	margin-top: 5vh;
} 
.client-logo:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    transform: scale(1.0);
} 


@media (max-width: 900px) {  
.client-logo {
    height: 15vh;
	border-radius: 5px;
	margin: 0 5px;
    width: auto;  
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.5s;
    cursor: pointer;
    transform: scale(0.9);
} 
.client-logo.smaller {
    height: 14vh; 
	margin: 0.5vh 5px 0.5vh 15px;
} 
.client-logo.bigger {
    height: 18vh; 
	margin: 3vh 10px 0 10px;
} 
.client-logo.margins { 
	margin-top: 5vh;
} 
.client-logo:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    transform: scale(1.0);
} 
}
  
/*
** Headings **************************************************
*/ 

.about-heading {
    width: 100%;
	margin: 5vh 0.5% 1vh 0.5%;
    font-size: 40px; 
    color: var(--darkgrey); 
    text-align: center;
}  

.about-heading-paragraph{
	text-align: center;
    color: var(--darkgrey); 
	margin: 0 5%;
}

@media (max-width: 1023px) { 
.about-heading { 
    font-size: 30px;  
	margin: 5vh 0.5% 2vh 0.5%;
}
}
.about-heading.clients { 
	margin: 10vh 0.5% 0 0.5%;   
}  
.about-heading span { 
    color: var(--altorange);  
}  
.services-heading {
    width: 100%;
	margin: 5vh 0.5%;
    font-size: 30px; 
    color: var(--darkgrey); 
	display: flex;
    align-items: center;  
}  
.services-heading.about-page { 
	margin: 5vh 0;  
}  
.services-heading img{  
	 height: 100px;
	 margin: 0 1% 0 -35px;
}

/*
** Banners **************************************************
*/ 

.enhance-banner{
	width: 99%;
    height: auto;
	margin: 5vh 0.5%; 
	border-radius: 5px;
	 overflow: hidden;
} 
.enhance-banner.contact{  
	padding: 10vh 0;
} 
.enhance-banner.logos{
	width: 99%; 
	margin: 5vh .5%;  
} 
.enhance-banner.clients{ 
	margin-bottom: 0; 
} 
.enhance-banner.small-screens{ 
	width: 99%;
	margin-top: 0;  
}
.enhance-left{
	flex-basis: 100%;
	 padding: 5vh 0;
    color: #ffffff;
	display: flex;
	flex-direction: column;
    flex-wrap: wrap;  
	align-items: center;
	text-align: center;
} 
.enhance-left.logos{ 
	 padding: 0; 
} 
.enhance-left.clients{ 
	padding: 5vh 0 0 0; 
}

.btn-2 {
    width: 175px;
    height: 6vh;
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    border: none;
    background: var(--orange);
    color: var(--darkgrey);
    cursor: pointer;
    margin-top: 6vh;
} 
.btn-2.clients { 
    margin-top: 3vh;
} 
.enhance-left .mission {
    font-size: 30px; 
	margin-bottom: 2vh;
	color: var(--white);
}
 
/*
** Services Learn More **************************************************
*/   
    .learn-more {
    width: 170px;
    height: 5vh; 
    margin: 1vh 0;	
    font-weight: 600;
    border-radius: 50px;
    border: none;
    background: var(--orange);
    color: var(--maroon);
    cursor: pointer; 
}   
.about-img {
	display: flex;
	margin: 7vh auto 2vh auto;
	width: 15%;
	height: auto;   
	border-radius: 50%; 
}  
.clients-paragraph {  
   width: 80%;
   margin: 2vh 10%;
	color: var(--darkgrey);  
	text-align: center;
}


@media (max-width: 900px) { 
.clients-paragraph {  
   width: 90%;
   margin: 2vh 5%;
	color: var(--darkgrey);  
	text-align: center;
}
}

/*
** Pages Backgrounds **************************************************
*/  

.background-about{ 
	border-radius: 5px;
    height: auto;
    background-image: url(Images/Illustrations/Cyber-Security-1.png);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	 
} 


@media (max-width: 1023px) { 
.background-about{ 
	border-radius: 0; 	 
} 
}
.over-about{
	    background: rgba(0,0,0,0.85);
		height: auto;
	border-radius: 5px;
} 
.background-clients{ 
	border-radius: 5px;
    height: auto;
    background-image: url(Images/b07.jpg);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	 
} 
.over-clients{
	    background: rgba(0,0,0,0.8);
		height: auto;
	border-radius: 5px;
} 
.background-service{ 
	border-radius: 5px;
    height: auto;
    background-image: url(Images/Background.jpg);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	 
} 
.over-service{
	    background: rgba(0,0,0,0.8);
		height: auto;
	border-radius: 5px;
} 
.background-contact{ 
	border-radius: 5px;
    height: auto;
    background-image: url(Images/Illustrations/IT-Support-Team.jpg);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	 
} 
.background-contact.software{  
    background-image: url(Images/Technology.jpg); 	 
} 
.background-contact.tech{  
    background-image: url(Images/Illustrations/Custom-Web.jpg); 	 
}  
.background-contact.graphic-1{  
    background-image: url(Images/Illustrations/About-3.jpg); 	 
}  
.background-contact.graphic-2{  
    background-image: url(Images/Illustrations/Logos.png); 	 
} 
.background-contact.graphic-3{  
    background-image: url(Images/Illustrations/Business-Cards.png); 	 
}
.over-contact{
	    background: rgba(0,0,0,0.8);
		height: auto;
	border-radius: 5px;
} 
.bottom-banner{
	width: 99%;
    height: auto;
	margin: 5vh 0.5% 0 0.5%;  
	border-radius: 5px;
	 overflow: hidden;
} 
.bottom-banner.services{
	width: 100%; 
	margin: 0;
margin-bottom: 1vh;	
	border-radius: 5px;
	 overflow: hidden;
} 


@media (max-width: 600px) { 
.bottom-banner.services{ 
margin-bottom: .5vh;	 
} 
}

.bottom-banner-left{
	flex-basis: 100%;
	 padding: 20vh 0;
    color: #ffffff;
	display: flex;
	flex-direction: column;
    flex-wrap: wrap;  
	align-items: center;
	text-align: center;
} 
.bottom-banner-left.services{ 
	 padding: 10vh 0; 
} 
.bottom-banner-left.services.with-padding{ 
	 padding: 10vh 15%; 
} 
.service-display.why-choose-us {
    margin-top: auto; 
	margin-bottom: 2vh;
}  

/* Services **************************************** */

.services-section {
    width: 99%;
    height: auto;
    margin: 5vh .5% 0 .5%;
    border-radius: 4px;
} 
.services-section.services-page {
    width: 100%;
    height: auto;
    margin: 2vh 0 0 0;
    border-radius: 4px;
} 


@media (max-width: 600px) { 
.services-section.services-page { 
    margin: .5vh 0 0 0; 
} 
}

.service-header-container{
	width: 100%;
	min-height: 50vh;
	display: flex;
	justify-content: space-between; 
	flex-wrap: wrap;
} 
.service-header-container .service-header-left{
	position: relative;
	flex-basis: 24.5%;
	min-height: 50vh; 
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	flex-wrap: wrap; 
	background: var(--darkgrey);
	border-radius: 5px;
	padding-bottom: 2vh;
}  

@media (max-width: 900px) { 
.service-header-container .service-header-left{ 
	flex-basis: 49.5%; 
	margin: 0 0 1vh 0;
}  
}

@media (max-width: 450px) { 
.service-header-container .service-header-left{ 
	flex-basis: 99%; 
	margin: 0vh .5% 0.6vh .5%;
}  
}
.service-header-container .service-header-left .wrapper{
	position: absolute;
	height: 35vh;
	width: 100%;
	top: 0;
	border-radius: 5px 5px 0 0;
	background: rgba(204,85,0,0.3);  
} 
.service-header-container .service-header-left .wrapper.home{ 
	height: 25vh;  
} 
.service-header-container .service-header-left .inner-icon{
	position: absolute;
	width: 10vh;
	height: 2vh;
	top: 0;
	background: var(--orange);
	display: flex; 
	justify-content: center;
	align-items: center; 
	flex-wrap: wrap; 
	border-radius: 0 0 4px 4px;
	z-index: 2;
}  
.service-header-container .service-header-left .inner-icon img{ 
	width: 0;
	height: 0; 
} 
.service-header-container .service-header-left .service-illustration{
	height: 25vh;
	width: 100%;
	border-radius: 5px 5px 0 0;
} 
.service-header-container.services-pages .service-header-left .service-illustration{
	height: 35vh; 
} 


@media (max-width: 900px) { 
.service-header-container .service-header-left .service-illustration{
	height: 35vh; 
}  
.service-header-container .service-header-left .wrapper.home{ 
	height: 35vh;  
} 
}
.service-header-container .service-header-left h3{
	font-size: 16px;
	color: var(--white);
	margin-top: 1vh;
} 
.service-header-container .service-header-left.services-page h3{
	font-size: 15px; 
} 
.service-header-container .service-header-left p{
	color: var(--lightgrey);
    margin: 0 25px;
}  
.commitment {
    font-size: 30px; 
	margin-bottom: 2vh;
	color: var(--white); 
} 
.commitment.margin-top { 
	margin-top: 2vh; 
} 
.commitment span { 
	color: var(--orange);
} 
.commitment-paragraph {
	width: 60vw;
	margin: 0 20vw;
}   


@media (max-width: 900px) { 
.commitment-paragraph {
	width: 94vw;
	margin: 0 3vw;
} 
}
.choose { 
	margin: 5vh auto 0 auto;
	width: 90%;
	color: var(--white);
} 
.competitive{ 
	width: 20vh;
	height: 20vh; 
	background: var(--orange);
	display: flex; 
	justify-content: center;
	align-items: center; 
	flex-wrap: wrap; 
	border-radius: 50%; 
	margin: 0 auto 7vh auto;
} 
.competitive img{ 
	width: 10vh;
	height: 10vh; 
} 
.contact-us {
    font-size: 30px; 
	margin: 5vh 0 1vh 0; 
} 
.left-margin {
	margin-left: 0.5%;
}
    
/* Benefits ************************************************** */

.contact-benefits {
    height: auto;
    display: flex;
    justify-content: space-between; 
    flex-wrap: wrap;
    margin: 10vh 5%;
}  
.contact-benefits.about-page { 
    margin: 5vh 5%;
} 
.contact-benefits div {
    height: auto;
    width: 23%;
    position: relative;
    overflow: hidden;
    padding: 10px;
    font-size: 12px;
    font-weight: 300;
    text-align: center; 
} 


@media (max-width: 600px) {  
.contact-benefits div { 
    width: 100%; 
} 
.contact-benefits.form div { 
    width: 100; 
} 
}
.contact-benefits.form div {
    height: 30vh;
    width: 33%; 
} 
.contact-benefits div .benefit-icon {
	width: 15vh;
	height: 15vh;
	background: var(--darkgrey);
	display: flex;
	align-items: center;
	justify-content: center;
    border-radius: 50%;
	border: none;
	margin: 2vh auto;
} 
.contact-benefits.form div .benefit-icon {
	width: 12vh;
	height: 12vh; 
} 
.contact-benefits div .benefit-icon img {
    width: 8vh;
    height: auto;
} 
.contact-benefits.form div .benefit-icon img {
    width: 7vh; 
} 
.contact-benefits div h2 {
    min-height: 4vh;
    font-size: 15px; 
    color: var(--midgrey);
	font-weight: 600; 
    position: relative;
} 


@media (max-width: 600px) {  
.contact-benefits.form div .benefit-icon {
	width: 10vh;
	height: 10vh; 
} 
.contact-benefits div .benefit-icon img {
    width: 7vh;
    height: auto;
} 
.contact-benefits.form div .benefit-icon img {
    width: 6vh; 
} 
.contact-benefits div h2 {
    min-height: 4vh;
    font-size: 12px; 
    color: var(--midgrey);
	font-weight: 600; 
    position: relative;
} 
}
/*
** Contact Pages **************************************************
*/  
 
 #contact {
        width: 99%;
        margin: 10vh 0.5% 5vh 0.5%;
    } 
	 #contact.projects-page { 
        margin-top: 5vh;
    } 
  #contact h2 {
        font-size: 40px; 
    } 
    #contact p {  
        margin: 5vh auto;
        color: #090909;
    } 
    #contact h6 {
        font-size: 15px;
        margin: 4vh auto;
        color: #090909;
        font-weight: 500;
    } 
    .contact-us {
        width: 100%;
        height: auto;
        margin: 7vh 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    } 
    .contact-us .left,
    .contact-us .middle,
    .contact-us .right {
        flex-basis: 33%;
        height: auto;
        margin-bottom: 5vh;
    } 
	
	
@media (max-width: 1023px) {
	 .contact-us .left,
    .contact-us .middle,
    .contact-us .right {
        flex-basis:100%; 
    } 
}

    .contact-us img {
        height: 5vh;
        width: auto;
    }  
    .contact-us h4 {
        font-size: 13px;
        color: #090909;
        font-weight: 300;
        margin: 2vh 0;
    } 
    .contact-us h3 {
        font-size: 13px;
        color: #090909;
        margin: 2vh 0;
    } 
#our-location {
        width: 99%;
        margin: 5vh 0.5% -1vh 0.5%;
    } 
  #our-location h2 {
        font-size: 40px; 
		margin-bottom: 2vh;
    }  
    #our-location h6 {
        font-size: 15px;
        margin: 3vh auto;
        color: #090909;
        font-weight: 500;
    } 
.google-map {
        width: 100%;
        height: 40vh;  
		border-radius: 5px;
    }
.google-map iframe {
        width: 100%;
        height: 100%;
        border: none;
		border-radius: 5px;
    }

/*
** Projects **************************************************
*/  
 
#portfolio {
        margin: 5vh auto 15vh auto;
		width: 100%;
    } 
    .heading-portfolio {
        font-size: 3vw;
        font-weight: 600;
        color: #ffffff;
        padding: 10vh 0 5vh 0;
    } 
    .work-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap:  75px ;
        height: 35vh;
		margin: 10vh 10% 0 10%;
    } 
    .work {
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        box-shadow: 0px 0px 5px 2px #262626;
        height: 35vh;
		color: #ffffff;
    } 
	
	
	
@media (max-width: 1023px) {
	
	#portfolio {
        margin: 5vh auto; 
    } 
	.work-list {
        grid-template-columns: repeat(1, 1fr); 
		height: auto; 
        grid-gap: 5vh; 
		margin: 5vh 2% 0 2%;
    } 
	
	.work {
     width: 90%;  /* Always take full width */
    height: auto; /* Maintain desktop's aspect ratio */
	margin: 0 auto;
}
	
	 .work .web-landing { 
          height: 100%; /* Maintain desktop's aspect ratio */
		  height: auto
    } 
	
}	
	
	
    .work .web-landing {
        width: 100%;
        border-radius: 4px;
        display: block;
        transition: transform 0.5s;
        height: 35vh;
    }  
	.project-layer .project-logo{
		width: auto;
		height: 15vh;  
	} 
.project-layer h5 {
        font-size: 15px; 
font-weight: 500;		
    }  
    .project-layer h4 {
        font-size: 25px;  
		margin: 1vh 0; 
    }  
    .project-layer p {
        font-size: 13px;
        font-weight: 300;		 
    }  
    .project-layer a {
        width: 60px;
        height: 60px; 
        background: #cc5500;
        border-radius: 50%;
        padding: auto;
        transition: 0.5s;
        margin: 3vh auto;
    } 
    .project-layer a .project-link {
        width: 30px;
        height: 30px;
        margin: auto;
        margin: 15px;
        transition: 0.5s;
    } 
    .project-layer {
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0, 0, 0, 0.25), #010101, #010101);
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: -100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        padding: 0 5px;
        text-align: center;
        transition: 0.5s;
    } 
    #portfolio .work-portfolio {
        font-size: 13px;
        font-weight: 500;
        color: #ffffff;
        margin: 10vh 0 20vh 0;
        text-align: center;
    } 
    .work:hover .web-landing {
        transform: scale(1.1);
    } 
    .work:hover .project-layer {
        bottom: 0;
    } 
    .work:hover a:hover {
        background: #cc5500;
    }

/*
** Subsidiaries **************************************************
*/  

.subsidiary-container {
            width: 99%;
            margin: auto; 
        } 
        .coursemaccon-academy,
		.coursemaccon-designs{ 
            margin: 5vh 0; 
            border-left: 5px solid #cc5500; 
			padding-left: 1%;
        } 
		.subsidiary-list {
			list-style: none; 
		} 
		.subsidiary-list li {
			margin-bottom: 1vh; 
		} 
.subsidiaries-section{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between; 
} 		 
.subsidiary-containers{
	flex-basis: 49.75%;
	height: auto;
	display: flex;
	justify-content: space-between;
	margin-bottom: 1vh; 
}  


@media (max-width: 1023px) {
.subsidiaries-section{
	width: 100%;
	height: auto;
	display: block; 
} 		 
.subsidiary-containers{
	width: 100%;
	height: auto;
	display: block;  
	margin-bottom: .5vh;
}  
}

.subsidiary-containers .subsidiaries-logo-container{
	width: 30vh;
	height: 30vh;
	display: flex;
	justify-content: center;
    align-items: center;	
	background: var(--white);
	border-radius: 50%;
	margin-bottom: 2vh;
}  
.subsidiary-containers .subsidiary-logo{
	height: 14vh;
	width: auto; 
}
.subsidiary-containers .subsidiary-logo.academy{
	height: 10vh;
	width: auto; 
}
.subsidiary-containers .subsidiary-name{ 
	flex-basis: 100%;
	min-height: 70vh;  
	border-radius: 0 5px 5px 0;
	padding: 10vh 5%;
	padding-bottom: 10vh;
	display: flex;
	flex-direction: column;
	justify-content: center; 
	flex-wrap: wrap;
	text-align: center;
	align-items: center;
}
.subsidiary-containers .subsidiary-name h3{
	font-size: 25px;
color: #ffffff;	
}  
.subsidiary-containers .subsidiary-name p{ 
color: #ffffff;	
margin: 1vh 0 3vh 0;
} 

/*
** Footer **************************************************
*/

.background-footer{ 
	border-radius: 5px;width: 99%;
	margin: 1vh 0.5%;
    background-image: url(Images/t9.jpg);
    background-size: cover;
    background-position: center;  
	background-attachment: fixed;	 
} 
.over-footer{
	    background: rgba(0,0,0,0.85);
		height: 100%;
	border-radius: 5px;
} 
footer { 
	width: 100%; 
    padding: 5vh; 
	border-radius: 5px;
}  


@media (max-width: 1023px) {
footer {  
    padding: 1vh;  
}  

.background-footer{ 
	border-radius: 5px;width: 99%;
	margin: .5vh 0.5%; 	 
} 

}

footer .logo {
    height: auto;
    width: 70%;
} 
.top-footer {
    margin: 0 auto; 
    color: #ababab;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
} 
.bottom-footer {
    margin: 0 auto; 
    color: #ababab;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
} 
footer .footer-contact i {
    color: #ffffff;
    font-size: 12px;
} 
footer .top-footer .logo-column {
    flex-basis: 23%; 
} 
footer .top-footer .column {
    flex-basis: 17%; 
} 
footer .top-footer .projects-column {
    flex-basis: 21.5%; 
} 


@media (max-width: 1023px) { 

footer .logo {
    height: auto;
    max-width: 300px;
}
 
footer .top-footer .logo-column,
footer .top-footer .column,
footer .top-footer .projects-column {
    flex-basis: 100%; 
	margin-bottom: 5vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}  

footer .top-footer .column ul,
footer .top-footer .projects-column ul { 
    margin-top: 2vh;
} 

}


footer .top-footer h4 {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
} 
footer .top-footer .column ul,
footer .top-footer .projects-column ul {
    list-style: none;
    font-size: 13px;
    margin-top: 5vh;
} 
footer .top-footer .column ul li,
footer .top-footer .projects-column ul li {
    margin-top: 1vh;
} 
footer .top-footer .column ul li a,
footer .top-footer .projects-column ul li a{
    color: #ababab;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
} 
footer .top-footer .column ul li a:hover {
    color: var(--orange);
} 
footer .top-footer .column ul li a.active-page {
    color: var(--orange);
} 
footer .top-footer .column ul li .icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ababab;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 10px;
} 
footer .top-footer .column ul li .icon:hover {
    background: #778899;
} 
footer .top-footer .column ul li .icon img {
    width: 20px;
    height: 20px;
    margin: auto;
} 
.footer-projects {
    width: 175px;
    height: 6vh;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    border: none;
    background: var(--orange);
    color: var(--darkgrey);
    cursor: pointer;
    margin-bottom: 2vh;
} 
.footer-projects.development { 
   background:  var(--darkgrey);
    color: var(--orange); 
} 
.footer-projects.projects {
    width: 200px; 
    margin: 5vh 0 2vh 0;
} 
.footer-projects:hover {
    background: var(--white);
} 
 .social-links a {
    display: inline-block;
    text-align: center;
    height: 35px;
    width: 35px;
    background-color: #101010;
    opacity: 0.99;
    margin: 5vh 5px 10px 0;
    line-height: 35px;
    border-radius: 10%;
    color: #ffffff;
    transition: all 0.5s ease;
} 
 .social-links a:hover {
    color: blue;
    background-color: #ffffff;
} 
footer .bottom-footer .column-1 {
    flex-basis: 57.5%;  
    border-radius: 5px;
	padding: 4vh 4vh 2vh 4vh;
	 display: flex;
	 flex-direction: column;
    justify-content: center; 
    flex-wrap: wrap;
    background: linear-gradient(45deg, var(--midgrey) 2.34%, transparent 60.78%);
} 
footer .bottom-footer .column-2 {
    flex-basis: 40%; 
    background: linear-gradient(45deg, transparent 15.34%, var(--black) 65.78%);
    border-radius: 5px;
    display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}  


@media (max-width: 1023px) { 
footer .bottom-footer .column-1 {
    flex-basis: 100%;   
	padding: 5px; 
    background: linear-gradient(45deg, var(--darkgrey) 2.34%, transparent 60.78%);
} 
footer .bottom-footer .column-2 {
    flex-basis: 100%; 
    background: transparent; 
	padding: 5vh 0;
}  
}
footer .bottom-footer h4 {
    width: 100%;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin-bottom: 3vh;
}   
footer .bottom-footer .column-1 .copyright {
    font-size: 12px; 
	margin-bottom: 2vh;
	color: var(--creamwhite);
} 
footer .bottom-footer .column-1 .copyright a { 
    font-weight: 600;
	color: var(--white);
}  
.company {
	color: #ababab; 
	font-size: 15px; 
	font-weight: 600;
} 
.subsidiary {
	color: #ffffff;
	font-size: 11px; 
	font-weight: 300;
	margin: 15px 0;
} 
.footer-contact {
    font-size: 13px;
    margin-top: 1vh;
} 
.subsidiary-website,
.about-services-links{
	text-decoration: none;
}