@import url("https://use.typekit.net/mes1kxr.css");
* {
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow: auto;
overflow-y: scroll;
}
body.modal-open {
overflow: hidden;
}
body.menu-open {
overflow: hidden;
}
button, a, input {
touch-action: manipulation !important;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease-in-out, opacity 0.5s ease-in-out;
}
.link {
text-decoration: none;
color: #C5A459;
}
.link:hover {
color: #878F93;
}
.div-button {
width: 100%;
height: 100%;
}
.full-img {
width: 100%;
margin: 0;
padding: 0;
}
.spacer {
display: block;
position: absolute;
left: 0;
top: 0;
height: 90px; /* height of the nav */
margin-top: -90px; /* height of the nav */
visibility: hidden;
}
@media screen and (max-width: 700px) {
.spacer {
height: 50px; /* height of the nav */
margin-top: -50px; /* height of the nav */
}
}
.short-hr {
display: none;
height: 2px;
color: #000000;
background: #000000;
font-size: 0;
border: 0;
margin: 0;
width: 30px;
margin: 20px 0 0 0;
}
@media screen and (max-width: 800px) {
.short-hr {
display: block;
}
}
.logo::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 18px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 500;
}
.logo2::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 18px;
margin-top: 3px;
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease, visibility 0s linear 0s;
transition-delay: 0.6s;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 500;
}
.logo2.is-faded::after {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.tes::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 250px;
height: 125px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 500;
}
.jrd-logo::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 85px;
height: 20px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin: 5px 0;
display: none;
}
@media screen and (max-width: 850px) {
.jrd-logo::after {
display: block;
}
}
.footer-logo::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 20px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin: 5px 0;
}
@media screen and (max-width: 850px) {
.footer-logo::after {
content: ""; /* Keep it empty but override styles */
width: 0;
height: 0;
background: none;
display: none !important;
}
}
.email {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.email::before {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
}
.web::before {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
}
.brand::before {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
}
.photo::before {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
}
.video::before {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 10px;
}
.fade {
opacity: 0;
transform: translateY(25px); /* Move elements down by 20px initially */
transition: color 0s ease-in, opacity 0.8s ease-in, transform 0.8s;
transition-delay: 0.05s; /* Adds a 0.05 second delay before starting all transitions */
}
.fade.bg {
transition: background-color 0.3s ease, color 0s ease-in, opacity 0.5s ease-in, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1);
}
@media screen and (max-width: 500px) {
.fade.not-mobile {
transform: translateY(0px); /* Move elements down by 20px initially */
opacity: 100;
transition: color 0s ease-in, opacity 0.5s ease-in, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) !important;
transition-delay: 0 !important;
}
}
.fade.fade-only {
opacity: 0;
transform: translateY(0px) !important;
}
.delay {
transition-delay: 0s, 0.1s, 0.1s !important;
}
.delay-2 {
transition-delay: 0s, 0.2s, 0.2s !important;
}
.delay-3 {
transition-delay: 0s, 0.3s, 0.3s !important;
}
.delay-4 {
transition-delay: 0s, 0.4s, 0.4s !important;
}
.delay-5 {
transition-delay: 0s, 0.5s, 0.5s !important;
}
.delay-6 {
transition-delay: 0s, 0.6s, 0.6s !important;
}
.delay-7 {
transition-delay: 0s, 0.7s, 0.7s !important;
}
.delay-8 {
transition-delay: 0s, 0.8s, 0.8s !important;
}
.fade-words .fade-word {
opacity: 0;
display: inline-block;
animation: wordFade 0.8s ease forwards;
animation-delay: calc(var(--i) * 0.1s);
animation-play-state: paused;
}
.fade-words.visible .fade-word {
animation-play-state: running;
}
@keyframes wordFade {
to {
opacity: 1;
transform: translateY(0);
}
}
.fade.visible {
opacity: 1;
transform: translateY(0); /* Move back to original position */
}
.fade.visible.transp {
opacity: 50%;
}
.parallax {
position: relative;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 500px;
will-change: background-position, transform;
}
/* Dark Gradient Overlay */
.parallax.dark::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.25), rgb(0, 0, 0));
pointer-events: none; /* Ensures clicks go through to content */
z-index: -1;
}
/* Darker Gradient Overlay */
.parallax.darker::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75), rgb(0, 0, 0));
pointer-events: none; /* Ensures clicks go through to content */
z-index: -1;
}
/* Light Gradient Overlay */
.parallax.light::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgb(255, 255, 255));
pointer-events: none; /* Ensures clicks go through to content */
z-index: -1;
}
@media (max-width: 1024px) {
.parallax {
background-attachment: scroll; /* Prevents issues on mobile */
}
}
.button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 5px;
padding: 10px 15px;
min-width: 100px;
margin: 17px 0;
font-family: "area-normal", sans-serif;
font-weight: 300 !important;
font-size: 13px;
letter-spacing: 0.5px;
border-radius: 100px;
background-color: transparent;
color: #ffffff;
border: none;
text-transform: uppercase;
text-decoration: none;
}
.button svg {
width: 20px;
margin-right: 3px;
transition: 0.3s ease-in-out;
}
.button.light {
color: #ffffff;
border: none;
}
.button.light svg {
fill: #ffffff;
width: 20px;
margin-right: 3px;
}
.button:hover {
cursor: pointer;
}
.button:hover svg {
margin-right: 0px;
margin-left: 3px;
}
.back-to-top {
gap: 5px;
font-family: "freight-display-pro", serif;
text-transform: none;
font-weight: 400;
font-size: 16px;
letter-spacing: 0.5px;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
width: 100%;
border: none;
border-radius: 0;
display: flex !important;
flex-direction: row;
justify-content: center;
align-items: center;
height: 50px;
margin: 0;
padding: 0;
outline: none;
background-color: #000000;
color: #ffffff;
cursor: pointer;
}
.back-to-top svg {
height: 15px;
fill: #ffffff;
stroke: 0;
transition: all 0.3s ease-in-out;
transform: translateY(1px);
margin: 0;
}
.back-to-top:hover {
color: #C5A459;
}
.back-to-top:hover svg {
fill: #C5A459;
transform: translateY(-1px);
margin: 0;
}
h1 {
font-family: "freight-display-pro", serif;
font-size: 75px;
letter-spacing: 0.5px;
line-height: 75px;
font-weight: 200 !important;
font-style: normal;
padding: 0;
margin: 0;
transition: color 0.8s ease-in-out;
}
h1 span.highlight {
font-style: italic;
}
h1.small {
font-size: 20px;
}
h1.bold {
font-weight: 500 !important;
}
h1.it {
font-style: italic;
}
h1.sans {
font-family: "area-normal", sans-serif;
font-style: normal;
font-size: 28px;
}
@media screen and (max-width: 600px) {
h1 {
font-size: 60px;
line-height: 65px;
}
}
@media screen and (max-width: 400px) {
h1 {
font-size: 50px;
line-height: 55px;
}
}
h1.wide, h2.wide, h3.wide, h4.wide, h5.wide {
width: 100%;
text-align: center;
}
h1.wide.left, h2.wide.left, h3.wide.left, h4.wide.left, h5.wide.left {
text-align: left;
}
h2 {
font-family: "freight-display-pro", serif;
font-size: 50px;
font-weight: 500 !important;
font-style: normal;
line-height: 55px;
padding: 0;
margin: 0;
transition: color 0.8s ease-in-out;
}
h2.sans {
font-family: "area-normal", sans-serif !important;
font-weight: 600 !important;
font-style: normal;
font-size: 24px;
line-height: 40px;
}
h2.italic {
font-style: italic !important;
font-weight: 200 !important;
}
@media screen and (max-width: 400px) {
h2 {
font-size: 40px;
line-height: 50px;
}
h2.sans {
font-size: 22px;
line-height: 32px;
}
}
h3 {
font-family: "field-gothic-wide", sans-serif;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 1px;
font-weight: 400;
font-style: normal;
margin: 0;
line-height: 25px;
}
h3 span {
font-family: "freight-display-pro", serif;
font-style: italic;
letter-spacing: 0px;
}
@media screen and (max-width: 400px) {
h3 {
font-size: 12px;
line-height: 22px;
}
}
h4 {
font-family: "area-normal", sans-serif;
color: #000000;
font-weight: 300;
font-style: normal;
text-transform: uppercase;
font-size: 15px;
line-height: 30px;
letter-spacing: 2px;
margin: 0;
}
h4.sans {
font-family: "area-normal", sans-serif;
}
h4 span {
font-family: "freight-display-pro", serif;
font-style: normal;
}
h5 {
font-family: "area-normal", sans-serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 0.75px;
}
p {
font-family: "freight-text-pro", serif !important;
font-size: 16px;
line-height: 26px;
margin: 0;
font-weight: 400 !important;
font-style: normal;
letter-spacing: 0px;
}
p span {
font-weight: 800;
font-style: normal;
}
p .verse {
font-size: 22px;
line-height: 32px;
margin: 15px 0 0 0;
}
.center {
text-align: center;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
min-height: 500px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.hero.home {
background-image: url("../images/home-hero.jpg");
}
.hero.backstory-1 {
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgb(255, 255, 255)), url("../images/endurance-2.jpg");
background-position: top 50% left 20%;
height: 1100px;
}
.hero.backstory-1 h1 {
font-weight: 500 !important;
}
.hero.backstory-2 {
background-image: url("../images/nepal.jpg");
height: 1100px;
}
.hero.backstory-2 h1 {
font-weight: 500 !important;
}
.hero-content {
position: relative;
height: 100vh;
min-height: 500px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 0 100px 0;
}
.hero-content .button {
position: absolute;
width: 100%;
bottom: 75px;
left: 0;
margin-top: 30px;
}
.hero-content h2 {
font-family: "area-normal", sans-serif !important;
font-size: 22px !important;
line-height: 32px;
margin-top: 20px;
text-shadow: 0px 0px 100px rgba(0, 0, 0, 0.75);
}
@media screen and (max-width: 400px) {
.hero-content h2 {
font-size: 18px !important;
line-height: 28px;
}
}
.hero-content.light h1, .hero-content.light h2, .hero-content.light h3, .hero-content.light h4, .hero-content.light p {
color: #ffffff;
}
.hero-content.content-top {
justify-content: flex-start;
}
.hero-content br {
display: none;
}
@media screen and (max-width: 800px) {
.hero-content h2 {
margin-top: 30px;
}
.hero-content br {
display: block;
}
}
.home-intro {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding: 250px 0 200px 0;
margin: 0;
}
.home-intro svg {
width: 75px;
height: 75px;
margin: 0 0 10px 0;
fill: #C5A459;
}
.home-intro h3 {
margin-bottom: 20px !important;
}
.home-intro p {
font-size: 20px;
line-height: 30px;
max-width: 600px;
margin: 40px 0;
}
.home-intro .mbl-br {
display: none;
}
@media screen and (max-width: 600px) {
.home-intro .mbl-br {
display: block;
}
.home-intro .p-br {
display: none;
}
.home-intro p {
font-size: 18px;
line-height: 28px;
margin: 40px 0;
max-width: 400px;
}
}
.story-hero {
background-image: url("../images/endurance-2.jpg");
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.story-hero-content {
position: relative;
height: 100vh;
min-height: 500px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 0 100px 0;
}
.story-hero-content .button {
position: absolute;
width: 100%;
bottom: 75px;
left: 0;
margin-top: 30px;
}
.story-hero-content h1 {
font-size: 75px;
}
.story-hero-content h2 {
font-family: "area-normal", sans-serif !important;
font-size: 26px !important;
margin-top: 10px;
text-shadow: 0px 0px 100px rgba(0, 0, 0, 0.75);
}
.mission {
height: calc(100vh + 50px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.mission h3 {
margin: 0 0 25px 0;
}
.endurance-content {
display: flex;
width: 50%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.endurance-content h1 {
font-size: 50px;
line-height: 60px;
}
.endurance-content h2 {
font-size: 24px;
margin: 15px 0 0 0;
max-width: 500px;
}
.endurance-content p {
max-width: 500px;
margin: 15px 0 0 0;
}
.terra {
padding: 150px 0 200px 0;
}
.terra h1 {
line-height: 90px !important;
}
.terra h3 {
margin: 0 0 25px 0;
}
.terra .terra-intro {
max-width: 500px;
margin: 25px 0 100px 0;
}
@media screen and (max-width: 550px) {
.terra h1 {
font-size: 45px;
line-height: 65px !important;
}
}
@media screen and (max-width: 400px) {
.terra h1 {
font-size: 40px;
line-height: 60px !important;
}
}
@media screen and (max-width: 360px) {
.terra h1 {
font-size: 35px;
line-height: 55px !important;
}
}
.terra-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
list-style-type: none;
}
.terra-grid h2 {
font-size: 32px;
}
.terra-grid li {
height: auto;
min-height: 125px;
padding: 25px 0;
border-bottom: 0.5px solid #ffffff;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.terra-grid li.last {
border-bottom: none !important;
}
.terra-grid li span {
font-size: 24px;
font-weight: 400;
font-style: normal;
opacity: 50%;
}
@media screen and (max-width: 800px) {
.terra-grid {
grid-template-columns: 1fr;
}
.terra-grid li {
border-bottom: none;
padding: 0;
}
.terra-grid li.even {
border-bottom: 0.5px solid #ffffff;
padding: 0 0 25px 0;
}
.terra-grid li.odd {
height: auto;
padding: 25px 0 0 0;
}
}
@media screen and (max-width: 400px) {
.terra-grid h2 {
font-size: 28px;
}
.terra-grid span {
font-size: 20px !important;
}
}
.double-title {
margin: 20px 0;
}
.split-title {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.split-title p {
font-family: "area-normal", sans-serif;
font-size: 18px;
margin: 25px 0 0 0;
text-align: right;
letter-spacing: 0.25px;
line-height: 28px;
opacity: 80%;
}
@media screen and (max-width: 800px) {
.split-title p {
text-align: left;
}
}
.split-title.bottom {
align-items: flex-end;
}
@media screen and (max-width: 800px) {
.split-title.left {
flex-direction: column;
align-items: flex-start;
}
.split-title.left h4 {
text-align: left;
width: 100%;
margin-bottom: 15px;
}
}
@media screen and (max-width: 800px) {
.split-title.left-reverse {
flex-direction: column-reverse;
align-items: flex-start;
}
.split-title.left-reverse h4 {
text-align: left;
width: 100%;
margin-bottom: 15px;
}
}
@media screen and (max-width: 800px) {
.split-title.center {
flex-direction: column;
}
.split-title.center h3 {
text-align: center;
width: 100%;
}
}
.feature-title {
max-width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 0 20px 0px;
}
.feature-title h1 {
font-size: 16px;
}
.feature-title.sub {
margin: 0 0 30px 0;
}
@media screen and (max-width: 1080px) {
.feature-title.overflow {
margin: 0 0 20px 100px;
flex-direction: column;
align-items: flex-start;
}
.feature-title.overflow h2 {
margin: 0 0 5px 0;
}
}
@media screen and (max-width: 650px) {
.feature-title.overflow {
margin-left: 15px;
}
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin: auto;
padding-left: 100px !important;
padding-right: 100px !important;
background-size: cover;
background-repeat: no-repeat;
position: relative;
transition: background-color 0.5s ease, color 0.5s ease;
}
section h1, section h2, section h3, section h4, section p, section li, section a, section span {
transition: color 0.5s ease;
}
section.dark {
background-color: #000000;
color: #ffffff;
}
section.dark h1, section.dark h2, section.dark h3, section.dark h4, section.dark p, section.dark li, section.dark a, section.dark svg {
color: #ffffff !important;
}
section.light {
background-color: #ffffff;
color: #000000;
}
section.light h1, section.light h2, section.light h3, section.light h4, section.light p, section.light li, section.light a, section.light svg {
color: #000000 !important;
}
section.first {
padding-top: 150px;
}
section.no-pad {
padding-left: 0px !important;
padding-right: 0px !important;
}
@media screen and (max-width: 1200px) {
section {
padding-left: 25px !important;
padding-right: 25px !important;
}
}
@media screen and (max-width: 600px) {
section {
padding-left: 25px !important;
padding-right: 25px !important;
}
}
@media screen and (max-width: 450px) {
section {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
@media screen and (max-width: 350px) {
section {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
section.hero {
height: calc(100vh + 50px);
max-height: 1200px;
min-height: 800px;
margin: 0;
}
section.two-column {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding-top: 75px;
padding-bottom: 75px;
margin: auto;
}
.content {
width: 100%;
max-width: 1500px;
display: flex;
flex-direction: column;
z-index: 10;
}
.content.narrow {
max-width: 1200px;
}
.content.center {
align-items: center;
}
.content.nomax {
max-width: none;
}
.article {
max-width: 1350px;
}
.article img {
width: 100%;
margin: 25px 0 25px 0;
box-shadow: rgba(0, 0, 0, 0.05) 0 0 15px 0;
}
@media screen and (max-width: 800px) {
.article img {
margin: 15px 0 15px 0;
}
}
.article-content h1, .article-content h2, .article-content h3, .article-content p {
max-width: 700px;
width: 100%;
}
.article-content h1 {
margin: 20px 0;
}
.article-content h2 {
margin: 20px 0;
}
.article-content h3 {
color: #C5A459;
}
.article-content p {
margin: 25px 0;
font-size: 18px;
line-height: 30px;
margin: 20px 0;
}
.article-block {
display: flex;
flex-direction: column;
margin: 0 0 200px 0;
}
.article-block.left {
align-items: flex-start;
}
.article-block.right {
align-items: flex-end;
}
.article-block.center {
align-items: center;
text-align: left;
}
.article-block .mbl-br {
display: block;
}
@media screen and (max-width: 450px) {
.article-block .mbl-br {
display: none;
}
}
.overlap {
margin-top: -200px;
z-index: 20;
}
.two-column-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;
margin: 0;
gap: 75px;
}
.two-column-content.top {
align-items: flex-start !important;
}
.two-column-content.btw {
justify-content: space-between;
}
.two-column-content.reverse {
flex-direction: row-reverse;
}
.two-column-content .two-column-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 100%;
max-height: 600px;
margin: 0;
border-radius: 15px;
}
.two-column-content .two-column-img.services {
background-image: url("../images/home-hero.jpg");
height: 550px;
}
@media screen and (max-width: 850px) {
.two-column-content .two-column-img.services {
display: none;
}
}
.two-column-content .two-column-text {
width: 100%;
}
.two-column-content .two-column-text p span {
color: #000000;
}
@media screen and (max-width: 600px) {
.two-column-content .two-column-text {
align-items: center;
}
}
@media screen and (max-width: 900px) {
.two-column-content {
flex-direction: column-reverse !important;
margin: 0;
}
.two-column-content .two-column-text {
max-width: none;
}
.two-column-content .two-column-img {
max-width: none;
margin: 0 !important;
height: 500px;
}
}
.bk {
display: none;
}
@media screen and (max-width: 425px) {
.bk {
display: block;
}
}
.featured {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.featured h1 {
font-size: 70px;
line-height: 80px;
}
.featured h2 {
font-size: 25px;
line-height: 35px;
font-weight: 300 !important;
}
.featured-grid {
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: auto;
gap: 50px;
width: 100%;
}
.featured-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
min-height: 700px;
padding: 0;
margin: 0;
}
.featured-group .featured-img {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 25px;
height: 100vh;
min-height: 700px;
width: 100%;
min-width: 300px;
margin: 0;
border-radius: 0px;
transition: all 0.5s ease-in-out;
overflow: hidden;
}
.featured-group .featured-img.forge {
background-image: url(../images/feature-a.jpg);
}
.featured-group .featured-img.launch {
background-image: url(../images/feature-b.jpg);
}
.featured-group .featured-img.study {
background-image: url(../images/feature-c.jpg);
}
.featured-group .featured-img.build {
background-image: url(../images/feature-d.jpg);
}
.featured-group .featured-img h2 {
opacity: 75%;
font-family: "area-normal", sans-serif !important;
text-transform: uppercase;
font-size: 32px;
font-weight: 400 !important;
letter-spacing: 0px;
color: #ffffff;
text-align: center;
}
.featured-group .featured-img p {
opacity: 75%;
font-family: "area-normal", sans-serif !important;
text-transform: uppercase;
font-size: 20px;
font-weight: 400 !important;
letter-spacing: 0px;
color: #ffffff;
text-align: center;
}
.featured-group .featured-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100vh;
min-height: 700px;
padding-right: 100px;
padding-left: 75px;
transition: all 0.3s ease-in-out;
}
.featured-group .featured-info h1, .featured-group .featured-info h2, .featured-group .featured-info h3, .featured-group .featured-info h4, .featured-group .featured-info p {
max-width: 600px;
}
.featured-group .featured-info h2 {
margin: 20px 0;
}
.featured-group .featured-info hr {
height: 2px;
color: #000000;
background: #000000;
font-size: 0;
border: 0;
margin: 0;
width: 50px;
max-width: 50px;
margin-bottom: 30px;
}
.featured-group .featured-info p {
font-size: 15px;
max-width: 300px;
}
.featured-group .featured-info .featured-title {
display: flex;
flex-direction: row;
gap: 15px;
}
.featured-group .featured-info svg {
width: 50px;
stroke: #C5A459;
opacity: 0;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 500px) {
.featured-group .featured-info svg {
display: none;
}
}
@media screen and (max-width: 800px) {
.featured-group .featured-info {
max-width: none;
}
}
.featured-group.reverse {
flex-direction: row-reverse;
}
.featured-group.reverse .featured-info {
padding-left: 100px;
padding-right: 0px;
}
@media screen and (max-width: 1100px) {
.featured-group {
gap: 25px;
}
}
@media screen and (max-width: 800px) {
.featured-group {
flex-direction: column !important;
margin: 0;
}
.featured-group .featured-img {
max-width: none;
margin: 0 !important;
height: 450px;
}
}
.steps {
display: flex;
flex-direction: column;
margin: 100px 0;
text-align: center;
padding: 0 0 50px 0;
}
.steps h2 {
margin: 15px 0;
}
.steps button {
margin-top: 50px;
}
.process-content {
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
}
.process-steps {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 10px;
list-style-type: none;
width: 100%;
}
.process-steps.about-steps {
margin: 0;
}
.process-block {
width: 100%;
height: 100px;
padding: 15px 0;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 10px;
position: relative;
transition: all 0.3s ease-in-out;
text-align: left;
}
.process-block.about-block {
height: 75px;
padding-left: 25px !important;
max-width: 600px;
}
.process-block.about-block:hover {
background-color: transparent;
padding-left: inherit;
}
.process-block.about-block br {
display: none;
}
@media screen and (max-width: 440px) {
.process-block.about-block {
padding: 15px !important;
height: -moz-fit-content;
height: fit-content;
}
.process-block.about-block br {
display: block;
}
}
.process-block .num {
font-size: 28px;
font-style: italic;
font-weight: 300 !important;
width: 15px;
margin: 0 25px 0 0;
color: #C5A459;
}
.process-block svg {
fill: none;
stroke: #000000;
width: 40px;
transition: transform 0.3s ease;
position: absolute;
right: 50px;
}
@media screen and (max-width: 950px) {
.process-block svg {
width: 30px;
top: 30px;
}
}
@media screen and (max-width: 850px) {
.process-block svg {
width: 40px;
top: auto;
}
}
@media screen and (max-width: 450px) {
.process-block svg {
width: 30px;
top: 30px;
}
}
@media screen and (max-width: 345px) {
.process-block svg {
display: none;
}
}
.process-block:hover {
background: #F5F5F5;
padding-left: 25px;
}
@media screen and (max-width: 475px) {
.process-block:hover:hover {
background-color: transparent;
padding-left: inherit;
}
}
.process-block:hover svg {
transform: translateX(25px);
stroke: #C5A459;
}
.arrow-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 10px 0 0;
}
.arrow-btn.left {
justify-content: left;
}
.arrow-btn p {
font-family: "area-normal", sans-serif;
font-weight: 300;
letter-spacing: 0.5px;
font-size: 16px;
line-height: 26px;
margin: 0 15px 0 0;
transition: color 0.8s ease;
}
.arrow-btn svg {
overflow: visible;
}
.arrow-btn svg path {
stroke: #ffffff;
transition: stroke 0.5s ease, transform 0.3s ease;
overflow: visible;
}
.arrow-btn:hover p {
color: #C5A459 !important;
}
.arrow-btn:hover svg path {
stroke: #C5A459 !important; /* Change icon color on hover */
transform: translateX(5px);
}
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 900;
border-radius: 0px;
background-color: transparent;
transition: background-color 0.75s ease-in-out;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 30px;
}
.navbar.is-scrolled {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.container .inner-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
background: transparent;
width: 100dvw;
height: 50px;
z-index: 500;
}
.logo {
margin-top: 25px;
}
.logo, .logo2 {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: -moz-fit-content;
height: fit-content;
}
.logo svg, .logo2 svg {
overflow: visible;
height: 12px;
}
.container-2 {
display: flex;
align-items: center;
justify-content: center;
background: transparent;
width: calc(100vw + 2px);
position: fixed;
right: -1px;
height: 40px;
}
@media screen and (max-width: 600px) {
.container-2 {
display: none;
}
}
.desktop-menu {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style-type: none;
}
.desktop-menu li {
margin: 15px;
}
.desktop-menu a {
font-family: "area-normal", sans-serif;
letter-spacing: 0.75px;
font-size: 14px;
font-weight: 300;
color: #ffffff;
transition: color 0.3s ease-in-out;
}
.desktop-menu a:hover {
color: #C5A459;
}
.contact-btn {
position: fixed;
top: 55px;
right: 25px;
height: 30px;
width: 70px;
font-family: "area-normal", sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
color: #000000;
border-radius: 5px;
background-color: #F5F5F5;
border: none;
text-decoration: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.contact-btn:hover {
background-color: #000000;
color: white;
cursor: pointer;
}
.menu {
position: fixed;
left: 0;
top: -200%;
width: 500px;
height: 100dvh;
margin: 0;
padding: 100px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: rgba(255, 255, 255, 0);
font-family: "freight-display-pro", serif;
font-weight: 400;
display: none;
z-index: 100;
opacity: 0;
transition: 0.75s all ease-in-out;
}
.menu li {
opacity: 0;
transition: 0.5s all ease-in-out;
}
.menu .menu-contact {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
left: 0;
background-color: #000000;
width: 100%;
}
.menu .menu-contact button {
font-family: "area-normal", sans-serif;
font-size: 24px;
font-weight: 300;
letter-spacing: 1px;
background-color: transparent;
padding: 15px 20px;
color: #ffffff;
border: none;
display: inline-block;
text-decoration: none;
transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.menu .menu-contact:hover button {
color: #C5A459;
}
.menu.change {
top: 0;
background-color: rgb(255, 255, 255);
opacity: 100;
}
.menu-btn {
position: fixed;
top: 15px;
right: 25px;
display: flex;
width: 20px;
height: 20px;
cursor: pointer;
justify-content: center;
align-items: center;
z-index: 1000;
display: none;
}
.menu-btn-line {
content: "";
width: 100%;
height: 0;
}
.menu-btn-line::before,
.menu-btn-line::after {
content: "";
width: 100%;
height: 1.5px;
background-color: #000000;
position: absolute;
transition: all 0.5s ease-in-out;
}
.menu-btn-line::before {
transform: translateY(-4px);
}
.menu-btn-line::after {
transform: translateY(4px);
}
.menu-btn.change .menu-btn-line {
background: transparent;
box-shadow: none;
}
.menu-btn.change .menu-btn-line::before {
transform: rotate(-45deg);
background-color: #000000;
}
.menu-btn.change .menu-btn-line::after {
transform: rotate(45deg);
background-color: #000000;
}
.nav-list {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 25px;
margin: 50px 0 0 0;
padding: 0;
list-style-type: none;
text-align: left;
width: 100%;
padding: 25px;
}
.nav-list li {
color: #000000;
font-family: "area-normal", sans-serif;
font-weight: 300;
letter-spacing: 1px;
font-size: 26px;
text-decoration: none;
transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
transition-delay: 0s, 0.4s, 0.4s;
}
.nav-list li:hover {
color: #C5A459;
}
.telescope svg {
fill: #000000;
width: 80px;
height: 20px;
}
.full-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 850px) {
.full-logo {
align-items: flex-start;
margin-bottom: 20px;
}
}
.vertical-line {
border-left: 1px solid #000000; /* Thickness and color of the line */
height: 200px;
margin: 0px 50px 0px 50px;
}
@media screen and (max-width: 850px) {
.vertical-line {
display: none;
}
}
.footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 25px 50px;
background-color: #000000;
width: 100%;
z-index: 1;
border: none;
color: #ffffff;
min-height: 300px;
}
@media screen and (max-width: 600px) {
.footer {
padding: 25px 25px;
}
}
.footer-credit {
font-family: "area-normal", sans-serif;
font-size: 12px;
line-height: 15px;
font-weight: 400 !important;
letter-spacing: 1px;
text-transform: uppercase;
}
.footer-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 850px) {
.footer-content {
margin: 10px 0 0 0;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
}
.footer-content .footer-nav {
list-style-type: none;
margin: 0;
gap: 5px;
}
.footer-content .footer-nav h5 {
margin: 0;
font-size: 15px;
}
.footer-content .footer-nav li {
font-family: "area-normal", sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 35px;
letter-spacing: 1px;
margin: 0;
transition: color 0.3s ease;
}
.footer-content .footer-nav a {
transition: color 0.3s ease-in-out;
}
.footer-content .footer-nav a:hover {
color: #C5A459;
}
@media screen and (max-width: 600px) {
.footer-content .footer-nav {
margin: 50px 0;
}
}
.footer-content.right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
gap: 20px;
text-align: right;
margin: 0;
}
@media screen and (max-width: 600px) {
.footer-content.right {
align-items: flex-start;
text-align: left;
}
}
.poster {
width: 800px;
height: 600px;
border-radius: 15px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
}
.poster h1, .poster h2 {
position: relative;
z-index: 100;
opacity: 100%;
}
.poster h1 {
font-size: 50px;
font-weight: 300 !important;
}
.poster.nepal {
background-image: url(../images/research-everest.jpg);
background-size: cover;
}
.poster::after {
content: "";
position: absolute;
border-radius: 15px;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Overlay with opacity */
z-index: 1; /* Ensure it overlays the background image */
transition: background-color 0.3s ease-in-out;
}
.carousel {
width: 100%;
display: grid;
gap: 15px;
place-items: start;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(1, auto);
overflow-x: hidden;
overflow-y: hidden;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* For Firefox */
overflow-x: scroll;
}
.carousel::-webkit-scrollbar {
display: none; /* For Chrome, Safari, and Edge */
}
.full-img {
width: 100%;
height: 500px;
padding: 0px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.full-img h1, .full-img h2, .full-img h3, .full-img p {
color: #ffffff;
}
.full-img.team {
background-image: url("../images/team-group.jpg");
}
.full-img.logo-cta {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/why-bottom.jpg");
height: 600px;
text-align: center;
}
.bio {
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 50px auto 0 auto;
padding: 100px;
}
@media screen and (max-width: 650px) {
.bio {
padding: 20px 15px 50px 15px;
}
}
.bio-content {
display: flex;
flex-direction: row;
justify-content: left;
width: 100%;
max-width: 1200px;
min-width: 800px;
}
.bio-content img {
border-radius: 15px;
}
@media screen and (max-width: 650px) {
.bio-content img {
width: 275px;
height: auto;
}
}
@media screen and (max-width: 1200px) {
.bio-content {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-width: 250px;
}
.bio-content img {
margin: 0 0 25px 0;
}
}
.bio-content .bio-text {
padding: 0px 0px 0px 50px;
max-width: 750px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (max-width: 1200px) {
.bio-content .bio-text {
padding: 0;
width: 100%;
}
}
@media screen and (max-width: 1200px) {
.bio-content .bio-text hr {
margin: 0 auto 20px auto;
}
.bio-content .bio-text h2 {
text-align: center;
font-size: 22px;
}
}
.bio-content h1 {
font-size: 32px;
margin: 10px 0 10px 0;
}
.bio-content h2 {
font-size: 24px;
font-weight: 100;
line-height: 35px;
letter-spacing: 0px;
margin: 0 0 30px 0;
}
@media screen and (max-width: 450px) {
.bio-content h2 br {
display: none;
}
}
.bio-content h3 {
font-size: 18px !important;
margin-top: 50px;
}
.bio-content hr {
width: 50px;
height: 2px;
margin: 20px 0 30px 0;
background-color: #000000;
border: none;
}
.bio-content h2, .bio-content p {
color: #000000;
}
.bio-content h2 span, .bio-content p span {
color: #C5A459;
}
@media screen and (max-width: 1200px) {
.bio-content h1 {
margin: 20px 0 30px 0;
text-align: center;
font-size: 28px;
}
}
.feature {
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: auto;
padding: 25px 0 150px 0;
transition: background-color 0.8s ease-in-out;
}
.feature.white {
background-color: #ffffff;
}
.feature.portfolio {
padding: 0px;
}
@media screen and (max-width: 1080px) {
.feature {
padding: 100px 0 100px 0;
}
}
@media screen and (max-width: 650px) {
.feature {
padding: 15px 0px 100px 0px;
}
}
.feature-content {
width: 100%;
max-width: 1200px;
padding: 0;
overflow: hidden;
}
.feature-content h2 {
font-weight: 200;
}
.feature-content h3 {
color: #ffffff;
}
@media screen and (max-width: 1250px) {
.feature-content {
margin: 0 25px;
}
}
@media screen and (max-width: 1080px) {
.feature-content {
margin: 0;
}
}
.feature-row {
width: 100%;
display: flex;
align-items: flex-start;
flex-direction: row;
overflow-x: scroll;
overflow-y: hidden;
scroll-behavior: smooth;
}
.feature-row.padded {
margin: 0 0 100px 0;
}
@media screen and (max-width: 1080px) {
.feature-row {
justify-content: flex-start;
}
}
.feature-row .feature-column {
display: flex;
flex-direction: column;
width: calc(100% - 150px);
min-width: 280px;
max-width: 380px;
margin: 0 0 0 0;
overflow: visible;
}
@media screen and (max-width: 1080px) {
.feature-row .feature-column {
width: 280px;
}
}
.feature-row .feature-column.first {
margin: 0 30px 0 0;
}
@media screen and (max-width: 1080px) {
.feature-row .feature-column.first {
margin: 0 20px 0 100px;
}
}
@media screen and (max-width: 650px) {
.feature-row .feature-column.first {
margin: 0 15px 0 15px;
}
}
.feature-row .feature-column.last {
margin: 0 0 0 30px;
min-width: 295px;
}
@media screen and (max-width: 1080px) {
.feature-row .feature-column.last {
margin: 0 100px 0 15px;
}
}
@media screen and (max-width: 650px) {
.feature-row .feature-column.last {
margin: 0 0 0 15px;
padding: 0 15px 0 0;
}
}
.feature-row .feature-screen {
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 15px;
width: 100%;
min-width: 280px;
height: 550px;
transition: opacity 0.3s ease-in-out;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: left;
text-align: left;
padding: 25px;
}
.feature-row .feature-screen h3 {
font-size: 28px;
font-weight: 400;
letter-spacing: 1px;
margin: 0 0 0 0;
}
@media screen and (max-width: 650px) {
.feature-row .feature-screen h3 {
font-size: 28px;
font-weight: 400;
}
}
.feature-row .feature-screen p {
font-family: "area-normal", sans-serif;
font-weight: 300;
color: #ffffff;
font-size: 18px;
letter-spacing: 0.5px;
margin: 0;
}
@media screen and (max-width: 1080px) {
.feature-row .feature-screen p {
letter-spacing: 0.25px;
font-size: 15px;
}
}
@media screen and (max-width: 650px) {
.feature-row .feature-screen p {
font-weight: 400;
}
}
.feature-row .feature-screen .feature-text {
transition: opacity 0.3s ease;
}
.feature-row .feature-screen .feature-hover {
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.feature-row .feature-screen .feature-hover p {
font-family: "area-normal", sans-serif;
color: #ffffff !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
}
.feature-row .feature-screen .feature-hover hr {
width: 80px;
height: 2px;
margin-top: 0;
background-color: #C5A459;
border: none;
}
@media screen and (max-width: 850px) {
.feature-row .feature-screen .feature-hover {
display: none;
}
}
@media screen and (max-width: 1080px) {
.feature-row .feature-screen {
height: 400px;
}
}
.feature-row .feature-screen.feature-1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), url("../images/feature-1.jpg");
}
.feature-row .feature-screen.feature-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), url("../images/feature-2b.jpg");
}
.feature-row .feature-screen.feature-3 {
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), url("../images/feature-3.jpg");
}
.feature-row .feature-screen::before {
content: "";
position: absolute;
border-radius: 15px;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0); /* Overlay with opacity */
z-index: 1; /* Ensure it overlays the background image */
transition: background-color 0.3s ease-in-out;
}
.feature-row .feature-screen > * {
position: relative;
z-index: 2; /* Content stays above the overlay */
}
.feature-row .feature-column:hover .feature-hover {
opacity: 100;
transform: translateY(-10px);
}
.feature-row .feature-column:hover .feature-screen::before {
background-color: rgba(0, 0, 0, 0.4); /* Overlay with opacity */
}
@media screen and (max-width: 850px) {
.feature-row .feature-column:hover .feature-screen::before {
background-color: rgba(0, 0, 0, 0);
}
}
.feature-row .feature-column:hover .feature-text {
opacity: 60%;
}
@media screen and (max-width: 650px) {
.feature-row .feature-column:hover .feature-text {
opacity: 100%;
}
}
.clients {
background-color: #F5F5F5;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: auto;
padding: 25px 100px 100px 100px;
}
@media screen and (max-width: 650px) {
.clients {
padding: 25px 25px 80px 25px;
}
}
.clients-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 50px 0 0 0;
}
.clients-content h4 {
margin-bottom: 25px;
}
.clients-content .logos {
display: grid;
gap: 50px;
place-items: center;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, auto);
}
.clients-content .logos img {
display: block;
margin: auto;
padding: 10px 20px;
-o-object-fit: contain;
object-fit: contain;
}
@media screen and (max-width: 1100px) {
.clients-content .logos {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, auto);
}
}
@media screen and (max-width: 975px) {
.clients-content .logos {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
gap: 25px;
}
}
@media screen and (max-width: 500px) {
.clients-content .logos {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, auto);
gap: 20px;
}
.clients-content .logos img {
width: 120px;
}
}
.contact {
display: flex;
position: relative;
flex-direction: row;
justify-content: center;
width: 100%;
min-height: 750px;
padding: 0;
}
.contact.contact-page {
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)), url("../images/contact-3.jpg");
background-position: center;
}
@media screen and (max-width: 750px) {
.contact.contact-page h1 {
margin: 150px 0 50px 0;
}
}
@media screen and (max-width: 1000px) {
.contact .contact-left, .contact .contact-right {
padding: 50px 25px;
}
}
@media screen and (max-width: 850px) {
.contact {
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.contact-content {
max-width: 600px;
}
.contact-content h3 {
margin: 15px 0 25px 0;
}
.contact-container {
max-width: 700px;
width: 100%;
}
.contact-left {
margin: 0;
width: 100%;
padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-width: none;
min-height: 500px;
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)), url("../images/home-contact-2.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: white;
}
@media screen and (max-width: 850px) {
.contact-left {
background-position: bottom;
}
}
.contact-left h1, .contact-left h2, .contact-left h3, .contact-left h4, .contact-left h5, .contact-left p {
color: #ffffff;
}
.contact-left h2 {
font-size: 38px;
margin: 100px 0;
}
.contact-left h2 span {
font-size: 35px;
}
.contact-left .contact-para h5 {
margin: 50px 0 0 0;
}
.contact-left .contact-para p {
max-width: 350px;
margin: 20px 0 50px 0;
}
.contact-details {
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
margin: 10px 0 0 0;
}
.contact-details svg {
padding-right: 15px;
}
.contact-details svg path {
fill: #ffffff;
}
.contact-details span {
display: flex;
align-items: center;
margin-bottom: 25px;
}
@media screen and (max-width: 850px) {
.contact-details {
display: none;
}
}
.email-contact {
text-decoration: none;
}
.email-contact .email-address {
transition: color 0.3s ease;
}
.email-contact svg {
width: 35px;
}
.email-contact svg path {
transition: fill 0.3s ease-in-out;
}
.email-contact:hover p {
color: #C5A459;
}
.email-contact:hover svg path {
fill: #C5A459;
}
.social-icons {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 150px;
height: -moz-fit-content;
height: fit-content;
margin: 25px 0 0 0;
}
.social-icons .social-icon svg {
height: 20px;
transition: fill 0.3s ease;
}
.social-icons .social-icon svg, .social-icons svg path {
fill: #ffffff;
transition: all 0.3s ease;
}
.social-icons .social-icon:hover svg {
transform: translateY(-3px);
}
.social-icons .social-icon:hover svg path {
fill: #C5A459;
}
.contact-right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 50px;
min-width: none;
}
.contact-right h3 {
margin-bottom: 25px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
}
.row {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.input-group {
display: flex;
flex-direction: column;
flex: 1;
}
.input-group.full-width {
flex: 100%;
}
label {
font-family: "area-normal", sans-serif;
font-weight: 500;
margin-bottom: 8px;
font-size: 12px;
}
input, select {
min-height: 38px !important;
height: 38px !important;
}
input, textarea, select {
padding: 10px;
border: none;
background-color: #F5F5F5;
border-radius: 3px;
font-size: 14px;
font-family: "freight-display-pro", serif;
font-weight: 300;
color: #000000;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #000000; /* Change to your desired color */
opacity: 0.5; /* Ensure full visibility */
}
input::placeholder,
textarea::placeholder {
color: #000000; /* Change to your desired color */
opacity: 0.5; /* Ensure full visibility */
}
input:focus, textarea:focus, select:focus {
border: 0.75px solid #000000; /* Change border color */
outline: none;
}
textarea {
resize: vertical;
height: 200px;
max-height: 300px;
min-height: 100px;
}
button.submit-button {
margin: 15px 0 0 0;
}
.recaptcha-container {
width: 100%;
}
.g-recaptcha {
margin: 0;
}
.g-recaptcha * {
margin: 0;
}
.notification {
font-family: "area-normal", sans-serif;
color: #000000;
font-size: 13px;
font-weight: 400;
padding: 15px;
margin: 30px;
border-radius: 5px;
letter-spacing: 0.25px;
display: block;
}
.success-msg {
background-color: #C4CEBC;
color: #000000;
border: none;
}
.error-msg {
background-color: #f8d7da;
color: #000000;
border: none;
}
.project {
padding: 100px 0;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
-moz-column-gap: 25px;
column-gap: 25px;
row-gap: 75px;
margin: 50px 0 100px 0;
}
@media screen and (max-width: 1080px) {
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 525px) {
.projects-grid {
-moz-column-gap: 10px;
column-gap: 10px;
row-gap: 50px;
}
}
@media screen and (max-width: 340px) {
.projects-grid {
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 10px;
column-gap: 10px;
row-gap: 50px;
}
}
.project-tile {
height: -moz-fit-content;
height: fit-content;
}
.project-tile.coming {
opacity: 50%;
}
.project-tile:hover .project-img {
transform: scale(102%);
transition: all 0.3s ease-out;
}
.project-tile:hover .project-img::before {
opacity: 65%;
}
.project-tile .project-name {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
width: 100%;
text-align: left;
margin: 25px 0 0 0;
padding: 0 10px 0 5px;
}
.project-tile .project-name h2 {
font-size: 35px;
line-height: 40px;
}
.project-tile .project-name h4 {
font-family: "area-normal", sans-serif;
font-style: normal;
color: #878F93;
line-height: 20px;
}
@media screen and (max-width: 750px) {
.project-tile .project-name h2 span {
font-size: 28px !important;
line-height: 33px;
}
}
@media screen and (max-width: 650px) {
.project-tile .project-name {
flex-direction: column;
align-items: flex-start;
margin-top: 15px;
}
}
@media screen and (max-width: 480px) {
.project-tile .project-name h2 span {
font-size: 24px !important;
line-height: 30px;
}
.project-tile .project-name h4 {
font-size: 12px !important;
}
}
@media screen and (max-width: 400px) {
.project-tile .project-name h2 span {
font-size: 20px !important;
line-height: 25px;
}
.project-tile .project-name h4 {
font-size: 11px !important;
}
}
@media screen and (max-width: 340px) {
.project-tile .project-name h2 span {
font-size: 28px !important;
line-height: 33px;
}
.project-tile .project-name h4 {
font-size: 12px !important;
}
}
.project-tile .project-img {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: auto;
aspect-ratio: 6/8;
max-height: 650px;
margin: 0;
border-radius: 15px;
padding: 10%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.05) 0 0 15px 0;
}
.project-tile .project-img svg {
width: 100%;
}
.project-tile .project-img::before {
content: "";
position: absolute;
border-radius: 15px;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
opacity: 45%;
z-index: 1; /* Ensure it overlays the background image */
transition: all 0.3s ease-out;
}
.project-tile .project-img > * {
position: relative;
z-index: 2; /* Content stays above the overlay */
}
.project-tile .sons {
background-image: url(../images/tile-sons.jpg);
}
.project-tile .sons::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 125px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .aberdeen {
background-image: url(../images/tile-aberdeen.jpg);
}
.project-tile .aberdeen::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 50px;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .reserve {
background-image: url(../images/tile-reserve.jpg);
}
.project-tile .reserve::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 10%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .redbull {
background-image: url(../images/tile-redbull.jpg);
}
.project-tile .redbull::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 10%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .steeple {
background-image: url(../images/tile-steeple.jpg);
}
.project-tile .steeple::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 15%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .vandy {
background-image: url(../images/tile-vanderbilt.jpg);
}
.project-tile .vandy::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 10%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .bonnaroo {
background-image: url(../images/tile-bonnaroo.jpg);
}
.project-tile .bonnaroo::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 13%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .kenya {
background-image: url(../images/tile-cmn.jpg);
}
.project-tile .kenya::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 13%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .india {
background-image: url(../images/tile-india.jpg);
}
.project-tile .india::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 20%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .israel {
background-image: url(../images/tile-israel.jpg);
}
.project-tile .israel::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 15%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .symphony {
background-image: url(../images/tile-symphony.jpg);
}
.project-tile .symphony::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 18%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .belmont {
background-image: url(../images/tile-belmont.jpg);
}
.project-tile .belmont::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 30%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .nepal {
background-image: url(../images/tile-nepal.jpg);
}
.project-tile .nepal::after {
content: "";
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
max-height: 15%;
background-image: url('data:image/svg+xml, ');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 5;
}
.project-tile .nshvll {
background-image: url(../images/projects-nshvll.jpg);
}
.project-grid {
display: grid;
gap: 100px;
margin: 50px 0;
grid-template-columns: repeat(2, 1fr);
}
/* Every even row (2nd, 4th, etc.) gets two columns */
.project-group:nth-child(4n-2),
.project-group:nth-child(4n-1) {
grid-column: span 1; /* Makes two items per row */
}
.project-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;
margin: 0;
gap: 25px;
grid-column: span 2; /* Default: Full width */
}
.project-group:hover .project-info svg {
transform: translateX(20px);
opacity: 1;
}
.project-group .project-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 450px;
width: 100%;
max-height: 550px;
margin: 0;
border-radius: 10px;
}
.project-group .project-img.israel {
background-image: url(../images/photography/img8.jpg);
}
.project-group .project-img.kenya {
background-image: url(../images/photography/img14.jpg);
}
.project-group .project-img.nepal {
background-image: url(../images/photography/img30.jpg);
}
.project-group .project-img.nshvll {
background-image: url(../images/projects-nshvll.jpg);
}
.project-group .project-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 100%;
min-width: none;
transition: all 0.3s ease-in-out;
}
.project-group .project-info h2 {
margin: 20px 0;
}
.project-group .project-info hr {
height: 2px;
color: #000000;
background: #000000;
font-size: 0;
border: 0;
margin: 0;
width: 50px;
max-width: 50px;
margin-bottom: 30px;
}
.project-group .project-info p {
max-width: 300px;
}
.project-group .project-info .project-title {
display: flex;
flex-direction: row;
gap: 15px;
}
.project-group .project-info svg {
width: 50px;
stroke: #C5A459;
opacity: 0;
transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 500px) {
.project-group .project-info svg {
display: none;
}
}
@media screen and (max-width: 800px) {
.project-group .project-info {
max-width: none;
}
}
@media screen and (max-width: 800px) {
.project-group {
flex-direction: column !important;
margin: 0;
}
.project-group .project-img {
max-width: none;
margin: 0 !important;
height: 500px;
}
}
.project-header {
margin-bottom: 50px;
}
.project-header h1 {
margin: 0;
}
.project-header h4 {
margin-bottom: 10px;
}
.project-header .project-title {
width: 100%;
}
.project-focus {
list-style-type: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 15px;
width: 100%;
}
@media screen and (max-width: 800px) {
.project-focus {
justify-content: flex-start;
}
}
.project-focus li {
font-family: "area-normal", sans-serif;
font-weight: 300;
font-size: 16px;
letter-spacing: 0.75px;
color: #000000;
}
.project-hero {
width: 100%;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 50px;
}
@media screen and (max-width: 600px) {
.project-hero {
height: 600px;
}
}
.project-hero.sons {
background-image: url(../images/project-sons-hero.jpg);
}
.project-hero.sons svg {
fill: #ffffff;
max-height: 120px;
width: 100%;
filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.5));
}
.project-hero.aberdeen {
background-image: url(../images/project-aberdeen-hero.jpg);
}
.project-hero.aberdeen svg {
fill: #ffffff;
max-height: 60px;
width: 100%;
filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.5));
}
.project-hero.nepal {
background-image: url(../images/project-nepal-hero.jpg);
}
.project-hero.nepal svg {
fill: #ffffff;
height: 80px;
}
.project-hero.reserve {
background-image: url(../images/project-reserve-hero.jpg);
}
.project-hero.reserve svg {
fill: #ffffff;
height: 70px;
filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.5));
}
@media screen and (max-width: 500px) {
.project-hero.reserve svg {
height: 50px;
}
}
.project-hero.shawn {
background-image: url(../images/projects/shawn/shawn-cover.jpg);
}
@media screen and (max-width: 485px) {
.project-hero.shawn {
background-image: url(../images/projects/shawn/shawn-cover-2.jpg);
}
}
.case-study {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
padding-top: 50px;
}
.case-section {
margin: 50px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1200px;
position: relative;
}
.case-section video {
margin: 25px 0;
box-shadow: rgba(0, 0, 0, 0.075) 0 0 15px 0;
}
.case-section.last {
margin-bottom: 0;
}
.case-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin: 50px 0;
position: relative;
}
.doc {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 250px;
width: 200px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px 0px;
transition: all 0.3s ease-in-out;
margin: 25px 0;
}
.doc.resume {
background-image: url(../images/projects/shawn/resume-cover.png);
}
.doc:hover {
scale: 103%;
}
.case-title-box {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 25px;
}
.case-title-box p {
max-width: 700px;
margin-top: 25px;
}
.case-title {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
}
.case-title h1 {
color: #C5A459;
}
.case-title span {
color: #000000;
}
@media screen and (max-width: 450px) {
.case-title h1, .case-title span {
font-size: 30px;
}
}
.case-title hr {
width: 75px;
height: 2px;
margin-top: 5px;
background-color: #000000;
border: none;
}
@media screen and (max-width: 450px) {
.case-title hr {
width: 40px;
}
}
.case-text {
max-width: 700px;
}
.case-text h3 {
margin-bottom: 15px;
}
.case-text h4 {
margin: 50px 0 20px 0;
}
.case-text p {
margin-bottom: 50px;
}
.case-text .br-1 {
display: none;
}
@media screen and (max-width: 500px) {
.case-text .br-1 {
display: block;
}
}
.case-text .bio-bullets {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
@media screen and (max-width: 750px) {
.case-text .bio-bullets {
grid-template-columns: repeat(1, 1fr);
}
}
.case-text .bio-bullets li {
font-family: "freight-display-pro", serif;
font-size: 14px;
line-height: 25px;
font-weight: 300;
display: flex;
align-items: center;
justify-content: center;
min-height: 60px;
padding: 20px 25px;
border-radius: 5px;
background-color: #F5F5F5;
}
.case-text .bio-bullets .num {
font-size: 24px;
font-weight: 300;
font-style: italic;
font-weight: 300 !important;
width: 15px;
margin: 0 25px 0 0;
color: #C5A459;
}
.double-img {
display: flex;
flex-direction: row;
gap: 50px;
width: 100%;
max-width: 100%;
}
@media screen and (max-width: 1200px) {
.double-img {
gap: 25px;
}
}
@media screen and (max-width: 450px) {
.double-img {
row-gap: 0px;
-moz-column-gap: 10px;
column-gap: 10px;
margin: 0;
}
}
.case-vid.wide {
height: auto;
width: 100%;
}
.case-vid.tall {
max-height: 80vh;
min-height: 500px;
aspect-ratio: 9/16;
height: auto;
max-width: -moz-fit-content;
max-width: fit-content;
}
.case-img {
width: 100%;
border-radius: 0px;
}
.case-img.one {
aspect-ratio: 16/11;
max-height: 85vh;
min-height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 25px 0;
}
@media screen and (max-width: 1200px) {
.case-img.one {
margin: 12.5px 0;
}
}
@media screen and (max-width: 800px) {
.case-img.one {
min-height: 300px;
}
}
@media screen and (max-width: 450px) {
.case-img.one {
margin: 5px 0;
min-height: 25px;
}
}
.case-img.two {
min-height: 100px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
aspect-ratio: 1/1;
margin: 25px 0;
}
@media screen and (max-width: 1200px) {
.case-img.two {
margin: 12.5px 0;
}
}
@media screen and (max-width: 450px) {
.case-img.two {
margin: 5px 0;
min-height: 25px;
}
}
.case-img.tall {
max-height: 80vh !important;
width: 55vw;
aspect-ratio: 11/16 !important;
height: auto;
max-width: 500px;
}
@media screen and (max-width: 450px) {
.case-img.tall {
max-height: 60vh;
max-width: 40vw;
}
}
.case-img.shadow {
box-shadow: rgba(0, 0, 0, 0.075) 0 0 15px 0;
}
.sons-brand-1 {
background-image: url(../images/projects/sons/brand-1.jpg);
}
.sons-brand-2 {
background-image: url(../images/projects/sons/brand-2.jpg);
}
.sons-brand-3 {
background-image: url(../images/projects/sons/brand-3.jpg);
}
.sons-brand-4 {
background-image: url(../images/projects/sons/brand-4.jpg);
}
.sons-brand-5 {
background-image: url(../images/projects/sons/brand-5.jpg);
}
.sons-brand-6 {
background-image: url(../images/projects/sons/brand-6.png);
}
.sons-brand-7 {
background-image: url(../images/projects/sons/brand-7.jpg);
}
.sons-web-1 {
background-image: url(../images/projects/sons/web-1.png);
background-position: top !important;
}
.sons-web-2 {
background-image: url(../images/projects/sons/web-2.png);
background-position: top !important;
}
.sons-web-3 {
background-image: url(../images/projects/sons/web-3.png);
background-position: top !important;
}
.sons-web-4 {
background-image: url(../images/projects/sons/web-4.png);
background-position: top !important;
}
.sons-photo-1 {
background-image: url(../images/projects/sons/photo-1.jpg);
background-position: bottom !important;
}
.sons-photo-2 {
background-image: url(../images/projects/sons/photo-2.jpg);
background-position: top !important;
}
.sons-photo-3 {
background-image: url(../images/projects/sons/photo-3.jpg);
background-position: top !important;
}
.sons-photo-4 {
background-image: url(../images/projects/sons/photo-4.jpg);
background-position: top !important;
}
.sons-photo-5 {
background-image: url(../images/projects/sons/photo-5.jpg);
background-position: bottom !important;
}
.sons-photo-6 {
background-image: url(../images/projects/sons/photo-6.jpg);
background-position: bottom !important;
}
.aberdeen-1 {
background-image: url(../images/projects/aberdeen/aberdeen-1.jpg);
}
.aberdeen-2 {
background-image: url(../images/projects/aberdeen/aberdeen-2.jpg);
}
.aberdeen-3 {
background-image: url(../images/projects/aberdeen/aberdeen-3.jpg);
}
.aberdeen-4 {
background-image: url(../images/projects/aberdeen/aberdeen-4.jpg);
}
.aberdeen-5 {
background-image: url(../images/projects/aberdeen/aberdeen-5.jpg);
}
.aberdeen-6 {
background-image: url(../images/projects/aberdeen/aberdeen-6.jpg);
}
.aberdeen-7 {
background-image: url(../images/projects/aberdeen/aberdeen-7.jpg);
}
.aberdeen-8 {
background-image: url(../images/projects/nepal/nepal-8.jpg);
}
.aberdeen-9 {
background-image: url(../images/projects/nepal/nepal-9.jpg);
}
.nepal-1 {
background-image: url(../images/projects/nepal/nepal-1.jpg);
}
.nepal-2 {
background-image: url(../images/projects/nepal/nepal-2.jpg);
}
.nepal-3 {
background-image: url(../images/projects/nepal/nepal-3.jpg);
}
.nepal-4 {
background-image: url(../images/projects/nepal/nepal-4.jpg);
}
.nepal-5 {
background-image: url(../images/projects/nepal/nepal-5.jpg);
}
.nepal-6 {
background-image: url(../images/projects/nepal/nepal-6.jpg);
}
.nepal-7 {
background-image: url(../images/projects/nepal/nepal-7.jpg);
}
.nepal-8 {
background-image: url(../images/projects/nepal/nepal-8.jpg);
}
.nepal-9 {
background-image: url(../images/projects/nepal/nepal-9.jpg);
}
.nepal-10 {
background-image: url(../images/projects/nepal/nepal-10.jpg);
}
.reserve-brand-1 {
background-image: url(../images/projects/reserve/brand-1.jpg);
}
.reserve-brand-2 {
background-image: url(../images/projects/reserve/brand-2.jpg);
}
.reserve-brand-3 {
background-image: url(../images/projects/reserve/brand-3.png);
}
.reserve-brand-4 {
background-image: url(../images/projects/reserve/brand-4.png);
}
.reserve-brand-5 {
background-image: url(../images/projects/reserve/brand-5.jpg);
}
.reserve-brand-6 {
background-image: url(../images/projects/reserve/brand-6.jpg);
}
.reserve-brand-7 {
background-image: url(../images/projects/reserve/brand-7.jpg);
}
.reserve-web-1 {
background-image: url(../images/projects/reserve/web-1.png);
background-position: top !important;
}
.reserve-web-2 {
background-image: url(../images/projects/reserve/web-2.png);
background-position: top !important;
}
.reserve-web-3 {
background-image: url(../images/projects/reserve/web-3.png);
background-position: top !important;
}
.reserve-web-4 {
background-image: url(../images/projects/reserve/web-4.png);
background-position: top !important;
}
.reserve-web-5 {
background-image: url(../images/projects/reserve/web-5.png);
background-position: top !important;
}
.reserve-photo-1 {
background-image: url(../images/projects/reserve/photo-1.jpg);
}
.reserve-photo-2 {
background-image: url(../images/projects/reserve/photo-2.jpg);
}
.reserve-photo-3 {
background-image: url(../images/projects/reserve/photo-3.jpg);
}
.reserve-photo-4 {
background-image: url(../images/projects/reserve/photo-4.jpg);
background-position: 40% !important;
}
.reserve-photo-5 {
background-image: url(../images/projects/reserve/photo-5.jpg);
}
.reserve-photo-6 {
background-image: url(../images/projects/reserve/photo-6.jpg);
}
.reserve-photo-7 {
background-image: url(../images/projects/reserve/photo-7.jpg);
}
.research {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 50px 0 100px 0;
}
@media screen and (max-width: 1250px) {
.research {
min-width: 0;
}
}
.research-content {
display: grid;
width: 100%;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
height: 100%;
gap: 50px;
align-items: flex-start;
justify-items: center;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
}
@media screen and (max-width: 1250px) {
.research-content {
gap: 25px;
}
}
@media screen and (max-width: 750px) {
.research-content {
grid-template-columns: repeat(1, 1fr);
}
}
.research-content h1, .research-content h3 {
color: #000000;
padding: 0px;
line-height: 30px;
}
.research-content p {
color: #000000;
padding: 0px;
line-height: 25px;
margin: 5px 0 25px 0;
}
.research-item {
display: flex;
flex-direction: column;
width: 100%;
}
.research-screen {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 15px;
width: 100%;
height: 500px;
transition: opacity 0.3s ease-in-out;
margin: 0 0 15px 0;
padding: 40px;
}
@media screen and (max-width: 600px) {
.research-screen {
padding: 25px;
}
}
.research-screen .research-title h2, .research-screen .research-title h3, .research-screen .research-title p {
color: #ffffff;
text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.75);
}
.research-screen .research-title h3 {
font-size: 25px;
font-weight: 400;
}
.research-screen .research-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom: 0;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 3;
}
.research-screen .research-hover p {
font-family: "area-normal", sans-serif;
color: white;
font-weight: 500 !important;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 0px;
}
.research-screen .research-hover hr {
width: 80px;
height: 2px;
margin-top: 0;
background-color: #C5A459;
border: none;
}
@media screen and (max-width: 850px) {
.research-screen .research-hover {
display: none;
}
}
.research-screen.research-1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)), url("../images/research-everest.jpg");
}
.research-screen.research-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)), url("../images/research-dev.jpg");
}
.research-screen.research-3 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)), url("../images/research-nbc.jpg");
}
.research-screen.research-4 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)), url("../images/research-chinese.jpg");
}
.research-screen.research-5 {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)), url("../images/research-pakistan.jpg");
}
.research-screen.digital-1 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85)), url("../images/boombox/bb-1.jpg");
}
.research-screen.digital-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85)), url("../images/twloha/twloha-1.jpg");
}
.research-screen.digital-3 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85)), url("../images/globalx/gx-1.jpg");
}
.research-screen.digital-4 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85)), url("../images/nshvll/nshvll-1.jpg");
}
.research-screen.digital-5 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85)), url("../images/miller/mvp.png");
}
.research-screen.digital-6 {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85)), url("../images/ss-1.jpg");
}
.research-screen::after {
content: "";
position: absolute;
border-radius: inherit;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0); /* Overlay with opacity */
z-index: 2; /* Ensure it overlays the background image */
transition: background-color 0.3s ease-in-out;
}
.research-screen > * {
position: relative;
z-index: 2; /* Content stays above the overlay */
}
.research-item:hover .research-hover {
opacity: 100;
transform: translateY(-10px);
}
.research-item:hover .research-screen::after {
background-color: rgba(0, 0, 0, 0.5); /* Overlay with opacity */
}
@media screen and (max-width: 850px) {
.research-item:hover .research-screen::after {
background-color: rgba(0, 0, 0, 0);
}
}
.error {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)), url(../images/error.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: white;
padding: 15px;
}
.error h1, .error h4 {
color: #ffffff;
text-shadow: 0px 0px 50px rgba(0, 0, 0, 0.25);
}
.error h1 {
font-size: 40px;
margin: 0;
}
@media screen and (max-width: 650px) {
.error h1 {
font-size: 30px;
}
}
.error h4 {
margin: 0 0 25px 0;
}
.gallery-item {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
transition: all 0.5s ease-in-out;
cursor: pointer;
width: 100%;
}
.gallery-item:hover {
opacity: 0.75;
}
.filter {
position: sticky;
top: 130px;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 115px 25px 0 0;
width: 250px;
height: calc(100vh - 130px);
max-height: calc(100vh - 130px);
overflow-y: auto;
z-index: 500;
background-color: #ffffff;
}
@media screen and (max-width: 1000px) {
.filter {
position: fixed;
right: -200%;
width: 100vw;
height: 100vh;
max-height: none;
padding: 60px 50px 100px 50px;
transition: right 0.5s ease-in-out;
}
.filter.change {
right: 0;
}
}
@media screen and (max-width: 650px) {
.filter {
top: 80px;
padding: 60px 25px 100px 25px;
}
}
.filter-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 0 25px 0;
}
@media screen and (max-width: 1000px) {
.filter-header h3, .filter-header button {
margin: 0;
}
}
.filter-group {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 0;
border: none;
border-bottom: 1px solid #878F93;
min-height: 60px;
}
.filter-group label {
font-family: "area-normal", sans-serif;
font-size: 13px;
font-weight: 500;
margin: 8px 0;
position: relative;
cursor: pointer;
}
.filter-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 100%;
}
.filter-checkbox {
margin: 0 10px 0 0;
}
.dropdown-toggle {
cursor: pointer;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0;
height: 60px;
}
.dropdown-toggle::after {
content: ""; /* Down arrow */
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 10px;
height: 25px;
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}
.dropdown-content {
display: none;
max-height: 0; /* Initially hide the content */
overflow: hidden;
transition: all 0.3s ease-out; /* Add transition for smooth expansion */
padding: 0 0 15px 0;
}
.dropdown-content label {
display: block;
font-family: "area-normal", sans-serif;
font-size: 13px;
font-weight: 500;
margin: 8px 0;
position: relative;
cursor: pointer;
}
.filter-group.active {
min-height: auto;
}
.filter-group.active .dropdown-content {
display: flex;
flex-direction: column;
max-height: -moz-fit-content;
max-height: fit-content; /* Maximum height when expanded, adjust as needed */
}
.filter-group.active .dropdown-toggle::after {
transform: rotate(0deg);
}
.modal {
display: none;
justify-content: center;
align-items: center;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
padding: 40px;
width: 100dvw;
height: 100dvh;
background-color: rgb(0, 0, 0); /* Changed to dark overlay for better visibility */
transition: opacity 0.3s ease-in-out; /* Adds fade transition */
opacity: 0; /* Start with no opacity */
overflow: hidden;
}
@media screen and (max-width: 600px) {
.modal {
padding: 5px;
}
}
.modal-content {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
width: 100%;
height: 100%;
max-height: 850px;
overflow: scroll;
}
.modal-image {
max-width: 100%;
max-height: 100%;
}
.modal-nav {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 20px;
width: 40px;
height: 40px;
border-radius: 100px;
cursor: pointer;
z-index: 1001;
}
.modal-nav:hover {
border: none;
background: rgba(0, 0, 0, 0.75);
}
.modal-nav svg {
width: 15px;
min-width: 15px;
height: 15px;
stroke: white;
fill: none;
stroke-width: 2px;
}
.modal-nav:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.modal-nav.prev {
left: 20px;
}
.modal-nav.prev svg {
transform: rotate(180deg);
}
.modal-nav.next {
right: 20px;
}
.modal-nav:disabled {
background: rgba(0, 0, 0, 0.2);
cursor: not-allowed;
}
.close {
position: absolute; /* Changed to absolute to position within .bio-modal-content */
top: 20px; /* Adjust as needed */
right: 20px; /* Adjust as needed */
display: flex;
width: 30px;
height: 30px;
cursor: pointer;
justify-content: center;
align-items: center;
z-index: 1001; /* Higher than the modal's z-index */
background-color: rgba(0, 0, 0, 0.5);
border-radius: 100%;
}
.close.mobile {
display: none;
width: 20px;
height: 20px;
}
@media screen and (max-width: 1000px) {
.close.mobile {
display: inline;
top: 25px; /* Adjust as needed */
right: 50px; /* Adjust as needed */
}
}
@media screen and (max-width: 650px) {
.close.mobile {
display: block;
top: 25px; /* Adjust as needed */
right: 25px; /* Adjust as needed */
}
}
.close .close-line,
.close .close-line::after {
content: "";
width: 15px;
height: 1.5px;
background-color: #000000;
position: absolute;
}
.close .close-line.white,
.close .close-line.white::after {
background-color: #ffffff;
}
.close .close-line {
transform: translateY(-7px);
transform: rotate(-45deg);
}
.close .close-line::after {
transform: translateY(-7px);
transform: rotate(90deg);
}
.close:hover .close-line,
.close:hover .close-line::after {
background-color: #C5A459;
}
.work {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1400px;
margin: auto;
padding: 0px 100px 0px 100px;
}
@media screen and (max-width: 1250px) {
.work {
padding: 0 25px;
}
}
@media screen and (max-width: 500px) {
.work {
padding: 0 15px;
}
}
.work-hero {
width: 100%;
height: 600px;
background-image: url(../images/home-hero-2.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border: none;
margin: 0 0 50px 0;
}
.work-hero.sons {
background-image: url(../images/project-sons-hero.jpg);
}
.work-hero.boombox {
background-image: url(../images/boombox/bb-1.jpg);
}
.work-hero.twloha {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)), url(../images/twloha/twloha-1.jpg);
}
.work-hero.globalx {
background-image: url("../images/globalx/gx-1.jpg");
}
.work-hero.nshvll {
background-image: url("../images/nshvll/nshvll-1.jpg");
}
.work-hero.mvp {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)), url("../images/miller/mvp-1.jpg");
}
.work-hero.ss {
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25)), url("../images/ss-2.jpg");
}
@media screen and (max-width: 500px) {
.work-hero {
height: 400px;
}
}
.work-intro {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
width: 100%;
min-width: 1200px;
margin: 100px 0px 65px 0px;
padding: 50px 0px 0px 0px;
}
@media screen and (max-width: 650px) {
.work-intro {
margin: 50px 0px 65px 0px;
}
}
.work-intro h4 {
margin-bottom: 10px;
}
.work-intro p {
width: 300px;
text-align: right;
font-size: 15px;
line-height: 25px;
margin: 0 0 0 0;
padding: 0 25px 0 0;
}
.work-intro.col {
flex-direction: column;
}
.work-intro.col p {
margin: 30px 0 0 0;
text-align: left;
}
@media screen and (max-width: 1250px) {
.work-intro {
min-width: 0;
}
}
@media screen and (max-width: 850px) {
.work-intro {
flex-direction: column;
}
.work-intro p {
margin: 30px 0 0 0;
text-align: left;
}
}
@media screen and (max-width: 500px) {
.work-intro h1 {
line-height: auto;
}
.work-intro p {
width: 100%;
padding: 0;
}
}
.gallery {
margin: 50px 0 100px 0;
}
#index-gallery {
display: grid;
height: -moz-fit-content;
height: fit-content;
width: 100%;
gap: 25px;
background-color: white;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-template-areas: "img1 img2" "img3 img4" "img5 img4" "img6 img4" "img6 img7" "img6 img8" "img9 img10" "img11 img12" "img13 img12" "img13 img14" "img13 img14" "img15 img14" "img15 img14" "img15 img16" "img15 img16" "img17 img16" "img17 img18" "img19 img20" "img19 img21" "img19 img22" "img23 img22" "img23 img22" "img23 img22" "img23 img24" "img23 img24" "img25 img24" "img26 img24" "img27 img28" "img29 img28" "img30 img28" "img30 img31" "img30 img31" "img30 img31" "img32 img31" "img32 img33" "img32 img34" "img35 img36" "img37 img38" "img39 img38" "img39 img40" "img39 img40" "img41 img40" "img41 img40" "img41 img42" "img41 img42" "img43 img42" "img43 img44" "img45 img46" "img45 img47" "img45 img48" "img49 img48" "img49 img48" "img49 img48" "img49 img50" "img51 img50" "img52 img50";
}
@media screen and (max-width: 1250px) {
#index-gallery {
min-width: 0;
}
}
@media screen and (max-width: 875px) {
#index-gallery {
min-width: 0;
grid-template-columns: repeat(1, 1fr);
margin-bottom: 25px;
}
}
.gallery-img {
width: 100%;
height: 500px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-img.tall-1 {
height: 580px;
}
.gallery-img.tall-2 {
height: 1100px;
}
.img1 {
grid-area: img1;
background-image: url(../images/photography/img1.jpg);
}
.img2 {
grid-area: img2;
background-image: url(../images/photography/img2.jpg);
}
.img3 {
grid-area: img3;
background-image: url(../images/photography/img3.jpg);
}
.img4 {
grid-area: img4;
background-image: url(../images/photography/img4.jpg);
}
.img5 {
grid-area: img5;
background-image: url(../images/photography/img5.jpg);
}
.img6 {
grid-area: img6;
background-image: url(../images/photography/img6.jpg);
}
.img7 {
grid-area: img7;
background-image: url(../images/photography/img7.jpg);
}
.img8 {
grid-area: img8;
background-image: url(../images/photography/img8.jpg);
}
.img9 {
grid-area: img9;
background-image: url(../images/photography/img9.jpg);
}
.img10 {
grid-area: img10;
background-image: url(../images/photography/img10.jpg);
}
.img11 {
grid-area: img11;
background-image: url(../images/photography/img11.jpg);
}
.img12 {
grid-area: img12;
background-image: url(../images/photography/img12.jpg);
}
.img13 {
grid-area: img13;
background-image: url(../images/photography/img13.jpg);
}
.img14 {
grid-area: img14;
background-image: url(../images/photography/img14.jpg);
}
.img15 {
grid-area: img15;
background-image: url(../images/photography/img15.jpg);
}
.img16 {
grid-area: img16;
background-image: url(../images/photography/img16.jpg);
}
.img17 {
grid-area: img17;
background-image: url(../images/photography/img17.jpg);
}
.img18 {
grid-area: img18;
background-image: url(../images/photography/img18.jpg);
}
.img19 {
grid-area: img19;
background-image: url(../images/photography/img19.jpg);
}
.img20 {
grid-area: img20;
background-image: url(../images/photography/img20.jpg);
}
.img21 {
grid-area: img21;
background-image: url(../images/photography/img21.jpg);
}
.img22 {
grid-area: img22;
background-image: url(../images/photography/img22.jpg);
}
.img23 {
grid-area: img23;
background-image: url(../images/photography/img23.jpg);
}
.img24 {
grid-area: img24;
background-image: url(../images/photography/img24.jpg);
}
.img25 {
grid-area: img25;
background-image: url(../images/photography/img25.jpg);
}
.img26 {
grid-area: img26;
background-image: url(../images/photography/img26.jpg);
}
.img27 {
grid-area: img27;
background-image: url(../images/photography/img27.jpg);
}
.img28 {
grid-area: img28;
background-image: url(../images/photography/img28.jpg);
}
.img29 {
grid-area: img29;
background-image: url(../images/photography/img29.jpg);
}
.img30 {
grid-area: img30;
background-image: url(../images/photography/img30.jpg);
}
.img31 {
grid-area: img31;
background-image: url(../images/photography/img31.jpg);
}
.img32 {
grid-area: img32;
background-image: url(../images/photography/img32.jpg);
}
.img33 {
grid-area: img33;
background-image: url(../images/photography/img33.jpg);
}
.img34 {
grid-area: img34;
background-image: url(../images/photography/img34.jpg);
}
.img35 {
grid-area: img35;
background-image: url(../images/photography/img35.jpg);
}
.img36 {
grid-area: img36;
background-image: url(../images/photography/img36.jpg);
}
.img37 {
grid-area: img37;
background-image: url(../images/photography/img37.jpg);
}
.img38 {
grid-area: img38;
background-image: url(../images/photography/img38.jpg);
}
.img39 {
grid-area: img39;
background-image: url(../images/photography/img39.jpg);
}
.img40 {
grid-area: img40;
background-image: url(../images/photography/img40.jpg);
}
.img41 {
grid-area: img41;
background-image: url(../images/photography/img41.jpg);
}
.img42 {
grid-area: img42;
background-image: url(../images/photography/img42.jpg);
}
.img43 {
grid-area: img43;
background-image: url(../images/photography/img43.jpg);
}
.img44 {
grid-area: img44;
background-image: url(../images/photography/img44.jpg);
}
.img45 {
grid-area: img45;
background-image: url(../images/photography/img45.jpg);
}
.img46 {
grid-area: img46;
background-image: url(../images/photography/img46.jpg);
}
.img47 {
grid-area: img47;
background-image: url(../images/photography/img47.jpg);
}
.img48 {
grid-area: img48;
background-image: url(../images/photography/img48.jpg);
}
.img49 {
grid-area: img49;
background-image: url(../images/photography/img49.jpg);
}
.img50 {
grid-area: img50;
background-image: url(../images/photography/img50.jpg);
}
.img51 {
grid-area: img51;
background-image: url(../images/photography/img51.jpg);
}
.img52 {
grid-area: img52;
background-image: url(../images/photography/img52.jpg);
}
@media screen and (max-width: 1250px) {
.gallery-img {
height: 400px;
}
.gallery-img.tall-1 {
height: 480px;
}
.gallery-img.tall-2 {
height: 960px;
}
}
@media screen and (max-width: 1000px) {
.gallery-img {
height: 560px;
}
.gallery-img.tall-1 {
height: 560px;
}
.gallery-img.tall-2 {
height: 1120px;
}
#index-gallery {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas: "img1" "img2" "img3" "img4" "img5" "img6" "img7" "img8" "img9" "img10" "img11" "img12" "img13" "img14" "img15" "img16" "img17" "img18" "img19" "img20" "img21" "img22" "img23" "img24" "img25" "img26" "img27" "img28" "img29" "img30" "img31" "img32" "img33" "img34" "img35" "img36" "img37" "img38" "img39" "img40" "img41" "img42" "img43" "img44" "img45" "img46" "img47" "img48" "img49" "img50" "img51" "img52";
}
}
@media screen and (max-width: 775px) {
#index-gallery {
gap: 25px;
}
.gallery-img {
height: 480px;
}
.gallery-img.tall-1 {
height: 480px;
}
.gallery-img.tall-2 {
height: 960px;
}
}
@media screen and (max-width: 500px) {
#index-gallery {
gap: 10px;
margin-bottom: 10px;
}
.gallery-img {
height: 288px;
}
.gallery-img.tall-1 {
height: 288px;
}
.gallery-img.tall-2 {
height: 576px;
}
}
.article-header {
height: 500px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 0 0 50px 0;
}
.article-header.everest {
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)), url("../images/article-everest.jpg");
background-position: 0 30%;
}
.article-header.development {
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)), url("../images/article-dev.jpg");
}
.article-header.nbc {
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)), url("../images/article-nbc.jpg");
background-position: 0 10%;
}
.article-header.chinese {
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)), url("../images/article-china.jpg");
background-position: 0 30%;
}
.article-header.pakistan {
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)), url("../images/article-pakistan.jpg");
background-position: left !important;
}
.article-header.nepal {
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)), url("../images/article-nepal.jpg");
}
.article-header.space {
background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75)), url("../images/article-space.jpg");
}
@media screen and (max-width: 800px) {
.article-header {
padding: 50px 25px 50px 25px;
}
}
@media screen and (max-width: 500px) {
.article-header {
padding: 50px 15px 50px 15px;
}
}
.article-titlebox {
width: 100%;
max-width: 750px;
text-align: left;
}
.article-titlebox .sans {
font-size: 40px !important;
}
.hv {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
background-color: #F5F5F5;
height: 60px;
margin: -50px 0 50px 0;
}
@media screen and (max-width: 500px) {
.hv {
margin: -50px 0 25px 0;
}
}
.hv .hv-container {
display: flex;
align-items: center;
text-align: center;
}
.hv .hv-container p {
font-style: italic;
font-size: 13px;
transition: color 0.3s ease-in-out;
}
.hv .hv-container svg {
height: 24px;
margin: 0 0 0 10px;
}
.hv .hv-container svg path {
fill: #000000;
transition: fill 0.3s ease-in-out;
}
.hv .hv-container:hover p {
color: #C5A459;
}
.hv .hv-container:hover svg path {
fill: #C5A459;
}
.hv p {
margin: 0;
}
@media screen and (max-width: 325px) {
.hv {
height: 80px;
padding: 0 0 5px 0;
}
.hv .hv-container {
flex-direction: column;
}
.hv p {
margin: 0;
}
}
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
justify-content: center;
align-items: center;
gap: 25px;
margin: 25px 0 25px 0;
}
.video-grid.top {
margin: 0px 0 25px 0;
}
@media screen and (max-width: 800px) {
.video-grid {
grid-template-columns: repeat(1, 1fr);
}
}
.video-grid .video-grid-container {
width: 100%;
height: auto;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 15px 0;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.video-grid .video-grid-container video {
width: 100%;
height: auto;
margin: 0;
}
@media screen and (max-width: 800px) {
.video-grid .video-grid-container video {
height: 400px;
width: 315px;
}
}
.vid-container {
width: 100%;
height: auto;
max-width: 1200px;
margin: 25px 0 25px 0;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 15px 0;
}
@media screen and (max-width: 800px) {
.vid-container {
margin: 15px 0 15px 0;
}
}
.vid-container video {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.role {
margin: 75px 0 50px 0;
}
.role h1 {
margin: 0 0 30px 0;
}
.role ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
list-style-type: none;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 600px) {
.role ul {
grid-template-columns: repeat(2, 1fr);
}
}
.role li {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
font-family: "area-normal", sans-serif;
font-weight: 300;
text-align: center;
letter-spacing: 0.5px;
font-size: 14px;
padding: 10px 15px;
border-radius: 5px;
background-color: #F5F5F5;
}
@media screen and (max-width: 375px) {
.role li {
height: 60px;
}
}
.viewfull {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-height: -moz-fit-content;
max-height: fit-content;
margin: 70px 0px 50px 0px;
padding: 40px 0px 50px 0px;
background-color: #FAFAFA;
}
.viewfull.white {
background-color: #ffffff;
}
.viewfull h3 {
text-align: center;
font-size: 18px;
margin-bottom: 20px;
letter-spacing: 1px;
}
.viewfull.two {
display: flex;
flex-direction: row;
justify-content: center;
}
.viewfull.two .viewfull-content {
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
margin: 0px 50px 0px 50px;
}
@media screen and (max-width: 800px) {
.viewfull {
height: -moz-fit-content;
height: fit-content;
}
.viewfull.two {
flex-direction: column;
}
.viewfull .viewfull-content {
padding: 25px 0;
}
}
.viewfull .full-1 {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 250px;
width: 300px;
border-radius: 15px;
transition: all 0.3s ease-in-out;
}
.viewfull .full-2 {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 250px;
width: 200px;
border-radius: 15px;
transition: all 0.3s ease-in-out;
}
.viewfull .viewfull-content:hover .full-1, .viewfull .viewfull-content:hover .full-2 {
scale: 103%;
}
.viewfull .viewfull-content:hover h3 {
color: #C5A459;
}
.article-line {
width: 200px;
height: 1.5px;
background-color: #000000;
border: none;
margin: 0;
text-align: left;
margin: 0 0 25px 0;
}
.center-line {
width: 200px;
height: 1.5px;
background-color: black;
border: none;
}
.chinese-doc {
background-image: url(../images/chinese/chinese-cover.png);
}
.nbc-doc {
background-image: url(../images/nbc/nbc-cover-1.png);
box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px;
}
.nbc-doc-2 {
background-image: url(../images/nbc/nbc-cover-2.png);
box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px;
}
.space-doc {
background-image: url(../images/space/space-cover.jpg);
}
.everest-doc {
background-image: url(../images/everest/everest-cover-1.png);
}
.everest-doc-2 {
background-image: url(../images/everest/everest-cover-2.png);
}
.dev-doc {
background-image: url(../images/development/dev-cover-1.png);
}
.dev-doc-2 {
background-image: url(../images/development/dev-cover-2.png);
}
.pakistan-doc {
background-image: url(../images/pakistan/paki-cover.png);
}
.viewnext {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #ffffff;
height: 300px;
margin: 0 0 0 0;
width: 100%;
text-align: center;
}
.viewnext h3 {
font-size: 18px;
}
.viewnext h2 {
padding-top: 10px;
transition: color 0.3s ease;
margin: 0;
}
.viewnext h2:hover {
color: #C5A459;
}/*# sourceMappingURL=stylesheet.css.map */