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

body h1,
h2,
h3,
h4,
ul,
li,
a,
p {
    list-style: none;
    text-decoration: none;
}

:root {
    /* Font Sizes */
    --bigHeadingSize: 2.0rem;
    --medHeadingSize: 1.2rem;
    --smallHeadingSize: 1.0rem;
    --extraSmallHeadingSize: 0.8rem;

    /* Font Families */
    --bigHeadingFont: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    --paragraphFont: Verdana, Geneva, Tahoma, sans-serif;
    --medHeadingFont: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    /* Font Colors  */
    --darkFontColor: rgb(54, 81, 109);
    --medFontColor: rgb(99, 97, 97);
    --smallFontColor: rgb(141, 136, 136);
    --neonFontColor: rgb(22, 51, 77);

    /* background Colors  */
    --darkBackground: rgb(22, 22, 60);
    --lightBackground: rgb(249, 249, 249);
}

h1,
h2 {
    font-size: var(--bigHeadingSize);
    font-family: var(--bigHeadingFont);
    color: var(--darkFontColor);
}

h3,
h4 {
    font-size: var(--smallHeadingSize);
    font-family: var(--paragraphFont);
    color: var(--medFontColor);
}

p {
    font-size: var(--extraSmallHeadingSize);
    font-family: var(--paragraphFont);
    color: var(--smallFontColor);
    text-align: justify;
}

.icons {
    height: 2rem;    
}

.navbar {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: white;
    justify-content: space-evenly;
}

.navBrand {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navBrand img {
    max-height: 4rem;
    object-fit: cover;
    margin-right: 1rem;
}

.navBrand h4 {
    color: var(--medFontColor);
    font-family: var(--bigHeadingFont);
    font-size: 1.5rem;
}

.navList {
    display: flex;
}

.navList ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navList ul li {
    margin: 0 0.5rem;
    font-family: var(--bigHeadingFont);
}

.navList ul li a {
    text-decoration: none;
    background-color: white;
    color: rgb(28, 138, 219);
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    border: 3px solid rgb(219, 219, 219);
    transition: 0.3s all ease-in-out;
    font-size: var(--extraSmallHeadingSize);
}

.navList ul li a:hover,
.navList ul li a.active {
    color: white;
    background-color: rgb(28, 138, 219);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
}


.heroSection {
    width: 100%;
    margin: 0 auto;
    padding: 3rem 2rem;
    background-color: var(--lightBackground);
}

.heroCover img {
    max-height: 450px;
    width: 100%;
    object-fit: cover;
    object-position: 10% 20%;
    /* filter: blur(2px); */
}

.heroSectionCol {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    /* margin: 5rem 0; */
    background-color: white;
    border-radius: 2rem;
    padding: 3rem;
}

.heroSectionRow {
    flex: 1;
    padding: 2rem;
    margin: 0 1rem;
}

.heroRowSlider>img {
    width: 100%;
    object-fit: cover;
}

.heroSectionRow img {
    max-height: 350px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    box-shadow: 1rem 2rem 1px rgb(221, 221, 221);
}

.heroSectionRow h2 {
    margin: 0.8rem 0;
    border-left: 1rem solid red;
}

.heroSectionRow ul li img {
    height: 2.0rem;
    margin: 0 1rem;
    box-shadow: none;
}

.heroSectionRow ul li {
    display: flex;
    height: 3rem;
    /* background-color: red; */
    align-items: center;
    font-family: var(--paragraphFont);
    color: var(--medFontColor);
}

.heroSection p {
    margin: 1rem 0;
}

.homeServices { 
    width: 80%;
    /* background-color: var(--lightBackground); */
    margin: 5rem auto;
    /* border-radius: 2rem; */
    padding: 3rem 2rem;    
}

.homeServices h2 {
    border-left: 1rem solid red;
    margin: 2rem 0;
}

.homeSerCol {
    padding: 5rem 2rem;
    display: flex;
    align-items: flex-start;
    background-color: var(--lightBackground);
    height: 100%;
    border-radius: 2rem;
}

.homeSerRow {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 0 2rem;
}

.homeSerRow img {
    height: 1.8rem;
    transform: rotate(180deg);
    margin: 0 1rem;
}

.homeSerRow li {
    padding: 1rem;
}

.homeSerRow ul li {
    margin: 1rem 0;
}

.homeSerRow ul li a {
    font-size: var(--medHeadingSize);
    font-family: var(--bigHeadingFont);
    color: var(--medFontColor);
    /* border-left: 1rem solid rgb(214, 209, 209); */
    /* height: 2rem; */
    display: flex;
    align-items: center;
}

.homeSerRow ul li p {
    margin: 0.5rem 1rem;
}

.homeSerRow span {
    color: rgb(61, 60, 60);
    font-weight: 700;
}

.solidBlueBar {
    width: 80%;
    height: 300px;
    margin: 2rem auto;
    /* background-color: var(--neonFontColor); */
    background: url('../img/bg/9.BG.jpg');    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 30% 50%;
}

.clientSection {
    width: 100%;
    padding: 5rem;
    margin: 0 auto;
    background-color: var(--lightBackground);
}

.clientSection h1 {
    border-left: 1rem solid red;
    width: 80%;
    margin: 0 auto;
}

.clientCol {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: white;
    padding: 3rem;
}

.clientRow {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    padding: 1rem;
    /* background-color: red; */
}

.clientRow img {
    max-height: 60px;
    margin: 1rem;
    object-fit: cover;
    cursor: pointer;
}

.clientSection p {
    font-size: var(--medHeadingFont);
    margin: 1rem 0;
    line-height: 1.5;
    font-family: var(--paragraphFont);
    color: var(--medFontColor);
    padding: 1rem;
}

footer {
    /* width: 80%; */
    padding: 2rem;
    background-color: var(--neonFontColor);
    /* background-color: var(--lightBackground); */
    margin: 2rem auto;
}

.footerCol {
    display: flex;
    justify-content: center;
    margin: 2rem;
    align-items: center;
}

.footerRow {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin: 1rem;
    /* background-color: yellow; */
}

.footerRow h4 {
    color: white;
    border-left: 1rem solid red ;
}

.footerRow p {
    font-size: 0.8rem;
    color: rgb(216, 213, 213);
    line-height: 2.0;
}

.footerRow span>p {
    font-weight: 400;
    text-align: left;
    font-size: 1rem;
    color: rgb(236, 236, 236);
    border-left:none
}

.footerRow img {
    height: 3rem;
}