*{
    box-sizing: border-box;
}

body {
    margin:0px;
    font-size: 16px;
    background-color:rgb(23, 154, 214);
}

@font-face {
    font-family: myfont;
    src: url(myfont.ttf);
}

@font-face {
    font-family: myfont2;
    src: url(myfont2.ttf);
}

.menu{
    /* background-color:rgb(37, 87, 110); */
    background-image: url(./image/ao.jpg);
    font-size: 1em;
    padding:30px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.menu a{
    color:white;
    padding:15px;
    border:2px solid rgb(68, 64, 64);
    border-radius: 25px;
    margin:5px;
    text-decoration: none;
}

.menu2{
    background-color:rgb(37, 87, 110);
    font-size: 0.8em;
    padding:10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-align: center;
    color:white;
    font-family: myfont2;
}

.ins:hover , .whatsapp:hover , .tel:hover , .about:hover {
    background-color: rgb(39, 43, 43);
    box-shadow:5px 5px 15px rgb(169, 175, 165);
    background-color: rgb(169, 175, 165);
    color:black;
    transition: box-shadow 0.6;
    transition: background-color 0.6s;
    
}

.welcome {
    display: grid;
    color:white;
    text-align: center;
    align-items: center;
    font-family: myfont2;
}


.i1 {
    border:2px solid rgb(255, 255, 255);
    display: grid;
    width: 40%;
    height: 40%;
    background-color: rgba(53, 58, 58, 0.63);
    border-radius: 30px;
    padding: 5px;
    margin-left: 5px;
    flex:1;
}

.img1 {
    border-radius: 50px;
    padding: 2px;
    width: 100%;
    height: 100%;

}

.t1{
    text-align: center;
    color:white;
}

.p1 {
    text-align: center;
    margin-top: 0;
    color:white;
}

.show {
    border: 2px solid rgb(95, 92, 92);
    text-decoration: none;
    background-color: rgb(39, 38, 38);
    color:white;
    padding: 13px;
    text-align: center;
    border-radius: 30px;
}

.show:hover{
    background-color: rgb(39, 43, 43);
    box-shadow:5px 5px 15px rgb(169, 175, 165);
    background-color: rgb(169, 175, 165);
    color:black;
    transition: box-shadow 0.6;
    transition: background-color 0.6s;
}

.i1:hover{
    background-color:rgb(61, 66, 58);
}

.yad {
    display: flex;
    padding: 7px;
    font-family: myfont;
    
}

.i2 {
    border:2px solid rgb(255, 255, 255);
    display: grid;
    width: 40%;
    height: 40%;
    background-color: rgba(53, 58, 58, 0.63);
    border-radius: 30px;
    padding: 5px;
    margin-left: 5px;
    flex:1;
}

.img2 {
    border-radius: 50px;
    padding: 2px;
    width: 100%;
    height: 100%;
}

.t2{

    text-align: center;
    color:white;
}

.p2 {
    text-align: center;
    margin-top: 0;
    color:white;
}

.show2 {
    border: 2px solid rgb(95, 92, 92);
    text-decoration: none;
    background-color: rgb(39, 38, 38);
    color:white;
    padding: 13px;
    text-align: center;
    border-radius: 30px;
}

.show2:hover{
    background-color: rgb(39, 43, 43);
    box-shadow:5px 5px 15px rgb(169, 175, 165);
    background-color: rgb(169, 175, 165);
    color:black;
    transition: box-shadow 0.6;
    transition: background-color 0.6s;
}

.i2:hover{
    background-color:rgb(61, 66, 58);
}

.office {
    text-align: right;
    font-family: myfont;
    font-size: 1.5em;
    background-color: rgb(154, 218, 255);
    padding: 15px;
}

.office2 {
    text-align: right;
    font-family: myfont;
    font-size: 1.5em;
    background-color: rgb(127, 178, 219);
    padding: 15px;
}

.office3 {
    text-align: right;
    font-family: myfont;
    font-size: 1.5em;
    background-color: rgb(81, 122, 156);
    padding: 15px;
}

.office4 {
    text-align: right;
    font-family: myfont;
    font-size: 1.5em;
    background-color: rgb(81, 122, 156);
    padding: 15px;
}

.show3 {
    border: 2px solid rgb(95, 92, 92);
    text-decoration: none;
    /* background-color: rgb(39, 38, 38); */
    background-image: url(./image/ao.jpg);
    color:white;
    padding: 13px;
    text-align: center;
    border-radius: 30px;
    display: grid;
}

.show3:hover{
    background-color: rgb(39, 43, 43);
    box-shadow:5px 5px 15px rgb(169, 175, 165);
    background-color: rgb(169, 175, 165);
    color:rgb(255, 255, 255);
    transition: box-shadow 0.6;
    transition: background-color 0.6s;
}


.of-1 {
    background-image: url(./image/ao.jpg);
    border-radius: 15px;
    padding: 6px;
    text-align: center;
    color:white;
    text-decoration: none;
}

.of-1:hover {
    padding: 10px;
}

.dastrasi {
    text-align: center;
    font-family: myfont2;
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    
}

.dastrasi>a {
    border: 2px solid black;
    /* text-align: center; */
    text-decoration: none;
    color:rgb(255, 255, 255);
    border-radius: 5px;
    margin:9px;
    padding:5px;
      box-sizing: border-box;
    
}

.dastrasi2 {
    color:white;
    text-align: center;
    font-family: myfont2;
}
@media screen and (max-width:900px) {
    .menu{
    width: 100%;
    }

    .i1 {
    border:2px solid rgb(255, 255, 255);
    display: grid;
    width: 100%;
    height: 50%;
    margin-left: 0px;
    }

    .i1:hover{
    background-color: rgba(36, 29, 29, 0.658);
    }
}

@media screen and (max-width:600px) {
    .menu {
        width: 100%;
        margin: 0;
        padding: 5px;
        display: grid;
        grid-template-columns: 2fr 2fr;
    }

    .menu a {
        display: grid;
        padding: 10px;
    }

    .menu2 {
        padding: 1px;
    }

    .welcome {
        grid-row: 3/3;
        grid-column: 1/3;
        padding:2px
    }

    .i1 {
    border:2px solid rgb(255, 255, 255);
    display: grid;
    width: 100%;
    height: 50%;
    margin-left: 0px;
    }

.i1:hover{
    background-color: rgba(36, 29, 29, 0.658);
    }

    .i2 {
    border:2px solid rgb(255, 255, 255);
    display: grid;
    width: 100%;
    height: 50%;
    margin-left: 0px;
    }

    .i2:hover{
    background-color: rgba(36, 29, 29, 0.658);
    }

    .yad {
        flex-direction: column;
    }
    .office {
        font-size: 1em;
    }
    .office2 {
        font-size: 1em;
    }
    .office3 {
        font-size: 1em;
    }
    .office4 {
        font-size: 1em;
    }
}