/* GENERAL */

body{

    margin:0;

    font-family: Arial, Helvetica, sans-serif;

    background-color:#3451f4;

    color:#000000;

}

/* HERO SECTION */

.hero-image{

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Image/HeroImage.jpg");
    height:350px;

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

    display:flex;

    justify-content:center;

    align-items:center;

    border-bottom:4px solid #2c3e50;

}

.hero-image h1{

    color:white;

    font-size:48px;

    text-shadow:2px 2px 8px black;

    letter-spacing:1px;

}

/* MAIN LAYOUT */

.main-layout{

    display:flex;

    flex-direction:column;

    gap:20px;

    width:90%;

    margin:auto;

    padding:20px;

}

/* NAVIGATION SECTIONS */

.navigation-add,

.navigation-view{

    background:#0500a0;

    padding:15px;

    border-radius:12px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    box-shadow:0 2px 10px rgba(213, 227, 52, 0.1);

}

/* NAVIGATION LINKS */

.navigation-add a,

.navigation-view a{

    background:#fffefe;

    color:rgb(0, 0, 0);

    text-decoration:none;

    padding:10px 18px;

    border-radius:8px;

    transition:0.3s;

    font-weight:bold;

}

/* HOVER EFFECT */

.navigation-add a:hover,

.navigation-view a:hover{

    background:#3254ff;

    transform:translateY(-2px);

}

/* CONTENT SECTION */

.content{

    background:rgb(255, 255, 255);

    padding:30px;

    border-radius:12px;

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

    min-height:300px;

}

.content h1{

    margin-top:0;

    color:#2c3e50;

    font-size:20px;

}

/* MOBILE RESPONSIVE */

@media(max-width:768px){

    .hero-image h1{

        font-size:32px;

        text-align:center;

    }

    .navigation-add,

    .navigation-view{

        flex-direction:column;

    }

    .navigation-add a,

    .navigation-view a{

        text-align:center;

    }

}