@import url('https://fonts.googleapis.com/css2?family=Montserrat+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,700;0,800;1,400&display=swap');
* {
  font-family: "Poppins", sans-serif;
}
body {

    /*background-size: 100% 100%;*/
}
p, h3, h2 {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  /*color: #414141;*/
}


.header {
  background-image: url(../img/header.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 371px;
  padding: 5% 0;
}
.head_content{
  /*display: flex;*/
}
.fl {
  /*display: flex;*/
}
.profile_image{
  width: 85%;
  /*float: left;*/
}
a {
  color: #fff;
}
.profile_des {
  
       color: #414141;
    text-align: left;
}
.profile_des p {
  padding-right: 5%;
}
.profile_des p span {
      font-size: 20px;
    letter-spacing: 1px;
}
.social_links ul{
  float: left;
  padding-left: 0;
  margin-bottom: 10px;
}
.social_links ul li {
    list-style: none;
    float: left;
    padding: 5px;
    width: 35px;
    text-align: center;
    color: #fff;
    background-color: #414141;
    margin-left: 15px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.getbtn {
    background: #efefef;
    padding: 15px 21px;
    border-radius: 100px;
    border: none;
    color: #414141;
    font-size: 20px;
    float: right;
    margin-left: 30px;
    margin-bottom: 20px;
}
.btn{
    border-radius: 0;
    padding: 15px 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
    float: right;
}
/*Tabs*/

.content {
   /*   float: right;
    text-align: justify;*/
   /* position: absolute;
    top: 100%;*/
}

.tabs {
  /*display: grid;*/
}

[role="tablist"] {
 
       text-align: end;

}

button.rating_btn:hover {
   
    color: #414141;
    border: 1px solid #414141;
    background-color: #ffd67a;
    transition: .5s ease;
}

.tabWrapper {
  display: grid;
/*  font-family: 'Arial';
  margin-top: 4rem;
  padding: 1rem;
  width: 1000px;*/
}

[role="tabpanel"] {
  background: #FFFFFF;
  padding: 2rem 0;
}
.tab_btn {
      padding: 2% 3%;
    text-transform: capitalize;
    letter-spacing: 2px;
        background-color: #fff;
    border: 1px solid #cacaca;
    transition: .5s ease;
}
.box {
    background-color: #ffd67a;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
}
.box h3 {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.tag {
    margin-bottom: 5px;
    background-color: #414141;
    color: #fff;
    padding: 5px 0 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: 2px;
    /*text-transform: uppercase;*/
}
.story {
    padding: 52px 30px;
    padding-top:20px;
    text-align: justify;

}
button:focus {
  outline: none;
  box-shadow: none;
}
.story h3 {
    margin-bottom: 20px;
    font-size: 20px;
    letter-spacing: 1px;
}
.tab_btn:hover {
    
    background-color: #414141;
    /*border: 1px solid #cacaca;*/
    color: #fff;
    transition: .5s ease;
}


.story p {
    letter-spacing: 1px;
    font-size: 15px;
    color: #414141;
}
.team{
  padding: 1px 30px;
}
.team h3{
      margin-bottom: 20px;
    font-size: 20px;
    letter-spacing: 1px;
}
.box_team {
    background-color: #ffd67a;
    color: #414141;
    padding: 15px;
    border-radius: 10px;
}
.box_team h3{
  margin-bottom: 0;
  letter-spacing: 2px;
  font-size: 20px;
}
.box_team p {
    letter-spacing: 2px;
    font-size: 14px;
}
.project_box {
    margin-bottom: 30px;
}
.date{
  padding: 20px;
      background-color: #414141;
    color: #fff;
    text-align: center;
    height: 100%;
}
.date h3 {
    font-size: 60px;
    letter-spacing: 12px;
    font-family: 'Bebas Neue', cursive;
}
.date h3 span {
    font-family: 'Bebas Neue', cursive;
    letter-spacing: 22px;
}
.project_des {
    padding: 20px 30px 20px 0;
    text-align: justify;
}
.project_des h3 {
    margin-bottom: 20px;
    font-size: 20px;
    letter-spacing: 1px;
}
.project_des p {
    letter-spacing: 1px;
    font-size: 15px;
    color: #414141;
}

.main .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
}
.main .card {
  background: #ffffff;
  /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);*/
  color: #333333;
  border-radius: 2px;
}
.main .card-image {
  background: #ffffff;
  display: block;
  padding-top: 70%;
  position: relative;
  width: 100%;
}
.main .card-image img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery {
    padding: 30px 15px;
    /*margin-top: 10px;*/
}

@media only screen and (max-width: 600px) {
  .main .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
  }
}
/* ///// inputs /////*/

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
    font-size: 0.75em;
    color: #999;
    top: -5px;
    -webkit-transition: all 0.225s ease;
    transition: all 0.225s ease;
}

