* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 ::selection {
     background-color: green;
     color: white;
 }


 body {
     background: linear-gradient(135deg, #243949, #517fa4);
     min-height: 100vh;
     color: white;
     overflow-x: hidden;
     font-family: Arial, Helvetica, sans-serif;

     display: grid;
     grid-template-rows: 70px auto 90px;
 }

 header {
     grid-row: 1 / span 1;
     grid-column: 1/-1;
     background-color: #eee;
     color: black;


     /* padding: 10px; */



     display: grid;
     grid-template-columns: 200px 1fr 250px;
     align-items: center;

     gap: 100px;
     padding: 10px;

     position: relative;
     box-shadow: 0 0px 10px 1px gray;
 }

 header::after {
     content: "";
     width: 100%;
     background-color: black;
     background-image: linear-gradient(90deg, rgb(22, 163, 149), rgb(20, 66, 166));
     height: 2px;
     position: absolute;
     bottom: 0px;
 }

 main {
     grid-row: 2 /3;
     grid-column: 1/ -1;
     background-color: #eeeeee;

     transition: 5s background-image;
     background-image: linear-gradient(135deg, rgb(15, 124, 23), rgb(13, 103, 112));

 }



 footer {
     grid-row: 3 / span 1;
     grid-column: 1 / -1;
     background-color: rgba(0, 0, 0, 0.467);

     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;

     padding: 20px;
     overflow: hidden;
 }

 .hr-line {
     height: 1px;
     width: 100%;
     background-color: rgb(34, 30, 8);
     margin: 10px auto;
 }

 h2 {
     display: flex;
     justify-content: center;
     align-items: center;
     /* background-color: #517fa4; */

     grid-column: 1/2;

     /* border: 2px yellow solid; */
     padding: 5px 10px;
     /* border: none; */
     font-size: 30px;

 }

 h2 img {
     width: 30px;
     margin-right: 5px;

 }

 ul.one {
     border: 2px solid;

     display: flex;
     justify-content: space-evenly;

     grid-column: 2/3;

     padding: 10px;

 }

 header ul.two {
     border: 2px solid;

     display: flex;
     justify-content: space-evenly;
     grid-column: 3/4;

     border: none;

 }

 header ul.two a {
     display: inline-block;
     background-color: #090909;
     color: rgb(255, 250, 250);
     border-radius: 10px;
     width: 110px;
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;

 }


 header ul.two li.one a {

     background-color: transparent;
     color: black;
 }

 /* ======================================================================= */
header ul.two li{
    border-radius: 10px;
}
.tol > a{
    border:1px solid gray;
}
.tol > a{
    transition: all 0.3s;
}
.tol:hover{
    box-shadow: 0 3px 15px 1px gray;

}
.tol:hover> a{
    border: 1px solid gray !important;
    
}
.two.tol a{
    background-color: rgb(0, 0, 0);
}
.one.tol:hover >a{
    background-color: rgb(0, 0, 128);
    color: white;
}
.two.tol:hover >a{
    background-color: #517fa4;
}


 /* ======================================================================= */
 ul {
     list-style: none;
 }

 li {
     display: inline-block;

 }

 a {
     text-decoration: none;

 }

 .contact-us img {
     width: 20px;
 }

 .contact-us a {
     all: unset;
     background-color: #eee;
     color: black;
     width: 90px;


 }