*
{
    margin:0;
    padding:0;
}

body 
{
    font-family: "Poppins", sans-serif;
    display:flex;
    flex-direction:column;
    padding:0;
    margin:0;
    

}
:root {
    --bg-color: #090979;
    --txt-color: #FFFFFF;
    --primary-color: #2A7B9B;
    --secondary-color: #F5DD02;
    --asccent-color: #2117E6;
}
h1,h2,h3,h4,h5
{
    font-size:25px;
    color:white;
}
p
{
    font-size:15px;
    color:white;
}

.navbar-nav .nav-item
{
 padding:0 10px;
}
.navbar-nav .nav-item a
{
    text-decoration:none;
    color:white;
    font-size:15px;
    font-weight:600;
}
.Home-section {
    width:calc(100%-260px);
    margin-left:260px;
    background: linear-gradient(180deg,rgba(33, 23, 230, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    display:flex;
   flex-wrap:wrap;
   justify-content:center;
   align-items:stretch;
   margin-top:-20px;
}
.home-container
{
    padding:20px 0;
}
.home-text
{
    text-align:justify;
}
.hero-section 
{
    width: calc(100% - 260px);
    margin-left:260px;
    background: linear-gradient(180deg,rgba(33, 23, 230, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    display:flex;
    justify-content:center;
    padding:60px;
}
.hero-card img
{
    width:100%;
    height:auto;
    object-fit:cover;
}
.about-section {
    width: 100%;
    background: linear-gradient(180deg,rgba(33, 23, 230, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    padding:60px;
    display:flex;
    justify-content:center;
    margin-top:-20px;
}
.about-container
{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px 0;
}
.about-text
{
    width:60%;
}
.vision-mission-section {
    width: 100%;
    background: linear-gradient(180deg,rgba(33, 23, 230, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    padding:60px;
    display:flex;
    justify-content:center;
}
.vision-mission-container
{
    display:flex;
    justify-content:center;
    align-items:center;
}
.visionbox, .missionbox {
    background: #090979;
    height: 350px;
    box-sizing: border-box;
    padding: 20px 20px;
    border-radius: 15px;
    box-shadow: 8px 8px 15px #bebebe;
    transition:0.4s;
    overflow:auto;
}
.missionbox:hover
{
    transform: translateX(20px);
    background-color:orangered;
}
.visionbox:hover
{
    transform: translateX(20px);
    background-color: orangered;
}
.missionbox ul li
{
    padding:10px 0;
    color:var(--txt-color);
    font-size:15px;
    font-weight:500;
}
.service-section {
    width: 100%;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 54%, rgba(0, 212, 255, 1) 100%);
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:-20px;
}
.service-container
{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px;
   
}
.service-text
{
    width:60%;
}
.service-text p
{
    text-align:justify;
    font-weight:400;
}
.ghrsda-service
{
    margin-top:70px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
}
.service-card
{
    text-align:start;

}
.service-card 
{
    font-size:20px;
    font-weight:300;
}
.service-card p
{
    text-align:justify;
}
.training-section {
    width: 100%;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 54%, rgba(0, 212, 255, 1) 100%);
   padding:60px;
   margin-top:-20px;
   display:flex;
   flex-direction:column;
   flex-wrap:wrap;
   justify-content:center;
}
.training-container
{
    width:100%;
    margin-top:60px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px;
}
.training-text
{
    width:60%;
    
}
.training-image-container
{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.training-card img
{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:15px;
}
.training-card .card-text
{
    text-align:justify;
    
}
.training-card {
    background: #94BBE9;
    padding:20px;
    height:500px;
    box-sizing:border-box;
    
}
.project-section 
{
    width: 100%;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 54%, rgba(0, 212, 255, 1) 100%);
    padding:60px;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:-20px;
}
.project-text
{
    margin-top:70px;
    width:50%;
    text-align:justify;
    margin:auto;
}
.project-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 42%, rgba(0, 212, 255, 1) 100%);
    padding:20px;
    color:white;
    
}
.project-item
{
 margin:20px;
 padding:20px;
 text-align:center;
 flex-grow:0;
 flex-shrink:1;
 flex-basis:250px;
}
.project-item span
{
    font-size:15px;
    font-weight:500;
}
.gallery-section 
{
   width: 100%;
   background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 42%, rgba(0, 212, 255, 1) 100%);
   padding:60px;
   display:flex;
   align-items:center;
   margin-top:-20px;
}
.gallery-container
{
    margin-top:70px;
    text-align:center;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.image-card img
{
    width:100%;
    height:auto;
    object-fit:cover;
    border:2px solid white;
   
    
    
}
.image-card
{
    position:relative;
    transition:0.4s;
   
}
.image-card:hover img
{
    transform: translateY(10px);
}
.view
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
font-size:20px;
font-weight:600;
display:none;
}
.image-card:hover .view
{
 display:block;
}

.footer-section {
    width:calc(100%-260px);
    margin-left:260px;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
}
.contact-section 
{
    width: 100%;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    padding:60px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:-20px;
}
.contact-text
{
 margin-top:60px;
}
.main-container
{
    width:800px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px 20px;
    gap:20px;
}
.left-side
{
    width:50%;
    padding:20px;
    background:var(--asccent-color);
    border:2px solid white;
    border-radius:15px;
    text-align:center;
}
.form-control
{
    margin-bottom:15px;
    padding:20px 0;
    text-align:center;
    font-size:20px;
    font-weight:600;

}
.btnsubmit
{
    width:200px;
    font-size:20px;
    font-weight:400;
}
.right-side
{
 width:50%;
 padding:20px;
 background:var(--asccent-color);
 text-align:center;
 border:2px solid white;
 border-radius:15px;
 text-align:center;
}
.right-side p
{
    font-weight:500;
}
.team-section {
    width: 100%;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    padding:60px;
    margin-top:-20px;
    display:flex;
    flex-direction:column;
    
}
.team-container
{
    width:800px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px 50px;
}
.team-image img
{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    margin-top:50px;
}
.left-card, .right-card 
{
    background: #94BBE9;
    border-radius:15px;
    padding: 30px 20px;
    height: 300px;
    box-sizing: border-box;
    text-align: center;
}

@media(max-width:500px) {
    .main-container
    {
        flex-direction:column;
        width:100%;
    }
    .left-side,.right-side
    {
        width:100%;
    }
    .right-side
    {
        display:block;
    }
}
@media(max-width:500px)
{
    .team-container
    {
        width:100%;
        display:flex;
        flex-direction:column;
    }
    .left-card
    {
        width:100%;
        display:block;
    }
    .right-card
    {
        width:100%;
        display:block;
    }
}
.dashboard-section {
    width: 100%;
    height:100vh;
    padding: 20px;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    margin-top:0;
   display:flex;
   flex-wrap:wrap;
   
}
  .dashboard-section .sidebar {
    width: 260px;
    height:calc(100vh - 70px);
    background: linear-gradient(180deg, #090979, #2A7B9B);
    padding:10px;
    flex-shrink:0;
    flex-direction:column;
    position:fixed;
    top:70px;
    left:0;
    z-index:999;
    overflow-y:auto;
    

}
.sidebar h3
{
 text-align:center;
 margin-bottom:20px;
 font-size:20px;
}
.sidebar a
{
    text-decoration:none;
    padding:20px;
    margin:5px 0;
    color:white;
    font-size:15px;
    font-weight:500;
    display:block;
    display:flex;
    align-items:center;
    transition:0.3s;
    border-radius:15px;
    
   
}
    .sidebar a:hover 
    {
        background: rgba(255, 255, 255, 0.1);
    }
 .sidebar i
 {
     margin-right:10px;
 }
 .main
{
    width:calc(100% - 260px);
    margin-left:260px;
    flex-direction:column;
    box-sizing:border-box;
    
}
.top-bar {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius:10px;
    margin-bottom:20px;
}
.top-bar span
{
 color:white;
 font-size:15px;
 font-weight:500;
}
.grid-container 
{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
}
.bg1 {
    background: #2A7B9B;
}
.bg2 {
    background: #28a745;
}
.bg3 {
    background: #dc3545;
}
.bg4 {
    background: #ffc107;
    color:black;
}
.grid-box {
    flex: 1 1 220px;
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    color: white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    position:relative;
    
}
.icon {
    font-size: 40px; /* Larger icon */
    opacity: 0.2;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.recent-activites {
    width: calc(100%-260px);
    margin-left:260px;
    background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); /* Keep background consistent */
    padding: 20px 0;
    margin-top: 20px;
}
    .recent-activites h5 {
        text-align: left; /* Align left looks better for lists */
        border-left: 5px solid #F5DD02;
        padding-left: 15px;
        background: none;
        border-radius: 0;
        color: white;
    }
.card ul li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    justify-content: space-between;
    font-size:20px;
    font-weight: 300;
}
.card {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px;
}
.section-title
{
    margin-top:30px;
}
.button-card {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 15px;
}
.btn {
    width: auto;
    flex: 1 1 150px; /* Grow and shrink */
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
    transition: transform 0.2s;
}
    .btn:hover {
        transform: translateY(-2px);
    }

btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background-color: #2A7B9B;
}

.btn-success {
    background-color: #28a745;
}

.btn-danger {
    background-color: #dc3545;
}