body { position: relative; padding: 0px; margin: 0px; background: url('../images/cubes.png'); }
html { scroll-behavior: smooth;  }

/* CONTAINERS */
.cs-main {
	width: 100%;
	padding: 100px 0px;
}
.cs-main-inner {
	padding: 30px 0px 50px 0px;
}
.cs-content {
	width: 100%;
	max-width: 1300px;
	margin: 0px auto;
}
.cs-flex {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}
.cs-flex-box {
	flex: 2;
}
.cs-flex-balanced-height {
	align-items: unset !important;
}
.cs-spacing {
	padding: 40px;
}
.cs-image {
	max-width: 500px;
	display: flex;
	align-content: center;
    justify-content: center;
}
.cs-flex-box.cs-image-2 {
    display: flex;
    gap: 15px;
}
/* END OF CONTAINERS */

/* BACKGROUND */
.cs-bg-light-2 {
	background: url('../images/cubes.png');
	background-color: #f2f2f2;
}
.cs-bg-yellow { background: #ffda84; }
.cs-bg-yellow-2 { background: linear-gradient(45deg, #ffda84, #ffcc5a); }
.cs-bg-blue { background: #272264; }
.cs-bg-blue-2 { background: linear-gradient(45deg, #272264, #0a0087); }
.cs-bg-gray { background: #ebebeb; }
.cs-home-bg-foot {
    background: linear-gradient(1deg, #000000d6, #202445c7) , url(../images/IMG_2132.jpg);
    background-size: cover;
    background-position: center center;
}
/* END BACKGROUND */

/* FONT STYLES */
.cs-clr-light { color: #ffffff; }
.cs-clr-yellow { color: #ffda84; }
.cs-clr-blue { color: #272264; }
.cs-clr-dark { color: #252525; }

h1,h2,h3,h4,h5 { font-family: Poppins, sans-serif; }
p,a,li,button,span,div { font-family: Montserrat, sans-serif; }
p.cs-last { margin-bottom: 0px; }
h1 { font-size: 60px; line-height: 70px; margin: 0px 0px 20px 0px; text-transform:uppercase; }

h2 { font-size: 44px; line-height: 44px; color: #202445; margin: 0px 0px 20px 0px; text-transform:uppercase; }
h2 span { font-size: 24px; letter-spacing: 5px; line-height: 45px; font-weight: normal; text-transform: uppercase; background: #ffda84; padding: 10px; }

h3 { font-size: 34px; line-height: 44px; margin: 0px 0px 20px 0px; text-transform:uppercase; }
h3 span { font-size: 24px; letter-spacing: 5px; line-height: 45px; font-weight: normal; text-transform: uppercase; background: #ffda84; padding: 10px; }

h4 { font-size: 28px; margin: 15px 0px; }
h4 span { font-size:24px; font-weight:normal; display: block; }

h5 { font-size: 22px; line-height: 24px; margin: 0px 0px 8px 0px; }
h5 span { font-weight: 500; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; }

p,li { font-size: 20px; line-height: 30px; margin: 0px 0px 20px 0px; }

.cs-first-h { margin-top: 0px !important; }
.cs-last-p { margin: 0px !important; }
.cs-margin-bottom { margin-bottom: 30px; }
.cs-footer a { color: #ffffff; text-decoration: none; transition: 0.4s; }
.cs-footer a:hover { color: #ffda84; transition: 0.4s; }
hr.cs-sep-yellow {
    height: 6px;
    background: #fcd782;
    border: none;
    margin: 0px 0px 15px;
}
/* END FONT STYLES */

/* IMAGES */
img {
	max-width: 100%;
}
.cs-flex-box.cs-image {
	position: relative;
}
.cs-flex-box.cs-image img , .cs-image-2-container img {
	max-width: 90%;
    border: solid 8px #ffffff !important;
    box-shadow: 0px 0px 40px #0000004d;
}
/* END IMAGES */

/* BUTTON STYLES */
button {
	border-radius: 5px;
	border: none;
	padding: 10px 20px 8px 20px;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 1px;
	transition: 0.4s;
	box-shadow: 0px 3px 10px #0000003b;
}
button:hover {
	cursor: pointer;
	transition: 0.4s;
}
button.cs-full {
    width: 100%;
    border-radius: 0px;
    background: #202445;
    color: #ffda84;
    padding: 10px;
}
button.cs-full:hover {
    background: #ffda84;
    color: #202445;
    letter-spacing: 3px;
}
.cs-button-light { background: #ffda84; color: #202445; border-bottom: solid 3px #ffffff; }
.cs-button-dark { background: #272264; color: #ffda84; border-bottom: solid 3px #ffda84; }
.cs-button-purple { background:#ed40a9; color: #ffffff; border-bottom: solid 3px #c52787; }
.cs-button-purple:hover {
    background: #700042;
    color: #ffffff;
    letter-spacing: 3px;
}
.cs-button-light:hover {
    background: #ffcc5a;
    color: #202445;
    letter-spacing: 3px;
    border-bottom: solid 3px #202445;
}
.cs-button-dark:hover {
    background: #ffda84;
    color: #202445;
    letter-spacing: 3px;
    border-bottom: solid 3px #202445;
}
/* END BUTTON STYLES */

/* HERO SECTION */
.cs-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65vh;
    background: linear-gradient(1deg, #aaaaaacc, #ffffff42) , url(../images/axiom-pattern.png);
    text-align: right;
}
.cs-sub-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40vh;
    background: linear-gradient(1deg, #000000d6, #202445c7) , url(../images/hero-inner-image.PNG);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.cs-hero-content {
    margin-bottom: 80px;
    text-align: center;
}
.cs-home-logo {
	max-width: 30%;
}
.cs-hero h1 {
	font-size: 70px !important;
	line-height: 1.2;
}
.cs-hero h1 span {
	background: #ffda84;
	font-size: 50px !important;
	font-weight: bold;
	padding: 7px 20px;
	letter-spacing: 2px;
}
.cs-sub-hero h1 {
	font-size: 48px;
	color: #ffffff !important;
	text-shadow: -3px 4px 6px #000000;
}
/* END HERO SECTION */

/* OVERLAP SECTION */
.cs-overlap {
    margin-top: -5%;
}
.cs-overlap-our-team {
	margin-top: -4% !important;
	padding-bottom: 80px;
}
.cs-overlap-our-services {
	margin-top: -4% !important;
}
.cs-overlap .cs-flex {
	gap: 20px;
	align-items: unset !important;
}
.cs-services {
    background: #ffffff;
    box-shadow: 0px 0px 40px #34343438;
    padding: 30px 20px;
    text-align: center;
}
.cs-services p {
	font-size: 18px !important;
}
.cs-our-team {
	flex-wrap: wrap;
}
.cs-member {
    background: #ffffff;
    box-shadow: 0px 0px 40px #34343421;
    padding: 5px;
    text-align: center;
    flex-basis: 20%;
}
.cs-team-info {
    padding: 15px 20px;
}
.cs-services h4 {
	margin: 15px 0px 10px 0px !important;
}
/* END OVERLAP SECTION */

/* Watermark Logo */
.cs-watermark {
	position: relative;
}
.cs-watermark h2, .cs-watermark p , .cs-watermark img {
	    position: relative;
	    z-index: 2;
}
img.cs-watermark-logo {
    position: absolute;
    max-width: 35%;
    top: 9%;
    left: 40%;
    transform: translate(-50%, 0);
    z-index: 1;
    opacity: 0.2;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* LOCATIONS BOX */
.cs-locations {
	box-shadow: 0px 0px 40px #34343421;
}
.cs-locations-desc {
	padding: 20px;
}
.cs-locations p {
	font-size: 18px !important;
}
.cs-locations p:last-child {
	margin-bottom: 5px;
}
/* END LOCATION BOX */


/* CONTACT BOX */
.cs-flex-box.cs-contact-box {
    background: #ffffff00;
    border: solid 5px #ffffff;
    padding: 30px;
    display: flex;
    align-items: center;
    transition: 0.4s;
}
.cs-flex-box.cs-contact-box:hover {
    background: #ffffff;
    border: solid 5px #ffffff;
}
.cs-flex-box.cs-contact-box h4 {
	color: #ffda84;
}
.cs-flex-box.cs-contact-box p {
	color: #ffffff;
}
.cs-flex-box.cs-contact-box:hover.cs-flex-box.cs-contact-box h4 {
    color: #202445 !important;
}
.cs-flex-box.cs-contact-box:hover.cs-flex-box.cs-contact-box p {
    color: #202020 !important;
}
.cs-flex-box.cs-business-name {
    max-width: 30%;
}
.cs-flex-box.cs-business-info {
    display: flex;
    gap: 10px;
    padding: 10px 0px;
    justify-content: flex-end;
}
.cs-divider {
	background: #ffda84;
	width: 2px;
}

/* TESTIMONIALS */
.cs-testimonials {
	position: relative;
	max-width: 70%;
	border-top: solid 8px #464a6f;
    box-shadow: 0px 0px 40px #34343438;
    margin-bottom: 20px;
}
.cs-testimonials.cs-last {
	margin-bottom: 0px;
}
.cs-cst-testimonial {
	text-align: left;
	padding: 30px 50px 25px 50px;
}
.cs-cst-name {
	position: relative;
	text-align: left;
	padding: 15px 40px 12px 40px;
	display: flex;
    justify-content: space-between;
}
.cs-stars img {
    max-width: 25px;
}
img.cs-quote-left {
    position: absolute;
    bottom: -10px;
    left: -20px;
    max-width: 40px;
}
img.cs-quote-right {
    position: absolute;
    top: -30px;
    right: -30px;
    max-width: 70px;
}
/* END OF TESTIMONIALS */

@media only screen and (max-width: 1440px) {
	.cs-home-logo {
	    max-width: 28%;
	}
	.cs-hero , .cs-overlap {
	    padding: 0px 40px;
	}
}
@media only screen and (max-width: 1200px) {
	.cs-hero-content {
	    margin-bottom: 0px;
	}
}
@media only screen and (max-width: 900px) {
	.cs-flex {
	    flex-direction: column;
	}
	.cs-main {
	    width: auto;
	    padding: 60px;
	}
	.cs-hero {
		background: linear-gradient(1deg, #aaaaaacc, #ffffff42) , url(../images/axiom-pattern.png);
		background-repeat: repeat;
		height: unset;
	    min-height: unset;
	    padding: 40px 30px 50px 30px;
	    text-align: center;
	}
	.cs-hero-content {
		padding: 0px;
		margin-bottom: 45px;
	}
	.cs-hero h1 {
	    font-size: 66px !important;
	    line-height: 60px !important;
	    margin-right: 0px;
	    margin-top: 80px;
	}
	.cs-hero h1 span {
	    font-size: 36px !important;
    	line-height: 38px;
	}
	.cs-services {
	    max-width: 60%;
	    padding: 40px;
	    margin: 0px auto;
	}
	.cs-sub-hero {
	    height: unset;
	    padding: 270px 0px 70px 0px;
	}
	.cs-member {
	    max-width: 400px;
	    margin: 0px auto;
	}
	.cs-flex.cs-our-team {
	    padding: 0px 30px;
	}
	img.cs-watermark-logo {
		max-width: 80%;
	}
	.cs-testimonials {
		max-width: 90%;
	}
	.cs-cst-testimonial {
		padding: 30px 40px 25px 40px;
	}
	img.cs-quote-left {
	    position: absolute;
	    bottom: -10px;
	    left: -10px;
	    max-width: 30px;
	}
	img.cs-quote-right {
	    position: absolute;
	    top: -30px;
	    right: -30px;
	    max-width: 50px;
	}
}

@media only screen and (max-width: 640px) {
	.cs-services {
	    max-width: 60%;
	    padding: 40px;
	    margin: 0px auto;
	}
	.cs-main {
	    width: auto;
	    padding: 40px;
	}
	.cs-main-inner {
    padding: 0px 0px 40px 0px;
}
	.cs-home-logo {
	    max-width: 70%;
	}
	.cs-overlap {
	    padding: 0px;
	}
	.cs-hero-content {
		margin-bottom: 10px;
	}
	.cs-hero h1 {
	    font-size: 46px !important;
	    line-height: 1.2 !important;
	    margin-right: 0px;
	    margin-top: 10px;
	}
	.cs-cst-name {
		padding: 15px 20px !important;
	    flex-direction: column;
	    align-items: center;
	    justify-content: space-between;
	    gap: 5px;
	}
	.cs-stars img {
	    max-width: 20px;
	}
	.cs-flex {
	    gap: 10px;
	}
	h1 {
	    font-size: 40px; line-height: 50px;
	}
	.cs-sub-hero h1 { margin-bottom: 0px; }
	h2 {
	    font-size: 36px; line-height: 46px;
	}
	h4 {
	    font-size: 28px;
	}
	p, li {
	    font-size: 16px !important;
	    line-height: 1.4em;
	}
	.cs-flex-box.cs-contact-box {
	    padding: 20px;
	}
	.cs-flex-box.cs-business-info {
	    justify-content: center;
	    flex-direction: column;
	    align-items: center;
	    align-content: center;
	    text-align: center;	
	}
	.cs-flex-box.cs-business-name {
	    max-width: 100%;
	    text-align: center;
	    padding-top: 15px;
	}
	.cs-divider {
	    background: #ffda84;
	    width: 80%;
	    height: 1px;
	}
	img.cs-cst-logo {
	    position: relative;
	    top: unset;
	    bottom: unset;
	    right: unset;
	    margin-top: 10px;
	}
	.cs-cst-testimonial , .cs-cst-name {
	    padding: 20px;
	}
}