@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* For tablets and smaller screens */
@media (max-width: 768px) {
    .cta h2 {
        font-size: 1.5rem;
    }
    .cta .lead {
        font-size: 1rem;
    }
    .hero h1 {
        font-size: 2.5rem;
    }
    .hero h2 {
        font-size: 1rem;
    }
}

/* For phones */
@media (max-width: 576px) {
    .navigation a {
        font-size: 1rem;
        padding: 0 10px;
    }
    .cta-buttons a {
        display: block; /* Stack buttons vertically */
        margin: 10px ;
        padding: 0 10px;
    }
}

/*common styles*/
h1 {
    font-size: 3rem;
}

h2 {
    /*font-size: 4rem;*/
    margin: 0;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}

ul {
    list-style-position: inside; /* Moves the bullet points inside the content flow */
}

li {
    list-style-type: none; /* Removes the bullet points */
}


h2, h3, h4, h5, h6 {
    font-family: 'Libre Baskerville', serif;
}

body {
    margin: 0;
    padding: 0;
    background: none; /* Remove the direct background image */
    background: black;
    font-family: 'Lato', sans-serif;
    color: white;
    position: relative;
    z-index: 0;
    min-height: 100vh;
    text-align: center;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9; /* Adjust the opacity to make the background semi-transparent */
    z-index: -1; /* Ensure the background is behind all other content */
}

/*h1 just so we get priority*/
.page-header h1 { 
    text-align: center;
    margin: 0;
    padding: 20px;
    font-family: 'Libre Baskerville', serif;
    background-color: #0b60b0;
    position: relative;
}

.btn-primary{
    background-color: #0b60b0;
}

.navigation {
    font-size: 1.5rem;
    background-color: black;
    letter-spacing: 0.1rem;
}

