/* ----------------------------------------------------------------------------------------
* Author        : Ambidextrousbd
* Template Name : Hostland | One Page Multipurpose Html Template
* File          : Hostland main CSS file
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */





/* INDEX
----------------------------------------------------------------------------------------

01. General css

02. Navigation area css

03. Slider area css

04. About area css

05. Feature-area css

06. Why Choose area css

07. Fun facts Css

08. Pricing area css

09. Testimonial area css

10. News area css

11. plan section css

12. Contact area css

13. Subscribe area css

14. Footer area css

15. copyright-area css

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


/* Google Fonts lato and open sans */
@import url('https://fonts.googleapis.com/css?family=Lato:300,700,900|Open+Sans');



/* ----------------------------------------------------------------------------------------
*                                       01. General css
* -------------------------------------------------------------------------------------- */

html,
body {
    height: 100%
}

body {
    color: #333;
    font-weight: 400;
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 1.6;
    font-family: 'Open Sans','Myriad Pro', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    color: #333;
    font-family: 'Open Sans', sans-serif;
}

.subtitle {
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

p {
}

a {
    text-decoration: none;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

a:hover {
    color: #fff;
    text-decoration: none;
}

a:focus {
    outline: none;
    text-decoration: none;
}

ul,
li {
    margin: 0;
    padding: 0;
}

fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
    outline: none;
}

.btn, input[type='submit'] {
    background: #2b74b9; /* Tu azul claro/acción */
    color: #fff;
    border: none;
    font-family: 'Lato';
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 4px; /* Un pequeño redondeo se ve más moderno que 0px */
}

.btn.btn-trnsp {
    background: transparent;
    border: 1px solid #000;
    color: #000;
}

.btn-big {
    border: 2px solid #000;
    font-size: 20px;
    font-weight: 900;

}

.btn.btn-trnsp:hover {
    border-color: #82b541;
    background: #82b541;
    color: #fff;
}

.section-big {
    padding: 95px 0px;
}

.section-small {
    padding: 50px 0px;
}

.section-title {
    margin: auto;
    max-width: 700px;
    margin-bottom: 70px;
    margin-top: 0px;
}

.section-title h2 {
    font-size: 24px;
    font-weight: 900;
	color: #002261;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
}

.inner-title{
    margin: auto;
    max-width: 700px;
    margin-bottom: 70px;
    margin-top: 70px;
}

.inner-title h2 {
    font-size: 24px;
    font-weight: 900;
    color: #002261;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
}

.section-title h1 {
    font-size: 40px;
    font-weight: 900;
	color: #333;
    margin-bottom: 25px;
    margin-top: 0;
    
}



/* preloader css */

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow: visible;
    background-image: url(../img/preloader.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
}

img {
    max-width: 100%;
}

/* .header-space{height: 96px;} *


/* ----------------------------------------------------------------------------------------
*                               02. Navigation area css
* --------------------------------------------------------------------------------------- */

/*
.menu-area.navbar-fixed-top {
    background: #fff;
    top: 0px;
    height: 95px;
}

.menu-area.navbar-fixed-top.sticky-menu {
    top: 0px;
    height: 75px;
}
*/

.sticky-menu {
    box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

.mainmenu {
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

.sticky-menu .mainmenu {
    padding-top: 0px;
}

/*
.navbar {
    margin-bottom: 0;
    border: 0px;
	margin-top: 25px; 
}

.sticky-menu .navbar {
    margin-top: 14px;
}
*/

.navbar-brand {
    padding: 0px;
}

.navbar-brand:hover {
    color: #82b541;
}

.mainmenu ul.navbar-nav {
   
}

/*
.navbar-nav  li {
    float: none;
    display: inline-block;
	padding: 10px 20px;
}
*/

.navbar-nav li a {
    color: #333;
    font-weight: 900;
    font-size: 16px;
    padding: 0;
}

.nav > li > a:hover,
.nav > li > a:active,
.nav > li > a:focus {
    background: none;
}

.navbar-collapse .navbar-nav li.active a {
    color: #2b74b9;
    border-bottom: 1px solid #2b74b9;
}

.navbar-collapse li .chat-button {
    border: none;
    padding: 10px 45px;
    background: #002261;
	color: #fff;
}

.navbar-collapse li .chat-button:hover {
	color: #fff;
    background: #2b74b9;
}



/* Mobile Nav css */
.navbar-toggle .icon-bar {
	background: #e44032;
}


/* WhatsApp button */
/*
.whatsapp-btn {
    background: #25D366;
    color: #fff !important;
    border-radius: 4px;
    padding: 8px 14px;
    display: inline-block;
}

.navbar-collapse li .whatsapp-btn:hover {
    background: #128C7E;
    color: #fff;
}
*/


/* WhatsApp - color base (reemplaza el rojo original) */
.navbar-collapse li .chat-button.whatsapp-btn {
    background: #25D366;   /* verde base */
    color: #fff !important;
}

/* Hover (verde distinto) */
.navbar-collapse li .chat-button.whatsapp-btn:hover {
    background: #128C7E;   /* verde hover */
    color: #fff;
}


/* ----------------------------------------------------------------------------------------
* 03. Slider area css - althek FIXED FINAL
* -------------------------------------------------------------------------------------- */

.slider-area {
    background: url(../img/bg/slider-bg5.png) center center / cover no-repeat;
    height: 600px;
    position: relative;
    display: table;
    width: 100%;
}

.slider-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 34, 97, 0.85);
    z-index: 1;
}

.table {
    display: table !important; /* Forzamos comportamiento de tabla */
    width: 100%;
    height: 600px !important;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    border-collapse: collapse;
}

.table-cell {
    display: table-cell !important;
    vertical-align: middle !important; /* ESTO CENTRA VERTICALMENTE */
    text-align: center !important;    /* ESTO CENTRA HORIZONTALMENTE */
}

.intro-text h1 {
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.intro-text h2.domain-search-text {
    font-size: 24px;
    color: #74ccff !important;
    margin: 0 0 35px 0;
}

/* Buscador Estilizado */
/* --- BUSCADOR: Ajuste Quirúrgico de Medidas --- */

.search-box {
    display: flex !important; /* Ahora el form es el flex */
    align-items: center;
    width: 100%;
    margin: 0;
}

.search-box-area {
    max-width: 600px; 
    margin: 0 auto;
    padding: 10px;
    background: #2b74b9;
    border-radius: 8px;
    flex-wrap: nowrap;   /* PROHIBIDO que el botón se baje de renglón */
    align-items: center;
}

.search-box-area .domain {
    flex: 1 !important;  /* El input se estira TODO lo posible */
    width: auto !important; /* Quitamos el 100% que causaba el desborde */
    height: 50px;
    padding: 0 15px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    outline: none;
    width: auto !important;
}

.search-box-area input[type='submit'] {
    flex-shrink: 0;      /* El botón defiende su tamaño y no se deja aplastar */
    width: 120px;        /* Tu medida fija */
    height: 50px;
    background: #002261;
    color: #fff;
    margin-left: 10px;   /* El espacio entre ellos */
    border-radius: 5px;
    cursor: pointer;
}

.search-box-area input[type='submit']:hover {
    background: #1a4a8d;
}

/* ============================================================
   AJUSTE MOBILE PARA althek Global Services (Buscador)
   ============================================================ */
@media (max-width: 767px) {
    
    /* Forzamos al form a ponerse en columna */
    .search-box {
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
    }

    /* El input recupera su tamaño y deja de ser un puntito */
    .search-box .domain {
        width: 100% !important;
        margin-bottom: 15px !important; /* Espacio real entre input y botón */
        margin-right: 0 !important;    /* Quitamos margen lateral en móvil */
        flex: none !important;          /* Evitamos que el flex lo rompa */
        height: 50px !important;
    }

    /* El botón deja de ser gigante y se ajusta al ancho */
    .search-box .submit {
        width: 100% !important;
        margin-left: 0 !important;      /* Quitamos el margen de la izquierda */
        height: 50px !important;
        flex: none !important;
    }

    /* Ajuste extra para el contenedor azul para que respire */
    .search-box-area {
        padding: 20px 15px !important;
        max-width: 90% !important; /* Para que no pegue a los bordes del celular */
    }
}


/* ----------------------------------------------------------------------------------------
*                               04. About area css
* ---------------------------------------------------------------------------------------*/

.about-area {
    background: #fff;
}

@media (min-width: 768px) {
    .about-area .single-about {
        padding-bottom: 40px;
    }
}

.about-text h3 {
    margin-top: 0px;
}

.about-text ul {
    margin-top: 10px;
    margin-left: 30px;
    list-style: none;
}

.about-text ul li {
    line-height: 30px;
    position: relative;

}

.about-text ul li:before {
    position: absolute;
    content: '';
    width: 12px;
    height: 12px;
    left: -30px;
    top: 50%;
    margin-top: -5px;
    border: 2px solid #333;
    border-radius: 50px;
}

.about-text .btn {
    margin-top: 20px;
}


/* ----------------------------------------------------------------------------------------
*                                   05.Feature-area css
* --------------------------------------------------------------------------------------- */

.feature-area{
	padding-bottom: 0px;

}

.home-services .service-box {
   text-align:center;
   margin-bottom: 50px;
}


.home-services .service-box h3 {
    margin-top: 0;
    position: relative;
    margin-bottom: 25px;
}

.home-services .service-box img{
    margin-bottom: 15px;
}

/* ----------------------------------------------------------------------------------------
*                                   06. Why Choose area css
* --------------------------------------------------------------------------------------- */

.promo-area{
	padding-bottom: 0px;
}

.about-area .container {
    max-width: 1000px;
}

.choose-box {
    margin-bottom: 30px;
}

.why-choose-area img {
    width: 100%;
    border-radius: 10px;
}

.choose-box i.fa {
    position: relative;
    font-size: 30px;
    width: 60px;
}

.choose-box.left {
    text-align: right;
	margin-right: 20px;
}

.choose-box.left i.fa {
    float: right;
}

.choose-box.right {
  text-align: left;
	margin-left: 20px;
}

.choose-box.right i.fa {
    float: left;
}

.choose-content {
    overflow: hidden;
}
.choose-content h3 {
    margin-top: 0px;
    position: relative;
}



/* ----------------------------------------------------------------------------------------
*                                   07. Fun facts area css
* --------------------------------------------------------------------------------------- */

.fun-facts-area{
    background-image: url(../img/parallax.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.fun-facts-area:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(00, 00, 00, 0.75);
}

.fun-fact h3 {
    font-size: 36px;
    font-weight: 900;
	color: #fff;
}
.fun-fact p {
	color: #fff;
}



/* ----------------------------------------------------------------------------------------
*                                   08. Pricing area css
* --------------------------------------------------------------------------------------- */

.pricing-area {
    padding-bottom: 0px;
}

.price-item {
    margin: 0;
    background-color: #ddd;
    text-align: center;
    position: relative;
}

.host-plan p {
    margin: 0px;
    padding: 15px 0px;
}

p.column-first {
    background: #ddd;
}

p.column-second {
    background: #fff;
}

.price-item p.level {
    font-size: 18px;
    line-height: 65px;
    margin: 0;
    background: #2B4050;
	color: #fff;
}

.price-item p.featured {
    font-size: 18px;
    line-height: 65px;
    margin: 0;
    background: #2b74b9;
	color: #fff;
}

.price-item a.featured-button {
    background: #2b74b9 !important;
}

.price-item a.featured-button:hover {
    background: #333 !important;
}

.price-item a.btn {
    background: #002261;
    width: 100%;
    color: #fff;
	padding: 20px 0;
}

.price-item a.btn:hover {
    background: #2b74b9;
}

@media  (min-width: 768px) {

    div.col-sm-7.five-three {
		width: 60% !important;
    }

    div.col-sm-5.five-two {
		width: 40% !important;
    }
	
	.space{padding:1px!important}
}




/* ----------------------------------------------------------------------------------------
*                                9. Testimonial area css
* --------------------------------------------------------------------------------------- */


.single-testimonial {
	text-align: center;
	padding: 0px 25px;
}

.single-testimonial img {
    overflow: hidden;
    height: 120px;
    width: 120px;
    border-radius: 100px;
}

.single-testimonial i.fa {
    font-size: 60px;
    margin-bottom: 10px;
    display: inline-block;
    color: #82b541;
}

.single-testimonial p {
    margin: 0;
	font-size: 15px;
	
}

.single-testimonial h4 {
	margin-top: 20px;
	margin-bottom: 5px;
	font-weight: 700;
	text-transform: uppercase;
	color: #df4b3b;
}

.single-testimonial .desg {
    margin-bottom: 20px;
}

.owl-theme .owl-controls {
    margin-top: 40px;
}

.owl-theme .owl-controls .owl-page span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);
    border: 1px solid #df4b3b;
    float: left;
}

.owl-pagination {
    width: 110px;
    margin: auto;
}

.owl-page.active span {
    background: #df4b3b;
}

.owl-theme .owl-controls .owl-buttons div {
    font-size: 25px;
    background: none;
    padding: 5px;
}




/* ----------------------------------------------------------------------------------------
*                                   10. News area css
* --------------------------------------------------------------------------------------- */
.news-area {}
.single-news {}

.news-image {
    float: left;
	margin-right: 25px;
}

.blog-content {
    display: block;
    overflow: hidden;
}

.blog-content h2{
	margin-top:0px;
	font-size: 20px;
}

.news-image img {
    width: 100%;
}

.news-content .subtitle {
    text-transform: inherit;
    line-height: 28px;
}

.news-content .subtitle i.fa {
    color: #82b541;
}

.news-content .btn {
    margin-top: 10px;
}


.news-meta {
    display: block;
    clear: both;
    overflow: hidden;
    margin-bottom: 15px;
}

.news-meta span {
    float: left;
    margin-right: 15px;
}

.news-meta span i.fa {
    margin-right: 4px;
}

/* Cambiar el naranja de la meta del blog (Admin y Fecha) */
.news-meta {
    color: #2b74b9 !important; /* Tu azul de acción Althek */
}

.news-meta span i.fa {
    color: #002261; /* Azul profundo para los iconos de usuario/calendario */
}

/* El botón de Leer más */
.news-content .btn {
    background: #002261;
    border-radius: 4px;
}

.news-content .btn:hover {
    background: #2b74b9;
}

/* ----------------------------------------------------------------------------------------
*                                   11. plan section css
* --------------------------------------------------------------------------------------- */

.plan-area{
	background: #2B4050;
}

.plan-content {
    position: relative;
    max-width: 910px;
    margin: auto;
}

.plan-content h1 {
    color: #fff;
}
.plan-select {
    position: absolute;
    right: 0px;
    top: 0px;
}

.plan-select .btn {
    background: #fff;
    color: #E44032;
}
.plan-select .btn:hover {
    background: #E44032;
    color: #fff;
}



/* ----------------------------------------------------------------------------------------
*                                   12. Contact area css
* --------------------------------------------------------------------------------------- */
.contact-form h2 {
    padding: 50px 0px;
    font-size: 20px;
    text-align: center;
	text-transform: uppercase;
    line-height: 32px;
}

.form-control {
    display: block;
    border: 0px;
    width: 100%;
    height: 45px;
    padding: 5px 0px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
    background-image: none;
    border-radius: 0px;
    box-shadow: none;
    margin-bottom: 5px;
}

.form-control:focus {
    border-color: #000;
    outline: 0;
    box-shadow: none;
}

.contact-form .form-group {
    position: relative;
    border: 1px solid #bbb;
    padding-left: 10px;
    margin-bottom: 30px;
}

.contact-form .form-group:before {
    position: absolute;
    height: 45px;
    font-family: FontAwesome;
    top: 0;
    left: 0;
    width: 20px;
    text-align: center;
    line-height: 45px;
    color: #82b541;
    font-size: 18px;
}

.contact-form #message {
    padding-top: 10px;
    height: 150px;
}

