/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Rawline, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #504F4F; /* Alterado para cinza */
    color: #BCBCBE;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra projetada adicionada */
    padding: 0 1rem 0 1rem;
}

header img {
    width: 120px;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slide {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
    border: 1px solid #ddd;
   /* margin-bottom: 1rem;*/
}

.slide:nth-child(odd) {
    background: #e0f7fa;
}

h1 {
    font-size: 2.5rem;
    line-height: 130%;
    margin: 10rem 2rem 1rem 15%;
    text-align: left;
    color:#0D5D3C;
}

h2 {
    font-size: 1.5rem;
    margin-left: 15%;
    line-height: 130%;
    margin-right: 1rem;
}

h3 {
    margin-left: 15%;
}

li h3 {
    margin-left: 0;
}

u {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
li p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    margin-left: 0;
}
.white .topics p {
    font-size: 1em;
}

p {
    font-size: 1.2em;
    margin-bottom: 0.5rem;
    margin-left: 15%;
    width: 70%;
}

nav {
    margin-top: 1rem;
}

nav {
    position: fixed;
    top: 3.3rem; /* Ajustado para aparecer abaixo do header */
    transform: translateX(-105%); /* Menu fora da tela inicialmente */
    width: 30%;
    height: calc(100% - 1.5rem); /* Ajusta altura para não sobrepor o header */
    background: #504F4F;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease-in-out; /* Transição suave */
    z-index: 9;
}

nav.show {
    transform: translateX(0%); /* Move o menu para dentro da tela */
}

nav ul {
    flex-direction: column;
    list-style: none;
    margin: 0;
}

nav ul li {
    padding: 1rem;
    padding-bottom: 0;
    padding-left: 2em;
    padding-right: 2em;
    transition: color 0.5s;
}

nav ul li:hover {
    background-color: #676767;
    transition: color 0.5s;
}

nav ul li:active, nav ul li.active {
    background-color: #676767;
}

nav ul li:last-child {
    border-bottom: none;
}

nav a {
    text-decoration: none;
    color: #BCBCBE;
    font-size: 1rem;
    font-family: Rawline, Arial, Helvetica, sans-serif;

}

.menu-toggle {
    background: none;
    border: none;
    color: #BCBCBE;
    font-size: 2rem;
    cursor: pointer;
    position: relative;
    z-index: 1100;
}

.slide {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.column {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: left;
    flex-direction: column;
}

.column-white {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: left;
    flex-direction: column;
}

.text-column {
    background: #FDB829;
    box-sizing: border-box;
   /* overflow: scroll; */
}

.text-column-white {
    background: #ffffff;
    box-sizing: border-box;
}

.subheader {
    background-color: #FDB829;
    height: 225px;
    width: 100%;
    margin-top: 0;
}

.white-h1 {
    margin: 10rem 2rem 1rem 15%;;
}

.image-column1 {
    background: url('images/2.jpg') center/cover no-repeat;
}

.image-column2 {
    background: url('images/5.jpg') center/cover no-repeat;
}

.image-column3 {
    background: url('images/5.jpg') center/cover no-repeat;
}

.image-column4 {
    background: url('images/6.jpg') center/cover no-repeat;
}

.image-column5 {
    background: url('images/7.jpg') center/cover no-repeat;
}

.image-column6 {
    background: url('images/8.jpg') center/cover no-repeat;
}

.image-column7 {
    background: url('images/9.jpg') center/cover no-repeat;
}


.image-column8 {
    background: url('images/18.jpg') center/cover no-repeat;
}

.image-column9 {
    background: url('images/3.jpg') center/cover no-repeat;
}

.image-column10 {
    background: url('images/13.jpg') center/cover no-repeat;
}

.image-column11 {
    background: url('images/11.jpg') center/cover no-repeat;
}

.image-column12 {
    background: url('images/logo_cagro_full.jpg') center/cover no-repeat;
}

.menu-selector {
    margin-top: -40px;
}


.scroll-button {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: none;
    border: none;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
}

.scroll-button svg {
    width: 24px;
    height: 24px;
    transition: fill 0.3s ease;
}

.scroll-button.yellow svg {
    fill: #FDB829; /* Amarelo */
}

.scroll-button.green svg {
    fill: #0D5D3C; /* Verde */
}

.scroll-button.up {
    top: 5em;
}

.scroll-button.down {
    bottom: 10px;
}

.scroll-button.down.first-arrow {
    bottom: 90px;
}

.scroll-button.hidden {
    display: none;
}

.topics {
text-align: left; 
width: 80%; 
margin: 0 2rem 1rem 20%;
}

.topics a {
    color: #000000;
    text-decoration-color: #000000;
    text-decoration-thickness: 1px;
    text-decoration-style: dotted;
    text-underline-offset: 7px;
    font-weight: bold;
}

.topics a:hover {
    color: #0e693f;
    text-decoration-style: solid;
}


.topics-white-right {
text-align: left; 
width: 80%; 
margin: 0 0 0 15%;
flex: 1;
}

.topics-white-right p {
font-size: 1rem;
}

.topics-white-left {
text-align: left; 
width: 100%; 
margin: 0 0 0 15%;
flex: 1;
}

.white-left-p {
    margin-left: 0;
    margin: 0 0 2em 0;
}

.topics-white-left li {
    line-height: 170%;
    font-size: 1em;
}

.topics-white-left h2 {
margin-left: 0;
margin-bottom: 1rem;
}

.topics-especificos p {
    font-size: 1.4rem;
}

.logo_agro {
    width: 100px;
    margin-left: 2rem;
    margin-right: 1rem; 
    margin-bottom: -6px;
}

.columns-container {
    display: flex;
    gap: 40px; /* Espaço entre colunas */
}

.nav-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    background: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 1rem;
}

.nav-link:hover {
    background: #45a049;
}

/* MENU HAMBURGUER */
.menu-selector {
	position: relative;
	width: 25px;
	height: 25px;
	float: right;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.menu-selector span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #bbb;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
.menu-selector span:nth-child(1) {
	top: 2px;
}
.menu-selector span:nth-child(2),.menu-selector span:nth-child(3) {
	top: 10px;
}
.menu-selector span:nth-child(4) {
	top: 18px;
}
.menu-open .menu-selector span:nth-child(1), .menu-toggle[aria-expanded="true"] .menu-selector span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}
.menu-open .menu-selector span:nth-child(2), .menu-toggle[aria-expanded="true"] .menu-selector  span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.menu-open .menu-selector span:nth-child(3), .menu-toggle[aria-expanded="true"] .menu-selector  span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.menu-open .menu-selector span:nth-child(4), .menu-toggle[aria-expanded="true"] .menu-selector  span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

/* HOME */
.home-box {
    height: calc(100vh - 80px);
    width: 100%;
    height: 0;
}
.home-box-independente {
    position: absolute;
    top: 0;
}
.home-image-column {
    display: flex;
    flex-direction: row;
    background: #fff;
    height: calc(100vh - 80px);
    width: 100%;
    justify-content: center;
}
@media (min-width: 1450px) {
    .home-image-column {
        background: #fff url('images/bg-agro.svg') top center;
    }
}
.home-block-pb-btn {
    cursor: pointer;
}
.home-block-pb-btn:hover {
    opacity: 0;
}
.tooltip {
    opacity: 0;
    transition: all 250ms ease;
}
svg .graf-square{
    fill:#e6e6e6;
}
.tooltip-color{
    fill:#fdb813;
}
.box-2, .box-7 {
    transform: scaleX(1.35) translate(-18px, 0px);
}
.tooltip-stroke{
    stroke:#fdb813;
    stroke-miterlimit:10;
    stroke-width:1px;
}
.tooltip-text {
    font-size: 14px;
    font-family: Rawline, Arial, Helvetica, sans-serif;
    letter-spacing: -0.04em;
}
.home-link-btn:hover .tooltip {
    opacity: 1;
}
.home-main-logo-img {
    position: absolute;
    max-height: calc(100vh - 250px);
    top: 100px;
}
.slide-footer {
    background: #071d41;
    height: 80px;
    margin-top: calc(100vh - 80px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* social */
.social-media ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.social-icon {
    width: 35px;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-right: 5px;
    fill: #fff
}

.social-icon.tiktok path {
    fill: #fff
}

.social-icon .icon-bg {
    transition: fill 250ms ease-out
}

.social-icon .icon-logo {
    transition: fill 150ms ease-out;
    fill: #fff
}

.social-icon.youtube:hover .icon-logo {
    fill: #d03b3b
}

.social-icon.instagram:hover .icon-logo {
    fill: #c54173
}

.social-icon.tiktok:hover path {
    fill: #fe004f
}

.social-icon.facebook:hover .icon-logo {
    fill: #5176c9
}

.social-icon.whatsapp:hover .icon-logo {
    fill: #25d366
}

.social-icon.twitter {
    width: 21px;
    padding-top: 8px;
    margin: 0 12px 0 7px
}

.social-icon.bluesky {
    margin: 0 5px 0 1px
}

.social-icon.twitter:hover .icon-logo {
    fill: #858585
}

.social-icon.bluesky:hover .icon-logo {
    fill: #1084fe
}

.footer-logos {
    position: absolute;
    right: 0;
}
.logo-mpo {
    width: 200px;
    margin-right: 25px;
}
.logo-govbr {
    width: 105px;
    margin-right: 45px;
}
@media (max-width: 600px) {
    .home-image-column {
        background: #fff url('images/bg-agro2.svg') top center;
        background-size: cover;
    }
    #bg-graf-agro {
        display: none;
    }
    .slide-footer {
        justify-content: flex-start;
    }
    .footer-logos {
        /* display: none; */
        zoom: .7;
        margin-right: 20px;
   }
   .social-media {
        zoom: .75;
        margin-left: 20px;
    }
    .social-icon {
        width: 32px;
        margin: 0px;
    }
    .social-icon.twitter {
        width: 19px;
        margin: 0;
    }
    .social-icon.bluesky {
        margin: 0px 0px 0 1px;
    }
    .logo-mpo {
        width: 150px;
        margin-right: 0;
    }
    .logo-govbr {
        width: 75px;
        margin-right: 0;
    }
}

footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem 0;
}

/* Acessibilidade */
.nav-link:focus {
    outline: 3px solid #ff9800;
}

.slide {
    min-height: 100vh;
    scroll-snap-align: start; /* Para compatibilidade adicional com navegadores modernos */
}

.slide:focus {
    outline: none;
}

ul li::marker {
    color: #0D5D3C;
    font-size: 1.5em;

}

::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #0D5D3C;
  }
  
  ::selection {
    color: #fff;
    background: #0D5D3C;
  }

  .bg-white {
    background-color: #fff;
  }




