:root {
	--primary-color: rgb(156, 209, 255);
	--secondary-color: rgb(255, 255, 255);
	--accent-color: rgb(36, 36, 36);
}

.background-glass-effect {
	background-color: #37373716; /*<- NEEDS to be transparent*/
	background-color: color-mix(in srgb, var(--accent-color), transparent 80%);

	backdrop-filter: blur(8px); /* background blur */
	-webkit-backdrop-filter: blur(8px); /* Safari support */

	border-style: solid;
	border-width: 0px 2px 2px 0px;
	border-color: #ffffff1a;
	border-radius: 0.5em;

	box-shadow: color-mix(in srgb, var(--primary-color), transparent 60%) -1px -1px
		15px -5px;
}

/*Animations*/

@media (prefers-reduced-motion: reduce) {
	.SignUp {
		animation: none;
	}
}

@keyframes sway {
	0% {
		transform: rotate(-1deg);
	}
	50% {
		transform: rotate(1deg);
	}
	100% {
		transform: rotate(-1deg);
	}
}

/*-------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth; /* smooth scrolling when clicking on a link */
}

body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	position: relative;
	color: var(--secondary-color);
	background-image: linear-gradient(to bottom, #141414, #151515);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	min-height: 100vh;
}

/*HEADER STYLES*/
/*------------------------------------------------------------*/
header {
	position: sticky;
	top: 0.5em;
	width: 98%;
	margin: auto;
	overflow: visible;
	display: flex;
	justify-content: space-between;
	z-index: 1000;
	align-items: center;
	padding: 0.5em 1em;

	color: white;
}

