.pageheader-home {
        background-image: url("images/hero-bg.jpg");
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
    }

        .pageheader-home::before {
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            opacity: .95;
        }

        .pageheader-home {
            height: fit-content;
        
        }
        
        .top h1 {
            color: white;
        }

        h1, h2, h3, p, a, button, hr{
            text-decoration: none;
            font-family: helvetica;
            position: relative;
            z-index: 2; 
        }


        h1, h2, h3, p {
            color: black; 
        }


    /* Styling the navigation container */
    .nav-menu {
        padding: 10px;
        display: flex;
        margin: auto;
        text-align: center;
    }
    
    .nav-menu ul {
        display: flex;
        margin: auto;
        text-align: center;
    }
    
    .nav-menu ul li {
        gap: 10px;
            color: white;
        padding: 10px;
        list-style: none;
            text-decoration: none;
            text-transform: capitalize;
    }

        .nav-menu ul li a {
            color: white;
            list-style: none;
            font-family: helvetica;
            text-transform: capitalize;
            text-decoration: none;
        }
    
    /* Styling the dropdown button */
    .dropdown-button {
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        font-size: 16px;
            background-color: transparent;;
    }

    /* Dropdown links container - initially hidden */
    .dropdown-content {
        display: none;
        position: absolute;
        border-radius: 5px;
        margin-top: 5px;
        z-index: 1;
        padding: 5px;
            opacity: 1;
            background-color: black;
            transition: opacity 0.5s ease-out;
    }

    /* Style for individual links in the dropdown */
    .dropdown-content a {
        color: black;
        padding: 10px;
        text-decoration: none;
        display: block;
            opacity: 1;
    }

    /* Hover effect on links */
    .dropdown-content a:hover {
        text-decoration: underline;
    }

    .show {
            transition: opacity 2s ease-out;
        display: block;
            opacity: 1;
    }

    /*Dropdown Two*/

    .dropdown-link {
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        font-size: 16px;
            background-color: transparent;;
    }

    .dropdown-cont {
        display: none;
        position: absolute;
        border-radius: 5px;
        margin-top: 5px;
        z-index: 1;
        padding: 5px;
            opacity: 1;
            background-color: black;
            transition: opacity 0.5s ease-out;
    }

    /* Style for individual links in the dropdown */
    .dropdown-cont a {
        color: black;
        padding: 10px;
        text-decoration: none;
        display: block;
        z-index: 1;
            opacity: 1;
    }

    /* Hover effect on links */
    .dropdown-cont a:hover {
        text-decoration: underline;
    }

    
    .sho {
            transition: opacity 2s ease-out;
        display: block;
            opacity: 1;
    }
    
        hr {
            background-color: #333;
            color: lightgray;
            margin-top: 10px;
            margin: auto;
            border: none;
            height: 1px;
            z-index: 1; 
            width: 80%;
        }

    header {
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        background: rgba(0, 0, 0, 0.7);
        text-align: center;
        padding: 20px;
        margin: auto;
    }


    .header__overlay-close {
    position: absolute;
    display: block;
    width: 45px;
    height: 45px;
    top: 21px;
    left: 50%;
    margin-left: -23px;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    }

    .header__overlay-close::before, .header__overlay-close::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 2px;
    height: 20px;
    top: 12px;
    left: 22px;
    background-color: #FFFFFF;
    }

    .header__overlay-close::before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    }

    .header__overlay-close::after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }

    .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    }

    .top h1 {
        text-align: center;
        margin: auto;
        color: white;
    }

    .top .version-one {
    display: inline;
    }

    .top .version-two {
    display: none;
    }
    
    .nav-toggle {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: white;
        display: none; 
        transition: 0.5s;
    }

    @media only screen and (max-width: 992px) {

        #top {
          transition: 0.5s ease-out;
        }

        .pageheader-home {
            height: auto;
        }

        .nav-toggle {
            display: block; 
            transition: 0.5s ease-out;
        }

        hr {
            display: none;
        }

        .header__social {
            display: none;
        }

        .top .version-one {
            display: none;
        }

        .top .version-two {
            display: inline;
            margin-left: 0%;
        }

        .nav-menu {
  			  display: none; 
  			  flex-direction: column;
  			  background-color: transparent;
  			  max-height: 0;
  			  overflow: hidden;
  			  transition: 0.5s ease-out;
  			  padding: 10px 0;
  			  position: static;  
  		}

  		.nav-menu.active {
            display: flex; 
            max-height: 280px;
            transition: 0.5s ease-out;
        }

  		.nav-menu ul {
  			height: fit-content;
  			margin-top: 30px;
  			flex-direction: column;
  			gap: 0; 
  		}

  		.nav-menu ul li a {
  			text-align: center;
  			padding: 15px 0;
  			font-size: 20px;
      	}


        .nav-menu ul li a:last-child {
            border-bottom: none;
        }

        .nav-menu ul li a:hover::after {
            transform: scale(0);
        }

        .dropdown-link {
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
            background-color: transparent;
        }

        .dropdown-cont {
        display: none;
        width: 200px;
        position: static;
        border-radius: 5px;
        margin-top: 5px;
        margin-left: 40%;
        float: left;
        text-align: left;
        z-index: 1;
        padding: 5px;
                opacity: 1;
                background-color: transparent;
                transition: opacity 0.5s ease-out;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
        }

        /* Style for individual links in the dropdown */
        .dropdown-cont a {
        color: black;
        padding: 10px;
        text-decoration: none;
        text-align: left;
        float: left;
        display: block;
        z-index: 1;
                opacity: 1;
        }

        /* Hover effect on links */
        .dropdown-cont a:hover {
        text-decoration: underline;
        }


        .sho {
                transition: opacity 2s ease-out;
        display: block;
                opacity: 1;
        }
        
            .dropdown-content {
                display: none;
        width: 200px;
        position: static;
        border-radius: 5px;
        margin-top: 5px;
        margin-left: 40%;
        float: left;
        text-align: left;
        z-index: 1;
        padding: 5px;
                opacity: 1;
                background-color: transparent;
                transition: opacity 0.5s ease-out;
                box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
            }

        .dropdown-content a {
            color: black;
            padding: 10px;
            text-decoration: none;
            text-align: left;
            float: left;
            display: block;
            z-index: 1;
            opacity: 1;
        }
            
        .show {
            transition: width 0.5s;
            margin-left: 20%;
            display: block;
            opacity: 1;
        }

        

        .footer {
            display: block;
            text-align: center;
        }

        .ft {
        width: 90%;
        height: auto;
        margin: auto;
        padding: 10px;
        display: block;
        text-align: center;
        }

        .ft .about {
        text-align: center;
        border-bottom: solid 1px black;
        }
        .ft .about .ft-content h3 {
        width: 100%;
        text-align: center;
        }

        .ft .about .ft-content { 
        text-align: center;
        margin: auto;
        }

        .ft .latest {
        border-bottom: solid 1px black;
        }

        .ft .recent-content {
        text-align: center;
        margin: auto;
        }

        .ft .information {
        gap: 10px;
        height: auto;
        padding-bottom: 10px;
        }

        .ft .information nav ul {
        text-align: center;
        margin-left: 10%;
        margin: auto;
        width: 100%;
        }

        .ft .information nav ul li {
        padding: 5px;
        }

        .ft iframe {
        margin-top: 20px;
        } 

        .ft hr {
        display: inline;
        }

        .contain {
        width: 90%;
        margin-top: 5%;
        }

        .addNew {
        width: 90%;
        }

        }