/* BANNER */


.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #3F00FF;
    color: white;
    text-align: center;
    padding: 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
        display: none; /* Ensures the banner is hidden by default */

}

.cookie-banner p {
    margin: 0;
    padding: 0 10px;
}

.cookie-banner a {
    color: #E34234;
    text-decoration: none;
    font-weight: bold;
}

.cookie-banner a:hover {
    text-decoration: underline;
}

.accept-cookies {
    background-color: #F8D53A;
    color: #333;
    border: none;
    padding: 10px 20px;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
}

.accept-cookies:hover {
    background-color: #d4ac0d;
}



@keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0px);
            }
        }

   @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        .float {
            animation: float 2s ease-in-out infinite alternate-reverse both;
        }

        .bg-svg {
            position: relative;
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bg-svg img {
            display: block;
            width: 100%;
            height: auto;
        }

        .overlay-wrapper-svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: auto;
            pointer-events: none;
        }

        .overlay-wrapper-svg img {
            width: 100%;
            height: auto;
        }



 .bg-svg-price {
            position: relative;
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bg-svg-price img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .overlay-wrapper-svg-price {
            position: absolute;
            top: 50%;
            left: 40%;
            transform: translate(-50%, -50%);
            width: 40%;

            height: auto;
            pointer-events: none;
        }

        .overlay-wrapper-svg-price img {

            width: 100%;
            
        }










.bg-svg-keg {
            position: relative;
            width: 100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bg-svg-keg img {
            display: block;
            width: 100%;
            height: auto;
        }

        .overlay-wrapper-svg-keg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: auto;
            pointer-events: none;
        }

        .overlay-wrapper-svg-keg img {
            width: 50%;
            height: auto;
        }




        .keg{
  animation: animName 5s linear infinite;
   width: 10%;
 
}

@keyframes animName {
 0%{
    transform: rotateX(0deg);
   }
100%{
    transform: rotateZ(360deg);
   }
}

        


.banner {
	padding-right: 8vw;
	padding-left: 8vw;
}

.banner h1 {
	font-size: 3.5vw;
}


.sectionbg{


background: linear-gradient(to bottom, rgba(236, 230, 255, 0) 0%, rgba(236, 230, 255, 0.5) 50%, rgba(236, 230, 255, 0) 100%);
}


.colorsection{

	background-color: #EFF7FC;
}

.sectionbg2{
background-color:#FAFCFE ;


}

@media (max-width: 1199px){
	.banner h1 {
		font-size: 56px;
	}
}

@media (max-width: 991px){
	.banner {
		padding-right: 0;
		padding-left: 0;
	}
	.banner h1 {
		font-size: 6vw;
	}
}

@media (max-width: 767px){
	.banner h1 {
		font-size: 15vw;
	}
}

/* SERViCES */
.services .module-box {
	padding-right: 7%;
	padding-left: 7%;
}

.services .module-box:hover {
	transform: translateY(-3px);
}

@media (max-width: 991px){
	.services {
		padding-top: 30px;
	}
	.services .module-box {
		margin-bottom: 45px;
	}
}

/* TAB ITEMS */
.tab-items .lqd-tabs-nav li a.active {
	color: #ff4d12;
	background: #fff;
}

@media (max-width: 991px){
	.tab-items {
		padding-bottom: 25px;
	}
	.tab-items .lqd-tabs-nav li {
		margin-bottom: 5px;
	}
}

.case-studies .filter-list li {
	color: #000;
}

.case-studies .filter-list li.active {
	color: var(--lqd-color-red-500);
}

/* APPROACH */
@media (max-width: 991px) {
	.approach {
		padding-bottom: 40px;
	}

	.approach .lqd-imggrp-single {
		margin-bottom: 50px;
	}
}

@media (max-width: 767px) {
	.approach .module-spacer {
		height: 10px;
	}
}

/* EXPERIENCES */

	

  .expicon img {
    width: 100px; /* Adjust the width as needed */
    height: auto; /* Keeps the aspect ratio */
  }


@media (max-width: 767px) {
	.experiences .module-box {
		padding: 15px 30px 0 30px;
	}

	.experiences .module-box-last{
		padding: 15px 30px 65px 30px;
	}
}

/* MARKETING ACCORDION */
@media (max-width: 991px) {
	.marketing-accordion {
		padding-top: 30px;
	}
}

/* TESTIMONIALS */







@media (max-width: 991px) {
	.testimonials .module-testi {
		padding-right: 45px;
	}
}

@media (max-width: 767px) {
	.testimonials .module-testi {
		padding-right: 0;
	}
}

/* Clients */
@media (max-width: 991px) {
	.clients {
		padding-top: 40px;
	}
}

/* BLOG */
.blog h2.lqd-lp-title a {
	color: #fff;
}

@media (max-width: 767px) {
	.blog {
		padding-top: 40px;
	}
}

/* CONTACT */ 
@media (max-width: 1199px) {
	.contact .module-box {
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media (max-width: 991px) {
	.contact {
		padding-top: 70px;
	}
}

@media (max-width: 767px) {
	.contact {
		padding-top: 50px;
	}
}



/* PRICING */



 
  
.pricing-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    padding: 20px;

}

.pricing-card {
border: 1px solid #f5f5f5;
       border-color: #f5f5f5;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    height: auto;
}


 .pricing-card-cal {

    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    height: auto;
}

.pricing-card h2, .pricing-card-cal h2 {
   
    margin-bottom: 10px;
}

.pricing-card .price, .pricing-card-cal .price {
    color: #333;
   

    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-card .features {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.pricing-card .features li {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
  
    padding: 15px 20px;
    margin-bottom: 10px; /* Add space between items */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row; /* Align items horizontally */
    text-align: left;
}

.pricing-card .features li .rate, .pricing-card .features li .price {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.pricing-card .features li .rate {
    display: flex;
    align-items: center;
    justify-content: flex-start;

}

.pricing-card .features li .price {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align text to the right */
    text-align: right;
     color:#4D7A6E;
     font-weight: 700;
}

.pricing-card .features li .rate img {
    width: 50px;
    height: auto;
    margin-right: 10px;
}

.btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.pricing-card .btn, .pricing-card-cal .btn {
    background-color: #4a90e2;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
}

.pricing-card .btn:hover, .pricing-card-cal .btn:hover {
    background-color: #357ab8;
}

.highlight {
    background-color: #FAFCFE;
}

.pricing-calculator .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: 1px solid #f5f5f5;
}

.pricing-calculator .form-group {
    margin-bottom: 15px;
}

.pricing-calculator label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 20px;
}




.pricing-calculator input[type="number"],
.pricing-calculator select {

     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.3s;
    font-weight: 600;
}

.pricing-calculator input[type="number"]:focus,
.pricing-calculator select:focus {
    border-color: #007bff;
}

.pricing-calculator .result {
    margin-top: 20px;
    padding: 15px;
    color: #1A3DA6;
    font-weight: bold;
}

.pricing-calculator button {
    display: inline-block;
    padding: 10px 20px;
    color: white;
    background-color: #3F00FF;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.3s;
    
}

.pricing-calculator button:hover {
    background-color: #1A3DA6;
}

.pricing-calculator button:active {
    background-color: #3F00FF;
}

@media (max-width: 991px) {
    .pricing-container {
        grid-template-columns: 1fr;
        align-items: center;
    }
}

 .animated-svg {
    display: none;
  }
  .animated-svg.active {
    display: block;
  }