header h1 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	text-align: center;
	color: var(--primary-color);
}
.header-name {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.header-name img {
	height: 5em;
	margin-right: 0.5em;
}

nav ul {
	list-style-type: none;
	display: flex;
	gap: 0.8em;
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

nav a {
	display: block;
	padding: 0.5em 5em;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	transition: all 0.5s ease;

	color: var(--primary-color);
	text-align: center;
	font-weight: bold;
	font-size: clamp(1rem, 2vw, 1.35rem);

	border-style: solid;
	border-width: 0px 1px 1px 0px;
	border-color: #ffffff1a;
	border-radius: 0.5em;

	background-color: color-mix(in srgb, var(--accent-color), transparent 73%);
	backdrop-filter: blur(15px); /* background blur */
	-webkit-backdrop-filter: blur(15px); /* Safari support */
}

nav a:hover {
	background-color: #98989818;
	top: -2px;
}

nav a:active {
	background-color: #00000000;
	top: 2px;
}

.menu-checkbox,
.hamburger {
	display: none; /* Hide hamburger menu on pc */
}

.SignUp {
	color: #ffffff;
	background-color: #3eb642;
}

.LogIn {
	color: #ffffff;
	background-color: #0082d2;
}

.DevideLine {
	color: color-mix(in srgb, var(--primary-color), transparent 50%);
	font-size: 2rem;
	text-align: center;

	padding: 0 0 0 2em;
}

.LogIn {
	padding: 0.5em 2em;
}

.SignUp {
	animation: sway 3s ease-in-out infinite;
	transform-origin: center;
	will-change: transform;
}

/*------------------------------------------------------------*/
/*END OF HEADER STYLES*/

/*------------------------------------------------------------*/
/*END OF MAIN STYLES*/

/*FOOTER STYLES*/
/*------------------------------------------------------------*/
footer {
	background-color: #333;
	color: var(--secondary-color);
	text-align: center;
	padding: 0.7em;
	position: fixed;
	width: 100%;
	bottom: 0;
}

footer p {
	margin: 0;
}
/*------------------------------------------------------------*/
/*END OF FOOTER STYLES*/

/*------------------------------------------------------------*/
/*MAIN*/
/*------------------------------------------------------------*/
main {
	padding: 1em;
	margin-bottom: 3.2em; /* space for footer */
}

h2 {
	color: var(--primary-color);
	font-size: xx-large;
	font-weight: bold;
}

section {
	scroll-margin-top: 7em; /* offset when jumping to section to prevent header from covering it */
}

.main-welcome-section {
	text-align: center;
	margin-bottom: 2em;
}

.main-welcome-section img {
	height: clamp(20em, 60vw, 41em);
	margin-bottom: -2em;
	margin-top: -6em;
}

.main-welcome-section h1 {
	font-size: 2em;
	color: var(--primary-color);
}

.main-welcome-section p {
	font-size: 1.2em;
	color: var(--secondary-color);
}

.main-welcome-section a {
	display: inline-block;
	margin-top: 1em;
	padding: 0.8em 1.5em;
	margin-right: 0.5em;

	border: none;
	border-radius: 5px;

	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
	background-color: var(--primary-color);
	color: var(--accent-color);

	transition: background-color 0.3s;
}

.main-welcome-section a:hover {
	background-color: #79a4c9;
}

.main-about-us-section {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	float: left;
	gap: 0.5em;

	width: 49.5%;
	padding: 2em;
	margin-bottom: 1em;

	border-radius: 2em;
}

.main-about-us-section h2 {
	margin-bottom: 0.5em;
}

.main-our-missions-section {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	float: right;
	gap: 0.5em;

	width: 49.5%;
	padding: 2em;
	margin-bottom: 1em;

	border-radius: 2em;
}

.main-our-missions-section h2 {
	margin-bottom: 0.5em;
}

.main-pricing {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2em;
	height: auto;
	width: 100%;
	margin-top: 1em;
	border-radius: 2em;
	scroll-margin-top: 5em;
}

.main-pricing h2 {
	text-align: center;
	width: 100%;
	margin-bottom: 0em;
}

.main-pricing p {
	text-align: center;
	margin-bottom: 1em;
}

.main-pricing-cards {
	display: flex;
	justify-content: center;
	gap: 2em;
	width: 100%;
	flex-wrap: wrap;
}

.pricing-cards {
	margin-top: 1em;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 2em;
	flex: 0 1 25em;
}

.pricing-cards h3 {
	margin-top: 1em;
	color: var(--primary-color);
	text-align: center;
	font-size: x-large;
}

.pricing-cards p {
	margin-top: -2em;
	margin-bottom: 0;
}

.pricing-cards ul {
	list-style-type: disc;
	padding: 0;
	margin-top: 0em;

	max-width: 80%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: start;
	gap: 2em;
}

.pricing-cards:hover {
	box-shadow: 0 0 15px var(--primary-color);
	transform: scale(1.05);
	transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-button {
	margin: 1em 5em 1em 5em;
	padding: 0.8em;
	width: 50%;

	border-radius: 5px;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
	color: var(--primary-color);
	background-color: var(--accent-color);
	transition: background-color 0.3s;
}

.pricing-button:hover {
	background-color: #2c2c2c;
	transform: scale(1.1);
	transition: transform 0.3s;
}

/*------------------------------------------------------------*/
/*LOGIN / SIGNUP*/
/*------------------------------------------------------------*/

.sl-page {
	height: 100vh;
	margin: 0;
}

.sl-container {
	padding: 40px;
	width: 300px;
	margin: 5em auto;
}

.sl-h1 {
	text-align: center;
	color: var(--primary-color);
	margin-bottom: 30px;
	font-weight: bold;
}

.sl-form-text {
	margin-bottom: 20px;
}
.sl-label {
	display: block;
	margin-bottom: 5px;
	color: white;
	font-weight: bold;
}

.sl-input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 14px;
}
.sl-input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 5px var(--primary-color);
}
.sl-button {
	width: 100%;
	padding: 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;

	background: var(--primary-color);

	font-size: 16px;
	font-weight: bold;
	color: var(--accent-color);

	transition: background 0.3s;
}
.sl-button:hover {
	background: #79a4c9;
}

/*------------------------------------------------------------*/
/*SERVICES*/
/*------------------------------------------------------------*/

.services-hero {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.services-hero h1 {
	font-size: clamp(2rem, 5vw, 4rem);
	color: var(--primary-color);
}

.small-text {
	font-size: clamp(0.8em, 0.8vw, 1.2em);
	color: #6f6f6f;
	margin-top: -0.3em;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(20em, 30%, 100%), 1fr));
	grid-auto-rows: clamp(17em, 2vh, 50em);

	align-content: center;
	justify-content: center;

	gap: 1em;
	margin: 2em 15em;
}

