:root {
    --primary-color: #0E3B43;
    --secondary-color: #2A9D8F;
    --text-color: #232323;
    --button-bg: #F4A261;
    --button-text: #fff;
	--text-primary: #F4A261;
}

body{
	background: linear-gradient(to right, var(--primary-color) , var(--primary-color) );
	color: #fff;
	font-size: 18px;
	line-height: 25px;
	font-family: "DM Sans", serif;
	font-optical-sizing: auto;
    font-weight:400;
    font-style: normal;

}

.top-banner{
	height: 100vh;
    text-align: center;
    color: #fff;
}

.top-banner-sm{
	 height: 500px;
	 margin-top: 0px;
}
.homebg {
    background: 
        url('../images/bg/home.png') no-repeat, /* Top image */
        url('../images/bg/herobrkv.png') no-repeat; /* Bottom image */
    
    background-size: 100% auto,35% auto; /* First image = 50% width, Second image = 100% width */
    background-position: top right, bottom right; /* First image = Top right, Second image = Center */
    background-repeat: no-repeat, no-repeat; /* Ensures both images don't repeat */
    position: relative;
}

.topsm{
	height: 400px;
}

.text-left{
	text-align: left;
}


.btn{
	position: relative;
    display: inline-block;
    font-weight: 700;
    line-height: 1em;
    text-transform: capitalize;
    border-radius: 50px;
    padding: 15px 30px 15px 30px;
    border: none;
    overflow: hidden;
    transition: color 0.4s ease-in-out;
    z-index: 1;
    text-transform: uppercase;
}

p{
	margin-bottom: 5px;
}
.linknormal{
	color: #232323;
	text-decoration: none;
	font-weight: 600;
}
.linknormal:hover{
	opacity: .8;
}
.text-primary{
	color: var(--text-primary)!important;
}
.text-secondary{
	color: var(--secondary-color)!important;
}
.btn-primary {
  background: var(--button-bg);
  color: var(--button-text);
  border:0;
  z-index: 1;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 100%;
  height: 100%;
  background: #040303; /* Hover background */
  transition: right 0.4s ease-in-out;
  z-index: -1;
}

.btn-primary:hover{
	background: var(--button-bg);
}
.btn-primary:hover::before {
  right: 0;
}

.btn-primary:hover {
  color: var(--button-text)!important;
}

 h1, .h1{
 	font-size: 65px;
 	line-height: 69px;
 	font-weight: 700;
 	letter-spacing: 2px;
 }

 h2, .h2{
 	font-size: 38px;
 	line-height: 45px;
 	
 }

h3,.h3{
	font-size: 30px;
 	line-height: 35px;

}

h4,.h4,.bannerparagraph{
	font-size: 24px;
 	line-height: 32px;

}
.bannerparagraph{
	font-weight: 300;
}
h5,.h5{
	font-size: 22px;
 	line-height: 25px;
 	
}

h6,.h6{
	font-size: 20px;
 	line-height: 23px; 

}
.size-sm{
	font-size: 16px;
}

.display-all{
		display: block;
}

.w100hauto{
	width: 100%;
	height: auto;
}

.w80hauto{
	width: 80%;
	height: auto;
}

.w70hauto{
	width: 70%;
	height: auto;
}

.w50hauto{
	width: 50%;
	height: auto;
}

.w30hauto{
	width: 30%;
	height: auto;
}
.navbar{
	background: none;
}
.nav-item a{
	color: #fff;
}

.nav-item:not(:last-child){
	margin-right: 25px;
}


.bg-section-v1{
	background: #fff;
	color: #212529;
}

.bg-section-v2{
	background: #f7f7f7;
	color: #212529;
}

.text-color{
	color: #808080;
}
.p-b-1{
	padding-bottom: 60px;
}
.p-t-1{
	padding-top: 60px;
}

.p-tb-1{
	padding-top: 60px!important;
	padding-bottom: 60px!important;
}

.p-tb-2{
	padding-top: 45px!important;
	padding-bottom: 45px!important;
}

.p-tb-3{
	padding-top: 30px!important;
	padding-bottom: 30px!important;
}


.f-bold{
	 font-weight: 800!important;
}
.f-med{
	 font-weight: 500!important;
}
.f-neue-reg{
	font-weight: 300;
}

.f-light{
	font-weight: 300;
}


