/*
Theme Name: Ministore
Theme URI: 
Author: 
Author URI: 
Description: Ministore is specially designed product packaged for Ministore by Moksha.
Version: 
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:




/* Load Font Awesome for the arrow icon */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');


body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--accent-color);
  margin: 0;
  overflow:hidden !important;
}


 .display-2 {
    font-size: 70px;
    font-weight: 500;
    line-height: 1.2;
    
    text-transform: capitalize !important;
    font-family: var(--heading-font);
   
  }


@font-face {
    font-family: 'Involve';
    src: url('Involve-BoldOblique.eot');
    src: url('Involve-BoldOblique.eot?#iefix') format('embedded-opentype'),
        url('Involve-BoldOblique.woff2') format('woff2'),
        url('Involve-BoldOblique.woff') format('woff'),
        url('Involve-BoldOblique.ttf') format('truetype'),
        url('Involve-BoldOblique.svg#Involve-BoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-Bold.eot');
    src: url('Involve-Bold.eot?#iefix') format('embedded-opentype'),
        url('Involve-Bold.woff2') format('woff2'),
        url('Involve-Bold.woff') format('woff'),
        url('Involve-Bold.ttf') format('truetype'),
        url('Involve-Bold.svg#Involve-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-MediumOblique.eot');
    src: url('Involve-MediumOblique.eot?#iefix') format('embedded-opentype'),
        url('Involve-MediumOblique.woff2') format('woff2'),
        url('Involve-MediumOblique.woff') format('woff'),
        url('Involve-MediumOblique.ttf') format('truetype'),
        url('Involve-MediumOblique.svg#Involve-MediumOblique') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-Medium.eot');
    src: url('Involve-Medium.eot?#iefix') format('embedded-opentype'),
        url('Involve-Medium.woff2') format('woff2'),
        url('Involve-Medium.woff') format('woff'),
        url('Involve-Medium.ttf') format('truetype'),
        url('Involve-Medium.svg#Involve-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-SemiBoldOblique.eot');
    src: url('Involve-SemiBoldOblique.eot?#iefix') format('embedded-opentype'),
        url('Involve-SemiBoldOblique.woff2') format('woff2'),
        url('Involve-SemiBoldOblique.woff') format('woff'),
        url('Involve-SemiBoldOblique.ttf') format('truetype'),
        url('Involve-SemiBoldOblique.svg#Involve-SemiBoldOblique') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-Regular.eot');
    src: url('Involve-Regular.eot?#iefix') format('embedded-opentype'),
        url('Involve-Regular.woff2') format('woff2'),
        url('Involve-Regular.woff') format('woff'),
        url('Involve-Regular.ttf') format('truetype'),
        url('Involve-Regular.svg#Involve-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-Regular_1.eot');
    src: url('Involve-Regular_1.eot?#iefix') format('embedded-opentype'),
        url('Involve-Regular_1.woff2') format('woff2'),
        url('Involve-Regular_1.woff') format('woff'),
        url('Involve-Regular_1.ttf') format('truetype'),
        url('Involve-Regular_1.svg#Involve-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-Oblique.eot');
    src: url('Involve-Oblique.eot?#iefix') format('embedded-opentype'),
        url('Involve-Oblique.woff2') format('woff2'),
        url('Involve-Oblique.woff') format('woff'),
        url('Involve-Oblique.ttf') format('truetype'),
        url('Involve-Oblique.svg#Involve-Oblique') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-Oblique_1.eot');
    src: url('Involve-Oblique_1.eot?#iefix') format('embedded-opentype'),
        url('Involve-Oblique_1.woff2') format('woff2'),
        url('Involve-Oblique_1.woff') format('woff'),
        url('Involve-Oblique_1.ttf') format('truetype'),
        url('Involve-Oblique_1.svg#Involve-Oblique') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Involve';
    src: url('Involve-SemiBold.eot');
    src: url('Involve-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('Involve-SemiBold.woff2') format('woff2'),
        url('Involve-SemiBold.woff') format('woff'),
        url('Involve-SemiBold.ttf') format('truetype'),
        url('Involve-SemiBold.svg#Involve-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.blog_txt{
text-align:right !important;  margin-top: 150px;

}

.Our_Excellence{

position: relative; top: 70px !important;
}

.excellence{
margin-top: 100px;

}



.stories_we_buit{

text-align:right !important;  margin-top: 150px;

}

.Building-Ecosystems-for-Growth {

text-align:left !important;  margin-top: 10px;

}






/* Spaciaz Button Styles */
.spaciaz-btn {
	display: inline-flex;
	align-items: center;
	padding: 5px 15px;
	background: #fff;
	border: 2px solid #ffffff;
	border-radius: 40px;
	cursor: pointer;
	transition: all 0.3s ease;

	font-weight: 600;
	margin-top: 40px;
}

.spaciaz-icon {
	text-align: center;
	font-size: 30px;
	padding: 7px 0px;
}

.h2, h2 {
	font-size: 90px;
	text-align: left;
}

.spaciaz-icon {
  
  width: 48px;
  height: 48px;
  background-color: #3c98d4;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  left:7px;
  
  
  display: block;
  position: relative;
  transition: all 1.1s 0.1s;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
   
}
.spaciaz-icon span i {
 text-align: center!important;
 margin: auto !important;
 left:0;
 right: 0;
 align-items: center;
 position: absolute;
 


}
.spaciaz-icon i::after{
  content: "\f102";
font-family: FontAwesome;
  
  color: #fff;
  display: block;
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  top: 0;
  transform-origin: 70% 0;
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

.spaciaz-icon i {
  color: #000000;
   transition: all 1.4s 0.1s;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}



.spaciaz-btn:hover .spaciaz-icon i {
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

.spaciaz-btn:hover {
  color: #fcca46;
}



/* Spaciaz Button Styles */
.spaciaz-btn1 {
	display: inline-flex;
	align-items: center;
	padding: 5px 15px;
	background: #49acf4;
	border: 2px solid #49acf4;
	border-radius: 40px;
	cursor: pointer;
	transition: all 0.3s ease;

	font-weight: 600;
	margin-top: 40px;
  color:#fff;
}

.spaciaz-text1 {
  color: #ffffff;
  margin-right: 14px;
}

.spaciaz-icon1 {
  
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  left:7px;
  padding: 7px 0px;
  
  
  display: block;
  position: relative;
  transition: all 1.1s 0.1s;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
   
}
.spaciaz-icon1 span i {
 text-align: center!important;
 margin: auto !important;
 left:0;
 right: 0;
 align-items: center;
 position: absolute;
 


}
.spaciaz-icon1 i::after{
  content: "\f102";
font-family: FontAwesome;
  
  color:var(--primary);
  display: block;
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  top: 0;
  transform-origin: 70% 0;
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}

.spaciaz-icon1 i {
  color: #000000;
   transition: all 1.4s 0.1s;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.spaciaz-btn1 a{
 color: #fff !important;;

}
.spaciaz-btn1 a:hover{
 color: #000 !important;;

}

.spaciaz-btn1:hover .spaciaz-icon1 i {
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

.spaciaz-btn1:hover {
  color: #fcca46;
}


.bg{
position: relative;
	margin: 0; 
  bottom: -320px;
	vertical-align: text-top;
	font-weight: bold;
  text-align:center;
  left:0px;
	
	color: #FFF;
	text-align: center;
  width: 100% !important;
  z-index: -1;
	
	

}




.swiper-pagination {
	position: inherit !important;
	text-align: center;
	transition: .3s opacity;
	transform: translate3d(0,0,0);
	z-index: 10;
}

.marquee {
	position: relative;
	max-width: 100%;
	height: 50px;
	width: 200px;
	border-radius: 30px;
	font-size: 20px;
	line-height: 46px;
	letter-spacing: 0.9px;
	font-weight: 500;
	text-align: center;
	border: solid 1px var(--bs-primary);
	overflow-x: hidden;
	text-transform: uppercase;
	margin: 40px 0px;
	overflow: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 210s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


.h4, h4 {
	font-size: 26px;
	font-weight: 800;
}





.what_we_offer{
background:url(../images/bg.jpg) no-repeat; background-size: 100%; padding: 50px 0px 30px 0px;

}






#counter {
	background: rgba(black, .05);
	padding: 0px;
	
	margin: 0 auto;
  float: left;

	font-weight: 900;
	list-style: none;
	justify-content: space-between;
	text-align: text-top !important;
	line-height: 100px;
  li{
    flex: 0;
    text-align: center;
    font-size: 110px;
    font-weight:900;
  }
  span.percent:after {
    content: "";
    display: inline-block;
  }
}










.banner_bg2 {
	background: #fff;
	padding: 50px 19px 0PX 40PX;
	z-index: 10;
	top: -40px;
	border-radius: 50px 50px 0px 0px;
	position: relative;
}

.banner_bg3 {
	background: #fff;
	padding: 50px 19px 0PX 40PX;
	z-index: 10;
	top: 56px;
	border-radius: 0px 0px 50px 50px;
	position: relative;
}

.banner_bg4 {
	background: #fff;
	padding: 50px 19px 0PX 40PX;
	z-index: 10;
	top:49px;
	border-radius: 0px 0px 50px 50px;
	position: relative;
}

.banner_bg {
	background: #fff;
	padding: 100px 0px 20PX 0PX;
	z-index: 10;
	top: -60px;
	border-radius: 50px 50px 0px 0px;
	position: relative;
	border-bottom: solid 1px #ccc;
}

.banner_bg p{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;


}
.found::first-line {
font-weight: 700;
margin-top: 40px;
line-height: 30px;
font-size: 20px !important;
color:#000;

}


.commercial{

  font-size: 30px; font-weight: 600;
  

}


.commercial::after{
content:".";
position: absolute;
  font-size: 85px;
 font-weight: 900;
 vertical-align:text-bottom;
 text-align: center;
 color: #3c98d4;
 line-height: 0px;
  

}

.text-class {
  font-size:16px;
  font-weight: 500;
  color: #4B4B4B;


}

.pointers{ border-top: solid 1px #ccc;
margin: 40px 0px;
padding: 30px 0px;

}
.modal-body {
	position: relative;
   background: url(../images/get.png) no-repeat center center/cover;
	flex: 1 1 auto;
	padding: 1rem;
}

  .career-section {
      background: url(../images/careers-bg.jpg) no-repeat center center/cover;
      min-height: 100vh;
      display: flex;
      align-items: flex-end;
      position: relative;
      color: #fff;
      margin: 50px 0px;
      
    }

  .career-content {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	padding: 60px 20px;
	
}


.elementor-6353 {
    background-color: transparent;
    --background-overlay: '';
    background-image: linear-gradient(180deg, #FFFFFF00 0%, #1B1F12 100%);
    width: 100%;
    background-size: cover;
}







    .career-text {
      flex: 1 1 60%;
     
    }

    .career-text h1 {
      font-size: 84px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 15px;
      border-bottom:  solid 1px #474c44;
      
    }

    .avatar-stack {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .avatar-stack img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: -10px;
      background: #fff;
    }

    .avatar-stack span {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #d4ff00;
      color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      margin-left: -10px;
    }

    .career-subtext {
      font-size: 0.95rem;
      margin-top: 20px;
      opacity: 0.8;
     
    }

    .career-cta {
      flex: 1 1 30%;
      text-align: right;
    }

    .career-cta a {
      background-color: #d4ff00;
      color: #000;
      padding: 14px 28px;
      border-radius: 50px;
      font-weight: 600;
      text-decoration: none;
      transition: background 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .career-cta a:hover {
      background-color: #c6f000;
    }

    .career-cta a::after {
      content: '✕';
      font-size: 0.9rem;
    }

    @media (max-width: 768px) {
      .career-content {
        flex-direction: column;
        align-items: flex-start;
      }

      .career-cta {
        text-align: left;
        margin-top: 30px;
      }

      .career-text h1 {
        font-size: 2.3rem;
      }
    }



    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --accent-color: #0d0d0d;
  --bs-gray-100: #fff;
  --bs-gray-200: #fff;
  --bs-primary: #3c98d4;
  --bs-secondary: #fff;
  
  --bs-light: #fff;
  --bs-dark: #000;
  --navbar-color-color: #131814;
  --swiper-theme-color: #3c98d4 !important;
  --swiper-pagination-color: #3c98d4 !important;
  --header-color:#685e55;


  
  --clr-bg-header: #3c98d4;
  --clr-btn: #3c98d4;
  --clr-dropdown: #000;
  --clr-nav-hover: #3c98d4;
  --clr-dropdown-hov: #3c98d4;
  --clr-dropdown-link-hov: #3c98d4;
  --clr-light: #fff;

  --primary: #4db3f5;
  --primary_hover: #5ab0e9;
  --text: #4B4B4B;
  --text_light: #8A8A8A;
  --accent: #000000;
  --border: #E0E0E0;
  --background: #FFFFFF;
  --background_light: #F6F3EC;
}






/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* Fonts */
:root {
  --body-font: "Poppins";
  --heading-font:"Involve";
}

/*----------------------------------------------*/
/* 1 GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 1.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}


ul.inner-list li {
  font-size: 1.2em;
}

strong {
  font-weight: bold;
}

a {
  color: var(--bs-dark);
  text-decoration: none;
  transition: 0.3s color ease-out;
}

a:hover {
  text-decoration: none;
  color:var(--border);
}

.form-control:focus,
.accordion-button:focus {
  box-shadow: none;
}

/*------------ Background Color -----------*/
.bg_about {
	background-repeat: no-repeat;
	background-position: right;
	
}

.padding-about{

background: #fff; padding: 20px 30px ; margin:10px 0px

}
.bg-secondary {
  background: var(--bs-secondary) !important;
}

.bg-dark {
  background: var(--bs-dark) !important;
}

.bg-light {
  background: var(--bs-light) !important;
}

.bg-gray-1 {
  background-color: var(--bs-gray-100) !important;
}

/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}

.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}

.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}

/* - Section margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 3em;
  margin-bottom: 3em;
}

.margin-medium {
  margin-top: 5em;
  margin-bottom: 5em;
}

.margin-large {
  margin-top: 7em;
  margin-bottom: 7em;
}

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

  .bt-glyphicons1 li {
    float: left;
    width: 100% !important;
    height: 217px;
    padding: 24px 10px 3px 210px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
    border: 1px solid #fff;
    background-color: #f1f1f1;
    margin: 10px auto;
  }

  .margin-small,
  .margin-medium,
  .margin-large {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

/* .row {
	--bs-gutter-x: 1.5rem; */
	/* --bs-gutter-y: 0;
} */


/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--heading-font);
  font-weight: 700 !important;
}

/* - Section width
--------------------------------------------------------------*/
.container-fluid {
  max-width: 1540px;
}

/*--------------------------------------------------------------
/** 2.10 Buttons
--------------------------------------------------------------*/
/* - Button Sizes
------------------------------------------------------------- */
.btn.btn-small {
  padding: 0.8em 1.8em;
  font-size: 0.65em;
}

.btn.btn-medium {
  padding: 1.1em 2.8em;
  font-size: 1.1em;
  letter-spacing: 2px;
}

.btn.btn-large {
  padding: 2.4em 5.1em;
  font-size: 1.8em;
}

/* - Button Shapes
------------------------------------------------------------- */
.btn.btn-rounded,
.btn.btn-rounded::after {
  border-radius: 6px;
}

.btn.btn-pill,
.btn.btn-pill::after {
  border-radius: 2em;
}

/* button outline */
.btn.btn-outline-dark,
.btn.btn-outline-light,
.btn.btn-outline-accent {
  background: transparent;
  text-shadow: none;
  box-shadow: none;
  border: 1px solid;
}

.btn.btn-outline-dark:hover::after,
.btn.btn-outline-light:hover::after {
  background-color: transparent;
}

.btn.btn-outline-dark {
  border-color: rgba(0, 0, 0, 1);
  color: var(--bs-dark);
}

.btn.btn-outline-dark:hover {
  background: var(--bs-dark);
  color: var(--bs-light);
}

.btn.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--bs-light);
}

