.card{
	width: 250px;
	border-radius: 10px;
}

.card-img-top{
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}
span.text-muted{
	font-size: 12px;
}
small.text-muted{
	font-size: 8px;
}
h5.mb-0{
	font-size: 1rem;
}
small.ghj{
	font-size: 9px;
}
.mid{
	background: #ECEDF1;
}
h6.ml-1{
	font-size: 13px;
}
small.key{
	text-decoration: underline;
	font-size: 9px;
	cursor: pointer;
}
.btn-danger{
	color: #FFCBD2;
}
.btn-danger:focus{
	box-shadow: none;
}
small.justify-content-center{
	font-size: 9px;
	cursor: pointer;
	text-decoration: underline;
}

.btn-primary,
.btn-primary:focus {
  font-size: 14px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 8px 23px;
  border-radius: 4px;
  transition: 0.3s;
}

@media screen and (max-width:600px){
    .col-sm-4{
        margin-bottom: 50px;
    }
}

/*** About Start ***/
.about .about-item .about-item-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  background: var(--bs-light);
  transition: 0.5s;
}

.about .about-item .about-item-inner .about-icon {
  width: 90px; 
  height: 90px; 
  border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary);
  background: var(--bs-primary);
  animation-name: icon-animat;
  animation-duration: 5s;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  transition: 0.5s;
}

.about .about-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  
}

.about .about-img .img-1 {
  height: 85%;
  margin-right: 50px;
}

.about .about-img .img-2 {
  position: absolute;
  width: 100%; 
  bottom: 0; 
  right: 0;
  padding-left: 50px;
  border-radius: 10px;
}

.about .about-img::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 98%;
  top: 0;
  right: 0;
  border-radius: 10px;
  background: var(--bs-primary);
  z-index: -1;
}

.about .about-item .text-item {
  position: relative;
  padding-left: 25px;
}

.about .about-item .text-item::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: var(--bs-secondary);
}
/*** About End ***/

/*** Fact Counter Start ***/
.counter {
  background: linear-gradient(rgba(0, 12, 33, 0.9), rgba(31, 46, 78, 0.9)), url(../img/fact-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.counter .counter-item .counter-item-icon {
  width: 90px; 
  height: 90px; 
  border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary);
  background: var(--bs-primary);
  animation-name: icon-animat;
  animation-duration: 5s;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  transition: 0.5s;
}

/*** Fact Counter End ***/

/*** Features Start ***/
.feature {
  background: var(--bs-light);
}

.feature .feature-item {
  display: flex;
  border-radius: 10px;
}

.feature .feature-item .feature-icon span {
  width: 90px; 
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary);
  background: var(--bs-primary);
  border-radius: 67% 33% 29% 71% / 39% 46% 54% 61%;;
  animation-name: icon-animat;
  animation-duration: 5s;
  animation-delay: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  transition: 0.5s;
}

/*** Features End ***/

/*** Process Start ***/
.steps {
  background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url(../img/bg-1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}


.steps .steps-item {
  position: relative;
  background: var(--bs-secondary);
  border-radius: 10px;
}

.steps .steps-item h4,
.steps .steps-item p {
  color: var(--bs-white);
}

.steps .steps-item .setps-number {
  position: absolute;
  width: 64px;
  height: 64px;
  bottom: 0; 
  right: 40px;
  font-weight: 900;
  border: 1px solid var(--bs-white); 
  border-radius: 64px;
  transform: translateY(50%);
  color: var(--bs-white);
  background: var(--bs-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
/*** Process End ***/


/*--- ============= productlist 
.productlist {
  position: relative;
}

.productlist .productlist-item {
  width: 95%;
	border-radius: 10px;
  border: 1px solid rgba(var(--color-black-rgb), 0.2);
  margin-bottom: 50px;
}

.productlist .productlist-item h6 {
  font-weight: 600;
  font-size: large;
}

.productlist .productlist-item-img-top {
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.productlist .productlist-item .text-muted {
	font-size: 12px;
}

.productlist .productlist-item small .text-muted {
	font-size: 12px;
}

.productlist .productlist-item .mb-0 {
	font-size: 1rem;
}

.productlist .productlist-item small .ghj {
	font-size: 9px;
}

.productlist .productlist-item .mid {
	background: #ECEDF1;
}

.productlist .productlist-item h6 .ml-1 {
	font-size: 13px;
}

.productlist .productlist-item .small .key {
	text-decoration: underline;
	font-size: 9px;
	cursor: pointer;
}

.productlist .btn-primary,
.productlist .btn-primary:focus {
  font-size: 14px;
  color: var(--color-white);
  background: var(--color-primary);
  padding: 8px 23px;
  border-radius: 4px;
  transition: 0.3s;
}

.productlist .btn-primary:hover,
.productlist .btn-primary:focus:hover {
  color: var(--color-white);
  background: var(--color-secondary);
}

.productlist .productlist-item small .justify-content-center {
	font-size: 9px;
	cursor: pointer;
	text-decoration: underline;
}

@media screen and (max-width:767px) {
  .productlist .productlist-item {
    margin: 0 auto 50px auto;
    height: auto;
    width: 75%;
}} 
================== --*/

/* --------------============ bannerawal ===============--------*/
.bannerawal img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin-top: 90px;
}

@media (max-width: 768px) {
  .bannerawal img {
    height: 200px;
  }
}


.videomain-wrapper {
  display: block;
  object-fit: cover;
  align-items: center;
  height: auto;
}
.videomain {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.local-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures video covers the area while maintaining aspect ratio */
}