@charset "utf-8";
/*
Template Name: Chillaid
Author: <a href="https://www.os-templates.com/">OS Templates</a>
Author URI: https://www.os-templates.com/
Copyright: OS-Templates.com
Licence: Free to use under our free template licence terms
Licence URI: https://www.os-templates.com/template-terms
File: Layout CSS
*/

@import url("fontawesome-free/css/fontawesome-all.min.css");
@import url("framework.css");

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1, .row1 a{}
.row2, .row2 a{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}


/* Header
--------------------------------------------------------------------------------------------------------------- */
#header{}

#header #logo{margin:22px 0 0 0;}

/* Estilo para el texto de la descripción */
.Descripcion {
    color: #ffffff; /* Blanco puro */
    font-size: 1.1rem;
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Sombra para mejor legibilidad */
  }
  
/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:200px 0 280px;}/* 280px => 80px for #introblocks negative margin */

#pageintro article, #pageintro article p{display:block; max-width:75%; margin:0 auto; text-align:center;}
#pageintro article p{max-width:65%; line-height:2rem;}
#pageintro .heading{margin-bottom:20px; font-size:4rem;}
#pageintro footer{margin-top:50px;}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:80px 0;}

/* Content */
.container .content{}

.sectiontitle{display:block; max-width:55%; margin:0 auto 80px; text-align:center;}
.sectiontitle *{margin:0;}

.elements{}
.elements-three li, .elements-four li{margin-bottom:50px;}
.elements-three li:nth-last-child(-n+3), .elements-four li:nth-last-child(-n+4){margin-bottom:0;}/* Removes bottom margin from the last line of items - margin is restored in the media queries when items stack */
.elements-three li:nth-child(3n+1), .elements-four li:nth-child(4n+1){margin-left:0; clear:left;}/* Removes the need to add class="first" */
.elements article{display:block; padding:30px 15px; border-radius:50px 0; text-align:center;}
.elements article *{margin:0 0 15px 0; padding:0; line-height:1;}
.elements article i{width:60px; height:60px; line-height:60px; margin-bottom:30px; font-size:1.6rem; text-align:center; border-radius:50%;}
.elements article .heading{font-size:1.2rem; font-weight:700;}
.elements article p{margin:0; line-height:normal;}

/* Introblocks */
#introblocks{display:block; position:relative; margin:-160px 0 130px 0; z-index:1;}/* 160px => 80px + container padding */

/* Services */
#services{}
#services .elements article{border-radius:0;}

/* Shout */
.shout{}
.shout figure{display:block; max-width:546px;/* same width as the image - contains the caption */}
.shout figure img{}
.shout figure figcaption{display:block; position:relative;}
.shout figure figcaption a{display:block; position:relative; padding:15px; border:solid; border-width:0 1px 1px 1px;}
.shout figure figcaption a::after{position:absolute; top:12px; right:15px; width:30px; height:30px; line-height:30px; font-family:"Font Awesome\ 5 Free"; font-weight:900; content:"\f105";/* fa-angle-right */ text-align:center; border-radius:50%;}

/* Team Members */
.team{}
.team li:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
.team figure{display:block; text-align:center;}
.team figure *{margin:0; padding:0;}
.team figure a{}
.team figure img{}
.team figure figcaption{padding:20px 10px; line-height:1; border:solid; border-width:0 1px 1px 1px;}
.team figure strong{display:block; margin-bottom:8px; font-size:1.4rem; font-weight:400;}
.team figure em{display:block; font-style:normal; font-size:.8rem;}

/* Easy Pie Charts */
.pr-charts{}
.pr-charts .pr-chart-ctrl{display:block; float:left; width:25%; min-height:200px;}
.pr-charts .pr-chart-ctrl .pr-chart{display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center;}
.pr-charts .pr-chart-ctrl .pr-chart canvas{display:block; margin:0 auto; padding:0; vertical-align:top;}
.pr-charts .pr-chart-ctrl .pr-chart i{position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:18px; font-style:normal;}/* Must have same height & line height as set in the javascript size element to vertical align centre */
.pr-charts .pr-chart-ctrl p{margin:0; padding:0; text-transform:uppercase;}

