/* Typography */
@import 'typography.css';

/* Colors and Gradients */
@import 'colors.css';

/* Buttons */
@import 'buttons.css';

/* Animations */
@import 'animations.css';

/* Dark Mode */
@import 'dark.css';

/* Scroll Bars */
@import 'scrollbars.css';

/* Sizing */
@import 'sizing.css';

/* Viewport Styling */
@import 'mobile.css';

/* Bootstrap Icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* Custom Styling */

/* General */
.top-icon { position: fixed; top: 20px; left: 20px; padding: 0 !important;  z-index: 10000; }
.top-icon a { color: transparent; font-weight: 400; font-size: 1.2em; padding-right: 10px; padding-bottom: 5px; border-radius: 15px; transition: 0.35s ease; font-family: 'Playfair Display', serif !important; }
.top-icon a:hover { color: #000; background-color: #fff; box-shadow: -4px 4px 0 0 #000; }
.top-icon img {  width: auto; max-height: 50px; background-color: #000; padding: 5px; border-radius: 15px; box-shadow: -4px 4px 0 0 #000; }

.home-sub-nav { background-color: transparent; position: fixed; bottom: 9%; left: 0; z-index: 1040; }
.home-sub-nav button { padding: 0.5em 1em; }
.mobile-filter-container { background-color: transparent; position: fixed; bottom: 9%; left: 0; z-index: 1040; }
.mobile-filter-container button { padding: 0.5em 1em; }

.mobile-subnav { border: none !important; border-radius: 0 !important; }

.cursor-pointer { cursor: pointer; }
.my-badge { padding: 5px 10px; border-radius: 50px; font-size: 0.8em; display: inline-block; }
.brand-badge { background-color: #fff;  border-radius: 50px; width: 25%; position: absolute; bottom: 25px; right: 25px; }
.wordpress { background-color: #3858e9; color: #fff; font-weight: bold; }
.trans-image { opacity: 0; }
.overflow-y-scroll { overflow-y: scroll; }
.rounded-35 { border-radius: 35px !important;}
.rounded { border-radius: .75rem !important; }
.inner-shadow { box-shadow: inset 0 5px 10px 5px rgba(0,0,0,0.3); }
.inner-shadow-right { box-shadow: inset 10px 0 5px -5px rgba(0,0,0,0.3); }
.inner-shadow-left { box-shadow: inset -10px 0 5px -5px rgba(0,0,0,0.3); }
.home-banner { min-height: 100vh; }
.work-overlay { width: 50%; }
.bg-grayscale { backdrop-filter: grayscale(100%); transition: 0.35s ease;}
.bg-grayscale:hover { backdrop-filter: grayscale(0%) blur(5px); transition: 0.35s ease; }
.work-parallax p {margin: 0 !important;}
.work-parallax img { background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)); }
.no-padding { padding: 0 !important; }
.transparent { opacity: 0; }

.posts-drop-shadow {
    box-shadow: -12px 22px 18px 0 rgba(0,0,0,0.25);
}
.post-link {
    transition: 0.35s ease;
    font-weight: bold;
    background-color: #f7941d;
}
.post-link:hover {
    background-color: #000;
    color: #fff !important;
}
.post-sub-heading {
    font-size: .75em;
}

/* Modals */
.work-modal .modal-header { border-radius: 0 !important; border: none !important;}
.modal-lg { max-width: 1200px !important; }
.my-modal-lg { max-width: 90% !important; }

/* Background Images */
.dqm { background-image: url(../images/DQM-Render-82324.jpg); background-position: center;  background-repeat: no-repeat; }
.bg-dqm { background-image: url(../images/DQM-Project-Cover.jpg); background-size: cover; background-position: top, center; background-repeat: no-repeat; background-attachment: fixed; }
.bg-fpt { background-image: url(../images/FPT-Project-Cover.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
.bg-dtf { background-image: url(../images/DTF-Project-Cover.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
.bg-the52nd { background-image: url(../images/The52nd-Project-Cover.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
.work-bg { background-image: url(../images/Work-BG-Exp.png); background-size: cover; background-position: left bottom; background-repeat: no-repeat; }
.portfolio-bg { background-image: url(../images/Portfolio-BG-Exp.png); background-size: contain; background-position: right bottom; background-repeat: no-repeat; background-attachment: fixed; }
.DQM-bg { background-image: url(../images/DQM-BG.png); background-size: contain; background-position: right bottom; background-repeat: no-repeat; background-attachment: fixed; }
.my-bg { background-image: url(../images/MY-BG.png); background-size: contain; background-position: right bottom; background-repeat: no-repeat; background-attachment: fixed; }

.cust-carousel-btn img { max-width: 40px; }
.sun-icon, .moon-icon { max-width: 40px; padding: 10px; border-radius: 50%; }
.moon-icon { background-color: #f7f7f7; }
.sun-icon { background-color: #333; }
.light-dark-toggle { position: fixed; bottom: 1.5rem; left: -7.7rem; height: 2.5rem;  z-index: 1030; font-family: 'Poppins', sans-serif; }
#toggle-dark { font-weight: 600; padding: 10px 0 10px 2rem; cursor: url('../images/Eye-Cur.cur'), pointer; }
#toggle-light { font-weight: 600; padding: 10px 0 10px 2rem;  cursor: url('../images/Eye-Cur.cur'), pointer; }
.border-rounded { border-radius: 15px !important; }
.box-shadow { box-shadow: 0 12px 18px -6px rgba(0,0,0,0.3); }

.bg-hero { background-color: #fff; }
.bg-trans { background-color: rgba(0,0,0,0); }
.bg-screen { background-image: radial-gradient(#333, #111);	padding: 25px; border: none; }
.bg-light {	background: #ebebeb !important; }

hr.bg-gold { height: 2px; }
.capability-graphic { width: 51vw; height: auto; }
.ywd-logo { width: 10vw; height: auto; }
/* .navbar-brand { width: 74%; } */

.rounded-top { border-top-right-radius: 0.75rem !important; border-top-left-radius: 0.75rem !important; }
.rounded-bottom { border-bottom-right-radius: 0.75rem !important; border-bottom-left-radius: 0.75rem !important; }
.designs { min-height: 350px; max-height: 350px; width: 100%; object-fit: cover; transition: 0.35s ease; box-shadow: 0 10px 12px -4px rgba(0,0,0,0.3); }
.designs:hover { opacity:0.5; border-radius: 0.75rem; border:10px solid #252525; box-shadow: 0 5px 18px -6px rgba(0,0,0,0.5); }
.filter-container { z-index: 1000 !important;}
.skill-tag.active { background-color: #ebebeb !important; color: #000!important; }

.carousel-control-next, .carousel-control-prev {
    bottom:auto !important;
    width: 5% !important;
}
#tgg-images .modal-content, #tgg-images .modal-header {
    background-color: transparent !important;
    border: none !important;
    border-radius: .75rem !important;
}
#tgg-images .modal-body { padding: 0 !important; }
.about-img { width: 50%; height: auto; border-radius: 35px; border: 5px solid #fff; box-shadow: 0 0 0 10px #f7941d, 0 0 0 20px #000, 0 12px 18px 25px rgba(0,0,0,0.3); }
.border { border-width: 3px !important;}

.social { font-size: calc( 1em + .75vw); line-height: 0; }


.mark-info div { color: #252525; transition: 0.35s ease; }
.mark-info div:hover { color: #fff; border-radius: 0.75rem; }
.lang-info div { color: #252525; transition: 0.35s ease; }
.lang-info div:hover { background-color: #000; color: #fff !important; }

.progress-bar { background-color: #666 !important; }
.nav-shadow { box-shadow: 0 10px 10px rgba(0,0,0,0.25); }
.read-it { cursor: pointer; transition: 0.35s ease; }
.read-it:hover { color: #f7941d; }
.read-full-page { cursor: pointer; transition: 0.35s ease; padding: 5px 15px; background-color: #252525; color: #f7941d; }
.read-full-page:hover { color: #fff; }
.easter-egg { color: transparent; transition: 0.7s ease; cursor: pointer; }
.easter-egg:hover { color: #000; box-shadow: 0 0 5px 5px rgba(0,0,0,0.3); padding: 15px; border-radius: 15px; }
.found-me { color: #000 !important; line-height: 50px; }

.hidden { display: none; }

.launch-images img {
    transition: 0.5s ease;
}
.launch-images img:hover {
    box-shadow: 0 15px 20px -4px rgba(0,0,0,0.5) !important;
}

/* Form Styling */
fieldset { border: 3px solid #252525 !important; }
legend { font-size: calc(1.5em + .75vw); font-family: 'Poppins', sans-serif !important; }
label { font-family: 'Poppins', sans-serif !important; }
.contact-input { width: 100% !important; background-color: transparent; border-bottom: 2px solid #000; border-top: none; border-right: none; border-left: none; color: #000; font-family: 'Poppins', sans-serif !important; font-size: 1em; font-weight: 400; padding: 10px 0; }
.hear-about-input { margin-left: 25px; accent-color: #f7941d; }
#easter-egg { accent-color: #f7941d; }

#mobile-slider {
    max-width: 400px;
}
.desktop-toggle.active {
    background-color: #000 !important; color: #fff !important; padding: 0.5em;
}
.mobile-toggle.active {
    background-color: #000 !important; color: #fff !important; padding: 0.5em;
}