/*
 Theme Name: Trustport
 Description: Thema voor Trustport Verzekeringen
 Author: Webvive
 Author URI: https://webvive.nl/
 Template: Divi
 Version: 1.0.0
*/


/* T - Algemene styling */
	p {
		font-weight: 400 !important;
	}

	h2 {
		color: #21406b !important;
		font-weight: 600 !important;
	}

	p a {
		FONT-WEIGHT: 600;
	}

	div#page-container {
		padding-top: 151px !important;
	}

	/* =====================
	   Desktop
	   ===================== */
	.et_pb_section {
		padding: 30px 0 !important;
	}
	.et_pb_row {
		padding: 15px 0 !important;
	}

	.et_pb_section + .et_pb_section {
		padding-top: 0 !important;
	}

	/* =====================
	   Tablet
	   ===================== */
	@media (max-width: 980px) {
		.et_pb_section {
			padding: 24px 0 !important;
		}
		.et_pb_row {
			padding: 12px 0 !important;
		}
		.et_pb_section + .et_pb_section {
			padding-top: 0 !important;
		}
		
		div#page-container {
			padding-top: 126px !important;
		}
	}

	/* =====================
	   Mobiel
	   ===================== */
	@media (max-width: 767px) {
		.et_pb_section {
			padding: 18px 0 !important;
		}
		.et_pb_row {
			padding: 9px 0 !important;
		}
		.et_pb_section + .et_pb_section {
			padding-top: 0 !important;
		}
	}
/* E - Algemene styling */



.wv-btn {
    font-size: 16px;
    padding: 10px 20px;
    transition: 0.3s;
    width: fit-content;
    cursor: pointer;
    border-radius: 4px;
	text-align: center;
}

.wv-btn.wv-btn-blue {
    border: 1px solid #21406B;
    background: #21406B;
    color: white !important;
}

.wv-btn.wv-btn-blue:hover {
    opacity: 0.85;
}

.wv-btn.wv-btn-green {
    border: 1px solid #B9DBB2;
    background: #B9DBB2;
    color: #4e6c4a !important;
}

.wv-btn.wv-btn-green:hover {
    opacity: 0.85;
}

@media (max-width: 767px) {
	.wv-btn {
	    font-size: 15px;
	    padding: 10px 15px;
	    transition: 0.3s;
	    width: fit-content;
	    cursor: pointer;
	    border-radius: 4px;
	}

	.et_pb_group_1 {
    margin-top: -15px;
}
}







.pre-subtitle-green-small, .pre-subtitle-green-small p {
    color: #486645;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600 !important;
}

.pre-title-blue-h1, .pre-title-blue-h1 h1 {
    color: #032a54;
    font-size: 55px !important;
    font-weight: 700;
    line-height: 1.1;
}

@media (min-width: 1024px) and (max-width: 1450px) {
	.pre-title-blue-h1, .pre-title-blue-h1 h1 {
		font-size: 40px !important;
	}
}

@media (max-width: 1023px) {
	.pre-title-blue-h1, .pre-title-blue-h1 h1 {
		font-size: 39px !important;
	}
}

@media (max-width: 500px) {
	.pre-title-blue-h1, .pre-title-blue-h1 h1 {
		font-size: 32px !important;
	}
}

@media (max-width: 500px) {
	.home .pre-title-blue-h1, .home .pre-title-blue-h1 h1 {
		font-size: 39px !important;
	}
}






/* T - SVG styling */
	svg.tp-svg-check {
		width: 15px;
		height: 15px;
		color: #b9dbb2;
	}

	svg.tp-svg-mail {
		width: 15px;
		height: 15px;
		color: #b9dbb2;
	}

	svg.tp-svg-tel {
		width: 15px;
		height: 15px;
		color: #b9dbb2;
	}

	svg.tp-svg-marker {
		width: 15px;
		height: 15px;
		color: #b9dbb2;
	}
/* E - SVG styling */

