@font-face {
  font-family: "interFaceTh";
  src: url(InterFace_Trial_Th.ttf) format("truetype");
}

@font-face {
  font-family: "interFaceRg";
  src: url(InterFace_Trial_Rg.ttf) format("truetype");
}

@font-face {
  font-family: "interFaceBd";
  src: url(InterFace_Trial_Bd.ttf) format("truetype");
}

.baskervville-regular {
  font-family: "Baskervville", serif;
  font-weight: 400;
  font-style: normal;
}

.baskervville-regular-italic {
  font-family: "Baskervville", serif;
  font-weight: 400;
  font-style: italic;
}

html{
  scroll-behavior: smooth;
}

/* Navbar container */
body {
  /* background-color: #fefefe; */
  background-color: #F5F3EF;
  margin: 0px;
}

.navbarCont{
  background-color:#F5F3EF;
  width: 100%;
  z-index: 1000;
  position: sticky;
  top: 0;
}

.navbar {
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 16.666667%;
  padding-right: 16.666667%;
  justify-content: space-between;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 1vw;
  text-align: left;
  padding: 0.875vw 1vw;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 1vw;
  border: none;
  outline: none;
  padding: 0.875vw 1vw;
  background-color: inherit;
  font-family: inherit;
  text-align: left;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover,
.dropdown:hover .dropbtn{
  background-color: #FCEFB4;
  border-radius: 1vw;
  transition: 0.3s ease; /* Smooth transition */
}

/* Dropdown content (hidden by default) */
/* .dropdown-content {
  display: none;
  position: absolute;
  min-width: 10vw;
  box-shadow: 0vw 0.5vw 1vw 0vw rgba(0, 0, 0, 0.2);
  z-index: 10;
  background-color: #D5E1E1;
  font-size: 1vw;
  border-radius: 1vw;
} */

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 10vw;
  box-shadow: 0vw 0.5vw 1vw 0vw rgba(0, 0, 0, 0.2);
  z-index: 10;
  background-color: #D5E1E1;
  border-radius: 1vw;
}


/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #FCEFB4;
  padding: 0.75vw 1vw;
  text-decoration: none;
  display: block;
  text-align: left;
  font-family: "interFaceRg";
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #FCEFB4;
  color: #172E3D;
  transition: 0.3s ease; /* Smooth transition */
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  transition: 0.3s ease; /* Smooth transition */
}

h1 {
  font-family: 'Baskervville';
  font-size: 3vw;
  font-weight: 400;
  color: #172E3D;
}

h2{
  font-family: 'Baskervville';
  font-size: 2.5vw;
  font-weight: 100;
}

h3 {
  font-family: 'Baskervville';
  font-size: 1.25vw;
  letter-spacing: 0.1vw;
  font-weight: 400;
  color: #172E3D;
}

h4 {
  font-family: "interFaceRg";
  font-size: 1.25vw;
  text-align: center;
  color: #172E3D;
}

h5 {
  font-family: 'interFaceBd';
  font-size: 1.25vw;
  letter-spacing: 0.1vw;
  font-weight: 400;
  text-transform: uppercase;
  color: #6B796A;
}

p {
  font-family: "interFaceTh";
  font-size: 1.25vw;
  letter-spacing: 0.05vw;
  color: #172E3D;
}

hr {
  background-color: #172E3D;
  height: 0.05vh;
}

.hamburger{
  display: none;
  width: 5vw;
}

.hamburger img{
  width: 100%;
}

#hamburgerMenu{
  background-color: #172E3D;
}

.showDropDown{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.showDropDown a{
  text-decoration: none;
}

#uxDropDown, #artDropDown, #uxShowDropDown, #artShowDropDown{
  width: 100vw;
  text-align: center;
  position: relative;

}

#uxShowDropDown a, #artShowDropDown a{
  text-align: center;
}

.showDropDownCont{
  display: none;
}



