@charset "utf-8";
/* ----------------------------- PRACTICE - CSS ----------------------------------- */
* {
  box-sizing: border-box;
}
 
/*This isnt working - Something is wrong with the background color displaying. - 5/26/25 */
body {
  background-color: #eeeeee;
}
 
/* ALSO MEDIA Q HAVE TO GO AFTER YOUR CODE. OTHERWISE SHIT WONT WORK! */ 
/*THIS IS FOR THE WEBSITE MAINTAINANCE Block out once finished with maintenance*/
.site-service {
  text-align: center;
  font-family: "Montserrat", sans-serif;
	font-weight: 400;
  color: #667797;
  padding: 1rem;
}
/*THIS IS FOR THE WEBSITE MAINTAINANCE*/

 /* Main navbar styling */

/*PRACTICE - CSS*/
/* This nav bar is possibly already working well. The thing is the Wave design is sitting below. So it might
seem as though the navbar is Fully colored. */ 

/*NAVBAR - Dropdown + Media Q. */

.navbar {
  display:flex;
  justify-content: space-between;
  align-items: center;
}

/* This is for the Logo in the Index.html, so its adjusting the placement.*/
.brand-title {
  padding-left: 4rem;  /* or use margin-left: 2rem; */
  display: flex;
  align-items: center;
}

.navbar-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-links li {
  list-style: none;
}

/* Link styling - The text is not spacing out - 5/3/25 */
.navbar-links {
  display: flex;
  list-style-type: none;
  white-space: nowrap; /* Prevents wrapping of links */ 
}


/*This code of the Navbar works with spacing and sizing */
.navbar-links a {
  padding: 10px 26px;
  margin: 0 20px;
  text-decoration: none;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  background-color: #ffffff; /* Add background */
  border-radius: 24px; /* More rounded corners */
  transition: background-color 0.3s, color 0.3s;
  display: inline-block; /* Ensures the background wraps the text */
}

/*The Hover state for the Links*/
.navbar-links a:hover {
  background-color: rgb(18, 18, 18);   /* Change background on hover */
  color: #ffffff;
}

/*Code for the NAVBAR WILL GO HERE. MEDIA Q and also adjust the mediaQ below
since this is targeting something and might interfere. Just start Fresh - 5/20/25 */

/*This is for MOBILE VIEW*/
@media (max-width: 768px) {
  .toggle-button {
    display: flex;
  }
  .navbar-links {
    display: none;
  } 
  .navbar {
  flex-direction: column;
  align-items: flex-start;
  }
  .navbar-links ul {
    width: 100%;
    flex-direction: column;

}

.navbar-links li {
  text-align: center;
}

/*This adds spacing between the text when they are on mobile.*/
.navbar-links li a {
  padding: .5rem 1rem;

}

.navbar-links.active{
  display: flex;

}
/* closing Media Q for 768px */
}

/* This is adjusting all the text for heading and pargraphs in Shield, Stexa and DalO. */
.header {
  position:sticky;
  text-align:left;
}

/* LOGO for Site */
.logo {
  width: 10rem;
  max-width: 100%;
  padding: 2rem;
  display: inline-block;
  vertical-align: middle;
  height: auto;
}

.inner-header {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*This is for the Text below the heading - This might be adjusted for "Design" Text instead also change the colors */
.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: rgb(255, 255, 255);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  padding: 4rem;
}
 

/*Being used for the Navbar Links*/
/* unvisited link */
a:link {
  color: #202020;
}

/* visited link */
a:visited {
  color: #202020;
}

/* mouse over link */
a:hover {
  color: #40ccff;
}

/* selected link */
a:active {
  color: #40ccff;
}

/* This is for your Heading */

 /*This is the heading for the Home page*/
 .hello-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 800; 
  font-size: 4rem;
  line-height: 8rem;

 }

/*This is the container for the Paragraphs below the Heading Title*/
.container-heading {
  padding: 4rem;
  font-family: "Montserrat", sans-serif;
	font-weight: 400;
  font-size: 1.5rem;
  text-align: left;
}


.card {
  max-width: fit-content;
  max-height: fit-content;
/*
  Below is the syntax for adding values to the box shadow property 
  box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
*/-webkit-box-shadow: 2px 2px 1px 2px rgba(160,160,160,0.30);
	box-shadow: 2px 2px 14px 2px rgba(160,160,160,0.30);

}

.card-text{ 
  font-family: "Montserrat", sans-serif;
	font-weight: 300;
}