/* T - Header */
	header#main-header {
		top: 37px !important;
	}

	#top-header .container {
		padding-top: 11px;
		padding-bottom: 11px;
		display: flex;
		justify-content: space-between;
		font-size: 13px;
		font-weight: 300;
	}

	div#top-header {
		border-bottom: 1px solid #b9dbb2;
	}

	#top-header .container.clearfix::after {
		display: none;
	}

	.tp-usps {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-between;
	}

	.tp-usp {
		display: flex;
		flex-direction: row;
		gap: 5px;
		align-items: center;
	}

	.header-usps {
		display: flex;
		width: 50%;
	}

	.header-data {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 15px;
		min-width: 350px;
	}

	.header-data-tel {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.header-data-mail {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	.header-data a:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	#top-menu li {
		padding-right: 30px;
	}

	#top-menu-nav>ul>li>a:hover {
		opacity: 1;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	@media (max-width: 1350px) {
		#top-header.usp-slider-active {
			overflow: hidden;
		}

		#top-header.usp-slider-active .header-usps {
			display: block !important;
			position: relative;
			width: 250px;
		}

		#top-header.usp-slider-active .tp-usps {
			display: block !important;
			height: 100%;
			position: relative;
		}

		#top-header.usp-slider-active .tp-usp {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex !important;
			align-items: center;
			justify-content: left;
			opacity: 0;
			transform: translateY(-100%); /* Start boven beeld */
			transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
		}

		#top-header.usp-slider-active .tp-usp.active-usp {
			opacity: 1;
			transform: translateY(0);
			z-index: 10;
		}

		#top-header.usp-slider-active .tp-usp.exit-usp {
			opacity: 0;
			transform: translateY(100%);
			z-index: 5;
		}

		#top-header.usp-slider-active .tp-usp svg {
			margin-right: 1px;
			width: auto;
		}
	}

	@media (max-width: 980px) {
		.et_header_style_left #logo {
			max-height: 68%;
		}
	}

	@media (max-width: 767px) {
		.header-data {
			display: none;
		}

		.header-usps {
			padding: 8px 0px;
			width: 100% !important;
		}

		#top-header.usp-slider-active .tp-usp {
			justify-content: center;
		}
	}
/* E - Header */

/* T - Mobile menu */
	ul#mobile_menu {
		padding: 0px 20px;
		border-radius: 0px 0px 7px 7px;
	}

	#mobile_menu li.menu-item {
		border-bottom: 1px solid #b9dbb2;
	}

	#mobile_menu li.menu-item:last-child {
		border: none;
	}

	#mobile_menu li.menu-item a {
		padding: 10px 0px;
	}

	.mobile_menu_bar:before {
		color: #b9dbb2 !important;
		font-size: 42px;
	}
/* E - Mobile menu */




.row-diensten .et_pb_column {
    background: cadetblue;
    border-radius: 15px;
    padding: 35px;
    gap: 15px;
}

@media (max-width: 767px) {
	.row-diensten .et_pb_column {
		padding: 25px;
	}
}

.row-diensten .et_pb_column .et_pb_image img {
    max-height: 60px;
    max-width: 60px;
}

.row-diensten .et_pb_column h2 {
    color: white !important;
    font-weight: 600;
    margin-bottom: -10px;
}

.row-diensten .et_pb_column.row-diensten-blue {
    background: #032a54;
}

.page-id-52 .row-diensten .et_pb_column.row-diensten-blue {
    height: fit-content;
}

.row-diensten .et_pb_column.row-diensten-green {
    background: #486645;
}

.row-diensten-green > a {
    margin-top: auto !important;
}

.row-diensten .et_pb_column.row-diensten-blue p {
    color: #d5e3ff;
}

.row-diensten .et_pb_column.row-diensten-green p {
    color: #c9ecc2;
}

.row-diensten a {
    color: white;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-color: #aed0a7;
    transition: 0.3s;
    font-size: 16px;
    margin-top: 10px;
}

.row-diensten a:hover {
    text-decoration-color: white;
}