.btn.btn-outline-light:hover {
  background: var(--bs-primary);
  color: var(--bs-light);
  border-color: var(--bs-primary);
}

.btn.btn-outline-gray {
  background: transparent;
  border-color: var(--gray-color-600);
  color: var(--bs-dark);
}

.btn.btn-outline-gray:hover {
  border-color: var(--bs-dark);
  color: var(--bs-dark) !important;
}

.btn.btn-outline-accent {
  background: transparent;
  border-color: var(--accent-color);
  color: var(--bs-dark);
}

.btn.btn-outline-accent:hover {
  border-color: var(--bs-dark);
  color: var(--bs-dark) !important;
}

.btn.btn-full {
  display: block;
  margin: .85em 0;
  width: 100%;
  letter-spacing: 0.12em;
}

/* no border radius */
.btn-rounded-none,
.btn-rounded-none::after {
  border-radius: 0;
}

/* - Buttons Color Scheme
------------------------------------------------------------- */
.btn.btn-normal {
  border: none;
  color: var(--bs-dark);
  text-decoration: underline;
}

.btn.btn-normal:hover {
  text-decoration: none;
}

.btn.btn-accent {
  color: var(--bs-light);
  background-color: var(--accent-color);
  border: none;
}

.btn.btn-accent:hover {
  color: var(--bs-light) !important;
  background-color: var(--bs-primary);
}

.btn.btn-black {
  background-color: var(--bs-dark);
  color: var(--bs-light);
  border: none;
}

.btn.btn-black:hover {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

.btn.btn-light {
  background-color: var(--bs-light);
  color: var(--bs-dark);
  border: none;
}

.btn.btn-light:hover {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

.btn.btn-primary {
  background: var(--bs-primary);
  color: var(--bs-light);
  border: none;
}

.btn.btn-primary:hover {
  background-color: var(--bs-dark);
  color: var(--bs-light);
}

/* - Buttons Aligns
------------------------------------------------------------- */
.btn-left {
  text-align: left;
  display: block;
}

.btn-center {
  text-align: center;
  display: block;
}

.btn-right {
  text-align: right;
  display: block;
}

/*----------------------------------------------*/
/* 2 SITE STRUCTURE */
/*----------------------------------------------*/

/*----- 6.1 Preloader
--------------------------------------------------------------*/
*#preloader {
  width:100%;
  height:100%;  
  position:fixed;
  z-index:20;
  background:#ece7e1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 300px;
  height: 300px;
   background:url(/images/Asharii-loader.gif) center no-repeat;
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;

  animation: loader-inner 2s infinite ease-in;
}

/* - Text Effect
------------------------------------------------------------- */
.pseudo-text-effect {
  position: relative;
  padding: 0;
  overflow: hidden;
  transition: transform 0.5s;
  display: block;
}

.pseudo-text-effect::after {
  content: attr(data-after);
  display: inline-block;
  transform: translateY(100%);
  position: absolute;
  left: 0;
  transition: inherit;
  color: var(--bs-dark);
}

.pseudo-text-effect>span {
  display: inline-block;
  transform: translateY(0%);
  transition: inherit;
}

.pseudo-text-effect:hover>span {
  transform: translateY(-100%);
}

.pseudo-text-effect:hover::after {
  transform: translateY(0%);
}

/*--------------------------------------------------------------
/** Jarallax
--------------------------------------------------------------*/
.jarallax {
  position: relative;
  z-index: 0;
  min-height: 440px;
  margin-top: 0px;
}

.jarallax>.jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.jarallax-img {
  position: relative;
  z-index: 0;
}

.jarallax img.jarallax-img {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto !important;
  z-index: -100;
  border-radius: 40px;
}

@media screen and ( max-width: 991px ) {
  .jarallax {
    min-height: 280px;
  }
}

/*--- Image hover Effects
-----------------------------------------------*/
.image-zoom-effect {
  overflow: hidden;
}

.image-zoom-effect .image-holder {
  width: 100%;
  height: auto;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-zoom-effect:hover .image-holder {
  transform: scale(0.95);
}

.image-zoom-effect img {
  transform: scale(1);
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 0;
}

.image-zoom-effect:hover img {
  transform: scale(1.1);
}

/* Link Effect
------------------------------------------------------------- */
.link-effect {
  cursor: pointer;
}

.link-effect a {
  position: relative;
  padding: 0;
  overflow: hidden;
  transition: transform 0.5s;
  display: block;
}

.link-effect a::after {
  content: attr(data-after);
  display: inline-block;
  transform: translateY(100%);
  position: absolute;
  left: 0;
  font-size: 1rem;
  text-align: inherit;
  text-transform: uppercase;
  transition: inherit;
}

.link-effect a>span {
  display: inline-block;
  transform: translateY(0%);
  transition: inherit;
}

.link-effect:hover a>span {
  transform: translateY(-100%);
}

.link-effect:hover a::after {
  transform: translateY(0%);
}

/* Social Link Hover
------------------------------------------------------------- */
.icon-box-effect {
  overflow: hidden;
  cursor: pointer;
}

.icon-box-effect .social-links libutton {
  position: relative;
  bottom: 80px;
  opacity: 0;
  display: inline-block;
  margin: 7px;
  padding: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--secondary-color);
}

.icon-box-effect .social-links button:hover {
  background-color: var(--bs-primary);
}

.icon-box-effect .social-links svg {
  color: var(--light-color);
  animation-name: rotate-icon;
}

.icon-box-effect .social-links button:nth-child(1) {
  transition: 1.0s;
}

.icon-box-effect .social-links button:nth-child(2) {
  transition: 1.2s;
}

.icon-box-effect .social-links button:nth-child(3) {
  transition: 1.5s;
}

.icon-box-effect .social-links button:nth-child(4) {
  transition: 1.8s;
}

.icon-box-effect .social-links button:nth-child(5) {
  transition: 2.4s;
}

.icon-box-effect:hover>.product-card .social-links button {
  bottom: 200px;
  opacity: 1;
 
}


/* blog*/
figure {
	width: 100%;
	height: auto;
   border-radius: 20px;
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
}
figure:hover+span {
	bottom: -36px;
	opacity: 1;
}


.header_text{
  font-size:20px;
  text-align: left;
  line-height: auto;
  line-height: 27px;
  color:#dadada;
  font-weight: 500;
}

.hover05 figure img {
	margin-left: 30px;
  border-radius: 20px;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
  overflow: hidden;
  object-fit: cover;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover05 figure:hover img {
	margin-left: 0;
}

.blog-section {
      padding: 60px 0;
      
    }

    .blog-label {
      background-color: var(--clr-btn);
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      color: #ffffff;
    }

    .blog-date {
      font-size: 13px;
      color: #666;
      font-weight: 500;
    }

    .blog-title2 {
	font-size: 34px;
	font-weight: bold;
	color: #000;
	transition: color 0.3s;
}

    .blog-title {
      font-size: 25px;
      font-weight: bold;
      color: #000;
      transition: color 0.3s;
    }
    .blog-title2:hover {
      color: #147de7;
      cursor: pointer;
    }

    .blog-title:hover {
      color: #147de7;
    }

    .featured-image {
     
    
      border-radius: 20px !important;
    }

 .side-blog-img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 35px;
        transition: color 0.3s;

}



    .blog-divider {
      border-top: 1px solid #ccc;
      height: 1px;
      margin: 0 10px;
      flex-grow: 1;
    }


/* testimonal */

.rating-badge2 {
	--spacer-size: 60px;
	width:  350px;
	max-width: 350px;
	--container-widget-width: 350px;
	--container-widget-flex-grow: 0;
	top: 0px;
	z-index: 1;
}


  .testimonial-slider {
      background: url(../images/bg-test.jpg) no-repeat center center/cover;
      color: #fff;
      height: 100vh;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      clear: both;
      margin-top: 250px;
    }

   .rating-badge {
	position: absolute;
	top: -8px;
	left: 50%;
  font-size: 13px;
	transform: translateX(-50%);
	background-color:var(--bs-primary);
	color: #fff;
	padding: 6px 10px;
	border-radius: 30px;
	font-weight: 500;
	/* box-shadow: 0 4px 10px rgba(0,0,0,0.15); */
	margin: -30px 0px 160px 0px;
	padding: 18px 30px 18px 30px;
	border-radius: 50px 50px 50px 50px;
	border: solid 20px #fff;
}

   

    .carousel-item {
      padding: 0 20px;
    }

    .testimonial-text {
      font-size: 2rem;
      font-weight: 600;
      max-width: 900px;
      margin: 0 auto 30px;
      line-height: 40px;
    }

    .author-img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      object-fit: cover;
    }

    .author-name {
      font-weight: bold;
      margin-top: 15px;
      font-size: 1.1rem;
    }

    .author-role {
      font-size: 0.95rem;
      color: #ddd;
    }

    .carousel-control-prev, .carousel-control-next {
      width: 50px;
      height: 50px;
      background-color: white;
      color: black;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      opacity: 1;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      background-size: 60% 60%;
    }

    @media (max-width: 768px) {
      .testimonial-text {
        font-size: 1.4rem;
      }
    }



/*  Image Overlay
------------------------------------------------------------- */
/* .text-box {
  width: 100%;
  
} */
.image-overlay {
  cursor: pointer;
  border: solid 1px #ccc;
  padding: 10px;
  border-radius: 25px;
}



.image-overlay .product-image {
 

  	padding-top: 0%;
	position: relative;
	overflow: hidden;
	border-radius: 25px;


}
.service-item.service-style-1:hover .service-post-thumbnail img {

}


.image-overlay .product-image img {
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
  
  
  
}

.service-item .service-post-thumbnail img {

  position: absolute;
	object-fit: cover;
	height: 100%;
	width: 100%;
	top: 0;
	transform: translate3d(-6.66%, 0, 0) scale(1.2);
	-webkit-transform: translate3d(-6.66%, 0, 0) scale(1.2);
	transition: opacity 0.35s, transform 0.45s, filter 0.35s;
	border-radius: 25px;
	
}


.image-overlay:hover .box-slide {
  transform: translateX(0%);
  object-fit: cover;
  	height: 100%;
	width: 100%;
	top: 0;
	transform: translate3d(-6.66%, 0, 0) scale(1.2);
	-webkit-transform: translate3d(-6.66%, 0, 0) scale(1.2);
	transition: opacity 0.35s, transform 0.45s, filter 0.35s;
  
}

