@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: 'FuturaLT';
  src: url('https://noble-service.com/wp-content/uploads/2025/06/FuturaLT.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'FuturaMdBt';
  src: url('https://noble-service.com/wp-content/uploads/2025/06/FuturaMdBt.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
h1,h2,.btn span, .elementor-counter-number{
	  font-family: 'FuturaLT', sans-serif !important;
}
h3,h4{
	font-family: 'FuturaMdBt', sans-serif !important;
}
h5,h6{
	  font-family: 'FuturaMdBt', sans-serif !important;

}
#menu-header-4 a{
	font-family: 'FuturaMdBt', sans-serif !important;
}
.btn{
	font-family: 'FuturaMdBt', sans-serif !important;
}
body{
	font-family: "Poppins", sans-serif !important;
	background : #CCCCCC10
}
p{
	  font-family: "Poppins", sans-serif !important;
}

/* div#nav {
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
} */
.text-blue{
	color : #0052CC
}
.features-slider {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: bold;
  color: #fff;
  text-align: center;
	text-transform : uppercase	
}
span.slider_text {
    font-size: 22px;
	font-family: 'FuturaMdBt', sans-serif !important;
}

.icon_class {
    position: absolute;
    bottom: 0;
    margin-bottom: 30px;
		z-index : 99999999
}
.overlay{
	& .icon_class{
		h6{
			opacity : 1;
				transition : 0.3s all
		}
	}
	&:hover{
	& .icon_class{
		h6{
			opacity : 1;
				transition : 0.3s all		
		}
	}
		svg{
			fill : #fff
		}
}
}
.overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0052CC66;
    z-index: 999;
		border-radius : 10px;
	transition : 0.3s all
			
}
#work{
	background : #fff;
	padding : 40px 40px 40px 65px;
	position : relative;
}
div#work {
    height: 180px;
box-shadow: 8px 8px 35px 0 rgba(34, 34, 34, 0.05);
}
#work:hover{
	background : #0052CC
}
#work:hover h6, #work:hover p{
	color : #fff !important
}
.work1::after {
    content: "1";
    position: absolute;
    top: 50%;
    left: 0;
    background: #222222;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    margin-left: -25px;
		font-size : 25px;
}
.work1:hover:after {
	background : #222222
}
.work2::after {
    content: "2";
    position: absolute;
    top: 50%;
    left: 0;
    background: #222222;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    margin-left: -25px;
	font-size : 25px;
}
.work2:hover:after {
	background : #222222
}
.work3::after {
    content: "3";
    position: absolute;
    top: 50%;
    left: 0;
    background: #222222;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    margin-left: -25px;
	font-size : 25px;
}
.work3:hover:after {
	background : #222222
}
.work4::after {
    content: "4";
    position: absolute;
    top: 50%;
    left: 0;
    background: #222222;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
    margin-left: -25px;
	font-size : 25px;
}
.work4:hover:after {
	background : #222222
}
.icons_images {
    position: absolute;
    height: 90%;
    right: -70px;
    top: 50%;
    transform: translateY(-50%);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea,
.wpcf7 select 
{
  width: 100%;
  padding: 12px 40px 12px 15px;
  border: 1px solid #ddd;
  border-radius: 3px !important;
  font-size: 14px;
  background-color: #fff;
  box-shadow: 8px 8px 35px 0 rgba(34, 34, 34, 0.05);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
.wpcf7 select{
  color: #999;
}
.wpcf7 textarea{
	resize : none
}
.wpcf7 .form-group {
  margin-bottom: 15px;
  position: relative;
}

.wpcf7 .submit-row {
	display: flex;
	flex-direction : row;
	justify-content : space-between;
	align-items : center
}
.wpcf7-spinner{
	display : none !important
}
.wpcf7 .btn-primary {
  background-color: #fff;
  color: #222;
  padding: 12px 24px;
  border-radius: 25px;
  border: 2px solid #222;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
	font-family: 'FuturaMdBt', sans-serif !important;
}
.wpcf7 .btn-primary:hover {
	color : #fff;
	background : #222 !important

}
.wpcf7 .btn-primary:hover {
  background-color: #003fa1;
}
.anchor img{
	width : 15px;
	margin-right : 10px
}
.anchor{
	font-size : 15px;
	color : #222	
}
.parent_anchor p{
	margin : 0px !important
}
#footer {
    & .elementor-icon-list-items .elementor-icon-list-item {
        &:hover {
            & .elementor-icon-list-icon {
                & svg {
                    transform: rotate(35deg) !important;
                    transition: 0.3s all;
                }
            }
        }
    }
}

.review:hover{
	border-color : #0052CC !important
}
.footerlisting li:hover svg{
	filter: invert(65%) sepia(100%) saturate(1000%) hue-rotate(205deg) brightness(95%) contrast(90%);

}

#mastfooter ul {
	list-style : none !important;
	padding : 0px !important;
}
.icon_listing_footer.elementor-widget .elementor-icon-list-icon svg{
	width : 15px !important;
	height : 15px !important;
}

.img_icon_card{
	&:hover{
		& h2{
			color : #0052CC !important
		}
		& .elementor-icon{
			background : #0052CC !important;
		}
	}
}
@media(max-width : 500px){
		#work {
    background: #fff;
    padding: 40px 40px 40px 35px;
    position: relative;
}
	.work1::after,.work2::after,.work3::after,.work4::after{
		top : 0px;
		left : 50%;
	}
	div#nav {
    position: absolute;
    z-index: 9;
    left: unset;
    top: unset;
    transform: unset;
}
	.icons_images{
		    display: flex;
    flex-direction: row !important;
    height: unset;
    bottom: 0px;
    left: 0px;
    right: unset;
    border-radius: 5px;
    align-items: center;
    top: unset;
		transform : unset
	}
	
}