*{
    box-sizing: border-box;
}
.logo img{
    width:100px;
    height:120px;


}
.logo{
    display: flex;
    text-align: center;
    
    background-color: rgb(184, 189, 200);
    color:black;
}
nav{
   
    background-color:#222;
    color:#ccc;
    
}



.pri-nav ul{
    display:flex;
    gap:20px;
    list-style: none;
    margin:0;
    padding:0;
}
.pri-nav{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.pri-nav a{
    text-decoration: none;
    color: #ccc;
}
.pri-nav a:hover, 
.pri-nav a:focus-visible{
    color: green;

}
.logo,.logo:hover,.logo:focus-visible{
    text-align: center;
    color:rgb(23, 7, 39);

}
.slider{
    margin-block-start: 20px;
    overflow: hidden;
}
.slider figure{
    position: relative;
    width:500%;
    margin:0;
    left:0;
    animation:20s slider infinite;
}
.slider figure img{
    display:block;
    max-inline-size:100%;
    float:left;
    width:20%;
    height:2%;
    margin:0;
    padding:0;
    
}
@keyframes slider {
    0%{
        left:0;
    }
    20%{
        left:0;
    }
    25%{
        left:-100%;
    }
    45%{
        left:-100%;
    }
    50%{
        left:-200%;
    }
    70%{
        left:-200%;
    }
    75%{
        left:-300%;
    }
    95%{
        left:-300%;
    }
    100%{
          left:-400%;
    }
}

.about img{
    width:150px;
    height:150px;
    
}
.about {
    display:grid;
    gap:5px;
    grid-template-columns: 1fr 1fr;
    border:2px solid black;
    margin-block-end: 18px;
    background-color: #f2f2f2;
    
}
.mess1{
    margin-block-start: 10px;
    text-align:center;
    font-size: larger;
    color: rgb(255, 0, 85);
    border:1px solid black;
    background-color:#f9f9f9;
}
.mess2{
    margin-block-start: 20px;
    border:1px solid black;
    background-color:#eaf6ff ;

}
.mess2 h2{
    margin-left: 30px;
}
.mess2 ul{
    list-style-position: inside;
    li::marker{
        content: "👉";
    }
    color: blueviolet;
}
.sub-nam{
    display:flex;
    flex-direction: column;
}
footer{
    border:1px solid rgb(0, 0, 0);
    background-color:  #222;
    color:#ccc;
}
.adm1{
    border:3px solid black;
    display:grid;
    gap:5px;
    grid-template-columns: 1fr 1fr;
    margin-block-end: 20px;
    gap:8px;
    background-color:#f2f2f2;;
    

}
.adm1 img{
    width:200px;
    height:200px;
}

.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
  }
  
.hover-effect:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
.ext{
    border:3px solid black;
    display:grid;
    gap:5px;
    grid-template-columns: 1fr 1fr;
    margin-block-end: 20px;
    gap:8px;
    background-color:#f2f2f2;;
    

}
.ext img{
    width:200px;
    height:200px;
}
.fee{
    border:3px solid black;

    text-align: center;
    gap:5px;
    grid-template-columns: 1fr 1fr;
    margin-block-start: 250px;
    gap:8px;
    background-color:red;
    

}
.fee img{
    width:200px;
    height:200px;
}
.fee sub-nam{
    text-align: center;
}