/*
 * HMI Technologies Mumbai
 ** CSS **
 *
 * This is the default CSS file. inner
 *
 * You should delete these sample styes and put in your own.

body, html {
	margin: 0;
    font-family: sans-serif;
    line-height: 2;
    background: #444;
}

header, footer {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 10px;
}

header a, footer a {
    color: red;
}

nav a {
    background: #666;
    padding: 5px 30px;
    color: #fff;
    text-decoration: none;
    margin: 5px 10px;
    border-radius: 10px;
}

table {
	background:#fff;
    min-height: 300px;
    width: 100%;
}

table td {
    padding: 10px;
}

table td.asidebar {
	background:#eee;
	width: 20%;
}
*/

/* Colours */
.bg-primary-color-1 { background-color: #0a1a4b; }
.bg-primary-color-2 { background-color: #e3d3c3; }
.bg-color-1 { background-color: #829BD133;}
.text-primary-color-1 { color: #0a1a4b; }
.text-primary-color-2 { color: #e3d3c3; }
.border-primary-1 { border: 2px solid #0A1A4B; }
.border-primary-2 { border: 2px solid #e3d3c3; }
.border-bottom-primary-1 { border-bottom: 2px solid #0A1A4B; }
.border-bottom-primary-2 { border-bottom: 2px solid #e3d3c3; }
.border-top-primary-1 { border-top: 2px solid #0A1A4B; }
.border-top-primary-2 { border-top: 2px solid #e3d3c3; }

/* Hero section */
.hero {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44)), url('/site-assets/images/hero-large.png') no-repeat center center/cover;
    height: 90vh;
    color: #fff;
}

.content {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
}

.carousal-image-1 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44)), url('/site-assets/images/carousal-image-1.webp') no-repeat center center/cover;
    height: 22rem;
}

.carousal-image-2 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44)), url('/site-assets/images/carousal-image-2.webp') no-repeat center center/cover;
    height: 22rem;
}
.carousal-image-3 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44)), url('/site-assets/images/carousal-image-3.webp') no-repeat center center/cover;
    height: 22rem;
}

.responsive-image {
    width: auto;
    height: auto;
}

/* Hide why choose us reason's scrollbar */
.overflow-scrollbar-hide::-webkit-scrollbar { display: none; }

.overflow-scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

@media (max-width: 768px) {
    .responsive-image {
        width: 100%;
        height: auto;
    }

    .target-audience-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
	
}

@media (max-width: 1363px) {
	.flex-column-ipad-pro { flex-direction: column !important; }
	
	.overflow-scrollbar-hide::-webkit-scrollbar { display: none; }

	.overflow-scrollbar-hide {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
}

@media (min-width: 769px) {
    .target-audience-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
	
}

.circle {
    height: 25px;
    width: 25px;
    background-color: #0A1A4B;
    border-radius: 50%;
    display: inline-block;
}

.choose-reasons:hover {
    background-color: #0A1A4B;
    color:#e3d3c3;
    cursor: pointer;
}

.choose-reasons:active {
    background-color: #0A1A4B;
    color:#e3d3c3;
    cursor: pointer;
}

.hide { display: none; }