/* button technology  stylesh */
:root {
  --hdr-gradient: linear-gradient(
    53deg in oklab,
    oklch(100% 0.51 340),
    oklch(100% 0.36 266),
    oklch(81% 0.44 200)
  );
}

.our-tec{
text-align: center;
margin-bottom: 30px;
margin-top: 30px;
margin-left: 50px;
}

 .snbtn {
    
 

  position: relative;
  padding: .40rem 1.10rem;
  font-size: 15px;
  line-height: 10px;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(0) scale(1);
  border-radius: 3px;
  border: solid;
  color: #011003;
  font-weight: 10px;
  letter-spacing: -.20px;
  cursor: pointer;
  text-decoration: none;
  will-change: transform, opacity;
  box-shadow: 0 3px 4px -1px rgb(53 80 141 / 27%), inset 0px 3px 9px 0px rgba(255, 255, 255, 0.4);
  

  background-image: var(--hdr-gradient);
  background-size: 120% 120%;
  background-position: 10% 10%;
 
}
/*all logo Section*/
.logo_section .logo_container {
    -webkit-box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
    margin: 45px 45px 45px;
    overflow: hidden;
    position: relative;

}

.logo_section .box {
    display: -webkit-box;
    display: -ms-flexbox;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    padding: 10 10px;
    margin: 10px 0;
}

.logo_section .box .img-box img {
    width: 20%;
	height: 20%;
	
    background-color: transparent;
}

.logo_section .box .detail-box h4 {
    text-transform: uppercase;
    font-weight: bold;
    color: #cacaca;
}

.logo_section .box.b1 {
    -webkit-animation: odd-box-animate 7s infinite;
    animation: odd-box-animate 7s infinite;
}

.logo_section .box.b2 {
    -webkit-animation: even-box-animate 7s infinite;
    animation: even-box-animate 7s infinite;
}

@-webkit-keyframes odd-box-animate {
    0% {
        -webkit-transform: translateY(90px);
        transform: translateY(90px);
    }

    50% {
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }

    100% {
        -webkit-transform: translateY(90px);
        transform: translateY(90px);
    }
}

@keyframes odd-box-animate {
    0% {
        -webkit-transform: translateY(90px);
        transform: translateY(90px);
    }

    50% {
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }

    100% {
        -webkit-transform: translateY(90px);
        transform: translateY(90px);
    }
}

@-webkit-keyframes even-box-animate {
    0% {
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }

    50% {
        -webkit-transform: translateY(90px);
        transform: translateY(90px);
    }

    100% {
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }
}

@keyframes even-box-animate {
    0% {
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }

    50% {
        -webkit-transform: translateY(90px);
        transform: translateY(90px);
    }

    100% {
        -webkit-transform: translateY(-90px);
        transform: translateY(-90px);
    }
}

.logo_section .owl-carousel {
    position: unset;
    width: 100%;
    margin: auto;
}

.logo_section .owl-carousel .owl-nav .owl-prev,
.logo_section .owl-carousel .owl-nav .owl-next {
    background-color: #000000;
    width: 75px;
    height: 75px;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: 15px;
}

.logo_section .owl-carousel .owl-nav .owl-prev {
    left: -30px;
    background-color: #000000;
    border-radius: 0 100% 100% 0;
    background-image: url(../images/prev-arrow.png);

}

.logo_section .owl-carousel .owl-nav .owl-next {

    border-radius: 100% 0 0 100%;
    background-image: url(../images/next-arrow.png);
    background-position: 12.8px center;
}

.logo_section .owl-carousel .owl-dots {
    display: relative;
}

.carousel-container {
    overflow: hidden;
    /* Hide scrollbar if content moves via JS/animation */
}
.item {
    display: inline-block;
    width: 250px;
    height: 10px;
    

}
.loader {
            position: absolute;
            width: 100px;
            height: 100px;
			
		
        }
        
        .ring {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.9);
            animation: pulse 1.5s infinite ease-in-out alternate, changeColor 2s infinite linear;
        }
        
        .ring:nth-child(2) {
            width: 80%;
            height: 80%;
            left: 10%;
            top: 10%;
            box-shadow: 0 0 20px rgba(255, 165, 0, 0.9);
            animation: pulse 1.5s infinite ease-in-out alternate-reverse, changeColor 2s infinite linear;
        }
        
        .ring:nth-child(3) {
            width: 60%;
            height: 60%;
            left: 20%;
            top: 20%;
            box-shadow: 0 0 20px rgba(255, 255, 0, 0.9);
            animation: pulse 1.5s infinite ease-in-out alternate, changeColor 2s infinite linear;
        }
        
        .circle {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 0 0 10px white;
            animation: orbit 2s linear infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.4); opacity: 0.5; }
        }
        
        @keyframes changeColor {
            0% { box-shadow: 0 0 25px red; }
            25% { box-shadow: 0 0 25px orange; }
            50% { box-shadow: 0 0 25px yellow; }
            75% { box-shadow: 0 0 25px gold; }
            100% { box-shadow: 0 0 25px red; }
        }

        @keyframes orbit {
            0% { transform: rotate(0deg) translateX(60px) rotate(0deg); opacity: 1; }
            25% { opacity: 0.5; }
            50% { transform: rotate(180deg) translateX(60px) rotate(-180deg); opacity: 0; }
            75% { opacity: 0.5; }
            100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); opacity: 1; }
        }