@media (min-width: 600px) and (max-width: 1024px) {

    nav {
        width: 90%;
    }

    nav ul {
        padding: 0;
    }
    
    nav ul li {
    padding: 0.5rem;
    padding-left: 2em;
    padding-right: 2em;
    transition: color 0.5s;
}

    .slide {
    flex-direction: column; 
    height: auto;
    }


    .image-column3 {
        background: url(images/5.jpg) center 30% / cover no-repeat;
    }

    .image-column4 {
        background: url(images/6.jpg) center 30% / cover no-repeat;
    }

   .image-column2 .image-column3 .image-column4 .image-column5 .image-column6 .image-column7 .image-column8 {
    height: 20%; 
    width: 100%;
    }

    .image-column2, .image-column3,.image-column4,.image-column5,.image-column6, .image-column7,.image-column8 {
        flex: 1;
        display: flex;
        align-items: stretch; /* Faz com que as divs filhas ocupem a altura total */
        min-height: 150px; /* Altura mínima */
        max-height: 200px; /* Altura máxima */
        overflow: auto; /* Adiciona uma barra de rolagem se o conteúdo for muito grande */
    }
    .text-column {
    height: 80%; 
    display: flex;
    justify-content: flex-start;
    padding: 1rem 2rem 1rem 2rem;
    }

    h1 {
        font-size: 1.5rem;
        margin: 1rem 2rem 1rem 0;
        text-align: left;
    }

    h2 {
        font-size: 1.1rem;
        margin: 0;
    }

    .white h3 {
        margin: 1rem 1rem 0 2rem;
    }

    .white h2 {
        margin: 0 1rem 0 2rem;
    }

    .white .topics {
        margin: 0 2rem 0 3rem;
 
    }

    .topics li::marker {
        font-size: 1rem;
    }

    .white .topics li::marker {
        font-size: 1em; 
    }
    .white .topics p{
        margin: 0;
        width: 80%;
        font-size: 1.1em;
    }

    .white p {
        width: 80%;
        margin: 0 1rem 0 2rem;
    }

    .white ul h2 {
        margin: 0;
        font-size: 1.1em;
    }
    .topics-white-right {
        font-size: 1rem;
    }


    .columns-container {
        flex-direction: column;
    }

    .topics {
        width: 100%;
        margin-left: 0;
        margin-left: 1rem;
    }

    p {
        font-size: 1.1rem;
        width: 100%;
        margin-left: 0;
    }


    .topics p {
        font-size: 1.1rem;
        width: 100%;

    }

    .subheader {
        height: 180px;
    }

    .white-h1 {
        margin: 8rem 2rem 1rem 2rem;

    }

    .logo_agro {
        margin-left: 0;
    }
 }


