@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&family=Rubik:ital,wght@0,400;0,500;0,600;1,300;1,400;1,500&family=Work+Sans:ital,wght@0,400;0,500;0,700;1,100;1,200&display=swap');

/* Start Variables */
:root {
    --section-padding: 50px;
  }
  /* Start Global Rules */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  --main-color: #2196f3;
  --main-color-alt: #1787e0;
  --main-transition: 0.3s;
  --main-padding-top: 100px;
  --main-padding-bottom: 100px;
  --section-background: #ececec;
}

  /* End Variables */

  /* Start Global Rules */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  html {
    scroll-behavior: smooth;
  }

/* scrollbar css */
/* width */
::-webkit-scrollbar {
  width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #333;
  border-radius: 0;
}
 /* Handle */
::-webkit-scrollbar-thumb {
  background:#777;
  border-radius: 0;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ee1d25;
}
body {
    /* font-family: 'Open Sans', sans-serif !important; */
    font-family: 'Rubik', sans-serif !important;
    /* font-family: 'Work Sans', sans-serif !important; */
}


  /* End Global Rules */

  /* start header  */
  header {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 97px;
  }
  header .logo img {
    height: 84px;
    left: 0;
    position: absolute;
    top: 0;
  }
  /* end header  */

  /* start landing */
  .landing{
    min-height: 100vh;
    background-image: url(https://registration.amer-group.com/assets/images/website.jpg);
    /* background-image: url(../images/Capture.JPG); */
    background-size: cover;
    /* background-color: black; */
    color: white;
    position: relative;
  }

.landing .row{
  min-height: 100vh;
}
.landing .row .box{
  background-color: #ee1d25;
  box-shadow: 0 10px 10px #ee1d25;
  padding: 75px 50px;
  position: relative;
  overflow: hidden;
}
@media(max-width:991px){
  .landing .row .box{
    background-color: rgb(238 29 37 / 50%);
    /* background-color: rgb(238, 29, 37/10%); */
    padding: 75px 50px;
  }
}
/* .landing .row .box .text::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-width: 125px 30px 115px 1000px;
  border-color:transparent transparent transparent black;
  transition: var(--main-transition);
} */
/* .landing .row .box .text::after {
  content: "";
  position: absolute;
  top:0;
  left: 0;
  border-style: solid;
  width: 100%;
  border-width: 100px 100px 100px 100px;
  border-color:white #ee1d25 transparent #ee1d25;
  transition: var(--main-transition);
} */
/* .landing .row .box:hover .text::after {
  border-width: 100px 100px 200px 100px;
  border-color:transparent transparent transparent transparent;
}
.landing .row .box:hover .text::before {
  border-width: 200px 100px 100px 100px;
  border-color:transparent transparent transparent transparent;
} */

.landing .row .box .text{
  text-align: justify;
}
.landing .form input{
  border-radius: 0;
  border: none;
  font-size: 19px;
}

/* .landing .form form .input-group input ::placeholder{
  color:#ee1d25 !important ;
}
.landing .form form input:-ms-input-placeholder {
  color:#ee1d25 !important;
}

.landing .form form input::-ms-input-placeholder {
  color:#ee1d25 !important;
} */

.landing .form input:active{
  border: 1px solid #333;
}

.landing .form .form-select{
  color: #777;
  border-radius: 0;
}
.landing .form .form-select option{
  text-transform: uppercase;
}
option:hover{
  background:#ee1d25 !important;
  padding: 10px 10px;
}

.landing .form .btn-primary{
    background-color: #f7f7f7;
    border: none;
    width: 100%;
    color:#ee1d25;
    height: 50px;
    border-radius: 0;
    font-weight: bold;
    font-size: 20px;
}
.landing .form .btn-primary:hover{
  background-color: #ee1d25;
  color: #f7f7f7;
  border: 2px solid #f7f7f7;
}

/* Start projects */
.projects {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}
.main-heading {
  text-align: center;
}
.main-heading h2 {
  font-weight: bold;
  /* font-size: 40px; */
  position: relative;
  margin-bottom: 70px;
  text-transform: uppercase;
  color: red;
}
.main-heading p {
  width: 900px;
  margin: -60px auto 50px;
  max-width: 100%;
  color: #777;
  font-size: 20px;
}
.projects .row .col{
  padding: 25px 60px;
  }

  @media(max-width:480px)
  {
    .projects .row .col{
      text-align: center;
    }
  }
  @media(max-width:768px)
  {
    .projects .row .col{
      padding: 25px 25px;
    }
  }

.projects .row .col img{
  border: 1px solid #777;
  padding: 10px 10px;
  width: 100%;
  transition: var(--main-transition);
}
.projects .row .col img:hover{
  transform: translateY(-10px);
  /* box-shadow: 0 1px 10px #ee1d25; */
}

/* Start Footer */
.footer {
  padding-top: calc(var(--section-padding) / 2);
  /* background-image: url("../images/Amer-Group-.jpg"); */
  /* background-size: cover; */
  position: relative;
  color:black;
  text-align: center;
  background-color: white;
}
/* .footer .overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 60%);
  z-index: 2;
} */

.footer .container {
  position: relative;
}
.footer img {
  margin-bottom: 20px;
  width: 180px;
}
.footer .social-icons{
  border-top: 1px solid #777;
  padding: 10px;
}
.footer .social-icons a{
  padding: 8px;
}
.footer .social-icons img{
  width:30px;
  height:30px;
}
.footer .copyright {
  font-size: 9px;
  color: #777;
  margin-top: -32px;
}
.footer .copyright span {
  font-weight: bold;
  color:red;
}
/* End Footer */


.invalid{
  display: none;
}