.navigation-Scroll {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.navigation a {
    color: #F0EDCF;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 20px;
    border: solid 5px transparent;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.navigation a:hover {
    background-color: #f0edcf;
    border-color: #40a2d8;
    color: black;
}

.dropdown-menu {
    background-color: black; /* Replace with your desired color */
}

.cta {
    text-align: center;
    background-color: #f0edcf;
    padding: 40px 20px;
    font-weight: 600;
    color: black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cta-content h2 {
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 2rem; /* Ensure headline stands out */
}

.cta-content .lead {
    font-size: 1.25rem;
    margin-bottom: 30px;
    line-height: 1.5;
}

.cta-buttons a {
    margin: 0 10px; /* Space between buttons */
    padding: 10px 30px; /* Button size */
    font-size: 1.1rem; /* Adjusted text size */
    border-radius: 30px; /* Smooth, modern button design */
    transition: all 0.3s ease; /* Smooth hover effects */
}

.cta-buttons .btn-primary {
    background-color: #40a2d8;
    border-color: black;
}

.cta-buttons .btn-primary:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.cta-buttons .btn-outline-dark {
    border-color: black;
    color: black;
}

.cta-buttons .btn-outline-dark:hover {
    background-color: black;
    color: white;
}

.btn-linked:hover{
    text-decoration: underline;
}

.hero {
    color: white;
    text-align: center;
    width: 100%;
    background: black;
}

.hero h1 {
    font-size: 5rem;
    margin: 0;
    font-family: 'Kaushan Script', cursive;
}

.hero h2 {
    /*font-size: 1rem;*/
    margin-bottom: 20px;
}

.hero img {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    margin-bottom: 30px;
    border: dotted 2px #f0edcf;
}

.aboutMe {
    text-align: center; /* Center the section title */
    background-color: #40a2d8;
    padding: 40px 20px;
    color: white;
}

.aboutMe h2 {
    font-size: 2.5rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 12px;
    margin-bottom: 20px;
}

.aboutMe p {
    text-align: left; /* Left-align for better readability */
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.aboutMe p:last-of-type {
    margin-bottom: 0; /* Remove bottom margin for the last paragraph */
}

@media (max-width: 768px) {
    .aboutMe h2 {
        font-size: 2rem; /* Adjust heading size for smaller screens */
    }

    .aboutMe p {
        font-size: 1rem; /* Reduce font size slightly */
        line-height: 1.5;
    }
}

/*.services {*/
/*    width: 100vw;*/
/*}*/

/*.services-content h2 {*/
/*    padding: 20px 0 0 0;*/
/*    margin: 0;*/
/*    color: black;*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 2px;*/
/*    text-decoration: underline;*/
/*    text-underline-offset: 12px;*/
/*    text-decoration-skip-ink: none;*/
/*}*/

/*.services-content {*/
/*    text-align: center;*/
/*    background-color: #f0edcf;*/
/*    color: black;*/
/*    margin: 0;*/
/*    line-height: 1.8rem;*/
/*    padding-bottom: 20px;*/
/*}*/

/*.callToAction-services {*/
/*    text-align: center;*/
/*    padding: 0 0 20px 0;*/
/*    font-weight: 600;*/
/*    background-color: #f0edcf;*/
/*}*/

/*.rates-content h2 {*/
/*    padding: 20px 0 0 0;*/
/*    margin: 0;*/
/*    color: white;*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 2px;*/
/*    text-decoration: underline;*/
/*    text-underline-offset: 12px;*/
/*    text-decoration-skip-ink: none;*/
/*}*/

/*.rates-content {*/
/*    text-align: center;*/
/*    background-color: #40a2d8;*/
/*    color: white;*/
/*    margin: 0;*/
/*    line-height: 1.8rem;*/
/*    padding-bottom: 20px;*/
/*    justify-content: center;*/
/*}*/

/*.rates-content-table table{*/
/*    margin: 20px auto;*/
/*    padding: 20px;*/
/*    border: solid 2px black;*/
/*    font-size: 1.5rem;*/
/*}*/

/*.rates-content-table th, td{*/
/*    padding: 8px 10px;*/
/*}*/

/*.rates-content-finePrint {*/
/*    font-size: 0.8rem;*/
/*    line-height: 1rem;*/
/*}*/

/*.portfolio-navigation-content {*/
/*    text-align: center;*/
/*    background-color: #f0edcf;*/
/*    text-transform: uppercase;*/
/*    color: black;*/
/*    padding: 20px;*/
/*}*/
/*.portfolio-navigation-content h2{*/
/*    text-decoration: underline;*/
/*    text-underline-offset: 12px;*/
/*}*/

/*.portfolio-navigation-content li {*/
/*   list-style: none;*/
/*}*/

/*.portfolio-navigation-content a {*/
/*    text-decoration: none;*/
/*    color: black;*/
/*    text-transform: none;*/
/*    font-size: 1.5rem;*/
/*    padding: 10px;*/
/*}*/

/*.portfolio-navigation-content a:hover {*/
/*    text-decoration: underline;*/
/*}*/

/*.portfolioEntries{*/
/*    line-height: 2rem;*/
/*}*/

/*.portfolioEntries h4{*/
/*    font-size: 2rem;*/
/*    margin-bottom: 10px;*/
/*}*/

/*.portfolioEntries-professional-content h2 {*/
/*    background-color: #40a2d8;*/
/*    color: white;*/
/*    padding: 30px;*/
/*}*/

/*.portfolioEntries-personal-content h2 {*/
/*    background-color: #40a2d8;*/
/*    color: white;*/
/*    padding: 30px;*/
/*}*/

/*.portfolioEntries-portfolioEntry h3{*/
/*    font-size: 3rem;*/
/*}*/

.portfolioEntry-screenshots img{
    border: solid 2px white;
    height: 300px;
    /*object-fit: fill;*/
}

/*.portfolio-titleImage{*/
/*    height: 512px;*/
/*    width: auto;*/
/*    object-fit: cover;*/
/*    border: solid 2px white;*/
/*}*/

/*.portfolioEntry-video {*/
/*    margin: 20px;*/
/*}*/

/*.portfolioEntry-video iframe{*/
/*    border: solid 5px white;*/
/*}*/

/*.itchIO-Banner{*/
/*    margin: 10px;*/
/*    color: white;*/
/*}*/

/*.btn-itchIO{*/
/*    padding: 10px 20px;*/
/*    margin:0;*/
/*}*/

/*.resume-content{*/
/*    text-align: center;*/
/*    background-color: #f0edcf;*/
/*    color: black;*/
/*    padding: 20px;*/
/*}*/

/*.privacyPolicy-navigation{*/
/*    text-align: center;*/
/*    background-color: #f0edcf;*/
/*    color: black;*/
/*    padding: 20px;*/
/*}*/

/*.privacyPolicy-navigation a{*/
/*    text-decoration: none;*/
/*    color: black;*/
/*    font-size: 1.5rem;*/
/*}*/

/*.privacyPolicy-navigation a:hover{*/
/*    text-decoration: underline;*/
/*}*/

/*.privacyPolicy-content{*/
/*    text-align: center;*/
/*}*/

/*.privacyPolicy-content h4{*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 0.1rem;*/
/*    text-decoration: underline;*/
/*    text-underline-offset: 5px;*/
/*    !*padding: 20px;*!*/
/*}*/

/*.privacyPolicy-content a{*/
/*    text-decoration: underline;*/
/*    color: #40a2d8;*/
/*    font-size: 1.2rem;*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 0.1rem;*/
/*    margin: 12px;*/
/*    padding: 0px;*/
/*}*/

/*.privacyPolicy-content a:hover{*/
/*    text-decoration: none;*/
/*    border: #0b60b0 solid 2px;*/
/*    color: #f0edcf;*/
/*    padding: 10px;*/
/*    margin: 0px;*/
/*}*/

/*.privacyPolicy-content p{*/
/*    max-width: 1800px; !* Set the maximum width for the text *!*/
/*    margin: 0 auto; !* Center the container horizontally *!*/
/*    text-align: center; !* Align text to the left *!*/
/*    padding: 20px; !* Add some padding to the sides for better readability *!*/
/*    line-height: 1.6;*/
/*    font-size: 1.2rem;*/
/*}*/

/*.privacyPolicy-content li{*/
/*    padding: 10px;*/
/*}*/


/*.privacyPolicy-content-header{*/
/*    text-align: center;*/
/*    background-color: #40a2d8;*/
/*    color: white;*/
/*    padding: 20px;*/
/*    margin:0;*/
/*}*/

/*.contact-content a{*/
/*    color: white;*/
/*    text-transform: uppercase;*/
/*    text-decoration: none;*/
/*    padding: 0px;*/
/*}*/

/*.contact-content a:hover{*/
/*    text-decoration: none;*/
/*    border: #0b60b0 solid 2px;*/
/*    color: #f0edcf;*/
/*    padding: 10px;*/
/*    margin: 0px;*/
/*}*/


/* Social Media Section */
.socials {
    text-align: center;
    color: white;
    padding: 20px 0;
}

.socials h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-decoration: underline;
    text-underline-offset: 10px;
}

.social-icon {
    width: 80px;
    height: auto;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border-radius: 50%;
    background-color: transparent;
    padding: 10px;
}

.social-icon:hover {
    transform: scale(1.1);
    background-color: rgba(240,237,207, 0.5);
}

@media (max-width: 768px) {
    .socials h3 {
        font-size: 1.5rem;
    }

    .social-icon {
        width: 60px;
    }
}

.footer {
    color: white;
    text-align: center;
    padding: 20px 0;
    border-top: 2px solid #40a2d8;
}

.footer-acknowledgement {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-copyright {
    font-size: 1rem;
    font-style: italic;
    color: #dcdcdc; 
}

@media (max-width: 768px) {
    .footer-acknowledgement,
    .footer-copyright {
        font-size: 0.9rem; /* Adjust font size for smaller screens */
        line-height: 1.4;
    }
}


/*!*------------------------Refs --------------------------------------*!*/
/*!*Colour Palette: https://colorhunt.co/palette/0000000b60b040a2d8f0edcf*!*/
/*!*black: #000000; 0,0,0*!*/
/*!*dark blue: #0b60b0; 11,96,176*!*/
/*!*light blue: #40a2d8; 64,162,216*!*/
/*!*light yellow: #f0edcf; 240,237,207*!*/