/* T - Footer */
	.site-footer {
	  background-color: #21406b;
	  color: #ffffff;
	  padding-top: 50px;
	}

	a.footer-logo img {
		max-width: 180px;
	}

	.footer-container {
	  max-width: 1405px;
	  margin: auto;
	  width: var(--content-width);
	}

	.footer-grid {
	  display: grid;
	  grid-template-columns: 1fr;
	  gap: 3rem;
	  padding-bottom: 50px;
	}

	@media (min-width: 768px) {
	  .footer-grid {
		grid-template-columns: 2fr 1fr 1fr 1fr; 
	  }
	}

	.footer-logo {
	  font-size: 1.5rem;
	  font-weight: 900;
	  letter-spacing: -0.05em;
	  text-decoration: none;
	  color: #ffffff;
	  display: block;
	  margin-bottom: 1.5rem;
	}

	.footer-logo .dot {
	  color: #b9dbb2; 
	}

	.footer-description {
	  font-size: 0.875rem;
	  line-height: 1.6;
	  opacity: 0.7;
	  margin-bottom: 2rem;
	  max-width: 350px;
	}

	.footer-contact-info {
	  margin-bottom: 20px;
	  display: flex;
	  flex-direction: column;
	  gap: 1rem;
	  list-style: none;
	}

	.contact-item {
	  display: flex;
	  align-items: center;
	  gap: 0.75rem;
	  color: #ffffff;
	  text-decoration: none;
	  font-size: 0.9rem;
	  transition: all 0.3s ease;
	}

	.contact-item .material-symbols-outlined {
	  font-size: 1.25rem;
	  color: #b9dbb2;
	}

	.contact-item:hover {
	}

	.social-links {
	  display: flex;
	  gap: 1rem;
	  padding-left: 5px;
	}

	.social-icon {
	  width: 44px;
	  height: 44px;
	  background: rgba(255, 255, 255, 0.1);
	  border-radius: 8px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  text-decoration: none;
	  color: #ffffff;
	  transition: all 0.3s ease;
	}

	.social-icon:hover {
	  background: #b9dbb2;
	  color: #21406b;
	}

	.footer-title {
	  color: #b9dbb2;
	  font-size: 0.85rem;
	  font-weight: 700;
	  text-transform: uppercase;
	  letter-spacing: 0.12em;
	  margin-bottom: 1.5rem;
	}

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

	.footer-links li {
	  margin-bottom: 1rem;
	}

	.footer-links a {
	  font-size: 0.875rem;
	  color: #ffffff;
	  text-decoration: none;
	  opacity: 1;
	  transition: all 0.3s ease;
	}

	.footer-links a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	}

	.credentials-info {
	  font-size: 0.875rem;
	  opacity: 0.7;
	  line-height: 1.6;
	}

	.credentials-info p {
	  margin-bottom: 0.5rem;
	  padding-bottom: 0px;
	}

	.group-tag {
	  margin-top: 1.5rem;
	  padding-top: 1rem;
	  border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.group-tag strong {
	  color: #ffffff;
	  font-weight: 600;
	}

	.footer-bottom {
	  border-top: 1px solid rgba(255, 255, 255, 0.05);
	  padding: 2rem 0;
	}

	.bottom-content {
	  display: flex;
	  justify-content: center; 
	  text-align: center;
	  font-size: 10px;
	  text-transform: uppercase;
	  letter-spacing: 0.2em;
	  opacity: 0.5;
	}

	.footer-contact-info li {
	    display: flex;
	    align-items: center;
	}
	
	.footer-contact-info li svg {
	    width: 32px;
	}
	
	.footer-contact-info li a {
	    color: white;
	}

	.footer-contact-info li a:hover {
	    text-decoration: underline;
	    text-underline-offset: 4px;
	}

	.group-tag svg {
		max-width: 117px;
		max-height: 35px;
	}

	.group-tag svg path {
		fill: white;
	}

	@media (max-width: 768px) {
	  .site-footer {
		padding-top: 50px;
		text-align: left;
		}

	  .footer-description {
		margin-left: auto;
		margin-right: auto;
	  }

	  .contact-item {
		justify-content: center;
	  }

	  .social-links {
		justify-content: left;
		}

	  .contact-item:hover {
		transform: none;
	  }
	}
/* E - Footer */






/* T - Buttons contact mobile */
	.mobile-contact-wrapper {
		display: none;
	}

	@media screen and (max-width: 767px) {
		.mobile-contact-wrapper {
			display: flex;
			flex-direction: column;
			position: fixed;
			bottom: 0px;
			right: 10px;
			z-index: 9999;
			gap: 9px;
			margin: 0;
			padding: 0;
			list-style: none;
			transition: all 0.3s ease-in-out;
			overflow: visible;
			padding-bottom: 10px;
		}

		.mobile-contact-wrapper.hide-buttons {
			opacity: 0;
			visibility: hidden;
			transform: translateY(20px);
		}

		.mobile-contact-wrapper li {
			position: relative;
			width: 40px;
			height: 40px;
			background-color: #21406b;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 4px 15px rgba(0,0,0,0.3);
			overflow: visible;
		}

		.mobile-contact-wrapper li svg {
			width: 15px;
			height: 15px;
			fill: #ffffff;
			pointer-events: none;
		}

		.mobile-contact-wrapper li a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			text-indent: -9999px; 
			display: block;
		}
	}
