:root {

  /*========== Colors ==========*/

 --title-color: rgb(67, 67, 67);
 --text-color: rgb(71, 71, 71);  
 --bg-color: rgb(255, 255, 255);
 --scroll-bar-color: hsl(var(--hue), 4%, 85%);
 --scroll-thumb-color: hsl(var(--hue), 4%, 75%);
 
}


*{
 box-sizing: border-box;
 padding: 0;
 margin: 0;    
}

html, body {
 width: 100%;
 margin: 0 auto;
 overflow-x: hidden;
} 
html{
 scroll-behavior: smooth; 
}
  
body {      
 transition: .5s;
 width: 100%;
 margin: 0 !important;
 padding: 0 !important;   
 position: relative;
 background-color: #FFF;    
}


ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

a {
  text-decoration: none;
 -webkit-transition: .3s all ease;
 -o-transition: .3s all ease;
 transition: .3s all ease;
}

img {
 max-width: 100%;
 height: auto;
}

a, p, h1, h2, h3, h4, h5, h6{
 margin: 0;
 padding: 0;
}  
.sp {
padding: 80px 10px 50px 75px;
}
.spl {
padding: 130px 10px 100px 75px;
}

.p {
padding: 100px;
}

.m{
margin: 100px auto;
}


.center{
display: flex;
align-items: center;
justify-content: center;
}
/*=============== NAVBAR BEGIN ===============*/
.header,
.header.scrolled {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;

}
.header {
 height: 100px; 
 background: transparent;     
 display: flex;
 align-items: center;
 margin: 0 auto;
 -webkit-transition: all 0.8s ease-out;
 -moz-transition: all 0.8s ease-out;
 -o-transition: all 0.8s ease-out;
 -ms-transition: all 0.8s ease-out;
 transition: all 0.8s ease-out;   
 pointer-events:all;
 transition: all 0.3s ease;

}

.header.scrolled{
height: 90px; 
background: linear-gradient(42.01deg, rgb(9, 53, 78) 0.041%,rgb(21, 122, 180) 119.21%);
box-shadow: 0 4px 6px rgba(22, 22, 26, 0.28);
}

.lang-dropdown {
position: relative;
width: auto;
font-family: Gilroy;
font-size: 24px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
user-select: none;
padding-right: 30px;

}

.lang-dropdown .selected {
border: none;
}

.lang-dropdown::after {
content: url(../images/lang_arrow.svg);
position: absolute;
right: 0;
top: -10%;
pointer-events: none;
}

.dropdown-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgba(9, 53, 78, 0.76);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 6px;
display: none;
z-index: 1;
}

.dropdown-list li { 
padding: 6px 10px;
font-family: Gilroy;
font-size: 24px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);  

}

.dropdown-list li:hover {
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.1);
}




.nav{
width: 100%;
 height: 100%;    
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;  
 flex-wrap: nowrap; 
 gap:0;      
}
.nav__item{
height: 100%;
}

.nav__list {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 45px;

}

.main_list {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;    
 justify-content: right;
 gap: 13%;
 }


 .navbar-brand{  
  padding: 0 !important;  
  margin: 0 !important;
  width: 62px;
  height: 72px; 
box-sizing: border-box;

}


.navbar-brand img{   
width: 100%;
height: 100%; 
object-fit: contain; 
display: block;
}


.nav__item a{
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 20px;
font-weight: 500;

}
.nav__item a:hover{
color: rgb(0, 248, 231);
}

/*=============== NAV ===============*/

.show-menu {
right: 0; 
}  

.nav div.media_button {
width: 40px;
height: 40px;
background-color: transparent;
position: absolute;
right: 50px;
top: auto;
padding: 0;
margin: 0;  
z-index:1;
display: none;
}

.nav div.media_button button.main_media_button {
width: 100%;
height: 100%;
background-color: transparent;
outline: 0;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
}

.nav div.media_button button.main_media_button span{
width: 98%;
height: 2px;
display: block;
background-color: #fdfdfd;
padding: 0;
margin: 9px 0 10px 0; 
}

.nav div.media_button button.main_media_button:hover span:nth-of-type(1){
transform: rotateY(180deg);
transition: all 0.5s;
background-color:#fdfdfd;
}

.nav div.media_button button.main_media_button:hover span:nth-of-type(2){
transform: rotateY(180deg);
transition: all 0.4s;
background-color: #fdfdfd;
}

