/* CSS Document */
body
{
	margin:0px;
	padding:0px;
	background:#6491A8 url(../images/body.png) left top repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFFFFF;
}

a {
	color:#ffffff;
	text-decoration:underline;
}

a:hover {
	color:#eeeeee;
}

#wrapper
{
	width:964px;
	 
	margin:0 auto;
}

.menuZone{margin:0; padding:0;}
.menuZone ul{margin:0px; padding:10px 0 0 0; text-align:center;}
.menuZone li{margin:0px 0px 0px 0px; width:auto; padding:12px 30px 10px 30px; background:url(../images/menudivider.png) no-repeat 0 5px; display:inline; list-style:none;}
.menuZone li.first{background:none;}
.menuZone a{color:#FFFFFF; font-size:12px; font-weight:bold; text-decoration:none;}
.menuZone a:hover{color:#fffe90}
.menuZone a.current{color:#fffe90}


.clear
{
	margin:0px;
	padding:0px;
	clear:both;
}		
.banner
{
	width:964px;
	height:350px;
	margin-top:30px;
	background:url(../images/banner.png);
}
h1
{	
	font-size:22px;
	padding:50px 0px 0px 66px;
	margin:0px;
}
h4
{	
	font-size:22px;
	padding:0px 0px 0px 50px;
	margin:0px;
}
h3
{	
	font-size:22px;
	padding:0px 0px 0px 86px;
	margin:0px;
}
h2
{	
	font-size:22px;
	padding:50px 0px 0px 0px;
	margin:0px;
}
.bannerText1
{
	margin:0px;
	padding:0px;
	width:305px;
	float:left;
}
.bannerText1 ul
{
	margin:0px;
	padding:0px 0px 0px 55px;
}
.bannerText1 li
{
	margin:0px;
	padding:0px 0px 0px 15px;
	list-style:none;
	background:url(../images/banner-star.png) no-repeat;
}
.bannerText1
{
	margin:0px;
	padding:0px;
	float:left;
}
.bannerText1 ul
{
	margin:0px;
	padding:0px 0px 0px 65px;
}
.bannerText1 li
{
	margin:0px;
	padding:0px 0px 0px 25px;
	list-style:none;
	background:url(../images/banner-star.png) no-repeat;
}
.bannerText2
{
	margin:0px;
	padding:0px 0px 0px 0px;
	width:310px;
	float:left;
}
.yelloText
{
	color:#FFFBC2;
	font-weight:bold;
}
.yelloText2
{
	color:#FFFBC2;
	padding:0px 0px 0px 88px;
	font-weight:bold;
	float:left;
}
.yelloText3
{
	margin:0px 0px 0px 0px;
	padding:10px 0px 0px 0px;
}
.yelloText3 a
{
	color:#FFFBC2;
	padding:0px 0px 0px 15px;
	margin:0px 0px 0px 0px;
	font-weight:bold;
	background:url(../images/path-learn.png) 0px 3px no-repeat;
}
.button img
{
	margin:70px 0px 0px 35px; display:inline;
}
.play
{
	padding:60px 0px 0px 0px;
}
.play img
{
	margin:0px 0px 0px 20px; display:inline;
}
.logo
{
	background:url(../images/logo.png);
	width:328px;
	height:333px;
	margin-top:18px;
	float:left;
}
.pdf img
{

	margin:0px;
	margin:0px 0px 0px 10px; display:inline;
}

.pdf .inner {
	padding:170px 0px 0px 0px;
}

#workZone
{
	padding:0px;
	margin:0px;
}
.imageMaincontainer
{
	margin:10px 0px 0px 0px;
	padding:0px;
	 
}
.imageContainer
{
	float:left;
	margin:20px 0px 0px 0px;
}

.imageContainer2
{
	float:left;
	margin:20px 0px 0px 5px;
}

.imageContainer3
{
	float:right;
	margin:20px 0px 0px 0px;
}

.plus
{
	color:#152839;
	font-size:30px;
	float:left;
	font-weight:bold;
	padding:120px 5px 0px 5px;
}

.faqcontainer {
	height:247px;
}
.subscribezone {
	background:url(../images/subcribemid.jpg) left top repeat-y;
	margin:30px 0px 0px 0px;
	float:left;
}

.subscribetop {
	background:url(../images/subcribetop.jpg) left top no-repeat;

}

.subscribebottom {
	background:url(../images/subcribebottom.jpg) left bottom no-repeat;
	padding:6px 10px 10px 10px;
}
.box1
{
	width:350px;
	margin:0px 0px 0px 0px;
	padding:10px 0px 0px 0px;
	float:left;
}
.box1Text
{
 padding:10px 30px 0px 30px;
 background:url(../images/container-devider.png) right top no-repeat;
}
.box1 img
{
	padding:2px 0px 0px 20px;
	float:left;
}
.box2
{
	width:354px;
	margin:0px 0px 0px 0px;
	padding:10px 0px 0px 0px;
	float:left;
}
.box2Text
{
 padding:20px 30px 0px 30px;
 background:url(../images/container-devider.png) right top no-repeat;
}
.box2Text ul
{
	margin:0px;
	padding:0px 0px 0px 0px;
}
.box2Text li
{
	margin:0px 0px 0px 0px;
	padding:0px 0px 10px 20px;
	list-style:none;
	background:url(../images/star.png) 0px 3px no-repeat;
}
.box2Text li a
{
	color:#97B1C2;
}
.box2Text li a:hover{ text-decoration:none}
.box2 img
{
	padding:2px 0px 0px 20px;
	float:left;
}
.box3
{
	width:238px;
	height:233px;
	background:url(../images/boypic.png);
	float:right;
	text-align:right;
	border-radius: 3%; /* Hace el contenedor circular */
    overflow: hidden; /* Asegura que la imagen no se salga del borde redondeado */
}

.bottomcontainer {
	margin:10px 0px 0px 0px;
}

.bottomMenu
{
	width:965px;
	height:33px;
	padding:0px 0px 0px 0px;
	background:url(../images/footer-menu.png) no-repeat;
}
.bottomMenu ul
{
	margin:0px;
	padding:8px 0 0 0 ; text-align:center;
}
.bottomMenu li
{
	margin:0px 0px 0px 0px;
	padding:0px 30px 0px 30px;
	background:url(../images/menudivider.png) no-repeat;
	display:inline;
	list-style:none;
}

.bottomMenu li.first{background:none}

.bottomMenu a:hover{color:#fffe90}
.bottomMenu a.current{color:#fffe90}


.bottomMenu a
{
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}
.footerMenu
{
	margin:0px 0px 43px 0px;
	padding:21px 0px 0px 45px;
}
.footerMenu ul
{
	margin:0px;
	padding:0px;
}
.footerMenu li
{
	margin:0px;
	padding:0px;
	display:inline;
	color:#051A2D;
}
.footerMenu li a
{
	color:#051A2D;
	font-size:11px;
	padding:0px 10px 0px 10px;
	text-decoration:none;
}

/* Aseguramos que html y body ocupen toda la pantalla */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Contenedor principal que ocupa el 100% de la pantalla */
.full-screen-container {
    height: 100vh; /* 100% del alto de la ventana */
	margin: 0;
    padding: 0;
    
    
}


    .label-red {
        color: red; /* Aplica color rojo al texto */
        font-size: 14px;
        font-weight: bold;
    }

/* Estilos generales para todas las pantallas */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.full-screen-container {
    width: 100%;
    min-height: 100vh;
    height: 100%;
    display: flex;
    justify-content: flex-start; /* Se ajusta según el diseño */
    align-items: flex-start; /* Se ajusta según el diseño */
    padding-top: 150px; /* Para la barra de navegación */
    box-sizing: border-box;
}

/* Media Query para pantallas grandes (PC o tablets grandes) */
@media (min-width: 768px) {
    .full-screen-container {
        padding-top: 150px; /* Más espacio superior en pantallas grandes */
        justify-content: center; /* Centra el contenido horizontalmente en pantallas grandes */
        align-items: center; /* Centra el contenido verticalmente en pantallas grandes */
    }
}

/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 767px) {
    .full-screen-container {
        padding-top: 60px; /* Menos espacio superior en pantallas pequeñas */
        justify-content: flex-start; /* Alinea el contenido al principio en pantallas móviles */
        align-items: flex-start; /* Alinea el contenido al principio verticalmente */
    }
}

/* Estilo para el contenedor principal */
.radio-container-dos {
    width: 980px;
    height: 200px;
    background-image: url('images/fondo2.jpg.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    position: relative; /* Añadido para posicionar los controles con respecto al contenedor */
}

/* Control de volumen a la derecha */
.volume-control-dos {
    position: absolute;
    top: 50%;
    right: 100px;
    transform: translateY(-50%);
    color: rgb(214, 5, 5);
	font-size: 1.5rem; /* Cambia el tamaño del texto */
    font-weight: bold; /* Hace que el texto sea más grueso */
}

/* Control vertical del volumen */
.volume-slider-dos {
    width: 300px; /* Largo del rango (ajusta este valor para cambiar el "ancho" visual) */
    height: 100px; /* Grosor de la barra deslizante */
    background: rgb(255, 255, 255);
    cursor: pointer;
    margin-bottom: 5px;
}

/* Personalización del "thumb" (la perilla que se mueve) */
.volume-slider-dos::-webkit-slider-thumb {
    background: blue;
    width: 10px; /* Ancho de la perilla */
    height: 10px; /* Alto de la perilla */
    border-radius: 50%;
    cursor: pointer;
}

.volume-slider-dos::-moz-range-thumb {
    background: blue;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}
/* Botón de play en la parte inferior izquierda */
.play-btn-dos {
    position: absolute;
    bottom: 30px;
    left: 30px;
    font-size: 3rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 10px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover en el botón de play */
.play-btn-dos:hover {
    background: rgba(255, 255, 255, 0.9);
    color: black;
}

/* Redes sociales */
.social-media-dos {
    position: absolute;
    top: 30px;
    right: 5px;
    display: flex;
	flex-direction: column; /* Cambia de fila a columna */
    gap: 10px;
}

/* Estilo del ícono */
.social-icon-dos img {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Ícono circular */
    transition: transform 0.3s ease;
    cursor: pointer;
}

.social-icon-dos img:hover {
    transform: scale(1.1); /* Efecto de zoom al pasar el cursor */
}


/* inner pages css start */
h1.inner{font:24px Georgia, "Times New Roman", Times, serif; color:#fff; text-align:left; font-weight:100; margin:0px; padding:0 0px 10px 0px; text-decoration:none}
h1.inner span{color:#ccc9a2;}
.aboutus-img{float:right; border:4px solid #fff;	margin:0px 0px 10px 20px;}
h5{font:15px Myriad Pro, Arial, Helvetica, sans-serif; color:#fff; font-weight:100; padding:0px 0px 5px 0px;	border-bottom:1px dotted #fff;	margin:0px 0px 10px 0px; background:none }
h6{font:17px Myriad Pro, Arial, Helvetica, sans-serif; color:#fff; font-weight:100; padding:0px 0px 5px 0px;	margin:0px 0px 0px 0px; background:none }
.aboutcolumnzone{padding:20px 0px 16px 0px;}
.aboutcolumn1{width:48%; float:left; margin:0px 0px 10px 0px;}
.aboutcolumn2{width:48%; float:right; margin:0px 0px 10px 0px;}
.abouticon{float:left; margin:0px 20px 0px 0px;}
.insidereadmore{padding:10px 0px 10px 0px;}
.insidereadmore a{color:#5D2D23; font-size:14px; text-decoration:none}
.insidereadmore a:hover{text-decoration:underline}

a.projects{color:#CC9900; font-size:12px; text-decoration:underline}
a:hover.projects{text-decoration:none}

input.button{color:#ffffff;	background:#414141;	font:bold 11px Arial, Helvetica, sans-serif; text-decoration:none; padding:10px 10px; margin:0px 5px 5px 0;	border:1px solid #fff;}
input.button:hover{cursor:pointer; color:#cccccc;}
.project-img{float:right; margin-left:20px;	border: 6px solid #fff;}
.whiteheading{font:30px Myriad Pro, Arial; color:#000; font-weight:100;	padding:0px; margin:25px 0px 20px 0px;}
.ourprojectrow{margin-bottom:20px; border-bottom:1px dotted #fff; padding-bottom:10px;}
.servicecolumnzone{padding:20px 0px 16px 0px;}
.servicecolumn1{width:48%; float:left; margin:0px 0px 10px 0px;}
.servicecolumn2{width:48%; float:right;	margin:0px 0px 10px 0px;}
.blog-posted-row{padding:3px;}

.blog-posted-row a{color:#CC9900; font-size:12px; text-decoration:underline; padding:0 0 0 8px}
.blog-posted-row a:hover{text-decoration:none}
/* inner pages css ends */