/*
 *	WebFont Package Licensed to Megan Mkrtchyan
 */
@font-face {
   font-family: "Nagel";
   src: url("nagel-font-family/Nagel_Regular.woff") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}
/* Redaction Regular */
@font-face {
   font-family: "Redaction";
   src: url("woff2/Redaction-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Redaction Italic */
@font-face {
   font-family: "Redaction";
   src: url("woff2/Redaction-Italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Redaction Bold */
@font-face {
   font-family: "Redaction";
   src: url("woff2/Redaction-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* Redaction 10 Regular */
@font-face {
   font-family: "Redaction 10";
   src: url("woff2/Redaction10-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Redaction 10 Regular Italic */
@font-face {
   font-family: "Redaction 10";
   src: url("woff2/Redaction10-Italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Redaction 10 Bold */
@font-face {
   font-family: "Redaction 10";
   src: url("woff2/Redaction10-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* Redaction 100 Regular */
@font-face {
   font-family: "Redaction 100";
   src: url("woff2/Redaction100-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Redaction 100 Regular Italic */
@font-face {
   font-family: "Redaction 100";
   src: url("woff2/Redaction100-Italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Redaction 100 Bold */
@font-face {
   font-family: "Redaction 100";
   src: url("woff2/Redaction100-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* Redaction 20 Regular */
@font-face {
   font-family: "Redaction 20";
   src: url("woff2/Redaction20-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Redaction 20 Regular Italic */
@font-face {
   font-family: "Redaction 20";
   src: url("woff2/Redaction20-Italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Redaction 20 Bold */
@font-face {
   font-family: "Redaction 20";
   src: url("woff2/Redaction20-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* Redaction 35 Regular */
@font-face {
   font-family: "Redaction 35";
   src: url("woff2/Redaction35-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Redaction 35 Regular Italic */
@font-face {
   font-family: "Redaction 35";
   src: url("woff2/Redaction35-Italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Redaction 35 Bold */
@font-face {
   font-family: "Redaction 35";
   src: url("woff2/Redaction35-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* Redaction 50 Regular */
@font-face {
   font-family: "Redaction 50";
   src: url("woff2/Redaction50-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Redaction 50 Regular Italic */
@font-face {
   font-family: "Redaction 50";
   src: url("woff2/Redaction50-Italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Redaction 50 Bold */
@font-face {
   font-family: "Redaction 50";
   src: url("woff2/Redaction50-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* Redaction 70 Regular */
@font-face {
   font-family: "Redaction 70";
   src: url("woff2/Redaction70-Regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

/* Redaction 70 Regular Italic */
@font-face {
   font-family: "Redaction 70";
   src: url("woff2/Redaction70-Italic.woff2") format("woff2");
   font-weight: 400;
   font-style: italic;
   font-display: swap;
}

/* Redaction 70 Bold */
@font-face {
   font-family: "Redaction 70";
   src: url("woff2/Redaction70-Bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}
h1 {
   margin-top: 0; /* Adjust as needed */
   margin-bottom: 0; /* Adjust as needed */
   margin-left: 0;
   margin-right: 0;
}
h2 {
   font-family: "Redaction";
   font-style: italic;
   font-size: 4vw;
   text-align: center;
   text-decoration: underline;
}
.footer {
   font-family: Nagel;
   font-size: 1.2rem;
   color: #4357ad;
   text-align: center;
}
.line {
   width: 92%;
   text-align: right;
   margin-right: 5px;
   border: none;
   border-radius: 15px;

   border-top: 4px solid #4357ad;
   transition: width 1s ease;
}
@media (max-width: 1300px) {
   .line.active {
      width: 35% !important; /* Reduce width on medium screens */
   }
}

@media (max-width: 1024px) {
   .line.active {
      width: 25% !important; /* Reduce width on medium screens */
   }
}

@media (max-width: 768px) {
   .line.active {
      width: 10% !important; /* Further reduce width for smaller screens */
   }
}

@media (max-width: 730px) {
   .line.active {
      width: 0% !important; /* Further reduce width for very small screens */
   }
}
.line.active {
   width: 55%;
}
.house-icon:hover {
   border-radius: 5px;
   padding: 0px;
   background-color: #d0b4de;
}
.container {
   display: flex;
   align-items: center;
   justify-content: center;
}
/* Menu Styling*/

.nav div {
   height: 4px;
   background-color: #4357ad;
   margin: 5px 0;
   border-radius: 25px;
   transition: 0.3s;
}
.nav {
   border-radius: 5px;
   padding: 15px;
   width: 30px;
}
/* Nav Animation */
.one {
   width: 30px;
}
.two {
   width: 20px;
}
.three {
   width: 25px;
}
.nav:hover div {
   width: 30px;
}
.nav:hover {
   color: white;
   background-color: #d0b4de;
}

/* off-screen-menu */
.off-screen-menu {
   font-family: "Nagel";
   height: auto; /* Allow height to adjust dynamically */
   position: absolute;
   left: 30px;
   display: flex;
   align-items: center;
   justify-content: left;
   text-align: center;
   font-size: 1.5vw; /* Relative font size */
   opacity: 0;
   transition: opacity 0.5s ease;
   pointer-events: none; /*can't click */
   margin-right: 20px;
}
/* Style each menu item */
.off-screen-menu li {
   border-radius: 5px;
   padding: 10px 20px;
   opacity: 0;
   color: #4357ad;
   animation: fadeIn 1s forwards;
   pointer-events: none;
}
.off-screen-menu.active li {
   pointer-events: auto;
   cursor: pointer;
}
@media (max-width: 1024px) {
   .off-screen-menu {
      width: 70%;
      font-size: 2.2vw;
   }
}

@media (max-width: 768px) {
   .off-screen-menu {
      width: 90%;
      font-size: 3vw;
   }
}

@media (max-width: 480px) {
   .off-screen-menu {
      width: 100%;
      font-size: 3vw;
   }
}

/* Adjust padding for medium screens */
@media (max-width: 1024px) {
   .off-screen-menu li {
      padding: 8px 16px;
   }
}

/* Adjust padding for smaller screens */
@media (max-width: 768px) {
   .off-screen-menu li {
      padding: 6px 12px;
   }
}

/* Adjust padding for very small screens */
@media (max-width: 480px) {
   .off-screen-menu li {
      margin-left: 0px;
      margin-right: 0px;
      padding-left: 2px;
      padding-right: 2px;
      left: 0px;
   }
}
/* Define the fade-in animation */
@keyframes fadeIn {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

.off-screen-menu li:hover {
   color: white;
   background-color: #4357ad;
}
/* Align items in a row */
.off-screen-menu ul {
   list-style: none; /* Remove bullet points */
   display: flex; /* Display list items horizontally*/
   gap: 30px; /* Space between items */
}
/* Fade in the menu when active */
.off-screen-menu.active {
   opacity: 1; /* Fully visible */
   pointer-events: auto;
}

/* Glitch Effect */
.glitch {
   position: relative;
   text-shadow: rgb(18, 32, 122) 0.05em 0.05em 0;
}
.glitch:before,
.glitch:after {
   display: block;
   content: attr(data-glitch);
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.8;
}
.glitch:before {
   animation: glitch-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
   color: #0ff;
   z-index: -1;
}
.glitch:after {
   animation: glitch-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
   color: #ff00ff;
   z-index: -2;
}
@keyframes glitch-color {
   0% {
      transform: translate(0);
   }

   20% {
      transform: translate(-3px, 3px);
   }

   40% {
      transform: translate(-3px, -3px);
   }

   60% {
      transform: translate(3px, 3px);
   }

   80% {
      transform: translate(3px, -3px);
   }

   to {
      transform: translate(0);
   }
}

.pink {
   color: #f28482;
}
.teal {
   color: #6cb19d;
}
.yellow {
   color: #f6bd60;
}
.purple {
   color: #4357ad;
}
.text-video-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   padding: 2rem;
   flex-wrap: wrap;
}

.text-section {
   flex: 1;
   min-width: 250px;
}

.video-section {
   flex: 1;
   min-width: 250px;
}

.video-section video {
   width: 100%;
   height: auto;
   border-radius: 12px;
}

/* Stack on mobile */
@media (max-width: 768px) {
   .text-video-container {
      flex-direction: column;
   }

   .video-section,
   .text-section {
      width: 100%;
   }
}
.video-section {
   max-width: 1000px; /* Adjust to match your video width */
   margin: 0 auto;
   padding: 1rem;
   text-align: center;
}

.video-section video {
   width: 100%;
   height: auto;
   display: block;
   margin-bottom: 1rem;
   border-radius: 12px;
}

.image-row {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1rem;
}

.image-row img {
   width: 49%; /* Adjust so both fit side-by-side */
   height: auto;
   border-radius: 8px;
   object-fit: cover;
}
.photo-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 1rem;
   max-width: 1300px;
   margin: auto;
   padding: 1rem;
}

.photo-grid img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   border-radius: 8px;
}

@media (min-width: 600px) {
   .photo-grid {
      grid-template-columns: 1fr 1fr;
   }
}
.tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-left: 5%;
   margin-right: 5%;
}
.tag {
   background-color: #4357ad;
   color: white;
   border-radius: 5px;
   padding: 5px 10px;
   font-size: 0.9em;
}
.section {
   margin-bottom: 40px;
}
.card {
   background: none;
   border: none;
   box-shadow: none;
   padding: 0;
   margin-left: 5%;
   margin-right: 5%;
}
.content {
   border: 4px solid #4357ad;
   border-radius: 10px;
   margin-left: 20%;
   margin-right: 20%;
   background-color: #f1eeff;
}