/* THEME: theme styles #################################################################################################### */	
	html { -webkit-font-smoothing:antialiased;}
	body {background:#fff; font-family: 'mybody', sans-serif; font-size:16px; font-weight:300; color:#626569;}
		.wrapper { max-width:1200px; margin:0 auto; padding:0 10px; text-align:left; position:relative;}
		.content {margin-top:70px;}
	a, #contact {transition: all 0.15s ease; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease;}
	a { color:#626569;}	
	a:hover {text-decoration:none;}
	img {max-width:100%; height:auto;}
	
	h1, h2, h3, h4 {color:#414956; font-family:mytitles}
	h2 {font-size:3em; font-weight:400; margin:.5em 0;}
	h3 {font-size:1.8em; font-weight:400; margin-bottom:.8em; line-height:1.2em}
	p, ul, ol {margin-bottom:2em; line-height:1.6em;}

	
	#header {background:#21538D; height:72px; position:fixed; top:0; left:0; width:100%; z-index:200;}
		#header .logo { float:left; height:72px; overflow:hidden; padding-top:0px; vertical-align:middle}
			.logo span { height:42px; line-height:42px; font-size:1em; color:#4c6074; display:block; text-decoration:none; font-weight:400; display:inline-block; vertical-align:middle; margin-left:10px;}
			.logo-img {background:url(../img/logo.png) no-repeat left center; width:508px; height:80px; display:inline-block; vertical-align:middle;}
				.logo a {color:#4c6074; background:url(../img/renta.png) no-repeat left center; padding-left:30px; text-decoration:none; display:inline-block; position:absolute;}
					.logo a:hover {color:#fff;}
			#header ul {padding:0; margin:15px 0 0 0; text-align:right;}
			
			.menu a {color:#fff; text-decoration:none; display:block; padding:0 2em; line-height:42px; border-radius:3px; -webkit-border-radius:3px;}
			.menu li {text-align:center; display:inline-block; font-family:mybody;}
		.menu li.active a { background:#70BA20;}
		.menu li a:hover { background:#70BA20;}
	
	
	#about, #projects, #contact {padding:2em 0;}
	
	
	#about {color:#fff; margin:0 auto;}
		#about h2, #about h3 {color:#fff;}
		#about hr { border-color:#000000; margin:2em 0}

		#commonpages_seo {color:#F6F5F5; font-size:20px; padding-left:22px;};
		#commonpages {background:#fff;}
			#commonpages .wrapper {}
			.commonpages {background:#EFEDED; padding:1.4em; border-radius:3px; -webkit-border-radius:3px; overflow:hidden;}
				.commonpages-images {margin:-1.4em -1.4em .8em -1.4em; position:relative;}
				.commonpages img {display:block;}
				.commonpages p {margin:0 0 .4em 0; font-size:.9em;}
						.commonpages-links { background:rgba(0,0,0,.3); position:absolute; bottom:0; left:0; width:100%; text-align:center; padding:.5em 0}
						.commonpages-links ul {text-align:left; margin:0; padding:0; text-align:center;}
							.commonpages-links li {display:inline-block; text-align:left; padding:0 .2em;}
								.commonpages-links a, .commonpages-links i  {display:inline-block; width:32px; height:32px;}
					.commonpages h3 {margin-bottom:.2em;}
			
			
		#projects {background:#fff;}
			#projects .wrapper {}
			.project {background:#ecf0f1; padding:1.4em; border-radius:3px; -webkit-border-radius:3px; overflow:hidden;}
				.project-images-product {background:#fff; margin:-1.4em -1.4em .8em -1.4em; position:relative;}
				.project-images {margin:-1.4em -1.4em .8em -1.4em; position:relative;}
				.project img {display:block;}
				.project p {margin:0 0 .4em 0; font-size:.9em;}
						.project-links { background:rgba(0,0,0,.3); position:absolute; bottom:0; left:0; width:100%; text-align:center; padding:.5em 0}
						.project-links ul {text-align:left; margin:0; padding:0; text-align:center;}
							.project-links li {display:inline-block; text-align:left; padding:0 .2em;}
								.project-links a, .project-links i  {display:inline-block;}

				
					.project h3 {margin-bottom:.2em;}
			
			.projects-menu {position:relative; z-index:300; margin-bottom:1em;}
			.projects-menu ul {margin:0;}
			.projects-menu span {border-bottom:3px solid #bdc3c7; cursor:pointer; cursor:hand; padding:0 2em; line-height:42px; display:inline-block; color:#414956; background:#fff; border-radius:0 0 0 0; -webkit-border-radius:0 0 0 0; }
			.projects-menu li.active span {border-bottom:3px solid #ABCB39; background:#fff;}
		
			.float {background:#fff; height:72px; padding-top:.4em}
			.sticky {z-index:4000; position:fixed; top:72px; }
				.sticky .shadow-fix { box-shadow:0 3px 5px rgba(0,0,0,.2); width:100%; position:fixed; background:#fff; left:0; top:72px; z-index:0; padding-top:4em; height:72px}	
				
			#grid {font-size:0;}
			.mix {opacity:0; display:none; float:none !important; font-size:16px;}	
			
			.project-links {display:none;}

			
		#footer_ul {text-align:left; margin:0; padding:0; text-align:left; }
		#footer-links_li {display:inline-block; text-align:left; padding:0 .2em; width:30%; vertical-align:text-top}
		#footer-links_a {text-decoration:none; color:#FFF; font-stretch:expanded;}

		#contact {background:#70BA20 url(../img/bg3.png) repeat-x center bottom; color:#fff; min-height:600px;}
			#contact .wrapper {}
			#contact h2 {color:#fff;}
			#contact h3 {color:#fff;}
			#contact a {color:#fff;}
			#contact ul {}
			#contact li {display:inline-block; margin:0 1em 0 0;}
			
			/* 3 cols layout */
					.row { position:relative; overflow:hidden; margin-left:-40px;}
					.col {float:left; width:33.33%;  border: 0px solid rgba(0,0,0,0); border-left-width:40px; margin-bottom:40px; vertical-align:top}
					.col2 {float:left; width:66.66%; border: 0px solid rgba(0,0,0,0); border-left-width:40px; margin-bottom:40px;}
				
						@media screen and (max-width: 1350px) {
						body {font-size:15px;}
						h2 {font-size:2.4em;}
						h3 {font-size:1.6em;}
						.wrapper { padding:0 2em}
						
						}

				
				
				 @media screen and (max-width: 980px) {
					.wrapper {width:auto; max-width:none;}
					.row {margin-left:-20px;}
					.col {border-left-width:20px; }
					.co2 {border-left-width:20px; }
					 
				 }				
				 @media screen and (max-width: 760px) {
					 
					.row {margin-left:-20px;}
					.col, .col2 {width:50%; border-left-width:20px;margin-bottom:20px;}
					.projects-menu {text-align:left; margin-bottom:2em}
					.projects-menu li {display:block; text-align:left; width:auto}
					.projects-menu a, .projects-menu span {display:block; text-align:left;}
					 
				 }				
				 @media screen and (max-width: 460px) {
					.wrapper {padding:0 1em;}
					
					 h2 {font-size:1.6em; margin-top:0;}
					 h3 {font-size:1.2em;}
					.row {margin:0;}
					.col, .col2 {width:100%; padding:0; border:0;margin-bottom:10px;}
					 
				 }	
				 
				 .mobile-trigger  {display:none; font-size:0; width:32px; top:24px; position:absolute; right:20px;}
				 .mobile-trigger-line {display:block; background:#fff; height:5px; border-radius:3px; -webkit-border-radius:3px; margin-bottom:3px;} 
				
				
				 @media screen and (max-width: 800px) {
					#header,
#header .col, 
#header .col2,
#header .wrapper { 
    background: #21538D !important; 
}
					 #header {height:auto; background:none;}
					 .hide-mobile {display:none !important;}
					 #header .col2 {float:none; margin:0; width:100%;  background:#2c3e50; margin:0; padding:0; display:block; }
					 #header .col {float:none; display:block; height:72px; margin:0; padding:0 1em; width:auto;background:#2c3e50; height:72px; }
					 #header {z-index:10000; position:static}
					#header .wrapper {position:static; padding:0; margin:0}
					.content {margin:0;}
					#header .menu { z-index:10000; border-radius:3px; -webkit-border-radius:3px; margin:0; display:none; padding:0 1em 0 1em;}
					#header .menu li {float:none; display:block; margin:0}
				 	.mobile-trigger { display:block;}
					.float {height:auto;}
					.sticky {position:static;}
					.shadow-fix {display:none !important;}
					#contact {background-image:none; height:auto; min-height:0;}
				 }


	/* misc */	
	.clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; overflow: hidden;}
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }
	






	/* DS: standard styles #################################################################################################### */	
	.clientwidecontent{
	  padding: 20px 0;
	}
	
	.clientwidecontent .sidecontent{
	  border-left: 1px solid #eee;
	  margin-left: 55px;
	  display: block;
	  padding: 10px 0 0 20px;
	}
	
	div.clientwidecontent .sidecontent ul{ list-style:none; margin:20px;   }
	div.clientwidecontent .sidecontent ul li{ padding:0px 10px 20px 30px; background:url('../img/bullet-arrow.jpg') top left no-repeat; line-height:20px;}
	div.clientwidecontent .sidecontent ul li a:link, div#clienthow ul li a:visited{ color:#000; text-decoration:none; }
	div.clientwidecontent .sidecontent ul li a:hover{ text-decoration:underline; }
	
	
	.clear{ clear: both; }
	.blue-gradient-bg{background: url('../img/blue-gradient-bg.jpg') center bottom no-repeat; padding-bottom: 10px;}
	.blue-gradient-bg p{margin-bottom: 10px;}
	
	.blue-gradient-bg-small{background: url('../img/blue-gradient-bg-small.jpg') center bottom no-repeat; padding-bottom: 10px;}
	.blue-gradient-bg-small p{margin-bottom: 10px;}
	
	.fancy-numbers .circle{
	  width: 38px;
	  height: 37px;
	  display: block;
	  text-align: center;
	  background: url('../img/reasons-circle.png') top left no-repeat;
	  float: left;
	  margin: 0;
	}
	
	.fancy-numbers li{
	  margin-bottom: 5px;
	  border-bottom: 1px dotted #ccc;
	  padding-bottom: 10px;
	}
	
	.fancy-numbers .circle strong{
	  font-size: 22px;
	  color: #fff;
	  padding: 5px 0;
	  display: block;
	}
	
	.fancy-numbers p{
	  display: block;
	  padding: 5px 0 0 0;
	  margin: 0 0 0 55px;
	}
	
	.fancy-numbers h3{
	  margin: 0 0 0 55px;
	}	
	.fancy-numbers h4{
	  margin: 0 0 0 55px;
	}		
	
	
	#left-of-20percent-container { display:inline-block; text-align:left; padding:0 .2em; width:20%; vertical-align:text-top }
	#right-of-70percent-container { display:inline-block; text-align:left; padding:0 .2em; width:70%; vertical-align:text-top }
	
	#checked { color:#70BA20; font-size:20px; margin-right:10px;}
	#book-interior-design-templates { margin-left:25px; margin-right:25px; padding:20px; }

	#standard_form_layout { height:30px; }
	
	

	/* transparent box */ 
	div.transbox
	{
	font: 15pt Verdana;
	height:100%;
	width:100%;
	margin:0px 0px;
	border:none;
	/* for IE */
	filter:alpha(opacity=100);
	/* CSS3 standard */
	opacity:0.8;
	background:#ffffff; 
	position:fixed; 
	z-index:200;
	}	


	



















/* 1. GLOBAL VARIABLES (Always at the very top) */
:root {
    --color-blue: #21538D;
    --color-green: #70BA20;
    --color-red: #C92D18;
    --color-sky: #20A5DF;
    --color-text: #626569;
}

/* 2. LAYOUT COMPONENTS */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 3rem 0;
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* 3. BUTTONS */
.btn-cta {
    display: inline-block;
    padding: 12px 25px;
    background: var(--color-green);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 1rem;
    transition: background 0.3s ease;
}

.btn-cta:hover {
    background: #5d9e1b;
}

.offshore-services {
    position: relative; /* Essential for the overlay to work */
    padding: 4rem 0;
    background: url('../img/bg2.png') repeat-x center bottom;
    background-size: cover;
}

/* The Overlay: Adjust opacity (0.7) to make it lighter/darker */
.offshore-services::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); 
    pointer-events: none; /* Allows user to still click buttons/links */
    z-index: 0;
}

/* Ensure content stays above the overlay */
.offshore-services .wrapper {
    position: relative;
    z-index: 1;
}

.offshore-services .section-title {
    color: var(--color-sky);
    font-family: 'mytitles', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 0.5rem;
}

.offshore-services .subtitle-group {
    margin-left: clamp(0px, 4vw, 40px);
    margin-bottom: 2rem;
}

.offshore-services .main-subtitle {
    font-family: 'mybody', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--color-red);
    margin: 0;
}

.offshore-services .seo-text {
    font-size: 0.9rem;
    color: #98999A;
    display: block;
    margin-top: 5px;
}

.offshore-services .content-body {
    font-family: 'mybody', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text);
    max-width: 900px;
}

.services-mockup img {
    width: 100%;
    height: auto;
    max-width: 500px; /* Prevents it from getting too large on big screens */
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2)); /* Professional soft shadow */
    transition: transform 0.4s ease;
}

/* Subtle hover effect for engagement */
.services-mockup img:hover {
    transform: translateY(-10px);
}

/* Helper to ensure text inside the grid looks professional */
.services-content .section-title {
    margin-bottom: 0.5rem;
    color: var(--color-sky);
}

.services-content .main-subtitle {
    margin-bottom: 1.5rem;
    color: var(--color-red);
}

.services-content .content-body {
    margin-bottom: 1.5rem;
}






.slide-bg-1 {
    background-image: linear-gradient(90deg, rgba(24, 28, 22, 0.98) 25%, rgba(139, 195, 74, 0.45) 100%), 
                     url('/slider/num1.jpg'); /* Added leading slash */
}

.slide-bg-2 {
    background-image: linear-gradient(90deg, rgba(28, 25, 22, 0.98) 25%, rgba(217, 119, 6, 0.45) 100%), 
                     url('/slider/num2.jpg'); /* Added leading slash */
}

.slide-bg-3 {
    background-image: linear-gradient(90deg, rgba(20, 24, 33, 0.98) 25%, rgba(13, 71, 161, 0.5) 100%), 
                     url('/slider/num3.jpg'); /* Added leading slash */
}

/* ==========================================
   SLIDER ARCHITECTURE (PRO BUILD)
   ========================================== */
.fullscreen-slider-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #1e1b18;
}

.modern-hero-slider {
    width: 100%;
    height: 500px; /* Perfect structural height balance for hero zones */
}

/* Base Slide Structure mimicking image_5471c7.jpg features layout styling */
.modern-hero-slider .swiper-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8% 60px 8%; /* Fluid dynamic padding percentages */
    box-sizing: border-box;
    position: relative;
}

/* Modern Text Layout Box */
.slide-inner-content {
    max-width: 650px; /* Clean constraints preventing text reading fatigue */
    z-index: 5;
    transform: translateY(-10px);
}

/* Typography Engineering */
.slide-title {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 18px 0;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.slide-title span {
    font-weight: 400;
    font-size: 30px;
    opacity: 0.9;
    letter-spacing: 0px;
    text-transform: none;
}

.slide-desc {
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

/* Bottom Left Context Ribbon Overlay from reference file structural alignment */
.slide-pricing-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #21538d; 
    padding: 16px 45px;
    border-top-right-radius: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.75px;
    z-index: 10;
    box-shadow: 5px -5px 20px rgba(0,0,0,0.2);
}

.slide-pricing-badge .price {
    font-weight: 700;
    color: #fbbf24; /* Elevated Premium Gold Accent */
}

.slide-pricing-badge .sep {
    opacity: 0.25;
    color: #fff;
}

.slide-pricing-badge .service {
    font-weight: 500;
    opacity: 0.9;
}

/* Premium Minimalist Navigation Controllers */
.modern-hero-slider .swiper-pagination {
    bottom: 25px !important;
    right: 8% !important;
    left: auto !important;
    width: auto !important;
    z-index: 10;
}

.modern-hero-slider .swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.35;
    width: 12px;
    height: 12px;
    margin: 0 6px !important;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.modern-hero-slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fbbf24 !important;
    transform: scale(1.25);
}

/* Rigid Breakpoint Adjustments For Impeccable Responsive Control */
@media (max-width: 1024px) {
    .modern-hero-slider { height: 460px; }
    .slide-title { font-size: 34px; }
    .slide-title span { font-size: 24px; }
    .slide-desc { font-size: 15px; }
}

@media (max-width: 768px) {
    .modern-hero-slider { height: 420px; }
    .modern-hero-slider .swiper-slide {
        padding: 0 5% 80px 5%; /* Opens room above the mobile stacking elements */
    }
    .slide-inner-content { max-width: 100%; }
    .slide-title { font-size: 28px; }
    .slide-title span { font-size: 20px; }
    
    /* Reposition badge elegantly on smaller mobile screens */
    .slide-pricing-badge {
        padding: 10px 20px;
        font-size: 12px;
    }
    .modern-hero-slider .swiper-pagination {
        bottom: 12px !important;
        right: 5% !important;
    }
}