html,
body{
  width:100%;
  overflow-x:hidden;
}
body{
	overflow-x:hidden !important;
}

.page-content {
    overflow-x: hidden !important;
}
.gform_required_legend {
    display: none !important;
}

.s-form .gfield_label.gform-field-label {
    color: #fff;
}

span.gfield_required.gfield_required_asterisk {
    color: #8bb182 !important;
}
.s-form .gform_fields, .c-form .gform_fields {
	row-gap: 12px !important;
}


.s-form input[type=date], .s-form input[type=email], .s-form input[type=number], .s-form input[type=password], .s-form input[type=search], .s-form input[type=tel], .s-form input[type=text], .s-form input[type=url], .s-form select, .s-form textarea {
    width: 100%;
    border: 1px solid #8bb182 !important;
    border-radius: 3px;
    padding: .5rem 1rem;
    transition: all .3s;
    background-color: #ffffff00 !important; !important;
}

.c-form input[type=date], .c-form input[type=email], .c-form input[type=number], .c-form input[type=password], .c-form input[type=search], .c-form input[type=tel], .c-form input[type=text], .c-form input[type=url], .c-form select, .c-form textarea {
    width: 100%;
    border: 1px solid #8bb182 !important;
    border-radius: 3px;
    padding: .5rem 1rem;
    transition: all .3s;
	background-color:#14141400 !important;
}

.c-form ::placeholder, .gf_placeholder{
	color:#fff !important;
	opacity:0.5 !important;
	font-weight:300 !important;
	filter:blur(0.6px) !important;
}

.c-form .gfield_label.gform-field-label {
    color: #fff !important;
}


input#gform_submit_button_1:hover, input#gform_submit_button_2:hover {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

input#gform_submit_button_1 , input#gform_submit_button_2 {
    width: 100%;
    background-color: #8bb182;
    border-radius: 100px;
    padding: 16px 10px;
    font-family: 'Poppins';
    text-transform: uppercase;
    color: #000;
}


.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* No gap between items */
	  justify-content:center;
  
}

/* Portfolio Items */
.portfolio-item {
    position: relative;
    width: calc(25% - 20px);
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    overflow: hidden; /* Hide overflow for hover effects */
		height:350px;
	border-radius:20px;
}

.portfolio-grid-home .portfolio-item {
  
		height:400px !important;

}
.portfolio-grid-home .portfolio-image img {
	 height:400px !important;
	
}


/* Portfolio Image */
.portfolio-image img {
    width: 100%;
    object-fit: cover; /* Ensures the image is square and covers the container */
	object-position:top;
    transition: transform 0.3s ease;
}


/* Title on Hover */
.portfolio-item:hover .portfolio-image img {
    transform: scale(1.1); /* Zoom the image slightly on hover */
}

.portfolio-item:hover .portfolio-title{
	opacity:1 !important;
}

/* Overlay */
.portfolio-item .portfolio-title {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    top: 50%;
    left: 50%;
    padding: 10px 20px;
    color: white;
    opacity: 0;
    z-index: 3;
    text-transform: uppercase;
    font-size: 24px;
    transition: opacity 0.3s ease;
    width: auto;
    text-align: center !important;
	white-space:nowrap;
	
}
.title-link{
	color:#fff !important;
}

/* Dark Overlay */
/* .portfolio-item:hover .portfolio-title,.portfolio-item:hover .eye-icon {
    opacity: 1; 
}*/

/* Ensure Image is Square (400x400px) */
.portfolio-image {
    width: 100%;
    position: relative;
}

/* Optional: Add Dark Overlay on Image */
.portfolio-item .portfolio-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
background: #8bb182c4;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease;
	 z-index:2;
}

/* Dark overlay appears on hover */
.portfolio-item:hover .portfolio-image::before {
    opacity: 1; /* Show overlay on hover */
}


.or {
    font-weight: 600 !important;
    color: #8bb182 !important;
}

#industry, #brand {
    background-color: #000;
    color: #fff;
    border: 2px solid #8bb182;
    border-radius: 10px;
}

