@font-face {
    font-family: 'Titillium';
    src: url('fonts/TitilliumWeb-Regular.ttf') format('truetype');
    /* Replace with the actual URL to your font file */
    /* You can include additional font formats and sources here for cross-browser compatibility */
}

@font-face {
    font-family: 'xbones';
    src: url('fonts/xbones.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Titillium', sans-serif;
    background-color: #1D2228;
}

.creations-section {
    font-family: 'Titillium', sans-serif;
}

/* ----- Carrousel  -----*/
.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-indicators {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.carousel-caption-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}

.carousel-control-prev,
.carousel-control-next {

    opacity: 0.7;

    /* Adjust the height to your desired size */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {


    /* Adjust the background size to fill the button */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    /* Adjust the opacity of the buttons on hover */
}

/* ----- Tags  -----*/

.tags {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    padding-top: 4px;
    padding-bottom: 4px;

    box-sizing: border-box;
}

.tag {
    display: inline-block;
    margin-right: 4px;
    margin-top: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 16px;
    align-items: center;
    /* Add any other styles for the tags */
}

.tag img {
    height: 1.0em;
    margin-right: 4px;
    margin-left: 4px;
    vertical-align: middle;
    margin-bottom: 3px;
}

.tag-text {
    /* Add any other styles for the tags */
}

/* Tags */
.tag-producer {
    background-color: #814040;
    color: #ffffff;
}

.tag-gamedesign {
    background-color: #405E81;
    color: #ffffff;
}

.tag-leveldesign {
    background-color: #598140;
    color: #ffffff;
}

.tag-programmer {
    background-color: #514081;
    color: #ffffff;
}

.tag-solo {
    background-color: #514081;
    color: #ffffff;
}

.tag-gamejam {
    /* 6C4417 */
    background-color: #74923C;

    color: #ffffff;
}

.tag-unity {
    background-color: #ffffff;
    color: #111316;
}

.tag-playstore {
    background-color: #303842;
    color: #ffffff;
}

/* ----- Custom Buttom section  -----*/
.button-group {
    display: flex;
    justify-content: center;
}

.custom-button {
    background-color: #1D2228;
    color: #D4CFCA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    margin: 0 5px;
}

.custom-button-darker {
    background-color: #111316;
    color: #D4CFCA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    margin: 0 5px;
}

.custom-button:hover {
    background-color: rgb(74, 77, 78);
    color: #D4CFCA;
}

.custom-button-darker:hover {
    background-color: #303842;
    color: #D4CFCA;
}

.custom-button img {
    margin-right: 5px;
}

/* ----- Experience section  -----*/

.experience-section {
    position: relative;
    height: auto;
    /* Adjust the height as needed */
    z-index: 1;
}

.experience-section p {
    color: #E0D3C6;
}

.experience-section img {
    max-width: 100%;
    height: auto;
}

.parallax-bg {

  width: 100vw;
  /* Full viewport width */
  margin-left: calc(-50vw + 50%);

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

    /* Ensure clicks pass through */
    padding: 100px 0;
    /* Vertical space inside each section */
}

.companylogo
{
    border-radius: 100%;
}

.lego-bg {
    background-image: url('images/LegoBackground.png');
}

.SoR-bg {
    background-image: url('images/SoR_BG.jpg');
}

.EXP-bg {
    background-image: url('images/Exp_bg.png');
    width: 100vw;
    /* Full viewport width */
    margin-left: calc(-50vw + 50%);

      background-attachment:fixed;

    /* Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size:200%;
    position: relative;


    /* Ensure clicks pass through */
    padding: 100px 0;
    margin-bottom: 5px;
    margin-top: 5px;

    image-rendering: pixelated;
    /* For modern browsers */
    image-rendering: crisp-edges;
    /* Fallback for older browsers */
}

.no-background {

    /* Adjust as needed for your design */
    margin-bottom: 50px;
    /* Equal spacing above and below */
    text-align: center;
    color: #E0D3C6;
    /* Ensure title is styled as per the design */
}

.custom-light-color {
    color: #E0D3C6;
}

.custom-dark-color {
    color: #1D2228;
}

.bg-light-color {
    background-color: #D4CFCA;
}

.bg-lighter-dark-color {
    /* background-color: #6c7888; */
    /* background-color: #331a24; */
    background-color: #f2faff;
}

/* ----- Portfolio Styling  -----*/
.portfolio-background {
    background-color: #1D2228;
}

/* ----- Portfolio Grid -----*/

#portfolio .portfolio-item-main {
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 100%;
    /* Ensure that all items have the same height */

    /* Adjust the following properties as needed for caption alignment */
    justify-content: center;
    align-items: center;
}

.portfolio-caption {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#portfolio img {
    border-radius: 10px;
}

#experience img {
    border-radius: 10px;
}

.portfolio-item .portfolio-link,
.portfolio-item-main .portfolio-link {
    position: relative;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
    /* Add the transition here */
}


.portfolio-hover-content {
    transform: scale(1);
    /* Set the initial scale */
}

/* Increase the scale on hover for portfolio item links */
.portfolio-item .portfolio-link:hover,
.portfolio-item-main .portfolio-link:hover {
    transform: scale(1.05);
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover,
#portfolio .portfolio-item-main .portfolio-link .portfolio-hover {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;


    /* background: rgba(255, 200, 0, 0.9); */
    align-items: center;
    justify-content: center;
    opacity: 0;
}


