/*
Theme Name: Twenty Twenty Four Child
Template: twentytwentyfour
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: WorldCargo
Author URI: https://goworldcargo.com
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* Basic */
.footer-fix {
	margin-block-start: 0rem !important;
}

.header-fix {
	margin-block-start: 0rem !important;
}

.icon-center { 
	display: flex;
	justify-content: center;
}

.make-flex {
	display: flex;
	flex-direction: column;
}

.word-break {
	word-break: normal;
}

.no-word-break a,
.no-word-break a span {
    white-space: nowrap;
}

.two-column-fix ul {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.gap-fix h2{
	gap: 0px !important;
	flex-basis: min(0em, 0em) !important;
}

.stickyHeader {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensures the header stays on top of other content */
}

.remove-outline:focus {
	outline: none !important;
}

.basic-link a{
	text-decoration: none;
}

.basic-link a:hover {
	text-decoration: underline;
}

.basic-link-block {
	display: block;
	text-decoration: none;
}

.adjusted-line-height {
	line-height: 1;
}

.no-margin {
	margin: 0;
	margin-block-start: 0rem !important;
	margin-block-end: 0rem !important;
}

/* Site Logo */
.site-logo img{
	width: 25vw;
	padding: 0;
	margin: 0;
	transition: transform 0.15s ease;
}

.site-logo img:hover {
  transform: scale(1.04);
  transition: transform 0.15s ease;
}

@media screen and (max-width: 781px) { 
	.site-logo img {
	width: 70vw;
	padding: 0;
	margin: 0;
	transition: transform 0.15s ease;
    }
}

/* Tags */

.tag-pills a{
  display: inline-block;
  padding: 5px 15px; /* Adjust for size */
  font-size: 0.75em;
  font-weight: 500; /* Semi-bold for better visibility */
  color: #000000; /* Text color */
  background-color: #ffffff; /* Background color */
  border-radius: 25px; /* Full rounding for pill shape */
  margin:0 0 5px 0; /* Space between pills */
  text-align: center;
  white-space: nowrap; /* Prevents text from breaking */
  text-decoration: none;
}

.tag-pills a:hover {
  background-color: #0075c9; /* Darker shade for hover effect */
  color: #ffffff; /* Maintain white text */
}

/* Nav Menu */
@media screen and (max-width: 1000px) {
    nav > button {
        display: block !important;
    }
}

@media screen and (max-width: 1000px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}

.nav-bts a:hover {
	color: #0075c9 !important;
/* 	text-decoration: none; */	
}

a:focus {
	outline: none !important;
}

/* Outline Buttons */

.bt-outline-blue > a {
  color: #0075c9;
  border-color: #0075c9 !important;
  background-color: #ffffff;
  transition: transform 0.15s ease;
}

.bt-outline-blue:hover > a {
  color: #ffffff !important;
  border-color: #0075c9 !important;
  background-color: #0075c9 !important;
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

.bt-outline-blue:active > a {
  transform: scale(1.02);
  transition: transform 0.1s ease;
  background-color: #0066b0 !important;
}

.bt-outline-blue:focus > a {
  background-color: #0075c9 !important;
}

/* Solid Blue Button */
.bt-solid-blue > a {
  transition: transform 0.15s ease;
  background-color: #0075c9 !important;
}

.bt-solid-blue:hover > a {
  transform: scale(1.05);
  transition: transform 0.15s ease;
  background-color: #0075c9 !important;
}

.bt-solid-blue:active > a {
  transform: scale(1.02);
  transition: transform 0.1s ease;
  background-color: #0066b0 !important;
}

.bt-solid-blue:focus > a {
  background-color: #0075c9 !important;
}

/* Solid White Button */
.bt-solid-white > a {
  transition: transform 0.15s ease;
}

.bt-solid-white:hover > a {
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

.bt-solid-white:active > a {
  transform: scale(1.02);
  transition: transform 0.1s ease;
  background-color: #ececec !important;
}

/* Regular Blue Button */

.bt-blue:hover {
	background-color: #0066b0 !important;
}

.bt-blue:active {
	background-color: #005796 !important;
}

.bt-blue:focus {
	outline: none !important;
	background-color: #0075c9 !important;
}

/* Search Button */

.nav-search div {
	gap: 0.5em;
}

.nav-search input {
	border-left-style: none !important;
}

.nav-search input:focus {
	outline-color: #0075c9 !important;
}

.nav-search button:hover {
	background-color: #0066b0 !important;
}

.nav-search button:active {
	background-color: #005796 !important;
}

.nav-search button:focus {
	outline: none !important;
}

.reg-search button:hover {
	background-color: #0066b0 !important;
}

.reg-search button:active {
	background-color: #005796 !important;
}

.reg-search button:focus {
	outline: none !important;
}

.reg-search div {
	border: none;
}

/* Hide Recaptcha */
.grecaptcha-badge { visibility: hidden; }

/* Columns on Mobile */
@media screen and (max-width: 781px) {
	.reverse-container {
    	flex-wrap: wrap-reverse !important;
	}
	
	.image-ratio {
		aspect-ratio: 18 / 6;
 		width: 100%; 
  		overflow: hidden;
 		object-fit: cover;
	}
	
	.col-flex {
		display: flex;
		gap: 1em;
	}
}

/* Visibility */

@media screen and (max-width: 781px) {
	.only-desktop {
		display: none !important;
	}
}

@media screen and (min-width: 782px) {
	.only-mobile {
		display: none !important;
	}
}

/* Customs Anchor */

.div-anchor {
  text-decoration: none; /* Remove underline */
  cursor: pointer; /* Show click cursor on hover */
}

.div-anchor > div {
	transition: transform 0.15s ease;
}

.div-anchor div:hover {
  cursor: pointer; /* Ensure the cursor changes when hovering over the div */
}

.div-hover:hover > div {
  transform: scale(1.05); /* Scale up the content */
  transition: transform 0.15s ease; /* Smooth transition */
}

/* Circular Background */

.circular-background {
  width: 5em; /* Set the width of the circle */
  height: 5em; /* Set the height equal to the width */
  border-radius: 50%; /* Make it a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2em;
  box-sizing: border-box; /* Include padding in the width and height */
}

/* Contact Form 7 */

.wpcf7-form p{
  color: black;
}

.wpcf7-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #333;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7 select,
.wpcf7 option,
.wpcf7-form textarea {
  font-family: roboto, sans-serif;
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #fff;
}

.wpcf7-form input[type="text"]::placeholder,
.wpcf7-form input[type="tel"]::placeholder,
.wpcf7-form input[type="email"]::placeholder,
.wpcf7-form textarea::placeholder {
  color: #a2a2a2;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: #0075C9;
}

.wpcf7-form textarea {
  resize: vertical;
  height: 100px;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #005f8d;
}

.wpcf7-response-output {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #0073aa;
  background-color: #e1f1f9;
  border-radius: 4px;
  color: #0073aa;
  font-size: 14px;
}

.form-buttons p {
	display: flex;
	gap: 0.5em;
	justify-content: center;
}

/* Multi-page Form */
#step-2, #step-3 {
	display: none;
}

fieldset {
	border: 1px solid #ccc;
	padding: 20px;
	margin-bottom: 20px;
}

.form-flex {
	display: flex;
	align-items: end;
	gap: 1em;
	
}

.form-flex p:has(label) {
	width: 100%;
}

.form-flex p, .form-flex label {
	margin: 0em;
}

@media screen and (max-width: 781px) {
	.form-flex {
		display: block;
	}
	
	.form-flex label {
		margin-bottom: 1em;
	}
}

/* Form Thank You */

.ty-msg {
	display: none;
}

.ty-msg-content {
	display: hidden; 
    transition: opacity 1s ease-in-out; /* Fade-in transition */
}

/* Arrow */

.arrow {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.arrow span {
    display: block;
    width: 1.5vw;
    height: 1.5vw;
    border-bottom: 5px solid white;
    border-right: 5px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
    animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}