@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

    * {
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    }

    body {
    	font-family: "Montserrat", sans-serif !important;

    	background-color: #f8f9fa;
    	color: #333;
    	line-height: 1.6;
    	padding: 20px;
    	min-height: 100vh;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    }

    .form-container {
    	background: white;
    	padding: 40px;
    	border-radius: 8px;
    	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    	width: 100%;
    	max-width: 600px;
    	border: 1px solid #e0e0e0;
    }

    .form-title {
    	text-align: center;
    	margin-bottom: 30px;
    	color: #222;
    	font-size: 24px;
    	font-weight: 400;
    }

    .form-group {
    	margin-bottom: 20px;
    }

    label {
    	display: block;
    	margin-bottom: 8px;
    	font-weight: 500;
    	color: #333;
    	font-size: 14px;
    }

    input[type="text"],
    input[type="tel"],
    input[type="number"],
    select {
    	width: 100%;
    	padding: 12px 16px;
    	border: 2px solid #ddd;
    	border-radius: 6px;
    	font-size: 16px;
    	transition: border-color 0.3s ease;
    	background-color: white;
    	color: #333;
    }

    input[type="text"]:focus,
    input[type="tel"]:focus,
    input[type="number"]:focus,
    select:focus {
    	outline: none;
    	border-color: #333;
    }

    /* Custom styling for country select with flags (only for phone abroad) */
    .country-select-container {
    	position: relative;
    }

    .country-flag {
    	position: absolute;
    	left: 16px;
    	top: 50%;
    	transform: translateY(-50%);
    	font-size: 20px;
    	line-height: 1;
    	pointer-events: none;
    	z-index: 1;
    }

    /* Style for intl-tel-input */
    .iti {
    	width: 100%;
    }

    .iti__country-list {
    	border: 2px solid #ddd;
    	border-radius: 6px;
    	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .iti__country:hover {
    	background-color: #f8f9fa;
    }

    .iti__country--selected {
    	background-color: #333;
    	color: white;
    }

    .iti__selected-flag {
    	padding: 12px 16px;
    	border-radius: 6px 0 0 6px;
    }

    .iti__flag-box {
    	margin-right: 8px;
    }

    .submit-btn {
    	background-color: #222;
    	color: white;
    	padding: 11px 32px;
    	border: none;
    	border-radius: 6px;
    	font-size: 15px;
    	font-weight: 600;
    	cursor: pointer;
    	width: 100%;
    	transition: background-color 0.3s ease;
    	margin-top: 20px;
    }

    .submit-btn:hover {
    	background-color: #444;
    }

    .submit-btn:active {
    	transform: translateY(1px);
    }

    .required {
    	color: #666;
    	font-size: 12px;
    	font-style: italic;
    }

    .alert {
    	padding: 12px;
    	margin-top: 15px;
    	border-radius: 6px;
    	border: 1px solid;
    }

    .alert-success {
    	background-color: #d4edda;
    	border-color: #c3e6cb;
    	color: #155724;
    }

    .alert-danger {
    	background-color: #f8d7da;
    	border-color: #f5c6cb;
    	color: #721c24;
    }

    .alert-warning {
    	background-color: #fff3cd;
    	border-color: #ffeaa7;
    	color: #856404;
    }

    /* Success Popup Modal */
    .popup-overlay {
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	background-color: rgba(0, 0, 0, 0.6);
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	z-index: 1000;
    	opacity: 0;
    	visibility: hidden;
    	transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .popup-overlay.active {
    	opacity: 1;
    	visibility: visible;
    }

    .popup-modal {
    	background: white;
    	padding: 40px;
    	border-radius: 12px;
    	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    	text-align: center;
    	max-width: 400px;
    	width: 90%;
    	transform: scale(0.8) translateY(-20px);
    	transition: transform 0.3s ease;
    }

    .popup-overlay.active .popup-modal {
    	transform: scale(1) translateY(0);
    }

    .popup-icon {
    	width: 80px;
    	height: 80px;
    	margin: 0 auto 20px;
    	/* background: linear-gradient(45deg, #22c55e, #16a34a); */
    	border-radius: 50%;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	position: relative;
    	animation: successPulse 0.6s ease-out;
    	box-shadow: 0 8px 25px rgba(34, 197, 94, 0.3);
    }

    .popup-icon::before {
    	content: "";
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	border-radius: 50%;
    	/* background: linear-gradient(45deg, #22c55e, #16a34a); */
    	animation: successRipple 0.8s ease-out;
    	z-index: -1;
    }

    .logo-mainn {
    	width: 120px;
    	margin: auto;
    	display: table;
    }

    .checkmark {
    	width: 35px;
    	height: 35px;
    	stroke: white;
    	stroke-width: 3;
    	stroke-linecap: round;
    	stroke-linejoin: round;
    	fill: none;
    	animation: checkmarkDraw 0.8s ease-out 0.2s both;
    }

    .success-iconn {
    	width: 100%;
    }

    @keyframes successPulse {
    	0% {
    		transform: scale(0.8);
    		opacity: 0.5;
    	}

    	50% {
    		transform: scale(1.1);
    	}

    	100% {
    		transform: scale(1);
    		opacity: 1;
    	}
    }

    @keyframes successRipple {
    	0% {
    		transform: scale(1);
    		opacity: 0.6;
    	}

    	100% {
    		transform: scale(1.4);
    		opacity: 0;
    	}
    }

    @keyframes checkmarkDraw {
    	0% {
    		stroke-dasharray: 0 50;
    		stroke-dashoffset: 0;
    	}

    	100% {
    		stroke-dasharray: 50 0;
    		stroke-dashoffset: 0;
    	}
    }

    .popup-title {
    	font-size: 24px;
    	font-weight: 600;
    	color: #222;
    	margin-bottom: 10px;
    }

    .popup-message {
    	font-size: 16px;
    	color: #666;
    	margin-bottom: 30px;
    	line-height: 1.5;
    }

    .popup-close-btn {
    	background-color: #222;
    	color: white;
    	padding: 12px 24px;
    	border: none;
    	border-radius: 6px;
    	font-size: 16px;
    	font-weight: 600;
    	cursor: pointer;
    	transition: background-color 0.3s ease;
    	min-width: 120px;
    }

    .popup-close-btn:hover {
    	background-color: #444;
    }

    @media (max-width: 768px) {
    	.form-container {
    		padding: 30px 20px;
    		margin: 10px;
    	}

    	.form-title {
    		font-size: 20px;
    	}

    	input[type="text"],
    	input[type="tel"],
    	input[type="number"],
    	select {
    		padding: 10px 14px;
    		font-size: 16px;
    	}

    	.logo-mainn {
    		padding-bottom: 10px;
    	}
    }

    @media (max-width: 480px) {
    	.form-container {
    		padding: 20px 15px;
    	}



    	.form-group {
    		margin-bottom: 15px;
    	}

    	body {
    		padding: 5px;
    	}

    	.form-title {
    		font-size: 19px;
    		margin-bottom: 35px;
    		font-weight: 400;
    	}

    }