EVOLUTION-MANAGER

Edit File: 091ac214d52ee21e83bc0836bdfc229c12987b66.php

<?php $__env->startSection('style'); ?>

<style>

.body_servicios{
            margin: 0px 150px;
            /* display: flex; */
            /* flex-wrap: wrap; */
            justify-content: center;
            gap: 35px;
        }

.content_detalle{
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .detalle_left h2{
            margin: 25px 0px 25px 0px;
            font-size: 2rem;
            color: #0c73b4;
        }
        .card_ofrece{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 3rem;
            grid-auto-rows: max-content;
            padding-right: 20px;
            font-size: 22px;
        }
        .card_ofrece > span{
            display: flex;
            align-items: center;
            line-height: 1.1;
            gap: 15px;
            padding-top: 18px;
        }

.detalle_right .card_ser_text{
            color: #2cabe3;
            text-align: center;
            font-size: 1.5rem;
        }

.detalle_info_contact{
            margin-right: auto;
        }

.detalle_info_contact h2{
            margin: 0px 0px 25px 0px;
            font-size: 2rem;
            color: #0c73b4;
        }
        .card_info_contact > span{
            padding-top: 12px;
            line-height: 1;
        }
        .card_info_contact{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: 3rem;
            grid-auto-rows: max-content;
            padding-right: 20px;
            font-size: 22px;
        }
        
        /* seccion de barra encontrar */
        .detalle_encontrar{
            border-radius: 10px;
            background-color: #6c757d1c;
            padding: 10px 15px;
            text-align: center;
            color: red;
            margin-top: 0px;
            margin-bottom: 30px;
            display: inline-block;
            width: 100%;
        }
        .detalle_encontrar a {
            margin-left: 15px;
            text-decoration: none;
        }
        .detalle_encontrar a:hover .texto{
            color: #0c73b4;
        }
        .detalle_encontrar .fa {
            color: #0c73b4;
            font-size: 20px;
        }

.detalle_encontrar .texto {
            color: #2cabe3;
            font-weight: 700;
            font-family: sans-serif;
            font-size: 20px;
        }

@media  only screen and (min-width: 942px) and (max-width: 1200px){ /*GRANDE*/
            .body_servicios{ margin: 0px 50px;  }
            .card_ofrece{ font-size: 20px; }
        }
        @media  only screen and (min-width: 768px) and (max-width: 941px){ /*MEDIANO*/
            .body_servicios{ margin: 0px 50px;  }
            
            .card_ofrece{ font-size: 20px; grid-template-columns: repeat(1, 1fr); }
            .card_ofrece > span { padding-top: 10px; }  
            
            .card_info_contact{ font-size: 20px; grid-template-columns: repeat(1, 1fr); }
        }
        @media (max-width: 767px){ /*PEQUEÑO*/
            .body_servicios{ margin: 0px 50px;  }

.card_ofrece{ font-size: 20px; grid-template-columns: repeat(1, 1fr); }
            .card_ofrece > span { padding-top: 10px; }

.card_info_contact{ font-size: 20px; grid-template-columns: repeat(1, 1fr); }
        }
        @media (max-width: 667px){ /*PEQUEÑO 2*/
            .body_servicios{ margin: 0px 30px;  }
            .content_detalle{ display: contents; }

.card_ofrece{ font-size: 18px; grid-template-columns: repeat(1, 1fr); }
            .card_ofrece > span { padding-top: 10px; }

.card_info_contact{ font-size: 18px; grid-template-columns: repeat(1, 1fr); }
        }
        @media (max-width: 414px){ /*MOBILE*/
            .body_servicios{ margin: 0px 30px;  }
            .content_detalle{ display: contents; }

.card_ofrece{ font-size: 18px; grid-template-columns: repeat(1, 1fr); }
            .card_ofrece > span { padding-top: 10px; }

.card_info_contact{ font-size: 18px; grid-template-columns: repeat(1, 1fr); }
        }

</style>

.social_fb{
            background-color: #3b5998;
        }
        .social_in{
            background: #f09433; 
            background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
            background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
            background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
        }
        .social_tw{
            background-color: #00acee;
        }
        .social_yt{
            background-color: #c4302b;
        }
        .social_wp{
            /* background-color: #009f7b; */
            background-color: #02b316;
        }

</style>

justify-content: center;
        }

.column {
            flex: 1 1 0; /* Las columnas se expanden y contraen para ocupar el ancho disponible */
            min-width: 0; /* Permite que las columnas se reduzcan más allá del contenido mínimo */
            box-sizing: border-box;
            padding: 5px;
            /* background-color: #f4f4f4; */
            /* border: 1px solid #ddd; */
            /* Opcional: Asegura que las columnas tengan una altura mínima para que el contenido se vea bien */
            display: flex;
            flex-direction: column;
        }
        .column_none{
            flex: none !important;
        }