/* Testimonials */
#testimonials{}
#testimonials article{text-align:center;}
#testimonials article *{margin:0; padding:0;}
#testimonials article figure{display:inline-block; margin-bottom:20px;}
#testimonials article figure img{float:left; margin-right:15px; border-radius:50%;}
#testimonials article figure figcaption{float:left; margin-top:30px; font-size:1.4rem; text-align:left;}
#testimonials article figure figcaption .heading{font-size:1.4rem;}
#testimonials article figure figcaption em{display:block; margin-top:-5px; font-size:.8rem; font-style:normal;}
#testimonials article blockquote{margin-bottom:20px; padding:20px; border-radius:25px 0;}
#testimonials article blockquote::before{top:15px; left:15px; font-size:30px; line-height:30px;}

/* Latest */
#latest{}
#latest > li:last-child{margin-bottom:0;}/* Used when elements stack in small viewports */
#latest article{}
#latest article figure{}
#latest article figure img{}
#latest article .meta{display:block; margin:0 0 15px 0; padding:5px 10px;}
#latest article .meta li{display:block; float:left; width:50%; font-size:.8rem;}
#latest article .meta li:last-child{text-align:right;}
#latest article .meta li i{margin-right:5px;}
#latest article .excerpt{display:block; max-width:85%; margin:0 auto; padding:15px 0 15px 15px; border-left:1px solid;}
#latest article .excerpt time{display:block; margin-bottom:8px; text-transform:uppercase; font-size:.8rem; font-style:normal; line-height:1;}
#latest article .excerpt .heading{margin:0; padding:0; font-size:1.2rem;}

/* Comments */
#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
#comments li{margin:0 0 10px 0; padding:15px;}
#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
#comments address{font-weight:bold;}
#comments time{font-size:smaller;}
#comments .comcont{display:block; margin:0; padding:0;}
#comments .comcont p{margin:10px 5px 10px 0; padding:0;}

#comments form{display:block; width:100%;}
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
#comments textarea{overflow:auto;}
#comments div{margin-bottom:15px;}
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}

/* Sidebar */
.container .sidebar{}

.sidebar .sdb_holder{margin-bottom:50px;}
.sidebar .sdb_holder:last-child{margin-bottom:0;}


/* Contact Details
--------------------------------------------------------------------------------------------------------------- */
#ctdetails{}

#ctdetails figure > ul{}
#ctdetails figure > ul li{position:relative; margin:0 0 35px 0; padding:15px 15px 15px 80px; line-height:1;}
#ctdetails figure > ul li:last-child{margin:0;}/* Used when elements stack in small viewports */
#ctdetails figure > ul li i{position:absolute; top:15px; left:15px; width:45px; height:45px; line-height:45px; font-size:16px; text-align:center; border-radius:50%;}
#ctdetails figure > ul li span{display:block; padding:4px 0 0 0;}
#ctdetails figure > ul li strong{display:block; margin:0 0 8px 0; text-transform:capitalize;}

#ctdetails article{margin-bottom:0;}/* Used when elements stack in small viewports */
#ctdetails input, #ctdetails button{border:1px solid;}
#ctdetails input{display:block; width:100%; padding:15px; margin-bottom:20px;}
#ctdetails button{padding:8px 18px 10px; text-transform:uppercase; font-weight:400; cursor:pointer;}


/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:80px 0;}

#footer .heading{margin-bottom:50px; font-size:1.2rem;}
#footer .logoname{margin-bottom:50px;}
#footer p + .faico{margin-top:30px;}

#footer .linklist li{display:block; margin-bottom:15px; padding:0 0 15px 0; border-bottom:1px solid;}
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
#footer .linklist li, #footer .linklist li::after{clear:both;}

#footer .latestimg{}
#footer .latestimg > li{display:inline-block; float:left; width:30%; margin:0 0 5% 5%;}
#footer .latestimg > li:nth-last-child(-n+3){margin-bottom:0;}/* Removes bottom margin from the last three items - margin is restored in the media queries when items stack */
#footer .latestimg > li:nth-child(3n+1){margin-left:0; clear:left;}/* Removes the need to add class="first" */
#footer .latestimg > li img{width:100%;}/* Force the image to resize to take the full space - may have to be changed for tablets, depends on personal preference */
#footer .latestimg > li a.imgover{display:block;}