.nav div.media_button button.main_media_button:hover span:nth-of-type(3){
transform: rotateY(180deg);
transition: all 0.3s;
background-color:#fdfdfd;
}

.nav div.media_button button.active span:nth-of-type(1) {
transform: rotate3d(0, 0, 1, 45deg);
position: absolute;
margin: 0;
padding: 0;
}

.nav div.media_button button.active span:nth-of-type(2) {
display: none;
}

.nav div.media_button button.active span:nth-of-type(3) {
transform: rotate3d(0, 0, 1, -45deg);
position: absolute;
margin: 0;
padding: 0;
}

.nav div.media_button button.active:hover span:nth-of-type(1) {
transform: rotate3d(0, 0, 1, 20deg);
}

.nav div.media_button button.active:hover span:nth-of-type(3) {
transform: rotate3d(0, 0, 1, -20deg);
}

/*=============== NAVBAR END ===============*/




/*=============== HERO  BEGIN ===============*/

.hero{
width: 100%;
margin: 0 auto;
background-image: url(../images/main.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover; 
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
z-index: 1;
padding-top: 120px;
}


.main-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(9, 53, 78, 0.76);
z-index: 0;
}


.hero_text_box{   
position: relative; 
display: flex;
flex-direction: column;
row-gap:16px ;
padding: 110px 140px 260px 65px; 

}
.hero_text_box h5{
color: rgb(0, 248, 231);
font-family: Gilroy;
font-size: 24px;
font-weight: 700;
line-height: 115%;
letter-spacing: 0%;
}

.hero_text_box h1{
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 72px;
font-weight: 700;
line-height: 115%;
letter-spacing: 0%;
padding-right: 200px; 
}
.hero_text_box p{
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 24px;
font-weight: 400;
line-height: 29px;
letter-spacing: 0%;
text-align: left;
}
.button-box{
margin-top:45px ;
}

.green-button, .transient-button{
border-radius: 15px;  
cursor: pointer;
width: 340px;
height: 87px;
color: rgb(255, 255, 255);
position: relative;
font-family: Gilroy;
font-size: 24px;
font-weight: 700;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
padding-left: 40px;
box-shadow: 0px 33px 51.4px 0px rgba(3, 65, 51, 0.25);

}

.green-button a, .transient-button a{    
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 24px;
font-weight: 600;    
 }
 
.green-button{
 outline: 0;
 border: 0;
backdrop-filter: blur(4px);
background: linear-gradient(45.85deg, rgb(42, 221, 208) 5.21%,rgb(23, 119, 112) 108.121%);
}

.transient-button{
 background:transparent;
 border: 1px solid rgb(255, 255, 255);
margin-left: 30px;
}

.green-button:hover{

border: 1.5px solid  rgb(42, 221, 208);
  animation-name: pulse;
 animation-duration: 1.5s;
 animation-timing-function: ease-out;
 animation-iteration-count: infinite;


}
.transient-button:hover{  
   animation-name: pulse2;
   animation-duration: 1.5s;
   animation-timing-function: ease-out;
   animation-iteration-count: infinite;
 
 
 }
.green-button::before, .transient-button::before{
content: url("../images/right-arrow.svg");
position: absolute;   
right: 10%;  
top: 50%;  
transform: translateY(-50%);
 

}

.green-button:hover::before, .transient-button:hover::before {
 animation: rightArrow 1s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

 @keyframes rightArrow {
   0%   { transform: translateY(-50%)  translateX(-5px); }
   25%  { transform: translateY(-50%)  translateX(0); }
   50%  { transform: translateY(-50%)  translateX(5px); }
   75%  { transform: translateY(-50%)  translateX(0); }
   100% { transform: translateY(-50%)  translateX(-5px); }
 }
 
 


@keyframes pulse {
 0% {
   box-shadow: 0 0 0 0 rgba(22, 183, 143, 0.5);
 }
 80% {
   box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
 }
}
@keyframes pulse2 {
 0% {
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
 }
 80% {
   box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
 }
}

.button_border {
 right: 20px;
 animation-play-state: paused;
}

.button_border::before {
 content: "";
 position: absolute;
 border-radius: 88px;
 padding: 25px;
 border: 5px solid var(--main-green-color);
 opacity: 0.75;
 animation-name: pulse-border;
 animation-duration: 1.5s;
 animation-timing-function: ease-out;
 animation-iteration-count: infinite;
}

@keyframes pulse-border {
 0% {
   padding: 25px;
   opacity: 0.75;
 }
 75% {
   padding: 50px;
   opacity: 0;
 }
 100% {
   opacity: 0;
 }
}

/*=============== HERO END ===============*/



/*=============== Section about BEGIN ===============*/

#about{
width: 100%;
margin: 0 auto;
}
.title{
padding: 15px 0;
z-index: 1;
}
.title h2 {
font-family: Gilroy;
font-size: 24px;
font-weight: 700;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
z-index: 1;
}


