EVOLUTION-MANAGER

Edit File: terrestre.blade.php

@extends('pagina.master')

@section('style')

<style>

.body_via_terrestre{
                margin: 0px 70px;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 35px;
            }

.content_via_terre_left{
                display: flex;
                gap: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }
            .card_vt_img{
                max-width: 260px;
                height: 390px;
                border-radius: 20px;
                position: relative;
                display: block;
                margin: -70px auto auto auto;
            }
            .card_vt_img img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 40px;
            }
            .card_vt_img .card_vt_titu h1,h2,h3,h4{
                margin-bottom: 0px;
            }
            .card_vt_titu {
                background-color: #2cabe3;
                color: #ffff;
                padding: 10px 20px;
                font-weight: 700;
                width: max-content;
                margin-top: 30px;
                position: relative;
                z-index: 99999;
            }

.content_via_terre_right a:hover{ 
                text-decoration: none;
                color: #54ab15;
            }
            .content_via_terre_right a{        
                font-size: 1.5rem;
                color: #2cabe3;
                margin-top: 25px;

justify-content: space-between;
                align-items: center;
                display: flex;                
            }
            .content_via_terre_right a i{
                color: #0c73b4;
                font-size: 2.3rem;
                margin-right: 8px;
            }
            .content_via_terre_right a b{
                margin-right: 8px;
            }
            .content_via_terre_right a img{
                width: 50px;
                margin-left: 8px;
            }

@media only screen and (min-width: 942px) and (max-width: 1200px){ /*GRANDE*/
                .body_via_terrestre{ margin: 0px 50px;  }
            }
            @media only screen and (min-width: 768px) and (max-width: 941px){ /*MEDIANO*/
                .body_via_terrestre{ margin: 0px 50px;  }
            }
            @media (max-width: 767px){ /*PEQUEÑO*/
                .body_via_terrestre{ margin: 0px 50px;  }
            }
            @media (max-width: 667px){ /*PEQUEÑO 2*/
                .body_via_terrestre{ margin: 0px 50px;  }
                .content_via_terre_right a img{ display: none; }
            }
            @media (max-width: 414px){ /*MOBILE*/
                .body_via_terrestre{ margin: 0px 50px;  }
                .content_via_terre_right a img{ display: none; }
            }

</style>

@endsection

@section('content')

<section id="section_comollegar">
            
        <div class="titulo_seccion">
            <hr class="linea_horizontal">
            <div class="contenido">
            <p>
                <span class="span_t1n">C&oacute;mo</span> <span class="span_t1">llegar</span>
                <span style="display: block">
                    <span class="span_t3">al <span class="span_t3n">Cant&oacute;n</span> Sucre</span>
                </span>
            </p>
            <img loading="lazy" src="{{route_public("/pagina/img/iconos/inicio/comollegar.png")}}" alt="Icono">
            </div>
            <hr class="linea_horizontal">
        </div>

<div class="body_via_terrestre">
            <h1 style="width: 100%; color: #0c73b4;"><i class="fa fa-caret-right"></i> V&iacute;a terrestre</h1>

<div class="content_via_terre_left">
                <div class="">
                    <div class="card_via_terre">
                        <div class="card_vt_titu">
                            <h4><b>Buses</b> INTERPROVINCIALES</h4>
                        </div>
                        <div class="card_vt_img">
                            <img loading="lazy" src="{{route_public('/pagina/img/como_llegar/buses_interprovinciales.png')}}" alt="faro">                    
                        </div>
                    </div>
                </div>
                <div class="">
                    <div class="card_via_terre">
                        <div class="card_vt_titu">
                            <h4><b>Buses</b> INTERCANTONALES</h4>
                        </div>
                        <div class="card_vt_img">
                            <img loading="lazy" src="{{route_public('/pagina/img/como_llegar/buses_intercantonales.png')}}" alt="faro">                    
                        </div>
                    </div>
                </div>
            </div>
            <div class="content_via_terre_right">
                <a href=""><i class="fa fa-caret-right"></i> <b>Buses</b> INTERPROVINCIALES <img src="{{route_public('/pagina/img/iconos/como_llegar/pdf.png')}}"></a>
                <a href=""><i class="fa fa-caret-right"></i> <b>Buses</b> INTERCANTONALES <img src="{{route_public('/pagina/img/iconos/como_llegar/pdf.png')}}"></a>
            </div>

</div>

</section>

@endsection

@section('script')
@endsection