/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.modal-side-panel {
	    width: 75%;
	    margin-left: auto;
	}

	.carousel-item-inner .fa-solid {
	    font-size: 3rem;
	}

	.carousel-item-inner {
	    height: 500px;
	    padding: 0 3rem;
	}

	.carousel-item-inner p {
	    font-size: 1.4rem;
	}

	.header-logo {
	    padding: 6rem 3rem;
	}

	.header-info div {
	    padding: 3rem;
	}

	.header-info h3 {
	    margin-bottom: 0px;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	.header-logo {
	    padding: 10rem 3rem;
	}

	

	.navbar-expand-lg .navbar-nav .nav-link, .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .sticky-lg-top {
	    top: 70px;
	}

	.modal-side-panel {
	    width: 75%;
	    margin-left: auto;
	}

	.carousel-item-inner .fa-solid {
	    font-size: 3rem;
	}

	.carousel-item-inner {
	    height: 500px;
	    padding: 0 3rem;
	}

	.carousel-item-inner p {
	    font-size: 1.6rem;
	    line-height: 2rem;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	.header-info h1 {
	    font-size: 3rem;
	    line-height: 1.2;
	}

	.header-info h2 {
	    font-size: 2rem;
	    line-height: 1.2;
	}

	.header-info h3 {
	    font-size: 1.8rem;
	    font-weight: 300;
	    line-height: 1.2;
	    margin-bottom: 0px;
	}

	.carousel-item-inner .fa-solid {
	    font-size: 3rem;
	}

	.carousel-item-inner {
	    height: 500px;
	    padding: 0 6rem;
	}

	.carousel-item-inner p {
	    font-size: 2rem;
	    line-height: 2.5rem;
	}
}

@media (min-width: 1400px) {
	.modal-side-panel {
	    width: 50%;
	    margin-left: auto;
	}
}

@media (min-width: 1600px) {
	.header-info div {
	    padding: 3rem 3rem 3rem 6rem;
	}
}

@media screen and (max-height: 400px) {
	header.full-height-section, section.full-height-section {
		min-height: 100%;
		height: auto;
		padding-top: 100px;
		padding-bottom: 100px;
	}
}