/* CSS CONTENTS */
/*
1: Website Typography
2: Bootstrap Menus
3: Hero blocks general
4: Hero blocks with background image
5: Hero blocks with background video
6: Introduction text block
7: Contact form
*/


/* =========== 1: WEBSITE TYPOGRAPHY ============= */

/* Main headings */
h1 { font-family: sans-serif }

/* Sub-headings */
h2 { font-family: sans-serif }

/* Smaller sub-headings */
h3, h4, h5, h6 { font-family: sans-serif }

/* Text */
p, li { font-family: sans-serif }

/* Menus */
#mainNav .container ul.navbar-nav li a.nav-link,
#mainNav li.nav-item a.btn { font-family: sans-serif }

/* Footer */
footer ul.footer-links li a,
footer a.privacy-legal { font-family: sans-serif }


/* =========== 2: BOOTSTRAP MENUS ============= */

/* Menu spacing */
#mainNav .container { padding-top: 0; padding-bottom: 0 }
#mainNav .container img { margin-bottom: 0 }

/* Menu: dark colour */
nav.navbar.navbar-dark.bg-dark { background-color: darkblue !important }

/* Menu: light colour */
nav.navbar.navbar-light.bg-light { background-color: lightblue !important }

/* Hamburger icon */
#mainNav.navbar-dark.bg-dark i.fas.fa-bars { font-size: xx-large }

/* Hamburger icon: dark colour */ 
#mainNav.navbar-dark.bg-dark i.fas.fa-bars { color: #fff }

/* Hamburger icon: dark colour */
#mainNav.navbar-light.bg-light i.fas.fa-bars { color: #000 }

/* Menu options: text size and weight */
#mainNav li.nav-item a { font-size: large; font-weight: bold }

/* Menu options: call-to-action button */
#mainNav li.nav-item a.btn { padding: 6px 20px; font-weight: normal }

/* Menu options: tablets/desktops */
@media (min-width: 1200px) { #mainNav li.nav-item { margin-left: 40px } }

/* Menu options: mobiles */
@media (max-width: 1199px) { #mainNav li.nav-item { margin-bottom: 20px } }

/* Menu option colours: light */
.navbar-light .navbar-nav .nav-link:link,
.navbar-light .navbar-nav .nav-link:visited { color: #000 }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:active { color: gray }

/* Menu option colours: dark */
.navbar-dark .navbar-nav .nav-link:link,
.navbar-dark .navbar-nav .nav-link:visited { color: #fff }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:active { color: lightgray }

/* ============== 3: HERO BLOCKS GENERAL ============== */

/* Verically center content and default background colour */
.hero-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: gray;
}

/* Desktop - hero block inside spacing */
@media (min-width:768px) {
    .hero-block { padding: 8% 5% }
}

/* Mobiles - hero inside spacing */
 @media (max-width:767px) {
    .hero-block { margin-bottom: 40px; padding: 20% 10% }
    .col-md-6.col-xs-12.text-right,
    .col-md-6.col-xs-12 { text-align: center !important }
    .col-md-6.col-xs-12:nth-child(1) { margin-bottom: 12% }
}

/* Center-align headings and sub-headings */
.hero-block h1, .hero-block h2 { text-align: center }

/* Set maximum width of heading snd sub-heading */
.hero-block h1, .hero-block h2 { 
    max-width: 80%; margin-left: auto; margin-right: auto
}

/* Desktop - Space beneath headings and sub-headings */
@media (min-width:768px) { 
    .hero-block h1 { margin-bottom: 4% } 
    .hero-block h2 { margin-bottom: 6% } 
}

/* Mobiles - Space beneath headings */
@media (max-width:767px) { 
    .hero-block h1 { margin-bottom: 8% } 
    .hero-block h2 { margin-bottom: 14% } 
}

/* ====== 4: HERO BLOCK WITH BACKGROUND IMAGE ======= */

/* Centre background image, horizontally and vertically */
.hero-7 {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Default font settings */
.hero-7 h1 { 
    color: #fff;
    font-weight: bold;
    line-height: 1.1;
    font-size: calc(60px + (112 - 60) * ((100vw - 320px) / (1600 - 320)));
    text-shadow: 2px 2px #222;
}

.hero-7 h2 { 
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    font-size: calc(24px + (54 - 24) * ((100vw - 320px) / (1600 - 320)));
    text-shadow: 2px 2px #222;    
}

/* ======= 5: HERO BLOCKS WITH BACKGROUND VIDEO ======= */

.hero-10 { text-align: center; position: relative; overflow: hidden }

.hero-10 .background-video-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    height: 100%;
}

.hero-10 .background-video { 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

/* Optional overlay */
.hero-10 .bg-overlay {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background-image: linear-gradient(rgba(29,38,113,0.7),rgba(195,55,100,0.3)); 
}

.hero-10 video[poster] { object-fit: cover; width: 100%; height: 100% }

/* Desktop - height */
@media (min-width:768px) { .hero-10 .background-video-content { height: 300px } }

/* Mobiles - height  */
@media (max-width:767px) { .hero-10 .background-video-content { height: 380px } }

.hero-10 .background-video-content h1 { 
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    font-size: calc(48px + (100 - 48) * ((100vw - 320px) / (1600 - 320)));
    letter-spacing: 2px;
}

.hero-10 .background-video-content h2 { 
    color: #fff;
    font-weight: bold;
    line-height: 1.4;
    font-size: calc(20px + (48 - 20) * ((100vw - 320px) / (1600 - 320)));
}

/* Desktop - Space beneath main heading  */
@media (min-width:768px) { 
    .hero-10 .background-video-content h1 { margin-bottom: 1% }
}

/* Mobiles - Space beneath main heading */
@media (max-width:767px) { 
    .hero-10 .background-video-content h1 { margin-bottom: 8% }
}

/* Desktop - button positioning  */
@media (min-width:768px) { 
    .hero-10 .col-md-6.col-xs-12:nth-child(1) { text-align: right }
    .hero-10 .col-md-6.col-xs-12:nth-child(2) { text-align: left }
}

/* ========== Introduction text block  ============*/

.introduction-text { text-align: center }

/* Desktop */
@media (min-width:768px) { 
    .introduction-text { padding: 4% 10% 5% 10% }
}

/* Mobiles */
@media  (max-width:767px) { .introduction-text { padding: 7% 7% 10% 7% } }

.introduction-text p { font-size: calc(20px + (26 - 20) * ((100vw - 320px)/(1600 - 320))) }

/* ================= 7: CONTACT FORM ==================*/

#myform { 
    background-color: #f0f5f4;
    padding: 20px 30px;
    margin-bottom: 40px;    
}

#myform label { font-weight: bold } 

#myform button { font-size: large; padding: 6px 24px } 

#myform .valid-feedback, #myform .invalid-feedback { font-size: large }


/* =============== 8: FOOTER ================== */

/* Outer footer parent container */
footer { 
    text-align: center; 
    color:#fff;
    background-color:rgb(36,64,84);
}

/* Desktop footer - inside padding  */
@media (min-width:768px) { footer { padding: 4% 8% 4% 8% } }

/* Mobiles footer - inside padding */
@media (max-width:767px) { footer { padding: 8% 8% 12% 8% } }

/* Styles for footer background, text, icons and links */

footer h4, footer h5, 
footer ul.footer-icons li, footer ul.footer-icons li a, 
footer p, footer p a {
   color: #fff
}

/* Footer headings */
footer h4 {
   font-weight: normal;
   font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320)));
   margin: 0 auto 16px 0;
}