#submitButton {}

.success {
    background: #fff none repeat scroll 0 0;
    color: #50B948;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}

.error {
    background: #fff none repeat scroll 0 0;
    color: #ff0000;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}


/* ----------------------------------------------------------------------------------------
*                                13. Subscribe area css
* --------------------------------------------------------------------------------------- */
.subscribe-area {
    background-color: #f1f1f1;
}
.subscribe-box {}

.subscribe-box h2 {
    margin-top: 0px;
    font-size: 22px;
}

.subscribe-box h2 span {
    color: #82b541;
}

.newsletter-form {
    margin: auto;
}

.newsletter-form input{
    display: inline-block;
    height: 50px;
    width: 80%;
    padding: 5px 10px;
    background: #fff;
    float: left;
}

.newsletter-form .mc-submit {
    height: 50px;
    width: 20%;
    font-weight: bold;
    color: #fff;
    background-color: #df4b3b;
    border: none;
    font-size: 24px;
    position: relative;
    display: inline-block;
    float: left;
    text-align: center;
}

.newsletter-form .mc-submit:hover {
    color: #000;
}

.subscribe-area .error {
    text-align: left;
}

.mailchimp-alerts {
    display: block;
    width: 100%;
    text-align: left;
}

.mailchimp-success{
    color: green;
}

.mailchimp-error{
    color: red;
}

.subcriber-box {
	margin-top: 20px;
}

.subcriber-box input[type="email"]::-webkit-input-placeholder {
	color: #555 !important;
}


/* ----------------------------------------------------------------------------------------
*                                   14. Footer area css
* --------------------------------------------------------------------------------------- */

/*
.footer-area {
	/*background-color: #288feb;
    background-color: #f8f9fa;
	padding: 80px 0px;
	color: #002261;
	font-size: 16px;
}

.footer-area h3 {
    color: #333;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 25px;
    font-family: Open sans-serif;
}
*/

.footer-area {
    background-color: #eceef1 !important; /* Un gris más marcado que el anterior */
    border-top: 1px solid #e0e0e0; /* Una línea sutil para marcar el inicio */
    padding: 80px 0px;
    color: #002261;
    font-size: 16px;    
}

.footer-area h3 {
    color: #333;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 25px;
    font-family: Open sans-serif;
}




.logo img {
	margin-bottom: 25px;
}

.footer-info i.fa {
    width: 20px;
    padding: 0;
    margin: 0;
}




/* ----------------------------------------------------------------------------------------
*                                15. copyright-area
* --------------------------------------------------------------------------------------- */

.copyright-area {
	padding: 30px 0px;
	background-color: #002261;
	color: #fff;
	text-align: center;
}

.social {
	margin-top: 15px;
}

.social-links li {
	list-style: none;
	display: inline-block;
}

.social-links li a i {
	color: #fff;
	font-size: 24px;
	margin: 0 10px;
}

.social-links li a:hover i {
	color: #df4b3b;
}
.footer-text p {
	margin-top: 10px;
}