/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:20px 0;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


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


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"Font Awesome\ 5 Free"; font-weight:900; font-size:10px; line-height:10px;}

/* Top Navigation */
#mainav{}
#mainav ul{text-transform:uppercase;}
#mainav ul ul{position:absolute; width:180px; text-transform:none; z-index:9999;}
#mainav ul ul ul{left:180px; top:0;}
#mainav li{display:inline-block; position:relative; margin:0 15px 0 0; padding:0;}
#mainav li:last-child{margin-right:0;}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding:30px 0;}
#mainav li li a{border:solid; border-width:0 0 1px 0;}
#mainav .drop{padding-left:15px;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}
#mainav .drop::after{top:35px; left:5px;}
#mainav li li .drop::after{top:15px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}

#mainav form{display:none; width:100%; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:none;}
#mainav form select option{margin:5px; padding:0; border:none;}

/* Breadcrumb */
#breadcrumb{padding:150px 0 30px;}
#breadcrumb ul{margin:0; padding:0; list-style:none; text-transform:uppercase;}
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px;}
#breadcrumb li a::after{top:4px; right:0; content:"\f0da";}
#breadcrumb li:last-child a{margin:0; padding:0;}
#breadcrumb li:last-child a::after{display:none;}
#breadcrumb .heading{margin:0; font-size:2rem;}

/* Sidebar Navigation */
.sidebar nav{display:block; width:100%;}
.sidebar nav li{margin:0 0 3px 0; padding:0;}
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
.sidebar nav a::after{top:10px; left:5px; content:"\f0da";}
.sidebar nav ul ul a{padding-left:35px;}
.sidebar nav ul ul a::after{left:25px;}
.sidebar nav ul ul ul a{padding-left:55px;}
.sidebar nav ul ul ul a::after{left:45px;}

/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center;}