option {
    background-color: #D7E9D2;
    color: #000;
    border-bottom: 1px solid #000;
}

select option:hover {
    background-color: #f0f0f0; /* Light gray on hover */
    color: #000; /* Black text on hover */
}
div#portfolio-projects {
    margin-top: 40px;
}

@media screen and (min-width:1024px) and (max-width:1280px)
{
	.portfolio-item {
  
	height:400px !important;
}
	.portfolio-image img {
	 height:400px !important;
	object-fit:cover;
}
}
@media screen and (min-width:2000px)
{
	.portfolio-item {
  
	height:550px !important;
}	
	.portfolio-image img {
	 height:550px !important;
	object-fit:cover;
}
}

.portfolio-image img {
	 height:350px;
	object-fit:cover;
}
@media screen and (max-width:767px)
{
	.portfolio-item {
    position: relative;
    width: 100%; /* 4 items per row (100% ÷ 4 = 25%) */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    overflow: hidden; /* Hide overflow for hover effects */
		height:350px;
}
	.portfolio-image img {
	 height:350px !important;
	object-fit:cover;
}
	.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* No gap between items */
  
}
	.portfolio-filters{
		gap:0px !important;
		flex-wrap:wrap !important;
	}
	.inner-div{
		flex-basis:100% !important;
		display:flex;
		justify-content:center;
	}
	.portfolio-item .portfolio-title {
		font-size:18px !important;
	}
		.portfolio-video {
    display: flex;
    flex-basis: 100% !important;
    height: auto;
}

}

@media screen and (min-width:768px) and (max-width:981px)
{
	.portfolio-item {
    position: relative;
    width: calc(50% - 20px); 
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    overflow: hidden; /* Hide overflow for hover effects */
		height:300px;
	!important;
}
	.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
}
	.portfolio-item .portfolio-title {
		font-size:18px !important;
	}
	.portfolio-video {
    display: flex;
    flex-basis: calc(50% - 15px) !important;
    height: auto;
}
}

@media screen and (min-width:1025px) and (max-width:1279px)
{
	.button-col {
    width: 21% !important;
}
}

.portfolio-video-gallery {
    display: flex !important;
    flex-wrap:wrap;
    gap:30px;
   
}

.portfolio-video {
    display: flex;
    flex-basis: calc(25% - 15px);
    height: auto;
}
@media screen and (max-width:767px)
{
    .portfolio-video {
    flex-basis: 100% !important;
 

}
.video-sect video{
    height: 400px !important;
    background-color:#000 !important;
}
.video-thumb {
    height: 400px !important;
   
}
.video-thumbnail{
     height: 400px !important;
}
.video-container video {
    height: 400px !important;
    background-color: #000000;
}
}


@media screen and (min-width:768px)
{

.video-thumb {
    height: 400px !important;
   
}
.video-thumbnail{
     height: 400px !important;
}
	.video-sect video{
    height: 400px !important;
    background-color:#000 !important;
}
.video-container video {
    height: 400px !important;
    background-color: #000000;
}
}

.video-sect video{
    height: 400px;
}
.video-thumbnail{
   width: 100% !important;  
   position: relative;
}
.video-thumbnail  img{
    width: 100% !important;
    object-fit: cover;
    object-position: top;
}

.play-icon {
    font-size: 60px;
  background-color: #000000;
    border-radius: 100px;
  color: #8bb182 !important;
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.elementor-slideshow__title {
    display: none !important;
}

.elementskit-menu-overlay.elementskit-menu-offcanvas-elements.elementskit-menu-toggler.ekit-nav-menu--overlay.active {
    display: none !important;
}
.e-gallery-image.elementor-gallery-item__image.e-gallery-image-loaded {
    background-position: top center !important;
}

.video-container {
    width: 100% !important;
}

.filter-tab {
    background-color: #00000000 !important;
	  padding: 16px 20px;
    color: #fff !important;
    border: 1px solid !important;
}

.filter-tab:hover{
	   background-color: #8bb182 !IMPORTANT;
    border-color: #8bb182 ! IMPORTANT;
    color: #000 !important;
}


.filter-tab.active {
    background-color: #8bb182 !IMPORTANT;
    border-color: #8bb182 ! IMPORTANT;
    color: #000 !important;
}

.inner-div.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 700px;
    gap: 13px;
	    align-items: center;
    justify-content: center;
}

