/* colors  */

:root {
  --primary:#EEBF00;
  --secondary:#232B38;
  --ternary:#6C6C6C;
  --danger:#FE4545;
  --pure:#FEFEFE;
  --light:#F0F0F0;
  --heaven:#FFFFFF;
  --footer:#2D333F;
}
body{
  overflow-x: hidden;
}
.container { 
  width: 1152px;
  max-width: 90%;
  margin: 0 auto;
}
/* Reset  */
*{
  padding:0;
  margin:0;
  box-sizing: border-box;
}
/* fonts  */
@font-face {
  font-family:"Raleway-regular";
  src:url(../fonts/Raleway-Regular.ttf)
}
@font-face {
  font-family:"Raleway-medium";
  src:url(../fonts/Raleway-Medium.ttf)
}
@font-face {
  font-family:"Raleway-bold";
  src:url(../fonts/Raleway-Bold.ttf)
}

@font-face {
  font-family:"Raleway-extrabold";
  src:url(../fonts/Raleway-ExtraBold.ttf)
}
@font-face {
  font-family:"Raleway-semibold";
  src:url(../fonts/Raleway-SemiBold.ttf)
}
@font-face {
  font-family:"Raleway-black";
  src:url(../fonts/Raleway-Black.ttf)
}


body{
  -webkit-font-smoothing:antialiased;
  font-family: "Raleway-regular";
}



@media (min-width:576px){
  .container{
      max-width:540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1152px;
  }
}









/* --------------------------------------forth-section
--------------------------------------------------------------------------- */
  section .first-header{

  margin: 0px 300px;
}
.card-1 {
  box-shadow: 0 4px 8px 0 rgba(223, 8, 8, 0.2);
  transition: 0.3s;

  margin-top: -130px;
  margin-left: 5px;
  border-radius: 50px;

  

}

.card-2 {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 95%;
  margin-top: -120px;
  margin-left: 5px;

  border-radius: 10px;


  

}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
a  .button {
  background-color: #4CAF50; /* Green */
  border-radius: 3px;
  color: white;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.button {
  background-color: #4CAF50; /* Green */
  border-radius: 3px;
  color: white;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}





@media (max-width:576px){



  .container {
    width: 100%;
  
  }
}