.column h2{
            margin: 0px 0px 25px 0px;
            font-size: 2rem;
            color: #0c73b4;
        }

.responsive_ofrece{ /*editado ----------------------------------*/
            /* display: flex;
            flex-wrap: wrap;
            gap: 0px 10px; */
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            /* gap: 4px; */
            gap: 4px 8px;
            padding: 16px;
            box-sizing: border-box;
            user-select: none;
        }
        
        .colum_ofrece{ /*editado ----------------------------------*/
            /* flex: 1 1 0; */
            text-align: center;
        }
        .colum_ofrece .htitulo1{
            display: flex;
            line-height: 1;
            font-weight: bold;
            gap: 2px;
            align-items: center;
        }
        .colum_ofrece .htitulo{

text-align: left; /*editado ----------------------------------*/

display: flex;
            align-items: flex-end;
            line-height: 1;
            gap: 2px;
            font-weight: bold;
        }
        .colum_ofrece ul{
            list-style: none;
            padding-left: 0;
            margin-bottom: 0.8rem;
        }
        .colum_ofrece li{
            text-align: left; /*editado ----------------------------------*/
            /* width: max-content; */
            position: relative;
            padding-left: 10px;
            line-height: 1;
            font-size: 0.8rem;
        }
        .colum_ofrece li::before{
            content: "-";
            position: absolute;
            left: 0;
            font-weight: 800;
        }
        .colum_text_ofrece{
            max-width: 310px;
        }

.content_carrousel .card_ser_img{
            max-width: 300px !important;
            width: auto !important;
            height: 360px !important;
        }

@media  only screen and (min-width: 668px) and (max-width: 941px){ /*MEDIANO*/
            .column {
                flex: 1 1 50%;
            }
        }

@media  only screen and (max-width: 768px) { /* MOBILES Y TABLETS */
            .colum_text_ofrece{
                max-width: 100%;
            }
        }

/* Adaptación para pantallas más pequeñas */
        @media (max-width: 667px) {
            .column {
                flex: 1 1 100%;
            }
        }

</style>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>

<div class="titulo_seccion" style="margin-bottom: 10px;">
        <hr class="linea_horizontal">
        <div class="contenido con_mv_10">
            <span class="span_t1n">Servicios</span>
            <img src="<?php echo e(route_public('/pagina/img/iconos/inicio/servicios.png')); ?>" alt="Icono">
        </div>
        <hr class="linea_horizontal">
    </div>

<div class="content_subtitulo">
            <h1><a href="<?php echo e(asset('/servicio/parroquia/'.$servicio->tipo_servicio->codigo_url)); ?>"><?php echo $servicio->tipo_servicio->nombre; ?></a></h1>
            <h2 class="l1"><i class="fa fa-caret-right"></i> 
                <a href="<?php echo e(asset('servicio/parroquia/listado/'.$servicio->tipo_servicio->codigo_url.'/'.$servicio->parroquia->codigo_url)); ?>">
                    <?php echo $servicio->parroquia->nombre; ?>

</a>
            </h2>
            <h2 class="l2"><i class="fa fa-caret-right"></i> <?php echo $servicio->nombre; ?></h2>
            <h2><a href="<?php echo e($servicio->url_web); ?>"> <?php echo $servicio->url_web; ?> </a></h2>
        </div>

<?php if(!empty($servicio->texto)): ?>
                <div class="column column_none colum_text_ofrece">
                    <h3 style="color: #0c73b4; text-align: center;">Lo que este lugar obrece</h3>
                    <p style="text-align: justify; padding: 10px; line-height: 1.3;">
                        <?php echo $servicio->texto; ?>

</p>
                </div>
            <?php endif; ?>

<div class="column" style="padding-left: 30px;">
              
                <div class="responsive_ofrece pb-2" style="width: 100%;">
                    <?php $__currentLoopData = $servicio->servicio_titulo1; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $titulo1): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="colum_ofrece">
                            <h6 class="htitulo1"><img src="<?php echo e(route_public($titulo1->cat_titulo1->icono)); ?>" alt=""> 
                                <?php echo e($titulo1->cat_titulo1->titulo); ?>

</h6>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