.title h3{
color: rgb(67, 67, 67);
font-family: Gilroy;
font-size: 72px;
font-weight: 700;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
margin: 5px 0 20px 0;
}


.linear{
display: inline-block; 
background: linear-gradient(52.05deg, rgb(0, 248, 231),rgb(0, 146, 136));
background-size: 100%; 
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}  
.linear-f{
display: inline-block; 
background: linear-gradient(40.01deg, rgb(9, 53, 78),rgb(21, 122, 180));
background-size: 100%; 
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
} 
.linear-s{
display: inline-block; 
background: linear-gradient(42.01deg, rgb(9, 53, 78),rgb(21, 122, 180));
background-size: 100%; 
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
} 
.linear-t{
display: inline-block; 
background: linear-gradient(65.39deg, rgb(9, 53, 78),rgb(21, 122, 180));
background-size: 100%; 
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
} 

.about_content{  
padding: 80px 0;
display: flex;
flex-direction: column;
gap: 25px;
}

.about_content h3{
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 24px;
font-weight: 700; 
text-align: left;
}
.about_content p,.about_content ul li{
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 20px;
font-weight: 400;

text-align: left;
}
.about_img {
position: relative;
height: 100%;
width: 100%;

}

.about_img img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-20deg);
height: auto;
width: 80%;
}




/*=============== Section about END ===============*/


/*=============== Section statistics  BEGIN ===============*/

#statistics {
width: 100%;
margin: 0 auto;
background: rgb(240, 240, 240);
}
.statistics {
position: relative;
z-index: 0; 
}
.stat-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.stat-box.animate {
  opacity: 1;
  transform: translateY(0);
}
.stat-number {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-style: Gilroy;
font-size: 96px;
font-weight: 700;
line-height: 119px;

}

.stat-text {
text-align: center;
color: rgb(67, 67, 67);
font-family: Gilroy;
font-size: 24px;
font-weight: 500;
line-height: 115%;
letter-spacing: 0%;
}

.gradient-overlay {
position: absolute;
width: 951px;
height: 951px;  
filter: blur(500px);
background: linear-gradient(42.01deg, rgb(9, 53, 78) 0.244%,rgb(21, 122, 180) 125.065%);
opacity: 0.3;
z-index: 1;
pointer-events: none; 
top: 0;   
right: -10%;  
transform: translateY(-30%);
mix-blend-mode:screen;
}


/*=============== Section statistics  END ===============*/

/*=============== Section services  Begin ===============*/

.title p {
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 20px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0%;
margin-left: 45%;
}

.workforce{
display: flex;
flex-wrap: wrap;  
justify-content: space-between;
gap: 8px;
row-gap: 30px;
margin: 45px 0;
}

.contract{
display: flex;
flex-wrap: wrap;  
justify-content: space-between;
gap: 75px;
margin: 45px 0;
}
.solution-card{
box-sizing: border-box;
border: 1px solid rgb(224, 224, 224);
border-radius: 15px;
background: rgb(248, 248, 248);
flex: 1 1 calc(20% - 20px);
min-width: 230px;
max-width: 230px;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 80px 40px;
cursor: pointer;
position: relative;
overflow: hidden;
}

.solution-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); 
}
.solution-card:hover::before {
opacity: 1; 
}
.solution-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); 
}
.dark {
display: block;
}

.light {
display: none;

}
.solution-card:hover .dark {
display: none; 
}

.solution-card:hover .light {
display: block;
}

.solution-card:hover  p,.solution-card:hover  span {
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 24px;
font-weight: 600;
line-height: 30px;
letter-spacing: 0%;
text-align: left;

}



