body {
    direction: rtl;

        margin: 3px;

            font-family: Arial, sans-serif;

                background-color: #141e30;
}




.sidebar {
    position: fixed;

        top: 0px;        

            right: 0px;

                width: 200px;

                    height: 100%;

                        background-color: #222;

                            padding-top: 90px;
                                
                                
}

h1 {
    color: #fff;
}

hr {
    background: #00c9a7;
    
        padding: 1px;
    
            width: 120px;
    
                direction: rtl;
    
                    margin-top: 5px; /* قلل المسافة من فوق */
  
                      margin-bottom: 15px; /* خله طبيعي من تحت */
  
                        border: none;
  
                          border-top: 2px solid #ccc; /* شكل الخط */  
}



.menu-btn {
  position: fixed;

        top: 20px;

            right: 20px;

                z-index: 999px;

                    background-color: #00c9a7;

                        color: white;

                            border:none;

                                padding: 10px 15px;

                                    border-radius: 10px 15px;

                                        cursor: pointer;

                                            font-size: 20px;
}


.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  right: 0; 
  background-color: #111;
  overflow-x: hidden;
  transition: 0.3s;
  padding-top: 60px;
  z-index: 999;
}


.close-btn {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 29px;
  color: white;
}


.sidebar ul {
    list-style:none;
        font-size: 20px;
            line-height: 30px;
            background:#243b55;
            border-radius: 40px;
            text-align: center;
            
        padding: 30px;
                margin-bottom: 20px;
            margin: 5px px;

            padding-top: 30px;
            padding-bottom: 30px;
}

.sidebar ul li a {
    display: block;
            
        padding: 15px 20px;

            color: #fff;

                text-decoration: none;
                transition: color 0.3s ease;

                    
}

.sidebar ul li a:hover, .sidebar ul li a.active {
    color: #00c9a7;

        text-decoration: underline;    
}
a img:hover {
  opacity: 0.8;
  cursor: pointer;
}



.content {
    margin-right: 0px;

        padding: 40px;
}

.certificates-container {
    display: flex;

        /* grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); */

            gap: 30px;
}

.certificate-card {
    background: #2068bb;
        
        border-radius: 40px;

            overflow: hidden;

                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

                    transition: transform 0.3s ease;
                    width: 400px;
}

.certificate-card:hover {
    transform: scale(1.03);
    
}

.certificate-card img {
    width: 100%;
    height: 60%;
    

        display:block;
}

.caption {
    padding: 10px;

        text-align: center;

            font-weight: bold;

                color: #21db84;

}