* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  /* font-family: "Lobster", cursive; */
}

:root {
  --main-color: #000d3b;
}


        .containerfull {
            height: 100%;
            display: flex;
        }

        .main-content {
            flex: 1;
            padding: 20px;
        }

        .sidebar {
            position: sticky;
            top: 20px;
            padding: 20px;
            height: calc(100% - 40px);
        }

        .image_size {
            width: 13em;
        }

        @media (max-width: 768px) {

            /* Apply styles only for devices with a maximum width of 768px (tablets and below) */
            .containerfull {
                display: block;
                /* Change the layout to block for smaller devices */
                height: auto;
                /* Reset height */
            }

            .image_size {
                width: 12em;
            }

            .sidebar {
                position: static;
                /* Remove sticky positioning on smaller devices */
                padding: 0;
                /* Reset padding */
                height: auto;
                /* Reset height */
            }

            .main-content {
                padding: 20px;
                /* Maintain padding */
                overflow-y: auto;
                /* Enable scrolling for smaller devices */
            }
        }

        .footer_color {
            background-color: black;
            /*background:url();*/
        }

        .footerheadingcolor {
            color: #ffc107;
        }

        .footerheadingcolor:hover {
            color: #ffc107;


        }



        .btn_color {
            background-color: #001562;
            color: #f1f1f1 !important;
        }

        .btn_color:hover {
            background-color: #222e9c;
            color: #d6d07d;
            transform: scale(1.1);
            /* Adding transform on hover */
            transition: 1.0s;
        }

        .main_card_btn {
            background-color: var(--main-color)!important;
            color: #f1f1f1 !important;
            font-size: 20px;
            font-weight: bold;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            /* Adding transition */
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30), 0 5px 10px rgba(0, 0, 0, 0.25);
        }

        .main_card_btn:hover {
            background-color: #222e9c;
            color: #d6d07d;
            transform: scale(1.05);
            /* Adding transform on hover */
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.40), 0 8px 15px rgba(0, 0, 0, 0.35);
        }

        .recentcard_btn {
            background-color: var(--main-color)!important;
            color: #f1f1f1 !important;
            font-size: 20px;
            font-weight: bold;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            /* Adding transition */
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30), 0 5px 10px rgba(0, 0, 0, 0.25);
        }


        .sidecardcard {
            /* some spacing */
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30),
                0 5px 10px rgba(0, 0, 0, 0.25);
        }

        .sidecardcard:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25),
                0 5px 10px rgba(0, 0, 0, 0.22);
            transition: 0.6s;

        }

        .full_view_card {
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30),
                0 5px 10px rgba(0, 0, 0, 0.25);

        }

        .full_view_card:hover {
            transform: scale(1.1);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25),
                0 5px 10px rgba(0, 0, 0, 0.22);
            transition: 0.6s;

        }

        .hover_effect:hover {
            transform: scale(1.1);
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25),
                0 5px 10px rgba(0, 0, 0, 0.22);
            transition: 0.6s;

        }



        .font_family {
            font-family: sans-serif !important;
        }

        .highlight {
            color: #ffc107;
            font-weight: bold;

        }

        .recentview {
            line-height: 18px;
            font-family: 'Open Sans', sans-serif;
            font-size: 15px;
        }

        .card1 {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .hover_effectt ul li a {
            color: #fff;
            transition: color 0.3s ease-in-out;
            /* Add transition for smooth color change */
        }

        .hover_effectt ul li a:hover {
            color: #f1f1f1 !important;
            /* Change color on hover */
            font-weight: bold;
            text-decoration: none;
        }

        /* font size  */
        .font_size h2 {
            margin-top: -10px;
            font-size: 18px;
            text-transform: lowercase;
        }

        .header1 {
            background: #ffc107;
            position: fixed;
            transition: all 0.6s;
            width: 100%;
            z-index: 10;
        }


        ::selection {
            background-color: #ffc107;
            color: black;
        }

        .Social_media div {
            /*background-color: #ffc107;*/
            background-color: #000d3b;
            color: white;
            height: 33px;
            width: 33px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }

        .Social_media .icon1:hover {
            background-color: #3b5998 !important;
        }

        .Social_media .icon2:hover {
            background-color: #00acee !important;
        }

        .Social_media .icon3:hover {
            background: radial-gradient(circle at 30% 107%,
                    #fdf497 0%,
                    #fdf497 5%,
                    #fd5949 45%,
                    #d6249f 60%,
                    #285aeb 90%);
            box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
        }

        .Social_media .icon4:hover {
            background-color: #4285f4 !important;
        }

        .Social_media .icon5:hover {
            background-color: #0a66c2 !important;
        }

        .Social_media a {
            text-decoration: none;
            color: white;
        }

        /* about  */
        .icon11 {
            height: 50px;
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            padding: 35px !important;
        }

        /*index*/

        .category-item {
            text-decoration: none;
            margin-bottom: 5px;
            border-radius: 10px;
            background-color: #001562;
            color: #f1f1f1;
            font-size: 20px;
            font-weight: bold;
            border: none;
            padding: 8px 16px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30), 0 5px 10px rgba(0, 0, 0, 0.25);
            text-align: center;
        }

        .category-item:hover {
            background-color: #f1f1f1;
            /* Optional: add hover effect */
            color: #001562;
        }

        /* Adding a Hover Effect for Cards */
        .hover_effect:hover {
            box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
        }

        /* Ensure the tags adjust width automatically based on content */
        .tag-item-wrapper {
            display: inline-block;
            margin: 5px;
        }

        .tag-item {
            display: inline-block;
            padding: 5px 10px;
            background-color: #f0f0f0;
            border-radius: 3px;
            text-decoration: none;
            color: #333;
            font-weight: normal;
            transition: background-color 0.3s ease;
        }

        .tag-item:hover {
            background-color: #001562;
            /* Hover background color */
            color: #fff;
            /* Hover text color */
        }
    /*end sidebar */






.navbar_color {
  background: var(--main-color);
  font-weight: 500;

}

/* Add a background color and padding to the navbar */
.navbar_color {
  background-color: var(--main-color);
  padding: 10px 0;
}

.nav_btn_color {
  /* background-color: var(--main-color); */
  color: #fff !important;
  margin: 3px;
  font-size: 20px !important;
}
.navbar-nav .nav-link {
  color: #333; /* Update with your desired text color */
  font-weight: 500;
  font-size: 18px; /* Update with your desired font size */
  transition: color 0.3s ease-in-out; /* Add smooth transition for color change */
}

/* Add box-shadow to navbar on hover */
.nav_btn_color:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: var(--main-color) !important;
  background-color: #fff;
  transition: color 0.3s ease-in-out;
  border-radius: 8px;

}


.img_hover:hover {
  transform: scale(1.1);
  transition: 0.9s;
}


/*banner image section*/
#img1 {
  background: url(../img/un2.png) center;
  position: relative;
  height: 60vh;
  width: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.img_div {
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
}

.img_div img {
  transition: transform 0.5s;
  /* Adding transition */
}

.img_div img:hover {
  transform: scale(1.1);
  /* Increasing scale on hover */
}