.solution-card::before {
content: "";
position: absolute;
inset: 0;  
background-size: cover;
background-position: center;
z-index: 0;
opacity: 0;
}
.card1::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers1.png'); 
}
.card2::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers2.png'); 
}
.card3::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers3.png'); 
}
.card4::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers4.png'); 
}
.card5::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers5.png'); 
}
.card6::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers6.png'); 
}
.card7::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers7.png'); 
}
.card8::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers8.png'); 
}
.card9::before{
background: linear-gradient(rgba(9, 53, 78, 0.77), rgba(9, 53, 78, 0.77)),
           url('/Resources/images/workers9.png'); 
}
.solution-card * {
position: relative;
z-index: 1;
}


.solution-card img {
width: 70px;
height: auto;
margin-bottom: 25px;
}

.solution-card p {
color: rgb(67, 67, 67);
font-family: Gilroy;
font-size: 24px;
font-weight: 600;
line-height: 30px;
letter-spacing: 0%;
text-align: left;
}
.solution-card span {
color: rgb(67, 67, 67);
font-family: Gilroy;
font-size: 20px;
font-weight: 600;
line-height: 30px;
letter-spacing: 0%;
text-align: left;
}



/*=============== Section services  END ===============*/

/*=============== Section  sectors Begin ===============*/

.sectors {
width: 100%;
margin: 0 auto;
background-image: url("../images/construction-site-with-crane-ship-background 2.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: relative;

}

.sector-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(9, 53, 78, 0.85);
z-index: 1;
}
.sectors .container .row .title h3 {
color: #FFFFFF !important;
}
.sectors .container {
position: relative;
z-index: 2;
}

.sector-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;

}

.sector-card {
display: flex;
align-items: center;
flex: 1 1 30%;
color: #fff;
}

.sector-card img {
width: 80px;
height: 80px;
object-fit: contain;
margin-right: 23px;
}

.sector-text {
display: flex;
flex-direction: column;
}

.sector-text p {
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 30px;
font-weight: 600;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
}

.sector-text span {
margin-top: 10px;
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 18px;
font-weight: 400;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
}

.sector-card.special-card {
position: relative;
margin: 0 40px;
}

.sector-card.special-card::before {
content: '';
position: absolute;
top: -50%;
height:80px;
left: -40px; 
top: 0;
bottom: 0;
width: 1px;
background: rgba(217, 217, 217, 0.7);
margin: auto;
}

.sector-card.special-card::after {
content: '';
position: absolute;
top: -50%;
height: 80px;
right: -3px; 
top: 0;
bottom: 0;
width: 1px;
background: rgba(217, 217, 217, 0.7);
margin: auto;
}

.sectors::before {
content: '';
position: absolute;
top: -22%;
right: 0;
width: 817px;
height: 920px;
background: url('../images/VectorM.png') no-repeat center;
background-size: contain;
opacity: 0.23;
transform: rotate(5deg);
z-index: 2;
pointer-events: none;
}




/*=============== Section sectors  END ===============*/

/*=============== Section certifications  begin ===============*/
.certifications{
position: relative;
z-index: 0;
}
.certifications-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px; 
row-gap: 40px;
box-sizing: border-box;

}

