@media only screen and (min-width: 600px) {
  .slider-container, .institucional{
    margin-left: 5% !important;
    margin-right: 5% !important;
  }
}

/* - início código download e visualização dos módulos UPT - */
<style>
    /* Container com Prefixo Específico para Módulos UPT */
    .upt-modules-wrapper {
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        max-width: 850px;
        margin: 25px 0;
        background: #fdfdfd;
        padding: 20px;
        border-radius: 12px;
        border: 1px solid #eee;
    }

    .upt-header {
        /* Linha laranja removida conforme solicitado */
        margin-bottom: 20px;
        padding-bottom: 5px;
    }

    .upt-header h3 {
        color: #004684; 
        margin: 0;
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .upt-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .upt-item {
        background: #ffffff;
        border: 1px solid #e1e8ed;
        border-radius: 10px;
        margin-bottom: 15px;
        padding: 18px 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
        box-shadow: 0 2px 5px rgba(0,0,0,0.04);
        gap: 20px;
    }

    .upt-item:hover {
        border-color: #f39c12;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .upt-content {
        display: flex;
        align-items: center;
        gap: 15px;
        flex-shrink: 0;
    }

    .upt-icon {
        background: #fff4e5;
        color: #f39c12;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .upt-title {
        font-weight: 700;
        color: #2c3e50;
        font-size: 1.05rem;
        white-space: nowrap; 
    }

    .upt-actions {
        display: flex;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .upt-btn {
        text-decoration: none !important;
        font-size: 0.85rem;
        font-weight: 700;
        padding: 10px 18px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: 0.2s;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .upt-btn-view {
        color: #004684;
        border: 2px solid #004684;
    }

    .upt-btn-view:hover {
        background: #004684;
        color: #fff;
    }

    .upt-btn-down {
        background-color: #f39c12;
        color: #fff !important;
        border: 2px solid #f39c12;
    }

    .upt-btn-down:hover {
        background-color: #d68910;
        border-color: #d68910;
    }

    @media (max-width: 768px) {
        .upt-item { flex-direction: column; align-items: flex-start; gap: 15px; }
        .upt-actions { width: 100%; }
        .upt-btn { flex: 1; justify-content: center; }
        .upt-title { white-space: normal; } 
    }
</style>
/* - início código download e visualização dos módulos UPT - */
/* - início código foto  e botões ao lado - */
    .box-content{
        display: flex;
        justify-content: space-between;
    }
    .button-content{
        display: flex;
        flex-direction: column;
        margin-right: 15px;
    }
    .button-content a{
        border: black 2px solid;
        border-radius: 5px;
        padding: 10px;
        align-items: center;
        display: inline-flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color:white;
        text-decoration: none;
        margin: 5px;
        color: black;
        text-align: center;
        font-size: 1em;
        font-weight: 700;
        font-family: "Raleway";
    }
    .button-content a:hover{
        background-color: #0094ff;
        color: white;
    }
@media screen and (min-width: 992px) {
        .button-content{
        width: 30%;
    }
    }
/* - fim código foto  e botões ao lado - */

/* - início código slyde - */
Com certeza! Para criar um slider fluido com transição da direita para a esquerda, a melhor abordagem é utilizar HTML5, CSS3 (com Flexbox e Keyframes) e um toque de JavaScript para automatizar a transição.

Aqui está um código limpo, moderno e totalmente responsivo:

Estrutura do Código (HTML/CSS)
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }

        /* Container Principal */
        .slider-container {
            max-width: 1200px;
            aspect-ratio: 1200 / 400; /* Mantém a proporção 3:1 */
            margin: 20px auto;
            overflow: hidden;
            position: relative;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        /* Trilho das Imagens */
        .slider-wrapper {
            display: flex;
            width: 400%; /* 4 imagens = 400% da largura do container */
            height: 100%;
            transition: transform 0.8s ease-in-out;
        }

        /* Slide Individual */
        .slide {
            width: 25%; /* Cada slide ocupa 1/4 do total (100% do container) */
            position: relative;
            flex-shrink: 0;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Legenda e Link */
        .caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 15px 25px;
            font-family: sans-serif;
            text-decoration: none;
            transition: background 0.3s;
        }

        .caption:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .caption h3 { margin-bottom: 5px; font-size: 1.2rem; }
        .caption p { font-size: 0.9rem; opacity: 0.9; }

        /* Navegação (Opcional) */
        .dots {
            position: absolute;
            bottom: 60px; /* Acima da legenda */
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .dot {
            width: 12px;
            height: 12px;
            background: rgba(255,255,255,0.5);
            border-radius: 50%;
            cursor: pointer;
        }

        .dot.active { background: white; }
/* - fim código slyde - */



/* - inicio código cor área do aluno - */
/* Estilo base para garantir que a transição seja suave */
.container-servicos {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px; /* Respiro lateral para mobile */
}

/* Limpeza e ajuste do item individual */
.item-servicos {
    transition: background-color 0.3s ease;
    padding: 10px; 
    text-align: center;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%; /* Ocupa a largura total da coluna (col-md-3) */
}

/* Item 1 - Módulos (Verde abacate) */
.col-md-3:nth-child(1) .item-servicos:hover {
    background-color: #91c934;
}

/* Item 2 - Vídeo aulas (Rosa choque) */
.col-md-3:nth-child(2) .item-servicos:hover {
    background-color: #ef318e;
}

/* Item 3 - Provas & Gabaritos (verde água) */
.col-md-3:nth-child(3) .item-servicos:hover {
    background-color: #38bdb6;
}

/* Item 4 - Simulados (laranja) */
.col-md-3:nth-child(4) .item-servicos:hover {
    background-color: #f8832e;
}
/* Item 5 - Simulados (laranja) */
.col-md-3:nth-child(5) .item-servicos:hover {
    background-color: #f8832e;
}


/* Garante que o texto fique branco ao passar o mouse */
.item-servicos:hover a, 
.item-servicos:hover i {
    color: #fff !important;
}
/* - fim código cor área do aluno - */


.cards {
	margin-bottom:10px;
}
.card {
	margin-bottom:10px;
}
.card-title {
    font-size: 1.1rem;
    font-weight: 700;
}
.mod-articles-category-title  {
	font-size: 20px;
}
.field-value p{
	font-size: 16px!important;
}
.servico {
	display: block;
	font-size: 24px;
    font-weight: 700;
	margin-bottom: 20px;
}
.cardaltura{
	padding-top:50px;
	padding-bottom:50px;
}
#interna figcaption {
    margin-left: 0%;
    float: none;
    text-align: center;
}

#interna img{
	max-width: 100%; 
	height: auto;
 }

 header #logo img {
    float: left;
	margin: 0 10px 0 0;
} 
 header #logo .portal-title-1 {
	display: block;
	float: none!important;
} 
.mosaico .item-mosaico .chamada-mosaico a{
	font-size: 1.3em;
	font-weight: 700;
    color: #FFFFFF;
	text-decoration: none;
}
.mosaico .item-mosaico .chamada-mosaico a:hover {
    color: #0094ff;
	text-decoration: none;
}
.mosaico .item-mosaico .chamada-mosaico {
    bottom: 10px!important;
}
.mosaico .item-mosaico .chamada-mosaico .chapeu-mosaico:before {
    content: " ";
    width: 40px;
    height: 4px;
    background: #06acff;
    display: block;
    text-indent: -3000px;
}
/* nav.menu-principal {
	background: #2969BD;
    position: relative;
} */
.super-destaque a {
    font-size: 2em!important;
}
.super-destaque .chamada-super-destaque {
    bottom: 10%!important;
}
 #logo a {
    text-decoration: none;
}
header .header-accessibility #siteaction-international>a 				{display: inline-block; position: relative; padding: 0 20px 0 25px; border-right: 1px solid hsla(0,0%,100%,.2); color: #fff;}
header .header-accessibility #siteaction-international>a:before 		{content: ""; position: absolute; left: 0; background-image: url(../img/globo.png); width: 18px; height: 18px; -webkit-filter: none; filter: none;}
header .header-accessibility #siteaction-contraste>a {margin-left: 20px;}
header .header-accessibility{
	width: auto;
}
@media only screen and (max-width : 480px) {
	 
 header #logo 	{
	margin: 0 0 0 0;
} 