.faico a{color:inherit; background-color:#282E39;}
.faico a:hover{color:#FFFFFF;}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-vk:hover{background-color:#4E658E;}


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


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#A5A6AA; background-color:#282E39;}
a{color:#97A9BD;}
a:active, a:focus{background:transparent !important;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#97A9BD !important;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(40,46,57,.7);/* #282E39 */}
.overlay.light::after{background-color:rgba(151,169,189,.7);/* #97A9BD */}

.gradient{color:#474747; background:linear-gradient(to bottom, #F4F4F4 55%, #FFFFFF 50%, #FFFFFF 100%);}/* Overlap dark to make a hard transition */
@media screen and (max-width:750px){/* Only the colours height has been changed */
	.gradient{background:linear-gradient(to bottom, #F4F4F4 24%, #FFFFFF 19%, #FFFFFF 100%);}
}

.btn, .btn.inverse:hover{color:#FFFFFF; background-color:#97A9BD; border-color:#97A9BD;}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

.imgover:hover::before{background-color:rgba(151,169,189,.5);/* #97A9BD */}
.imgover, .imgover:hover::after{color:#FFFFFF;}

.logoname a{color:#FFFFFF;}
.logoname::first-letter, .logoname span{color:#50bcd9;}

#logo {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  #logo img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
  }
  
  #logo img:hover {
    transform: scale(1.1);
  }
  


/* Rows */
.row0, .row0 a{}
.row1{color:#FFFFFF; background-color:#000000;}
.row2{color:#474747; background-color:#F4F4F4;}
.row3{color:#474747; background-color:#FFFFFF;}
.row4{color:#A5A6AA; background-color:#000000;}
.row5, .row5 a{color:#A5A6AA; background-color:#282E39;}
.coloured{color:#FFFFFF; background-color:#97A9BD;}





/* Page Intro */
#pageintro{color:#FFFFFF;}


/* Content Area */
.elements article{color:#474747; background-color:#FFFFFF; box-shadow:0px 0px 15px rgba(0,0,0,.3);}
.elements article:hover{color:#FFFFFF; background-color:#97A9BD;}/* Default */
.elements article a i{color:#FFFFFF; background-color:#97A9BD;}/* Default */
.elements article:hover a i{color:#97A9BD; background-color:#FFFFFF;}/* Default */

/* ###### DELETE THE FOLLOWING IF ONLY THE DEFAULT COLOUR IS REQUIRED ###### */
#introblocks .elements li article{color:#FFFFFF; background-color:#97A9BD;}/* Blue */
#introblocks .elements li article a i{color:#97A9BD; background-color:#FFFFFF;}/* Blue */
#introblocks .elements li article:hover{color:#474747; background-color:#FFFFFF !important;}
#introblocks .elements li article:hover a i{color:#FFFFFF !important; background-color:#97A9BD;}
#introblocks .elements li:nth-child(2) article, #introblocks .elements li:nth-child(2) article:hover a i{background-color:#A197BD;}/* Purple */
#introblocks .elements li:nth-child(2) article a i{color:#A197BD;}/* Purple */
#introblocks .elements li:nth-child(3) article, #introblocks .elements li:nth-child(3) article:hover a i{background-color:#BDA697;}/* Brown */
#introblocks .elements li:nth-child(3) article a i{color:#BDA697;}/* Brown */
#introblocks .elements li:nth-child(4) article, #introblocks .elements li:nth-child(4) article:hover a i{background-color:#97BDAB;}/* Green */
#introblocks .elements li:nth-child(4) article a i{color:#97BDAB;}/* Green */
/* ###### END DELETE ###### */

.shout figure figcaption a{color:inherit; background-color:inherit; border-color:#D7D7D7;}
.shout figure:hover figcaption a, .shout figure figcaption a::after{color:#FFFFFF; background-color:#97A9BD; border-color:#97A9BD;}
.shout figure:hover figcaption a::after{color:#97A9BD; background-color:#FFFFFF;}

.team figure figcaption{color:#474747; background-color:#FFFFFF; border-color:#D7D7D7;}

#testimonials article blockquote{color:#474747; background-color:#FFFFFF;}
#testimonials article blockquote::before{color:rgba(0,0,0,.05);}
#testimonials article blockquote::after{border-top-color:#FFFFFF;}

#latest article .meta, #latest article .meta *{color:#FFFFFF; background-color:#282E39;}
#latest article .excerpt{border-color:#D7D7D7;}


/* Contact Details */
#ctdetails figure > ul li{color:inherit; background-color:#FFFFFF;}
#ctdetails figure > ul li:hover a{color:#FFFFFF;}
#ctdetails figure > ul li:hover, #ctdetails figure > ul li a i{color:#FFFFFF; background-color:#97A9BD;}/* Default */
#ctdetails figure > ul li:hover a i{color:#97A9BD; background-color:#FFFFFF;}/* Default */

/* ###### DELETE THE FOLLOWING IF ONLY THE DEFAULT COLOUR IS REQUIRED ###### */
#ctdetails figure > ul li:hover, #ctdetails figure > ul li a i{color:#FFFFFF; background-color:#A197BD;}
#ctdetails figure > ul li:hover a i{color:#A197BD; background-color:#FFFFFF !important;}
#ctdetails figure > ul li:nth-child(2):hover, #ctdetails figure > ul li:nth-child(2) a i{background-color:#BDA697;}
#ctdetails figure > ul li:nth-child(2):hover a i{color:#BDA697;}
#ctdetails figure > ul li:nth-child(3):hover, #ctdetails figure > ul li:nth-child(3) a i{background-color:#97BDAB;}
#ctdetails figure > ul li:nth-child(3):hover a i{color:#97BDAB;}
/* ###### END DELETE ###### */

#ctdetails input, #ctdetails button{border-color:transparent;}
#ctdetails input{color:#474747; background-color:#FFFFFF;}
#ctdetails button{color:#FFFFFF; background-color:#97A9BD;}
#ctdetails button:hover{color:inherit; background-color:transparent; border-color:inherit;}


/* Footer */
#footer .heading{color:#FFFFFF;}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(255,255,255,.1);}


/* Navigation */
#mainav li a{color:inherit;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#97A9BD; background-color:inherit;}
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(151,169,189,.5); border-color:rgba(151,169,189,.5);/* #97A9BD */}
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#97A9BD;}
#mainav form select{color:#474747; background-color:#FFFFFF;}

#breadcrumb a{color:inherit; background-color:inherit;}
#breadcrumb li:last-child a{color:#97A9BD;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#97A9BD;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#97A9BD;}

#backtotop{color:#FFFFFF; background-color:#97A9BD;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}


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


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1140px){
	.hoc{max-width:1140px;}
}

@media screen and (min-width:978px) and (max-width:1140px){
	.hoc{max-width:95%;}
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
	.hoc{max-width:90%;}

	#header{padding:30px 0;}
	#header #logo{margin-top:0;}

	#mainav{}
	#mainav ul{display:none;}
	#mainav form{display:block; margin-top:2px;}

	#breadcrumb{}

	.container{}
	#comments input[type="reset"]{margin-top:10px;}
	.pagination li{display:inline-block; margin:0 5px 5px 0;}

	#footer{}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}

@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;}/* Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0;}

	#header{text-align:center;}
	#header #logo{margin:0 0 15px 0;}

	#pageintro article, #pageintro article p{max-width:none;}
	#pageintro .heading{font-size:2rem;}

	.sectiontitle{max-width:none;}
	.shout figure, .team li, #latest > li{margin:0 auto 50px;}
	.team li, #latest li{max-width:348px;}/* Restrict the width to the one_third grid element */
	.elements-three li:nth-last-child(-n+3), .elements-four li:nth-last-child(-n+4){margin-bottom:50px;}
	.elements-three li:last-child, .elements-four li:last-child, .shout figure:last-child{margin-bottom:0;}

	#ctdetails figure{margin-bottom:80px;}/* Gives good separation between the two elements */

	#footer{padding-bottom:50px;}/* Not needed - just looks better */
	#footer .latestimg > li, #footer .latestimg > li:nth-last-child(-n+3){display:inline-block; float:none; width:auto; margin:0 5% 5% 0;}
	#footer .latestimg > li:last-child{margin-bottom:0;}
	#footer .latestimg > li img{width:auto;}
}

@media screen and (min-width:451px) and (max-width:900px){
	.pr-charts .pr-chart-ctrl{width:50%; margin-bottom:50px;}
	.pr-charts .pr-chart-ctrl:nth-child(n+3){margin-bottom:0;}
}

@media screen and (max-width:450px){
	.pr-charts .pr-chart-ctrl{width:100%; margin-bottom:50px;}
	.pr-charts .pr-chart-ctrl:last-child{margin-bottom:0;}

	#testimonials article figure img{float:none; margin:0 0 20px 0;}
	#testimonials article figure figcaption{float:none; margin:0; text-align:center;}
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.6rem;}
	.font-x3{font-size:1.8rem;}
}



/* Cambios MK Corporación */

.nosotros {
	padding: auto;
	background-color: #f8f9fa;
	font-family: 'Arial', sans-serif;
  }
  
  .nosotros .container {
	max-width: 1200px;
	margin: 0 auto;
  }
  
  .nosotros .section-title {
	font-size: 2.5rem;  /* Aumentar el tamaño del título principal */
	font-weight: 700;  /* Mayor grosor para destacarlo más */
	color: #00BFFF;  /* Cambiar a un color más llamativo */
	text-align: center;
	margin-bottom: 20px;  /* Aumentar el espacio debajo */
	letter-spacing: 2px;  /* Agregar un pequeño espacio entre letras */
	text-transform: uppercase;  /* Convertir a mayúsculas para darle fuerza */
	font-family: 'Poppins', sans-serif;  /* Usar una tipografía más moderna */
  }
  
  .nosotros .section-subtitle {
	font-size: 1.4rem;  /* Aumentar el tamaño del subtítulo */
	color: #555;  /* Un gris oscuro para una buena legibilidad */
	text-align: center;
	margin-bottom: 40px;  /* Más espacio para separar el subtítulo del contenido */
	font-weight: 500;  /* Menor peso que el título, pero destacable */
	font-family: 'Poppins', sans-serif;  /* Tipografía moderna */
	letter-spacing: 1px;  /* Espacio entre letras para mejor legibilidad */
  }
  
  /* Fuente Poppins desde Google Fonts (si no la tienes incluida ya) */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
  
  .nosotros .about-text {
	margin-bottom: 30px;
  }
  
  .nosotros p {
	font-size: 1rem;
	line-height: 1.6;
	color: #555;
  }
  
  .nosotros .about-img-large {
	width: 90%;
	border-radius: 8px;
	margin-top: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .nosotros .about-images {
	text-align: center;
  }
  
  .nosotros .image-group {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
	justify-content: center;
  }
  
  .nosotros .about-img-small {
	width: 48%;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .nosotros b {
	color: #333;
	font-size: 1.1rem;
	font-weight: bold;
  }
  


/* Portafolio en galería */
#portfolio {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.section-title {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
}

.section-subtitle {
    font-size: 18px;
    color: #777;
    margin-bottom: 40px;
    text-align: center;
}

.filters {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.filters a {
    font-size: 16px;
    font-weight: 500;
    margin-right: 15px;
    color: #555;
    padding: 10px 15px;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.filters a.active, .filters a:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.portfolio-container {
    display: flex; /* Cambiar a flexbox */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente (si es necesario) */
    width: 50%; /* Ancho del 50% */
    margin: 0 auto; 
    gap: 30px;
    flex-wrap: wrap;
}


.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: scale(1.05);
}

.portfolio-item img {
    width: 100%;   
    height: 250px;  
    object-fit: cover; 
    transition: opacity 0.3s ease;
}


.portfolio-item .content-holder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}

.portfolio-item:hover .content-holder {
    opacity: 1;
}

.portfolio-item .text-holder {
    margin-top: 20px;
}

.portfolio-item .text-holder .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.portfolio-item .text-holder .subtitle {
    font-size: 14px;
    color: #ddd;
}

/* Mision y Vision */
.container-vision-mision {
	padding: auto;
}

.section-title {
	font-size: 2.5rem;
	font-weight: bold;
	color: #013A63; /* Azul Bosque */
	text-align: center;
	margin-bottom: 30px;
	text-transform: uppercase;
}

.section-subtitle {
	font-size: 1.3rem;
	color: #00BFFF; /* Celeste Real */
	text-align: center;
	margin-bottom: 30px;
	font-weight: 500;
}

.vision-mision-text {
	font-size: 1rem;
	line-height: 1.6;
	color: #555;
}

.eslogan {
	background-color: #013A63; /* Naranja Mediodía */
	color: white;
	padding: 20px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	border-radius: 10px;
	margin-top: 40px;
}

/* Diseño de carta personalizada */
.card-vision-mission {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-vision-mission h3 {
    font-size: 2rem;
    color: #013A63; /* Azul Bosque */
}

.card-vision-mission p {
    font-size: 1.1rem;
    color: #555;
}

/* Animación al hacer scroll */
.section-content {
    opacity: 0;
    transform: translateY(30px) scale(0.95); /* Se inicia ligeramente más pequeño y desplazado */
    transition: all 0.6s ease-in-out;
}

.section-content.visible {
    opacity: 1;
    transform: translateY(0) scale(1); /* Se mueve a su posición original y crece */
}

.section-content:hover {
    transform: translateY(-10px) scale(1.05); /* Cuando el usuario pasa el mouse, la carta sube y se agranda ligeramente */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Aumenta la sombra para dar el efecto de profundidad */
}

@media (max-width: 767px) {
    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1.1rem;
    }

    .eslogan {
        font-size: 1rem;
    }
}


.container_cv {
    max-width: 600px;
    margin: 50px auto;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.container_cv h1 {
    text-align: center;
    font-size: 24px;
    color: #333333;
}

.container_cv p {
    text-align: center;
    color: #666666;
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333333;
}

input[type="text"],
input[type="email"],
input[type="file"] {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 14px;
}

button {
    padding: 12px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

/* Boton Link CV */

.btn-cv {
    display: inline-block;
    text-decoration: none;
    background-color: #4CAF50; /* Verde agradable */
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.btn-cv:hover {
    background-color: #45a049; /* Color más oscuro al pasar el cursor */
    transform: translateY(-3px); /* Levanta ligeramente el botón */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn-cv:active {
    transform: translateY(1px); /* Efecto de pulsación */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Estilo para el título */
.TituloUBI {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Contenedor de la ubicación */
.container-fluid {
  padding: 50px 15px;
}

/* Ajustes para la disposición del contenido */
.d-flex {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
  align-items: center;
  justify-content: center;
}

/* Imagen */
.d-flex img {
  width: 300px; /* Tamaño estándar */
  height: 300px;
  border-radius: 10px;
  object-fit: cover;
  margin-right: 20px;
}
/* Contenido de texto */
.overlay-text {
  max-width: 600px;
}

.overlay-text h6 {
  font-size: 1.2rem;
  color: #79C9D8; /* Celeste */
  font-weight: bold;
}

.overlay-text h1 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffffff; /* Azul oscuro */
}

.overlay-text p {
  font-size: 1rem;
  color: #79C9D8; /* Gris azulado */
  line-height: 1.6;
}

.overlay-text ul {
  padding-left: 0;
  list-style: none;
}

.overlay-text ul li {
  font-size: 1rem;
  color: #ffffff; /* Gris azulado */
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.overlay-text ul li i {
  margin-right: 10px;
  color: #ffffff; /* Azul oscuro */
}

/* Botón estilizado */
.btn-primary {
  background-color: #013E51; /* Azul oscuro */
  border: none;
  padding: 12px 25px;
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #03171a; /* Celeste */
  transform: translateY(-2px);
  box-shadow: 0px 4px 10px rgba(1, 62, 81, 0.5);
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .d-flex {
    flex-direction: column; /* Apila la imagen y el texto */
    text-align: center;
  }

  .d-flex img {
    margin: 0 auto 20px auto;
  }

  .overlay-text {
    max-width: 100%;
  }
}

/* Postulaciones*/
/* Colores corporativos */
.text-primary {
  color: #ffffff !important;
  font-size: 3rem; /* Ajusta el tamaño según necesites */
  text-transform: uppercase; /* Convierte el texto en mayúsculas */
  font-weight: bold; /* Hace el texto más grueso */
}


.text-dark {
  color: #ffffff !important;
}

.text-muted {
  color: #96AFB7 !important;
}

.btn-primary {
  background-color: #013E51 !important;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #79C9D8 !important;
  transform: translateY(-2px);
  box-shadow: 0px 4px 10px rgba(1, 62, 81, 0.5);
}

/* Línea decorativa */
.line-dec {
  width: 50px;
  height: 4px;
  background-color: #013E51;
  margin: 10px auto 20px;
}

/* Ajuste de Espaciado */
.row {
  margin: 0;
}

.col-lg-5 img {
  max-width: 100%;
  height: auto;
}

.col-lg-7 {
  padding: 15px;
}

/**/

  
   /* Estilo para las tarjetas */
   .team-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
  }
  .team-card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .team-card:hover img {
    transform: scale(1.1);
  }

  /* Botones del carrusel más pequeños */
  .small-btn {
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
  }
  .custom-icon {
    width: 10px;
    height: 10px;
  }


  /* Estilo de las tarjetas */
.testimonial-card {
    background: #fff;
    border-radius: 12px;
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    padding: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
  }
  
  /* Efecto de elevación y escala al pasar el mouse */
  .testimonial-card:hover {
    transform: scale(1.05);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
  }
  
  /* Efecto sutil de luz en el fondo al pasar el mouse */
  .testimonial-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 80%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease-out;
  }
  
  /* Se activa cuando pasas el mouse */
  .testimonial-card:hover::before {
    transform: translate(-50%, -50%) scale(1);
  }
  
  /* Imagen de los clientes */
  .testimonial-img img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #007bff; /* Borde sutil para destacar */
    transition: border-color 0.3s ease-in-out;
  }
  
  /* Efecto al pasar el cursor sobre la imagen */
  .testimonial-card:hover .testimonial-img img {
    border-color: #0056b3;
  }
  
  /* Cita estilizada */
  p {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    font-style: italic;
    transition: color 0.3s ease-in-out;
  }
  
  /* Cambia el color de la cita al pasar el mouse */
  .testimonial-card:hover p {
    color: #222;
  }
  

/**/
/* Contenedor principal de cada gráfico */
.pr-chart {
    width: 100px;
    height: 100px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  
  /* Texto dentro del círculo (porcentaje) */
  .pr-chart span {
    position: absolute;
    font-size: 1.2rem;
    font-weight: bold;
    color: #222;
  }