/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.dropdown-menu li{
		position: relative;
	}
	.dropdown-menu .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.dropdown-menu .submenu-left{ 
		right:100%; left:auto;
	}

	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {

.dropdown-menu .dropdown-menu{
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
}

}	
/* ============ small devices .end// ============ */
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.vmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.vmodal-content {
  
  margin: auto;
  padding: 20px;
  border: 0px solid #888;
  width: 60%; 
}

/* The Close Button */
.vclose {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

/* Hide scrollbar for Chrome, Safari and Opera */
.frame-22::-webkit-scrollbar {
    display: none;
}
.frame-53::-webkit-scrollbar {
    display: none;
}
.frame-38::-webkit-scrollbar {
    display: none;
}

.owl-prev {
   display: none!important;
}.owl-next {
   display: none!important;
}

  .video-btn-pos {
        position: absolute;
        left: 41% !important;
        top: 52% !important;
        width: auto;
        z-index: 99;
    }

    .w-80 {
        width: 80%;
    }

    .video-btn .play-btn {
        color: #e20012;
        background: #fff;
        font-size: 40px;
    }

    .spinner-eff .circle-2 {
        background-color: #fff;
    }

    .counter {
        height: 260px;

    }

    .post-image img {
        width: 90%;
    }

    .res{
        display: flex;
        justify-content: center;
    }

    @media (max-width: 420px) {
		
        h5 {
            font-size: 10px;
            line-height: 18px;
        }

        .width-iphone {
            width: 45% !important;
        }

        .video-btn-pos {
            position: absolute;
            left: 52% !important;
            top: 91% !important;
            width: auto;
            z-index: 99;
        }

        .video-btn .spinner-eff {
            left: 14%;
            top: 16%;
        }
    }

    .team-member-height {
        height: 450px;
    }

    .text-red {
        color: #e20012;
    }

    .text-black1 {
        color: #000;
    }
	
	    @media (max-width: 1200px) {
		
		.homepage-desktop .frame-55 {height:250px;}
		
		/*
		.frame-54{display:none;}
		*/
		}
		
		.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1600px;width: 100%;
    }
.ml-150{margin-left: -180px;}

@media (max-width: 1600px) {
    .ml-150{margin-left: 0px !important;}
}

.herobanner video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
   opacity: 0.6;
   object-fit: cover;  
}

.scrollcon::-webkit-scrollbar {
    display: none;
}

.polygon-1{background-image:url(assets/home/images/polygon-1.png);
       background-size: cover;
  background-position: 50% 50%;
}
.polygon-1:hover{background-image:url(assets/home/images/polygon-2.png);
       background-size: cover;
  background-position: 50% 50%;
}

.prod-col{

width:170px;float:left;

}
li {
    font-size: 14px; 
    list-style-type: disc;margin-top:5px;margin-left:40px;
 }
 
 