.card-title {
  font-family: "Montserrat", sans-serif;
	font-weight: 600;

}

 
/* This is for the Design Process Div styling */
.dprocess {
  font-family: "Montserrat", sans-serif;
	font-weight: 300;
  line-height: 2.5rem;
  padding: 2rem;
  text-align: left;
}

/*This controls your Containers for each projects. It applies this Max setting for the whole thing. */
.projects {
  max-width: fit-content;
  max-height:fit-content;
  margin-bottom: 2rem;
  
}

/*What makes the text go to the center when on mobile */
.container-fluid {
  text-align: center;
} 

 .btn-outline-primary{
			/*
  Below is the syntax for adding values to the box shadow property 
  box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
*/-webkit-box-shadow: 2px 2px 1px 2px rgba(160,160,160,0.50);
	box-shadow: 2px 2px 14px 2px rgba(160,160,160,0.50);

}

/*This is for the Quotes Sections*/

.q-section {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: #E8E8E8;
  width: fit-content;
  
}
.quote-h{
  padding-bottom: 2rem;
  font-family: "Montserrat", sans-serif;
	font-weight: 600;
}

/*NEED to fix Spacineg 1/4/24*/
.quotes{
  padding: 2rem;
}
 
/*This is for the Quotes Sections*/

/* START - STREXA PAGE */
.heading-s {
  text-align: left;
  padding: 6rem 8rem; /* top/bottom 6rem, left/right 8rem for lots of whitespace */
  font-family: "Montserrat", sans-serif;
  line-height: 2rem;
}

.heading-s-sub {
  color: #2781ff; /* Subheading color */
}

.strexa-headings {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 2rem;
}

.strexa-process {
  text-align: left;
  padding: 6rem 8rem; /* top/bottom 6rem, left/right 8rem for lots of whitespace */
  font-family: "Montserrat", sans-serif;
  line-height: 2rem;
}
 
.s-img {
  max-width: 80%;   /* Image won't exceed its container's width */
  height: auto;      /* Maintains aspect ratio */
  border-radius: 1rem;
  display: block;  /* Ensures the image is treated as a block element */
  margin: 0 auto;   /* Centers the image horizontally */  
}

.s-wireframe {
  max-width: 90%;
  max-height: 90%;
  border-radius: 1rem;
}

.st-wireframe {
  text-align: center;
  padding-bottom: 2rem;
}

/* MEDIA QUERIES - STREXA */
/* For screens smaller than 768px (adjust as needed) */

@media (max-width: 992px) { /* TABLET VIEW */
  .heading-s {
    padding: 4rem 4rem; /* Reduce side padding on tablets */
  }
    
  .strexa-process {
    padding: 4rem 4rem; /* Less left/right padding on tablets */
  }

  .s-img {
    max-height: 100%;
    width: 100%; /* Ensure the image fits within its container */
  }

  }

@media (max-width: 768px) {/* MOBILE VIEW */
  .heading-s {
    padding: 2rem 2rem; /* Even less padding on mobile */
  }

  /*This is for the text below the heading of index page.*/
  .content{
    padding: 1rem;
  }

 .strexa-process {
    padding: 2rem 2rem; /* Less left/right padding on mobile */
  }
  .s-img {
    max-height: 100%;
    width: 100%; /* Ensure the image fits within its container */
  }

}
/* END OF MEIDA Q for Strexa */
/* END - STREXA PAGE */

/* THIS IS FOR SHEILD PAGE */
 
.heading-m {
  text-align: left;
  padding: 6rem 8rem; /* top/bottom 6rem, left/right 8rem for lots of whitespace */
  font-family: "Montserrat", sans-serif;
  line-height: 2rem;
}

.shield-headings {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 2rem;
}
.heading-m-sub {
  color: #2781ff; /* Subheading color */
}

.shield-process {
  text-align: left;
  padding: 6rem 8rem; /* top/bottom 6rem, left/right 8rem for lots of whitespace */
  font-family: "Montserrat", sans-serif;
  line-height: 2rem;
}

.m-img {
  max-width: 80%;   /* Image won't exceed its container's width */
  height: auto;      /* Maintains aspect ratio */
  border-radius: 1rem;
  display: block;    /* Ensures the image is treated as a block element */
  margin: 0 auto;   /* Centers the image horizontally */  
}

.shield-wf {
  max-width: 100%; /* Ensure the image doesn't exceed its container */
  height: auto;    /* Maintain the aspect ratio of the image */
  display: block;    /* Ensures the image is treated as a block element */
  border-radius: 2rem; /* Rounded corners for the image */
  padding: 1rem;
  margin: 0 auto; /* Centers the image horizontally */
}

