@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);

* {
  margin: 0px;
  padding: 0px;
  font-family: "Open Sans";
}

html {}

nav {
    position: absolute;
    top: 30px;
    left: 0px;
    width: 100%;
    z-index: 5;
    display: flex;
    align-items: center;
  }

  body {
 
  }

  .snap-wrap {   
   
 }

nav > img {width: 52px;border-radius: 50px;margin-right: 15px;margin-left: 35px;}  
  
  .nav-links {
    list-style-type: none;
    display: flex;
    align-items: column;
    justify-content: space-between;
  }
  
  .nav-links > li {
    padding: 5px;
  }

  .ghost-div {width: 100%; ;}
  
  .nav-links > li > a {
    color: rgb(59, 59, 59);
    text-decoration: none;
    padding: 15px;
    transition: 0.2s ease;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
  }
  
  .nav-links > li > a:hover {
    color: rgba(66, 66, 66, 0.685);
  }
  
  .section-wrap {height: 100vh;background-color: white;display: flex;align-items: center;justify-content: center;scroll-snap-align: start;}

  .text-container { width: 500px}

  .text-container > p {font-size: 22px;
    line-height: 45px;
  margin-top: 25px;margin-bottom: 25px;color: #525252;}

  .text-container > h1 {     font-size: 3.4rem;
    font-weight: 800;
    line-height: 70px;color: #0c0c0c;}

    .center-text {margin: auto; width: fit-content;}

    .center-text > div > p {text-align: center; width: 100%;}

  .main-container {display: flex;justify-content: space-between;gap: 14vw;}

  .media-container > img {width: 600px;border-radius: 10px;box-shadow: 0px 5px 15px -2px rgba(0,0,0,0.42)}

  .cta-btn {    background: linear-gradient(
    162deg
    , rgba(207,65,130,1) 6%, rgba(221,54,78,1) 100%);
        width:292px;
        height: 59px;
        font-size: 18px;
        color: white;
        border: none;
        border-radius: 45px;
        margin-top: 16px;
        font-weight: bold;cursor: pointer;}

    .cta-btn > span {color: rgb(255 255 255 / 66%);
        margin-left: 4px;}

.cta-wrap {display: flex;justify-content: center;margin-top: 100px;}

.flat > img {box-shadow: none !important;}

.text-wrap {    display: flex;
    justify-content: center;
    align-items: center;
}

.txt > h1{line-height: 60px; font-size: 3rem;}

.media-container > video {    width: 634px;
    height: 463px;
    border-radius: 20px;box-shadow: 0px 5px 15px -2px rgba(0,0,0,0.32)}

.vid-m {gap: 11vw;}

.flatm > video  {width: 650px;height:369px ;}

.flatb > video {width: 644px;height:369px }

footer {background-color:#F9F9F9;width: 100%;height: fit-content;padding-top: 130px;scroll-snap-align: start;}

.footer-nav {position: static;margin-top: 80px;padding-bottom: 50px;}

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

    .section-wrap {height: fit-content;    margin-top: 155px;;}
.a {flex-direction: column;gap: 0;}

.top {margin-top: 100px !important;}

.b {flex-direction: column-reverse;gap: 0;}


.top > div {margin-bottom: 50px;}

.text-wrap {justify-content: left;margin-bottom: 30px;}

.top-sub {margin-bottom: 30px;}

}

@media only screen and (max-width: 645px) {
    .text-container {width: 100%;
        padding: 28px;
        box-sizing: border-box;}

    .media-container {width: 100%;display: flex; justify-content: center;}

 .media-container > video {border-radius: 15px;}

 .flat > video {width: 348px;
    height: 252px;}

    .flatb > video {width: 348px;
        height: 199px;}

        .flatm > video {width: 348px;
            height: 199px;}

        .section-wrap {height: fit-content}

        .text-wrap {margin-bottom: 0px;}

        .media-container > img {width: 348px; border-radius: 15px;
          height: 439px;
          object-fit: contain;
          box-shadow: none;
      }

      .center-text > div > h1 {text-align: center;}

      .nav-links > li {padding: 0px;}

      nav {    flex-direction: column;
        gap: 15px;}

        .top {margin-top: 121px;}

        nav > img {margin-left: 0px;}
}