.wrapperbox-item{
	padding: 30px;
	background: #004050;
	 color: #fff;
	 border-radius: 30px;
}
.wrapperbox-item{
	 transition: color 0.4s ease-in-out;
	
}
.wrapperbox-item:hover{
	background: var(--button-bg) ;
	color: #fff;
}


.wrapperbox-item-2{
	padding: 30px;
	border-radius: 30px;
}
.wrapperbox-item-2-colored{
	background: #FFFFFF1A;
}

.socialfootul,


.listnormal,
.footlist {
	list-style-type: none;
	padding-left: 0px;
}

.listnormal a,
.footlist a{
	color: #fff;
	text-decoration: none;
}

.socialfootul li{
	display: inline-block;
	margin-right: 15px;
}

.footlist li{
	display: inline-block;
	margin-right: 15px;
}

.playvideo{
	  transition:  .7s ease-in-out;
}
.playvideo:hover{

	opacity: .9;
	cursor: pointer;
}
video{
	width: 100%;
	height: auto;
}

.modal{
	--bs-modal-width: 90%;
}


/*
.box1 {
    border-bottom:2px solid var(--button-bg); 
    border-right: solid 2px var(--button-bg);
}
.box2{
	
	border-bottom: 2px solid var(--button-bg);
}
.box3{
	
	border-right: 2px solid var(--button-bg);
}*/



/* Horizontal Center Border */
.box{
	padding: 60px 60px;
	vertical-align: top;
	min-height: 250px;
	position: relative;
}



/* Box 1: Right border (bottom-aligned) & Bottom border (right-aligned) */
.box1::after { 
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 4px;
    height: 45%;
    background: #f4f4f4;
}
.box1::before { 
    content: "";
    position: absolute;
    bottom: 0;
    right: 0; /* Align to right */
    width: 30%;
    height: 4px;
    background: #f4f4f4;
}

/* Box 2: Bottom border (left-aligned) */
.box2::before { 
    content: "";
    position: absolute;
    bottom: 0;
    left: 0; /* Align to left */
    width: 30%;
    height: 4px;
    background: #f4f4f4;
}

/* Box 3: Right border (top-aligned) */
.box3::after { 
    content: "";
    position: absolute;
    right: 0;
    top: 0; /* Align to top */
    width: 4px;
    height: 45%;
    background: #f4f4f4;
}

.box3,.box4{
	height: auto;
}


.box p:last-child{
	margin-bottom: 0px;
}
.box1, .box4 {
 background: #fafafa;
    
}
.boxesinvest{
	padding: 60px 30px;	
	border-top: solid 0px #0E3B43;
	border-bottom: solid 0px #0E3B43;
	border-radius: 5px;
}
.boxesinvest:nth-child(odd){
	background: #FFFFFF1A;
	color: #fff;
	
}
.boxesinvest:nth-child(even){


}
.img-rounded{
	border-radius: 30px;
}

.liststeps{
	padding-left: 0px;
	list-style-type: none;
}

.liststeps {
    padding-left: 0px;
    list-style-type: none;
}

.liststeps li {
    background: #f7f7f7;
    padding: 30px;
    padding-bottom: 60px;
    border-radius: 15px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden; /* Ensures the animation stays within the borders */
    transition: background 0.7s ease-in-out;
    z-index: 1;
}

.liststeps li:hover{
	    cursor: pointer;
}
.liststeps li::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0E3B43;
    transition: top .7s ease-in-out;
    z-index: -1;

}

.liststeps li:hover::before {
    top: 0;
}

.liststeps li:hover {
    color: #ccc; /* Change text color on hover */
}

.liststeps li * {
    position: relative;
    z-index: 1; /* Ensures text remains visible */
}


.number-box {
	position: absolute!important;
	bottom: 10px;
 	font-size: 70px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: transparent;
    stroke-width: 10px;
    -webkit-text-stroke-width: 1px;
    stroke: var(--text-color);
    -webkit-text-stroke-color: var(--text-color);
    opacity: 15%;
    transition: all 0.4sease-in-out;
 
   
}

.liststeps li:hover > .number-box{
	-webkit-text-stroke: 2px #f1f1f1; 
}

