* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: inherit;
} 
html, 
body {
font-family: 'Tajawal', sans-serif;
font-weight: 100;
font-size: 16px;
height: 100%;
width: 100%;
scroll-behavior: smooth;
}

.light-bg
{
background-color: #e7eef3;
}
.white-text 
{
color: #e7eef3;
}
.red-text 
{
color: #EC0B0B;
}
.dark-text {
    color: #121314;
}
.bg {
    background-color: #121314;
}

/*** MAIN TITLE ***/
.main-title-section
{
  padding-top: 4rem;
  width: 80%;
  margin: auto;
  margin-bottom: 4rem;
}
.main-title
{
  font-size: 4rem;
  animation: 1.4s ease-out 0s 1 slideInTop;
  -webkit-animation: 1.4s ease-out 0s 1 slideInTop;
}
.secondary-main-title 
{
  font-size: 3rem;
  animation: 3.5s ease-out 0s 1 fadeIn;
  -webkit-animation: 3.5s ease-out 0s 1 fadeIn;
}
.title-text 
{
  font-size: 3rem;
}
.main-text
{
  font-size: 1.5rem;
}
.main-border-lines 
{
  padding-top: 1rem;
}
.border-line-dark
{
  border-bottom: 2px solid #151617;
}
.border-line-light 
{
  border-bottom: 2px solid white;
}

.project-title {
  width: 87%;
  margin: auto;
  margin-top: 2rem;
  font-size: 2rem !important;
  border-bottom: 2.5px solid black;
}
/*** SOCIAL LINKS AND LOGO ***/
.logo 
{
  width: 60px;
  height: 60px;
  margin: 10px;
  animation: 3.5s ease-out 0s 1 fadeIn;
}
.social-links
{
  width: 150px;
  margin: 15px;
  animation: 3.5s ease-out 0s 1 fadeIn;
}
.social-links a i
{
  font-size: 2rem;
  margin-left: 15px;
  color: #F7F7F7;
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
}
.social-links a i:hover
{
  color: #EC0B0B;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
}

/****************HEADER*******************/
.header 
{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.main-header-section
{
  width: 80%;
  margin: auto;
  display: flex;
}
.main-header-section h1
{
  padding-top: 2%;
  padding-bottom: 2%;
}
.main-header-section h2
{
  padding-top: 2%;
  padding-bottom: 2%;
}
.header-line
{
  width: 90%;
}
.main-section-one {
  width: 45%;
}
.main-section-two {
  margin-left: 8rem;
  margin-bottom: 2rem;
  width: 40%;
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}
.card1 {
  width: 3rem;
  height: 3rem;
}
.card1 img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  animation: 2s ease-out 0s 1 wipe-enter;
}
/****************HEADER END*******************/

/****************MAIN*******************/
.main-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 2rem;
}
.grid-item {
    width: 40%;
    margin: 2rem;
}

.btn {
  appearance: none;
  background-color: transparent;
  border-radius: 0.6em;
  align-self: center;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
}
.btn:hover,
.btn:focus {
    color: #121314;
    outline: 0;
}
.button{
  border-color: #EC0B0B;
  color: #fff;
  box-shadow: 0 0 40px 40px #EC0B0B inset, 0 0 0 0 #EC0B0B;
  transition: all 150ms ease-in-out;
  cursor: pointer;
}
.button:hover {
    box-shadow: 0 0 10px 0 #EC0B0B inset, 0 0 10px 4px #EC0B0B;
  }
.bold {
  font-weight: 600;
}
.headers-line
{
  width: 90%;
}
.secondary-title
{
  font-size: 4rem;
  width: 90%;
}

footer {
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wipe-enter{
  animation: 2s ease-out 0s 1 fadeIn;
  -webkit-animation: 2s ease-out 0s 1 fadeIn;
}
@keyframes wipe-enter {
	0% {
		transform: scale(0, .150);
		-webkit-transform: scale(0, .150);
		-moz-transform: scale(0, .150);
		-ms-transform: scale(0, .150);
		-o-transform: scale(0, .150);
}
	50% {
		transform: scale(1, .150);
		-webkit-transform: scale(1, .150);
		-moz-transform: scale(1, .150);
		-ms-transform: scale(1, .150);
		-o-transform: scale(1, .150);
}
}

@keyframes slideInTop {
  0% {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}
  100% {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
}
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/****************MAIN*******************/
@media screen and (max-width: 1400px) {
  /****************HEADER*******************/
  .header-line
  {
    width: 60%;
  }
  .main-title
  {
    font-size: 3.8rem;
  }
  .secondary-main-title 
  {
    font-size: 2.8rem;
  }
  /****************HEADER END*******************/
  /****************MAIN*******************/
    .grid-item {
        width: 40%;
        margin: 2rem;
    }
    .secondary-title
    {
      font-size: 3.8rem;
    }
/****************MAIN*******************/
}
@media screen and (max-width: 1200px) {
  /****************HEADER*******************/
  .header-line
  {
    width: 70%;
  }
  .main-title
  {
    font-size: 3.4rem;
  }
  .secondary-main-title 
  {
    font-size: 2.4rem;
  }
  .main-section-two {
    display: none;
  }
  .main-section-one {
    width: 80%;
  }
  /****************HEADER END*******************/
  /****************MAIN*******************/
  .grid-item {
    width: 100%;
    margin: 2rem;
    }
    .secondary-title
    {
      font-size: 3.4rem;
    }
    /****************MAIN*******************/
}
@media screen and (max-width: 1024px) {
  /****************HEADER*******************/
  .header-line
  {
    width: 80%;
  }
  .main-title
  {
    font-size: 3.4rem;
  }
  .secondary-main-title 
  {
    font-size: 2.4rem;
  }
  /****************HEADER END*******************/
  /****************MAIN*******************/
  .grid-item {
    width: 100%;
    margin: 2rem;
    }
    .secondary-title
    {
      font-size: 3.4rem;
    }
    /****************MAIN*******************/
}
@media screen and (max-width: 768px) {
  /****************HEADER*******************/
  .main-header-section
  {
    padding-left: 10%;
  }
  .header-line
  {
    width: 90%;
  }
  .main-title
  {
    font-size: 3rem;
  }
  .secondary-main-title 
  {
    font-size: 2rem;
  }
  /****************HEADER END*******************/
  .btn {
    padding: 0.7rem 1.3rem;
    font-size: 0.7rem;
  }
  .secondary-title
  {
    font-size: 3rem;
  }
}
@media screen and (max-width: 480px) {
  /****************HEADER*******************/
  .main-title
  {
    font-size: 2.6rem;
  }
  .secondary-main-title 
  {
    font-size: 1.6rem;
  }
  /****************HEADER END*******************/
  .secondary-title
  {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 340px) {
  /****************HEADER*******************/
  .main-title
  {
    font-size: 2rem;
  }
  .secondary-main-title 
  {
    font-size: 1rem;
  }
  /****************HEADER END*******************/
  .secondary-title
  {
    font-size: 2rem;
  }
}