.styled-input {
    float: left;
    width: 100%;
    margin: 1rem 0;
    position: relative;
    border-radius: 4px;
}

@media only screen and (max-width: 768px){
    .styled-input {
        width:100%;
    }
}

.styled-input label {
    color: #999;
    padding: 1.3rem 30px 1rem 30px;
    position: absolute;
    top: 10px;
    left: 0;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    pointer-events: none;
}

.styled-input.wide { 
    width: 100%;
    max-width: 100%;
}

input,
textarea {
    padding: 30px;
    border: 0;
    width: 100%;
    font-size: 1rem;
    /*background-color: #fff;
    color: white;*/
    border-radius: 4px;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
    width: 100%;
    -webkit-transition: all 0.075s ease;
    transition: all 0.075s ease;
}

textarea {
    width: 100%;
    min-height: 15em;
}

.input-container {
    width: 80%;
    
    max-width: 100%;
    margin: 20px auto 25px auto;
}
.form_container {
  background-color: #f7f7f7;
      padding: 20px 0;
}

.submit-btn {
  background-color: #414141;
  color: #fff;
}

.submit-btn:hover {
    transform: translateY(1px);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
              0 1px 1px 0 rgba(0,0,0,0.09);
}

@media (max-width: 768px) {
    .submit-btn {
        /*width:100%;*/
        float: none;
        text-align:center;
    }
}

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 

input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}
.rate{
  float: left;
}
button.rating_btn {
        padding: 15px 25px;
    border-radius: 15px;
    color: #b3b3b3;
    border: 1px solid #b3b3b3;
    background-color: #fff;
}
.contact_section {
   box-shadow: 0 19px 38px rgba(130, 130, 130, 0.3), 0 15px 12px rgba(171, 171, 171, 0.22)
}
.contact_item {
    padding: 30px 20px;
    background-color: #ffd67a;
}
.contact_detail h3{
     margin-bottom: 20px;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;



}
.contact_detail p {
    letter-spacing: 1px;
    font-size: 15px;
    color: #414141;
}
.opening_detail h3{
 padding: 15px 10px;
    font-size: 16px;
    letter-spacing: 2px;
    background-color: #414141;
    color: #fff;
    margin-top: 30px;
    text-transform: uppercase;
}

.opening_detail p {
    letter-spacing: 1px;
    font-size: 15px;
    color: #414141;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
    text-align: left;
    padding: 15px 8px;
}
tr {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #fff;
}



/*Media Query*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  .profile_image {
    width: 50%;
    margin: auto;
}
.profile_des p {
     padding-top: 5%;
     padding-right: 0; 
    font-size: 14px;
    font-weight: 100;
}
.profile_des p span {
    font-size: 15px;
    letter-spacing: 1px;
}
.header{
  height: 630px;
}
.social_links ul li {
    margin-left: 0;
    margin-right: 15px;

}
.social_links ul {
  width: 100%;
    margin: 10px 0;
}
.profile_des {
   
    margin-top: 10px;
}
.btn{
       float: none; 
    width: 100%;
}
.getbtn{
       float: none; 
     margin-left: 0px;
     margin-right: 30px;
}
.tab_btn{
  width: 100%

}
.content {
  margin-top: 50px;
}
.box_team {

    margin-bottom: 10px;
}
.project_des {
    padding: 20px 30px 20px 20px;
    /*text-align: justify;*/
}
.input-container {
  width: 100%;
}
button.rating_btn {
    padding: 5px 15px;
    margin-bottom: 20px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px){

  .header{
    height: 359px;
  }

}
@media only screen and (min-width: 1300px){

  .header{
    height: 354px;
  }

}
@media only screen and (min-width: 1920px){

  .header{
    height: 382px;
  }

}
@media only screen and (min-width: 2000px){

  .header{
    height: 382px;
  }

}