/* TODO TODO TODO TODO TODO TODO TODO TODO */
/* 1. Create a carousel for smaller screen in GRID Section */
/* 2. Create a modal window for the login section */
/* 3. Create a modal window for the price section */

/* ///////////////////////////////////////////////////////// */

/* VARIABLES */
:root {
  /* TEXT VARIABLES */
  --text-dark: #312418;
  --text-light: #dbdbd9;
  --primary-bg: #ffffff;
  --body-font: 'Open Sans', sans-serif;
  --heading-font: 'Roboto Slab', sans-serif;
  --h1-size: 2.8rem;
  --h1-height: 108px;
  --h2-size: 2rem;
  --h2-height: 75px;
  --h3-size: 40px;
  --h4-size: 32px;
  --h5-size: 28px;
  --h6-size: 22px;
  --subtitle-size: 17px;
  --subtitle-height: 26px;
  --p-size: 18px;
  --p-height: 26px;
  --secondary-text-size: 14px;
  --secondary-text-height: 18px;
  --button-size: 16px;

  /* VARIABLES USED IN STUDIO PROJECT */
  --column-width: 70px;
  --gutter-gap: 30px;
  --gutter-gap-small: 15px;
  --margin--large: 100px;
  --margin--small: 50px;

  /* SPACING VARIABLES */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --standard-width: 1144px;
  /* COLOR VARIABLES */
  --purple-1: #6962f7;
  --purple-2: #7000ff;
  --blue-1: #00d4ff;
  --primary-accent: #0a2540;
  --primary-button-hover: #6d7a88;
  --bg-white: #fff;
  --bg-light: #f7f9fc;
  --button-color: #e1a932;

  --standard-border-radius: 20px;
  --standard-box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.15);
}

/* GENERAL ELEMENT STYLES */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  color: var(--text-dark);
  background-color: var(--primary-bg);
}

h1 {
  text-transform: uppercase;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: var(--h1-size);
  margin: 0;
  width: 100%;
  letter-spacing: -1px;
  line-height: var(--h1-height);
}

h2 {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: var(--h3-size);
  margin: 0;
  width: 100%;
}

h3 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--h3-size);
  margin: 0;
  width: 100%;
}

h4 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--h4-size);
  margin: 0;
  width: 100%;
  letter-spacing: 0.25px;
}

h5 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--h5-size);
  margin: 0;
  width: 100%;
}

h6 {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: var(--h6-size);
  margin: 0;
  width: 100%;
}

a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  transition: color 0.25s ease;
}

a:hover {
  text-decoration: underline;
}

p {
  font-size: var(--p-size);
  line-height: var(--p-height);
  font-weight: 400;
  margin: var(--spacing-md) 0;
}

.brown-button {
  background-color: var(--primary-color);
  font-family: var(--heading-font);
  text-transform: uppercase;
  font-size: 1.2rem;
  color: var(--dark-font-color);
  padding: 8px 32px;
  margin-top: 50px;
  border-style: solid;
  border-color: var(--dark-font-color);
}

/* ////////////////////////////////////////////////////////////// */

* {
  margin: 0;
  padding: 0;
}

/* Navbar and main section styles */
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 64px 0;
}

.navbar .hamburger {
  height: 50px;
  width: 50px;
}
.navbar .bar {
  background-color: black;
  height: 4px;
  width: 36px;
  margin: 3px;
  border-radius: 10px;
}

.navbar .hamburger {
  /* Styles for Hamburger divs is moved in media queries */
  display: none;
}
.navbar .hamburger:hover {
  cursor: pointer;
}

.mobileNav {
  /* Styles for mobileNav is moved in media queries */
  display: none;
}

.mobileNav a {
  margin: 16px 0;
}

.openDrawer {
  transform: translateX(-160px);
}
/* /////////////////////////////////////////////////// */
.main {
  background-image: url('images/profile-image.jpg');
  height: 100vh;
  width: auto;
  background-size: cover;
}

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

.main .navbar a {
  margin-top: 28px;
  padding: 0 20px;
  text-transform: uppercase;
}

.main .about {
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 15%;
}

.main .about h2 {
  font-family: 'Roboto Slab';
  font-size: 2.5rem;
  font-weight: 400;
}

.main .about button {
  border: none;
  text-transform: uppercase;
  font-weight: 700;
  padding: 15px 45px;
  background-color: var(--button-color);
  color: var(--text-light);
  margin-top: var(--spacing-md);
}