.image-overlay:hover img {
  transform: translateX(2%);
}

.service-button1 {
	position: absolute;
	right: 51px;
	bottom: -27px;
	z-index: 4;
}

.service-button-wrap1 {
  position: relative;
  width: 50px;
  height: 80px;
  border-radius: 40px;
  background-size: cover;
  background-position: center;
  z-index: 1;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.service-button-wrap1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background);
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}


.btn-icon-wrap {
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  display: flex;
  position: relative;
  overflow: hidden;
}
 .btn-icon, .btn-icon-hover {
  display: flex;
  color: var(--accent);
  transition: transform 0.35s linear;
  font-size: 13px;
}
.btn-icon {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(-45deg);
  transform-style: preserve-3d;
}
 .btn-icon-hover {
  position: absolute;
  transform: translate3d(-17px, 17px, 0px) scale3d(0.2, 0.2, 1) rotate(-45deg);
}
.btn-icon {
  transform: translate3d(17px, -17px, 0px) scale3d(0.2, 0.2, 1) rotate(-45deg);
}
.btn-icon-hover {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotate(-45deg);
}

/* Button Hover Effects 2
------------------------------------------------------------- */
.btn.btn-arrow {
  color: var(--bs-light);
  background-color: var(--bs-primary);
  border-radius: 0;
}

.btn.btn-arrow.btn-bg-light {
  color: var(--bs-dark);
  background-color: var(--bs-light);
}

.btn.btn-arrow.outline-dark {
  color: var(--bs-dark);
  background-color: transparent;
  border: 1px solid var(--bs-dark);
}

.btn.btn-arrow.btn-normal {
  color: var(--bs-dark);
  background-color: transparent;
  border: none;
  text-decoration: underline;
}

.btn.btn-arrow span {
  display: inline-block;
  transition: all 300ms ease-out;
  will-change: transform;
}

.btn.btn-arrow:hover span {
  transform: translate3d(-7px, 0, 0);
}

.btn.btn-arrow svg {
  position: absolute;
  top: 32px;
  right: 21px;
  transform: translateY(-50%);
  transition: all 300ms ease-out;
  will-change: right, opacity;
}

.btn.btn-arrow:hover svg {
  opacity: 0;
  right: 0;
}

.btn svg.icon-arrow {
  width: 25px;
  height: 25px;
}

/* - Search Bar
------------------------------------------------------------- */
.search-box {
  background: var(--bs-light);
  height: 0px;
  transition: height 0.3s ease-out;
}

.search-box.active {
  height: 90px;
}

.close-button {
  top: 20px;
  right: 120px;
  cursor: pointer;
  z-index: 9;
}

.search-box input.search-input {
  width: 50%;
  height: 30px;
  min-width: 420px;
  border-radius: 80px;
  border-color: rgb(0 0 0 / 25%);
}

.search-box .search-wrap svg {
  color: var(--bs-primary);
}

.search-box svg.search {
  margin-left: -50px;
}

/* - Sticky
------------------------------------------------------------- */
.sticky {
  position: sticky;
  top: 0;
   transition: background 0.3s ease-out;
  

}


#header{position:fixed;}

#header {
    width: 100%;
    position: fixed;
    margin: auto !important;
	left: 0;
	right: 0;
   
   
   
   
   
    
    transition: all 0.15s linear;
}

#header.active {
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	background-color: rgba(0, 0, 0, 0.7);
	margin: auto !important;
	left: 0;
	right: 0;
}

.navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-top: .3rem;
	padding-bottom: .3rem;
}

.navbar-brand {
	padding-top: .3125rem;
	padding-bottom: .3125rem;
	margin: auto !important;
	font-size: 1.25rem;
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 300px) {
.navbar-expand-lg .offcanvas {
	position: inherit !important;
	bottom: 0!important;
	z-index: 1000!important;
	flex-grow: 1;
	visibility: visible !important;
	background-color: transparent!important;
	border-right: 0;
	border-left: 0;
	transition: none;
	transform: none;
}}

.box:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color:rgba(255, 255, 255, 0.9);
            opacity: 0;
            transition: all 0.5s ease 0s;
        }
        .box:hover:before{
            opacity: 1;
        }
        .box{
            text-align:left;
            position: relative;
            overflow: hidden;
            color: #fff;
        }
        .box:after{
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            left: 170%;
            top: 0;
            transform: skewX(45deg);
            transition: all 1s ease 0s;
            background-color:#3189c9;
            z-index: 1;
        }
        .box:hover:after{
            left: -170%;
            top: 0;
        }
        .box img{
            width: 100%;
            height: auto;
        }
        .box .box-content{
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            transition: all 0.5s ease 0s;
        }
        .box:hover .box-content{
            bottom: 40%;
            padding: 20px;
        }
        .box .box-content .name{
            font-size:22px;
            font-weight: 700;
            margin: 0 0 10px;
            display: block;
            text-transform:uppercase;
            letter-spacing: 1px;
        }
        .box .box-content .post{
            display: block;
            font-size: 15px;
            color:#000000;
            text-align: left !important;
            
            
        }
           .box .box-content .post a{
            display: block;
            font-size: 15px;
            color:#000000 !important;
             text-align: left !important;
            
            
        }

        
/* Zoom In #1 */
.hover01 div img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 div:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}


        @media screen and (max-width:990px){

          .box .box-content .name {
    font-size: 15px!important;
    font-weight: 700;
    margin: 0 0 10px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}
     

.box .box-content .post {
    display: block;
    font-size: 12px !important;
    color: #fff;
    text-align: left !important;
}
.box:hover .box-content {
    top: 5%;
    padding: 10px;
}


             .box .box-content{
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            transition: all 0.5s ease 0s;
        }
        }

.pulse i {
	position: relative;
	z-index: 20;
	 top: 0px;
	font-size: 20px;
	padding: 10px;
	padding-left: 4px;
}
.pulse {
  position: fixed;
  cursor: pointer;
  display: block;
  width: 40px !important;
  height: 40px;
  bottom: 100px;
  right: 20px;
  background-color: rgba(0, 200, 0, 1);
  color: white;
  border-radius: 0px;
  text-align: center;
  transition-duration: 0.5s;
  animation: pulse-btn 3s infinite;
  z-index: 10;
}

.pulse:hover {
  background-color: rgba(0, 150, 0, 1);
  color: white;
}

.my-float {
  margin-top: 15px;
}

@-webkit-keyframes pulse-btn {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1);
  }
  70% {
    -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0);
  }
}

.pulse a {
  color: #fff;
}
.sidebar-contact{
  position:fixed;
  z-index:1000 !important;
  top:59%;
  right:-350px;
  transform:translateY(-50%);
  width:350px;
  height:auto;
  padding:20px 30px;
  background:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  box-sizing:border-box;
  transition:0.5s;
}
.sidebar-contact.active{
  right:0;
}
.sidebar-contact input, .sidebar-contact textarea {
	width: 100%;
	height: 42px;
	padding: 5px;
  color: #000;
	margin-bottom: 10px;
	box-sizing: border-box;
	border: 1px solid rgba(168, 168, 168, 0.5);
	outline: none;
}
.sidebar-contact h2{
  margin:0 0 20px;
  padding:0;
  font-size: 25px;
}
.sidebar-contact textarea{
  height:60px;
  resize:none;
}
.sidebar-contact input[type="submit"]{
  background:#3189c9;
  color:#fff;
  cursor:pointer;
  border:none;
  font-size:18px;
  text-transform: uppercase;
}
.toggle {
	position: absolute;
	height: 36px;
	width: 132px;
	text-align: center;
	cursor: pointer;
	background: #3189c9;
	top: 180px;
	left: -83px;
	transform: rotate(-90deg);
	line-height: 32px;
}
.toggle:before{
  content:'Enquire Now ';

 
  font-size:18px;
  color:#fff;
 
}
.toggle.active:before{
  content:'Close';
   height: 43px;
  width: 43px;
}





@media(max-width:768px)
{
  .sidebar-contact{
    width:100%;
    height:100%;
    left:-100%;
  }
  .sidebar-contact .toggle{
    top:50%;
    transform:translateY(-50%);
    transition:0.5s;
  }
  .sidebar-contact.active .toggle
  {
    top:0;
    right:0;
    transform:translateY(0);
  }
  .scroll{
    width:100%;
    height:100%;
    overflow-y:auto;
  }
  .content{
    padding:0px 10px !important;
  }
  .footer-news .single-f-news .content {
	padding-left: 83px !important;
}

nav_line

}

.swiper-pagination {
	position: absolute;
	text-align: center;
	transition: .3s opacity;
	transform: translate3d(0,0,0);
	z-index: 7 !important;
}

/* 1. Header
/*----------------------------------------------*/
.site-header {
  z-index: 10;
 
  
}

.navbar-nav .nav-item a.nav-link {
	color: var(--accent-color);
	font-size: 14px;
	font-weight: 400;
	
}
.navbar-nav .nav-item a.nav-link.active,
.navbar-nav .nav-item a.nav-link:focus,
.navbar-nav .nav-item a.nav-link:hover {
  color: var(--bs-primary);
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--bs-secondary);
}

/*------------ Offcanvas -------------- */
#header-nav .navbar-toggler:focus {
  box-shadow: none;
}

#header-nav .offcanvas.show {
  z-index: 9999;
  background-color: var(--bs-light);
}

#header-nav .offcanvas-end {
  width: 500px;
}

.offcanvas.show .nav-item a.nav-link {
  font-size: 20px;
}

.offcanvas.show .offcanvas-body .navbar-nav {
  align-items: unset !important;
  padding-left: 20px;
}

/*------------ Top User Icons -----------*/
.site-header .user-items svg {
  cursor: pointer;
}

@media only screen and (max-width: 991px) {
  #navbar .user-items {
    display: none;
  }
}

/* 2. Billboard
/*----------------------------------------------*/
/*------------Swiper Arrow -----------*/
.banner-content p {
  width: 50%;
}

#billboard .swiper-pagination {
  left: -730px;
  bottom: 160px;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  position: relative;
  cursor: pointer;
  border-color: transparent;
  transition: border-color 0.3s ease-out;
}

.swiper-pagination .swiper-pagination-bullet::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50px;
  border: 1px solid #4a4a4a;
  transform: scale(1);
  transition: transform 0.3s ease-out;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 10px !important;
}

.swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active:after,
.swiper-pagination span.swiper-pagination-bullet:hover:after {
  transform: scale(2);
}

@media only screen and (max-width: 1200px) {
  #billboard .banner-content {
    background-color: rgba(246, 245, 242, 0.5);
    height: 100%;
  }

  .banner-content h1.display-1 {
    font-size: 4.5em;
  }

  .banner-content p {
    width: 90%;
  }

  #billboard .swiper-pagination {
    right: 0;
    bottom: 60px;
    left: 0;
  }
}

