:root{
    --textColor:#000;
    --backgroundColor:#fff;
    --accentColor: #FEDB37;
    --darkbg:linear-gradient(180deg, rgba(13,31,51,0) 32%, rgba(0,0,0,0.639093137254902) 100%);
}
.bg-golden{
    background:radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%) !important;
}   
.bg-footer{
    background:var(--textColor);
    color:var(--backgroundColor);
}
.text-gold{
    background:radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-highlight-anim{
    position:relative;
    &:before{
        position:absolute;
        top:2%;
        left:0%;
        z-index:-1;
        content:attr(data-text);
        animation: shadow-pulse 1s linear infinite alternate;    
    }
    
}
@keyframes shadow-pulse{
    from{
        text-shadow:0 0 10px var(--accentColor),0 0 10px var(--accentColor),0 0 10px var(--accentColor),0 0 10px var(--accentColor);
    }
    from{
        text-shadow:0 0 20px var(--accentColor),0 0 20px var(--accentColor),0 0 20px var(--accentColor),0 0 20px var(--accentColor);
    }
}
html{
    overflow-x: hidden;
}

body{
background:var(--backgroundColor);
color:var(--textColor);
font-size:14px;
}
.video-bg{
    width:100%;
    height:auto;
    @media (width < 992px){
      width:auto;
    height:100%;  
    }
}
.bg-diff1{
	background: #830000;
}

li{
    margin: 0 8px 0 8px;
}

.vh100 {
    min-height: 100vh;
    height: auto;
    
}

.translate-up{
    translate:0 -10%;
}


.banner-bg{
    background: var(--darkbg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.grid-center {
    display: grid;
    place-items: center;
	
}

.nav-link {
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  
  .nav-link:hover {
    /* color: #960000; Change to your desired text color on hover */
    text-decoration: underline;
  
	
  }

.download_btn {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 40px 15px 40px; 
    background-color: #FBD936; 
    color: rgb(0, 0, 0);
    text-decoration: none;
    border-radius: 30px;
    font-size: 20px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.download_btn:hover {
    background-color: red;
    color: #fff;
}



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

.down-btn {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 30px 10px 30px; 
    background-color: #157AF1; 
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 15px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.down-btn:hover {
    background-color: #FBD936;
    color: #000;
}

/* footer */

.footer-distributed{
	background: #090C10;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;
	
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
	width: 40%;
}

/* The company logo */
.footer-left img{
    width: 250px;
}


/* Footer links */

.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
  font-weight:400;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #222;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
	width: 35%;
}

.footer-distributed .footer-center i{
	/* background-color:  #33383b; */
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
	font-size: 30px;
	line-height: 38px;
}

.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
  font-size: 20px;
	vertical-align: middle;
	margin:0;
}

.footer-distributed .footer-center p span{
	display:block;
	font-size:20px;
	line-height:2;
}

.footer-distributed .footer-center p a{
	color:  rgb(241, 188, 11);
	text-decoration: none;;
}

.footer-distributed .footer-links a:before {
  content: "|";
  font-weight:300;
  font-size: 20px;
  left: 0;
  color: #fff;
  display: inline-block;
  padding-right: 5px;
}

.footer-distributed .footer-links .link-1:before {
  content: none;
}

/* Footer Right */

.footer-distributed .footer-right{
	width: 20%;
}

.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  white;
	font-size: 18px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-company-about span{
	display: block;
	/* color:  #ffffff; */
	font-size:25px;
	font-weight: bold;
	margin-bottom: 10px;
    background: -webkit-linear-gradient(rgb(255, 145, 0), rgb(252, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-distributed .footer-icons{
	margin-top: 30px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

	.footer-distributed{
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;
	}

}



.app-card {  
	margin-top: 106px;
	width: 300px;
	aspect-ratio: 3/4;
	 background:  whitesmoke;/*radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
	radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%); */
	padding: 0.5rem;
	border-radius: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas:
	  "card-image card-image card-image card-image card-image card-image"
	  "card-image card-image card-image card-image card-image card-image"
	  "card-image card-image card-image card-image card-image card-image"
	  "card-image card-image card-image card-image card-image card-image"
	  "card-name card-name card-name card-name card-btn card-btn"
	  "card-desc card-desc card-desc card-desc card-btn card-btn";
	  @media(width < 992px){
	      	width: 100%;
	  }
  }
  
  @scope(.app-card) {
	
.card-image { grid-area: card-image; 
        height:100%;
	& img{
		width: 100%;
		height:100%;
	object:contain;
		@media(width < 992px){
	      		height:auto;
	  }
	}

}
  
  .card-name { grid-area: card-name; 
	display: flex;
	align-items: center;
	& p{
		font-size: 1.5rem;
		text-decoration: bold;
		font-weight: 700;
		color: dark;
		margin-top:1rem;
		margin-bottom:0rem;
			@media(width < 992px){
	      		font-size: 0.5rem;
	  }
	}
	
}
  
  .card-desc { grid-area: card-desc; 
	display: flex;
	align-items: center;
	& p{
		
		font-size: 1.3rem;
		text-decoration: bold;
		font-weight: 700;
		color:  rgb(0,179,0);
			@media(width < 992px){
	      		font-size: 0.5rem;
	  }
	}

}
  
  .card-btn { grid-area: card-btn; 

	display: grid;
	place-items: center;
	
	& a{
		text-align:center;
		font-size: 1.5rem;
		width:60px;
		height:60px;
		align-content:center;
		background-color: #ff1919;
        color: #fff;
		border-radius:50%;
			@media(width < 992px){
	      		width: 35px;
            height: 35px;
	  }
	            
	
	}
}
  }