body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}


/*splash page*/
.splashpg {
    display: flex;
    flex:1;
    background: linear-gradient(to bottom,  #224853, black); /* gradient */
    padding-top: 50px; /* gap top of page */

}
canvas {
            display: block;
}
/*LOGO*/
.navbar-brand{
    font-family: 'Heebo', Sans-Serif;
    /*font-weight: 500;*/
    padding-left: 10px;
    margin-left: 0px;
}

/*menu item*/
.nav-item{
    -webkit-font-smoothing: antialiased;
    font-family: 'Heebo', Sans-Serif;
    font-weight: 500;
    padding-left: 10px;
    font-size: 17px;

}
.nav-item-alt{
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: bold; 
    padding-left: 10px;
    letter-spacing: -0.02em;
}


/* Default color for nav-links */
.navbar-nav .nav-link {
    color: #ffffff; /* Set the default text color */
}

/* Hover color for nav-links */
.navbar-nav .nav-item:hover .nav-link {
    /*color:  #E1611E !important;  Change the text color on hover */
    color: #F2F2F2 !important; /* Change the text color on hover */
   
    font-weight: 700;
    
}

/* Active color for nav-links on smaller screens (touch devices) */
.navbar-nav .nav-item.active .nav-link {
    color: #E1611E !important; /* Change the text color for the active link on touch devices */
    font-weight: 500 !important;
}

/*we can set the color of nav bar*/
.navbar {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1) !important; /* Adjust the values as needed */
}


/* Style for h2 in the blogEntryCard */
.pageContent .blogEntryCard  {
    color: black; /* Set the text color */
    
    /*font-weight: 500;  Set the font weight to Medium (500) */
    font-weight: 700; /* Set the font weight to Regular (400) or Medium (500) */
    /* Add any other styling properties as needed
    -webkit-font-smoothing: antialiased; */
    /*font-family: 'Niconne', Sans-Serif;*/
    font-family: 'Heebo', Sans-Serif;
    
    font-smooth: always; /* Enable font smoothing */
    -webkit-font-smoothing: antialiased; /* Enable anti-aliasing for WebKit browsers */
    -moz-osx-font-smoothing: grayscale; /* Enable anti-aliasing for Firefox on macOS */
}

/* Style for p in the blogEntryCard */
.pageContent .blogEntryCard p {
    font-family: 'Heebo', Sans-Serif;
    font-weight: medium;
}
.pageContent .blogEntryCard a {
    font-family: 'Heebo', Sans-Serif;
    font-weight: medium;
    color: black;
}


.spacer { 
    /* margin-top:18px;*/ 
    padding: 10px;
}

p{
    -webkit-font-smoothing: antialiased;
    /*font-family: 'Verdana',Times;*/
    font-family: 'Heebo', Sans-Serif;
    /*font-family: 'lato',Sans-serif;*/
    margin-bottom: 0;
    margin: 0;
}
p a {
    color: inherit;
    text-decoration: underline;
}
p a:hover {
  text-decoration: underline; /* Add underline on hover (optional) */
  color: #c22c84;
}
.smallText {
    font-weight: bold;
    font-size: 10px;
    
    color: #c22c84;
    font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif;
    margin-top: -8px;
    padding-top: -8px;
    border-top: -8px;
}

h3 {
    font-weight: 700;
    font-family: "Helvetica Neue", Helvetica, "Heebo", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.blogTitle{
    font-weight: 700;
    font-size: 1.3em; 
    font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    border-bottom: 2px solid #c22c84;
    margin-bottom: 14px;
}

.blogbox {
    /*position: relative;*/
    
    width: 100%;
    padding-top: 50px; /* gap top of page */
    margin: 0 auto; /* Center it */
    background: #f4f4f4;
    padding-bottom: 30px; /* gap between last card and footer */
}

.bg_blog_image_canvas {
    position: relative;
    
    margin: 0 auto;  /*Center it */
    /*margin-left: 0;*/
    background: white;
    width: 100%;
    max-width: 724px;
}

.bg_blog_image_container {
    position: relative;
    max-width: 724px; /* Maximum width */
    margin: 0 auto;  /*Center it */
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 0;
    
    
    
    
    
}

.bg_blog_image_container img {
    width: 100%;
    margin: auto; /*centres the image*/
    padding: 0;
    display: block; 
    /*Remove any default space reserved for descenders or baselines */
    /*vertical-align: middle;*/
    align-items: center; 
    justify-content: center;
}



.blogEntryCard {
    background: #f8f8f8;
    max-width: 724px; /* Maximum width */
}



/*GENERIC or main page*/
/* starts here */

/*gen main content div box*/
/*Generic page contents this keeps it centred and sets a max width*/
.genContent {
    padding-top: 25px; /* gap top of page */
    max-width: 924px; /* Maximum width */

    min-height: 100%;
    margin-top: 32px;
    margin-bottom: 21px;

}

.bg_image_container {
    position: relative;
    margin: 0 auto;  /*Center it */
}

/*image box on the main generic page*/
.bg_image_container img {
    vertical-align: middle;
    width: 100%;
}

/*Generic text box bottom of page*/
.text_container {    
    margin-top: 0px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
}

/* Mobile styles here */
@media (max-width: 480px) {

    
    .bg_blog_image_container img {
        max-height: 188px; /* Set the desired height of the cropped image container */
        overflow: hidden; /* Hide the overflow content */
        border-top-left-radius: 4px; 
        border-top-right-radius: 4px;   
    }

    .bg_blog_image_container {
        border-top-left-radius: 4px; 
        border-top-right-radius: 4px;   
    }
    
    .bg_blog_image_canvas {
        border-top-left-radius: 4px; 
        border-top-right-radius: 4px;   
    }
    
    .anyBlogText {
        padding-top:11px;
        padding-left: 16px;   
        padding-right: 16px;  
        padding-bottom: 16px;  
    }


    .blogEntryCard {
        margin-top: 28px;
        margin-left: 21px;
        margin-right: 21px;
        margin-bottom: 21px;
        padding: 0px;
        border-radius: 4px;
        /*horizon vert radius colour*/
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);

    }


    .blogbox {
        margin: 0 auto; /* Center it */
    }

    .genContent {
        max-width: 924px;
        padding-left: 21px;
        padding-right: 21px;
        padding-top: 46px; 
        flex-direction: column;
    }
    
    .shadows{
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 4px; 
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    -webkit-font-smoothing: antialiased;
    }
    
    .bg_image_container img {
        /* top border on generic page image box*/
        border-top-left-radius: 4px; 
        border-top-right-radius: 4px; 
        
    }
    
   .about_content{
        /*this is title section of about page*/
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 11px;
        margin-top:0px;
        margin-bottom: 0;
    }
    
    
    /*text inside image box on the main page*/
    .splashText{
        filter: blur(2px);
     	position: absolute;
        top: 0;
        right: 0;
        color: #f1f1f1; /* Grey text fallback colour*/
        color: rgba(255, 255, 255, 0.5); /* White text with 50% transparency */
        font-size: 10px;
        -webkit-font-smoothing: antialiased;
        padding-left: 20px;
        margin-top: 0px;
    }
    
    
    .text_container {    
        border-bottom-left-radius: 4px; 
        border-bottom-right-radius: 4px; 
    }
}





