@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    font-family: "Roboto", sans-serif;
}

/*Navbar CSS*/
.navbar { background-color: #ffffff; padding: 2% 0;  }
.navbar img { width: 150px; }
.navbar a { font-weight: 500; color: #062c53 !important; padding: 1px 17px !important; }
.navbar a.active { border: 2px solid #062c53; }
.navbar a.active:hover { color: #062c53 !important; }
.navbar ul { text-align: center; }
.navbar a:hover { color: #0093dd !important; }
.navbar .dropdown-menu { text-align: left; }

/*Title CSS*/
#title {
    position: relative; 
    background-image: url("https://www.bizstrat.co.za/images/shared/about-header-bg.jpg");
    background-position: center center;
    padding: 5% 10vw;
    overflow: hidden; 
    border-bottom: 2vh solid #0093dd;
}

#title::before {
    content: "";
    position: absolute;
    top: 60px;
    left: 10vw; 
    width: calc(100% - 20vw); 
    height: calc(100% - 120px); 
    background-color: rgba(0, 147, 221, 0.6);
    z-index: 1;
}

#title h1 {
    color: #FFF;
    text-align: center;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    padding: 10px 15%;
    width: max-content;
    display: block;
    margin: auto;
    font-size: 2.2em;
    font-weight: 700;
    position: relative; /* Ensure the z-index works */
    z-index: 2; /* Ensure the text is above the overlay */
}

/*Conference CSS*/
#conference { background-color: #FFF; padding: 5% 10vw; }
#conference img { width: 100%; height: auto; border: 8px solid #dfe5e8; }
#conference p { color: #61687c; font-weight: 400; padding-right: 10%; }
#conference a { color: #61687c; text-decoration: none; font-weight: 400; }
#conference a:hover { color: #0093dd; }
#conference h4 { font-size: 1.3em; color: #062c53; font-weight: 600; padding-bottom: 1%; }
#conference h5 { color: #1470c0; text-transform: uppercase; font-weight: 600; font-size: 1.2em; padding-bottom: 1%; }
#conference h6 { color: #062c53; font-weight: 600; padding-bottom: 1%; }

/*Tab CSS*/
#tab { padding: 0% 10vw 5% 10vw; }
#tab li button { text-transform: uppercase; font-weight: 400; color: #4b4949; }
#tab li button.active { color: #0093dd; font-weight: 500; background-color: #f2eeee; border-bottom: none;}

#tab .tab-pane { background-color: #f2eeee; padding: 5% 5%; }
#tab .tab-pane p, #tab .tab-pane ul { color: #61687c; }
#tab .tab-pane img { width: 100%; border-radius: 10px; }
#tab .accordion-item { background-color: transparent; }
#tab form .btn-primary { background-color: #0093dd; padding: 10px 5%; border: none; color: #FFF; font-weight: 500; display: block; margin: auto; font-size: 1.3em; }
#tab form .btn-primary:hover { background-color: #062c53; transition: 0.7s; }

/*Footer CSS*/
.footer { background-color: white; color: #062c53; padding: 4% 2% 2% 2%; font-size: 16px; font-weight: 500; }
.footer a { color: #0093dd; text-decoration: none; font-weight: 400; }
.footer a:hover { color: #062c53; }
.footer a:visited { color: #0093dd; }  

.footer i { padding-right: 5px; }
  
/*Media Queries*/
@media (max-width: 767.98px) {
    body { overflow-x: hidden; }
    
    #body { margin-top: 5vh; padding: 0 3%; }

    /*Title*/
    #title { padding: 10% 0; }
    #title h1 { font-size: 1.5em; padding: 10px 5%; }
    #title::before { width: 100%; left: 0; height: 100px; margin-top: -35px; }
    
    /*Conference*/
    #conference { padding: 5vh 2vw; margin-top: 4vh; }
    #conference p { padding-right: 0; }

    /*Tab*/
    #tab { padding: 5vh 2vw; }
	#tab .tab-pane img { width: 50%; display: block; margin: auto; }
}



/*.social-icons a { margin-right: 10px; color: #062c53;  }
.social-icons a:hover { color: #0093dd; }*/