body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('Logo/backround.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: rgb(0, 0, 0);
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.shadow
{
	position: relative;
	box-shadow: 0 1px 30px rgba(14, 25, 238, 0.653), 0 0 80px rgba(63, 49, 254, 0.387) inset;
}

.shadow:before,
.shadow:after
{

content: '';
position: absolute;
z-index: -1;
box-shadow: 0 0 20px rgba(43, 43, 203, 0.38);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
border-radius: 200px/100px;
}

/*Heading*/

 h1{
    margin-bottom: 20px;
    margin-top:20px;
    text-align: center;
    justify-content: center;
    padding-top:20px ;
    font-size: 30px;
}

.colored-underline{
  border-bottom: 3px solid blue;
  display: inline;
  border-radius: 3px;
  padding-bottom: 8px;
}

/*Gallery*/
.container
{
	width: 100%;
	height: 100%;
}
.trans
{
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
.top
{
	display: flex;
	width: 80vw;
	height: 80vh;
/*	margin-top: 10vh;*/
	margin-left: 18%;
/*	margin-right: auto;*/
	margin-bottom: 10vh;
}
.top ul
{
	list-style: none;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-sizing: border-box;
	padding-left:0px;

}
.top ul li
{
	position: relative;
	float: left;
	width: 25%;
	height: 25%;
	overflow: hidden;
	padding:10px;
	display:grid;
}

.top ul li::before
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-color: #000;*/
	content: '';
	color: white;
	/*opacity: 0.4;*/
	text-align: center;
	box-sizing: border-box;
	pointer-events: none;
	transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.top ul li:hover::before
{
	opacity: 0;
	background-color: rgba(0,0,0,0.90);
}
.top ul li img
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.lightbox
{
	position: fixed;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.75);
	z-index: 999;
	opacity: 0;
	pointer-events: none;
}
.lightbox img
{
	max-width: 90%;
	max-height: 80%;
	position: relative;
	top: -100%;
	/* Transition */
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	-webkit-transition: all 1s ease;
}
.lightbox:target
{
	outline: none;
	top: 0;
	opacity: 1;
	pointer-events: auto;
	transition: all 1.2s ease;
	-moz-transition: all 1.2s ease;
	-ms-transition: all 1.2s ease;
	-o-transition: all 1.2s ease;
	-webkit-transition: all 1.2s ease;
}
.lightbox:target img
{
	top: 0;
	top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

@media (max-width: 768px) {
    .top ul{
        display:flex;
        flex-direction:column;
    }

    .top ul li {
	position: relative;
	float: left;
	width: 94%;
	/*height: 25%;*/
	overflow: hidden;
	padding:10px;
	/*display:block;*/
}

    .top {
        display: flex;
        width: 100%;
        height: auto;
        /* margin-top: 10vh; */
         margin-left: auto;
        /* margin-right: auto; */
        margin-bottom: 10vh;
        }
}



/*Header*/
.navbar {
    background-color: #ffffff;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: center;
  }

  .logo img {
      width: 59px;
      height: auto;
  }

  .menu {
    list-style: none;
    display: flex;
    align-items: center;
    padding-top:8px;
  }

  .menu li {
    padding: 0px 20px;
    font-size:large;
  }

  .menu a {
    color: #2d2d2d;
    text-decoration: none;
    font-size: 20px;
  }

  .menu a:hover {
    color: #1F51FF;
     border-bottom: 3px solid #1F51FF;
     padding-bottom: 6px;
     border-radius: 3px;
  }

  .menu-icon {
    font-size: 24px;
    display: none;
  }
    #checkbtn{
        color:#1F51FF;
        display:none;
        font-size:35px;
    }
    #check{
        display:none;
    }
    #check:checked ~ ul{
        display:block;
        transition:.5s;
    }

    /*Submenu*/

    .submenu {
      display: none; /* Hide the submenu by default */
      list-style: none;
      margin: 0;
      padding: 20px;
      position: absolute;
      background-color: #ffffff;
      box-shadow: 0px 8px 16px 0px rgba(63, 49, 254, 0.387);
      margin-top:8px;
    }

    .dropdown:hover .submenu {
      display: block; /* Show the submenu on hover */
    }

    .submenu li {
      padding: 8px 20px;
    }

    .submenu a {
      color: #2d2d2d;
      text-decoration: none;
    }

    .submenu a:hover {
      color: #1F51FF;
    }

