@import url('https://fonts.googleapis.com/css2?family=News+Cycle&family=PT+Sans&family=PT+Sans+Narrow&family=Poppins:ital,wght@0,100;0,200;0,300;1,200&family=Roboto&family=Roboto+Condensed&display=swap');

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto Condesed', sans-serif;
}
h2 {
    color: #000E17;
    font-size: 26px;
}
p {
    font-size: 15px;
}
.first-h2 {
    color: #000E17;
}
.quick-p {
    font-size: 14px;
    font-weight:400;
}
#testi-h2 {
    display: inline-block;
    border-bottom: none;
    display:flex;
    justify-content:center;
}
section > div > h2 {
    display: inline-block;
    border-bottom: 1px solid #047D01;
    width: auto;
}
#header {
    background: #000E17;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.nav-item a.active {
    border-bottom: 3px solid #2BABFF;
    padding-top: 5px;
}
.nav-item.active .nav-link {
    border-bottom: 3px solid #2BABFF;
}
#header-ul li {
    padding: 0px 5px;
}
#navbarNav ul li a:hover {
    color: #C1E8FF;
}
header ul li a{
    font-size:18px;
    font-weight:500;
}
#navbarNav ul li a {
    color: #2BABFF;
}
.sec-bac {
    background: #FEF9F6;
}

p a{
    text-decoration:none;
     color:white;
}
section{
    padding:25px;
}

#navbarNav {
    text-align: center;
}

.card-body h5 {
    color: white;
}
.card-body p {
    color: white;
  
}
.card-body {
    display: flex;
    background: #000E17;
}
.card-title {
    font-size: 17px;
    color: #43CD66;
}
.img{
    width:100%;
    height:200px;
}
span{
    margin-left:5px;
}
#testimonial{
    padding-bottom:0px;
}
.logo>div{
    width:80%;
}
.logo>div>.card-body{
    display:flex;
    flex-direction:column;
}
#media-ul li {
    padding: 0px 14px;
}
#quick-ul li {
    padding: 0px 14px;
}
#quick-ul li>a{
        font-size:14px;
}
/*------------------ ------------------Footer CSS ----------------------------------- -----------------------------------------------*/
.footer-text {
    color: white;
}
#footer-end {
    background: #000E17;
    padding: 20px;
}
#footer {
    background: #000E17;
    padding: 25px;
}
#footer-end p>a{
    font-size:14px;
}

.footer-li {
    margin-right: -10px;
}
.arrow-text {
    color: #000E17;
}

#up {
    width: 30px;
    height: 30px;
    border-radius: 33px;
    background: white;
    border: 2px solid #000E17;
    transition: background-color 0.3s;
    cursor: pointer;
    /* border: 2px solid #029A48;
    background-color: #28A745;
    position: fixed;
    bottom: 20px;
    right: 40px;
    height: 50px;
    width: 50px;
    display: none;
    place-items: center;
    border-radius: 33px;
    box-shadow: 0 0 10px black;
   */
}
/*#progress-value {
    display: block;
    height: calc(100% - 15px);
    width: calc(100% - 15px);
    background-color: #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 35px;
    color: black;
}*/

#up-arrow-div {
    position: fixed;
    bottom: 15px;
    right: -10px;
    z-index: 9999;
}
#whatsapp-div {
    width:30px;
    height:30px;
    border-radius:33px;
    background:white;
    font-size: 30px;
    position: fixed;
    bottom: 56px;
    right: 6px;
}
#wh-icon {
   font-size:30px;
    position: fixed;
    bottom: 48px;
    right: 6px;
}

  @media (max-width:768px){
    #up-arrow-div {
        position: fixed;
        bottom: 20px;
        right:-10px;
        z-index: 9999;
    }
      .quick-p{
          margin-bottom:5px;
      }
      #footer .row{
          row-gap:10px;
      }
    .top-icon-div {
        padding-top: 15px;
        display:none;
    }
  }
