/* General styling */
html, body {
  margin: 0;
  padding: 0;
  background-color: #4f5f7f;
  font-family: Arial, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Header */
header {
  background-color: #609ceb;
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: margin-left 0.4s ease;
}

header h1 {
  margin: 0;
  font-size: 1.5rem;
}

/* Sidebar */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;                     /* starts collapsed */
  height: 100%;
  background-color: #d8d9e7;
  overflow-x: hidden;
  transition: width 0.4s ease;
  z-index: 1050;                 /* above other elements */
  padding-top: 40px;             /* space for header */
  box-shadow: 2px 0 5px rgba(0,0,0,.1);
}

#sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#sidebar ul li {
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
}

#sidebar ul li:hover {
  background-color: #e2e6ea;
  cursor: pointer;
}

/* Sidebar toggle button */
#sidebarToggle {
  position: fixed;
  top: 60px;                     /* just below header */
  left: 10px;
  z-index: 1060;                 /* above sidebar when collapsed */
  background: #609ceb;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: left 0.4s ease;
}

/* Hero section */
#hero {
  margin-left: 0;                 /* will be updated by JS */
  background-color: #4f5f6f;
  color: #fff;
  height: 40vh;                   /* 30% of viewport height */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  box-sizing: border-box;
  transition: margin-left 0.4s ease;
  background-image: url("hero_bg.jpg");
  background-size: cover;
  background-position: center -25vh;
}

#hero h2 {
  margin: 0;
  font-size: 1.8rem;
  text-align: right;
}

/* Hero subsection */
#hero_sub {
  margin-left: 0;                 /* will be updated by JS */
  background-color: #4f5f6f;
  color: #fff;
  height: 50px;                   /* 30% of viewport height */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  box-sizing: border-box;
  transition: margin-left 0.4s ease;
  box-shadow: 2px 0 5px rgba(0,0,0,.1);
}

#hero_sub h2 {
  margin: 0;
  font-size: 1.8rem;
  text-align: right;
}
/* Title_1 section */
#title_1_sec {
  margin-left: 0;                 /* will be updated by JS */
  background-color: #4f5f6f;
  color: #fff;
  height: 15vh;                   /* 15% of viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  transition: margin-left 0.4s ease;
  background-image: url("title_bg1.jpg");
  background-size: cover;
  background-position: center -25vh;
}

#title h2 {
  margin: 0;
  font-size: 1.8rem;
  text-align: right;
}

/* Title_2 section */
#title_2_sec {
  margin-left: 0;                 /* will be updated by JS */
  background-color: #4f5f6f;
  color: #fff;
  height: 15vh;                   /* 15% of viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  transition: margin-left 0.4s ease;
  background-image: url("title_bg2.jpg");
  background-size: cover;
  background-position: center -10vh;
}

#title_2 h2 {
  margin: 0;
  font-size: 1.8rem;
  text-align: right;
}

/* Title_3 section */
#title_3_sec {
  margin-left: 0;                 /* will be updated by JS */
  background-color: #4f5f6f;
  color: #fff;
  height: 15vh;                   /* 15% of viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  transition: margin-left 0.4s ease;
  background-image: url("title_bg3.jpg");
  background-size: cover;
  background-position: center;
}

#title_3 h2 {
  margin: 0;
  font-size: 1.8rem;
  text-align: right;
}

/* About section */
#about {
  margin-left: 0;                 /* will be updated by JS */
  padding: 20px 20px;
  transition: margin-left 0.4s ease;
  background-color: #fff;
}

#about h3 {
  margin-top: 0;
}

/* About section */
#cta {
  margin-left: 0;                 /* will be updated by JS */
  padding: 20px 20px;
  transition: margin-left 0.4s ease;
  background-color: #ffd;
}

#cta h3 {
  margin-top: 0;
}


/* footer section */
#contact {
  margin-left: 0;                 /* will be updated by JS */
  padding: 40px 20px;
  background-color: #4f5f7f;
  color: #fff;
  transition: margin-left 0.4s ease;
  height: 25vh;
  background-image: url("footer_bg.jpg");
  background-size: cover;
  background-position: center;
}

/* Adjustments when sidebar is open */
body.sidebar-open #sidebar {
  width: 250px;                   /* sidebar width when expanded */
}

body.sidebar-open #sidebarToggle {
  left: 260px;                    /* button moves right */
}

body.sidebar-open header,
body.sidebar-open #hero,
body.sidebar-open #contact,
body.sidebar-open #title_1_sec,
body.sidebar-open #title_2_sec,
body.sidebar-open #title_3_sec,
body.sidebar-open #about {
  margin-left: 250px;             /* push content right */
}