.testimonialpart{
	background: #FFFFFF1A;
	padding: 30px;
	border-radius: 15px;
}
/*
.number-box::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0E3B43;
    transition: top 0.4s ease-in-out;
    z-index: -1;
}

.number-box:hover::before {
    top: 0; 
}

.number-box:hover {
    color: white; 
    -webkit-text-stroke: 0px white;
}
*/

@media (min-width: 577px){
	.swiper-wrapper-container {
	    position: relative;
	    width: calc(100vw - ((100vw - var(--container-width)) / 2) - 20px); /* Extends to right edge */
	    margin-left: 0px;/*calc((100vw - var(--container-width)) / 2 + 5px); /* Aligns left edge */
	    margin-right: 0; /* Allow it to extend to the right */
	    overflow: hidden;
	   /* border:solid 1px #f00;*/
	}
}

/* Set dynamic variable for Bootstrap container width */
@media (min-width: 1400px) { /* xl and up */
    :root { --container-width: 1320px; }
}
@media (max-width: 1399px) { /* lg */
    :root { --container-width: 1140px; }
}
@media (max-width: 1199px) { /* md */
    :root { --container-width: 960px; }
}
@media (max-width: 991px) { /* sm */
    :root { --container-width: 720px; }
}
@media (max-width: 767px) { /* xs */
    :root { --container-width: 540px; }
}

@media (max-width: 577px){
	.swiper-wrapper-container {
		margin-left: 0px;
		overflow: hidden;
	}
}

/* Custom Navigation Buttons */
    .custom-buttons {
  
      display: flex;
      gap: 10px;
      z-index: 888;

    }

    .custom-button-prev,
    .custom-button-next {
  
      cursor: pointer;
      text-align: center;
      user-select: none;
    }

    .custom-button-prev.disabled {
      opacity: .5;
      cursor: not-allowed;
      position: relative;
    }

    .custom-button-prev:hover:not(.disabled),
    .custom-button-next:hover {
      opacity: .9;
    }
    .custom-button-prev:hover,
    .custom-button-next:hover {

    }

.bloglink{
	text-decoration: none;
	color: #232323;
}
.blogpost{
	background: #fff;
	position: relative;
}
.blogpost-content{
	padding: 30px;
}
.blogpost .blogpost-title{
	font-weight: 600;
}
.blogpost-img{
	width: 100%;
	max-height: 350px;
	overflow: hidden;
	border-radius: 0px;
}
.blogpost-img img{
	width: 100%;
	height: auto;
}

.formwrapp{
	background: #fff;
	padding: 30px;
	border-radius: 15px;
}

.videowrap{
	position: relative;
}
.videowrap2{
	top: 80px;
	left:30px;
	position: absolute;
	color: #fff;
	width: 35%;
}
.customform .form-control{
	background: #fafafa;
	border-radius: 15px;
}


.flagbox{
	padding: 60px 15px; 
	font-weight: 600;
}

/*
.flagbox:nth-child(1),.flagbox:nth-child(4) {
	background: var(--primary-color);
	color: #fff;
}
*/
.flagspain{
	background: linear-gradient( rgba(0, 0, 0, .3), rgba(0, 0, 0, .4) ),url('https://blog.fuertehoteles.com/wp-content/uploads/2019/02/marbella-aerial.jpg') no-repeat;
	background-size: 110% auto;
	background-position: center;
	color: #fff;
}

.flaguae{
	background: linear-gradient( rgba(0, 0, 0, .3), rgba(0, 0, 0, .4) ),url('https://c.ekstatic.net/dex-media/13769/24h-in-Dubai-mastm-637836233658172557.jpg') no-repeat;
	background-size: 100% auto;
	background-position: center;
	color: #fff;

}

.flaguk{
	background: linear-gradient( rgba(0, 0, 0, .3), rgba(0, 0, 0, .4) ),url('https://image-assets.eu-2.volcanic.cloud/api/v1/assets/images/ff16583bd0f0254cbe869c8d0bb78adc?webp_fallback=png') no-repeat;
	background-size: 110% auto;
	background-position: center;
	color: #fff;

}

.flagusa{
	background: linear-gradient( rgba(0, 0, 0, .3), rgba(0, 0, 0, .4) ),url('https://hips.hearstapps.com/hmg-prod/images/aerial-view-of-downtown-miami-florida-royalty-free-image-1701882306.jpg?crop=0.670xw:1.00xh;0.167xw,0&resize=640:*') no-repeat;
	background-size: 100% auto;
	background-position: center;
	color: #fff;

}