.shield-persona {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers images horizontally */
  gap: 1rem;           /* space between images */
}

.s-personas {
  max-width: 100%;      /* responsive width */
  height: auto;        /* maintain aspect ratio */
  display: block;
  margin: 0 auto;      /* center image if not using flex */
  border-radius: 1rem;
}

/*This is for the Shield Slides */
.gs-shield {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2rem 0; /* Optional: add vertical space */
}

.gs-shield iframe {
  width: 90%;
  max-width: 960px; /* Or your preferred max width */
  height: 56vw;  
  border-radius: 1rem;   /* For 16:9 aspect ratio responsiveness */
  max-height: 569px;
  border: none;
}
/*This is End of shield Google Slides */

/*THIS IS FOR SHEILD - Media Q*/
@media (max-width: 992px) { /* TABLET VIEW */
  .heading-m {
    padding: 4rem 4rem; /* Reduce side padding on tablets */
  }

  .m-img {
    max-height: 100%;
    width: 100%; /* Ensure the image fits within its container */
  }

    .shield-process {
    padding: 4rem 4rem; /* Less left/right padding on tablets */

  }

  .wireframe-layout {
     max-height: 100%;
     width: 100%; /* Ensure the image fits within its container */
  }
  }

@media (max-width: 768px) {/* MOBILE VIEW */
  .heading-m {
    padding: 2rem 2rem; /* Even less padding on mobile */
  }

  .m-img {
    max-height: 100%;
    width: 100%; /* Ensure the image fits within its container */
  }

  .shield-process {
    padding: 2rem 2rem; /* Less left/right padding on mobile */
  }

  .wireframe-layout {
     max-height: 100%;
     width: 100%; /* Ensure the image fits within its container */
  }

  .shield-persona {
    flex-direction: column;
    gap: 1rem;
  }
  .s-personas {
    max-width: 100%;
  }

}
/* THIS IS FOR SHEILD Media Q */
/* END OF SHEILD PAGE */

/* START of DALO SYSTEMS PAGE*/

.dalo-headings {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 2rem;
}

.heading-d {
  text-align: left;
  padding: 6rem 8rem; /* top/bottom 6rem, left/right 8rem for lots of whitespace */
  font-family: "Montserrat", sans-serif;
  line-height: 2rem;
}

.dprocess {
  text-align: left;
  padding: 6rem 8rem; /* top/bottom 6rem, left/right 8rem for lots of whitespace */
  font-family: "Montserrat", sans-serif;
  line-height: 2rem;
}

 .heading-d {
  text-align: left;
  padding: 6rem 8rem; /* top/bottom 6rem, left/right 8rem for lots of whitespace */
  font-family: "Montserrat", sans-serif;
  line-height: 2rem;
}

.heading-d-sub {
  color: #2781ff; /* Subheading color */
}

.dalo-wf {
  max-width: 90%;
  max-height: 90%;
}
 
.d-img {
  max-width: 80%;   /* Image won't exceed its container's width */
  height: auto;      /* Maintains aspect ratio */
  border-radius: 1rem;
  display: block;    /* Ensures the image is treated as a block element */
  margin: 0 auto;   /* Centers the image horizontally */  
}

 @media (max-width: 992px) { /* TABLET VIEW */
  .heading-d {
    padding: 4rem 4rem; /* Reduce side padding on tablets */
  }

  .dprocess {
    padding: 4rem 4rem; 
  }

  .d-img {
    max-height: 100%;
    width: 100%; /* Ensure the image fits within its container */
  }

  } 

@media (max-width: 768px) {/* MOBILE VIEW */

  .heading-d {
    padding: 2rem 2rem; /* Even less padding on mobile */
    }

    .dprocess {
    padding: 2rem 2rem; /* Less left/right padding on mobile */
    }


  .col-dalo {
  padding: 1rem; /* Adjust padding for smaller screens */

}

  .d-img {
    max-height: 100%;
    width: 100%; /* Ensure the image fits within its container */
  }


}
 /*THIS IS FOR THE RESUME PAGE*/

.resume-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center-align items horizontally */
  padding-bottom: 4rem;
  padding-top: 4rem;
}

.resume {
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  
}
 