.main .about button:hover {
  cursor: pointer;
}

/* Sytle for the grid - section */

.portfolio {
  width: 75%;
  margin: 100px auto;
  text-align: center;
}

.portfolio h2 {
  text-transform: uppercase;
  margin-bottom: var(--spacing-lg);
}

.overlay {
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-columns: var(--column-width);
  gap: var(--gutter-gap);
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    'a a a b b b c c c c c c'
    'a a a b b b c c c c c c'
    'a a a b b b c c c c c c'
    'a a a b b b h h i i j j'
    'd d e e g g h h i i j j'
    'd d e e g g k k k k k k'
    'd d f f g g k k k k k k'
    'd d f f g g k k k k k k';
  height: 75vh;
}

.overlay .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Good practice, removes potential small gaps */
}

.a {
  grid-area: a;
}
.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

.i {
  grid-area: i;
}

.j {
  grid-area: j;
}

.k {
  grid-area: k;
}

.brown-button:hover {
  cursor: pointer;
}

/* ///////////////////////////////////////////////////////////// */
.section-video {
  width: 70%;
  height: 90vh;
  margin: 0 auto;
  margin-bottom: 100px;
  overflow: hidden;
  position: relative;
  display: flex;
}

.section-video .video {
  width: 50%;
  height: 100%;
  position: relative;
}

.section-video .video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-video .video-2 {
  width: 300px;
  height: 200px;
  position: absolute;
  top: 8%;
  left: 42%;
}

.section-video .video-2 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-video .text-content {
  margin: 0 0 0 20px;
  width: 50%;
}

.section-video h3 {
  margin: 270px 0 0 0;
  font-size: 2rem;
  text-transform: uppercase;
}

.section-video p {
  margin: 0;
  font-size: 16px;
}

.section-video .brown-button {
  margin: 10px 0;
}

/* Glass Play Button  */
.custom-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}

/* Triangle Shape in Play Button */
.play-icon {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #fff;
  margin-left: 5px;
}

/* Styles for about-me-section */
#about-me h2 {
  text-align: center;
  margin: 30px 0;
}
.about-me-section {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 200px;
  position: relative;
  display: grid;
  gap: var(--gutter-gap);
  grid-template-areas:
    'a b'
    'c d'; /* NOTES - Use dots while definnig grid template area to leave empty space */
}

.about-text-1 {
  grid-area: a;
}

.about-picture-1 {
  grid-area: b;
}

.about-picture-2 {
  grid-area: c;
}

.about-me-section p {
  margin: 0;
}

.about-me-section .about-picture-1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block; /* Good practice, removes potential small gaps */
}

.about-me-section .about-picture-2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block; /* Good practice, removes potential small gaps */
}

.floating-card {
  width: 400px;
  height: 200px;
  position: absolute;
  bottom: -10%;
  right: 20%;
}
.floating-card {
  display: flex;
}

.about-me-section .floating-card img {
  width: 70%;
  height: 100%;
  object-fit: contain;
  display: block; /* Good practice, removes potential small gaps */
}

/* Styles for Tarrif Section */

.tariff h2 {
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 50px 0;
}

.tariff {
  width: 75%;
  margin: 0 auto;
  margin-bottom: 100px;
}

.tariff .tarrif_column {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tarrif_column .col {
  padding: 20px;
  border: 2px solid var(--text-dark);
}

.tarrif_column .card-details {
  list-style: none;
}

.tarrif_column h3 {
  font-family: 'Roboto Slab';
  font-size: 1.5rem;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
}

.tarrif_column h4 {
  font-family: 'Roboto Slab';
  text-align: center;
  font-size: 1.5rem;
  margin: 10px 0;
}

.tarrif_column .card-details li {
  padding: 8px;
  display: flex;
  justify-content: space-between;
}

.tarrif_column .card-details .label {
  margin: 0 30px 0 0;
}

.tarrif_column .col a {
  display: block; /* NOTES - Link are inline by default */
  text-align: center;
}

.tariff .brown-button {
  padding: 10px 32px;
  font-size: 0.9rem;
}

.tarrif_column .col {
  opacity: 50%;
}

.tarrif_column .active {
  opacity: 100%;
}

/* Styles for Feedback Section */
.feedbacks {
  width: 75%;
  height: 90vh;
  margin: 0 auto;
  margin-bottom: 100px;
  position: relative;
}

.feedbacks a {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--dark-font-color);
}
.feedbacks h2 {
  font-family: 'Roboto Slab';
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 50px;
}

