/* home page  */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




:root{
    --one:#153274 ;
    --two:#123e96;
    --three:#0e45bf;
    --four:#0955ec;
    --five:#106dff;	
	--six:#278dff;
	--seven:#4fb0ff;
	--eight:#88cdff;
	--nine:#b8dfff;
	--ten:#d7ecff;
	--eleven:#edf7ff;
	--orange:#FF5306;
}



p, h6{
	margin: 0;
	
}

h3,h5, label{
	color: var(--one);
}

small{
	color: var(--three);
}



.appCapsule{
	max-width: 676px ;
	margin: auto;
}

 .bg-header{
	backdrop-filter: blur(100px);
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;

    height: 12vh;
    padding: 16px;
	display: flex;
	justify-content: space-between;

 }


 .bg-header .search .bi-search{
position: absolute;
top: 22px;
left: 20px;
color: white;
font-size: 20px;
   
 }


 .search-field {
	width: 150px;
	background-color: transparent;
	border: 1px solid #eee;
	border-radius: 20px;
	border: none;
	background-image: url(icons/search.png);
	background-size: 22px ;
	background-position-y: 2px;
	background-position-x: 4px;
	background-repeat: no-repeat;
	padding:  0 30px;
	transition: .5s;
	
}


.search-field:focus {
	width: 200px;
	border: 1px solid #eeeeee6e;
	border-radius: 20px;
	outline: none;
	border-bottom: 1px solid white;
}


.search-field::placeholder{
    color: white;
	font-size: 13px;
 }

 .bg-header .right i{
	color: white;
	margin: 0 8px;
	font-size: 20px;
 }

 .overflow-header{
	width: 93%;
	height: 100px;
	overflow: hidden;
	padding: 16px;
	background-color: rgba(255, 255, 255, 0.904);
	backdrop-filter: blur(10px);
	box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.219), 5px 5px 20px rgba(114, 114, 114, 0.212);
	
    border: 1px solid rgba(224, 224, 224, 0.404);
	border-radius: 20px;
	position: relative;
	top: -30px;
	margin: auto;
	transition: .5s;
 }


 .overflow-header:hover{
	height: 150px;
 }

 .overflow-header .menuBox{
	display: flex;
	justify-content: space-around;
 }

 .overflow-header img{
	width: 30px;

 }

 .overflow-header .menuBox .inner{
	text-align: center;
 }

 .overflow-header p{
	font-size: 14px;
	margin-top: 8px;
 }

 .service-menu{
	/* background-color: red; */
	display: flex; 
	justify-content: space-around;
	gap: 20px;
	text-align: center;
 }

 .service-menu img{
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
 }

 .service-menu .inner{
	background-color: white;
	box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.219), 5px 5px 20px rgba(114, 114, 114, 0.212);
    border: 1px solid rgba(224, 224, 224, 0.404);
	width: 100%;
	max-width: 200px;
	padding: 16px;
	border-radius: 20px;
	display: flex; 
	justify-content: center;
	align-items: center;
	border: 2px solid transparent;
 }

 .service-menu .inner:active{
	background:linear-gradient(to left, #b2f2ff2d , #f2bbfe31);
	border: 2px solid white;
 }



 .service-menu p{
	font-size: 14px;
	color: #666;
 }

 a{
	text-decoration: none;
	color: #666;
 }

 .sliderBox button{
	display: none;
 }

 .sliderBox img{
	height: 150px;
	object-fit: cover;
	border-radius: 20px;
	padding: 10px;
	background-color: white;
 }

 .sliderBox{
	margin-top: 16px;
 }

 .active{
	color: var(--three);
 }

 /* ==================  */
 /* transfer page ==== */
 /* header section  */
 .appHeader{
	padding: 16px;
	background: white;
	border-bottom: 1px solid var(--body-color);
}


.appHeader i{
	font-size:22px ;
}

.back-btn{
	color: var(--one);
}

.header-title{
	padding-top: 5px;
	color: var(--one);
}

.appContent{
	background-color: white;
  }

  .contact-section .method{
	border-bottom: 1px solid var(--body-color);
	padding: 20px 16px;
  }

  .appContent .method:hover{
	background-color: #fcfcfc;
  }

.appContent .method i{
 font-size: 22px;
 color: var(--two);
 
 
}

.method h6{
	font-size: 17px;
}

.method p{
	font-size: 14px;
}



.appContent .left{
	width: 35px;
	height: 35px;
	overflow: hidden;
	text-align: center;
	border-radius: 50%;
	background-color: var(--body-color);
}

/* =========================================================== */
/* form section  */
button{
	background: linear-gradient(to right, var(--one), var(--two));
    padding: 5px 10px;
    color: white !important;
    border-radius: 8px;
	border: 1px solid var(--one);
	transition: .5s;
}

button:hover{
	background: linear-gradient(to right, var(--four), var(--two) );
	border: 1px solid var(--one) !important;
	transform: scale(1.01);
	transition: .5s;
}

  select{
    padding: .8rem 1rem !important;
  }

/* =========================================================== */
/* website page  */

 span{
    color: var(--two);
	/* background:#e4fff8 !important; */
	
  }

  .weblist h5{
	background:linear-gradient(to left, #f2bbfe31 , #b2f2ff2d);
	border-radius: 30px;
	border: #B846E6 1px solid;
	padding:10px 30px ;
	margin-top: 1rem;
	transition: .5s;
  }

  .weblist h5:hover{
	transform: scale(1.03);
	font-size: 23px;
  }