.services-grid a {
	text-decoration: none;
	color: var(--secondary-color);
}

.service-card {
	height: 100%;
	padding: 1.5em;
}

.service-card h2 {
	font-size: clamp(3rem, 4vw, 6rem);
	text-align: center;
}

.service-card h3 {
	color: var(--primary-color);
	margin-bottom: 0.5em;
	text-align: center;
}

.service-card p {
	text-align: center;
	text-wrap: initial;
}

.service-card:hover {
	box-shadow: 0 0 15px var(--primary-color);
	transform: scale(1.01);
	transition: transform 0.3s, box-shadow 0.3s;
}

/*------------------------------------------------------------*/
/*COMMUNICATION CENTER*/
/*------------------------------------------------------------*/

.cc-hero {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.cc-hero h1 {
	font-size: clamp(2rem, 5vw, 4rem);
	color: var(--primary-color);
}

.cc-split-layout {
    display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(30em, 40%, 100%), 1fr));
    gap: 1.5em;
    margin: 2em 10em;
    min-height: 60vh;
}

.cc-split-text, .cc-chat .cc-video{
    flex: 1;
    padding: 2em;
	height: 60vh;
}

.cc-split-example{
	display: flex;
}

.cc-split-text{
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: center;
}
.cc-split-text h2{
	font-size: clamp(1em, 2vw, 3em);
}
.cc-split-text p{
	font-size: clamp(0.2em, 2vw, 1em);
	padding: 0 1em;
}

/*chat example*/
.cc-chat{
	flex-direction: column;
    justify-content: center;
	display: flex;
}

.cc-chat-bubble {
    padding: 0.8em 1em;
    margin: 0.7em 1em;
    border-radius: 1em;
    width: fit-content;
    max-width: 80%;
}
.cc-chat-bubble.left {
    background: rgba(255, 255, 255, 0.2);
    align-self: flex-start;
}
.cc-chat-bubble.right {
    background: var(--primary-color);
    color: black;
    margin-left: auto;
}

