/* Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
	background-image:url("https://wallpaper.dog/large/5459277.jpg");
	background-position:center center;
	background-size:cover;
	background-attachment:fixed;
}

/* Change Color on slecting text */
::selection {
	background:#ff0000;
	color:#ffffff;
}

/* Custom Scroll Bar*/
::-webkit-scrollbar {
    width: 0;
}
 
/* BG of scroll bar */
::-webkit-scrollbar-track {
    -webkit-border-radius: none;
    border-radius: none;
}
 
/* Handle of sroll bar */
::-webkit-scrollbar-thumb {
	height:70px;
	background:orangered;
	border-radius:20px;
}


/*CSS Styling for screens 3840px */
@media screen and (max-width:3840px) {

    hr {
    	width:60px;
    	height:5px;
    	background:#ffffff;
    	border:none;
    	margin:20px auto;
    }
    
    h1 {
    	font-size:2vw;
    	font-family:poppins;
    	font-weight:800;
    	color:#fff;
    	line-height:1em;
    	width:100%;
    	text-align:center;
    	margin:0 0 15px auto;
    	margin-right:auto;
    	margin-left:auto;
    }
    
    h2 {
    	font-family:Manrope;
    	font-size:12px;
    	margin:0px auto;
    	text-align:center;
    	color:#ffffff;
    }
    	
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value for transparency */
        z-index: -1; /* Place the overlay above other content */
    }
    
    div.center {
    	text-align:center;
    }
    
    span.colored {
    	color:#ff4500;	
    }
    	
    .card-img {
        background-color: rgba(255, 255, 255, 0.06);
        -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px);
        text-align:center;
    	padding:10px;
    	height:110px;
    	width:110px;
    	margin:0 auto 25px auto;
    	border: 1px solid rgba(255, 255, 255, .4);
    	border-radius:50%;
    }
    
    .card-img img {
        width: 100%;
    	transform:scale(0.11);
    }
    	
    /* Image Rotation Properties */
      .card-img img {
        animation: rotateImg 5s linear infinite;
      }
      @keyframes rotateImg{
        from {
         transform: rotate(0deg);
        }
       to {
        transform: rotate(359deg);
       }
    }
    
    form.contact-us {
    		margin:120px auto auto auto;
          	width:50%;
          	padding:5%;
          	border-radius: 8px;
          	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    		background-color: rgba(255, 255, 255, 0.04);
        -webkit-backdrop-filter: blur(30px);
                backdrop-filter: blur(30px);
        -webkit-box-shadow: 20px 20px 22px rgba(0,0,0,0.2); 
    		box-shadow: 20px 20px 22px rgba(0,0,0,0.2);
    		border:1px solid #ffffff30;
    }
    
    label {
    	font-family:Manrope;
    	font-size:14px;
    	font-weight:700;
    	color:#ffffff;
    	margin:30px 0 5px 0;
    }
    
    input[type=text].contact-us, input[type=email].contact-us, select  {
    		background-color: #cccccc05;
    		-webkit-backdrop-filter: blur(20px);
    		backdrop-filter: blur(20px);
    		border:1.2px solid #ffffff40;
    		width: 100%;
    		font-size:14px;
    		left: 10%;
    		top: 240px;
    		border-radius: 4px;
    		outline: none;
    		color: #ffffff;
    		font-family: manrope;
    		margin:0 0 0 0;
    		padding: 20px 20px;
    		font-weight: 400;
    		appearance: none;
    		transition:0.2s linear;
    }
    
    input[type=text].contact-us:focus, input[type=email].contact-us:focus {
    	border:1.2px solid #ea334a;
    }
    
    ::placeholder {
    	font-weight:none;
    	font-family:Manrope;
    	font-size:13px;
    	color:#ffffff50;
    }
    	
    div.description {
    	font-weight:none;
    	font-family:Manrope;
    	font-size:12px;
    	color:#dfd8d8;	
    	margin:5px 0 -30px 0;
    }
    	
    /* Styling the select box */
    select {
    	background-color: rgba(255, 255, 255, .09);
    	-webkit-backdrop-filter: blur(20px);
    	backdrop-filter: blur(20px);
    	border:1px solid #ffffff60;
    	display:block;
    	font-size:13px;
    	width:100%;
    	border-radius: 3px;
    	outline: none;
    	color: #fff;
    	font-family: manrope;
    	margin:0 auto;
    	padding: 20px 20px;
    	font-weight: 400;
    	appearance: none;
    	transition:0.2s linear;
        appearance: none;
        appearance: none; /* Remove the default arrow */
        -webkit-appearance: none; /* For Safari */
    }
    	
    option {
    	background:#232323;
    	color:#ffffff;
    	font-size:13px;
    }
    
    /* Optional: Style the disabled option */
    option[disabled] {
        color: #888;
        font-style: italic;
    }
    
    textarea {
    		height:200px;
    		background-color: #cccccc05;
    		-webkit-backdrop-filter: blur(20px);
    		backdrop-filter: blur(20px);
    		border:1.2px solid #ffffff40;	
    		width: 100%;
    		/* position: absolute; */
    		left: 10%;
    		border-radius: 4px;
    		outline: none;
    		color: #ffffff;
    		font-family: manrope;
    		margin:0 0 0 0;
    		padding: 15px 20px;
    		font-weight: 500;
    		appearance: none;
    		transition:0.2s linear;
    }
    		
    textarea:focus {
    	border:1.5px solid #ea334a;	
    }
    
    button.send_message {
    	width:100%;
    	font-weight:800;
    	font-size:15px;
    	font-family:manrope;
    	background:#ff002d;
    	text-transform:uppercase;
    	letter-spacing:10px;
    	color:#ffffff;
    	border:1px solid #ff002d;
    	display:block;
    	margin:5% 0 0 0;
    	outline:none;
    	padding:20px;
    	border-radius:4px;
    	transition:0.2s linear;
    }
    
    button.send_message:hover {
    	background:#f3f3f3;
    	color:#232323;
    	border:1px solid #f3f3f3;
    	letter-spacing:7px;
    }
}

