*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html,body{
    height: 100%;
    width: 100%;
    padding: 10px;
}
a{
    text-decoration: none;
}

header{
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header h1{
    font-size: 20px;
}

nav{
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 30px;
    font-size: 13px;
    font-weight: 550;
}
nav a{
    color: rgb(43, 43, 43);
}

.buttons{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

button{
    text-align: center;
    padding: 12px 20px;
    border-radius: 50px;
    color: white;
    background-color: rgba(0, 113, 227, 1);
    border: 1px solid rgba(0, 113, 227, 1);
    transition: all ease 0.3s;
}

button:hover{
    cursor: pointer;
}

.button-tran{
    background-color: white;
    color: rgba(0, 113, 227, 1);
}
.button-tran:hover {
    color: white;
    background-color: rgba(0, 113, 227, 1);
}

#home{
    height: 38rem;
    width: 100%;
    margin: 5px 0px;
    border-radius: 10px;
    background-color: #f6f6f6b3;
    padding: 2% 25px;
    display: grid;
    grid-template-rows: 3rem 3rem 42rem;
    grid-template-columns: 35% 1fr;
    grid-template-areas: "aside article"
                         "aside buttons"
                         "figure figure";
    grid-gap: 30px 0px;
    justify-items: flex-start;
    align-items: flex-start;
}
#home article{
    font-size: 0.9rem;
    color: #535353;
}
#home aside{
    grid-area: aside;
    font-size: 3rem;
}

#home #buttons{
    grid-area: buttons;
}

#image_home{
    grid-area: figure;
    height: 60%;
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
    object-position: center;
    
}

.statistic-container{
    height: 8rem;
    width: 100%;
    display: flex;
    padding: 4%;
    margin: 1% 1%;
    border-radius: 10px;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    gap: 25px;
}

.stat-value{
    font-size: 2rem;
}

.stat-description{
    font-size: 0.7rem;
    color: rgb(86, 86, 86);
}

#about{
    height: 30rem;
    width: 98%;
    margin: 5px 1%;
    border-radius: 10px;
    background-color: #f6f6f6b3;
    padding: 40px 25px;
    display: grid;
    grid-template-rows: 23px 10% 83%;
    grid-template-columns: 90px 45% 1fr;
    grid-template-areas: "h2 none figure"
                         "aboutus aboutus figure"
                         "aboutus aboutus figure";
}

h2{
    grid-area: h2;
    font-size: 10px;
    text-align: center;
    padding: 6%;
    border-radius: 50px;
    color: #535353;
    font-weight: bold;
    border: 1px solid #535353;
}

#aboutus{
    grid-area: aboutus;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
}
figure{
    grid-area: figure;
    padding-left: 10%;
}
.article{
    grid-area: article;
    font-size: 1.5rem;
    font-weight: normal;
}

p{
    grid-area: paragraph;
    font-size: 0.8rem;
    color: #535353;
}
figure img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
}

#expertise{
    height: auto;
    width: 98%;
    margin: 5px 1%;
    padding: 30px 25px;
    display: grid;
    grid-template-rows: 23px 1fr 5fr;
    grid-template-columns: 90px 35% 55%;
    grid-template-areas: "h2 none none"
                         "article article paragraph"
                         "staff staff staff";
    grid-gap: 10px 0px;
}

#staff{
    grid-area: staff;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    padding: 0%;
    gap: 15px;
}

.card{
    height: 20rem;
    width: 200px;
    position: relative;
    flex-shrink: 0;
    border-radius: 15px;
    overflow: hidden;
}

.card h3{
    font-size: 14px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.94);
}
.card h4{
    font-size: 11px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.781);
}

.card p{
    color: rgba(255, 255, 255, 0.715);
}
.card #image{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
}
.card img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    z-index: 0;
}
#image #bottom{
    height: 20%;
    width: 100%;
    position: absolute;
    z-index: 1;
    bottom: 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.138), rgba(0, 0, 0, 0.405));
}

.card #transition{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all ease-in-out 0.6s;
    scale: 1%;
    border-radius: 15px;
}
.card i{
    font-size: 20px;
    color: white;
}

.card:hover #transition{
    background-color: rgb(0, 106, 255);
    scale: 100%;
    padding: 10% 10%;
    z-index: 2;
    cursor: pointer;
}

#milestones{
    height: auto;
    width: 98%;
    margin: 5px 1%;
    padding: 30px 25px;
    background-color: #f6f6f6b3;
    border-radius: 15px;
    display: grid;
    grid-template-rows: 23px 15% 83%;
    grid-template-columns: 90px 35% 55%;
    grid-template-areas: "h2 none none"
                         "article article paragraph"
                         "figure figure achievements";
    grid-gap: 30px px;   
}