.feedbacks .gtrbtn .btn1 {
  font-weight: 900;
  position: absolute;
  bottom: 50%;
}

.feedbacks .gtrbtn .btn2 {
  font-weight: 900;
  position: absolute;
  right: 0;
  bottom: 50%;
}

.feed {
  padding: 0 5%;
  display: grid;
  gap: var(--gutter-gap);
  grid-template-areas:
    'a a a b b b'
    'c d e f g h';
}

.feed .feed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Good practice, removes potential small gaps */
}
.feed-description {
  grid-area: a;
}

.main-image {
  grid-area: b;
}

.image1 {
  grid-area: c;
}

.image2 {
  grid-area: d;
}

.image3 {
  grid-area: e;
}

.image4 {
  grid-area: f;
}

.image5 {
  grid-area: g;
}

.image6 {
  grid-area: h;
}

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

.feed-description .separator {
  font-size: 2.5rem;
  font-weight: 900;
}
.feed-description .separator span {
  font-weight: 400;
}

.dots {
  margin: 50px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots .first,
.second,
.third,
.fourth,
.fifth {
  width: 15px;
  height: 15px;
  border: 2px solid var(--text-dark);
  border-radius: 50%;
  margin-left: 10px;
}

.dots .active {
  background-color: var(--text-dark);
}

/* Styles for the contacte section */
.contact-me1 {
  width: 100%;
  height: 90vh;
  margin-bottom: 100px;
  position: relative;
}

.contact-me1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Good practice, removes potential small gaps */
}

.contact-me1 .contact-des {
  padding: 30px 100px;
  position: absolute;
  top: 10%;
  left: 20%;
  background-color: var(--primary-bg);
}

.contact-me1 .contact-des h2 {
  text-transform: uppercase;
  margin: 0 0 15px 0;
}

.contact-me1 .contact-des input {
  border: 1.5px solid var(--text-dark);
  padding: 8px 80px;
  margin: 8px 0;
}
.contact-me1 .contact-des #question {
  padding: 20px 80px;
}

.contact-me1 .contact-des .brown-button {
  color: var(--text-light);
  background-color: var(--text-dark);
  border: none;
  margin: 20px 85px;
}

/* Styles for the contacte me section - 02 */
.contact-me2 {
  width: 70%;
  height: 80vh;
  margin: 0 auto;
  margin-bottom: 200px;
  position: relative;
}

.contact-me2 h2 {
  text-align: center;
  text-transform: uppercase;
  font-family: 'Roboto Slab';
  margin: 50px 0;
}

.contact-me2 .layout {
  display: flex;
  position: relative;
}

.contact-me2 .layout .image-2 {
  position: absolute;
  width: 40%;
  bottom: 15%;
  left: 8%;
}

.contact-me2 .layout .image {
  width: 80%;
  height: 50%;
}
.contact-me2 .layout img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Good practice, removes potential small gaps */
}

.contact-me2 .layout .description {
  padding: 25px;
}

.contact-me2 .layout .description p {
  padding: 8px 0;
}

.contact-me2 .layout .description button {
  font-size: 0.8rem;
  margin: 20px 0;
}

/* Styles for the footer section */