.portfolio-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Optional: Adjust the gap between the items */
}


/* Service Page CSS Start  */
.before-sect:before {
animation: circlerotate 12s infinite linear !important;
animation-direction: alternate;
}

@keyframes circlerotate{
0% {
    transform: translateY(0) rotate(0deg);
}
100% {
    transform: translateY(-150px) rotate(360deg);
}
}

@keyframes tuberotate{
	0% {
    transform: translateY(0) rotate(0deg);
}
100% {
    transform: translateY(150px) rotate(360deg);
}
}

@media screen and (max-width:767px){
	@keyframes circlerotate{
0% {
    transform: translateY(0) rotate(0deg); 
}
100% {
    transform: translateY(-50px) rotate(360deg) ;
}
}
	@keyframes tuberotate{
	0% {
    transform: translateY(0) rotate(0deg);
}
100% {
    transform: translateY(30px) rotate(360deg);
}
}
}



.and {
    font-size: 65px;
    color: #353535;
}

.heading-txt{
    
    width:fit-content !important;
}


.circle-img img{
    animation:round 6s infinite linear;
}
@keyframes round{
    0%{
        transform:rotate(0deg);
    }
    100%{
         transform:rotate(360deg);
    }
}

.e-n-accordion-item-title {
    justify-content: space-between;
    flex-grow: 1;
}

.e-n-accordion-item-title-header {
    flex-grow: 1;
}

@media screen and (min-width:1024px) and (max-width:1280px){
    .heading-txt  h1{
        font-size:70px !important;
    }
    .and {
    font-size: 55px !important;
    color: #353535;
}
}
@media screen and (min-width:768px) and (max-width:981px)
{
   .and{
       font-size: 35px !important;
   } 
   .heading-txt{
    width:100% !important;
}

}
@media screen and (max-width:767px)
{
  .and{
       font-size: 22px !important;
   }  
   .heading-txt{
    width:100% !important;
}
 .before-sect:before {
    content: "";
    background-image: url(https://baamarketing.com/wp-content/uploads/2025/02/round-shape.webp);
    background-size: contain;
    width:120px !important;
    height:120px !important;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    top: 100%;
    left: calc(100% - 100px) !important;
    transform: translate(-100%, 10px);
}  

.ring-section:before {
   
    width: 150px !important;
    height:150px !important;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translate(-100%, 0%);
    left: calc(100% - 150px) !important;
    top: 91% !important;
    animation: tuberotate 12s infinite linear;
    animation-direction: alternate;
}

}


.before-sect:before {
    content: "";
    background-image: url(https://baamarketing.com/wp-content/uploads/2025/02/round-shape.webp);
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    top: 90%;
    left:-80px;
    width:254px;
    height:254px;
}

.ring-section:before {
    content: "";
    background-image: url(https://baamarketing.com/wp-content/uploads/2025/02/Mesh-shape.webp);
    background-size: contain;
    width: 230px;
    height:175px;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translate(-100%, 0%);
    left: calc(100% - 230px);
    top: 96%;
    animation: tuberotate 12s infinite linear;
    animation-direction: alternate;
}
@media screen and (min-width:768px) and (max-width:981px)
{
   .before-sect:before {
    content: "";
    background-image: url(https://baamarketing.com/wp-content/uploads/2025/02/round-shape.webp);
    background-size: contain;
    width:180px !important;
    height:180px !important;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    top: 100%;
    left: calc(100% - 150px) !important;
    transform: translate(-100%, 10px);
}  
  .ring-section:before {
    content: "";
    background-image: url(https://baamarketing.com/wp-content/uploads/2025/02/Mesh-shape.webp);
   width: 175px !important;
    height:175px !important;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    transform: translate(-100%, 0%);
    left: calc(100% - 175px) !important;
    top: 96%;
}  
}

/* Service Page CSS end  */