/* Google fonts import */
 @import url('https://fonts.googleapis.com/css2?family=Coda:wght@400;800&family=Shojumaru&display=swap');

 /* CSS Variables */
 :root {
     --primary-font: "Codo", sans-serif;
     --secondary-font: "Shojumaru", cursive;
     --primary-color: #6F2DBD; /* Grape */
     --secondary-color: #A663CC; /* Amethyst */
     --highlight-color: #B8D0EB; /* Columbia Blue */
     --highlight-color-light: #B9FAF8; /* Celeste */
 }
 
 /* Global styles */
 
 body {
     font-family: var(--primary-font);
     padding-top: 64px; /* pushes the top of the header down under fixed navbar */
 }
 
 h1,
 h2,
 h3 {
     font-family: var(--secondary-font);
     color: var(--primary-color);
 }
 
 h1,
 h2,
 h3 {
     text-transform: capitalize;
 }

.sub-heading-color {
    color: var(--highlight-color);
}

 /* Buttons */

 .custom-button-filled {
    border: 2px solid var(--highlight-color);
    background-color: var(--highlight-color);
    color: white;
}

.custom-button-filled:hover {
    border: 2px solid var(--secondary-color);
    background-color: var(--secondary-color);
    color: white;
}

.custom-button-outline {
    border: 3px solid var(--highlight-color-light);
    padding: 7px 25px;
    color: var(--highlight-color);
}

.custom-button-outline:hover {
    background-color: var(--highlight-color);
    color: white
}

*section {
    padding-top: 2rem; /* prevent navbar overlap */
}

 /* Navbar */

 #navbar {
    background-color: var(--secondary-color);
 }

 #navbar .logo {
    width: 30px;

 }

 /* Header */

#hero {
    background-color: white; 
    background-image: url("../images/pexels-danny-meneses-340146-943096.jpg");
    background-size: cover;
    background-position: 50% 70%; 
    min-height: 300px;
    padding: 5% 7%;
    color: var(--highlight-color);
    
}
 

/* Project cards */



#project .card .h3 {
        color: var(--primary-color);
}

#project .card {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#past-projects .card,
#dream-companies .card {
    border-color: var(--secondary-color);
    padding-top: 16px;
}


/* Footer / contact */

#contact {
   background-color: var(--secondary-color);  
   text-transform: none;
   padding-bottom: 1rem;
   padding-top: 2rem;
}

#contact h2 {
    color: var(--highlight-color);
    
}

#contact i {
    color: var(--highlight-color);
    font-size: 1.25rem;
    margin-right: 30px;
}

#contact .social-links i {
    font-size: 2rem;
    transition: color 0.3s ease-in-out;
}

#contact p {
    color: yellow;
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
    /* Make all service cards the same height for consistency */
    #services .card-body {
        min-height: 191px;
    }
}

/* Large devices (small laptops, 992px and up) */
@media screen and (min-width: 992px) {
    /* Make all service cards the same height for consistency */
    #services .card-body {
        min-height: auto;
    }
}

/* xl devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    /* make all service cards the same height for consistency */
    #services .card-body {
        min-height: 220px;
    }
}

/* xxl devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    /* make all service cards the same height for consistency */
    #services .card-body {
        min-height: 195px;
    }
}