* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(78, 87, 84);
}
header {
    position:fixed;
    top: 0;
    left: 0;
    width: 57px;
    height: 41vh;
    background-color: rgb(76, 25, 171);
    transition: 1.2s;
}
header p {
    text-align: center;
    color: azure;
    margin: 8px;
}
.menu {
    list-style: none;
    width: 55px;
    padding: 0;
}
.menu li {
    height: 50px;
}
.menu li a {
    text-decoration: none;
    color: rgb(150, 238, 9);
    background-color:  rgb(46, 41, 178);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    width: 80%;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    transition: 1.2s;
    height: 50%;
}
.menu li a:hover {
    background-color: rgb(53, 66, 31);
}
.menu li a img {
    height: 40px;
}
.menu span {
    visibility: hidden;
    transition-delay: 0.22s;
    transition: 0.3s;
}
header:hover {
    width: 250px;
}
header:hover span {
    visibility: visible;
    transition-delay: 0.22s;
}
header:hover a {
    width: 212px;
}
header .menu {
    padding-left: 10px;
    padding-right: 0;
    transition: 1.2s;
}
header:hover .menu {
    padding-left: 0;
}
.btn-group button {
    background-color: #9f7feb; /* Green background */
    border: 1px solid rgb(233, 167, 25); /* Green border */
    color: rgb(12, 17, 13); /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
}
nav {
    max-width: 1050px;
    margin: 0 auto;
}
.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.term {
    max-width: 1050px;
    margin: 0 auto;
    position: relative;
}
.term img {
    width: 100%;

}
.term__title {
    position: absolute;
    left: 30%;
    top: 100px;
}
.term p {
    font-size: 35px;
    color: rgb(158, 78, 223);
}
h1 {
    font-size: 35px;
    color: blue;
    text-transform: capitalize;
    text-align: center;
}
.all {
    display: flex;
}
.card {
    width: 200px;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 10px 10px 40px #434040;
    margin: auto;
    margin-top: 100px;
    
    overflow: hidden;
    transition: all .125s;
}
.card:hover {
    transform: scale(.9);
}
.pink {
    background-color: rgb(215, 32, 133);
}
.green {
    background-color: rgb(18, 155, 61);
}
.blue {
    background-color: rgb(41, 161, 204);
}
.dark-blue {
    background-color: rgb(85, 12, 243);
}
.orange {
    background-color: rgb(238, 144, 78);
}
.red { 
    background-color: red;
}
.card-img {
    border-radius: 13px;
    width: 160px;
}
.card-title {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 500;
}
.card-sub {
    font-size: 18px;
    font-weight: 200;
    margin-top: 20px;
}
.btn-keeper {
    margin-top: 20px;
    text-align: center;
}
.btn {
    background-color: rgb(47, 171, 19);
    padding: 7px 12px;
    text-decoration: none;
    color: rgb(205, 14, 144);
    border-radius : 10px;
    transition: background-color 0.5s linear;
}
.btn:hover {
    background-color:blue
}
h2 {
    font-size: 35px;
    text-align: center;
    color: blue;
    margin-top: 50px;
}
.container {
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
    align-items: center;
    justify-content: center;
}
 note {
    width: 200px;
    height: 320px;
    border: 3px solid #3f9de9;
    text-align: center;
    flex-direction: column;
    color: #0d4f81;
    font-size: 10px;
    align-items: center;
    margin: 10px;
}
.note {
    width: 200px;
    height: 320px;
    border: 3px solid #66aee6;
    text-align: center;
    flex-direction: column;
    color: #1d2b36;
    font-size: 10px;
    align-items: center;
    margin: 10px;
}
.note p {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
.note img {
    padding-top: 10px;
    width: 75%;
}
.note img:hover {
    transform: scale(1.2);
    transition: 1s;
}
h3 {
    text-align: center;
    color: #1bad23;
    font-size: 25px;
    padding-top: 5px;
}
.button {
    width: 60%;
    height: 10%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgb(20, 197, 197);
    background: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    position: relative;
    transition: 3s;
}
.button p {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -100%);
    color: rgb(103, 218, 128);
    font-size: 15px;
    text-transform: uppercase;
}
.button p:hover {
    color: rgb(189, 42, 42);
}
.button:hover {
    background-color: rgb(245, 75, 216);
}
button:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    z-index: -1;
}
button:hover:before {
    top: 0;
    height: 100%;
}
.grid {
    padding: 2.5em;
}
.grid-inner {
    display: inline-block;
    flex-wrap: wrap;
    margin: 0 -0.5em;
}
.item {
    flex: 1 1 100%;
    padding: 0.5em;
}
.item-inner {
background-size: cover;
background-image: url("img/");
padding-top: calc(100% / (16/9));
}
.item:nth-child(1) .item-inner {
background-image: url("img/term1.png");
}
.item:nth-child(2) .item-inner {
background-image: url("img/term2.png");
 }
.item:nth-child(3) .item-inner {
 background-image: url("img/term3.png");
 }
.item:nth-child(4) .item-inner {
 background-image: url("img/term4.png");
 }
.item:nth-child(5) .item-inner {
 background-image: url("term5"); 
 }            
 .item:nth-child(6) .item-inner {
 background-image: url("img/term5.png");
 }
