@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700&display=swap');


* {
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}

body {
  background-color: #f1f1f1;
  padding: 20px;
}

/*Header & Footer Section*/
		/*===== GOOGLE FONTS =====*/
		@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
		/*===== VARIABLES CSS =====*/
		:root{
		  --header-height: 3rem;
		  --font-semi: 600;
		}
		
		/*===== Colors =====*/
		:root{
		  --first-color: #4070F4;
		  --second-color: white;
		}
		
		/*===== Margins =====*/
		:root{
		  --mb-1: 0.5rem;
  		  --mb-2: 1rem;
  		  --mb-3: 1.5rem;
  		  --mb-4: 2rem;
  		  --mb-5: 2.5rem;
  		  --mb-6: 3rem;
		}
		
		ul{
		  margin: 0;
		  padding: 0;
		  list-style: none;
		}
		a{
		  text-decoration: none;
		}
		
		
		/*===== LAYOUT =====*/
		.bd-grid{
		  max-width: 100%;
		  display: grid;
		  grid-template-columns: 100%;
		  grid-column-gap: 2rem;
		  padding-left: 5%;
		  padding-right: 5%;
		}
		.l-header{
		  width: 100%;
		  position: fixed;
		  top: 0;
		  left: 0;
		  z-index: 100;
		  box-shadow: 0 1px 4px rgba(146,161,176,.15);
		}
		
		/*===== NAV =====*/
		.nav{
		  height: var(--header-height);
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  font-weight: var(--font-semi);
		  background-color: #2b2b2b;
		}
		@media screen and (max-width: 768px){
		  .nav__menu{
		    position: fixed;
		    top: var(--header-height);
		    right: -100%;
		    width: 40%;
		    height: 100%;
		    padding: 2rem;
		    transition: .5s;
		    background-color: #2b2b2b;
		  }
		}
		.nav__item{
		  margin-bottom: var(--mb-4);
		}
		.nav__link{
		  position: relative;
		  color: #fff;
		}
		.nav__link:hover{
		  position: relative;
		}
		.nav__link:hover::after{
		  position: absolute;
		  content: "";
		  width: 100%;
		  height: 0.18rem;
		  left: 0;
		  top: 2rem;
		  background-color: var(--first-color);
		}
		.nav__logo{
		  color: var(--second-color);
		}
		.nav__toggle{
		  color: var(--second-color);
		  font-size: 1.5rem;
		  cursor: pointer;
		}
		
		/*Active menu*/
		.act::after{
		  position: absolute;
		  content: "";
		  width: 100%;
		  height: 0.18rem;
		  left: 0;
		  top: 2rem;
		  background-color: var(--first-color);
		}
		
		/*=== Show menu ===*/
		.show{
		  right: 0;
		}
		
		/* ===== FOOTER =====*/
		.footer{
		  text-align: center;
		  font-weight: var(--font-semi);
		  padding: 2rem 0;
		  color: white;
		}
		.footer__title{
		  font-size: 2rem;
		  margin-bottom: var(--mb-4);
		}
		.footer__social{
		  margin-bottom: var(--mb-4);
		}
		.footer__icon{
		  font-size: 1.5rem;
		  color: #fff;
		  margin: 0 var(--mb-2)
		}
		
		/* ===== MEDIA QUERIES=====*/
		@media screen and (min-width: 768px){
		  .nav{
		    height: calc(var(--header-height) + 1rem);
		    background-color: #2b2b2b;
		  }
		  .nav__list{
		    display: flex;
		    padding-top: 0;
		  }
		  .nav__item{
		    margin-left: var(--mb-6);
		    margin-bottom: 0;
		  }
		  .nav__toggle{
		    display: none;
		  }
		  .nav__link{
		    color: var(--second-color);
		  }
		}
		
		@media screen and (min-width: 1024px){
		  .bd-grid{
		    margin-left: auto;
		    margin-right: auto;
		  }
		}



@media screen and (min-width: 750px) {
.left{
	padding: 0 20px;
  }
}

@media screen and (max-width: 750px) {
.left{
	padding: 0px;
  }
}
/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}

.header{
  font-size: 24px;
  width: 100%;
  padding: 5px;
  background-color: #2b2b2b;
	font-weight: 700;
	color: white;
	position: relative;
	text-align: left;
	margin-bottom: 15px;
}

.header:before{
	content: "";
	position: absolute;
	top: 80px;
	left: 0;
	width: 50px;
	height: 3px;
	background: #4070F4;
}

.header:after {
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}


.cont{
  background-color: white;
  float: left;
  position: relative;
}
.cont .tit{
  font-size: 24px;
  width: 100%;
  padding: 5px;
  background-color: #292b2f;
	font-weight: 700;
	color: white;
	position: relative;
	text-align: left;
	margin-bottom: 15px;
}
.tit:before{
	content: "";
	position: absolute;
	top: 80px;
	left: 0;
	width: 50px;
	height: 3px;
	background: #4070F4;
}
.cert p{
  padding-left: 10px;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  margin: 8px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}

/* Create  equal columns that floats next to each other */
.column {
  float: left;
  width: calc(100% / 3);
}


/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  padding: 10px;
  border-radius: 15px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}







.accordion {
  background-color: #eee;
  color: #444;
  border-radius: 15px;
  cursor: pointer;
  padding: 30%;
  width: 100%;
  border: ridge;
  text-align: left;
  outline: none;
  font-size: 25px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding-right: auto;
  padding-left: 5px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel .title{
  font-size: 24px;
	font-weight: 700;
	padding-bottom: 10px;
	color: #9153c9;
	position: relative;
	text-align: right;
	margin-bottom: 15px;
}
.panel .title:before{
	content: "";
	position: absolute;
	top: 35px;
	right: 0;
	width: 50px;
	height: 3px;
	background: #9153c9;
}

.link{
  float: right;
  font-size: 20px;
}


.info{
  font-weight: 300;
	font-size: 14px;
	margin-top: 3px;
}



/*background gradience animation*/
body {
	font-family: "montserrat";
	background-image: linear-gradient(125deg, Black, #898989);
	background-size: 400%;
	animation: bganimation 15s infinite;
}

@keyframes bganimation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}