footer h5 {
    font-weight: normal;
    font-style:  italic;
    color: #fff;
    margin: 0 auto 36px auto;
    font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320)));
}

/* Footer text links and icon links */
footer ul.footer-links { text-align: center }
footer ul.footer-links { margin-left: 0 }
footer ul.footer-links, footer ul.footer-icons { list-style-type: none }

footer ul.footer-links,
footer ul.footer-icons { margin: 0 auto 48px auto; padding-left: 0 }

footer ul.footer-links li,
footer ul.footer-icons li { display: inline-block; margin: 0 32px 0 0 }

footer ul.footer-links li:last-child,
footer ul.footer-icons li:last-child { margin-right: 0 }

/* Footer text links */
footer ul.footer-links li a {
    color: #fff;
    text-decoration: none;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-bottom:2px;    
    font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320)));
}

footer ul.footer-links li a:link, 
footer ul.footer-links li a:visited  {
   border-bottom-color: transparent;
}

footer ul.footer-links li a:hover, 
footer ul.footer-links li a:active  {
   border-bottom-color: #fff;
}

/* Footer icons */
footer ul.footer-icons li a i {
    text-decoration: none;
    font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320)));
}

footer ul.footer-icons li a:hover, 
footer ul.footer-icons li a:active  { color: #fff1e5 }

/* Privacy and legal link */
footer p a {
    text-decoration: none;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-bottom:2px;  
    color: #fff;  
    font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
}

footer p a:link, 
footer p a:visited  {
    color:#fff;
    border-bottom-color: transparent;
}

footer p a:hover, 
footer p a:active  {
    color:#fff;
    border-bottom-color: #fff;
}

a.privacy-legal {
    font-family: sans-serif;    
    display: inline-block;
    color:#fff;
    text-decoration: none;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-bottom:2px;    
    font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320)));
}

a.privacy-legal:link,
a.privacy-legal:visited {
    border-bottom-color: transparent;
}

a.privacy-legal:active,
a.privacy-legal:hover {
    border-bottom-color: #fff
}