/*this only applies on desktop site*/
@media (min-width: 481px) {


    .blogEntryCard {
        margin: 16px;
        padding: 16px;
        border-radius: 12px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }
    
    .bg_blog_image_container {
        margin-bottom: 11px;
    }
    
    .bg_blog_image_container img {
        max-height: 398px; /* Set the desired height of the cropped image container */
        overflow: hidden; /* Hide the overflow content */
    }

    .blogbox {
        padding-left: 193px;
        
 
        display: flex;
        flex-direction: column;
        /*
        position: relative;
        width: 100%;
        max-width: 100%;
        */
        height: auto;
        
    }

    /*the black bit of the image with text on the gen page*/
    .bg_image_container .about_content{
        
        /*border-radius: 18px;*/
        position: absolute; /* Position the background text */
        top: 0; /* At the bottom. Use top:0 to append it to the top */
        background: rgb(0, 0, 0); /* Fallback color */
        background: rgba(0, 0, 0, 0.5); /* black background with 0.5 opacity */
        color: #f1f1f1; /* Grey text */
        width: 100%; /* Full width */
        padding: 16px; /* Some padding */
        padding-top:16px;
        
        backdrop-filter: blur(9px); 
        display: block;

    }
    
    .genContent {
        margin-left: 193px; /*move it to the left a bit for large screens*/
        /*padding-bottom: 21px;*/
        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2), 
                0 4px 6px -4px rgba(0, 0, 0, 0.2);
        border-bottom-left-radius: 9px; 
        border-bottom-right-radius: 9px; 
        /*background-color: #FFFFFF;*/
 
    }
    
    .shadows{
        border-bottom-left-radius: 9px; 
        border-bottom-right-radius: 9px; 
    }
    
    /*text inside image box on the main page*/
    .splashText{
        filter: blur(3px);
     	position: absolute;
        bottom: 0;
        left: 0;
        color: #f1f1f1; /* Grey text fallback colour*/
        color: rgba(255, 255, 255, 0.5); /* White text with 50% transparency */
        font-size: 70px;
        -webkit-font-smoothing: antialiased;
        padding-left: 20px;
        margin-top: 0px;
    }
    
    .bg_image_container img {
        /* max width */
        /*-width: 1474px;*/
        width: 100%;
        height: 418px; /* Set the desired height of the cropped image container */
        overflow: hidden; /* Hide the overflow content */
    }
    
    .about_content{
        /*this is title section of about page*/
        color: #000000; /* white text fallback colour*/
    }
    
    .text_container {    
        max-width: 924px; /* max width */
        padding: 16px;
        border-bottom-left-radius: 9px; 
        border-bottom-right-radius: 9px; 
    
    }
    
    
}








footer {
    background-color: #888; /* Grey background color */
    padding-left: 60px; /* 20px padding on the left */
    width: 100%; /* Full width */
    text-align: right; /* Justify content to the left */
    color: white; /* Text color */
    font-size: 9px; /* Text size */
    margin-top: auto; /* Push the footer to the bottom */
    padding: 8px; /* Adjust padding as needed */
}


/* the whole page don't add any style to this*/
.pageContainer {
    display: flex;
    width:100%; 
    margin: 0;
    flex-direction: column;
    min-height: 100%;
    background-color: #f4f4f4;
}

/* the whole generic page allows us to dynamically set a bg colour*/
/* replaced with a dynamic php page now combo */
.main_bg_colour {
    flex: 1; 
    min-height: 100%;   

    /* or set color here instead
    background-color:  #e0dacc; */
}







/*social buttons*/
.fa {
    font-size: 30px !important;/* Adjust the font size as needed */
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    background: black;
    color: white;
    text-align: center;
    text-decoration: none !important;
    border-color:white;
    border-width:1px;
    padding-left:12px;
    padding-right:12px;
    opacity: 0.6;
    

}

.fa:hover {
    opacity: 1;
    color: #FFFFFF;
  
}

.fa-linkedin::before {
  content: "\f0e1"; /* Font Awesome icon code for LinkedIn */
}

.fa-imdb::before {
  content: "\f2d8"; /* Font Awesome icon code for IMDb */
}