/* E - Buttons contact mobile */







.over-ons-1 img {
    max-height: 225px;
    object-fit: cover;
}






.page-id-3 section {
    margin-bottom: 25px;
}

.page-id-3 section ul {
    padding: 0px;
    padding-left: 19px;}

.page-id-3 section ul li {
    padding-bottom: 4px;
    font-weight: 400;
}

.page-id-3 section p {
    padding: 0px;
}

.download-tekst p {
    display: flex;
    flex-direction: column;
}

.download-tekst p a {
    background: #21406b;
    border-radius: 4px;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
	transition: 0.3s;
}

.download-tekst p a:hover {
	opacity: 0.85;
}

.download-afb img {
    max-height: 270px;
    object-fit: cover;
}

.contact-gegevens-lijst {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}
.contact-gegevens-lijst li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}
.contact-gegevens-lijst svg {
    width: 25px !important;
    color: #b9dbb2 !important;
}

.contact-gegevens-lijst a, .contact-gegevens-lijst span {
    text-decoration: none;
    margin-top: 0px;
    text-underline-offset: unset;
}

.contact-gegevens-lijst li span {
    color: white;
}

form#gform_1 {
    margin-top: 20px;
}

svg.tp-svg-clock {
    width: 25px !important;
    margin-right: 0px !important;
    height: 15px !important;
}

.contact-gegevens-lijst a:hover {
    text-decoration: underline;
    text-underline-offset: 4px !important;
}

div#gform_fields_1  {
    gap: 20px;
}

div#gform_fields_1 label {
    color: white !important;
}

div#gform_fields_1 span.gfield_required {
    color: #d49797;
}

div#gform_fields_1 legend {
    color: white;
}

div#gform_fields_1 .gform-field-label--type-sub {
    font-size: 12px !important;
    margin-top: 2px !important;
}

input#gform_submit_button_1 {
    background: #032a54;
}

div#gform_confirmation_message_1 {
    margin-top: 20px;
    color: white;
    background: #77a277;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid green;
}

.gfield_description.validation_message.gfield_validation_message {
    color: #d49797 !important;
}

div#gform_1_validation_container {
    margin-top: 20px;
    margin-bottom: 0px;
    background: #766868;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

.feature-item {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
}

.feature-item:first-of-type {
    margin-top: 15px;
}

.feature-item:last-of-type, .feature-item:last-of-type p {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.feature-item .number-circle {
    background-color: #486645; /* Pas dit aan naar de merkkleur */
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 15px;
    margin-top: 2px; /* Lijn het bolletje uit met de h3 tekst */
}

.feature-item .content h3 {
    font-weight: 600;
    font-size: 19px;
    margin-top: 7px;
    color: #032a54;
    line-height: 1.2;
}

.feature-item .content ul {
    margin: 0px 0;
    padding-left: 20px;
    font-weight: 400;
}

.banner-tl {
    background: #486645;
    padding: 25px !important;
    border-radius: 15px;
    color: white;
}

.banner-tl h2 {
    color: white !important;
}

.banner-tl p {
    font-size: 16px;
}

@media (min-width: 1024px) and (max-width: 1450px) {
    .row-contactform .et_pb_column {
        width: 47% !important;
    }
}

@media (max-width: 1023px) {
    .feature-item .content p {
        margin-left: -45px;
    }
    
    .feature-item .content p:first-of-type {
        margin-top: 6px;
    }
    
    .feature-item .content ul {
        margin-left: -45px;
    }
}

.banner-tl .et_pb_text_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.banner-tl .et_pb_text {
    width: 100%;
}

.page-id-50 .et_pb_section_7 img {
    max-height: 440px;
    object-fit: cover;
}

.contact-gegevens-lijst ul {
    padding: 0px;
}

@media (max-width: 767px) {
    .contact-gegevens-lijst a, .contact-gegevens-lijst span {
        font-size: 14px;
    }
}