@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


.gradient-custom {
 
  background: linear-gradient(to right, rgba(106,133,182,0.5), rgba(186,200,224,0.5))
}
.special-card {
/* create a custom class so you 
 do not run into specificity issues 
 against bootstraps styles
 which tends to work better than using !important 
 (future you will thank you later)*/

background-color: rgba(245, 245, 245, 1);
opacity: .4;
}



.special-card {
/* create a custom class so you 
 do not run into specificity issues 
 against bootstraps styles
 which tends to work better than using !important 
 (future you will thank you later)*/

background-color: rgba(245, 245, 245, 1);
opacity: .4;
}
.foot{
  background-image: url("Capture.JPG");
  height:620px;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}



.fadedown0 {
animation: fade-down 1s 0.1s backwards;
}
.fadedown_header {
animation: fade-down 2.0s 1.3s backwards;
}


.fadedown {
animation: fade-down 2s 0.4s backwards;
}


.fadedown2 {
animation: fade-down 1.0s 0.25s backwards;
}
.fadedown3 {
animation: fade-down 1.0s 0.5s backwards;
}
.fadedown4 {
animation: fade-down 1.0s 0.75s backwards;
}
.fadedown5 {
animation: fade-down 1.0s 1.0s backwards;
}
.fadedown6 {
animation: fade-down 1.0s 1.25s backwards;
}
.fadedown7 {
animation: fade-down 1.0s 1.5s backwards;
}

.fadeleft2 {
animation: fade-left 1.0s 0.25s backwards;
}
.fadeleft3 {
animation: fade-left 1.0s 0.5s backwards;
}
.fadeleft4 {
animation: fade-left 1.0s 0.75s backwards;
}
.fadeleft5 {
animation: fade-left 1.0s 1.0s backwards;
}
.fadeleft6 {
animation: fade-left 1.0s 1.25s backwards;
}
.fadeleft7 {
animation: fade-left 1.0s 1.5s backwards;
}


#list li {
float: left;
width: 100px;
height: 100px;
margin: 0 5px;
background: #ccc;
text-align: center;
line-height: 100px;
opacity: 0;
animation: fadeIn 1s ease-in both;
}





@keyframes fade-down {
0% {
  opacity: 0;
  transform: translateY(-30px) scale(0.9)
}
100% {
  opacity: 1;
      transform: translateY(0px) scale(1)
}
}

.fadeleft {
animation: fade-left 3.5s 1s backwards;
}



.hover{

transition: all 0.5s ease;
margin-bottom: 10px;
}
.hover:hover{
color: #BEBEBE;
padding-left: 10px;
}


.box{
  transition: all 1s ease;
  margin-bottom: 10px;
}
.box:hover{
  transform:scale(1.05)
}

@keyframes fade-left {
0% {
  opacity: 0;
  transform: translatex(30px) scale(0.9)
}
100% {
  opacity: 1;
      transform: translatey(12px) scale(1)
}
}




@keyframes transitionIn {
  from {
      opacity: 0;
      transform: rotateX(-10deg);

  }

  to {
      opacity: 1;
      transform: rotateX(0);
  }
}


.simple-linear {
background: linear-gradient(blue, pink);
}


.banner{
  position:relative}

.banner img{
  width:100%}

.banner .container{
  position: absolute;
  left:0; right:0;
  top:50%;
  text-align:left; 
  transform:translateY(-50%)

}
.home_slider_subtitle{
  color: white;
  max-width:200px;
  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 30px;
  font-weight: 500;
}



.navbar1{
  background-image: linear-gradient(to right, #CBFFC4 , 40D22C   );

}
#nav1
{  
  background-color:#CBFFC4 , 40D22C; 
  opacity: 0.5; 
   
}



.special-card {
/* create a custom class so you 
 do not run into specificity issues 
 against bootstraps styles
 which tends to work better than using !important 
 (future you will thank you later)*/

background-color: rgba(245, 245, 245, 1);
opacity: .4;
}


.map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}






.footer{
  background-color: red;
  
}
.footer-col h5{

  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 30px;
  font-weight: 500;
  position: relative;
  margin-bottom: 50px;
  margin-top: 10px;

}
.footer-col h5::before{

  content: '';
  position: absolute;
  left:0;
  bottom: -10px;
  background-color: #7FEEEC;
  height: 2px;
  box-sizing: border-box;
  width: 50px;

}


.footer-col ul li{
  margin-bottom: 10px;

}


.footer-col ul li a{
font-size: 16px;
text-transform: capitalize;
color: #6A6A6A ;
text-decoration: none;
font-weight: 300;
color: #6A6A6A;
display: block;
transition: all 0.5s ease;
  margin-bottom: 10px;
}
.footer-col p{
  margin-bottom: 10px;

}
.footer-col p{
font-size: 16px;
text-transform: capitalize;
color: #6A6A6A ;
text-decoration: none;
font-weight: 300;
color: #6A6A6A;
display: block;
transition: all 0.5s ease;
  margin-bottom: 10px;
  letter-spacing: 5px;
  line-height: 1.6;
}

.footer-col ul li a:hover{
color: #EEEEEE;
padding-left: 8px;
}

.hover{

transition: all 0.5s ease;
  margin-bottom: 10px;
}
.hover:hover{
color: #BEBEBE;
padding-left: 10px;
}
.nav1{
background-color: #C1C1C1;
padding-left: 8px;
 
}

.goo{
  filter: drop-shadow( -3px 3px 20px);
}
.sub-menu02{
  position:absolute
}
.dropdown .dropdown-menu{
  display: none;
}
.dropdown:hover > .dropdown-menu, .dropend:hover > .dropdown-menu{
  display:block;
  margin-top: .125px;
  margin-left: .125em;
}



.goo{
  filter: drop-shadow( -3px 3px 20px);
}

.goo{
  filter: drop-shadow( -3px 3px 20px);
}
.goo2{
  box-shadow:  0px 3px 10px #398f24;
}


.btn2{

  background: #50A7FF;
  box-shadow: 0 0 5px #50A7FF;
  
}

.btn-primary2{

}

.btn-primary2:hover{

  box-shadow: 0 0 5px #50A7FF;
  box-shadow: 0 0 7px #50A7FF;
  box-shadow: 0 0 10px #50A7FF;
  box-shadow: 0 0 25px #50A7FF;
}


.fas{
  font-size:48px;color:black

}







.content{
  position: relative;
  width: 1150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content .image{
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.content .image img{
  z-index: 111;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.card2{
  z-index: 222;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  padding: 40px;
  max-width: 400px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transform: translate(-0px, 50px);
}