.item:nth-child(7) .item-inner {
 background-image: url("term7.png");
 }
.item:nth-child(8) .item-inner {
  background-image: url("term8.png");  
 }
 .item:nth-child(9) .item-inner {
 background-image: url("term9.png");
 }
 .item:nth-child(10) .item-inner {
  background-image: url("term10.png"); 
 }                                
  .item:nth-child(11) .item-inner {
 background-image: url("term11.png");
 }
  .item:nth-child(12) .item-inner {
   background-image: url("term12.png");
 }
 .item:nth-child(13) .item-inner {
  background-image: url("term13.png");
  }
 .item:nth-child(14) .item-inner {
 background-image: url("term14.png");
 }                                                                                                             
.item:nth-child(15) .item-inner {
 background-image: url("term15.png");
 }
.item:nth-child(16) .item-inner {
  background-image: url("term16.png");
 }
.item:nth-child(17) .item-inner {
 background-image: url("term17.png");
 }
.item:nth-child(18) .item-inner {
  background-image: url("term18.png");
  }
.item:nth-child(19) .item-inner {
  background-image: url("term19.png");
 }
.item:nth-child(20) .item-inner {
background-image: url("term20.png");
 }
.item:nth-child(21) .item-inner {
  background-image: url("term21.png"); 
 }
.item:nth-child(22) .item-inner {
  background-image: url("term22.png");
 }
.item:nth-child(23) .item-inner {
background-image: url("term23.png");
 }
 .item:nth-child(24) .item-inner {
   background-image: url("term24.png");
 }
 .item:nth-child(25) .item-inner {
background-image: url("term25.png");
 }
.item:nth-child(26) .item-inner {
 background-image: url("term26.png");
 }
.item:nth-child(27) .item-inner {
background-image: url("term27.png");
 }
.item:nth-child(28) .item-inner {
 background-image: url("term28.png");
}
.item:nth-child(29) .item-inner {
background-image: url("term29.png");
 }
.item:nth-child(30) .item-inner {
 background-image: url("term30.png");
 }
.item:nth-child(31) .item-inner {
background-image: url("term31.png");
 }
.item:nth-child(32) .item-inner {
background-image: url("term32.png");
}
.item:nth-child(33) .item-inner {
 background-image: url("term33.png");
 }
.item:nth-child(34) .item-inner {
 background-image: url("term34.png");
 }
.item:nth-child(35) .item-inner {
 background-image: url("term35.png");
 }
.item:nth-child(36) .item-inner {
 background-image: url("term36.png");
 }
.item:nth-child(37) .item-inner {
 background-image: url("term37.png");
 }
.item:nth-child(38) .item-inner {
 background-image: url("term38.png");
 }
.item:nth-child(39) .item-inner {
 background-image: url("term39.png");
}
.item:nth-child(40) .item-inner {
 background-image: url("term40.png");
 }                                                                                              
       @media  screen and (min-width:480px ) {
    .item {
        flex: 11 50%;
    }
}
       @media  screen and (min-width:768px ) {
        .item {
            flex: 11 33.333%;
        }
       }
       h5 {
        font-size: 40px;
        margin-left: 30%;
        margin-top: 20px;
        color: #17d330;
    }
h6 {
    font-size: 43px;
    margin-left: 35%;
    margin-top: 50px;
    color: #8670c4;
}
form {
    margin-top: 50px;
    margin-left: 5%;
}
.common {
    display: flex;
    flex-direction: row;
}
.name {
    display: flex;
    flex-direction: row;
    position: relative;
}
.name input {
    padding: 10px;
    width: 250px;
    background-color: #30648f;
    color: black;
}
.name label {
    position: absolute;
    top: -15px;
    left: 10px;
    padding: 0 5px;
    color: azure
}
.email {
    display: flex;
    flex-direction: row;
    position: relative;
}
.email input {
    padding: 10px;
    width: 250px;
    background-color: #30648f;
    color: black;
}
.email label {
    position: absolute;
    top: -15px;
    left: 10px;
    padding: 0 5px;
    color: azure
}
.phone {
    display: flex;
    flex-direction: row;
    position: relative;
}
.phone input {
    padding: 10px;
    width: 250px;
    background-color:#30648f ;
    color: black;
}
.phone label {
    position: absolute;
    top: -15px;
    left: 10px;
    padding: 0 5px;
    color: azure;
}
.connecting {
    margin-top: 2%;
}
.connecting p {
    color: azure;
}
.topic {
    margin-top: 2%;
    color: azure;
}
#selector {
    background-color: #30648f;
}
.message {
    margin-top: 2%;

}
.message p {
    color: azure;
}
#message {
    background-color:#30648f ;
}
.smile {
    background-image: url("img/smile.jpg");
    width: 80px;
    height: 80px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 1%;
}
footer {
    margin-top: 20%;
    margin-left: 25%;
    display: inline-block;
}
@media screen and (min-width:600px) and (max-width:850px) {
}
.icons_down {
    list-style: none;
    display: flex;
}
.robot {
    background-image: url("img/robot.png");
    width: 80px;
    height: 80px;
    display:flex;
    background-repeat: no-repeat;
    background-size: cover;
}
.robot:hover {
    background-image: url("img/robot_full.png");
}