.section1, .section2, .section3, .section4, .section5, .section6, .section7, .section8, .section9, .section10, .section11{
  padding-left: 16.666667%;
  padding-right: 16.666667%;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

#carouselExampleIndicators,
.sectionImage {
  width: 100%;
}

.carousel-inner,
.carousel-item,
.sectionImage img {
  width: 100%;
}

.section-bottom {
  display: flex;
}

.section-left,
.section-right {
  width: 50%;
}

.vl {
  border-left: 0.0625vw solid #172E3D;
  height: 6vw;
}

.sectionText {
  margin-top: 1vw;
  margin-bottom: 1vw;
}

.section-heading {
  width: 50%;
}

* {
  box-sizing: border-box
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides,
.mySlides2,
.mySlides3,
.mySlides4,
.mySlides5,
.mySlides6,
.mySlides7,
.mySlides8,
.mySlides9,
.mySlides10 {
  display: none;
}

/* Next & previous buttons */
.prev,
.next,
.prev2,
.next2,
.prev3,
.next3,
.prev4,
.next4,
.prev5,
.next5,
.prev6,
.next6,
.prev7,
.next7,
.prev8,
.next8,
.prev9,
.next9,
.prev10,
.next10 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #F5F3EF;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next,
.next2,
.next3,
.next4,
.next5,
.next6,
.next7,
.next8,
.next9,
.next10 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover,
.prev2:hover,
.next2:hover,
.prev3:hover,
.next3:hover,
.prev4:hover,
.next4:hover,
.prev5:hover,
.next5:hover,
.prev6:hover,
.next6:hover,
.prev7:hover,
.next7:hover,
.prev8:hover,
.next8:hover,
.prev9:hover,
.next9:hover,
.prev10:hover,
.next10:hover {
  background-color: rgba(23, 46, 61, 0.8);
}

/* The dots/bullets/indicators */
.dot,
.dot2,
.dot3,
.dot4,
.dot5,
.dot6,
.dot7,
.dot8,
.dot9,
.dot10 {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #D5E1E1;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover,
.dot2:hover,
.dot3:hover,
.dot4:hover,
.dot5:hover,
.dot6:hover,
.dot7:hover,
.dot8:hover,
.dot9:hover,
.dot10:hover {
  background-color: #172E3D;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

.footerInfo{
  display: flex;
  height: 25vh;
  align-items: center;
  padding-left: 16.666667%;
  padding-right: 16.666667%;
}

.footerLeft{
  width: 90%;
}

.footerLeft h1{
  margin: 0px;
}

.footerRight h4{
  text-align: right;
}

.linkedIn a, .email a{
  text-decoration: none;
}


#fade-in-on-scroll {
  opacity: 0;
  transition: opacity 1s ease-in-out; /* Adjust the duration and easing as needed */
}

#fade-in-on-scroll.visible {
  opacity: 1;
}

.email:hover h4,
.linkedIn:hover h4 {
    text-decoration: underline;
    transition: 0.3s ease; /* Smooth transition */
}



@media screen and (max-width: 600px) {
  h1 {
    font-size: 8vw;
  }
  
  h2{
    font-size: 7vw;
  }
  
  h3 {
    font-size: 3.5vw;
  }
  
  h4 {
    font-size: 3.5vw;
  }
  
  h5 {
    font-size: 3.5vw;
  }
  
  p {
    font-size: 3.5vw;
  }

  .navbar{
    padding-left: 5%;
    padding-right: 5%;
  }

  .hamburger{
    display: block;
  }

  .dropdown, .resume, .aboutMe, .contact{
    display: none;
  }

  .showDropDownCont{
    display: block;
    background-color:#F5F3EF;
    width: 100%;
    z-index: 999;
    position: sticky;
    top: 8%;
  }

  .landing{
    height: auto;
  }

  .section1, .section2, .section3, .section4, .section5{
    padding: 5%;
  }

  .section-bottom{
    flex-direction: column;
  }

  .section-left{
    width: 0%;
  }

  .section-right{
    width: 100%;
  }
}