* {
    box-sizing: border-box;
}

  body{
        padding: 0;
        margin: 0;
        min-height: 100vh;
        display:flex;
        flex-direction: column ;
        justify-content:space-between;
    }
    header{
        padding: 15px 0;
        height: 110px;
        /* background-color: #ffb551; */
        background-color: #53cfda;
        box-shadow: 0px 4px 14px #888;
    }

    .container{
        width:1000px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    header .container{
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    header .container ul{
        list-style: none;
        padding: 0;
        display: flex;
        gap:20px;
        margin-right:50px;
    }

    header ul li{
        display: inline-block;
        padding: 5px;
        font-size: 20px;
        font-weight: 800;
        line-height: 27px;
        text-transform: uppercase;
    
    }
    header ul li a{
    text-decoration: none;
    color: white;

    }
    .banner{
        margin:80px;

    }
    .banner .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .login .container .form{

            display: flex;
            align-items: center;
            flex-direction: column;
            box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.25);
            width: 411px;
            height: 423px;
        
          }
  
          .login .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .login .container .form form input{
            width: 245px;
            height: 32px;
            border: 1px solid #686868;
            box-sizing: border-box;
            padding-left: 20px;
            font-family: inherit;
            margin: 10px;
          }

          .contact .container .form form input,textarea{
            width: 245px;
            height: 32px;
            border: 1px solid #686868;
            box-sizing: border-box;
            padding-left: 20px;
            font-family: inherit;
            margin: 10px;
          }

          .login .container .form form .btn button {
            background-color: #FFC107;
            font-weight: 800;
            font-size: 16px;
            line-height: 22px;
            color: #FFFFFF;
            width: 245px;
            height: 32px;
            border: none;
            cursor: pointer;
            margin: 20px 10px 10px;
            text-align: center;
          }

          .contact .container .form form button {
            background-color: #FFC107;
            font-weight: 800;
            font-size: 16px;
            line-height: 22px;
            color: #FFFFFF;
            width: 245px;
            height: 32px;
            border: none;
            cursor: pointer;
            margin: 20px 10px 10px;
            text-align: center;
          }

          .login .container .signup {
            background-color: rgb(128, 128, 128);
            width: 245px;
            height: 32px;
            border: none;
            margin: 20px 10px 10px;
            text-align: center;
            line-height: 22px;


          }

          .login .container .signup a{
            font-weight: 800;
            font-size: 16px;
            color: #FFFFFF;
            cursor: pointer;
            text-decoration: none;

          }

          .contact .container {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

    footer {
        background-color: #53cfda;
    }

    footer .container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 50px 0;
        gap: 50px;
    }
    
    footer .container .info {
        font-size: 15px;
        line-height: 25px;
    }
    
    footer .container .info a {
        text-decoration: none;
        color: #000000;
    }
    
    footer .container .map iframe {
        width: 500px;
        height: 250px;
        border: 3px solid #FFFFFF;
        margin: 0px 0px 0px 50px;
    }
    
    footer .copyright {
        background-color: #C4C4C4;
        font-size: 18px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
/***********************/    
.holder{
border-radius:10px;
background-color:#ffc6f8;
overflow:hidden;
/*height:300px;*/


}
.in{
position:relative;
left:10%;
    width:40%;
    /* height:250px; */
}

input[type=text],input[type=file] {
border:none;
outline:none;
border:1px solid #b8cf0c;
/* border-bottom: 2px solid #f5f5f5; */
background: transparent;
/*height:20px;*/
padding:15px;
font-size:16px;
width:60%;
color:#4b538a;
margin-right:5px; 
}

input[type=text]:focus {
    background:burlywood;
    }

input[type=submit]{
    /* position:relative; */
    border: 4px solid #f5f5f5;
    border-radius:8px;
/* height:20px; */
padding:15px;
font-size:20px;
width:60%;
color:#4b538a;
margin:20px auto 20px 80px; 
left:10px; 
}

.title{
    color:brown;
    font-size:28px;
    text-align:center;
}
.holder span{
    display:inline;

}
.lab{
    border:1px solid #ffb551;
    display:inline-block;
width:80px;
text-align: right;   
margin:5px 15px; 
}
tr:hover{
    background-color: #ffc6f8;
}




/* Remove extra left and right margins, due to padding */
.row {
width:100%;
    margin: 5px 5px;
}

/* Clear floats after the columns */
.row:after {
  /* content: "";
  display: table; */
  clear: both;
}

/* Responsive columns */
/* @media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    margin-top: 20px;
  }
} */

/* Float four columns side by side */
.column2{
    float: left;
    height:auto;
    width: 20%;
    padding: 5px 5px;
    border:1px solid brown;
    margin: 10px auto 10px auto;
    margin-left:100px;
  }
  
/* Float four columns side by side */
.column {
    overflow:auto;
    /* float: left; */
    width: 1100px;
    /* height:600px; */
    padding: 5px 5px;
    /* margin-left: 50px; */
    margin: 10px auto 10px auto;
    border:1px solid blueviolet;
  }
  
/* Style the counter cards */
.card {
  width:160px;
  height: 300px; 
  background-color: #f1f1f1;
   display: flex;
   flex-direction: column;
    float: left;
    position:relative;
    border:1px solid red;
  box-shadow: 6px 6px 6px  gray;
  padding: 10px;
  margin: 10px 10px;
  /* text-align: left; */
}
.imgclass
{ width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 10px;
  border:1px solid white;
}
.card p,h3{
    margin :5px;
}

.card a:hover{
    background-color: yellow;

}
.href1{
display:flex;
flex-direction: row;

}
.card a{
    background-color: yellowgreen;
    text-align: center;
    margin: 5px;
    width:55px;
    height:25px;
    border:1px dashed blue ;
}
.inskey a{
  display:block;
  background-color: yellowgreen;
  text-align: center;
  margin: 5px;
  width:100px;
  height:30px;
  border:1px dashed blue ;
}
.inskey a:hover{
  background-color: yellow;
}
.output{
display: block;
    width:70%;
border:1px solid red;
margin:10px auto 30px auto;
padding-left: 10px;
}

 .test1{ /*this css if for 45 deg tag */
position:absolute;
top:15px;
right:5px;
color:white;
background-color:red;
padding:2px 8px 4px;
border-radius:5px;
rotate:45deg;
text-align: center;
}
.nafart{
/*    float:both;*/
    border:1px solid red;
    position: relative;
}