@media only screen and (max-width: 768px) {
  .nav_line {
	border-right: 1px solid #ccc;
	height: auto !important;
}

  .menu__list {
	position: inherit;
	margin-top: 5% !important;
	list-style: none;
	padding: 0;
}

  .display-1 {
    font-size: 26px;
    font-weight: 500;
    text-align: left !important;
  }


  .p-5 {
    padding: 1rem !important;
  }

  .bt-glyphicons li {
    float: left;
    width: 100% !important;
    height: auto !important;
    padding: 15px 10px 20px 10px !important;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
    border: 1px solid #fff;
    background-color: #f1f1f1;
    margin: 7px auto;
  }


  .banner-content p {
    width: 100%;
    text-justify: auto;
   
  }


  .padding-large {
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .bg_about{
    background: none !important;
    background-repeat: no-repeat; background-position:none; height: auto !important;
  }

  .banner-content h1.display-1 {
    font-size: 25px;
    
    font-weight: 500;
  }

 
}

/* 3. Icon Box - Company Services
/*----------------------------------------------*/
.icon-box-icon.pe-3.pb-3 {
  border: 1px solid var(--bs-primary);
  border-radius: 50%;
}

.icon-box .icon-box-icon svg {
  width: 2`0px;
  height: 20px;
  color: var(--bs-primary);
}

.icon-box .icon-box-content {
  width: 60%;
}

.icon-box-content h3.card-title {
  font-size: 1.5em;

}
.card-title a {
  font-size:18px;
  font-family: var(--heading-font);

}
.background{
  background-color: #fff;
  padding:0px 0px 8px 0px;
  border: solid 1px #ccc;
  border-top:none;
 
}

/* 4. Featured Product
/*----------------------------------------------*/
.product-store .swiper-horizontal>.swiper-pagination-bullets,
.product-store .swiper-pagination-bullets.swiper-pagination-horizontal,
.product-store .swiper-pagination-custom,
.product-store .swiper-pagination-fraction {
  position: relative !important;
}

/* 5. Testimonial
/*----------------------------------------------*/
















.review-item blockquote {
  font-weight: 300;
  line-height: 1.8;
}

.review-content .swiper-arrow {
  top: 50%;
  bottom: 0;
  z-index: 2;
  border: 1px solid var(--bs-gray-400);
  color: var(--accent-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  transition: 0.4s ease-in-out;
}

.review-content .swiper-arrow:hover {
  border: 1px #000 solid;
  color: var(--accent-color);
}

.review-content .swiper-arrow.swiper-arrow-prev {
  left: -80px;
}

.review-content .swiper-arrow.swiper-arrow-next {
  right: -80px;
}

.review-content .quotation svg.quote {
  color: var(--accent-color);
}

#testimonials .swiper-pagination {
  display: none;
}

@media only screen and (max-width: 901px) {
  #testimonials .swiper-pagination {
    display: block;
    bottom: 60px;
  }

  .review-content .swiper-arrow {
    display: none !important;
  }
}

/* 6. collections
/*----------------------------------------------*/

/* 7. Subscribe
/*----------------------------------------------*/
.subscribe-content input,
.subscribe-content button {
  height: 65px;
}

/* 9. Brand Collection
/*----------------------------------------------*/
#brand-collection a img {
  opacity: 0.3;
  transition: opacity 0.3s ease-out;
}
#brand-collection a:hover img {
  opacity: 1;
}

/* 10. Blog Page
/*----------------------------------------------*/
.sidebar .widget-search-bar form {
  height: 50px;
}

.sidebar .widget-search-bar form .search-field {
  width: 100%;
}

.sidebar .widget-search-bar .search-icon {
  width: 60px;
}

/* 10. Shop Page
/*----------------------------------------------*/
.product-grid .product-card .cart-concern {
  bottom: -20px;
  left: 0;
  opacity: 0;
  transition: 0.9s all;
   background:var(--background);
  border: solid 1px #ccc;
}

.product-grid .product-card:hover .cart-concern {
  bottom: 0;
  opacity: 1;
  transform: rotate(0deg);
}

/* 11. Single Product Page
/*----------------------------------------------*/
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 790px;
}

/* product-info */
.rating-container .rating svg {
  color: var(--bs-yellow);
}

.product-quantity .input-group button.btn-number {
  width: 100%;
  height: 100%;
}

/* product-tabs */
.product-tabs .nav-tabs .nav-item.show .nav-link,
.product-tabs .nav-tabs .nav-link:hover,
.product-tabs .nav-tabs .nav-link.active {
  background-color: var(--bs-primary);
  color: var(--bs-light) !important;
}

/* 12. FAQs Page
/*----------------------------------------------*/
.accordion .accordion-button::after {
  content: "";
 
  background-repeat: no-repeat;
}

.accordion .accordion-button:not(.collapsed)::after {
  content: "";
 
  transform: rotate(0deg);
}

/* 13. Blog Page
/*----------------------------------------------*/
.pagination .page-link {
  color: var(--bs-primary);
  background-color: var(--bs-light);
  border: 1px solid var(--bs-primary);
}

.pagination .page-item.active .page-link {
  color: var(--bs-light);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.pagination .page-item a.page-link {
  height: 40px;
}

.pagination .page-item a.page-link:hover,
.pagination .page-item a.page-link:focus {
  background-color: var(--bs-primary);
  color: var(--bs-light);
}

.dropdown-item {
	display: block;
	width: 100%;
	padding: 0.58rem 1rem;
	clear: both;
	font-weight: 400;
	color: #212529;
	text-align: inherit;
	text-decoration: none;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	font-size: 14px;
	border-bottom: solid 1px #f6f6f6;
	text-transform: capitalize;
}

.display-1 {
	font-size: 20px;
	font-weight:500;
  line-height: 30px;
    font-family: var(--heading-font);
    text-transform: capitalize !important;
}

.h3, h3 {
	font-size: 20px;
}
.copyright {
 text-align: center;

}




	
.bt-glyphicons {
	margin:0;
	overflow:hidden;
}
.bt-glyphicons-list {
	margin: 0;
	padding:0;
	list-style:none;
}
.bt-glyphicons  {
	
	height: 217px;
	padding: 24px 10px 3px 10px;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 400;
	text-align: center;
	border: 1px solid #fff;
	background-color: #f1f1f1;
}
.bt-glyphicons .glyphicon {
	margin: 5px;
}
.glyphicon-class{
  color: #5b5b5b;


}

	
.bt-glyphicons1 {
	margin:0;
	overflow:hidden;
}
.bt-glyphicons-list1 {
	margin: 40px auto !important;
	padding:0;
	list-style:none;
}
.bt-glyphicons1 li {
	float: left;
	width: 32.3%;
	height: 217px;
	padding: 24px 10px 3px 10px;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 400;
	text-align: center;
	border: 1px solid #fff;
	background-color: #f1f1f1;
}
.bt-glyphicons1 .glyphicon1 {
	margin: 5px;
}
.glyphicon-class1{
  color: #5b5b5b;


}



.job_conatiner_title {
	font-size: 16px;
	text-align: left;
	color: #3792d0;
  font-weight: 500;
  letter-spacing: 0.5px;

	padding-bottom: 4px;
}

.job_conatiner_for_skill {
	text-align: left;
	font-size: 14px;
	font-weight: 300;
}


.banner-area {
	padding-top:20px;
	padding-bottom:20PX;
}
.banner-area .banner-overlay {
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:url(../images/banner-overlay.png) left bottom repeat-x;
transition:all .3s ease;
	z-index:2
}
.banner-area.media_banner .banner-inside {
	background-repeat:repeat-x;
	animation:panning infinite 120s linear;
	-moz-animation:panning infinite 120s linear;
	-webkit-animation:panning infinite 120s linear;
	-ms-animation:panning infinite 120s linear;
	-o-animation:panning infinite 120s linear
}
;
 @keyframes panning {
 0% {
background-position:0
}
 100% {
background-position:400%
}
}
 @-moz-keyframes panning {
 0% {
background-position:0
}
 100% {
background-position:400%
}
}
 @-webkit-keyframes panning {
 0% {
background-position:0
}
 100% {
background-position:400%
}
}
 @-ms-keyframes panning {
 0% {
background-position:0
}
 100% {
background-position:400%
}
}
 @-o-keyframes panning {
 0% {
background-position:0
}
 100% {
background-position:400%
}
}
 @media only screen and (max-width: 1024px) {
 .banner-inside {
height:400px!important
}
}

.section-blog {
	padding: 0px 0;
}

.section-blog .header-section {
	margin-bottom: 30px;
    padding: 78px 75px 53px;
	background-color: #147de7;
    color: #fff;
    border-radius: 5px;
}

.section-blog .header-section .title-section {
	font-weight: 700;
    font-size: 40px;
}

.section-blog .header-section .nav-header li {
	position: relative;
	display: inline-block;
    font-size: 15px;
    margin-right: 15px;
}

.section-blog .header-section .nav-header li:last-child {
    margin-right: 0;
}

.section-blog .header-section .nav-header li:after {
	content: "";
    position: absolute;
    top: 20%;
    right: -10px;
    width: 1px;
    height: 60%;
    background-color: #fff;
}

.section-blog .header-section .nav-header li:last-child:after {
	display: none;
}

.section-blog .single-post {
	position: relative;
    margin-bottom: 100px;
}

.section-blog .single-post img {
	width: 100%;
	border-radius: 5px;
}

.section-blog .single-post .infos {
	position: absolute;
    bottom: 0;
    left: 25px;
    right: 25px;
    display: inline-block;
    padding: 22px 29px 24px;
    background-color: #fff;
    transform: translateY(50%);
    box-shadow: 0 0px 15px 0 rgba(0,0,0,.1);
    z-index: 2;
}

.section-blog .single-post .infos .title-post {
	line-height: 0.75em;
}

.section-blog .single-post .infos .title-post a {
	text-decoration: none;
	color: #404752;
    font-size: 16px;
    font-weight: 600;
}

.section-blog .single-post .infos .by-and-date {
	margin-bottom: 0;
}

.section-blog .single-post .infos .by-and-date li {
	position: relative;
    display: inline-block;
    margin-right: 15px;
    font-size: 12px;
}

.section-blog .single-post .infos .by-and-date li a {
    text-decoration: none;
    color: #404752;
}

.section-blog .single-post .infos .by-and-date li:after {
	content: "";
    position: absolute;
    top: 20%;
    right: -10px;
    width: 1px;
    height: 60%;
    background-color: #87c3ff;
}

.section-blog .single-post .infos .by-and-date li:last-child:after {
	display: none;
}

.section-blog .pagination {
	margin-top: 130px;
}

.section-blog .pagination ul li {
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: #f9f9f9;

	box-shadow: 0 3px 5px 0 rgba(0,0,0,.1);
	font-weight: 600;
	font-size: 15px;
	transition: background-color .3s, color .3s;
	font-weight: 500;
}

.section-blog .pagination ul li:hover {
	background-color: #147de7;
	color: #fff;
	box-shadow: none;
}

.section-blog .pagination ul li a {
	display: inline-block;
    padding: 5px 10px;
	text-decoration: none;
	color: inherit;
}

@media (max-width: 575.99px) {
	.section-blog .pagination ul li {
		margin-right: 10px;
		font-size: 16px;
	}

	.section-blog .pagination ul li a {
		padding: 10px 15px;
	}
}
.card-text:last-child {
	margin-top: 20px;
}
.text-muted {
	--bs-text-opacity: 1;
	color: #6c757d !important;
	margin-bottom: 10px;
}
.card-title {
	margin-bottom: .5rem;
  text-transform: capitalize !important;
}

.list-group-item-light.list-group-item-action:focus, .list-group-item-light.list-group-item-action {
	color: #000 !important;
  font-size: 15px !important;
	
}
.card-header {
	padding: .5rem 1rem;
	margin-bottom: 0;
	background-color: rgba(0,0,0,.03);
	border-bottom: 1px solid rgba(0,0,0,.125);
	font-size: 20px;
	font-weight: 500;
}

.carousel {
  width: 100%;
}

.slide-box {
  display: flex;
  justify-content: space-between;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .slide-box img {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .slide-box img {
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

@media (min-width: 992px)
{
  .slide-box img {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
}



.card {
  overflow: hidden;
  
  background: radial-gradient(
    circle,
    rgba(, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  .card-img {
    height: 20rem;
  }
  .card-img-container img {
    object-fit: cover;
    object-position: center;
    max-height: 100%;
    height: 20rem;
  }
  .card-img-overlay {
    color: #000;
    font-weight: bold;
   
  }
}

/* small and extra-small screens */
@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
    display: none;
    &:first-child {
      display: block;
    }
    .card-img-container img {
      max-width: 100%;
    }
  }
}

/* medium and up screens */
@media (min-width: 768px) {
  .carousel-inner {
    .carousel-item-end.active,
    .carousel-item-next {
      transform: translateX(25%);
    }
    .carousel-item-start.active,
    .carousel-item-prev {
      transform: translateX(-25%);
    }
    .carousel-item.active,
    .carousel-item-next,
    .carousel-item-prev {
      display: inline-block;
    }
    .carousel-item-end,
    .carousel-item-start {
      transform: translateX(0);
    }
  }
  .card-img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    img {
      display: inline-block;
      max-height: 100%;
      margin: 0 -50%;
    }
  }
}


.logo-slider {
    overflow: hidden;
    padding: 30px 0 0 0;
    white-space: nowrap;
    position: relative;
}

.logo-slider:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 45s slide infinite linear;
}

.logos-slide img {
    width: 183px;
    height: auto;
    margin: 0 30px;
    padding:30px 10px;
}

.logos-slide img:hover{
  background-color:#49acf4;
 padding:30px 10px;
  border-radius: 20px;
}


@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}



video {
    position: absolute;
    width: 100%;
    height: 150vh;
    object-fit: cover;
}
.video {
    position: absolute;
    width: 100%;
    height: AUTO;
    object-fit: cover;
}


.cover-container {
  position: relative;
  width: 100%;
  height:260px;

  &:hover .play-button {
    filter: drop-shadow(1px 1px 80px hsla(206.5, 0%, 10%, 50%));
    transform: scale(0.8);
    cursor: pointer;
  }
}

.cover {
  cursor: pointer;
  position: absolute;
}

.play-button {
  width: 80px;
  position: absolute;
  left: 0;
  right: 0;
  transition: all 250ms ease-in-out;
}

.cover,
.play-button {
  top: 0;
  bottom: 0;
  margin: auto;
}












.home-content {
    position: relative;
    padding-top: 150px;
    color: #fff;
      height: 150vh;
    background:rgba(0, 0, 0, 0.4) ;
    text-align: center;
}
h1 {
	font-size: clamp(30px, 4.3vw, 70px);
	line-height: auto;

	font-weight: 900;
  text-transform: inherit;
}
.home p {
    font-size: clamp(25px, 4vw, 40px);
    margin-top: 10px;
}


.home-content button {
    display: block;
    font-size: clamp(14px, 1.5vw, 18px);
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    background: transparent;
    color: #fff;
    margin: 50px auto 0;
    padding: 12px 20px;
    cursor: pointer;
}

@media (max-width: 767px) {
.home-content {
	 position: relative; 
	padding-top: 0px; 
	color: #fff;
	 height: auto !important;
	background: #fff;
	text-align: center;
}

video {
	position: inherit !important;
	width: 100%;
	height: auto;
	object-fit: cover;
	margin-top:38px !important;
}

}
textarea.form-control {
	/* min-height: calc(1.5em + .75rem + 2px); */
	height: 104px;
	border-radius: 0 !important;
}


.btn.btn-black {
	background-color: var(--bs-dark);
	color: var(--bs-light);
	border: none;
	padding: 19px;
 border-radius: 0 !important;
}



.form-control {
	display: block;
	width: 100%;
	padding: .675rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0 !important;

	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}




.twitter {
  font: normal normal 10px Arial;
  text-align: center;
  color: #998578;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.twitter {
  color: #72898b;
  text-decoration: none;
  display: block;
  padding: 14px;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.twitter:hover {
  color: #FF7D6D;
  text-decoration: none;
}



/* Floating Social Media Bar Style Starts Here */

.fl-fl {
  background: #3189c9;
  text-transform: uppercase;
  letter-spacing: 3px;
  
  width: 190px;
  position: fixed;
  left:-157px;
  z-index: 1000;
  font: normal normal 10px Arial;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

.fa {
	font-size: 20px;
	color: #fff;
	padding: 0px 0;
	width: 34px;
	margin-right: -8px;
	margin-bottom: 0px;
}

.fa.fa-map-marker {
	color: var(--background);
	margin-bottom: 40px;
}

.fl-fl:hover {
  left: 0;
}

.fl-fl a {
  color: #fff !important;
  text-decoration: none;
  text-align: center;
  float: left;
  padding-left: 5px;
  line-height: 43px!important;
  vertical-align: top!important;
}

.fl-fl i {
	float: right !important;
	font-size: 20px;
	padding: 13px 0px;
}

.float-fb {
  top: 300px;
  
}

.float-tw {
  top: 350px;
}

.float-gp {
  top: 400px;
}

.float-ig {
 top:450px;
}
.float-rs {
  top: 370px;
}

/* Floating Social Media Bar Style Ends Here */


.widget, address {
	margin: 0 0 1.5em;
}

.single-f-news {
	position: relative;
	background: 0 0;
	box-shadow: none;
	margin-top: 18px;
	margin-bottom: 30px;
}

.single-f-news img {
	height: 70px;
	width: 70px;
	display: block;
	position: absolute;
	/* background: #fff; */
	left: 0;
	top: 0;
	margin-top: 4px;
	padding: 3px;
	border-radius: 34px;
	border: solid 4px #fff;
}



/* CSS for section section:cta */
.cta-section {
  position: relative;
  
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 64.11%), url('../images/footer.jpg') ;
  background-size: cover;
  background-position: top;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  color: var(--color-white);
  padding: 20px;
}
.cta-content {
  position: relative;
  z-index: 2;
  max-width: 810px;
  padding-top: 200px;
}
.cta-content h2 {
   
    font-weight: 700;
    font-size: 69px;
    line-height: 74px;
    letter-spacing: -2px;
    margin-bottom: 23px;
    text-align: center;
    color: #fff;
    text-shadow: 0px 0px 2px #000;
}
.cta-content p {
  
  font-size: 20px;
  line-height: 28px;
  max-width: 750px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}
.cta-logo-overlay {
  position: absolute;
  margin: auto !;
    
    top: 472px;
    left:50%;
    
    transform: translateX(-50%);
    width: 1034px;
    height: 330px;
    z-index: 0;
    mask-image: linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, rgba(0, 0, 0, 0) 75.67%);
    -webkit-mask-image: linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, rgba(0, 0, 0, 0) 75.67%);
}
.cta-logo-overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .cta-section { height: auto; padding: 80px 20px; }
  .cta-content h2 { font-size: 40px; line-height: 1.2; }
  .cta-content p { font-size: 18px; }
  .cta-logo-overlay { display: none; }
}





.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content .container {
  position: relative;
}

.hero-title {
  color: #fff;
  font-weight: 700;
  font-size: 90px;
  line-height: 95px;
  letter-spacing: 0.5px;
  margin-top: 150px;
  text-shadow: 0px 1px 0px #333;
}

.hero-breadcrumb {
  
  font-weight: 600;
  font-size: 25px;
  text-shadow: 0px 1px 0px #333;
  line-height: 20px;
  margin-top: 153px; /* Overlap with title */
}

.hero-subtitle {
    font-weight: 400;
    font-size: 17px;
    line-height: auto;
    max-width: 353px;
    position: absolute;
    right: 0px;
    text-shadow: 0px 1px 0px #333;
    top: 360px;
    color: #fff;
}

@media (max-width: 1024px) {

  .stat-plus_class {
	font-size: 58px !important;
}


  .main-nav { display: none; } /* Simple hide for demo */
  .header-container { justify-content: space-between; padding: 8px 20px; }
  .hero-title { font-size: 70px; }
  .hero-subtitle { position:inherit; max-width: 100%; margin-top: 20px; display: none; }
}

@media (max-width: 768px) {
  .hero-content {
	position: absolute;
	z-index: 1;
	top: 2%;
}
  .hero-section { height: auto; padding: 100px 0 60px; }
  .main-header { top: 20px; }
  .hero-title { font-size: 50px; line-height: 1.1; margin-top: 0; width: 100% ! important; }
  .hero-breadcrumb { font-size: 18px; margin-top: 10px; }
  .hero-subtitle { font-size: 18px; line-height: 1.5;  display: none;}
}




footer{
	background:url(../images/map.png) rgba(60, 152, 212, 0.9) no-repeat;

padding: 20px 0px;
z-index: 10 !important;
border-radius: 30px;
margin-top: 230px;

}

.widget-title {
	color: #fff;
	font-size: 16px;
  font-weight: 600 !important;
  
}
footer p{
  color:#fff;



}


.menu-list {
	padding-left: 0;
	list-style:url(../images/icon.png) inside ;
	
	color: antiquewhite;
}

footer a {
	color: #fff;
	font-size: 14px;
	text-transform: capitalize;
	font-weight: 400;
}

.footer-news .single-f-news .content {
	padding-left: 83px;
 
}

.single-f-news .post-meta {
	margin-top: 5px;
	font-size: 13px;
	margin: 5px 0px;
}

.boxed-layout p {
	text-align: left;
}

.footer p {
	color: #ccc;
	font-size: 10px;
  text-align:justify;
}

.post-date a {
	color: #fff;
}

.blog-detail .news-meta li i, .single-f-news .post-meta i {
	color: #000;
	margin-right: 5px;
}

.footer-news .single-f-news .content .title {
	font-size: 12px;
	color: #ffffff;
	font-weight: 300 !important;
	font-family: "Poppins", sans-serif;
	letter-spacing: 0.5px;
	text-align: justify;
}

.single-f-news .title {
	font-size: 16px;

	
	line-height:18px;
}

.menu-text{
  font-size:13px;
  color: #000;
  text-transform: lowercase !important;

}
.nav_line{
border-right:1px solid #ccc; height:100vh;

}
.container1 {
  display: flex;
 
  z-index: 5;
}
.container__open .menu {
  display: block;
  background: #f3f3f3;
}

.container__open .toggle__span:nth-child(1) {
  top: 18px;
  transform: rotate(45deg);
}
.container__open .toggle__span:nth-child(2) {
  background-color: transparent;
}
.container__open .toggle__span:nth-child(3) {
  top: 18px;
  transform: rotate(-45deg);
}

.container__open .flex-box:nth-child(2) {
  flex: 0 0 0;
}

.flex-box { background-color: #fff;
 
  flex: 0 1 50%;
  transition: 0.5s all ease-in-out;
  position: relative;
  z-index: 15;
}

.flex-box:nth-child(2) {
   background-color: #fff;
  /* flex: 1 0 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 56px;
  color: #fff;
  font-weight: 700;
  z-index: 1;
}

.container1:hover.flex-box:nth-child(2) {
  flex: 0 0 0;
}

.menu {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0%;
  height: 100vh;
  color: #fff;
  transform: translatex(100%);
  background-color: transparent;
  animation: 0.4s slideDown 0.25s forwards;
  z-index: 100;
  -webkit-backface-visibility: hidden;
}
.menu__list {
  position:inherit;
 margin-top:30%;
 list-style: none;
 padding: 0;
}
@media only screen and (max-width: 880px) {
  .menu__list {
    flex-direction: column;
  }
}
.menu__item {
	font-size: 15px;
	padding: 7px 5px;
	margin: 0 1rem;
	text-align: left;
	background: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
	background-size: 240%;
	transition: 0.3s all ease-in-out;
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
	color: #000000 !important;
	-webkit-backface-visibility: hidden;
}
.menu__item a {
  color: #000;
}
.menu__item:hover {
  background-position: 99%;
  color: #3189c9;
}
.menu__item::before{
  position: relative;
content: url(../images/arrow.png);
margin-right: 10px;

}
@media only screen and (max-width: 1250px) {
  .menu__item {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1000px) {
  .menu__item {
    font-size: 17px;
  }
}

.hover-box {
  background-color: #fff;
  
  display: none;
  animation: 0.6s fadeIn ease-in-out;
  position: absolute;
  color: #000;
  top: 100%;
  width:250px;
  left: 0;
  border-top: 1px solid #90d1ff;
  backface-visibility: none;
}
.hover-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.hover-box__item {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: left;
  font-size: 14px;
  padding: 8px 12px;
  border-bottom: 1px solid #cbe9ff;
  transition: 0.2s;
  box-sizing: border-box;
  backface-visibility: none;
}
.hover-box__item:hover {
  background-color: #f5f5f5;
}
@media only screen and (max-width: 880px) {

  .padding-top-mobile{
    margin-top: 60px !important;
  }


  .container__open .menu {
	display: block;
	background: #f3f3f3;
	overflow-x: scroll !important;
  z-index: 10;
}



  .nav_line{
border-right:1px solid #ccc; height:auto !important;

}
  .navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding-top: .3rem;
	padding-bottom: .3rem;
	background: #484848;
}

  .toggle1 {
	cursor: pointer;
	position: fixed;
	top: 20px;
	left: 1rem!important;
	padding: 5px 9px !important;
	z-index: 10000;
	background: #3189c9;
	border-radius: 30px;
}
  .hover-box {
    display: block;
    position: relative;
    width: auto;
    border-top: 2px solid #004d40;
  }
  .hover-box__list {
    flex-direction: row;
  }
  .hide{ display: none;}
}

@media only screen and (min-width: 880px) {
  .hide1{
display: none;

  }

}



.toggle1 {
	cursor: pointer;
	position: inherit;
	top: 20px;
	left: 3rem;
  padding: 5px 15px;
	z-index: 10000; background:#ffffff;
  border-radius: 30px;
	
}
.toggle__span {
	height: 2px;
	width: 20px;
	background-color: #358ece;
	position: absolute;
	transition: 0.4s;
	margin-top: 16px;
}
.toggle__span:nth-child(1) {
  top: 12px;
}
.toggle__span:nth-child(2) {
  top: 17px;
}
.toggle__span:nth-child(3) {
  top: 22px;
}

@keyframes slideDown {
  from {
    transform: translatex(-100%);
  }
  to {
    transform: translatex(0);
  }
} 


.wow:first-child {
      visibility: hidden;
    }

    .social-icons-btn {
  display: flex;
  margin-left: 0px;
}
.icons {
	width: 33px;
	height: 32px;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	background: #3189c9;
	margin: 10px 0.2rem;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0%;
	box-shadow: 0 2px 2px #d1d1d1;
	color: #fff;
	cursor: pointer;
	transition: all 0.15s ease;
}
.twitter:hover {
  background: #070707;
}
.facebook:hover {
  background: #4267B2;
}
.instagram:hover {
  background-image: 
    linear-gradient(
    #8a3ab9,
    #e95950, 
    #bc2a8d, 
    #fccc63
    );
}
.linkedin:hover {
  background: #0A66C2;
}
.nav-text{
font-size: 14.6px; color:#000; text-transform: capitalize;

}
.nav-text i{
font-size:15px; color:#0A66C2; text-transform: capitalize;

}
 .fa-map-marker{
 font-size: 18px !important; 
}
.top-links{
  color: #ffffff !important; font-size:16px; font-weight:500;
}
.about-img{
  border-radius: 15px;


}








.accordion-body ul li a {
  font-family: "Poppins", sans-serif;
 
  font-weight: 700;
}
.faq-section .accordion {
  width: 100%;
}

.accordion-button:not(.collapsed) {
  /* background-color: #c5e5d8;*/
  background-color: var(--secondary-text);
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
  transform: none;
}

.accordion-button:focus {
  box-shadow: none;
   background-image: none;
}

.accordion-button:before {
  content: "";
  position: absolute;
  /*   right: 0.75rem; */
  right: 0.75rem;
  top: 2.25rem;
  height: 2px;
  width: 1rem;
   background-color:#000;
}
.accordion-button.collapsed:after {
  content: "";
  position: absolute;
  /*   right: 1.1875rem; */
  right: 1.1875rem;
  top: 1.8125rem;
  height: 1.0625rem;
  width: 0.125rem;
  border-style: none;
  background-color:#000;
}

.accordion-flush .accordion-item {
	border-right: 0;
	border-left: 0;
	border-radius: 14px;
	/* box-shadow: 0px 0px 5px #ccc; */
	margin: 20px auto;
	padding: 0px 0px 0px 0px;
	border: 1px solid #dddada;
}

.faq-section .accordion-button h5 {
   color: #000 ! important;
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   margin-top: 10px;
 
  
  margin-right: 13px;
}
.accordion-body {
  background-color: var(--secondary-text);
}

.accordion-flush .accordion-item .accordion-button {
	border-radius: 20px;
}
.accordion-flush .accordion-item:last-child {
	border-bottom: solid 1px #dddada;
}

.accordion-item:last-of-type .accordion-button.collapsed {
	border-bottom-right-radius:20px;
	border-bottom-left-radius: 20px;
}



header {
  position: absolute;
  top: 30px;
  background-color:#00000005;
  width: 90%;
  backdrop-filter: blur(60px);
  border:  solid 1px #acacac;
  z-index: 1000;
  left: 0;
  right: 0;
  border-radius:50px;
  margin:auto !important;
  padding: 7px;
}


.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(30, 130, 95, 0.5);
}

.container {
  
  margin: 0 auto;
  display: flex;
  position: relative;
}

.logo-container {
  flex:0;
  display: flex;
  align-items: center;
}

.nav-btn {
  flex: 3;
  display: flex;
}

.nav-links {
  flex: 2;
}

.log-sign {
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.logo {
  color: var(--clr-light);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 3rem;
}

.logo span {
  font-weight: 300;
}

.btn {
  display: inline-block;
  padding: 13px 10px;
  font-size: .8rem;
  border: 2px solid #3c9ddd;
  border-radius: 2rem;
  line-height: 1;
  margin: 0 .2rem;
  font-weight: 600;
  color: var(--bs-light) !important;
  transition: .3s;
  background: #3c9ddd !important;
  text-transform: uppercase;
}

.btn.solid,
.btn.transparent:hover {
  background-color: var(--clr-light);
  color: var(--clr-btn);
}

.btn.transparent,
.btn.solid:hover {
  background-color: transparent;
  color: var(--clr-light);
}

.nav-links > ul {
	display: flex;
	justify-content: left;
	align-items: left;
	border-left: solid 1px #6a6a6a;
	margin-top: 20px;
	/* padding: 10px 1px; */
	margin-left: 15px;
}

.nav-link {
  position: relative;
}

.nav-link > a {
  line-height: 15px;
  color: var(--clr-light);
  padding:0px;
  letter-spacing:0.3px;
  font-size:15px;
  font-weight: 500;;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .5s;
}

.nav-link > a > i {
  margin-left: .2rem;
}

.nav-link:hover > a {
  transform: scale(1.1);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 10rem;
  transform: translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: .5s;
}

.dropdown ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dropdown-link > a {
  display: flex;
  background-color: var(--clr-light);
  color: var(--clr-dropdown);
  padding: .5rem 1rem;
  font-size: .9rem;
  align-items: center;
  justify-content: space-between;
  transition: .3s;
}

.dropdown-link:hover > a {
  background-color:var(--clr-bg-header);
  color: var(--clr-light);
}

.dropdown-link:not(:nth-last-child(2)) {
  border-bottom: 1px solid var(--clr-light);
}

.dropdown-link i {
  transform: rotate(-90deg);
}

.arrow {
  position: absolute;
  width: 11px;
  height: 11px;
  top: -5.5px;
  left: 55px;
  background-color: var(--clr-light);
  transform: rotate(45deg);
  cursor: pointer;
  transition: .3s;
  z-index: -1;
}

.dropdown-link:first-child:hover ~ .arrow {
  background-color: var(--clr-dropdown);
}

.dropdown-link {
  position: relative;
}

.dropdown.second {
  top: 0;
  left: 100%;
  padding-left: .8rem;
  cursor: pointer;
  transform: translateX(10px);
}

.dropdown.second .arrow {
  top: 10px;
  left: -18.5px;
}

.nav-link:hover > .dropdown,
.dropdown-link:hover>.dropdown {
  transform: translate(0, 0);
  opacity: 1;
  pointer-events: auto;
}

.hamburger-menu-container {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: flex-end;
}

.hamburger-menu {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hamburger-menu div {
  width: 1.6rem;
  height: 3px;
  border-radius: 3px;
  background-color:#c4c4c4;
  position: relative;
  z-index: 1001;
  transition: .5s;
}

.hamburger-menu div:before,
.hamburger-menu div:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  background-color:#c4c4c4;
  border-radius: 3px;
  transition: .5s;
}

.hamburger-menu div:before {
  transform: translateY(-7px);
}

.hamburger-menu div:after {
  transform: translateY(7px);
}

#check {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  z-index: 90000;
  cursor: pointer;
  opacity: 0;
  display: none;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div {
  background-color: transparent;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
  transform: translateY(0) rotate(-45deg);
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
  transform: translateY(0) rotate(45deg);
}

@keyframes animation {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}



  .our_fearture{

text-align: center; margin: 
20px 0px; font-size: 60px; font-weight: 900; color: #fff !important;

}




 
/* About us CSS for section section:stats */
.stats-section {
  padding-bottom: 175px;
}
.stats-wrapper {
  position: relative;
 background:url(../images/about.jpg) no-repeat; background-size: cover; padding: 50px 0px 30px 0px;


 

height:640px;
  
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}







.stats-bg-image {
  width: 100%;
  height: auto;
  border-radius: 30px;
  display: block;
}
.stats-cards {
  position: absolute;
  bottom:10px;
  right: 10px;
 
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.stat-card {
    background-color: #f5f5f5;
    border-radius: 25px;
    padding: 110px 10px 20px 20px;
    position: relative;
}
.stat-icon {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
}
.stat-number {
 
  font-weight: 700;
 
  display: flex;
  align-items: baseline;
}
.stat-plus {
    font-weight: 700;
    font-size: 42px;
    color: var(--primary);
    padding-top: 33px;
}
.stat-label {
  font-family: var(--font-inter);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-gray);
  margin-top: 11px;
  width: 100%;
  clear: both;
}
.stat-plus_class{

  font-size:70px;
}
.card-1 .stat-number { font-size: 56px; line-height: 56px; }
.card-2 .stat-number { font-size: 64px; line-height: 56px; }
.card-2 .stat-unit { font-size: 40px;  padding-top: 37px; font-weight: 600; margin-left: 4px; }
.card-3 .stat-number { font-size: 70px; line-height: 56px; }
.card-3 .stat-unit-b {  font-size: 50px;  padding-top: 25px; font-weight: 600; margin-left: 4px; }

@media (max-width: 1024px) {
  .stats-cards {
    position: static;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
  }
.col-6 {
	flex: 0 0 auto;
	 width: 100% !important;
}

  .stat-card {
	flex: 0 100%;
	margin: auto 20px;
}
  /* .stat-card { flex: 1 1 300px; } */



}
@media (max-width: 768px) {

  .card-3 .stat-unit-b {
	font-size: 47px;
	padding-top: 15px;
	font-weight: 600;
	margin-left: 4px;
}

  .card-2 .stat-unit {
	font-size: 35px;
	padding-top: 21px;
	font-weight: 600;
	margin-left: 4px;
}
  .stats-section { padding-bottom: 60px; }
  .stats-cards { flex-direction: column; }
}




/* about  Container for the overall layout */
.custom-container {
    max-width: 1400px; /* Max width for the whole section */
    height: 650px; /* Fixed height for desktop to mimic the image proportions */
    background:url(../images/about.jpg) no-repeat; background-size: cover; padding: 50px 0px 30px 0px;
    border-radius: 20px;
   
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* --- Main Image Area (Left) --- */
.main-image-area {
    /* Set the background image and its styling */
    background-image: url('html.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height: 100%; /* Take full height of the parent row */
    position: relative;
    border-radius: 20px 0 0 20px; /* Rounded corners on the left */
}

/* Overlay for the curved top-left corner */
.main-image-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60px; /* Size of the cutout/curve */
    height: 60px;
    background-color: #fff; /* Match the body/container background */
    border-radius: 0 0 100% 0; /* Creates the curve/cutout shape */
}


/* --- Data Boxes Area (Right) --- */
.data-boxes-area {
    padding: 10px;
    background-color: transparent; /* Data boxes are transparent on the right, floating over a potential lighter background */
    height: 100%;
    display: flex;
    align-items: center; /* Vertically center the boxes */
}

.data-boxes-area .row {
    width: 100%; /* Ensure the row takes full width */
}

/* Individual Data Box Styling */
.data-box-col {
    /* Use position relative for positioning child elements (like the box itself) */
    position: relative;
}

.data-box {
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: left;
    height: 100%; /* Ensure all boxes in a row/col are the same height */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.data-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #333;
    line-height: 1.1;
    margin-bottom: 0;
}

.data-unit {
    font-size: 1.5rem;
    font-weight: 500;
}

.plus {
    font-size: 2.5rem;
    color: #007bff; /* A blue color for the plus sign */
    font-weight: 300;
}

.data-description {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0;
    text-transform: lowercase; /* Matches the visual style of the image */
}

.icon-top-right {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: #adb5bd; /* Default icon color */
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 5px;
}

/* Custom position and size for box 1 to match the image */
.box-1 {
    /* This box is wider than the others in the image, so we'll manipulate its grid positioning slightly on desktop */
    z-index: 10; /* Bring this box slightly forward if needed */
}



/* Icon specific colors/shapes */
.icon-blue-slant {
    color: #fff;
    background-color: #007bff; /* Blue for the ruler icon */
    transform: rotate(45deg); /* Slant the background slightly */
    padding: 10px 15px; /* Adjust padding for the slant effect */
}

.icon-check {
    background-color: #28a745; /* Green for the check/gear icon */
    color: #fff;
    border-radius: 50%; /* Make it circular */
}

/* -------------------------------------- */
/* RESPONSIVENESS (for smaller screens) */
/* -------------------------------------- */

/* Tablet and below */
@media (max-width: 991.98px) {
    .custom-container {
        height: auto; /* Allow height to adjust for content */
        border-radius: 10px;
    }

    .main-image-area {
        height: 250px; /* Smaller fixed height for the image area on mobile/tablet */
        border-radius: 10px 10px 0 0; /* Adjust border radius */
    }

    .main-image-area::before {
        content: none; /* Remove the curved overlay on mobile */
    }

    .data-boxes-area {
        padding: 15px;
        /* The boxes will naturally stack due to Bootstrap's grid resetting on mobile */
    }

    .data-number {
        font-size: 2.5rem; /* Smaller font on mobile */
    }
}










/* --- Top Elements (Number and Pattern) --- */
.box-number {
    position: absolute;
    top: 40px;
    left: 30px;
    
    width: 85%;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid  #fff;
    color: rgba(255, 255, 255, 0.7);
    z-index: 2;
}

.bis {
    position: absolute;
    margin: 0;
    right:0;
    bottom:0;
    vertical-align: text-top;
    font-weight: bold;
    float: right;
    color: #FFF;
    text-align: center;
    padding: 44px 45PX;
    background:url(../images/shape.png) no-repeat;
}

.bis2 {
    position: absolute;
    margin: 0;
    right: 0px;
    top: -6px;
    vertical-align: text-top;
    font-weight: bold;
    float: right;
    color: #FFF;
    text-align: center;
    padding: 46px 46PX;
    background: url(../images/shape1.png) no-repeat;
}


.box-pattern-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px; 
    height: 150px;
    opacity: 0.2; /* Light opacity for image boxes */
    z-index: 1;
    /* Using an inline SVG for the arrow pattern for accuracy and simplicity */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="arrows" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M0 25L12.5 12.5L25 25M0 0L12.5 12.5L25 0" stroke="white" stroke-width="3" fill="none"/></pattern></defs><rect width="100%" height="100%" fill="url(#arrows)"/></svg>') no-repeat right top / cover;
}

/* Pattern style for the middle (blue) box - slightly different color/opacity */
.service-box-2 .box-pattern-top {
    opacity: 0.4; 
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="arrows-blue" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M0 25L12.5 12.5L25 25M0 0L12.5 12.5L25 0" stroke="white" stroke-width="3" fill="none"/></pattern></defs><rect width="100%" height="100%" fill="url(#arrows-blue)"/></svg>') no-repeat right top / cover;
}

/* --- Content and Link Styling --- */
.box-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.1;
    z-index: 2;
}

.box-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
}

.box-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 3px;
    z-index: 2;
    /* Underline animation effect */
    transition: color 0.3s ease;
}

.box-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: transform 0.3s ease;
}

.box-link:hover::after {
    transform: scaleX(1);
}

/* --- Arrow Icon and Hover Effect --- */
.box-icon-container {
    position: absolute;
    bottom: 3px;
    right: 2px;
    background-color: #2196F3;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 3;
}
.box-icon {
    color: #fff;
    font-size: 1.2rem;
    /* Rotate the Font Awesome arrow to match the design */
    transform: rotate(-45deg); 
    transition: transform 0.3s ease-in-out; /* Smooth transition for arrow movement */
}







/* --- Content and Link Styling --- */
.box-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.1;
    z-index: 2;
}

.box-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
}

.box-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 3px;
    z-index: 2;
}



.box-icon {
    color: #fff;
    
    
    
    transform: rotate(35deg); /* Rotates the right arrow to match the design */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

/* THE HOVER EFFECT: Move the icon *UPWORDS* */
.service-box:hover .box-icon {
    /* Moves the icon 5px up the Y-axis while keeping its rotation */
  
      color: #fff;
      background-color: #000000 ;
    width: 46px;
    height: 46px;
        border-radius: 50%;
        
}













/* THE HOVER EFFECT: Move the icon *UPWORDS* */
.service-box:hover .box-icon {
    /* Apply a Y-axis translation (vertical movement) to the arrow icon */
    transform: translateY(-5px) rotate(-45deg); 
}

/* --- Responsiveness (Rethinking layout for smaller screens) --- */
@media (max-width: 991.98px) {
    .service-box {
        min-height: 400px;
    }
    .box-title {
        font-size: 2rem;
    }
    .box-pattern-top {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 575.98px) {
    .service-box {
        padding: 20px 20px 80px 20px;
    }
    .box-title {
        font-size: 1.8rem;
    }
}

















/* --- Service Box Styling --- */
.service-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Matching the rounded corners */
    padding: 30px 30px 100px 30px; 
    min-height: 500px; /* Ensure uniform height */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to the bottom */
    color: #fff; 
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-box:hover {
    transform: translateY(-5px); /* Subtle lift on hover */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     cursor: pointer;
}

/* Backgrounds for each box */
/* NOTE: Use your actual image files, or keep the placeholder names */
.service-box-1 {
    /* Crane image with dark gray overlay */
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75)), url(../images/real.png); 
    background-color: #6c757d; /* Fallback grey */
}

.service-box-2 {
    /* Solid blue background with a subtle gradient/image */
    background-color: #2196F3;
    background-image: url(../images/bg-img.png);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
   /*  background-blend-mode: multiply; Blends image with solid color */
}

.service-box-3 {
    /* Hands image with dark gray overlay */
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.75)), url(../images/Foundation-img.png); 
    background-color: #6c757d; /* Fallback grey */
}


/* --- Top Elements (Number and Pattern) --- */
.box-number {
    position: absolute;
    top: 30px;
    left: 30px;
    font-size:13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    z-index: 2;
}

.box-pattern-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px; 
    height: 150px;
    opacity: 0.2; 
    z-index: 1;
    /* Inline SVG for the repeating arrow pattern */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="arrows" width="25" height="25" patternUnits="userSpaceOnUse"><path d="M0 25L12.5 12.5L25 25M0 0L12.5 12.5L25 0" stroke="white" stroke-width="3" fill="none"/></pattern></defs><rect width="100%" height="100%" fill="url(#arrows)"/></svg>') no-repeat right top / cover;
}

/* Pattern style for the middle (blue) box - slightly different opacity */
.service-box-2 .box-pattern-top {
    opacity: 0.4; 
}

/* --- Content and Link Styling --- */
.box-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.1;
    z-index: 2;
}

.box-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
}

.box-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    position: relative;
    padding-bottom: 3px;
    z-index: 2;
}


/* --- Arrow Icon and Hover Effect --- */
.box-icon-container i {
    position: absolute;
    
    
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    z-index: 3;
}




.box-icon {
    color: #fff;
    font-size: 1.2rem;
    transform: rotate(35deg); /* Rotates the right arrow to match the design */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

/* THE HOVER EFFECT: Move the icon *UPWORDS* */
.service-box:hover .box-icon {

   cursor: pointer;
    /* Moves the icon 5px up the Y-axis while keeping its rotation */
    transform: translateY(0px) rotate(35deg); 
      color: #fff;
      background-color: #000000 ;
    width: 46px;
    height: 46px;
        border-radius: 50%;
        border: solid 1px  #000000 ;
}

/* --- Responsiveness --- */
@media (max-width: 991.98px) {
    .service-box {
        min-height: 400px;
    }
    .box-title {
        font-size: 2rem;
    }
    .box-pattern-top {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 575.98px) {
    .service-box {
        padding: 20px 20px 80px 20px;
    }
}





/* CSS for section section:team */
.team-section {
 
}
.team-grid {
  display: grid;
  grid-template-columns: 400px 2fr;
  gap:40px;
  align-items: center;
}
.team-info .tag-container { margin-bottom: 138px; }
.team-description {
  font-family: var(--font-poppins);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-dark);
  margin-bottom: 42px;
}
.team-description strong { font-weight: 500; }
.explore-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #cccccc;
  border-radius: 40px;
  padding: 6px 9px 6px 16px;
}
.explore-button span {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-size: 17.6px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.arrow-circle {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.arrow-circle img { width: 19px; height: 30px; }
.team-members { position: relative; }
.team-title {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 66px;
  line-height: 74px;
  letter-spacing: -2px;
  text-align: right;
  max-width: 691px;
  margin-left: auto;
  margin-bottom: 25px;
}
.members-container {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}
.member-card {
  position: relative;
  width: 352px;
  height: auto;
 
  
}
.member-photo {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}
.member-overlay {
    position: absolute;
    bottom: -41px;
    left: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    backdrop-filter: blur(18px);
    padding: 20px 0px ;
    text-align: center;
    color: var(--color-white);
}
.member-title {
    
    font-weight: 400;
    font-size: 13px;
    color: #fff;
    line-height: 12px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.member-name {
  color: #fff;
  
  font-weight: 700;
  font-size: 25px;
  line-height: 20px;
  margin-top: 0px;
}


.box-container {
    position: absolute;
    top: 11px;
    right: 6px;
    background-color: #2196F3;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 3;
}


/* --- Arrow Icon and Hover Effect --- */
.member-card .box-container i {
    position: absolute;
    
    
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    z-index: 3;
}




.member-card .box-icon {
    color: #fff;
    font-size: 1.2rem;
    transform: rotate(35deg); /* Rotates the right arrow to match the design */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

/* THE HOVER EFFECT: Move the icon *UPWORDS* */
.member-card:hover{
    /* Apply a Y-axis translation (vertical movement) to the arrow icon */
       transform: translateY(-5px); /* Subtle lift on hover */
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
     cursor: pointer;
}


/* THE HOVER EFFECT: Move the icon *UPWORDS* */
.member-card:hover .box-icon {
    /* Moves the icon 5px up the Y-axis while keeping its rotation */
      
      color: #fff;
      background-color: #000000 ;
    width: 46px;
    height: 46px;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
        border-radius: 50%;
        border: solid 1px  #000000 ;
}


@media (max-width: 1200px) {
  .team-grid { grid-template-columns: 1fr; gap: 60px; }
  .team-info { text-align: center; }
  .team-info .tag-container { margin-bottom: 40px; }
  .team-title { text-align: center; margin-left: 0; font-size: 50px; }
  .members-container { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .team-section { padding: 60px 0; }
  .member-card { width: 100%; height: auto; margin-top: 33px; aspect-ratio: 372/453; }
}








/* CSS for section section:team */
.team-section1 {
 
}
.team-grid1 {
  display: grid;
  grid-template-columns: 400px 2fr;
  gap:40px;
  align-items: center;
}
.team-info1 .tag-container1 { margin-bottom: 138px; }
.team-description {
  font-family: var(--font-poppins);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-dark);
  margin-bottom: 42px;
}
.team-description1 strong { font-weight: 500; }
.explore-button1 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #cccccc;
  border-radius: 40px;
  padding: 6px 9px 6px 16px;
}
.explore-button1 span {
  font-family: var(--font-poppins);
  font-weight: 400;
  font-size: 17.6px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.arrow-circle1 {
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.arrow-circle1 img { width: 19px; height: 30px; }
.team-members1 { position: relative; }
.team-title1 {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 66px;
  line-height: 74px;
  letter-spacing: -2px;
  text-align: right;
  max-width: 691px;
  margin-left: auto;
  margin-bottom: 25px;
}
.members-container1 {
    display: flex;
    gap: 48px;
    /* justify-content: flex-end; */
}
.member-card1 {
    position: relative;
    width: 370px;
    height: auto;
}
.member-photo1 {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}
.member-overlay1 {
    position: absolute;
    bottom: -41px;
    left: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    backdrop-filter: blur(18px);
    padding: 20px 0px ;
    text-align: center;
    color: var(--color-white);
}
.member-title1 {
    font-weight: 400;
    font-size: 11.2px;
    color: #fff;
    line-height: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.member-name1 {
  color: #fff;
  
  font-weight: 700;
  font-size: 25px;
  line-height: 20px;
  margin-top: 0px;
}


.box-container2 {
    position: absolute;
    top: 11px;
    right: 6px;
    background-color: #2196F3;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 3;
}


/* --- Arrow Icon and Hover Effect --- */
.member-card1 .box-container2 i {
    position: absolute;
    
    
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    z-index: 3;
}




.member-card1 .box-icon2 {
    color: #fff;
    font-size: 1.2rem;
    transform: rotate(35deg); /* Rotates the right arrow to match the design */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

/* THE HOVER EFFECT: Move the icon *UPWORDS* */
.member-card1:hover{
    /* Apply a Y-axis translation (vertical movement) to the arrow icon */
       transform: translateY(-5px); /* Subtle lift on hover */
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
     cursor: pointer;
}


/* THE HOVER EFFECT: Move the icon *UPWORDS* */
.member-card1:hover .box-icon2 {
    /* Moves the icon 5px up the Y-axis while keeping its rotation */
      
      color: #fff;
      background-color: #000000 ;
    width: 46px;
    height: 46px;
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
        border-radius: 50%;
        border: solid 1px  #000000 ;
}


@media (max-width: 1200px) {
  .team-grid1 { grid-template-columns: 1fr; gap: 60px; }
  .team-info1 { text-align: center; }
  .team-info1 .tag-container1 { margin-bottom: 40px; }
  .team-title1 { text-align: center; margin-left: 0; font-size: 50px; }
  .members-container1 { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .team-section1 { padding: 60px 0; }
  .member-card1 { width: 100%; height: auto; margin-top: 33px; aspect-ratio: 372/453; }
}






























/* CSS for section section:mission-vision */
.mission-vision-section {
  position: relative;
  padding: 80px 0 128px;

}
.mission-vision-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 426px;
    height: 120.3%;
    background-color: #3c98d4;
    border-radius: 0 0 0 50px;
    z-index:12;
}
.mission-vision-bg-image {
    position: absolute;
    bottom: -85px;
    left: 0px;
    width: 98%;
    height: auto;
    z-index: 22;
}
.mission-vision-content {
  display: flex;
  gap: 100px;
}
.mission-vision-text {
    flex-shrink: 0;
    width: 370px;
    z-index: 22;
    padding-left: 20px;
}
.mission-vision-title {
 
  font-weight: 600;
  font-size: 50px;
  line-height: 68px;
  letter-spacing:0.5px;
  color:#fff;
  margin-bottom: 19px;
  text-align: left;
}
.decorative-image {
  width: 315px;
  height: auto;
}
.cards-wrapper {
    display: flex;
    gap: 50px;
    padding-top: 0px;
    height: 286px;
}
.vision-mission-card {
	background: url(../images/dec1.png) right no-repeat #3c98d4;
	/* border: 1px solid #8a8a8a; */
	border-radius: 30px;
	padding: 20px 0px;
	width: 380px;
	/* color: #3c98d4; */
	position: relative;
}
.vision-mission-card h3 {
	font-weight: 700;
	font-size: 35.5px;
	line-height: 36px;
	letter-spacing: -1px;
	color: #3c98d4;
	padding: 8px 0;
	text-align: center;
	/* border-radius: 30px 30px 0 0; */
	background: #fff;
	margin-top: 20px;
}
.vision-mission-card p {
    font-size: 18px;
    line-height: 26px;
    padding: 20px 20px;
    color: #fff;
}
.card-icon-wrapper {
    position: absolute;
    top: -54px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 92px;
    background: url(../images/bg-ac.jpg);
    border-radius: 30px;
    display: grid;
    place-items: center;
}
.card-icon-wrapper > div {
  width: 35px;
  height: 35px;
  position: relative;
}

@media (max-width: 1200px) {
  .mission-vision-content { flex-direction: column; align-items: center; }
  .mission-vision-text { width: 100%; text-align: center; }
  .decorative-image { display: none; }
  .cards-wrapper { flex-direction: column; padding-top: 40px; }
}
@media (max-width: 768px) {
  .mission-vision-section { padding: 40px 0; }
  .mission-vision-bg { width: 100%; border-radius: 0; }
  .mission-vision-bg-image { display: none; }
  .mission-vision-title { font-size: 40px; line-height: 1.2; }
  .vision-mission-card { width: 100%; }
  .vision-mission-card p { font-size: 18px; line-height: 1.5; }
}




/* CSS for section section:careers */
.careers-section {
        position: relative;
        height: 273px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 150px;
    }
    .careers-bg-images {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1130px;
        height: 130px;
    }
    .careers-bg-images img {
        position: absolute;
        opacity: 0.5;
        height: 130px;
    }
    .bg-img-1 { left: 0; width: 340px; }
    .bg-img-2 { left: 270px; width: 340px; }
    .bg-img-3 { right: 270px; width: 270px; }
    .bg-img-4 { right: 0; width: 410px; }
    .careers-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .join-us-circle {
        width: 250px;
        height: 241px;
        background-color:#3c98d4;
        border-radius: 122.75px;
        color: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    .join-us-icon {
        width: 24px;
        height: 24px;
        background-color: #fff;
        border-radius: 3px;
        display: grid;
        place-items: center;
        margin-bottom: 8px;
    }
    .join-us-title {
       color: #fff;
        font-weight: 700;
        font-size: 13px;
        line-height: 14px;
        margin-bottom: 8px;
    }
    .join-us-text {
      color: #fff;
       
        font-weight: 700;
        font-size: 19.375px;
        line-height: 24px;
    }
   .openings-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* border: 1px solid #e0e0e0; */
    border-radius: 30px;
    
    margin-top: -88px;
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
}
    .openings-btn span {
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 13.56px;
        line-height: 24px;
        color: var(--black);
    }
    .arrow-icon-wrapper-small {
        width: 50px;
        height: 50px;
        background-color: var(--primary-blue);
        border-radius: 25px;
        display: grid;
        place-items: center;
    }
    .arrow-icon-wrapper-small img {
        width: 21px;
        height: 21px;
        transform: rotate(-45deg);
    }
    @media (max-width: 1200px) {
        .careers-bg-images {
            display: none;
        }
    }










/* --- Contact Box Styling --- */
.contact-box {
    background-color: #fff;
    border-radius: 15px; /* Large rounded corners as per the image */
    padding: 30px;
    height: 100%; /* Ensure all boxes are the same height in a row */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    border: solid 1px #ccc;
    flex-direction: column;
    align-items: flex-start; /* Align all content to the left */
}

/* Top Icon Styling */
.box-icon-top {
    font-size: 1.5rem;
    color: #000; /* Black icon color */
    margin-bottom: 20px;
}

/* Title Styling */
.box-title11 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 5px;
}

/* Detail/Content Styling */
.box-detail {
    font-size: 1rem;
    color: #6c757d; /* Grey text color */
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Specific styling for the location text which is longer */
.address-detail {
    /* Push the button to the bottom if the text is short, maintaining alignment */
    flex-grow: 1; 
}


/* --- Button Styling --- */
.custom-btn {
    /* Use a custom color that matches the blue in the image */
    background-color: #4A90E2; 
    border-color: #4A90E2; 
    color: #fff;
    padding: 20px 30px;
    font-size: 13px;
    border-radius: 30px; /* Slightly rounded button corners */
    font-weight: 500;
    text-transform: capitalize;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    width: 100%; /* Full width button */
}

.custom-btn:hover {
    background-color: #357bd1; /* Slightly darker blue on hover */
    border-color: #357bd1;
    color: #fff;
}

/* --- Responsive Adjustments --- */
@media (min-width: 992px) {
    /* Ensure all boxes have the same minimum height on desktop */
    .contact-box {
        min-height: 320px;
    }
}






    .contact-section {
      padding: 60px 5%;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
    }

    .contact-left {
      flex: 1 1 45%;
    }

    .contact-right {
      flex: 1 1 45%;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
    }

    

  .form-control {
    background: #f4f4f4;
    border: none;
    border-radius: 30px;
    padding: 14px 20px;
    font-size: 15px;
    margin-bottom: 15px;
    border-radius: 30px !important;
}

    .form-control:focus {
      box-shadow: none;
      outline: none;
      background: #f0f0f0;
    }

    textarea.form-control {
    height: 140px;
    resize: none;
    border-radius: 40px ! important;
}
    .btn-submit {
      border-radius: 30px;
      background-color: #fff;
      border: 2px solid #e1e1e1;
      color: #000;
      padding: 10px 25px;
      font-weight: 500;
      position: relative;
      transition: all 0.3s ease;
    }

    .btn-submit:hover {
      background-color: #007bff;
      color: #fff;
      border-color: #007bff;
    }

    /* Logo Buttons */
    .brand-logos {
      display: flex;
      gap: 20px;
      margin-top: 30px;
    }

  .brand-logos img {
    width: 158px;
    height: 78px;
}
    iframe {
      width: 100%;
      height: 100%;
      border: 0;
      min-height: 550px;
    }

    @media (max-width: 992px) {
      .contact-section {
        flex-direction: column;
      }
      .contact-right {
        width: 100%;
      }
    }




@media (max-width: 920px) {
  .hamburger-menu-container {
    display: flex;
  }

  #check {
    display: block;
  }




  .nav-btn {
    position: fixed;
    height: calc(100vh - 3rem);
    top: 3rem;
    left: 0px;
    width: 100%;
    background-color: var(--clr-btn);
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translatey(-120%);
    transition: .65s;
  }

  #check:checked ~ .nav-btn {
    transform: translateX(0);
  }

  #check:checked ~ .nav-btn .nav-link,
  #check:checked ~ .nav-btn .log-sign {
    animation: animation .5s ease forwards var(--i);
  }


    .nav-link {
	display: block;
	padding: .5rem 2rem !important;
	color: #0d6efd;
	text-decoration: none;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
  .nav-links {
    flex: initial;
    width: 100%;
  }

  .nav-links > ul {
    flex-direction: column;
  }

  .nav-link {
    width: 100%;
    opacity: 0;
    transform: translateY(15px);
  }



  .nav-link > a {
    line-height: 1;
    padding: 1.6rem 2.5rem;
  }

  .nav-link:hover > a {
    transform: scale(1);
    background-color: var(--clr-nav-hover);
  }

  .dropdown,
  .dropdown.second {
    position: initial;
    top: initial;
    left: initial;
    transform: initial;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    padding: 0;
    background-color: var(--clr-dropdown-hov);
    display: none;
  }

  .nav-link:hover > .dropdown,
  .dropdown-link:hover>.dropdown {
    display: block;
  }

  .nav-link:hover > a > i,
  .dropdown-link:hover>a>i {
    transform: rotate(360deg);
  }

  .dropdown-link > a {
    background-color: transparent;
    color: var(--clr-light);
    padding: 10px 5px;
    line-height: 1;
  }

  .dropdown.second .dropdown-link > a {
    padding: 1.2rem 2rem 1.2rem 3rem;
  }

  .dropdown.second .dropdown.second .dropdown-link > a {
    padding: 1.2rem 2rem 1.2rem 4rem;
  }

  .dropdown-link:not(:nth-last-child(2)) {
    border-bottom: none;
  }

  .arrow {
    z-index: 1;
    background-color: var(--clr-btn);
    left: 10%;
    transform: scale(1.1) rotate(45deg);
    transition: .5s;
  }

  .nav-link:hover .arrow {
    background-color: var(--clr-nav-hover);
  }

  .dropdown .dropdown .arrow {
    display: none;
  }

  .dropdown-link:hover > a {
    background-color: var(--clr-dropdown-link-hov);
  }

  .dropdown-link:first-child:hover ~ .arrow {
    background-color: var(--clr-nav-hover);
  }

  .nav-link > a > i {
    font-size: 1.1rem;
    transform: rotate(-90deg);
    transition: .7s;
  }

  .dropdown i {
    font-size: 1rem;
    transition: .7s;
  }

  .log-sign {
    flex: initial;
    width: 100%;
    padding: 1.5rem 1.9rem;
    justify-content: flex-start;
    opacity: 0;
    transform: translateY(15px);
  }




.container .slider {
  animation: slidein 30s linear infinite;
  white-space: nowrap;
}
.container .slider .logos {
  width: 100%;
  display: inline-block;
  margin: 0px 0;
}
.container .slider .logos .fab {
  width: calc(100% / 5);
  animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
}

@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.class_margin{
margin-bottom: 50px;

}

.our_fearture{

text-align: center; margin:  20px 0px; font-size: 30px; font-weight: 900; color: #fff !important;

}
.core_value{
position: relative; top: 100px;

}

.margin_blog{
margin-bottom: 50px;

}

}


@media (max-width: 800px) {

  
.cover-container {
	position: relative;
	width: 100%;
	height: 171px;
}

  .nav-link > a {
	line-height: 1;
	padding: 9px 2px !important;
}

  .nav-links > ul {
	display: flex;
	justify-content: left;
	align-items: left;
	 border-left: solid 0px #6a6a6a; 
	 margin-top: 0px; 
	 padding: 2px 1px;
	margin-left:0px;
}


.header2 {
	
	background-color: #fff !important;
	
}

header {
	position: absolute;
	top: 0px;
	background-color: #000 !important;
	width: 90%;
	backdrop-filter: blur(0px);
	border: solid 1px #acacac;
	z-index: 1000;
	left: 0;
	right: 0;
	border-radius: 50px;
	margin: auto !important;
	padding: 7px;
}


  .margin_blog{
margin-bottom: 0px;

}



  .blog-title2 {
	font-size: 22px;
	font-weight: bold;
	color: #000;
	transition: color 0.3s;
}

  .blog_txt{
text-align:left !important;  margin-top: 0px;
 margin-bottom: 10px;

}


  .excellence{
margin-top: 0px;

}



  
.Our_Excellence{

position:inherit; top: 20px !important;
}


  .blog-label {
	background-color: var(--clr-btn);
	padding: 4px 4px;
	font-size: 11px;
	font-weight: 300;
	border-radius: 20px;
	color: #ffffff;
	text-align: center;
}


  .blog-title {
	font-size: 16px;
	font-weight: bold;
	color: #000;
	transition: color 0.3s;
}

.elementor-widget-spaciaz-iconbox .elementor-iconbox-item {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 0 30px 30px;
	overflow: hidden;
	-ms-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
  margin-bottom: 30px;
}


  .core_value{
position:inherit !important; top: 0px;

}



/* Zoom In #1 */
.hover01 figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover01 figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}




  .class_margin{
margin-bottom: 0px;

}


  .stories_we_buit{

text-align:left !important;  margin-top:0px;
margin-bottom:10px;

}


#counter {
	background: rgba(black, .05);
	padding: 0px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	font-weight: 900;
	list-style: none;
	justify-content: space-between;
	text-align: text-top !important;
	line-height: 90px;
  li{
    flex: 0;
    text-align: center;
    font-size: 80px;
    font-weight:900;
  }
  span.percent:after {
    content: "";
    display: inline-block;
  }
}

  .pointers {
	border-top: solid 1px #ccc;
	margin: 10px 0px;
	padding: 5px 0px;
}
.bg {
	position: relative;
	margin: 0;
	bottom: 0px;
	vertical-align: text-top;
	font-weight: bold;
	text-align: center;
	left: 0px;
	color: #FFF;
	text-align: center;
	width: 100% !important;
	z-index: -1;
}

  .spaciaz-btn {
	display: inline-flex;
	align-items: center;
	padding: 5px 15px;
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 40px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 600;
	margin-top: 40px;
}

  .Building-Ecosystems-for-Growth {

text-align:center !important;  margin-top: 20px;

}

  .header_text {
	font-size: 20px;
	text-align: center;
	line-height: auto;
	line-height: 27px;
	color: #000;
	font-weight: 500;
}

  .h2, h2 {
	font-size: 46px;
	text-align: center;
  color: var(--accent-color);
}
.banner_bg {
	background: #fff;
	padding: 100px 0px 20PX 0PX;
	z-index: 10;
	margin-top: 40px;
	border-radius: 50px 50px 0px 0px;
	position: inherit;
	border-bottom: solid 1px #ccc;


.banner_bg {
	background: #fff;
	padding: 100px 0px 20PX 0PX;
	z-index: 10;
	top: 112px;
	border-radius: 50px 50px 0px 0px;
	position: relative;
	border-bottom: solid 1px #ccc;
}


.header_text {
	font-size: 20px;
	text-align: left;
	line-height: auto;
	line-height: 27px;
	color: #494949;
	font-weight: 500;
}


.h2, h2 {
	font-size: 31px;
	text-align:center ;
  color:var(--clr-dropdown);
}
  
  .nav-btn {
    position: fixed;
    height: calc(100vh - 3rem);
    top: 3rem;
   
    width: 100%;
    background-color: var(--clr-btn);
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(100%);
    transition: .65s;
  }


header {
	position: absolute;
	top: 0px;
	background-color: #000;
	width: 90%;
	backdrop-filter: blur(0px);
	border: solid 1px #acacac;
	z-index: 1000;
	left: 0;
	right: 0;
	border-radius: 50px;
	margin: auto !important;
	padding: 7px;
}


  .nav-link2 > a {
color: #000 !important;
}
 

  .nav-link > a {
	line-height: 1;
	padding:10px 5px;
}
 
.nav-links > ul {
	display: flex;
	justify-content: left;
	align-items: left;
	 border-left: solid 0px #6a6a6a;
	margin-top: 20px;
	padding: 10px 1px;
	margin-left: 10px;
}


.elementor-widget-spaciaz-iconbox .iconbox-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 370px;
	padding: 60px 50px 40px 80px;
	border-radius: 30px;
	background-color: #F5F5F5;
	margin-bottom: 20px;
}


  }