#figure{
    grid-area: figure;
    border-radius: 15px;
    padding: 5% 0%;
}

#achievements{
    grid-area: achievements;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    padding: 5%;
    gap: 20px;
    height: 100%;
    width: 100%;
}
#figure img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
}

#achievements i{
    font-size: 20px;
    border-radius: 50%;
    padding: 5px;
    color: white;
}

#start{
    display: grid;
    grid-template-rows: 1fr 1fr 2fr 1fr;
    grid-template-columns: 1fr 15fr;
    grid-gap: 10px;
    grid-template-areas: "icon h3"
                         "linediv h4"
                         "linediv paragraph"
                         "linediv anchor";
}
#start h3{
    color:rgb(0, 97, 223);
    font-weight: bold;
}
#start i{
    background-color: rgb(0, 110, 255);
}

#start h4{
    grid-area: h4;
    font-size: 20px;
    color:  black;
    font-weight: normal;
}

.container i{
    grid-area: icon;
    background-color: #959595;
}

.container h3{
    grid-area: h3;
    font-weight: bold;
    font-size: 15px;
    color:  #959595;
}
.container h4{
    grid-area: h4;
    font-size: 20px;
    color:  #959595;
    font-weight: normal;
}
.container h5{
    grid-area: anchor;
}
.container a{
    color: black;
}
.container{
    display: grid;
    grid-template-rows: 1fr 10frr;
    grid-template-columns: 1fr 15fr;
    grid-gap: 10px;
    grid-template-areas: "icon h3"
                         "linediv h4"
}

#ceo{
    height: 40rem;
    width: 98%;
    margin: 5px 1%;
    padding: 30px 25px;
    background-color: #f6f6f6b3;
    border-radius: 15px;
    display: grid;
    grid-template-rows: 20% 60% 20%;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "head image"
                         "paragraph image"
                         "name-designation image";
    grid-gap: 5px;
}
#ceo #mini-header{
    grid-area: head;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 15px;
}
#ceo p{
    align-content: center;
    font-size: 20px;
    color: black;
    padding: 5%;
}
#ceo #image{
    height: 35em;
    width: 100%;
}
#name-designation{
    grid-area: name-designation;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
    padding: 5%;
}
#name-designation h3{
    font-weight: normal;
}
#name-designation h4{
    font-weight: normal;
    color: #959595;
}
#starsrating{
    font-size: 20px;
    color: rgb(12, 0, 240);
}

#connect{
    height: 500px;
    width: 98%;
    margin: 5px 1%;
    padding: 50px 25px;
    display: grid;
    grid-template-rows: 23px 95%;
    grid-template-columns: 90px 1fr 2fr;
    grid-template-areas: "h2 none none"
                         "aside aside map";
    grid-gap: 0;
}
#map{
    grid-area: map;
    height: 100%;
    width: 100%;
    border-radius: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#map iframe{
    width: 100%;
    height: 100%;
    border-radius: 15px;
}
#contact{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 35px;
}

#connect aside{
    grid-area: aside;
}
#contacts h4,h5{
    font-weight: normal;
}
#contact h4{
    font-size: 15px;
    color: #676767;
}

#contact h5{
    font-size: 18px;
}

.social-connect i{
    font-size: 15px;
    padding: 5px;
    border: 1px solid rgba(174, 174, 174, 0.404);
    border-radius: 50%;
}

footer{
    height: 25rem;
    width: 98%;
    margin: 5px 1%;
    border-radius: 10px;
    background-color: #1b1b1bf7;
    padding: 25px;
    display: grid;
    grid-template-rows: 1fr 4fr 1fr;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-areas: "head none none"
                         "aside aside nav-links"
                         "bottom bottom bottom";
    color: white;
    font-weight: normal;
}

footer #head{
    grid-area: head;
    font-size: 10px;
}
footer aside{
    grid-area: aside;
    padding: 2%;
}

aside h6{
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 15px;
}

#subscribe input{
    text-align: left;
    padding: 12px 20px;
    border-radius: 50px;
    border: none;
    margin-right: 5px;
    background-color: #484848;
    color: white;
    
}

#subscribe input::placeholder{
    color: white;
}

footer #nav-links{
    grid-area: nav-links;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

footer #bottom{
    grid-area: bottom;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

footer #bottom p{
    color: white;
}

footer #bottom #language{
    font-size: 13px;
    color: white;
    background-color: transparent;
    border: none;
}
select option{
    color: black;
}

.nav_links{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
}

.nav_links h6{
    font-size: 15px;
    font-weight: normal;
}

.nav_links a{
    color: white;
    font-size: 13px;
    font-weight: normal;
}