*{
    padding: 0; margin: 0; color: black;
}

html, body{
    font-family: "Roboto", sans-serif;
}

.Top_bar{
    
    width: 100%; margin: 0; padding: 0;
    border: none;
    box-shadow: 1px 1px 15px rgb(185, 185, 185);
}

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

.Logo_ph{
    cursor: pointer;
}

.fas.fa-bars{
    cursor: pointer; font-size: 26px;
}

.container2{
    display: flex; flex-direction: row; 
    align-items: center; justify-content: center; margin-top: 60px;
    gap: 75px;
}

.main_text{
    display: flex; flex-direction: column; gap: 10px;
}

.green{
    width: auto; height: auto; font-weight: 200;
    display: inline-block;
    background-color: #149f39; color: white;
    padding: 5px 10px; border-radius: 4px;
    align-self: flex-start; font-size: 18px;
}   

h1{
    font-size: 72px; font-weight: 250;
}

p{
    font-size: 20px; font-weight: 200;
}

.bt1{
    display: inline-block;
    width: 110px; height: 35px; border: 2px solid black;
    border-radius: 4px; background: #ffc066; cursor: pointer;
}

.bt1:hover{
    opacity: 0.85;
    transform: scale(1.1);
    transition: 0.3s;
}

.bot_container{
    margin-top: 120px;
    display: flex; justify-content: center; align-items: center;
    gap: 6%;
}

.box{
    display: flex; 
    align-items: center; gap: 15px;
    
}

.box:hover{ 
    cursor: pointer;
    box-shadow: 5px 5px 5px rgba(1, 1, 1, 0.05); border: none;
    transform: scale(1.05);
}

.text{
    display: flex; flex-direction: column;
}

.divider {
  border: 1px solid #ccc;
  margin: 20px 0; width: 70%; margin: 100px auto;  
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin: 50px 0;
  align-items: center;
}

.menu .gr2 {
  align-self: center;
}


h2{
    text-align: center;
}

.grid_image {
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.grid_image:hover {
  transform: scale(1.05);
  transition: 0.2s ease-in-out;
}

.grid_images{
  display: grid;
  gap: 10px;
  grid-template-areas:
    "I1 I1 I2 I3"
    "I1 I1 I2 I7"
    "I4 I5 I6 I7";
}

.item1 {
  grid-area: I1;
}
.item2 {
  grid-area: I2;
}
.item3 {
  grid-area: I3;
}
.item4 {
  grid-area: I4;
}
.item5 {
  grid-area: I5;
}
.item6 {
  grid-area: I6;
}
.item7 {
  grid-area: I7;
}

footer{
    background-color: #fff0db;
    height: 180px;
    display: flex; justify-content: center; align-items: center;
    align-items: center;
}

.list h3{
    margin-bottom: 10px; font-size: 18px; font-weight: 200;
}

.list p{
    font-size: 1rem; font-weight: normal;
}

.container_bot{
    width: 100%;  display: flex; 
    justify-content: space-evenly;
    
}

.list ul li{
    margin-bottom: 10px;
}

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

.icons {
  display: flex; cursor: pointer;
  gap: 15px;
  font-size: 30px;
}