.site-footer {
  min-height: 50vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.site-footer .container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer .footer-navbar {
  width: 80%;
  margin: 30px 0 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-footer img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

.site-footer .footer-navbar .logo {
  z-index: 2;
}

.site-footer .footer-navbar .middle {
  z-index: 2;
}
.site-footer .footer-navbar .middle a {
  text-decoration: none;
  color: var(--dark-font-color);
  text-transform: uppercase;
  padding: 0 10px;
  font-size: 0.8rem;
}

.site-footer .footer-navbar .middle a:hover {
  text-decoration: underline;
}
.site-footer .footer-navbar .icons {
  z-index: 2;
}

.site-footer .form {
  width: auto;
  display: flex;
  justify-content: center;
  margin-left: -40px;
}

.site-footer .form input {
  width: 270px;
  height: 30px;
}

.site-footer .form .brown-button {
  color: var(--text-light);
  background-color: var(--text-dark);
  border: none;
  margin: 0;
  margin-left: -2px;
  font-size: 0.8rem;
  padding: 8.5px 24px;
}

/* ///////////////////////////////////////////////////////////// */
/* MEDIA QUERIES FOR RESPONSIVENESS */

@media only screen and (max-width: 768px) {
  .navbar .right {
    display: none;
  }

  .navbar {
    padding: 16px 24px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;
  }

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

  .mobileNav {
    background-color: white;
    width: 75px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 2;
    top: 0;
    right: -160px;
    padding: 16px;
    transition: transform 0.5s;
  }
  .animateBar1 {
    animation: flipBar1 0.5s;
    animation-fill-mode: forwards;
  }

  .animateBar2 {
    animation: fadeBar2 0.5s;
    animation-fill-mode: forwards;
  }

  .animateBar3 {
    animation: flipBar3 0.5s;
    animation-fill-mode: forwards;
  }

  @keyframes flipBar1 {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(45deg) translate(4px, 10px);
    }
  }

  @keyframes fadeBar2 {
    from {
      transform: scaleX(1);
      opacity: 1;
    }
    to {
      transform: scale(0);
      opacity: 0;
    }
  }

  @keyframes flipBar3 {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(-45deg) translate(4px, -10px);
    }
  }

  .main {
    height: 80vh;
    width: 100%;
  }

  .main .about {
    height: 90%;
    display: flex;
    padding-left: 8%;
  }

  .main .about h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 20px;
  }

  .main .about h1 {
    font-size: 2rem;
  }

  .main .about button {
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 40px;
    background-color: var(--button-color);
  }

  .portfolio {
    width: 90%;
  }

  .portfolio h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .overlay {
    display: flex;
    flex-direction: column;
    height: auto;
    grid-area: var(--gutter-gap-small);
  }

  .overlay .item {
    width: 100%;
    height: 300px;
  }

  .section-video {
    width: 90%;
    height: auto;
    flex-direction: column;
    align-items: center;
  }

  .section-video .video {
    width: 100%;
    height: 250px;
  }

  .section-video .video-2 {
    position: relative; /* Remove the overlap for mobile */
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    margin-top: 15px;
  }

  .section-video .text-content {
    width: 100%;
    margin: 20px 0;
    text-align: center;
  }

  .section-video h3 {
    margin: 20px 0 10px 0; /* Reset that large 270px top margin */
  }

  .about-me-section {
    display: block;
    width: 90%;
    margin-bottom: 50px;
  }

  .about-me-section .floating-card img {
    display: none;
  }

  .about-me-section .about-picture-2 {
    display: none;
  }

  .about-me-section .about-picture-1 {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 300px;
    height: 300px;
  }

  .about-me-section .about-picture-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
  }

  .tarrif {
    width: 90%;
  }

  .tariff .tarrif_column {
    width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }

  .feedbacks {
    width: 100%;
  }
  .feedbacks .gtrbtn .btn1 {
    margin-left: 10px;
  }

  .feedbacks .gtrbtn .btn2 {
    margin-right: 10px;
  }
  .feedbacks .feed {
    grid-template-areas:
      'a a b b'
      'c d e f';
  }
  .feedbacks .feed {
    margin: 0 auto;
    width: 85%;
  }

  .feedbacks .feed .image6,
  .image5 {
    display: none;
  }


   .tariff .tarrif_column .col {
    margin-bottom: 20px;
  }

  .contact-me1 .contact-des {
    padding: 12px 36px;
    top: 20%;
    left: 20%;
  }

  .contact-me2 {
    /* display: block; */
    display: none;
  }


  .contact-me2 .layout  .image-2{
    display: none;
  }
  .contact-me2 .layout .description {
    padding: 25px;
  }

}

@media only screen and (max-width: 640px) {
  .section-video {
    width: 90%;
    height: auto;
    grid-template-areas:
      'b b b b b'
      'a a a a c';
  }

  .contact-me1 .contact-des {
    padding: 10px 20px;
    top: 15%;
    left: 10%;
  }

  .contact-me1 .contact-des h2 {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin: 0 0 15px 0;
  }

  .contact-me1 .contact-des input {
    padding: 4px 40px;
    margin: 8px 0;
  }
  .contact-me1 .contact-des #question {
    padding: 10px 40px;
  }

  .contact-me1 .contact-des .brown-button {
    margin: 10px 40px;
  }
}