@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,700;1,900&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
  font-family: "Roboto",Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-color: #ece8e9;
  overflow-x: hidden;
}

header{
   width: 100vw;
}
main{
  width: 100%;
  background-color: #fbf9fa;
}
 .pagination {
    display: block;
    margin: auto;
    text-align: center;
  }
  
   .pagination a {
    padding: 8px 8px;
    text-decoration: none;
    color: #f14da7;
  }
  
   .pagination a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
  }
  
   .pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 5px;
  }


h1{
  font-weight: bold;
  display: block;
  font-size: 170%;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
}
h2 { 
 font-weight: bold;
  display: block;
  font-size: 120%;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}
h3 { 
  font-weight: bold;
  display: block;
  font-size: 100%;
  margin-top: 0.83em;
  margin-bottom: 0.83em;

}
h4 { 
    font-weight: bold;
    display: block;
    font-size: 100%;
    margin-top: 0.83em;
    margin-bottom: 0.83em;

}

h5 { 
    font-weight: bold;
    font-size: 100%;
    margin-top: 0.83em;
    margin-bottom: 0.83em;

}
label{
  font-weight: bold;
}

.r_bold{
  color: rgb(250, 12, 12);
  font-weight: 700;
}

.wmain{
    width: 100%;
    max-width: 1800px;
    display: block;
    text-align: center;
    align-content: center;
    background-color: #fff;
    padding: 10px 20px;
    margin: auto;
}
.wmain a{
        text-decoration: none;
}
.top_action{
  max-width: 100%;
  margin-left: 24px;
  text-align: left;
}

.production_main{
 display: block;
  margin: 45px 24px;
  text-align: left;
}

.hero {
    display: block;
    background-image: linear-gradient(0deg, rgb(141 170 238), #5587e0), url("http://localhost/onkod/images/gold.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;

}
.mbanner{
  background-image: url("http://localhost/onkod/images/gold.jpg");
  background-repeat: no-repeat;
  background-position: right;
  min-width: 350px;
}
.hero_text{
   padding: 40px 30px 25px 30px;
  
}
.hero h1{
    color: #fff;
    font-size: 250%;
    margin-bottom: 24px;
    line-height: 2rem;
    justify-content: left;
}

.hero p{
    color: #e5e5e5;
    font-size: 150%;
   line-height: 2rem;
    opacity: .5;
}

.mbanner .mreg{
  width: 100%;
  height: 100%;
  margin: 24px;
}
.mbanner .mreg a{
  font-family: 'Roboto',Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #fff;
  padding: 8px 20px;
  text-decoration:none;
  border: #8bafd1 1px solid;
  border-radius:10px;
  cursor:pointer;
  margin-right: 45px;
}
.s_input{
  max-width: 350px;
  margin: auto;
}

.mbanner .mreg a:hover{
  color: #ccc;
  border: #ffffff 1px solid;
  cursor:pointer;
}
.ctr { 
    width: 100%;
    margin: auto; 
    text-align: center;
  }

.regSec{
  display: block;
  background-color: #faefef;
  width: 100%;
  text-align: left;
  margin: auto;
  padding: 10px 0 10px 0;
  margin-left: 24px;
}

.msg{
  display: block;
  width: 100%;
  margin: 14px 14px;
  text-align: center;
}


.lg_icon{
  font-size: 41px;
}


.footer{
    width: 100%;
    display: block;
    background: #f2f2f2;
    color: #060404;
    text-align: center;
    justify-content: center;
}

.input_control{
    margin-bottom: 25px;
    width: 100%;
    height: 34px;
    border-color: #000;
}

.footer-menu a {
  text-decoration: none;
  color: #851012f9;
  font-size: 90%;
  font-weight: 300;
}

.u_img{
  max-width:250px;
  max-height:150px;
  margin:12px;
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 3%;
}


.text_link{
  font-size: 75%;
}
.text_link{
  text-decoration: none;
}

.text{
  color: #060404;
  font-size: 80%;
   font-family: Open Sans, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
}

.stext{
  font-size: 60%;
}
.twhite{
    color: #fff;
}

.textr{
       color: #851012f9;
       font-size: 120%;
      font-family: Open Sans, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
      font-weight: 700;
}

.textr a{
       font-size: 80%;
}

.summary{
    display: flex;
    justify-content: end;
    padding-right: 4rem;
    border: 2px solid #f3f1f1;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.summary span{
    padding: 1rem 2rem;
    border-radius: 3%;
    border: transparent;
    font-weight: 700;
    letter-spacing: 2px;

}
.caption_sum{
     font-weight: 700;
    border-bottom: 2px solid #e9e7e7;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 0.5rem 10rem;

}

@media all and (max-width: 768px) {

        .mbanner {
            min-width: 400px;
        }

        .mbanner .mreg {
            margin-top: 65px;
            margin-bottom: 34px;
        }

      .mbanner .image{
        background-image: linear-gradient(0deg, rgb(15 70 139 / 50%), #929ad5), url(images/tbg.jpg);
        font-weight: 200;
        font-size: 120%;
      }
      h1{
        font-size: 125%;
      }
      h2{
        font-size: 100%;
      }
      .hworks{
        width: 100%;
        display: block;
      }
      .hworks > .hworks-item {
        flex:none;
        padding-bottom: 45px;
      }
      .hero h1{
                font-size: 120%;
                opacity: .5;
      }
      .hero p{
        width: 100%;
      }

}

@media all and (max-width: 400px) {
      .hero_text {
        padding: 14px 15px;
      }
    .hero p {
            color: #101010;
        }

  .hero h1 .hero p{
    display: block;
    width: 100%;
    font-size: 100%;
  }
}