/* main */

body {
    font-family: 'Noto Sans Tirhuta', sans-serif;
    margin: 0;
    padding: 0;
	background: linear-gradient(-77deg, #20192B, #000000);
	background-size: 400% 400%;
	animation: gradient 77s ease infinite;
	height: 100vh;
    color: #f2f4f3;
    overflow-x: hidden;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


/* navbar */
nav {
    background-color: #0A0908;
    padding: 10px;
    text-align: center;
  }

  nav a {
    color: white;
    text-decoration: none;
    padding: 14px 16px;
    display: inline-block;
  }

/* media query for smaller screens */
@media only screen and (max-width: 600px) {
    main, .content-section0, .content-brands, .content-industries {
        margin: 10px;
        padding: 10px;
    }

    .more-button, .contact-button {
        width: 25%;
    }

    nav a {
        padding: 10px;
    }
}

header {
    font-family: 'Cairo', sans-serif;
    background-color: #000000;
    color: #f2f4f3;
    padding: 1em;
    text-align: center;
}

main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    background-color: #0A0908;
    box-shadow: 0 0 3px #F2F4F3
}

footer {
    font-family: 'Cairo', sans-serif;
    text-align: left;
    padding: 10px;
    position: sticky;
    top: 100%;
    width: 100%;
    background-color: #0A0908;
    color: #f2f4f3;
}
.logo-img {
    width: 30%;
}

/* info blocks */

/* nvr info splash */
.horizontal-content-block-nvr {
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('https://cdn.elusivesolutions.org/assets/img/cctv_nvr_camera_systems.jpg');
    overflow-x: hidden;
    background-size: cover;
    background-position: top;
    color: #f2f4f3;
    text-align: center;
    padding: 200px 0;
}

.horizontal-content-wrapper-nvr {
    max-width: 800px;
    margin: 0 auto;
}

.horizontal-content-block-nvr h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.horizontal-content-block-nvr p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* networking info splash */
.horizontal-content-block-networking {
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('https://cdn.elusivesolutions.org/assets/img/networking.jpg');
    overflow-x: hidden;
    background-size: cover;
    background-position: top;
    color: #f2f4f3;
    text-align: center;
    padding: 200px 0;
}

.horizontal-content-wrapper-networking {
    max-width: 800px;
    margin: 0 auto;
}

.horizontal-content-block-networking h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.horizontal-content-block-networking p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* tv info splash */
.horizontal-content-block-tv {
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('https://cdn.elusivesolutions.org/assets/img/television_mounting_services.jpg');
    overflow-x: hidden;
    background-size: cover;
    background-position: center;
    color: #f2f4f3;
    text-align: center;
    padding: 200px 0;
}

.horizontal-content-wrapper-tv {
    max-width: 800px;
    margin: 0 auto;
}

.horizontal-content-block-tv h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.horizontal-content-block-tv p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* audio info splash */
.horizontal-content-block-audio {
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('https://cdn.elusivesolutions.org/assets/img/audio_home_theater.jpg');
    overflow-x: hidden;
    background-size: cover;
    background-position: bottom;
    color: #f2f4f3;
    text-align: center;
    padding: 200px 0;
}

.horizontal-content-wrapper-audio {
    max-width: 800px;
    margin: 0 auto;
}

.horizontal-content-block-audio h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.horizontal-content-block-audio p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* home info splash */
.horizontal-content-block-home {
    background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('https://cdn.elusivesolutions.org/assets/img/home_automation_security.jpg');
    overflow-x: hidden;
    background-size: cover;
    background-position: top;
    color: #f2f4f3;
    text-align: center;
    padding: 200px 0;
}

.horizontal-content-wrapper-home {
    max-width: 800px;
    margin: 0 auto;
}

.horizontal-content-block-home h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.horizontal-content-block-home p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* industries we serve info splash */
.horizontal-content-block-industries {
    background-size: cover;
    background-position: center;
    overflow-x: hidden;
    color: #f2f4f3;
    text-align: center;
    padding: 100px 0;
}

.horizontal-content-wrapper-industries {
    max-width: 800px;
    margin: 0 auto;
}

.horizontal-content-block-industries h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.horizontal-content-block-industries p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* industries image grid */
.industries-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.industry-item {
    text-align: center;
    margin-bottom: 20px;
}

.industry-item img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    margin-bottom: 10px;
}

/* brands image grid */
.content-brands {
    border: 1px solid #0A0908;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    background-color: #0A0908;
}

.brands-grid {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
    align-items: center;
}

.brands-grid img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 27%;
    background-color: #f2f4f3;
    padding: 10px;
    border: 20px;
    box-sizing: border-box;
}

.brands-grid img:hover {
    background-color: #a7acaa;
}

/* buttons */
.more-button, .more-button-nvr, .contact-button-serve {
    background-color: #20192B;
    border-radius: 4px;
    border: none;
    color: #F2F4F3;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    padding-top: 17px;
}

.more-button-nvr {
    font-size: 16px;
}

.contact-button {
    background-color: #20192B;
    border-radius: 50px;
    border: none;
    color: #F2F4F3;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.contact-button:hover, .contact-button-serve:hover, .more-button-nvr:hover, .more-button:hover, nav a:hover {
    background-color: #49475B;
}