.certification-card-outer.animate {
  opacity: 1;
  transform: translateY(0);
}
.certification-card-outer {
clip-path: polygon(60% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
background:rgb(205, 205, 205);
padding: 2px; 
display: inline-block;
height: 300px; 
width: 230px;
opacity: 0;
transform: translateY(100px);
transition: all 0.7s ease, box-shadow 0.4s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.certification-card-outer:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  cursor: pointer;
  }

.certification-card {    
clip-path: polygon(60% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
background: rgb(250, 250, 250);
box-sizing: border-box;
width: 100%;
height: 100%;  
padding: 40px 20px 30px 20px;
}

.certification-card img {
width: 60px;
height: auto;
margin-bottom: 20px;
}

.certification-card p {
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 24px;
font-weight: 600;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
}


.gradient-overlay-certf {
position: absolute;
width: 651px;
height: 651px;  
filter: blur(400px);
background: linear-gradient(42.01deg, rgb(9, 53, 78) 0.244%,rgb(21, 122, 180) 125.065%);
opacity: 0.4;
z-index: 1;
pointer-events: none; 
bottom: -80%;   
left: 10%; 
mix-blend-mode:screen;
}

/*=============== Section certifications  END ===============*/

/*=============== Section experiences  BEGIN ===============*/



.experience-text p{
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 20px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0%;
text-align: left;

}
.custom-hr{
margin: 30px 0 40px 0;
background: rgb(217, 217, 217);
width: 100%;
height: 3px;
}


.experience-list h4{
color: rgb(67, 67, 67);
font-family: Gilroy;
font-size: 20px;
font-weight: 700;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
padding: 10px 150px 10px 50px;
}

.experience-list p{
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0%;
text-align: left;
margin:0 150px 0 50px;
}

.experience-list li {
position: relative; 
}

.experience-list li::before {
content: "";
display: inline-block;
width:42px;
height: 52px;
position: absolute;
top: 0;
left: 0;
background-image: url('../images/li-logo.svg');
background-size: cover;
margin-right: 10px;
}


.experience-img{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}

.experience-img img{ 
display: block;
position: absolute;

}

.img-front{
left: 90px;
width:100%;
top: 50%;
transform: translateY(-44%);
}

.img-middle{
top: 50%;
transform: translateY(-50%);
left: 115px;
width: 65%;
}
.img-back{
top: 50%;
transform: translateY(-50%);
left: 50px;
width: 55%;
} 



/*=============== Section experiences  END ===============*/

/*=============== Section advanteges  BEGIN ===============*/
.advanteges-box{
display: flex;
padding: 50px 0;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}

.advanteges-text{
flex: 4;
margin-right: 50px;
}
.advanteges-list{
flex: 3;
}
.advanteges-text p{
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 20px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0%;
text-align: left;  
}

.advanteges-list li{
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 20px;
font-weight: 600;
line-height: 25px;
letter-spacing: 0%;
text-align: left;
}
.advanteges-list li {
position: relative;
padding: 0 0 50px 60px;

}

.advanteges-list li::before {
content: "";
display: inline-block;
width:48px;
height: 48px;
position: absolute;
top: -5%;
left: 0;
background-image: url('../images/checkmark.svg');
background-size: cover;

}

/*=============== Section advanteges  END ===============*/

/*=============== Section team  BEGIN ===============*/
.staff{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap:138px;
width: 100%;
padding: 60px 0;

}

.staff-card{
flex: 3;
}

.staff-img{
width: 100%;
height: 350px;
border-radius: 15px;
background: rgb(217, 217, 217);
box-sizing: border-box;
overflow: hidden; 
}

.staff-img img{
width: 100%;
border-radius: 15px;

}

.staff-text{
padding: 25px 16px;
position: absolute;
z-index: 1;
}

.staff-text h4{
color: rgb(67, 67, 67);
font-family: Gilroy;
font-size: 24px;
font-weight: 700;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
}

.staff-text p{
color: rgb(67, 67, 67);
font-family: Gilroy;
font-size: 16px;
font-weight: 500;
line-height: 115%;
letter-spacing: 0%;
text-align: left;
margin-top: 5px;
}

/*=============== Section team  END ===============*/

/*=============== Section contact  BEGIN ===============*/

#contact{
background: rgb(240, 240, 240);

}
.contact-line{
padding: 50px;
text-align: center;

}

.contact-line h2{
font-family: Gilroy;
font-size: 72px;
font-weight: 700;
line-height: 115%;
letter-spacing: 0%;
text-align: center;
}
.contact-line p{
color: rgb(71, 71, 71);
font-family: Gilroy;
font-size: 24px;
font-weight: 500;
line-height: 29px;
letter-spacing: 0%;
text-align: center;
margin:50px 0 90px 0;
}
/*=============== Section contact  END ===============*/


/*=============== FOOTER BEGIN ===============*/

footer{
background: linear-gradient(42.01deg, rgb(9, 53, 78) 0.041%,rgb(21, 122, 180) 119.21%);
padding: 65px 0 40px 0;
}

.footer_logo{
padding: 40px 0;
}

.footer_logo img{
width: 137px;
height: 147px;
margin-bottom: 35px;
}
.footer_logo p{
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 12px;
font-weight: 400;
text-align: left;
}

.menu h4 {
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 24px;
font-weight: 600;
line-height: 30px;
letter-spacing: 0%;
text-align: left;
margin-bottom: 50px;
}

.menu ul li{
padding: 20px 0;
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 20px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0%;
text-align: left;
}

.menu ul li a{

color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 20px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0%;
text-align: left;
}

.sosial_div{
display: flex;
gap: 30px;

}

.footer-bottom span{
color: rgb(255, 255, 255);
font-family: Gilroy;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0%;
}

.footer-hr{
 background: rgba(217, 217, 217, 0.09);
 width: 100%;
 height: 2px;
 margin: 70px 0 35px 0;
}

/*============== FOOTER END ===============*/






/*=============== term and conditions ===============*/

.term{
  padding: 0 10px 50px 10px;
}
.head-logo{
width:100%;
height: auto;


}

.head-text h2{
font-family: Gilroy;
font-size: 36px;
font-weight: 700;
}

.head-text p{
font-family: Gilroy;
font-size: 24px;
font-weight: 600;
}
.head-logo img{
width: 250px;
height: auto;

}

.bydot{
  list-style:disc;
  margin: 2rem 1.5rem;

}

.bydot li{
font-family: Gilroy;
font-size: 18px;
font-weight: 400;

}

.main-text ul li h2{
font-family: Gilroy;
font-size: 20px;
font-weight: 500;
padding: 20px 0;
}

.main-text ul li a{
text-decoration: none;
font-family: Gilroy;
font-size: 24px;
font-weight: 600;
color: #5f5e5e;

}
.main-text ul li h3{
font-family: Gilroy;
font-size: 22px;
font-weight: 500;
padding: 15px 0;
}

.main-text ul li p{
font-family: Gilroy;
font-size: 18px;
font-weight: 400;
padding: 8px 0;
}

.privacy {
  padding: 50px 10px;
}

.privacy *{
font-family: Gilroy;
}
.privacy h2{
padding: 20px 0;
}
.privacy h3{
padding: 10px 0;
}


/*=============== term and conditions  END ===============*/


/*=============== SCROLL UP ===============*/
.scrollup {
 position: fixed;
 background: #FFF;
 right: 1rem;
 bottom: -20%;
 display: inline-flex;
 padding: 0.7rem;
 border-radius: 50%;
 border: 1px solid rgb(6, 146, 188);
 z-index: 10;
 opacity: .7;
 transition: .4s;
 overflow: hidden;
}

.scrollup:hover {
background: rgb(6, 146, 188);
 opacity: 1;
}
.scrollup:hover .scrollup__icon{

 color: #FFF;
 animation-name: tipUp;
 animation-duration: 1.5s;
 animation-timing-function: ease-in;
 animation-iteration-count: infinite;

}


.scrollup__icon {
 font-size: 1.25rem;
 color: #2F2F2F;

}

 @keyframes tipUp {
   0%   { transform: translateY(8px);}
   50%   { transform: translateY(-6px); }
   100%   { transform: translateY(0); }    
 }    

/*=============== Show Scroll Up ===============*/
.show-scroll {
 bottom: 3rem;
}


/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
 width: .2rem;
 border-radius: .3rem;
 background-color: #eceaea;
}

::-webkit-scrollbar-thumb {
 background-color: #afaeae;
 border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover {
 background-color: #5f5e5e;
}


/*=============== Fade-in effect to sections ===============*/


.section {
 opacity: 0;
 transform: translateY(50px);
 transition: all 0.8s ease-out;
 position: relative;
 z-index: auto; 
}

.section.in-view {
 opacity: 1;
 transform: translateY(0);
}

 /*=============== lines to sections ===============*/

 .with-lines {
   position: relative;
 }
 
 .with-lines::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-image:
     linear-gradient(to bottom, rgba(218, 222, 226, 0.5), rgba(218, 222, 226, 0.5)),
     linear-gradient(to bottom, rgba(218, 222, 226, 0.5), rgba(218, 222, 226, 0.5)),
     linear-gradient(to bottom, rgba(218, 222, 226, 0.5), rgba(218, 222, 226, 0.5)),
     linear-gradient(to bottom, rgba(218, 222, 226, 0.5), rgba(218, 222, 226, 0.5));
   background-repeat: no-repeat;
   background-size: 1px 100%;
   background-position:
     30% 0,
     45% 0,
     60% 0,
     74% 0;
   pointer-events: none;
   z-index: 0;
 }