@media (max-width: 600px) {

    nav {
        width: 90%;
    }

    nav ul {
        padding: 0;
    }
    
    nav ul li {
    padding: 0.5rem;
    padding-left: 2em;
    padding-right: 2em;
    transition: color 0.5s;
}

    .slide {
    flex-direction: column; 
    height: auto;
    }

   .image-column2 .image-column3 .image-column4 .image-column5 .image-column6 .image-column7 .image-column8 {
    height: 20%; 
    width: 100%;
    }
    .image-column3 {
        background: url(images/5.jpg) center 30% / cover no-repeat;
    }
    .image-column4 {
        background: url(images/6.jpg) center 30% / cover no-repeat;
    }
    .image-column2, .image-column3,.image-column4,.image-column5,.image-column6, .image-column7,.image-column8 {
        flex: 1;
        display: flex;
        align-items: stretch; /* Faz com que as divs filhas ocupem a altura total */
        min-height: 150px; /* Altura mínima */
        max-height: 200px; /* Altura máxima */
        overflow: auto; 
    }

    .text-column {
    height: 80%; 
    display: flex;
    justify-content: flex-start;
    padding: 1rem 2rem 1rem 2rem;
    }

    h1 {
        font-size: 1.5rem;
        margin: 1rem 2rem 0 0;
        text-align: left;
    }

    h2 {
        font-size: 1.1rem;
        margin: 0;
    }

    .white h3 {
        margin: 1rem 1rem 0 2rem;
    }

    .white h2 {
        margin: 0 1rem 0 2rem;
    }

    .white .topics {
        margin: 0 2rem 0 3rem;
 
    }
    .white-left-p {
        margin: 0 0 2em 0;
    }
    .topics li {
        margin-top: -10px;
    }

    .topics li::marker {
        font-size: 1rem;
    }

    .white .topics li::marker {
        font-size: 1em; 
    }
    .white .topics p{
        margin-left: 0;
        width: 80%;
        font-size: 0.9em;
    }

    .white p {
        width: 80%;
        margin: 0 1rem 0 2rem;
    }
    .topics-white-right li:first-child {
        margin-top: 10px;
    }
    .white .topics ul {
        margin-top: 1em;
        }
    .topics-white-right b{
        margin-bottom: 1em;
    }

    .white ul h2 {
        margin: 0;
    }
    .topics-white-right {
        font-size: 1rem;
    }



    .columns-container {
        flex-direction: column;
    }

    .topics {
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
    }

    p {
        font-size: 0.8rem;
        width: 100%;
        margin-left: 0;
    }


    .topics p {
        font-size: 0.8rem;
        width: 100%;

    }

    .subheader {
        height: 180px;
    }

    .white-h1 {
        margin: 8rem 2rem 1rem 2rem;

    }

    .logo_agro {
        margin-left: 0;
    }
}

@media (max-height:800px) and (min-width:1025px) {

    p {
        font-size: 1.1rem;
        line-height: 140%;
    }

    h1 {
        font-size: 1.4rem;
        margin-top: 6rem;
    }

    h2 {
        font-size: 1.2rem;
        margin-right: 2rem;
    }

    li p {
        font-size: 1rem;
        line-height: 140%;
        margin-bottom: 0;
    }

    .white-h1 {
        margin-top: 7rem;
    }

    .subheader {
        height: 160px;
    }

    .white .topics p {
        font-size: 1rem;
        margin-bottom: 0;
    }
    nav ul li {
        padding-bottom:0;
        padding-top: 0.6em;
    }
}

@media (height:480px) and (width:624px) {
    p {
        font-size: 0.7em;
    }
    .topics p {
        font-size: 0.7em;
    }
    .white .topics p {
        font-size: 0.7em;
    }
}