:root {
		/* --color-primary: #002668; Padrão */
		--color-primary: #0f377e;
		--color-primary-get-start: #1653aa;
		--color-primary-variant: #001947ff;
		--color-secondary: #FF6F00;
		--color-secondary-variant: #FFA000;
		--color-background: #FFFFFF;
		--color-background-footer: #021e4d;
		--color-surface: #F5F5F5;
		--color-error: #B00020;
		--color-text-primary: #FFFFFF;
		--color-text-secondary: #000000;
			--bs-nav-link-hover-color: #54c9eb;
	}

	#header .logo {
	font-size: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	}

	#header .logo a {
	color: #5f687b !important;
	}

	#header .logo img {
	max-height: 70px !important;
	}

	#header {
		/* background: var(--color-primary) !important; */
			background: linear-gradient(to bottom, var(--color-primary), var(--color-background-footer)) !important;
			color: var(--color-text-primary) !important;
	}

	#hero {
		position: relative;
		background-image: url('../img/bg.png') !important;
		background-size: cover !important;
		background-position: center -30px  !important;
		background-repeat: no-repeat !important; 
		background-attachment: fixed !important; 
		height: 870px;
		 
	}

	#hero::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.22); /* Cor preta com 50% de opacidade */
		z-index: 1; /* Garante que a sobreposição fique acima do fundo */
	}

	#hero * {
		position: relative;
		z-index: 2; /* Garante que o conteúdo do #hero fique acima da sobreposição */
	}

	#hero h1 {
		margin: 0 !important;
		font-size: 48px !important;
		font-weight: 700 !important;
		line-height: 56px !important;
		color: #eeeeee !important;
	}

	#hero h2 {
		color: #eeeeee !important;
		margin: 10px 0 30px 0 !important;
		font-size: 24px !important;
	}

	.navbar a, .navbar a:focus {

		color: var(--color-text-primary) !important;

	}

	.nav-link:focus, .nav-link:hover {
		color: var(--bs-nav-link-hover-color) !important;
	}

	#header .logo a {
		color: var(--color-text-primary) !important;
	}

	.mobile-nav-toggle {
		color: var(--color-text-primary) !important;
		
	}

	.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a {
		color: var(--color-text-primary) !important;
	}

	.navbar a, .navbar a:focus {
		color: var(--color-text-primary) !important;
	}

	.navbar-mobile ul {

		background-color: #00000092 !important;
		
	}

	#hero .btn-watch-video {
		background-color: #00000092 !important;
		border-radius: 5px;
		padding-inline: 10px;
		font-size: 16px !important;
		display: inline-block !important;
		transition: 0.5s !important;
		margin-left: 25px !important;
		color: #ffffff !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	#hero .btn-watch-video:hover i {
		color: #28b3dc !important;
		
	}

	.counts .counters span {
		font-size: 48px !important;
		display: block !important;
		color: var(--color-primary) !important;
		font-weight: 700 !important;
		
	}
	

	#footer {
		/* background-color: var(--color-background-footer) !important; */
		color: var(--color-text-primary) !important;
		background: linear-gradient(to bottom, var(--color-primary), var(--color-background-footer)) !important;

	}

	#footer .footer-top h3 {
		
		color: var(--color-text-primary) !important;
		
	}

	.btn-color-primary-new {
		--bs-btn-bg: var(--color-primary) !important;
		--bs-btn-hover-bg: var(--color-primary-get-start) !important;
		background: var(--color-primary-get-start) !important;
		box-shadow: 0px 4px 16px var(--color-primary-get-start) !important;
		
	}

	#hero .btn-get-started {
		color: var(--color-text-primary) !important;
		background: var(--color-primary-get-start) !important;
		box-shadow: 0 8px 28px rgb(1, 64, 254) !important;
	}

	#hero .btn-get-started:hover {
	background: #045cd6 !important;
	/* box-shadow: 0 8px 28px rgba(32, 107, 251, 0.45) !important; */
	}

	.cta {
		position: relative; /* Necessário para que o pseudo-elemento seja posicionado corretamente */
		background-image: url('../img/bg_agroclima.jpeg') !important;
		background-size: cover !important; /* Cobre todo o elemento */
		background-position: center center !important; /* Centraliza a imagem */
		background-repeat: no-repeat !important; /* Evita repetição da imagem */
		background-attachment: fixed !important; /* Mantém a imagem fixa ao rolar */
		padding: 60px 0 !important;
	}

	.cta::before {
		content: "" !important; /* Necessário para criar o pseudo-elemento */
		position: absolute !important; /* Posiciona o pseudo-elemento relativamente ao elemento pai */
		top: 0 !important; /* Alinha ao topo do elemento pai */
		left: 0 !important; /* Alinha à esquerda do elemento pai */
		width: 100% !important; /* Largura total do elemento pai */
		height: 100% !important; /* Altura total do elemento pai */
		background: linear-gradient(
			rgb(7, 17, 34), /* Cor #0f377e com 50% de opacidade no início */
			rgba(9, 35, 79, 0.783)    /* Cor #0f377e totalmente transparente no final */
		) !important;
		z-index: 1 !important; /* Coloca o pseudo-elemento acima do fundo, mas abaixo do conteúdo */
	}

	.cta > * {
		position: relative !important; /* Garante que o conteúdo da .cta esteja acima do pseudo-elemento */
		z-index: 2 !important;
	}

	.cta .cta-btn {
		font-family: "Raleway", sans-serif !important;
		text-transform: uppercase !important;
		font-weight: 500 !important;
		font-size: 16px !important;
		letter-spacing: 1px !important;
		display: inline-block !important;
		padding: 8px 28px !important;
		border-radius: 4px !important;
		transition: 0.5s !important;
		margin-top: 10px !important;
		box-shadow: 0px 1px 10px 10px var(--color-primary) !important;
		border: 4px solid #0f53d0 !important;
		background-color: var(--color-primary) !important;
		color: #fff !important;
	}

	.cta .cta-btn:hover {
	background: #206bfb !important;
	border-color: #206bfb !important;
	}

	.contact .info i {
		font-size: 20px;
		color: #1890AD;
		float: left;
		width: 44px;
		height: 44px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50px;
		transition: all 0.3s ease-in-out;
	}

	.contact .php-email-form button[type=submit]:hover {
	background: #1890AD !important;
	}

	.services .icon-box .icon i {
		color: #1890AD;
		font-size: 36px;
		transition: 0.3s;
	}

	.services .icon-box:hover h4 a {
	color: #1890AD;
	}

	/* .contact .info .email:hover i,
	.contact .info .address:hover i,
	.contact .info .phone:hover i {
	background: #1890AD;
	color: #fff;
	} */

	.contact .info {
		border-top: 3px solid #1890AD;
		border-bottom: 3px solid #1890AD;
		padding: 30px;
		width: 100%;
		background-color: #f9f9fa;
	}

	.contact .php-email-form {
		width: 100%;
		border-top: 3px solid #1890AD;
		border-bottom: 3px solid #1890AD;
		padding: 30px;
		background-color: #f9f9fa;
	}

	.contact .php-email-form input:focus,
	.contact .php-email-form textarea:focus {
	border-color: #1890AD;
	}

	.contact .php-email-form .loading:before {
		content: "";
		display: inline-block;
		border-radius: 50%;
		width: 24px;
		height: 24px;
		margin: 0 10px -6px 0;
		border: 3px solid var(--color-primary);
		border-top-color: #eee;
		animation: animate-loading 1s linear infinite;
	}


	#footer .footer-top .footer-newsletter form input[type=submit] {
		position: absolute !important;
		top: -1px !important;
		right: -1px !important;
		bottom: -1px !important;
		border: 0 !important;
		background: none !important;
		font-size: 16px !important;
		padding: 0 20px !important;
		background: #1890ad !important;
		color: #fff !important;
		transition: 0.3s !important;
		border-radius: 0 4px 4px 0 !important;
		box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1) !important;
	}

	#footer .footer-top .footer-newsletter form input[type=submit]:hover {
	background: #22a4c8 !important;
	}

	#footer .footer-top .social-links a {
		
		background: #1890ad !important;
		color: var(--color-text-primary) !important;
		
	}

	#footer .footer-top .social-links a:hover {
		
		background: #22a4c8 !important;
		color: var(--color-text-primary) !important;
		
	}

	.credits a {

		color: var(--color-text-primary) !important;
	}

	.credits a:hover {

		color: #22a4c8 !important;
	}

	.img-fluid {
		max-width: 100% !important;
		min-height: auto !important;
	}

	.contact .php-email-form button[type=submit] {
		background: var(--color-primary-get-start) !important;
		border: 0 !important;
		padding: 10px 24px !important;
		color: #fff !important;
		transition: 0.4s !important;
		border-radius: 4px !important;
	}


	.back-to-top {
		box-shadow: 5px 5px 10px var(--color-background-footer);

		border-style: solid !important;
		border-width: 3px !important;
		border-color: var(--color-primary-get-start) !important;
		background: var(--color-primary) !important;
	}

	.back-to-top:hover {
		box-shadow: 5px 5px 10px var(--color-background-footer);
		background: var(--color-primary-get-start) !important;
	}

	.about .content ul i {
		
		color:#1890ad !important;
	}

	#hero .animated {
		animation: up-down 2s ease-in-out infinite alternate-reverse both;
	}

	.carousel-control-next-icon, .carousel-control-prev-icon {
		display: inline-block !important;
		width: 2.1rem !important;
		height: 2.1rem !important;
		background-repeat: no-repeat !important;
		background-position: 50% !important;
		background-size: 25px !important;
	}

	.btn-carrosel-personalizado {
		/* position: fixed; */
		background-color: rgb(3 32 81) !important;
		border-radius: 25% !important;
		display: inline-block !important;
		width: 2.1rem !important;
		height: 2.1rem !important;
		
		background-position: 50% !important;
		background-size: 25px !important;
	}

	.btn-arrow-carrosel-left {
		position: absolute;
		display: inline-block !important;
		border-radius: 15px;
		/* padding: 10px; */
		margin-top: -200px;
		width: 3.1rem !important;
		height: 3.1rem !important;
		
		margin-left: 10px;
		background-color: #5a5a5a2d;
	}

	.btn-arrow-carrosel-right {
		position: absolute;
		display: inline-block !important;
		border-radius: 15px;
		/* padding: 10px; */
		margin-top: -200px;
		margin-right: -1000px;
		width: 3.1rem !important;
		height: 3.1rem !important;
		
		margin-left: 10px;
		background-color: #5a5a5a2d;
	}

	.bg-arrow-carrosel {
		/* position: absolute; */

	}

	.pointer {
		cursor: pointer;
	}

	@keyframes up-down {
	0% {
		transform: translateY(5px);
	}

	100% {
		transform: translateY(-5px);
	}
	}