/* Removes white space around edges*/
html{
    overflow-x: hidden;
    margin: 0px;
}
/* Removes white space around edges and sets cursor for body*/
body{
    overflow-x: hidden;
    margin: 0px;
    cursor: url('imgs/Normal_Select.png'), auto;
}
/* Set Link Cursor*/
a{
    cursor: url('imgs/Link_Select.png'), auto;
}
/* Set Button Cursor*/
button{
    cursor: url('imgs/Link_Select.png'), auto;
}
.btn, .thumb-outline{
    cursor: url('imgs/Link_Select.png'), auto;
}


/* Styleing for the key art */
.cover-page {
    height: 100vh; /* Full height */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url("imgs/PinshotStudiosHead.webp") no-repeat center center;
    background-color: #f8f9fa; 
    background-size: cover;
    background-attachment: fixed;
}

.pulsing-arrow {
    font-size: 2rem;
    color: white;
    animation: pulseDown 1.5s ease-in-out infinite;
  }
  
  @keyframes pulseDown {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    50% {
      transform: translateY(10px);
      opacity: 0.6;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
.cover-page-whatliesbelow{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url("imgs/WLBBackground.webp") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

.cover-page-sixtyseconds{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url("imgs/SSBackground.webp") no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

.cover-page-collapsed3d{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url("imgs/Collapsed3D-bg.webp") center center;
    background-repeat: repeat;
    background-attachment: fixed;
}

.cover-page-collapsed{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url("imgs/CollapsedBackground.webp") center center;
    background-repeat: repeat;
    background-attachment: fixed;
}

.cover-page-card{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url("imgs/CardVsCardBackground3.webp") center center;
    background-attachment: fixed;
    background-repeat: repeat;
}

.section-models{
    background: url("imgs/DoorsBlurred.webp") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;
    color: white;
}


.section-art{
    background: url("imgs/UnderwaterSceneDark.webp") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;
    color: white;
}

.section-animation{
    background: url("imgs/CosmosBackgroundDark.webp") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;
    color: white;
}

.section-software{
    background: url("imgs/TreeBrowserBackground.webp") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;
    color: white;
}

.section-video-games{
    background: url("imgs/VideoGamesBackground.webp") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;
    color: white;
}

.section-screenplays{
    background: url("imgs/scripts-bg.webp") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;
    color: white;
}

.section-other{
    background: url("imgs/BG.webp") no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    height: auto;
    color: white;
}

.btn-cg{
    background-color: #1abcc9;
    color: #fff;
    border:solid 1px #1abcc9;
}

.btn-cg:hover{
    background-color: #0f6f76;
    border: solid 1px white;
}

.btn-turbo{
    background-color: #fe8133;
    color: #fff;
    border: solid 1px #fe8133;
}

.btn-turbo:hover{
    background-color: #8e481c;
    color: #fff;
    border: solid 1px white;
}

.btn-white{
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
    border: solid 1px white;
}

.btn-white:hover{
    background-color: white;
    color: black;
    border: solid 1px white;
}

.wlb-description{
    background-color: black;
    color: white;
}
.wlb-explore{
    background: url("imgs/wlb_explore_background.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}
.wlb-npc{
    background: url("imgs/wlb-npc-background.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.wlb-missions{
    background: url("imgs/wlb-missions-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.wlb-delve{
    background: url("imgs/wlb-delve-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.wlb-build{
    background: url("imgs/wlb-build-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.ss-description{
    background-color: white;
    color: black;
}

.ss-level{
    background: url("imgs/60SecondsLevel-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.ss-avoid{
    background: url("imgs/60SeocndsAvoid-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.ss-customize{
    background: url("imgs/60SecondsCutsomize-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.cd-torch{
    background: url("imgs/Collapsed3DTorch-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.cd-obstacles{
    background: url("imgs/Collapsed3DObstacles-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.cd-avoid{
    background: url("imgs/Collapsed3DAvoid-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.cd-collectables{
    background: url("imgs/Collapsed3DCollectables-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.cp-levels{
    background: url("imgs/CollapsedLevels-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.cp-traps{
    background: url("imgs/CollapsedTraps-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.cp-levers{
    background: url("imgs/CollapsedLevers-bg.webp") no-repeat center center;
    background-attachment: fixed;
    height: auto;
    color: white;
}

.card-all{
    background: url("imgs/CardVsCardBackground3.webp") center center;
    background-attachment: fixed;
    height: auto;
    color: white;
    background-repeat: repeat;
}

.gameplay{
    background-color: white;
    color: black;
}

.screenplay-shadow{
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.4);
}

.scrollbox{
    max-height: 500px;
    overflow-y: auto;
}

/*Hover Effects */

.thumb-hover{
    transition: transform 300ms ease-out;
    transition: box-shadow 0.3 ease;
 }

.thumb-hover:hover{
    transform: scale(1.1);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0, 0.2);
 }

 .thumb-outline{
    border: solid 2px rgba(255, 255, 255, 0);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }

 .thumb-outline:hover{
    border: solid 2px rgba(255, 255, 255, 1);
 }


.collect{
    height: 50vh;
    background: url("imgs/UnderwaterSceneEdited2.webp") no-repeat center center;
}
/* 3D model Product Styling */
.models{
    height: 50vh;
    background: rgb(38, 38, 38);
}
/* Full height */
.cover-content {
    max-width: 700px;
    display: flex;
    flex-direction: column;
}

/* Text and Content Styling */
.cover-title {
    font-family: "roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: thin;
    color: white;
 } 
/* For Mobile Responsive Design */
 @media (max-width: 576px){
    .cover-title{
        font-size: 7rem;
        font-weight: 300;
    }
    .new-font{
        font-size: 1rem;
    }
 }

 @media (max-width: 768){
    .mb-padding{
        padding: 13px;
    }
 }
 /* Font Styling */
.new-font{
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
    color: white;
}
/* Footer Styling */
.footer-explore{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 25px;
    font-style: normal;
    
}

/* Paragraph Text Color */
.p-text{
    color: black;
}

/* Navigation Styling */
.navbar navbar-expand-lg bg-body-tertiary {
    background-color: rgba(0, 0, 0, 0) !important;
}

.nav-item:hover{
    background-color: black;
    color: white;
}

.nav-link:hover{
    color:white;
}

/* Button Styling */
.btn-outline-primary{
    border-color: white;
    color: white;
}

.btn-outline-primary:hover{
    background-color: white;
    color: black;
}

.btn-outline-primary-blue{
    border-color: #0d6efd;
    color: #0d6efd;
}

.btn-outline-primary-blue:hover{
    background-color: #0d6efd;
    color: white;
}

.btn-outline-primary-black{
    border-color: black;
    color: black;
}

.btn-outline-primary-black:hover{
    background-color: black;
    color: white;
}
/* Glassmorphism Effect for Intro Section */
.intro{
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.17);
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.7px);
    -webkit-backdrop-filter: blur(4.7px);
    border: 1px solid rgba(255, 255, 255, 0.33);
}

.glass-card {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 12px 6px rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
    color: white;
  }
  
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
);
}

.glass-card:hover{
    background: rgba(255, 255, 255, 0.551);
}

.glass-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
);
}


.max-size{
    max-width: 500px;
}

/* Video Game Cover */
.vg-cover{
    background-size: cover;
}

/* Hover Effects for Products */
.zoom {
transition: transform .2s; /* Animation */
}

.zoom:hover {
transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* Image Carasouel Styling */
.carousel {
    max-width: 100%;  /* Set maximum width to 80% of the parent container */
    margin: 0 auto;  /* Center the carousel horizontally */
    margin: 24px;
  }

.carousel-inner img {
width: 50%; /* Ensures the image fits within the carousel */
height: auto; /* Keep aspect ratio intact */
}

.white-text{
    color: white !important;
}

/* Change font size for mobile */
@media (max-width: 700px){
.mobile{
    font-size: 50px;
}
}

/* Product rows and Columns */
.container-g, .row-g, .col-g {
    border: 1px solid rgba(0, 0, 0, 0.2); /* Add a light border to rows and columns */
  }
.container-w, .row-w, .col-w {
border: 1px solid rgb(255, 255, 255); /* Add a light border to rows and columns */
}
.row-g, .row-w {
margin-bottom: 10px; /* Space between rows */
}
.col-g, .col-w {
padding: 20px; /* Add padding inside columns */
} 

.img-max{
    max-width: 750px;
    width: 100%;
}

/* Product Card Animation */
.card-float{
    transition: transform 0.5s;
}

.card-float:hover{
    transform: scale(1.1);
}

/* Responsive Padding for Modals */
@media (max-width: 700px){
    .model-controls{
        padding-left: 13px;
    }
}

@media (max-width: 700px){
    .model-buttons{
        padding-top: 13px;
    }
}

/* Software font size */
.software-size{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
    font-size: 24px;
    max-width: 1000px;
}

.img-border-style{
    border-radius: 13px;
}

.p-code-style{
    font-size: 24px; 
    max-width: 500px
}
/* Background images for key art */
#code-style{
    background-image: url(imgs/TreeBrowserGreenBackground.webp);
}

#digital-style{
    background-image: url(imgs/UnderwaterSceneEdited2.webp);
    background-position: center;
}

#videogames-style{
    background-image: url(imgs/WLBBackground.webp);
    background-position: center;
}
/* Home text color and font size */
.homepage-section-h2{
    color: white;
    font-size: 9.2rem;
}

.homepage-section-h2-small{
    font-size: 7.2rem;
}

/* Nav Title Styling */
.nav-title {
    font-family: "Big Shoulders Stencil", sans-serif;
    font-optical-sizing: auto;
    font-size: 2rem;
    font-weight: 400;
    font-style: normal;
    color: black;
    text-decoration: none;
 } 

 @media (max-width: 768px){
    .dropdown{
        width: auto;
        min-width: 24px;
        max-width: 25vw;
        left: auto;
        right: 0;
    }
 }

 .dropdown-menu-bk{
    background-color: black;
    color: white;
    border-radius: 0px;;
 }

 .dropdown-item{
    color: white;
 }

/* Call to Action Styling */
 #cta{
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    font-size: clamp(13px, 5vw, 24px);
     background-color: rgb(0, 151, 252);
     color: white;  
     text-decoration: none;
 }
 #cta a{
     text-decoration: none;
     color: white;
 }

 #back-to-top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Hidden by default */
    z-index: 1000; /* Ensure it is above other content */
 }