/*-------------------------------------Index CSS ------------------------------------------*/
@media (max-width:991px){
    .logo>div{
        width:100%;
    }
    
}
@media (max-width:768px) {
    #why-us .container{
        text-align:center;
    }
   
    .logo {
        display: flex;
        justify-content: center;
    }
        .logo > div {
            width: 80%;
        }
    .img {
        width: 100%;
        height: 200px;
    }
    #top-icon-div{
        display:none;
    }
}
@media (min-width:769px){
    #top-div{
        display:flex;
       
    }
}
@media (max-width:500px) {
    #top-div {
        display: none;
    }
}
#top {
    height: 25px;
    background: #000E17;
}
.top-text {
    color: white;
}
#top-icon-div {
    padding-right:45px;
}
/*-----------------------------------   About CSS here After ------------------------------*/
.img-back {
    width: 100%;
    height: 300px;
    /*   background-image: url('http://www.raghavindustriesindia.com/assets/images/about.jpg');  */
}
#about-div {
    width: 100%;
    height: 100px;
    background: #2BABFF;
    /*background-image: url('https://media.istockphoto.com/id/1220978578/photo/businessman-holding-a-foldable-smartphone.webp?b=1&s=170667a&w=0&k=20&c=xxhMlNQvt958RsPZkKs6tnZroyLeGeHw4eOlu6ywAG8=');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;*/
}
.vision {
   background:#fff;
   border-radius:10px;
   padding:20px;
}
.vision div{
    width: 100%;
    height: 100px;
    display:flex;
    justify-content:center;
    align-items:center;
 
}





.same-clr {
    color: #000E17;
}#value-div {
    background: #fff;
    border-radius: 10px;
    padding:20px 10px;
}

.list-group-item{
    border:none;
}


.eye-icon {
    font-size: 40px;
}
#value-icon {
    font-size: 40px;
    margin-right:20px;
    padding-bottom:8px;
}
li span {
   /* width: 10px;
    height: 10px;
    background: #008001;
    padding:3px;*/
    margin-right:15px;
}
#vision-div{
    row-gap:24px;
}
.prev{
    position:absolute;
    left:50px;
}
.next {
    position: absolute;
    right: 50px;
}
 @media (min-width:768px) and (max-width:991px){
    #vision-div{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:20px;
    }
        #vision-div>div:nth-child(2) {
            margin-bottom:24px;
        }
 }
 @media (max-width:768px){
    #value-div {
        margin-top: 24px;
        padding: 20px 0px;
    }
 }
/*------------------------------ProductPage CSS -------------------------------------------------*/
#product-div {
    width: 100%;
    height: 100px;
    background: rgb(135,191,57);
    background: radial-gradient(circle, rgba(135,191,57,1) 43%, rgba(2,154,72,1) 100%);
    /*  background-image: url('https://www.ofi.com/content/dam/olamofi/products-and-ingredients/spices/spices-images/banner-spices-landing-page.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;*/
}

/*------------------------------------- Contact CSS -------------------------------------------------*/
#contact-div {
    width: 100%;
    height: 100px;
    background: rgb(135,191,57);
    background: radial-gradient(circle, rgba(135,191,57,1) 43%, rgba(2,154,72,1) 100%);
    /*   background-image: url('https://images.unsplash.com/photo-1596524430615-b46475ddff6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29udGFjdCUyMHVzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60');
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
}

.icon {
    font-size: 30px;
}
.form-icon {
    margin-left: 90px;
}



#firstname-div {
    display: flex;
    column-gap: 50px;
}

/
.btn-bg {
    background: #000E17;
}
*----------------------------- Gallery CSS --------------------------------------------------------*/
#gallery-div {
    width: 100%;
    height: 100px;
    background: rgb(135,191,57);
    background: radial-gradient(circle, rgba(135,191,57,1) 43%, rgba(2,154,72,1) 100%);
    /*  background-image: url('https://is1-ssl.mzstatic.com/image/thumb/Purple122/v4/fe/3a/7e/fe3a7e0e-7f52-b750-0ed2-523998c59d48/AppIcon-0-0-1x_U007emarketing-0-0-0-7-0-0-sRGB-0-0-0-GLES2_U002c0-512MB-85-220-0-0.png/1200x630wa.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;*/
}

#achievments div{
    width:100%;
    height:250px;
}
#achievments div img{
    width:100%;
    height:100%;
}


.image-container {
    position: relative;
    width: 300px; 
    height: 200px; 
    overflow: hidden;
    padding:10px 10px 10px 10px;
    margin:0px;
}

.image-container img {
    width: 100%;
    height: 100%;
    /*transition: transform 0.3s;*/
}
.image-container:hover img {
    transform: scale(1.2);
}

.video{
    width:100%;
    height:180px;
}

/* Light Box CSS */
.img-fluid{
    width:120%;
    height:600px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 30px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 60%;
    max-width: 1000px;
}

/* The Close Button */
.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    z-index: 1000;
}

    .close:hover,
    .close:focus {
        color: #999;
        text-decoration: none;
        cursor: pointer;
    }

/* Hide the slides by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 60%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    background: black;
    color: white;
    width: 100%;
}

.active,
.demo:hover {
    opacity: 1;
}

img.hover-shadow {
    transition: 0.3s;
}

.hover-shadow:hover {
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*--------------------------------------------------------------------------------*/