<div class="responsive_ofrece">
                    <?php $cod_titulo = 0; ?>
                    <?php $__currentLoopData = $servicio_lista; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $serv_list): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    
                        <?php if($cod_titulo != $serv_list->titulo_id): ?>
                            <?php if($key>0): ?>
                                </ul>
                            </div>
                            <?php endif; ?>          
                            <div class="colum_ofrece">
                                <h6 class="htitulo"><img src="<?php echo e(route_public($serv_list->titulo_icono)); ?>" alt=""> <?php echo e($serv_list->titulo); ?></h6>
                                <ul>
                                    <li><?php echo e($serv_list->nombre_lista); ?></li>
                            
                            <?php $cod_titulo = $serv_list->titulo_id ?>
                        <?php else: ?>
                            <li><?php echo e($serv_list->nombre_lista); ?></li>
                        <?php endif; ?>
                            
                        <?php if($key == (sizeof($servicio_lista)-1)): ?>
                            </ul>
                        </div>
                        <?php endif; ?>  
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

</div>

<div class="column column_none">
                <p>
                    <?php if(sizeof($servicio->servicio_imagen)>0): ?>
                        <div class="detalle_right">
                            <div class="content_carrousel">
                                <?php if(sizeof($servicio->servicio_imagen)>1): ?>
                                    <a onclick="carrouserl_pasar_img(-1)"><i class="fa fa-caret-left"></i></a>
                                <?php endif; ?>
                                <div class="card_ser_img">
                                    <?php $__currentLoopData = $servicio->servicio_imagen; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $servicio_imagen): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <img class="carrousel_img" src="<?php echo e(route_public($servicio_imagen->ruta)); ?>" alt="<?php echo e($servicio_imagen->nombre); ?>" <?php if($key==0): ?> style="display: block" <?php endif; ?>>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                                <?php if(sizeof($servicio->servicio_imagen)>1): ?>
                                    <a onclick="carrouserl_pasar_img(1)"><i class="fa fa-caret-right"></i></a>
                                <?php endif; ?>
                                
                                <div id="carrouselMyModal" class="carrousel_modal">
                                    <span class="carrousel_close">&times;</span>
                                    <img class="carrousel_modal_content" id="carrousel_img01">
                                    <div id="carrousel_caption"></div>
                                </div>
                            </div>  
                            
                        </div>
                    <?php endif; ?>
                </p>
            </div>

</section>

<?php if((!empty($servicio->latitud) && !empty($servicio->longitud)) || !empty($servicio->url_web) || (!empty($servicio->celular) && $servicio->celular_what==1)): ?>
            <div class="detalle_encontrar">

<?php if(!empty($servicio->latitud) && !empty($servicio->longitud)): ?>
                    <a href="https://maps.google.com/?q=<?php echo e($servicio->latitud); ?>,<?php echo e($servicio->longitud); ?>" target="_blank">
                        <span>
                            <i class="fa fa-location-arrow"></i> 
                            <span class="texto">Como llegar</span>
                        </span>
                    </a>
                <?php endif; ?>
                <?php if(!empty($servicio->url_web)): ?>
                    <a href="https://youbute.com" target="_blank">
                        <span>
                            <i class="fa fa-external-link-square"></i> 
                            <span class="texto">Sitio Web</span>
                        </span>
                    </a>
                <?php endif; ?>
                <?php if(!empty($servicio->celular) && $servicio->celular_what==1): ?>
                    <a href="https://wa.me/+593<?php echo e($servicio->celular); ?>?text=Hola, " target="_blank">
                        <span>
                            <i class="fa fa-whatsapp"></i>
                            <span class="texto">Contacto</span>
                        </span>
                    </a>
                <?php endif; ?>
            </div>
        <?php endif; ?>

<?php if(!empty($servicio->url_fb) || !empty($servicio->url_in) || !empty($servicio->url_x) || !empty($servicio->url_yt)): ?>
            <div class="detalle_redes_soci">
                <h2>Redes Sociales</h2>
                <div class="lugar_redes_sociales">            
                    <a href="<?php echo e($servicio->url_fb); ?>" target="_blank">
                        <div class="social social_fb"><i class="fa fa-facebook"></i></div>
                    </a>
                    <a href="<?php echo e($servicio->url_in); ?>" target="_blank">
                        <div class="social social_in"><i class="fa fa-instagram"></i></div>
                    </a>
                    <a href="<?php echo e($servicio->url_x); ?>" target="_blank">
                        <div class="social social_tw"><i class="fa fa-twitter"></i></div>
                    </a>
                    <a href="<?php echo e($servicio->url_yt); ?>" target="_blank">
                        <div class="social social_yt"><i class="fa fa-youtube-play"></i></div>
                    </a>
                </div>
            </div>
        <?php endif; ?>

</div>

</section>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('pagina.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home2/websucregobec/public_html/turismo.sucre.gob.ec/resources/views/pagina/servicios/detalle_servicio_v2.blade.php ENDPATH**/ ?>