#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    font-size: 1.25rem;
    color: white;
}

#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
    opacity: 1;
}

/* -------- IMAGE CONTAINER -------- */


/* Hide the GIF by default */
.image-container .gif,
.image-container-small .gif,
.image-container-banner .gif {
    display: none;
    height: auto;
}

/* Show the GIF when hovering over the image container */
.image-container:hover .gif,
.image-container-small:hover .gif,
.image-container-banner:hover .gif {
    display: block;
}

.image-container:hover .image,
.image-container-small:hover .image,
.image-container-banner:hover .image {
    display: none;
}

.image-container,
.image-container-small,
.image-container-banner {
    /* Set a default height here */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.image-container img,
.image-container-small img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Scale the image to cover the container */
}

.image-container-banner img {
    width: 50%;
    height: auto;
    object-fit: cover;
    /* Scale the image to cover the container */
}

/* -------- IMAGE CONTAINER -------- */



#portfolio .portfolio-item .portfolio-caption {
    padding: 1rem;
    text-align: center;
}

#portfolio .portfolio-item-main .portfolio-caption-main {
    padding: 1.5rem;
    text-align: center;
}


#portfolio .portfolio-item .portfolio-caption-heading {
    font-size: 1.5rem;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    margin-bottom: 0;
}

#portfolio .portfolio-item-main .portfolio-caption-heading {
    font-size: 1.5rem;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 700;
    margin-bottom: 0;
}

#portfolio .portfolio-item .portfolio-caption-subheading {
    font-style: italic;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#portfolio .portfolio-item-main .portfolio-caption-subheading {
    font-style: italic;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.portfolio-modal .modal-dialog {
    margin: 1rem;
    max-width: 100vw;
}

.portfolio-modal .modal-content {
    padding-top: 6rem;
    padding-bottom: 6rem;
    text-align: center;
}

.portfolio-modal .modal-content h2,
.portfolio-modal .modal-content .h2 {
    font-size: 3rem;
    line-height: 3rem;
}

.portfolio-modal .modal-content p.item-intro {
    font-style: italic;
    margin-bottom: 2rem;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.portfolio-modal .modal-content p {
    margin-bottom: 2rem;
}

.portfolio-modal .modal-content ul.list-inline {
    margin-bottom: 2rem;
}

.portfolio-modal .modal-content img {
    margin-bottom: 2rem;
}

.portfolio-modal .close-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    background-color: transparent;
}

.portfolio-modal .close-modal:hover {
    opacity: 0.3;
}

/* ----- Coontact section  -----*/

.contact-section {
    padding-bottom: 1rem;
    background-image: url('images/TheGreatOaks_2.png');
    /* Replace with the actual path to your background image */
    background-size: cover;
    /* Adjust the background size to cover the entire area */
    background-repeat: no-repeat;
    /* Prevent the background image from repeating */
    background-position: center center;
    /* Center the background image */
}

.contact-section h2 {
    color: #D4CFCA;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    font-family: 'Titillium', sans-serif;
}

.contact-section .card {
    border: 0;
    border-bottom: 0.25rem solid #405E81;
}

.contact-section .card h4,
.contact-section .card .h4 {
    font-size: 0.8rem;
    font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

.contact-section .card hr {
    opacity: 1;
    border-color: #405E81;
    border-width: 0.25rem;
    width: 3rem;
}

.contact-section .social {

    display: flex;
    justify-content: center;
}

.social a {
    display: inline-block;
    margin: 0 10px;
    /* Adjust the margin as needed */
    transition: transform 0.3s ease-in-out;
    /* Apply smooth transition to the transform property */
}

.social a:hover {
    transform: scale(1.2);
    /* Increase the scale to make the icons pop out */
}

.contact-section .social a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    background-color: #D4CFCA;
    border-radius: 100%;
    color: #D4CFCA;
}

.contact-section .social a:hover {
    color: rgba(255, 255, 255, 0.5);
}

.contact-section .social a:active {
    color: #D4CFCA;
}

/* Project Pages */


.project {
    color: #D4CFCA;
    padding-top: 80px;
    text-align: left;
}

.project .desc {

    font-size: 20px;
}

.project .centered-content {
    text-align: center;
}

.project .centered-content p {
    text-align: left;
    font-size: 17px;
    margin-top: 80px;
}

.project .centered-content-two p {
    text-align: left;
    font-size: 17px;
    margin-top: 40px;
}

.project p {
    font-size: 17px;
}

.project-image {
    max-width: 100%;
    /* Ensures the image scales down within its parent */
}

.xbones {
    font-family: xbones;
}

.xbones-yellow {
    font-family: xbones;
    color: #F8C53A;
}

.project .small-container {
    max-width: 70%;
}

.project .small-container-two {
    max-width: 80%;
}


.background-light {
    background-color: #D4CFCA;
    color: #1D2228;
}

.image-with-padding {
    margin-right: 10px;
    /* Adjust the value to control the right padding */
}

.embed-responsive iframe {
    width: 66%;

    /* Set the width to 100% for small screens */
}



/* 
@media (max-width: 1200px) {
    .embed-responsive iframe {
        width: 100%;
    }
} */

@media (max-width: 768px) {
    .embed-responsive iframe {
        width: 100%;
        height: 400px;
        /* Set the width to 100% for small screens */
    }
}