@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

*{margin: 0px;padding: 0px;box-sizing: border-box;}
body > div{padding: 24px;height: 100vh;box-sizing: border-box;}
.header{display: flex; flex-direction: column;background-image: url('../img/back.png');background-repeat: no-repeat;background-position-x: 90%;background-position-y: 0%;background-size: 600px;position: relative;}
.header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.75); /* Black with 50% opacity */
    z-index: 1;
  }
.header-nav{display: flex; justify-content: space-between;align-items: center;z-index: 2;}
.header-nav > a > img{width: 180px;}
.header-body{flex: 1;display: flex;align-items: center;justify-content: flex-start;z-index: 2; padding-left: 64px;}
.header-body > div{display: flex; flex-direction: column;gap: 12px;}
.header-body > div > p:nth-of-type(1){font-family: 'Comfortaa', sans-serif;font-size: 28px;text-align: left;line-height: 36px;font-weight: 700;color: #5f5f5f;}
.header-body > div > p:nth-of-type(2){font-family: 'Comfortaa', sans-serif;font-size: 32px;text-align: left;color: skyblue;font-weight: 900;margin-top: 12px;}
.stores{display: flex;gap: 24px;align-items: center;justify-content: flex-start;}
.stores > a:nth-of-type(1) > img{width: 160px;}
.stores > a:nth-of-type(2) > img{width: 200px;}
.social-media{display: flex;gap: 24px;}

.summary{display: flex;gap: 0px;align-items: center;justify-content: center;flex-direction: row; background-color: white;}
.summary > h2{font-family: 'Comfortaa', sans-serif;font-size: 48px;color: #5f5f5f; color: black; flex: 1; padding: 48px;line-height: 64px;}
.summary > ul{display: flex;gap: 0px;align-items: center;justify-content: center;flex-direction: column;flex: 1;}
.summary > ul > li{display: flex;gap: 12px;align-items: center;justify-content: center; color: black; font-family: 'Comfortaa', sans-serif; font-weight: 500; font-size: 24px;flex-direction: column;padding: 32px 48px;width: min-content;line-height: 36px; text-align: center;}
.summary > ul > li:nth-of-type(2){border-bottom: 1px solid black;border-top: 1px solid black;}
.summary > ul > li > span:nth-of-type(1){font-size: 64px;}
.summary > ul > li:nth-of-type(1) > span:nth-of-type(1){color: gold;}


.feed-summary{display: flex;gap: 0px;align-items: center;justify-content: center;flex-direction: row-reverse; background-color: skyblue;}
.feed-summary > h2{font-family: 'Comfortaa', sans-serif;font-size: 48px;color: #5f5f5f; color: white; flex: 1; padding: 48px; line-height: 64px;}
.feed-summary > ul{display: flex; flex-direction: row; gap: 0px;align-items: center; justify-content: center;flex: 1;}
.feed-summary > ul > li{display: flex;gap: 12px;align-items: center;justify-content: center; color: white; font-family: 'Comfortaa', sans-serif; font-weight: 500; font-size: 24px;flex-direction: column;padding: 32px 48px;width: min-content;line-height: 36px; text-align: center;}

.feed-summary > ul > li:nth-of-type(2){border-left: 1px solid white;}
.feed-summary > ul > li > span:nth-of-type(1){font-size: 64px;}


.about{background-color: skyblue;display: flex; flex-direction: column;background-image: url('../img/back.png');background-repeat: no-repeat;background-position-x: 90%;background-position-y: 0%;background-size: 600px;position: relative;}

.about::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(135, 206, 235, 1); /* Black with 50% opacity */
  z-index: 1;
}

.about > h2{font-family: 'Comfortaa', sans-serif;font-size: 48px;color: white;margin: 12px;z-index: 2;}

.about > div{flex: 1;display: flex;align-items: center;justify-self: center;z-index: 2; width: 75%;}

.about > div > p{font-family: 'Comfortaa', sans-serif;font-size: 24px;text-align: left;line-height: 32px;font-weight: 400;color: white;margin: 0px 48px;}

body > div.footer{padding: 0px;display: flex;flex-direction: column;height: auto;}

.footer > div{display: flex;}

.footer > div:nth-of-type(1){flex-direction: row;justify-content: space-between;align-items: center; padding: 64px; height: 100vh;}

.footer > div:nth-of-type(1) > div{display: flex; flex-direction: column;gap: 12px;flex: 1;}

.footer > div:nth-of-type(1) > div > p:nth-of-type(1){font-family: 'Comfortaa', sans-serif;font-size: 28px;text-align: left;line-height: 32px;font-weight: 700;color: #5f5f5f;}
.footer > div:nth-of-type(1) > div > p:nth-of-type(2){font-family: 'Comfortaa', sans-serif;font-size: 32px;text-align: left;color: skyblue;font-weight: 900;margin-top: 12px;}

.footer > div:nth-of-type(1) > div:nth-of-type(2){display: flex;align-items: center;}

.footer > div:nth-of-type(1) > div > img{height: 70vh;}

.footer > div:nth-of-type(2){background-color: skyblue;display: flex;flex-direction: column;height: 50vh;}

.footer > div:nth-of-type(2) > div:nth-of-type(1){flex: 1; display: flex;align-items: center;justify-content: flex-start;}

.footer > div:nth-of-type(2) > div:nth-of-type(1) > div{display: flex;align-items: flex-start;justify-content: center; flex-direction: column;gap: 12px;padding-left: 64px;}

.footer > div:nth-of-type(2) > div:nth-of-type(1) > div > p{font-family: 'Comfortaa', sans-serif;font-size: 21px;text-align: left;line-height: 28px;font-weight: 600;color: white;}

.footer > div:nth-of-type(2) > div:nth-of-type(1) > div > div{display: flex;gap: 12px;align-items: center;margin-top: 12px;}

.footer > div:nth-of-type(2) > div:nth-of-type(1) > div > div > span{font-family: 'Comfortaa', sans-serif;font-size: 21px;text-align: left;line-height: 28px;font-weight: 600;color: white;}


.footer > div:nth-of-type(2) > div:nth-of-type(2){padding: 24px;display: flex;justify-content: space-between;align-items: flex-end;}

.footer > div:nth-of-type(2) > div:nth-of-type(2) > p{font-family: 'Comfortaa', sans-serif;font-size: 14px;color: white;}

.footer > div:nth-of-type(2) > div:nth-of-type(2) > p > a{text-decoration:none; color:white;}
.docs{display: flex; gap: 16px;}
.docs > a{color: white; font-family: 'Comfortaa', sans-serif; text-decoration: none; font-size: 12px;}

@media only screen and (max-width: 500px) {

    .header{background-position-y:80%;background-size: 400px;background-position-x: 50%;}
    .header::before {
      background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    }
    .header-nav > a > img{width: 100px;}
    .header-body, .footer > div:nth-of-type(1),.footer > div:nth-of-type(2) > div:nth-of-type(1) > div{padding:0px 24px;}

    .summary{flex-direction: column;gap: 18px;}
    .feed-summary{flex-direction: column-reverse;gap: 18px;}

    .summary > h2, .feed-summary > h2{font-size: 32px;line-height: 48px;padding: 16px;flex: 0;}
    .summary > ul, .feed-summary > ul{flex-direction: row;gap: 0px;align-items: flex-start;justify-content: center;flex: 0;}
    .feed-summary > ul{flex-direction: column;align-items: center;}


    .summary > ul > li{align-self: stretch;}
    .summary > ul > li, .feed-summary > ul > li{font-size: 16px; padding: 16px 24px;line-height: 18px; gap: 8px; justify-content: space-between;}

    .summary > ul > li:nth-of-type(2), .feed-summary > ul > li:nth-of-type(2){border: none;}
    .summary > ul > li:nth-of-type(2){border-left: 1px solid black; border-right: 1px solid black;}
    .feed-summary > ul > li:nth-of-type(2){border-top: 1px solid white;}
    .summary > ul > li > span:nth-of-type(1), .feed-summary > ul > li > span:nth-of-type(1){font-size: 64px;}
    .summary > ul > li > span:nth-of-type(2), .feed-summary > ul > li > span:nth-of-type(2){font-weight: 900;}
    

    .about > h2 {margin: 4px 0px; font-size: 32px;}
    .about > div{width: 100%;}
    .about > div > p{margin: 0px 18px;font-size: 18px;}

    .stores > a:nth-of-type(1) > img{width: 120px;}
    .stores > a:nth-of-type(2) > img{width: 150px;}

    .footer > div:nth-of-type(1){flex-direction: column-reverse;}
    .footer > div:nth-of-type(1) > div{flex: 3}
    .footer > div:nth-of-type(1) > div:nth-of-type(2){flex: 5;}


    .footer > div:nth-of-type(1) > div > img{height: 50vh;}

    .footer > div:nth-of-type(1) > div{justify-content: center; padding: 0px 8px;}

    .footer > div:nth-of-type(2) > div:nth-of-type(1) > div > p{font-size: 16px;line-height: 24px;}

    .footer > div:nth-of-type(2) > div:nth-of-type(1) > div > div > span{font-size: 14px;}
    .footer > div:nth-of-type(2) > div:nth-of-type(1) > div > div > img{width: 24px;}

    .footer > div:nth-of-type(2) > div:nth-of-type(2){flex-direction: column-reverse; align-items: center;gap: 8px;}

    .footer > div:nth-of-type(2) > div:nth-of-type(2) > p{font-size: 12px;}

    .docs{flex-direction: row; gap: 8px;}

    .social-media img{width: 24px; height: 24px;}
    .social-media{gap: 12px;}

}

/* Dashboard CTA Main */
.dashboard-cta-main {
    background: white;
    padding: 80px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    box-sizing: border-box;
}

.dashboard-cta-main h2 {
    font-family: 'Comfortaa', sans-serif;
    font-size: 48px;
    color: #5f5f5f;
    font-weight: 700;
    line-height: 64px;
    margin-bottom: 24px;
    text-align: center;
}

.dashboard-cta-main p {
    font-family: 'Comfortaa', sans-serif;
    font-size: 24px;
    color: #5f5f5f;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 48px;
    text-align: center;
}

.dashboard-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: skyblue;
    color: white;
    text-decoration: none;
    padding: 20px 40px;
    border-radius: 50px;
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    font-size: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(135, 206, 235, 0.3);
}

.dashboard-btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(135, 206, 235, 0.4);
    background: #5fb3d4;
}

.dashboard-icon-main {
    font-size: 28px;
}

.dashboard-arrow-main {
    font-size: 24px;
    transition: transform 0.3s ease;
}

.dashboard-btn-main:hover .dashboard-arrow-main {
    transform: translateX(5px);
}

@media only screen and (max-width: 500px) {
    .dashboard-cta-main {
        padding: 48px 24px;
        min-height: 40vh;
    }
    
    .dashboard-cta-main h2 {
        font-size: 32px;
        line-height: 48px;
        margin-bottom: 16px;
    }
    
    .dashboard-cta-main p {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 32px;
    }
    
    .dashboard-btn-main {
        padding: 16px 32px;
        font-size: 18px;
        gap: 12px;
    }
    
    .dashboard-icon-main {
        font-size: 24px;
    }
    
    .dashboard-arrow-main {
        font-size: 20px;
    }
}

@media only screen and (max-width: 400px) {
  .header{background-size: 300px;}
  
  .dashboard-cta-main h2 {
      font-size: 28px;
      line-height: 36px;
  }
  
  .dashboard-cta-main p {
      font-size: 16px;
      line-height: 22px;
  }
  
  .dashboard-btn-main {
      padding: 14px 28px;
      font-size: 16px;
  }
}