.resume-img {
  padding: 0.5rem;
  max-width: 90%;
  max-height: 90%;
  border-radius: 2rem;
  background-color: rgb(255, 255, 255); /* Adjust the last value (0.8) for the desired level of transparency */
  backdrop-filter: blur(10px); /* Adds a blur effect to the transparent background (optional) */
  -webkit-box-shadow: 2px 2px 1px 2px rgba(160, 160, 160, 0.50);
  box-shadow: 2px 2px 14px 2px rgba(160, 160, 160, 0.50);
}

.resume-img img {
  
  max-width: 100%; /* Ensure the image fits within its container */
  max-height: 100%; /* Ensure the image fits within its container */
  border-radius: 2rem;
  object-fit: contain; /* Maintain aspect ratio while fitting within the container */
} 
 /*THIS IS END OF RESUME PAGE*/

 /*THIS IS FOR THE BIO PAGE*/
 /*This part is for the Profile image/background*/
 
 /*this is the first text before all the info on Bio page.*/
blockquote p {
  font-size: 0.875rem; /* Adjust as needed, e.g., smaller than default */
}

 .profile-bio{
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  height: 65vh; /* Set the height to the full viewport height */

 }

 

 .img-fluid {
  width: 100%; /* Ensure the image doesn't exceed its container */
  height: 100%; /* Ensure the image doesn't exceed its container */
  padding: 2rem;
  
 }

.img-fluid-heading {
  width: 90%; /* Ensure the image doesn't exceed its container */
  height: 100%; /* Ensure the image doesn't exceed its container */
  padding: 1rem;
}

 .user {
  text-align: center;
  
 }

 .profile {
  position: absolute; /* Set the profile overlay to absolute positioning */
  top: 50%; /* Position the overlay at the vertical center */
  left: 50%; /* Position the overlay at the horizontal center */
  transform: translate(-50%, -50%); /* Center the overlay */
  
 
 }


 /*This is the background image */
.background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background-image: url('r-images/bio-img-profile.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1; /* Ensure the background appears behind other content */
}


.container-bio {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  line-height: 2.5rem;
  padding: 2rem;
 }

 .bold-ending{
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
 }

.cards {
  display: flex;
  justify-content: center; /* Align items horizontally to the center */
  flex-wrap: wrap; /* Allow items to wrap to the next line if necessary */
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  padding-bottom: 4rem;
}


.card-skill {
  width: 300px; /* Set the width of each card */
  margin: 2rem; /* Add some space between cards */
  padding: 20px; /* Add padding inside each card */
  border-radius: 2.5rem;
  box-shadow: 8px 10px 35px rgba(53, 53, 53, 0.22);
  backdrop-filter: blur(2rem);
  
}

.card-cont {
  text-align: center; /* Align text content to the center */
}

.list-skills {
  list-style-type: none; /* Remove default bullet points */
  padding-left: 0; /* Remove default padding */
}


.list-skills li {
  position: relative; /* Required for absolute positioning of pseudo-element */
  padding-left: 20px; /* Add space for the custom arrow */
  margin-bottom: 8px; /* Adjust spacing between list items */  
}

.list-skills li:before {
  content: "\279C"; /* Unicode character for arrow */
  position: absolute; /* Position the arrow */
  left: 0; /* Align the arrow with the start of the list item */
  color: #202020; /* Customize the color of the arrow */
  font-size: 1.5rem; /* Customize the size of the arrow */
  margin-top: -2px; /* Adjust vertical alignment of arrow */
 
}
/*This is End of the Card Skills */

/*THIS IS END OF THE BIO PAGE*/

/*THIS IS FOR THE CONTACT PAGE */

/*This is for the button for contact page. */

.glow-on-hover {
  width: 150px;
  height: 50px;
  border: none;
  outline: none;
  color: #202020;
  background: #ffffff;
  position: relative;
  z-index: 0;
  border-radius: 10px;
 
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #f52222, #fb9847, #ffec20, #a647ff, #55b0ff, #3187ff, #196aff, #38c0ff, #2781ff);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #ffffff;
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffffff;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

.contact-info {
  text-align: center;
  padding: 4rem;
  font-family: "Montserrat", sans-serif;
	font-weight: 600;
 
 
}
.contact-info a {
  margin: 2rem;
  display: inline-block; /* Ensures the anchor tags behave like block-level elements */
  text-decoration: none;
  line-height: 50px; /* Adjust line height to match button height */
  vertical-align: middle; /* Align text vertically in the middle */
}

.contact-main {
  display: inline-block; /* Ensures the anchor tags behave like block-level elements */
  font-family: "Montserrat", sans-serif;
	font-weight: 600;
  padding: 2rem;
  text-align: center;
  line-height: 2rem;
  }