/**
 * Theme Name:     Travel Monster Child - Ibexoft
 * Author:         Ibexoft
 * Template:       travel-monster
 * Text Domain:	   travel-monster-child-ibexoft
 * Description:    Travel Monster is a free travel and tour booking WordPress theme for travel agencies. It is powered by the WP Travel Engine plugin, the most popular travel booking plugin. You can use the Travel Monster theme to create websites such as travel agencies, tour operators, trekking, camping, mountaineering, surfing, city tour, rafting, jungle safari, hiking, tourism, summer holidays, winter holidays, wine tours, cruise websites, beach holidays, etc. You can create itineraries, destinations, activities, trip types. etc. Your website visitors can quickly search for tours and book them. Travel Monster is mobile-friendly, SEO-optimized, translation-ready and RTL-ready. Plus, it is compatible with Elementor and Gutenberg, offering more flexibility to customise your website. Check the demos here: https://wptravelengine.com/travel-monster-demo/. Documentation at https://docs.wptravelengine.com/docs-category/travel-monster/, and get support at https://wptravelengine.com/support/.
 * Author URI:     http://ibexoft.com
 * Version:        0.1
 */



 .countries-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Two equal columns */
    gap: 15px 0px;
    width: 100%;
    padding: 40px 60px; /* Padding for grid container */
}

.country-item {
	text-align: center;
    padding: 15px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, background 0.2s ease;
    height: auto;
	border-radius: 10px;
    position: relative;
    overflow: hidden;
	margin-top: -10px;
/* 	background-color: #EAF7FF; */
/* 	border: 1px solid rgba(0, 0, 0, 0.1); */
}

.country-item:hover {
	transition: 0.2s ease-in-out;
  transform: translateY(-2px); /* Move the box up */
}


.flag-container {
    display: inline-block;
    perspective: 1000px; /* Enable 3D effect */
    transform-style: preserve-3d;
    margin: 0; /* Remove margin */
/*     padding: 0; /* Remove padding */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Slight rounding for a realistic look */
    overflow: hidden; /* Clip the flag image */
    line-height: 0; /* Prevent spacing caused by inline elements */
    width: fit-content; /* Wrap tightly around the image */
}

.flag-container:hover {
    transform: rotateX(15deg) rotateY(15deg); /* 3D tilt effect on hover */
    transition: transform 0.3s ease;
}

.country-flag {
    width: 100px;
    height: 50px; /* Exact flag dimensions */
    object-fit: cover;
    display: block; /* Ensures block-level layout */
    border: 1px solid white;
    margin: -16px auto; /* Remove extra spacing from the image */
    padding: 0; /* No padding on the image */
}

.country-title {
    font-size: 20px;
    font-weight: 500;
    color: #2C7DD1; /* Title color */
    margin: 0;
}

.country-price {
    font-size: 14px;
    color: #E48E45; /* Price color */
	margin: 0;
	margin-top: -6px; /* Ensure no extra space */
}

@media (max-width: 920px) {
    .countries-grid {
        grid-template-columns: repeat(4, 1fr); /* Single column on mobile */
		padding: 40px 10px;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .countries-grid {
        grid-template-columns: repeat(2, 1fr); /* Single column on mobile */
		padding: 40px 10px;
    }

    .country-item {
        padding: 12px; /* Smaller padding for mobile */
    }

    .country-title {
        font-size: 16px; /* Smaller title font size */
    }

    .country-price {
        font-size: 14px; /* Smaller price font size */
    }
}