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


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

body {  font-family: "Montserrat", sans-serif; font-weight: 400; }




.card { margin: 0px auto 60px; display: flex; align-items: center; gap: 30px; padding-bottom: 30px; }
.card h3 { font-size: 22px; font-weight: 700; }
/*
.drop_box { margin: 10px 0; padding: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 2px dotted #a3a3a3; border-radius: 5px; }
.drop_box h4 { font-size: 16px; font-weight: 600; color: #2e2e2e; margin: 0; }
.drop_box p { margin-top: 10px; margin-bottom: 20px; font-size: 12px; color: #a3a3a3; }*/
.btn { font-size: 14px; text-decoration: none; background-color: #000; color: #ffffff; padding: 10px 20px; border: none; outline: none; transition: 0.3s; border-radius: 4px; cursor: pointer; font-family: "Montserrat", sans-serif; }
.btn:hover { text-decoration: none; background-color: #ffffff; color: #000; outline: 1px solid #010101; }
/*.form input { margin: 10px 0; width: 100%; background-color: #e2e2e2; border: none; outline: none; padding: 12px 20px; border-radius: 4px; }*/






img { width: 100%; height: auto; }

.wrapper { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 15px; }

header { border-bottom: 1px solid #eee; margin-bottom: 40px; }
.header { padding: 15px 0; text-align: right; display: flex; justify-content: space-between; align-items: center;}
.header h1 { font-size: 24px; margin: 0; }

.header .logo img { max-width: 180px; }

footer { border-top: 1px solid #eee; margin-top: 40px; }
.footer { text-align: center; font-size: 14px; padding: 20px 0; }
.footer p { margin-bottom: 0; }


.mainSection { min-height: 720px; align-items: center; display: flex; flex-wrap: wrap;}

.mainBox { display: flex; justify-content: center; gap: 50px; }
.mainBox p { padding: 10px 0 0; margin: 0; font-size: 14px;  }

.Left-Section { width: 50%; text-align: center; }
.Right-Section {  width: 50%; text-align: center;}

.left-img img, .right-img img { height: 300px; width: auto;}
.imgbox { width: 100%; margin: auto;     margin: auto; display: inline-block; text-align: center; }
.mainBox h4 { font-size: 22px; margin-bottom: 20px; }
.mainBox .btn { margin-top: 20px; display: inline-block; }


#lightbox { background: rgba(0,0,0,0.8); position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; color: #fff; padding: 40px; }

.close, .prev { position: absolute; cursor: pointer; }
.close { right: 10px; top: 10px; font-size: 30px; }
/*
.prev { left: 10px; }
.next { right: 10px; }*/

#lightbox img { width: auto; height: 100%; margin: auto;  }

.lightbox_popupimg { height: 100%; width: 70%; margin: auto; display: flex; align-items: center; justify-content: center; }


div#Categories ul { margin: 20px 0px; padding: 0; }
div#Categories ul li { padding: 0 10px; margin: 10px -4px 0 0; width: 50%; display: inline-block; }
div#Categories h4 { font-size: 20px; }

#Categories { background-color: rgba(0, 0, 0, 0.8); width: 100%;  top: 0; position: fixed; display: none;  left: 0;   height: 100%; border-radius: 2px }
#Categories .close  { color: #fff; }	
.Categorie_list { max-width: 800px; background: #fff; padding: 40px 40px 20px; margin: auto; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); }

/* Modal styling */
.captureVideo { width: 100%; max-width: 500px; border: 1px solid #ccc; }
.captureCanvas { display: none; }
.captureImg { width: 100%; max-width: 500px; margin-top: 10px;}
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; border-radius: 10px; }

.modal-content { background-color: #fff; margin: 10% auto; padding: 5%; border: 1px solid #888; width: 90%; max-width: 600px; text-align: center; border-radius: 10px;}

#openModal { background-color: #000000; color: #fff; letter-spacing: 1px; }

#close:hover, #close:focus { color: black; text-decoration: none; cursor: pointer;}

.imgloading .loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #000;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 

	.imgloading .loader {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(50%, -50%);
	}
	
	.imgloading .mainloader {
		width: 100%;
		background: rgba(0, 0, 0, 0.8);
		height: 100vh;
		display: block;
		position: absolute;
	}
	
	body.imgloading {
		height: 100vh;
		overflow: hidden;
	}

@media only screen and (max-width: 1000px) { 
	.Left-Section { width:100%; }
.Right-Section {  width: 100%; }
.mainBox  { flex-wrap: wrap; }
.left-img img, .right-img img { height: 450px; }


}