:root {
    --iif-primary-color: #10487c;
    --iif-secondary-color: #fab412;
    --iif-footer-color: rgb(0, 33, 67);
    --iif-black: #000;
    --iif-white: #fff;

    --iif-header-font: 'Oswald';
    --iif-text-font: 'Roboto';
}

p {
    font-family: var(--iif-text-font), sans-serif;
}

h1, h2, h4 {
    font-family: var(--iif-header-font), sans-serif;
}

/* Topbar */
/* ------ */
#top-header {
    /* padding: 0.5rem 3rem; */
    padding: 0.25rem 3rem;    
    background: var(--iif-white);
}

@media screen and (max-width: 575.9px) {
    #top-header {
        /* padding: 1rem; */
        padding: 0.25rem;
    }
    .footer {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
}

@media screen and (max-width: 767.9px) {
    #header-without-logo {
        margin: auto;
    }
}

.bi {
    font-size: 2.5rem; 
    font-size: 2.0rem;     
    color: var(--iif-secondary-color);
}

#top-header p {
    color: var(--iif-primary-color);
}

#top-header h2,  #top-header h4{
    color: var(--iif-black);
    font-weight: 700;
}

#top-header h4{
    font-size: 1.0rem;
}

/* Main Menu */
/* --------- */
#main-nav {
    background: var(--iif-primary-color);   
    font-family: var(--iif-header-font), sans-serif;
    color: var(--iif-white);
    font-size: 1.3rem;
}

a.nav-link:hover {
    color: var(--iif-secondary-color);
}

.nav-link-active {
    background-color: var(--iif-primary-color);
    color: var(--iif-white)!important;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.95rem;
}

.offcanvas.show:not(.hiding), .offcanvas.showing {
    background: linear-gradient(180deg, rgba(0,33,67,1) 60%,rgba(0, 83, 167, 0.8)); 
}

.offcanvas.show:not(.hiding) .nav-link, .offcanvas.showing .nav-link {
    padding-left: 1rem;
}

.offcanvas.show:not(.hiding) .hr-offcanvas, .offcanvas.showing .hr-offcanvas {
    display: block;
    margin:0;
}

.offcanvas .hr-offcanvas {
    display: none;
}

/* Banner Image, Background & Text Color */
/* ------------------------------------- */
.banner-bg-image {
    background: linear-gradient(90deg,rgb(0,33,67) 50%,rgba(0,0,0,0) 95%), url('images/banner.webp');
    background-size: cover;
    padding-top: 200px;
    padding-bottom: 100px;
    padding-left: 4rem;
    padding-right: 1rem;
}
  
.banner-text-color {
    color: var(--iif-white);    
}

.banner-color {
    color: var(--iif-secondary-color);
}

.btn-iif-secondary, .btn-iif-secondary:link, .btn-iif-secondary:visited {
    background: var(--iif-secondary-color)!important;
    font-family: var(--iif-text-font), sans-serif;
    font-weight: bold;
    color: var(--iif-black)!important;
    text-decoration: none;
}

.btn-iif-secondary:hover, .btn-iif-secondary:focus, .btn-iif-secondary:active {
    background: #f9963b!important;
    color: var(--iif-black)!important;
    transition-timing-function: ease-in-out!important;
    transition: 0.25s;    
}

.btn-iif-outline, .btn-iif-outline:link, .btn-iif-outline:visited {
    background: transparent;
    font-family: var(--iif-text-font), sans-serif;    
    border-color: var(--iif-white);
    font-weight: bold;    
    color: var(--iif-white)!important;
    text-decoration: none;    
}

.btn-iif-outline:hover, .btn-iif-outline:focus, .btn-iif-outline:active {
    background: #f9963b!important;
    color: var(--iif-black)!important;
    transition-timing-function: ease-in-out!important;
    transition: 0.25s;
}


#experience h4 {
    color: var(--iif-secondary-color);
}

#experience h1 {
    color: var(--iif-black);
}

#products {
    background: var(--iif-primary-color);   
    font-family: var(--iif-header-font), sans-serif;
    color: var(--iif-white);
    font-size: 1rem;
}

#card-footer-title {
    font-family: var(--iif-text-font), sans-serif;    
    text-align: center;
    background: var(--iif-primary-color);       
    color: var(--iif-white);    
    font-size: 1.2rem;    
    font-weight: bold;
}


.footer {
    padding-left: 4rem;
    padding-right: 4rem;
    background: var(--iif-footer-color);
    font-family: var(--iif-text-font), sans-serif;        
    color: var(--iif-white);
    line-height: 1.6;
    padding-top: 50px;
    padding-bottom: 30px;
}

#copyright {
    background: var(--iif-primary-color);
    font-family: var(--iif-header-font), sans-serif;        
    color: var(--iif-white);
    line-height: 1.6;
    padding-top: 1rem;
}


/* About Banner Image, Background & Text Color */
/* ------------------------------------- */
.about-banner-bg-image {
    background: linear-gradient(90deg,rgb(0,33,67) 25%,rgba(0,0,0,0) 95%), url('images/iif-about-banner.webp'); 
    background-size: cover;
    padding-top: 130px;
    padding-bottom: 170px;
    padding-left: 4rem;
    padding-right: 1rem;
}


.product-banner-bg-image {
    background: linear-gradient(to right, rgba(0,33,67,1),rgba(0, 83, 167, 0.8)); 
    padding-top: 60px;
    padding-bottom: 80px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.product-image-bg-image {
    background: linear-gradient(to right, rgba(0,33,67,1),rgba(0, 83, 167, 0.8)); 
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.card-hover {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
    transform: scale(1.0);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;    

}

.card-hover:hover {
    box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
    transform: scale(1.04);    
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

}