/* Media query for responsive menu */
@media (max-width: 768px) {

  #checkbtn{
    display:block;
    /*float:right;*/
    position: absolute;
    top: 50%;
    right: 20px; /* Adjust this value to control the horizontal positioning */
    transform: translateY(-50%);
    /*order:2;*/
  }

  .menu {
    flex-direction: column;
    display: none;
    width:100%;
    top:80px;
    position:fixed;
    background-color:#ffffff;
    padding-right:75px;
	z-index: 2;
  }

  .menu li {
    width: 100%;
   /* height:100vh;
    top:80px;*/
    text-align: center;
    color:black;
    right:20px;
    line-height:50px;
  }

  .menu-icon {
    display: block;
    cursor: pointer;
  }
  #menu-toggle {
    display: none;
  }
  /*Bank name main text*/
  .flex-container{
    display:flex;
    flex-direction:column;
  }
    /*Services Container*/
    .container{
        display:flex;
        flex-direction:column;
    }
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: rgb(0, 0, 0);
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.shadow
{
	position: relative;
	box-shadow: 0 1px 30px rgba(14, 25, 238, 0.653), 0 0 80px rgba(63, 49, 254, 0.387) inset;
}

.shadow:before,
.shadow:after
{

content: '';
position: absolute;
z-index: -1;
box-shadow: 0 0 20px rgba(43, 43, 203, 0.38);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
border-radius: 200px/100px;
}










/* footer start from hear */
/* Styling for the top box */
.top-box {
	position: relative;
	width: fit-content;
	margin: 0 auto;
	background-color: #ffffff;
	padding: 20px;
	text-align: center; /* Align all content in the top box to the center */
  
  }
  
  
  /* Styling for the icons */
  .icon {
	display: inline-block;
	padding-left: 80px;
	width: 50px;
	height: 50px;
	margin-right: 10px;
  
  }
  .fas{
	font-size: -webkit-xxx-large;
	color: #011daa;
  
  }
  /* Styling for the information text */
  .info {
	display: inline-block;
	padding-left: 10px;
	
  }
  
  /* Styling for the bottom box */
  .bottom-box {
	background-color: #011daa;
	padding: 20px;
	margin-top: -20px; /* This value should be equal to the top box's padding to overlap */
  }
  
  .bottom-box h2{
	color: #ffffff;
	text-align: center;
	font-size:30px;
	padding-top: 20px;
  }
  
  
  ul {
	list-style: none;
	display: flex;
	justify-content: space-evenly;
	color: #ffffff;
	margin: 0 10px;
	padding-top:20px;
	padding-bottom:20px;
  }
  
 .bottom-box ul li::before {
	content: "-";/*give any type of symbol for Bullets */
	color: red;
	font-weight: bold;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
  }
  .paragraph-container a {
	color: #ffffff;
	text-decoration: none;
	font-size: 20px;
  }
  
  .paragraph-container a:hover {
	color: #1F51FF;
  
	 padding-bottom: 6px;
  }
  
  .container{
  
	   display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
  
  }
  
  .container ul{
	  display:block;
	  float:left;
  }
  .container li{
	  padding-top:10px;
  }
  
  .container a{
	  text-decoration:none;
	  font-size:17px;
  }
  
  @media (max-width: 768px){
	  .top-box{
		  text-align:inherit;
		  display:flex;
  
	  }
  
   /*   .info{
		  display:block;
	  }*/
  
	  ul{
		  display:grid;
		  justify-content: space-around;
	  }
  
	  li{
		  padding-bottom:20px;
	  }
  }