header .header-wrapper {
	height: 110px;
}
.box-menu {
	top: 10.5rem;
}
        
    }
.servicos {
    background: #fff;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-bottom: 1rem;
}
.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
/*INSTITUCIONAL ----------------------------------- */
.institucional h2 					{margin-bottom: 20px;}
.institucional a 					{width: 80%;text-transform: uppercase;font-size: .9em;font-weight: 800;color: #333;margin: 10px auto;height: 136px;padding: 0 5%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;text-align: center;transition: background .5s;}
.institucional a:hover	 			{text-decoration: none; color: #fff; position: relative;}
.institucional a:hover:after 		{position: absolute; content: ""; height: 40px; width: 40px; top: 0; right: 0; background-image: url(../img/sprite.png); background-position: -160px -84px; width: 37px; height: 36px;}
/*INSTITUCIONAL*/
.numeros {
padding: 0 0 60px 0;
}
.branco {
 color: #fff;
}
.titulo {
font-size: 3rem;
font-weight: 900;
display: block;
white-space: nowrap;
text-align: center;
}
.subtitulo {
font-size: 20px;
display: block;
font-weight: 500;
text-align: center;
}

/*mod_chamadas noticias-home-sembox ----------------------------------- */
.graduacao {height: 330px!important;}
.prosel {height: 410px!important;}
.sembox 												{margin: 30px 0; clear: both;}
.sembox .item-sembox 									{position: relative; height: 370px; overflow: hidden;}
.sembox .item-sembox img								{object-fit: cover; width: 100%; position: relative; z-index: 999991; }
/*.sembox .item-sembox:after							{width: 100%; height: 100%; position: absolute; top: 0; display: block; content: ""; z-index: 999992; background-image: none;}*/
.sembox .item-sembox .chamada-sembox 				{position: absolute; z-index: 999993; padding-top: 10px; color: #333;}
.sembox .item-sembox .chamada-sembox .chapeu-sembox 		{display:block; font-size: 1em; display: block; font-weight: 700; text-transform: uppercase; margin-bottom: 8px;} 
.sembox .item-sembox .chamada-sembox .titulo-sembox 		{font-size: 1.8em; font-weight: 800; line-height: 1.2em; color: #fff; text-decoration: none;}
.sembox .item-sembox .chamada-sembox .titulo-sembox:hover 	{color: #0094ff}
.sembox .item-sembox.sembox-secundario											{height: 200px; background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(236,236,236,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(236,236,236,1) 100%);}
.sembox .item-sembox.sembox-secundario .chamada-sembox .chapeu-sembox  		{font-size: 0.9em; color: #0094ff}
.sembox .item-sembox.sembox-secundario .chamada-sembox .titulo-sembox			{font-size: 1.1em; color: #333; font-weight: 400;}
.sembox .item-sembox.sembox-secundario .chamada-sembox .titulo-sembox:hover	{color: #0094ff}
.sembox .item-sembox.sembox-secundario:after	 {display: none;}
.sembox .item-sembox.sembox-video:before {width: 30px; height: 30px; position: absolute; content: ""; background-image: url(../img/sprite.png); background-position: -203px -219px; top: 1rem; right: 1rem; z-index: 999993}
.sembox  .item-sembox .chamada-sembox  a{
	font-size: 1.3em;
	font-weight: 700;
    color: #333;
	text-decoration: none;
}
.sembox .item-sembox  .chamada-sembox  a:hover {
    color: #0094ff;
	text-decoration: none;
}
.sembox .item-sembox .chamada-sembox .chapeu-sembox:before {
    content: " ";
    width: 40px;
    height: 4px;
    background: #06acff;
    display: block;
    text-indent: -3000px;
}
.destaque-sembox {
	height: 410px!important;
}
/*mod_chamadas noticias-home-sembox*/

/*mod_tvufrb ----------------------------------- */
.video {padding-bottom: 20px;}
/*mod_tvufrb*/

/*canais de prestação e tempo de duração ----------------------------------- */
.subtitulo-etapa {
    margin: 15px 10px 15px 0;
    border: 1px solid #d5d5d5;
    border-top: 1px solid #d5d5d5;
    font-size: 18px;
    padding: 15px;
}
.titulo-documento {
    border-bottom: 1px solid #d5d5d5;
}
.semanticui-body h4 {
    font-size: 1.5rem!important;
}
  /*canais de prestação e tempo de duração */
  
  
/*módulo news ticker ----------------------------------- */
.newsticker {
    background: #2969BD;
    padding: 10px 0 10px 0;
	text-align: center;
	color: #fff;
}
.chapeu-newsticker {
	text-transform: uppercase;
	font-weight: 700;
}
.titulo-newsticker {
}
.newsticker a {
	text-decoration: none;
	color: #fff;
}
.newsticker a:hover {
	text-decoration: underline;
}
  /*módulo news ticker */

/*linha do tempo ----------------------------------- */

.timeline {
    border-left: 3px solid #727cf5;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background: rgba(114, 124, 245, 0.09);
    margin: 0 auto;
    letter-spacing: 0.2px;
    position: relative;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 50px;
    list-style: none;
    text-align: left;
    max-width: 40%;
}

@media (max-width: 767px) {
    .timeline {
        max-width: 98%;
        padding: 25px;
    }
	.destaque-sembox {
	height: 370px!important;
	}
}

.timeline h1 {
    font-weight: 300;
    font-size: 1.4em;
}

.timeline h2,
.timeline h3 {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 10px;
}

.timeline .event {
    border-bottom: 1px dashed #e8ebf1;
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline .event {
        padding-top: 30px;
    }
}

.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .event:before {
    left: -207px;
    content: attr(data-date);
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline .event:before {
        left: 0px;
        text-align: left;
    }
}

.timeline .event:after {
    -webkit-box-shadow: 0 0 0 3px #727cf5;
    box-shadow: 0 0 0 3px #727cf5;
    left: -55.8px;
    background: #fff;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    content: "";
    top: 5px;
}

@media (max-width: 767px) {
    .timeline .event:after {
        left: -31.8px;
    }
}

.rtl .timeline {
    border-left: 0;
    text-align: right;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-right: 3px solid #727cf5;
}

.rtl .timeline .event::before {
    left: 0;
    right: -170px;
}

.rtl .timeline .event::after {
    left: 0;
    right: -55.8px;
}
/*linha do tempo ----------------------------------- */
nav.menu-principal 		{background: #2969BD; position: relative;}
.topo {margin-bottom: 40px;}
.containernewsticker {margin:0;}

.em-alta {
  flex-wrap: wrap;
}

.topiv {margin: 2rem 0; margin-bottom: 20px; text-align: right;}
.topiv a {color: #222; text-transform: uppercase; font-size: .8rem; font-weight: 700; margin-top: 1rem; display: inline-block;}
.topiv a:after {content: "^"; background: #222; color: #fff; border-radius: 50%; padding: 11px 10px 8px; display: block; float: right; width: 40px; height: 40px; text-align: center; font-size: 1.4em; margin: -10px 0 0 10px; font-weight: 700;}

.sharebuttons {float: right;}
.publicacao-dados {text-align: left!important;}
.direct-image-vert {max-width:450px; float:right; margin: 0px 0px 10px 10px;}
@media (max-width: 767px) {
	.direct-image-vert {max-width:100%; float:none; margin: 0px 0px 10px 0px;}
}
header #logo #portal-title, #logo h1 {font-weight: 700!important;}

/*ícones de redes sociais no menu ----------------------------------- */


.portal-redes>li {padding: 0 7px 0 0;}
.portal-redes>li a {width: 32px!important;}
.portalredes-insta1 	{background-image: url(../img/instagram.png); background-size: 32px 32px;}
.portalredes-youtube1 	{background-image: url(../img/youtube.png); background-size: 32px 32px;}
.portalredes-facebook1 	{background-image: url(../img/facebook.png); background-size: 32px 32px;}
.portalredes-twitter1 	{background-image: url(../img/twitter.png); background-size: 32px 32px;}
.portalredes-telegram1 	{background-image: url(../img/telegram.png); background-size: 32px 32px;}
.portalredes-linkedin1 	{background-image: url(../img/linkedin.png); background-size: 32px 32px;}
.portalredes-feed1 	{background-image: url(../img/feed.png); background-size: 32px 32px;}
.portalredes-whatsapp1 	{background-image: url(../img/whatsapp.png); background-size: 32px 32px;}
.portalredes-tiktok1 	{background-image: url(../img/tiktok.png); background-size: 32px 32px;}


/*ícone chat ----------------------------------- */
  .message-bubble{display:flex;flex-flow:row wrap;position:fixed;background:#2969BD;color:#fff;right:calc(100px + 1%);
  max-width:240px;bottom:60px;padding:1em 1em 12px 12px;border-radius:13px 13px 2px 13px;
  z-index:1000000;animation:toggle-bubble .5s ease-out;margin-left:15px;line-height:1.5em;transform-origin:100% 100%}
  .message-bubble::after{bottom:0;content:'';position:absolute;left:calc(100% - 15px);width:0;border:14px solid transparent;
  border-bottom-color:#2969BD;border-radius:4.5px}
  .message-bubble::before{bottom:0;content:'';position:absolute;left:calc(100% - 12px);
  width:0;border:15px solid transparent;filter:blur(2px);border-radius:4.5px}
  .message-bubble p{margin:0}.message-bubble p+p{margin-block:.4em 0}
  .message-bubble .close-button{position:absolute;right:5px;top:5px;width:.7em;height:.7em;opacity:.3}
  .message-bubble .close-button:hover{opacity:1;cursor:pointer}
  .message-bubble .close-button:before,.message-bubble .close-button:after{position:absolute;content:' ';height:.7999999999999999em;width:2px;background-color:#fff}
  .message-bubble .close-button:before{transform:rotate(45deg)}.message-bubble 
  .close-button:after{transform:rotate(-45deg)}@-moz-keyframes toggle-bubble{from{transform:scale(.1)}to{transform:scale(1)}}@-webkit-keyframes toggle-bubble{from{transform:scale(.1)}to{transform:scale(1)}}@-o-keyframes toggle-bubble{from{transform:scale(.1)}to{transform:scale(1)}}@keyframes toggle-bubble{from{transform:scale(.1)}to{transform:scale(1)}}

.texto-menor {
	font-size: 14px;
}
header #logo #portal-title, #logo h1 	{font-size: 1.5rem!important;}