/*CSS Styling for screens 1920px */
@media screen and (max-width:1920px) {

    hr {
    	width:60px;
    	height:5px;
    	background:#ffffff;
    	border:none;
    	margin:20px auto;
    }
    
    h1 {
    	font-size:3.8vw;
    	font-family:poppins;
    	font-weight:800;
    	color:#fff;
    	line-height:1em;
    	width:100%;
    	text-align:center;
    	margin:0 0 15px auto;
    	margin-right:auto;
    	margin-left:auto;
    }
    
    h2 {
    	font-family:Manrope;
    	font-size:12px;
    	margin:0px auto;
    	text-align:center;
    	color:#ffffff;
    }
    	
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value for transparency */
        z-index: -1; /* Place the overlay above other content */
    }
    
    div.center {
    	text-align:center;
    }
    
    span.colored {
    	color:#ff4500;	
    }
    	
    .card-img {
        background-color: rgba(255, 255, 255, 0.06);
        -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px);
        text-align:center;
    	padding:10px;
    	height:110px;
    	width:110px;
    	margin:100px auto 25px auto;
    	border: 1px solid rgba(255, 255, 255, .4);
    	border-radius:50%;
    }
    
    .card-img img {
        width: 100%;
    	transform:scale(0.11);
    }
    	
    /* Image Rotation Properties */
      .card-img img {
        animation: rotateImg 5s linear infinite;
      }
      @keyframes rotateImg{
        from {
         transform: rotate(0deg);
        }
       to {
        transform: rotate(359deg);
       }
    }
    
    form.contact-us {
    		margin:0px auto auto auto;
          	width:70%;
          	padding:50px 10% 150px 10%;
          	border-radius: 8px;
          	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    		background-color: rgba(255, 255, 255, 0.04);
        -webkit-backdrop-filter: blur(30px);
                backdrop-filter: blur(30px);
        -webkit-box-shadow: 20px 20px 22px rgba(0,0,0,0.2); 
    		box-shadow: 20px 20px 22px rgba(0,0,0,0.2);
    		border:1px solid #ffffff30;
    }
    
    label {
    	font-family:Manrope;
    	font-size:14px;
    	font-weight:700;
    	color:#ffffff;
    	margin:30px 0 5px 0;
    }
    
    input[type=text].contact-us, input[type=email].contact-us, select  {
    		background-color: #cccccc05;
    		-webkit-backdrop-filter: blur(20px);
    		backdrop-filter: blur(20px);
    		border:1.2px solid #ffffff40;
    		width: 100%;
    		font-size:14px;
    		left: 10%;
    		top: 240px;
    		border-radius: 4px;
    		outline: none;
    		color: #ffffff;
    		font-family: manrope;
    		margin:0 0 0 0;
    		padding: 15px 20px;
    		font-weight: 400;
    		appearance: none;
    		transition:0.2s linear;
    }
    
    input[type=text].contact-us:focus, input[type=email].contact-us:focus {
    	border:1.2px solid #ea334a;
    }
    
    ::placeholder {
    	font-weight:none;
    	font-family:Manrope;
    	font-size:13px;
    }
    	
    div.description {
    	font-weight:none;
    	font-family:Manrope;
    	font-size:12px;
    	color:#dfd8d8;	
    	margin:5px 0 -30px 0;
    }
    	
    /* Styling the select box */
    select {
    	background-color: rgba(255, 255, 255, .09);
    	-webkit-backdrop-filter: blur(20px);
    	backdrop-filter: blur(20px);
    	border:1px solid #ffffff60;
    	display:block;
    	font-size:13px;
    	width:100%;
    	border-radius: 3px;
    	outline: none;
    	color: #fff;
    	font-family: manrope;
    	margin:0 auto;
    	padding: 15px 20px;
    	font-weight: 400;
    	appearance: none;
    	transition:0.2s linear;
        appearance: none;
        appearance: none; /* Remove the default arrow */
        -webkit-appearance: none; /* For Safari */
    }
    	
    option {
    	background:#232323;
    	color:#ffffff;
    	font-size:13px;
    }
    
    /* Optional: Style the disabled option */
    option[disabled] {
        color: #888;
        font-style: italic;
    }
    
    textarea {
    		height:200px;
    		background-color: #cccccc05;
    		-webkit-backdrop-filter: blur(20px);
    		backdrop-filter: blur(20px);
    		border:1.2px solid #ffffff40;	
    		width: 100%;
    		/* position: absolute; */
    		left: 10%;
    		border-radius: 4px;
    		outline: none;
    		color: #ffffff;
    		font-family: manrope;
    		margin:0 0 0 0;
    		padding: 15px 20px;
    		font-weight: 500;
    		appearance: none;
    		transition:0.2s linear;
    }
    		
    textarea:focus {
    	border:1.5px solid #ea334a;	
    }
    
    button.send_message {
    	width:100%;
    	font-weight:800;
    	font-size:15px;
    	font-family:manrope;
    	background:#ff002d;
    	text-transform:uppercase;
    	letter-spacing:10px;
    	color:#ffffff;
    	border:1px solid #ff002d;
    	display:block;
    	margin:5% 0 0 0;
    	outline:none;
    	padding:20px;
    	border-radius:4px;
    	transition:0.2s linear;
    }
    
    button.send_message:hover {
    	background:#f3f3f3;
    	color:#232323;
    	border:1px solid #f3f3f3;
    	letter-spacing:7px;
    }
}
	
