:root {
     --primary-color: #2563eb;
     --secondary-color: #e6f3ff;
     --hover-color: #1d4ed8;
     --text-color: #333;
     --transition-speed: 0.3s;
     --facebook-color: #1877f2;
     --instagram-color: #e4405f;
     --youtube-color: #ff0000;
     --twitter-color: #1da1f2;
     --light-bg: #f8f9fa;
     --transition: all 0.3s ease;
 }


 /* General Styles */
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: var(--text-color);
     line-height: 1.6;
 }

 /* Hero Section */
 .hero-section {
     background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
     color: white;
     padding: 80px 0;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('../img/pattern.png') repeat;
     opacity: 0.1;
     animation: moveBackground 20s linear infinite;
 }

 @keyframes moveBackground {
     from {
         background-position: 0 0;
     }

     to {
         background-position: 100% 100%;
     }
 }

 .hero-section h1 {
     font-size: 3rem;
     font-weight: 700;
     margin-bottom: 1rem;
     position: relative;
 }

 .hero-section p {
     font-size: 1.2rem;
     opacity: 0.9;
     max-width: 600px;
     margin: 0 auto;
     position: relative;
 }

 /* Contact Info Cards */
 .contact-info-card {
     background: white;
     border-radius: 15px;
     padding: 2rem;
     text-align: center;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
     height: 100%;
     position: relative;
     overflow: hidden;
 }

 .contact-info-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
     opacity: 0;
     transition: var(--transition);
     z-index: 1;
 }

 .contact-info-card:hover {
     transform: translateY(-10px);
 }

 .contact-info-card:hover::before {
     opacity: 0.1;
 }

 .icon-wrapper {
     width: 70px;
     height: 70px;
     background: var(--light-bg);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     transition: var(--transition);
 }

 .contact-info-card:hover .icon-wrapper {
     background: var(--primary-color);
     transform: rotateY(360deg);
 }

 .icon-wrapper i {
     font-size: 1.5rem;
     color: var(--primary-color);
     transition: var(--transition);
 }

 .contact-info-card:hover .icon-wrapper i {
     color: white;
 }

 .contact-info-card h3 {
     color: var(--text-color);
     margin-bottom: 15px;
     font-size: 1.5rem;
 }

 .contact-info-card p {
     color: #666;
     margin-bottom: 5px;
 }

 /* Contact Form Section */
 .contact-form-section {
     background-color: #f8f9fa;
     padding: 80px 0;
 }

 .contact-image-wrapper {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
     height: 100%;
     min-height: 500px;
 }

 .contact-image-wrapper::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(29, 78, 216, 0.2));
     opacity: 0;
     transition: var(--transition);
     z-index: 1;
 }

 .contact-image-wrapper:hover::before {
     opacity: 1;
 }

 .contact-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: var(--transition);
 }

 .contact-image-wrapper:hover .contact-image {
     transform: scale(1.05);
     height: auto;
 }

 .contact-form-wrapper {
     background: white;
     padding: 2.5rem;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     height: 100%;
     transition: var(--transition);
 }

 .contact-form-wrapper:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }

 .form-floating>.form-control,
 .form-floating>.form-select {
     border: 2px solid #e2e8f0;
     border-radius: 10px;
     padding: 1rem 0.75rem;
     height: calc(3.5rem + 2px);
     line-height: 1.25;
     transition: all 0.3s ease;
 }

 .form-floating>.form-control:focus,
 .form-floating>.form-select:focus {
     border-color: var(--primary-color);
     box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.1);
     transform: translateY(-2px);
 }

 .form-floating>label {
     padding: 1rem 0.75rem;
     color: #64748b;
     transition: all 0.3s ease;
 }

 .form-floating>.form-control:focus~label,
 .form-floating>.form-select:focus~label {
     color: var(--primary-color);
     transform: scale(0.85) translateY(-1rem) translateX(0.15rem);
 }

 .btn-submit {
     background: var(--primary-color);
     border: none;
     padding: 1rem 2.5rem;
     border-radius: 10px;
     font-weight: 600;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .btn-submit::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: width 0.6s ease, height 0.6s ease;
 }

 .btn-submit:hover::before {
     width: 300px;
     height: 300px;
 }

 .btn-submit:hover {
     background: var(--hover-color);
     transform: translateY(-3px);
 }

 /* Social Media Section */
 .social-section {
     padding: 2rem;
     text-align: center;
 }

 .social-icons {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
     margin-top: 2rem;
 }

 .social-icon {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.5rem;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .social-icon::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: currentColor;
     opacity: 0.2;
     transition: var(--transition);
 }

 .social-icon:hover::before {
     opacity: 0.3;
     transform: scale(1.2);
 }

 .social-icon:hover {
     transform: translateY(-5px);
     color: white;
 }

 .facebook {
     background: var(--facebook-color);
 }

 .instagram {
     background: var(--instagram-color);
 }

 .youtube {
     background: var(--youtube-color);
 }

 .twitter {
     background: var(--twitter-color);
 }

 /* Map Section */
 .map-section {
     background: var(--light-bg);
     position: relative;
     overflow: hidden;
     padding: 4rem 0;
 }

 /* Contact Image Styles */
 .contact-image-container {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
 }

 .contact-image-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
     opacity: 0;
     transition: var(--transition);
     z-index: 1;
 }

 .contact-image-container:hover::before {
     opacity: 0.2;
 }

 .contact-image-container:hover {
     transform: translateY(-10px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
 }

 .contact-image {
     width: 100%;
     height: 450px;
     object-fit: cover;
     border-radius: 20px;
     transition: var(--transition);
 }

 .contact-image-container:hover .contact-image {
     transform: scale(1.05);
 }

 /* Map Container Styles */
 .map-container {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
 }

 .map-container:hover {
     transform: translateY(-10px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
 }

 .map-container iframe {
     display: block;
     width: 100%;
     height: 450px;
     border: none;
 }

 /* Responsive adjustments */
 @media (max-width: 991px) {
     .contact-image-wrapper {
         min-height: 400px;
         margin-bottom: 2rem;
     }

     .contact-form-wrapper {
         padding: 2rem;
     }

     .contact-image-container {
         margin-bottom: 2rem;
     }

     .contact-image {
         height: 350px;
     }

     .map-container iframe {
         height: 350px;
     }
 }

 @media (max-width: 768px) {
     .contact-image-wrapper {
         min-height: 300px;
     }

     .contact-form-wrapper {
         padding: 1.5rem;
     }

     .contact-image {
         height: 300px;
     }

     .map-container iframe {
         height: 300px;
     }
 }

 /* Toast Styles */
 .toast {
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .toast-body {
     padding: 15px;
 }

 /* Animation Classes */
 [data-aos] {
     pointer-events: none;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }

 [data-aos].aos-animate {
     pointer-events: auto;
 }

 [data-aos][data-aos][data-aos-duration="1200"] {
     transition-duration: 1200ms;
 }

 [data-aos^="fade"][data-aos^="fade"] {
     opacity: 0;
     transition-property: opacity, transform;
 }

 [data-aos^="fade"][data-aos^="fade"].aos-animate {
     opacity: 1;
     transform: translate3d(0, 0, 0);
 }

 [data-aos="fade-right"] {
     transform: translateX(-50px);
     opacity: 0;
     transition-property: transform, opacity;
 }

 [data-aos="fade-left"] {
     transform: translateX(50px);
     opacity: 0;
     transition-property: transform, opacity;
 }

 /* Smooth Scrolling */
 html {
     scroll-behavior: smooth;
 }

 /* Custom Scrollbar */
 ::-webkit-scrollbar {
     width: 12px;
 }

 ::-webkit-scrollbar-track {
     background: var(--light-bg);
 }

 ::-webkit-scrollbar-thumb {
     background: grey;
     border-radius: 6px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: darkgray;
 }

 /* Ripple effect */
 .form-control,
 .form-select {
     position: relative;
     overflow: hidden;
 }

 .ripple {
     position: absolute;
     border-radius: 50%;
     background: rgba(37, 99, 235, 0.2);
     transform: scale(0);
     animation: ripple 0.6s linear;
     pointer-events: none;
 }

 @keyframes ripple {
     to {
         transform: scale(4);
         opacity: 0;
     }
 }

 /* Shake animation */
 @keyframes shake {

     0%,
     100% {
         transform: translateX(0);
     }

     10%,
     30%,
     50%,
     70%,
     90% {
         transform: translateX(-5px);
     }

     20%,
     40%,
     60%,
     80% {
         transform: translateX(5px);
     }
 }

 .shake {
     animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }

 /* Loading button animation */
 .btn-submit.loading {
     background: var(--primary-color);
     opacity: 0.8;
     transform: scale(0.98);
 }

 /* Form focus states */
 .form-control:focus,
 .form-select:focus {
     animation: focusIn 0.3s ease forwards;
 }

 @keyframes focusIn {
     0% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-3px);
     }

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

 /* Toast animation */
 .toast.show {
     animation: slideIn 0.3s ease forwards;
 }

 @keyframes slideIn {
     from {
         transform: translateX(100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }
.dropdown:hover .dropdown-menu {
			display: block;
			animation: fadeInDown 0.5s ease-in-out;
		}
		@keyframes fadeInDown {
			from {
				opacity: 0;
				transform: translateY(-10px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
		.header-top {
			padding: 10px 0;
		}
		.nav-red {
			background-color: #f44336;
			color: white;
		}
		.nav-red a {
			color: white;
			text-decoration: none;
			padding: 0 10px;
			line-height: 40px;
		}
		.search-box input {
			border-radius: 0;
			border: none;
			padding: 6px 10px;
		}
		.search-box .btn {
			border-radius: 0;
			border: none;
		}
		a:hover {
			color: black !important;
			font-weight: bold;
		}
		button:hover {
			color: black !important;
			font-weight: bold;
		}
		.map-container iframe {
            opacity: 0;
            transition: opacity 0.5s ease;
        }