.container .cards-wrapper {
  width: 350px;
  height: 350px;
  position: relative;
  overflow: visible;
}
.container .cards-wrapper .cardd {
  position: absolute;
  left: 50%;
  top: 50%; 
  box-shadow: none;border-radius:20px;
  opacity:1;transition-duration: 500ms;
  transform: translate(-50%, -40%); 
}
.container .cards-wrapper .cardd:nth-child(1) {
  
  width: 280px;
  height: 280px;
  z-index: 1;
}
.container .cards-wrapper .cardd:nth-child(2) {
  
  width: 200px;
  height: 200px;
  z-index: 2;
  transform: translate(-50%, -10%) rotate(10deg); 
}
.container .cards-wrapper .cardd:nth-child(3) {
 
  width: 250px;
  height: 250px;
  z-index: 3;
  transform: translate(-50%, -34%); 
}
.container .cards-wrapper .cardd:nth-child(4) {
   
  width: 200px;
  height: 200px;
  z-index: 4;
  transform: translate(-50%, -20%) rotate(-5deg); 
}
.container:hover > .cards-wrapper > .cardd {
  
  opacity: 1;
}
.container  > .cards-wrapper >   .carddd:nth-child(1) {
  transform: translate(-30%, -120%) rotate(10deg); 
}
.container  > .cards-wrapper >   .carddd:nth-child(2) {
  transform: translate(-140%, -90%); 
}
.container  > .cards-wrapper >   .carddd:nth-child(3) {
  transform: translate(-50%, -15%) rotate(-15deg); 
}
.container  > .cards-wrapper >   .carddd:nth-child(4) {
  transform: translate(10%, -60%) rotate(-15deg); 
}
.partnerlogofooter{

float:left;width:100px;margin-left:20px;

}

   
 .partners_logo_bg{
    display: flex;
     padding: 40px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: var(--Neutral-N-950, #262626);

 }

 .partners_logo_img
 {
    width: 205px;
    /* height: 45px; */
   
    padding: 0 12px;
      
 }
 
 
  /* Container to limit the scroll width */
.logo-container-body {
	/* Setting custom properties for logo dimensions, spacing, and animation duration */
	--logo-width: 200px;         /* Width of each logo */
	--logo-height: 100px;        /* Height of each logo */
	--gap: calc(var(--logo-width) / 14);  /* Space between logos, calculated based on logo width */
	--duration: 20s;             /* Duration of the scroll animation */
	--scroll-start: 0;           /* Start position of scroll animation */
	--scroll-end: calc(-100% - var(--gap)); /* End position of scroll animation */

	display: flex;               /* Aligns children in a row */
	flex-direction: column;      /* Stacks content vertically */
	gap: var(--gap);             /* Adds space between child elements */
	margin: auto;                /* Centers container horizontally */
	max-width: 100vw;            /* Limits width to the viewport */
}

/* Scrolling area */
.logo-scroll {
	display: flex;               /* Aligns logos in a horizontal row */
	overflow: hidden;            /* Hides overflow to create infinite scroll effect */
	user-select: none;           /* Disables text selection */
	gap: var(--gap);             /* Space between logos */
	/* mask-image: linear-gradient(
		to right,
		hsl(0 0% 0% / 0),
		hsl(0 0% 0% / 1) 30%,
		hsl(0 0% 0% / 1) 70%,
		hsl(0 0% 0% / 0)
	);                           Adds a gradient mask to fade edges */
}

.logo-scroll__wrapper {
	flex-shrink: 0;              /* Prevents wrapper from shrinking */
	display: flex;               /* Aligns logos horizontally */
	align-items: center;         /* Centers logos vertically */
	justify-content: space-around; /* Distributes logos evenly */
	gap: var(--gap);             /* Adds spacing between logos */
	min-width: 100%;             /* Wrapper width covers full viewport */
	animation: scroll var(--duration) linear infinite; /* Infinite scrolling animation */
}


/* 
.logo-scroll__wrapper:nth-child(even) {
	margin-left: calc(var(--logo-width) / -2);
} */

/* .logo-scroll__wrapper:hover {
	animation-play-state: paused; 
} */

/* Logo styling */
.logo-item {
	width: var(--logo-width);    /* Sets width of each logo */
	height: var(--logo-height);  /* Sets height of each logo */
	/* transition: transform 0.5s; Smooth scaling effect */
	background-color: blue;      /* Background color for logos */
	border-radius: 4px;          /* Rounds the logo corners */
}

.logo-scroll .logo-item:hover {
	transform: scale(1.05);      /* Slightly enlarges logo when hovered */
}

/* Infinite scroll animation */
@keyframes scroll {
	from {
		transform: translateX(var(--scroll-start)); /* Animation start position */
	}
	to {
		transform: translateX(var(--scroll-end)); /* Animation end position */
	}
}

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.vmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.vmodal-content {
  
  margin: auto;
  padding: 20px;
  border: 0px solid #888;
  width: 60%; 
}

/* The Close Button */
.vclose {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

/* Hide scrollbar for Chrome, Safari and Opera */
.frame-22::-webkit-scrollbar {
    display: none;
}
.frame-53::-webkit-scrollbar {
    display: none;
}
.frame-38::-webkit-scrollbar {
    display: none;
}

.owl-prev {
   display: none!important;
}.owl-next {
   display: none!important;
}
.herobanner{
	padding-top:72px;
	position:relative;background: linear-gradient(180deg, rgba(600, 42, 45, 20) 20%, rgba(50, 11, 12, 1) 100%)!important;
	
	
}
.homebg{
	
	width:100%!important;position:absolute!important;left:0px!important; opacity: 0.95!important;min-height:900px!important;
	
}
.rectangle{	
	opacity: 0.3!important;display:none;	
}	
.rectanglemob{	
	opacity: 0.3!important;display:none;	
}
.frame-8{
	display:table-cell!important; vertical-align:middle!important; text-align:center!important;
}
.vmodal{
	z-index:99999999!important;
}
.vmodal-content{
	z-index:99999999!important;
}
.modvid{
	width:100%!important;border-radius: 20px!important; 
	
}
.xflow{
	overflow-x:hidden!important;
}
.clientbg1{
	 background-image: url('../../../public/assets/home/images/Design-Head.jpg')!important; 
}
.clientbg2{
	 background-image: url('../../../public/assets/home/images/Project-Manager.jpg')!important; 
}
.clientbg3{
	 background-image: url('../../../public/assets/home/images/Engineering-Manager.jpg')!important; 
}
.clientbg4{
	 background-image: url('../../../public/assets/home/images/BIM-Manager.jpg')!important; 
}
.clientbg5{
	 background-image: url('../../../public/assets/home/images/Lead-Architect.jpg')!important; 
}
.framehub{
	
	margin:auto!important;width:1440px!important;
}

.collaboration{
	 top: -40px!important;
  right: -10px!important;
}
.bluesec{
	
	background: linear-gradient(180deg, rgb(243, 248, 252) 0%, rgb(226, 238, 248) 100%)!important;
}
.whback{
	background:#FFF!important;
	
}.wgback{
	background:#F2F2F2!important;
	
}.wgback2{
	background-color:#F6F6F6!important;
}
.border1{
	border-bottom:1px solid #D9D9D9!important;
	
}
.pb40{
	 padding-bottom:40px!important;
}
.oscroll{
	overflow:scroll!important;
}
.w1900{
	width:2100px!important;overflow-y: scroll !important;-webkit-overflow-scrolling: touch;
}
.gradientback{
	background: var(--Gradient-2, linear-gradient(104deg, #F3F8FC 17.59%, #E2EEF8 100%))!important;
}
.gradientback2{
background: linear-gradient(264deg, #F3F8FC 0%, #E2EEF8 93.28%)!important;
}
.linkk{
	
	text-decoration:none!important;color:#000!important;
}
.linkk2{
	
	text-decoration:none!important;color:#FFF!important;
}
.frame366{
	margin-bottom:24px!important;	
}
.similar-products{
	
	max-width:100%!important;
}
.w38{
	width:38%!important;
	
}
.w80{
	width:80%!important;height:auto!important;
}
.mbnull{
	margin-bottom: 0px!important;
}
.hidethis{
	display:none;
}