@media screen and (max-width:1200px) {
	
	form.contact-us {
		width:100%;
		padding:50px 15% 20% 15%;
	}
	
	h1 {
		margin:10px 0 20px auto;
		width:100%;
		font-size:45px;
		padding:10px 0;
	}
	
	h2 {
		font-size:12px;
	}
	
	hr {
		width:120px;
		margin:30px auto;
	}

	button.send_message {
		font-size:14px;
		letter-spacing:3px;
	}
}


@media screen and (max-width:768px) {
	
	h1 {
		margin:100px 0 15px auto;
		margin-left:auto;
		margin-right:auto;
		font-size:5vw;
		padding:10px 0;
	}
	
	h2 {
		font-size:13px;
		padding:15px;
		margin:0;
	}	
	
	p {
		font-size:17px;
	}
	
	form.contact-us {
		padding:10px 20px;
		margin:0 auto;
		background:none;
		width:95%;
	}
	
	label {
		font-size:19px;
	}
	
	input.contact-us {
		padding:12px 10px;
		font-size:18px;
		margin:0 0 4% 0;
	}
	
	::placeholder {
		font-size:13px;
	}
	
	option {
		font-size:18px;
	}
	
	textarea {
		height:30%;
		font-size:18px;
	}	
	
	input[type=text].contact-us {
		font-size:15px;
	}
	
	button.send_message {
		font-size:13px;
		padding:20px;
		letter-spacing:5px;
	}
}


@media screen and (max-width:500px) {
	
	form.contact-us {
		width:100%;
		padding:5% 8% 20% 8%;
		
	}
	
	.card-img {
		padding:10px;
		height:90px;
		width:90px;
		margin:100px auto 25px auto;
	}
	
	h1 {
		font-size:8vw;
		width:100%;
		margin:20px auto 0 auto;
	}
	
	h2 {
		padding:10px 10px;	
	}
	
	hr {
		width:40px;
	}
	
	::placeholder {
		padding:0;
	}
	
	div.description {
		font-size:10px;
		margin:-15px 0 0 auto;
	}
	
	label {
		font-size:13px;
		margin:5px 0;
		font-weight:700;
	}
	
	input[type=text].contact-us, input[type=email].contact-us {
		margin:0 0 20px 0;
		padding:15px 13px;
	}
	
	select {
		font-size:12px;
		padding:15px 13px;
		margin:0 auto 20px auto;
	}
	
	option {
		font-size:13px;		
	}
	
	textarea {
		font-size:13px;
		height:150px;
		padding:15px 10px;
	}
	
	input[type=submit] {
		margin:15px auto;
		font-size:12px;
	}
	
	
	
}