/*videocall example*/
.cc-video {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.cc-video-screen {
	width: 95%;
	height: 95%;
	background: var(--accent-color);
	border-radius: 1em;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.cc-video-header{
	position: relative;
	align-self: start;
	top: 1em;
	width: 95%;
	height: 3.5em;
	background: rgb(61, 61, 61);
	border-radius: 0.5em;

	text-align: center;
	font-weight: bold;

	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 10;
}

.cc-video-grey, .cc-video-red{
	margin-right: 1em;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	background: rgb(212, 75, 75);
}

.cc-video-grey{
	background: rgb(128, 128, 128);
}

.cc-video-content{
	width: 97%;
	height: 95%;
	position: absolute;
	border-radius: 0.5em;
	background-color: var(--primary-color);
	overflow: hidden;
}

.cc-video-content-head{
	height: 15em;
	width: 15em;
	margin: auto;
	top: 30%;
	position: relative;
	border-radius: 50%;
	background-color: #141414;
}

.cc-video-content-body{
	height: 15em;
	width: 30em;
	margin: auto;
	top: 30%;
	position: relative;
	border-radius: 50%;
	background-color: #141414;
}

.cc-video-caller{
	position: absolute;
	bottom: 1em;
	right: 1em;
	width: 10em;
	height: 6em;
	border-radius: 0.5em;
	background-color: #373737;
	border: 2px solid var(--secondary-color);
	overflow: hidden;
}

.cc-video-caller-head{
	height: 3em;
	width: 3em;
	margin: auto;
	top: 20%;
	position: relative;
	border-radius: 50%;
	background-color: #141414;
}
.cc-video-caller-body{
	height: 3em;
	width: 6em;
	margin: auto;
	top: 20%;
	position: relative;
	border-radius: 50%;
	background-color: #141414;
}

/*------------------------------------------------------------*/
/*PROJECT MANAGER*/
/*------------------------------------------------------------*/

.pm-hero, .s-hero{
	align-items: center;
	justify-content: center;
	text-align: center;
}

.pm-hero h1 , .s-hero h1{
	font-size: clamp(2rem, 5vw, 4rem);
	color: var(--primary-color);
}

.pm-grid-container{
	margin: auto;
	margin-top: 2em;
	width: fit-content;
	height: fit-content;
	padding: 2em;
	border-radius: 5em;
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: rgba(88, 172, 240, 0.39);
}

.pm-grid{
	display: grid;

	grid-template-columns: 10em 10em 10em 10em;
	grid-template-rows: 10em 10em 10em;
	gap: 0.5em;

	grid-template-areas: 
	"box-1 box-1 box-2 box-2"
	"box-1 box-1 box-3 box-4"
	"box-5 box-6 box-6 box-4";

}

.pm-grid-box{
	border-radius: 1em;
}

.pm-box-1{  /*Todo list*/
	background-color: rgb(94, 152, 201);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em;
}

.pm-grid-box h2{
	margin-top: 0.3em;
	text-shadow: 0px 0px 5px #141414;
}

.pm-kb-hero{
	width: 100%;
	height: fit-content;
	text-align: center;
}

.pm-kb-hero p{
	padding: 0.4em;
	margin-top: -1em;
}

.pm-box-1 h3{
	font-size: 1.2em;
}

.pm-kb-titles{
	width: 30%;
	height: fit-content;
	padding: 0.3em;
	margin-top: -2em;

	border-top-left-radius: 1em;
	border-top-right-radius: 1em;

	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	
	text-align: center;
	background-color: #2c2c2c;
}

.pm-kb-titles > div{
	width: 100%;
	margin-top: 0.2em;
	height: 2em;
	background-color: #747474;
	border-radius: 0.5em;
}


.pm-box-2{
	background-color: rgb(74, 134, 183);
	display: flex;
	align-items: center;
}

.pm-gc-hero, .pm-cr-hero{
	width: 50%;
	height: 100%;
	align-content: center;
}

.pm-gc-hero h2, .pm-cr-hero h2{
	font-size: large;
	margin-top: -0.5em;
	text-align: center;
}

.pm-gc-hero p, .pm-cr-hero p{
	text-align: center;
	padding: 0 0.2em;
}

.pm-gc-chart, .pm-cr-visual{
	width: 50%;
	height: 95%;
	border-left: 2px solid rgb(77, 77, 77);
	display: block;
}

.pm-gc-line-1, .pm-gc-line-2{
	width: 80%;
	height: 10%;
	margin-top: 2.5em;
	margin-left: 0.5em;
	border-radius: 1em;
}

.pm-gc-line-1{
	background-color: rgb(99, 224, 255)
}

.pm-gc-line-2{
	margin-left: 1.5em;
	background-color: rgb(63, 182, 212);
}

.pm-box-3, .pm-box-5{
	background-color: rgb(113, 168, 214);
	text-align: center;
}

.pm-box-3 h2, .pm-box-5 h2{
	font-size: large;
	margin-top: 0.7em;
}

.pm-box-4{
	background-color: rgb(123, 168, 206);
	text-align: center;
}

.pm-n-hero{
	width: 100%;
	height: 50%;
	align-content: center;
}

.pm-n-hero h2{
	font-size: large;
	margin-top: 0.3em;
	text-align: center;
}

.pm-n-hero p{
	text-align: center;
	padding: 0 0.4em;
}

.pm-n{
	width: 95%;
	height: 50%;
	margin-left: 2.5%;
	margin-top: 0.5em;
	border-top: 2px solid rgb(112, 112, 112);
	display: block;
}

.pm-n p{
	padding-top: 1em;
	padding-left: 1em;
	line-height: 0.5;
	letter-spacing: -1.5px;
	text-align: left;
}

.pm-n-sheet-1, .pm-n-sheet-2{
	position: absolute;
	height: 4em;
	width: 4em;
}

.pm-n-sheet-1{
	margin-top: 0.5em;
	margin-left: 0.5em;
	background-image: linear-gradient(to top, #218a98, #2bb7c9);
}

.pm-n-sheet-2{
	margin-top: 5em;
	margin-left: 5em;
	background-image: linear-gradient(to top, #285e94, #347dc5);
}

.pm-n-pin{
	background-color: rgb(0, 18, 89);
	position: absolute;
	top: -0.3em;
	left: 1.5em;
	width: 1em;
	height: 1em;
	border-radius: 50%;
}

.pm-box-5 h2{
	margin-top: 1em;
}

.pm-box-6{
	background-color: rgb(75, 140, 193);
	display: flex;
	align-items: center;
}

.pm-cr-visual > div{
	height: 2em;
	width: 90%;
	margin-top: 0.2em;
	margin-left: 0.5em;
	border-radius: 1em;
	background-color: #2c2c2c;
}

.pm-cr-top{
	margin-top: 1.5em !important;
}

.pm-cr-visual > div > p{
	text-align: center;
	font-size: 0.9em;
	color: #a1a1a1;
	padding-top: 0.25em;
}

/*diferent bento grids*/

@media (min-width: 1700px){
	.pm-grid{
	display: grid;

	grid-template-columns: 15em 15em 15em 15em;
	grid-template-rows: 15em 15em 15em;
	gap: 1em;
	}

	.pm-box-1 h2{
		margin-top: 0.3em;
		font-size: xxx-large;
	}

	.pm-kb-hero p{
		font-size: x-large;
	}

	.pm-box-1 h3{
		font-size: 2em;
	}

	.pm-kb-titles{
		padding-bottom: 0.5em;
		margin-top: -3em;

		border-top-left-radius: 2em;
		border-top-right-radius: 2em;

		border-bottom-left-radius: 0.8em;
		border-bottom-right-radius: 0.8em;
	}

	.pm-kb-titles > div{
		height: 3em;
		border-radius: 0.8em;
	}


	.pm-gc-hero h2, .pm-cr-hero h2{
		font-size: xx-large;
	}

	.pm-gc-hero p, .pm-cr-hero p{
		font-size: large;
	}

	.pm-gc-line-1, .pm-gc-line-2{
		margin-top: 3.5em;
		height: 15%;
	}

	.pm-box-3 h2, .pm-box-5 h2{
		font-size: x-large;
		margin-top: 1.5em;
	}

	.pm-box-3 p, .pm-box-5 p{
		font-size: x-large;
	}


	.pm-n-hero h2{
		font-size: x-large;
		margin-top: 0em;
	}

	.pm-n-hero p{
		text-align: center;
		padding: 0 0.4em;
		font-size: x-large;
	}

	.pm-n p{
		padding-top: 0.7em;
		font-size: x-large;
	}

	.pm-n-sheet-1, .pm-n-sheet-2{
		height: 5.6em;
		width: 5.6em;
	}

	.pm-n-sheet-2{
		margin-top: 7em;
		margin-left: 8em;
	}

	.pm-n-pin{
		left: 2.23em;
		width: 1.3em;
		height: 1.3em;
	}


	.pm-cr-visual > div{
		height: 3em;
		margin-top: 0.5em;
		margin-left: 1em;
		border-radius: 1.5em;
	}

	.pm-cr-top{
		margin-top: 1.7em !important;
	}

	.pm-cr-visual > div > p{
		font-size: 1.2em;
		padding-top: 0.45em;
	}
}

@media (max-width: 770px) and (min-width: 590px){
	.pm-grid{  /*TODO*/
	display: grid;

	grid-template-columns: 15em 15em;
	grid-template-rows: 15em 15em 15em 15em 15em 15em;
	gap: 1em;

	grid-template-areas: 
	"box-1 box-1"
	"box-1 box-1"
	"box-2 box-2"
	"box-3 box-4"
	"box-5 box-4"
	"box-6 box-6";
	}

	.pm-box-1 h2{
		margin-top: 0.3em;
		font-size: xxx-large;
	}

	.pm-kb-hero p{
		font-size: x-large;
	}

	.pm-box-1 h3{
		font-size: 2em;
	}

	.pm-kb-titles{
		padding-bottom: 0.5em;
		margin-top: -3em;

		border-top-left-radius: 2em;
		border-top-right-radius: 2em;

		border-bottom-left-radius: 0.8em;
		border-bottom-right-radius: 0.8em;
	}

	.pm-kb-titles > div{
		height: 3em;
		border-radius: 0.8em;
	}

	.pm-gc-hero h2, .pm-cr-hero h2{
		font-size: xx-large;
	}

	.pm-gc-hero p, .pm-cr-hero p{
		font-size: large;
	}

	.pm-gc-line-1, .pm-gc-line-2{
		margin-top: 3.5em;
		height: 15%;
	}

	.pm-box-3 h2, .pm-box-5 h2{
		font-size: x-large;
		margin-top: 1.5em;
	}

	.pm-box-3 p, .pm-box-5 p{
		font-size: x-large;
	}


	.pm-n-hero h2{
		font-size: x-large;
		margin-top: 0em;
	}

	.pm-n-hero p{
		text-align: center;
		padding: 0 0.4em;
		font-size: x-large;
	}

	.pm-n p{
		padding-top: 0.7em;
		font-size: x-large;
	}

	.pm-n-sheet-1, .pm-n-sheet-2{
		height: 5.6em;
		width: 5.6em;
	}

	.pm-n-sheet-2{
		margin-top: 7em;
		margin-left: 8em;
	}

	.pm-n-pin{
		left: 2.23em;
		width: 1.3em;
		height: 1.3em;
	}


	.pm-cr-visual > div{
		height: 3em;
		margin-top: 0.5em;
		margin-left: 1em;
		border-radius: 1.5em;
	}

	.pm-cr-top{
		margin-top: 1.7em !important;
	}

	.pm-cr-visual > div > p{
		font-size: 1.2em;
		padding-top: 0.45em;
	}
}

@media (max-width: 590px){
	.pm-grid{
	display: grid;

	grid-template-columns: 10em 10em;
	grid-template-rows: 10em 10em 10em 10em 10em 10em;
	gap: 1em;

	grid-template-areas: 
	"box-1 box-1"
	"box-1 box-1"
	"box-2 box-2"
	"box-3 box-4"
	"box-5 box-4"
	"box-6 box-6";

	}


}

@media (max-width: 430px){
	.pm-grid{
	display: grid;

	grid-template-columns: 10em 10em;
	grid-template-rows: 10em 10em 10em 10em 10em 10em;
	gap: 1em;

	grid-template-areas: 
	"box-1 box-1"
	"box-1 box-1"
	"box-2 box-2"
	"box-3 box-4"
	"box-5 box-4"
	"box-6 box-6";

	}

	.pm-grid-container{
	margin: auto;
	margin-top: 2em;
	width: fit-content;
	height: fit-content;
	padding: 0em;
	border-radius: 1em;
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: rgba(88, 172, 240, 0.39);
}
}


/*------------------------------------------------------------*/
/*CALENDAR*/
/*------------------------------------------------------------*/

.c-calendar{
	display: flex;
	justify-content: center;
	align-items: center;
}

.c-calendar-container{
	background-color: rgb(30, 30, 30);
	width: 90%;
	height: 90%;
	border-radius: 5%;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-auto-rows: 1fr;
}

.c-calendar-container > div{
	border: solid 1px;
}

/*------------------------------------------------------------*/
/*CUSTOMER SUPPORT*/
/*------------------------------------------------------------*/

.s-main{
	margin: auto;
	margin-top: 2em;
	width: 90vw;
	height: 110vh;
	padding: 2em;
	border-radius: 3em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.s-cards{
	width: 95%;
	height: 30vh;
	display: flex;
	align-items: center;
}

.s-number{
	width: 20vw;
	height: 90%;
	border-right: solid 5px rgb(103, 103, 103);
	display: flex;
	align-items: center;
	justify-content: center;
}

.s-number h2{
	text-align: center;
	position: absolute;
	color: var(--secondary-color);
	font-size: 10vw;
	padding: 0;
}

.s-description{
	margin-left: 2vw;
}

.s-description h2{
	font-size: clamp(1em, 2vw, 10em);
}

.s-description p{
	font-size: clamp(1em, 1.5vw, 10em);
}

@media(max-width: 700px){
	.s-number{
		width: 10em;
	}

	.s-description{
		margin-left: 5vw;
	}

	.s-description h2{
		margin-top: 0em;
	}
}

/*------------------------------------------------------------*/
/*ADMIN PANEL*/
/*------------------------------------------------------------*/

.a-hero {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.a-hero h1 {
	font-size: clamp(2rem, 5vw, 4rem);	
	color: var(--primary-color);
}

.a-hero p{
	padding: 0 10vw;
}

.a-grid{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 2em;
	width: 70vw;
	height: 90vh;
	margin: auto;
	margin-top: 3em;
}

.a-card{
	display: block;
	width: 17em;
	height: 15em;
	text-align: center;
}

.a-card h2{
	margin-top: 0.2em;
}

.a-card h3{
	font-size: x-large;
	padding: 0 1em;
	color: var(--primary-color);
}

.a-card p{
	padding: 1em;
}

.a-card:hover {
	box-shadow: 0 0 15px var(--primary-color);
	transform: scale(1.01);
	transition: transform 0.3s, box-shadow 0.3s;
}

/*------------------------------------------------------------*/
/*compact view*/
/*------------------------------------------------------------*/
@media (max-width: 1350px) {
	/*Header*/
	header {
		overflow: visible;
		width: 100%;
		min-height: auto;
		padding: 0.5em 5%;
		padding-bottom: 0.5em;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		top: 0;
	}

	header h1 {
		position: static;
		margin: 0;
	}

	nav {
		/*menu is visible when clicked on hamburger only*/
		display: none;
	}

	.DevideLine {
		display: none;
	}

	.hamburger {
		display: block;
		font-size: 2em;
		cursor: pointer;
		user-select: none;
		position: static;
		margin: 0;
		float: right;
	}

	/* when hamburger is clicked */
	.menu-checkbox:checked ~ nav {
		display: block;
		margin-top: 3em;
		position: absolute;

		top: 100%;
		left: 0;
		width: 100%;
		z-index: 1000;
		margin: 0;
		background-color: #1a1a1af1;
		backdrop-filter: blur(15px); /* background blur */
		-webkit-backdrop-filter: blur(15px); /* Safari support */

		border-top: 5px solid rgba(255, 255, 255, 0.2);
	}

	nav a {
		margin: 0.5em auto;
		background-color: color-mix(
			in srgb,
			var(--accent-color),
			transparent 64%
		);
	}

	nav ul {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		padding: 1em 0;
		margin: 0;
	}

	nav ul li {
		list-style: none;
		width: 80%;
	}
	/*END OF HEADER STYLES*/

	body {
		flex-direction: column;
	}

	/*MAIN*/
	.main-about-us-section,
	.main-our-missions-section {
		width: 100%;
		float: none;
	}

	.pricing-cards li {
		text-align: left;
		padding: 1em 0em 1em 5%;
	}

	/*SERVICES*/
	.services-grid {
		margin: 0;
		margin-top: 2em;
	}

	/*COMMUNICATION CENTER*/
	.cc-split-example{
		display: none;
	}
	.cc-split-layout {
		display: flex;
    	margin: 2em 0;
	}

	.cc-split-text h2{
	font-size: clamp(2em, 5vw, 3em);
	}

	.cc-split-text p{
	font-size: clamp(1em, 2vw, 1em);
	padding: 0;
	}

}

@media (max-width:1248px) {
	footer{
		visibility: hidden;
	}

	.a-card{
		height: 20em;
	}
}