.flagbox{
	  transition:  1s ease-in-out;
}
.flagbox:hover{
	background-size: 120% auto;
}

.blogpost-img img {
    transition: transform 0.5s ease-in-out; /* Smooth zoom effect */
}

.blogpost-img img:hover {
    transform: scale(1.1); /* Zoom in on hover */
}

.team-box{
	background: #f7f7f7;
	padding: 15px;
	border-radius: 5px;
}
footer{
	background: #232323;

}

.deviderfoot{
	width: 100%;
	color: #fff;
	border-top:solid 1px rgba(255,255,255,.4);

}
.footercopyright{
	color: rgba(255,255,255,.5);
}



   .video-container {
    position: relative;
    width: 100%;

    overflow: hidden;
    display: flex; /* Ensures children stretch */
    flex-direction: column; 
}

.video-container .container {
    height: 100%;
    padding-top: 180px;
    padding-bottom: 180px;
    display: flex; /* Makes row take full height */
    align-items: center; /* Centers vertically */
    z-index: 1;
}

.video-container .row {
    height: 100%;
    width: 100%;
}

.video-container .col-md-9,
.video-container .col-md-3 {

    align-items: center;
    height: 100%; /* Ensures full height */
}

.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    z-index: -1;
}


  .overlayv{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    z-index: 0;
  }

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

.video-container{
	text-align: center;
}
.video-container .container{
	padding-top: 60px;
	padding-bottom: 60px;
}
.blogpost-img{
	height: auto;
	margin-bottom: 15px;
}
.blogpost-img img{
	width: 100%;
	height: auto;
}
	.navbar-toggler-icon {
	    filter: invert(1);
	}

.navbar-toggler{
	border-color: #fff;
}

	 h1, .h1{
	 	font-size: 45px;
	 	line-height: 49px;
	 	font-weight: 700;
	 	letter-spacing: 2px;
	 }

	 h2, .h2{
	 	font-size: 32px;
	 	line-height: 38px;
	 	
	 }

	h3,.h3{
		font-size: 27px;
	 	line-height: 32px;

	}

	h4,.h4,.bannerparagraph{
		font-size: 24px;
	 	line-height: 32px;

	}
	.bannerparagraph{
		font-weight: 300;
	}
	h5,.h5{
		font-size: 22px;
	 	line-height: 25px;
	 	
	}

	h6,.h6{
		font-size: 20px;
	 	line-height: 23px; 

	}


	.homebg {
	    background: url('../images/bg/home.png') no-repeat;
  	 	height: auto;
  	 	min-height: 450px;
  	 	padding-top: 30px;
  	 	padding-bottom: 30px;
  	 	background-size:  100% auto;
    }

	.box{
		height: auto!important;
		padding: 15px;
	}

	.box1::after { 
	    width: 0px;
	    height: 0%;
	}

	.box1::before { 
	    width: 0%;
	    height: 0px;
	}

	.box2::before { 
	    width: 0%;
	    height: 0px;

	}

	.box3::after { 
	    width: 0px;
	    height: 0%;
	}

	.box:nth-child(odd) {
		background: #f7f7f7;
	}

	.top-banner{
		padding-top: 45px;
		padding-bottom: 45px;
	}
	.p-tb-1{
		padding-top: 45px!important;
		padding-bottom: 45px!important;
	}

	.p-tb-2{
		padding-top: 30px!important;
		padding-bottom: 30px!important;
	}

	.p-tb-3{
		padding-top: 20px!important;
		padding-bottom: 20px!important;
	}


	.remopaddtopbottommobile{
		padding-top: 0px!important;
		padding-bottom: 0px!important;
	}

	.box{
		padding-top: 45px;
		padding-bottom: 45px;
	}

	.p-b-1{
		padding-bottom: 45px;
	}
	.p-t-1{
		padding-top: 45px;
	}

	

}

@media only screen and (min-width: 577px) {
	.right-pc{
		text-align: right;
	}
	.center-pc{
		text-align: center;
	}
	.display-pc{
		display: block;
	}


}


@media (min-width: 1200px) {
  .top-banner{
  	height: 600px;
  }

  .homebg{
  	  background-size: 100% auto,30% auto;
  }
}

@media (min-width: 1400px) {
	 .homebg{
  	  background-size: 100% auto,30% auto;
  }
}