@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Jost', sans-serif;
    overflow-x: hidden;

}
.container {
    max-width: 1320px;
}

h2{
    font-family: sans-serif;
}
html {
    scroll-behavior: smooth;
}
.neg
{
    margin-right: -20px;
}
.nav_main
{   justify-content: center;
    width: 100%;
    position: fixed;
    top:5%;
    left: 50%;
    gap:20px;
    transform: translateX(-50%);
    z-index: 10;
}

.navbar
{
    padding: 0;
}
.navbar_nav {
    list-style: none;
    margin: 0;
    gap: 20px;
    padding: 10px 20px;
}
.logo_border
{
        margin-right: -10px;
}

.navbar_nav a {
    text-decoration: none;
}

.nav-link:focus
{
  color: inherit;
}

.nav_links {
    animation: navbarAnimation linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 100%; 
    background-color: var(--nav-bg);
    color: var(--nav-color);
}

@keyframes navbarAnimation {
    0%, 17% { 
        --nav-bg: rgba(64, 64, 64, 0.7); 
        --nav-color: white; 
    }
    17.01%, 29% { 
        --nav-bg: rgba(0, 0, 0, 0.2); 
        --nav-color: black; 
    }
    29.01%, 43% { 
        --nav-bg: rgba(64, 64, 64, 0.7); 
        --nav-color: white; 
    }
    43.01%, 78% { 
        --nav-bg: rgba(245, 245, 245, 0.8); 
        --nav-color: black; 
    }
    78.01%, 100% { 
        --nav-bg: rgba(64, 64, 64, 0.7); 
        --nav-color: white; 
    }
}


.nav-link {
    font-size: 12px;
    background-color: transparent;
    animation-timeline: scroll(root);
    animation-range: 0% 100%; 
    color: inherit;
    
}

.nav-link:hover {
    animation: navbarAnimationHover linear both;

}

@keyframes navbarAnimationHover {
    0%, 17% { color: black; }
    17.01%, 29% { color: white; }
    29.01%, 100% { color: black; }
}




.nav-btn {
    text-decoration: none;
    font-size: 14px;
    padding: 15px 20px;
    animation: navbarbtn linear both;
    animation-timeline: scroll(root);
    animation-range: 0% 100%; 
    background-color: var(--btn-bg);
    color: var(--btn-color);
}

@keyframes navbarbtn {
    0%, 17% { 
        --btn-bg: white; 
        --btn-color: black; 
    }
    17.01%, 29% { 
        --btn-bg: black; 
        --btn-color: white; 
    }
    29.01%, 43% { 
        --btn-bg: white; 
        --btn-color: black; 
    }
    43.01%, 78% { 
        --btn-bg: black; 
        --btn-color: white; 
    }
    78.01%, 100% { 
        --btn-bg: white; 
        --btn-color: black; 
    }
}

.nav-btn:hover
{
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}   

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #222;
}

.hero-img {
    width: 100%;
    filter: brightness(70%);
    display: block;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    position: absolute;
    top: 50%;
    padding: 0 32px;
    transform: translateY(-50%);
    width: 84%;
    max-width: 700px;
    gap: 12px;
}

.hero-label {
    font-size: 20px;
}

.hero-content h1 {
    font-family:sans-serif;
    font-size: 70px;
    line-height: 1.1;
    margin: 0;
}

.hero-description {
    max-width: 580px;
    font-size: 18px;
    line-height: 1.7;
}
.hero-description p{
    margin: 0;
    font-size: 16px;
}
.hero-btn {
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    font-family: sans-serif;
    border-radius: 30px;
    width: fit-content;
}

.hero-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}

.img-text {
    background-color: #000;
    color: #fff;
    padding: 60px;
}

.video-column {
    padding: 30px 60px;
}


.phone-video {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 20px;
}

.phone_text {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:20px;
}

.bullet_point {
    width: 20px; 
    height: 20px;
    background-color: #6c757d;
    border-radius: 20px; 
    transition: width 2s ease, background-color 1s ease; 
    
}

.detail_item:has(details[open]) .bullet_point {
    height: auto;

    background-color: white; 
}
.detail_item:has(details[open]) .app_details summary
{    font-size: 20px;
}
.detail_item
{
    gap:20px;
 
}


.app_details summary {
    list-style: none;
    letter-spacing: 0.05em;
    font-size: 18px;
}

.app_details p {
    max-width: 440px;
    margin: 0;
}
.app_details_heading
{
    white-space: pre-line;
    font-size: 48px;
  font-family: 'Inter', sans-serif;
    margin: 0;
}



.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    font-size: 48px;
    margin-bottom: 25px;
}

.watch_img {
    background-color: #f5f5f2;
    padding: 100px 20px;
    text-align: center;
}

.watch_des {
    padding: 0;
}

.watch_des_title {
    margin: 0 auto 35px;
}

.watch_des h2 {
    font-size: 70px;
    width: fit-content;
    max-width: 600px;
    margin: 0 auto; 
    font-family: sans-serif;
    color: #000;
    line-height: 1.15;
    margin-bottom: 20px;
}

.watch_des p {
    font-size: 16px;
    max-width: 440px;
        
    margin: 0 auto;
    
}

.watch_video {
    position: relative;
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
}

.watch_video video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


.watch_btn {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    border: none;
    font-size: 20px;
    padding: 10px 30px;
    text-decoration: none;
    font-family: sans-serif;
    transition: transform 0.3s ease;
}

.watch_btn:hover {
    color: white;
    transform: translateX(-50%) translateZ(-6px) scale(1.05);
    transition: transform 0.4s ease;
}


.perfect_img {
    width: 100%;
    overflow: hidden;
    max-height:1000px;
}

.perfect_img img {
    width: 100%;
    height: auto;
    display: block;
}
.watch_video_vid
   
{   
    width: 100%;
    display: flex;
     height: 85vh;

}
.watch_video_vid video
{
    width: 100%;
    object-fit: cover;
    height: auto;
    object-position: center;
  
}
.watch_design_title
{   max-width: 700px;
    transform: translateY(-30%);
    top:50%;
    left:2%;
}
.watch_design_title h2 {
    font-size: 60px;
    margin-bottom: 20px;
}
.watch_design_btn
{

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 10px 20px;
 
}
.watch_design_btn:hover {
  color: #fff;
  background-color:rgba(0, 0, 0, 0.5);
  
}
.slider-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 600%; 
  animation: slideAnimation 12s infinite;

}

.slide {
  width: 100%;
  height: 95vh;
  display: flex;
  justify-content: center;
  position: relative; 

}

.slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 35%;
  filter: brightness(60%); 
}

.slide-content {
  max-width: 100%;
  position: absolute;
  bottom: 20%;
  display: block;
  text-align: center;
  color: #ffffff;
  z-index: 2;
}

.slide-content h2 {
  font-family: 'Inter', sans-serif;
  font-size: 58px;
  margin: 0 0 8px 0;
 
}

.slide-content p {
  font-size: 16px;
  margin: 0;
}



@keyframes slideAnimation {
  0% { transform: translateX(0); }          
  12% { transform: translateX(0); }         
  
  16% { transform: translatex(-16.66%); }   
  28% { transform: translateX(-16.66%); }   
  
  32% { transform: translateX(-33.33%); }   
  44% { transform: translateX(-33.33%); }   
  
  48% { transform: translateX(-50%); }   
  60% { transform: translateX(-50%); }   
  
  64% { transform: translateX(-66.66%); }   
  76% { transform: translateX(-66.66%); }   
  
  80% { transform: translateX(-83.33%); }   
  92% { transform: translateX(-83.33%); }   
  
  100% { transform: translateX(0); }   
}
.info_section
{
    padding: 100px 0;
}

.info_des h2
{   color: black;
    font-size: 70px;
}

.info_des
{
    width: fit-content;
}
.text-secondary p
{
    white-space: pre-line;
}

.info_img 
{    
    height: 85vh;
    display: flex;
    width: 100%;
    padding: 0 3rem;
}
.info_img img{
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    height: auto;
}
.slider_about_main
{
    width: 100%;
    overflow: hidden;
}
.slide_a
{
    width: 100%;
    flex: 0 0 100%;
 
}
.slider_about
{   display: flex;
    animation: infoslider 16s infinite ;
}

@keyframes infoslider 
{
    0%, 18.75% { transform: translateX(0); }
    25%, 43.75% { transform: translateX(-100%); }
    50%, 68.75% { transform: translateX(-200%); }
    75%, 93.75% { transform: translateX(-300%); }
    100% { transform: translateX(0); }
}

.w_content
{
    max-width: 300px;
}
.w_content h2
{
    font-size: 60px;
}

.search_box
{
    width: 100%;
    border: none;
    background-color: #f6f6f6;
    color: black;
}
.search_box:focus
{   outline: none;
}

.pink-section {
    min-height: 400px;

    background:
        radial-gradient(
            circle at 55% 15%,
            #ff4f85 0%,
            transparent 35%
        ),
        linear-gradient(
            to bottom,
            #f47772 0%,
            #f58b83 40%,
            #f58b83 70%,
            #ffffff 100%
        );
}

.learn_content
{
    padding: 100px 20px;
   justify-content :center;
   display: flex;
   flex-direction: column;
}
.learn_img
{   
    width: 500px;
    height: auto;
}
.learn_heading h2
{
    font-size: 70px;
    color:black ;
}
.learn_p
{
    color: #854b4b;
}
.learn_more_btn 
{
    background-color: black;
    color: #ff4f85;
    font-size: 16px;
    padding: 18px 25px;
    border:none;
    transition: transform 0.3s ease;
}
.learn_more_btn:hover
{
    background-color: white;
    color: black;
    transform: translateZ(-6px) scale(1.03); 
    transition: transform 0.4s ease; 
 
}
.learn_more_img
{
    width: 100%;
}
.learn_more_img img
{
    width: 100%;
    
}

.black_bg
{
    background-color: black;
    padding-top: 2rem;
}
.privacy_main
{
    padding: 70px 20px;
    gap:40px;
}
.privacy_img
{   max-width: 620px;
    height: auto;
    display: flex;
    justify-content: center;
}
.privacy_img img
{
    width: 100%;
}
.privacy_content h2
{   white-space: pre-line;
    font-size: 68px;
}
.privacy_btn {
  width: fit-content;
  border: none;
  padding: 15px 25px;
  background-color: white;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.privacy_btn:hover {
  transform: translateZ(-6px) scale(1.03); 
  transition: transform 0.4s ease; 
}



.faq
{
    padding: 100px 30px;
    margin: 0;
}

.faq_main
{   padding: 100px 200px;
}
.faq_h h2
{
    font-size: 60px;
    font-family: sans-serif;
}

.faq_details summary {
  list-style: none;
  cursor: pointer;
    font-size: 14px;
}

.faq_details summary::after {
  content: "+";
  float: right;
  font-size: 14px;
}
details[open].faq_details summary::after {
  content: "x ";
}

.faq_details {
    background-color: #0d0d0d;
    border-radius: 30px;
    padding: 20px;
    margin-bottom: 15px;

}


.faq_answer {
    margin-top: 15px;
    
}

.faq_answer p {
    margin: 0;
    line-height: 1.7;
    color: white;
    font-size: 14px;   
}
.more_faq a
{
        text-underline-offset: 4px;
}


.subscribe_content h2
{   font-family: sans-serif;
    color: white;
    font-size: 70px;
}
.subscribe_content p
{
    color: #ffffffb3;

}
.sub_input
{
    padding: 0 50px;
}

.policy_checkbox
{
    align-items: center;
    gap:10px;
}
.sub_search
{
    width: 100%;
    border: none;
    background-color: #343434;
    color: white;
    padding: 13px 20px;
}
.sub_search:focus
{   outline: none;
}


.subscribe_btn
{   font-size: 14px;
    padding: 10px 30px;
    background-color: white;
    border: none;
}
.subscribe_btn:hover
{
    background-color: rgba(255,255,255,0.9);
}

.sub_search::placeholder
{
    font-size: 14px;
}


#big_check
{
    width: 16px;
    height: 16px;
}
.policy_checkbox p
{
    font-size: 12px;
}
.policy_link
{   
    color: #ffffffb3;
}
.policy_link:hover
{   
    color: #ffffff;
}
.container-fluid
{
    padding: 0;
}
.main_footer
{
    padding: 0 20px;
    gap: 50px;
}
.footer_links
{
    gap:120px;
    padding: 0 30px;
    align-items: start;
    justify-content: center;
}
.link_h h3
{
    font-size: 18px;
    font-weight: bold;
}
.page_links a
{
    color:#ffffffb3;
    text-decoration: none;
}

.page_links
{
    min-width: 140px;
}

.footer_text
{   font-size: 12px;
    color: #ffffffb3;
}
.footer_img
{
    gap: 50px;
}
/* <------- FAQ --------> */


/* <------- Privacy Policy --------> */


.pp_banner
{
    position: relative;
    width: 100%;
    height: 50vh;
    overflow: hidden;
    
}
.privacy_policy_des p
{
    font-size: 18px;
    margin: 0 auto;
    max-width: 100%;
    text-align: left;
    margin-bottom: 1rem;
     font-family: 'Jost', sans-serif !important;
    color: #78716c;
}
.privacy_policy_des h2
{   padding-top: 3rem;
    padding-bottom: 1rem;
    color: #1c1917;
    font-family: 'Jost', sans-serif !important;
    font-weight: 500;
}


.privacy_policy_des strong
{
    color: black;
    font-weight: 500;
}
.quoted-text::before {
  content: "“";
}
.quoted-text::after {
  content: "”";
}
.privacy_policy_main
{
    padding: 8rem 17rem;
}
/* <------- About Us --------> */
.about_section
{
    padding: 100px 20px 0 20px;
}
.about_des h2
{
    font-size: 60px;
    width: fit-content;
    margin: 0 auto; 
    font-family: sans-serif;
    line-height: 1.15;
    margin-bottom: 20px;
}
.about_image_content
{
    display: flex;
    gap: 1rem;
}

.about_image
{
    min-width: 650px;
    height: auto;
    padding: 0 2rem;

}

.about_content p
{
    font-family:  "Faculty Glyphic", sans-serif;
    font-weight: 400;
}
.about_image img
{
    max-width: 100%;
}
.big_text p {
    font-size: 90px;
    font-family: "Faculty Glyphic", sans-serif;
    font-weight: 400;
    color: black;
    margin: 0;
    line-height: 0.9;
}
.big_text_main
{
    padding: 222px;
}
.big_text
{
   text-align: center;
}
@media (max-width: 768px) 

{
.hero {
        height: 85vh;
        min-height: 550px;
    }
.hero-img
    {
    height: 100%;
    }
.hero-content {
        width: 100%;
        padding: 0 20px;
    }
.hero-label {
        font-size: 14px;
    }
.hero-description,
.hero-description p {
        font-size: 14px;
    }
.img-text {
        padding: 40px 20px;
    }

    .video-column {
        padding: 20px 10px;
    }

    .phone-video {
        max-width: 100%;
        height: auto;
    }


.mobile_video
{
    flex-direction: column;
}

.phone_text {
        padding: 25px 10px;
        gap: 15px;
    }

.detail_item {
        gap: 12px;
        }

.app_details_heading {
       font-size: 32px;
        }

.app_details summary {
        font-size: 16px;
        }

.feature-list li {
        font-size: 28px;
        margin-bottom: 15px;
        }
.watch_img {
        padding: 50px 15px;
    }

    .watch_des h2 {
        font-size: clamp(32px, 6vw, 44px);
    }

    .watch_des p {
        font-size: 14px;
    }

    .watch_btn {
        font-size: 14px;
        padding: 8px 20px;
    }

.slide
{
    height:70vh ;
}
.slide-content
{
 width: 90%;
 bottom: 12%;
}

.slide-content h2 {
   font-size: clamp(28px, 5vw, 40px);
}
.slide-content p {
        font-size: 14px;
}
.watch_video_vid
{
    height: 95vh;
}

.watch_design_title
{
    top:70%;
}
.watch_design_title h2{
    font-size: 50px;
}

.info_section {
        padding: 50px 15px;
    }

    .info_des h2 {
        font-size: clamp(32px, 6vw, 44px);
    }

    .info_img {
        height: 50vh;
        padding: 0px 1rem;
        
    }
    .text-secondary p
    {   white-space: normal;
    }
     .w_content {
        max-width: 100%;
    }

    .w_content h2 {
        font-size: 36px;
    }

.learn_content {
 padding: 50px 20px;
    }

.learn_heading h2 
{
    font-size: clamp(32px, 6vw, 44px);
}

.learn_img 
{
    max-width: 100%;
}

.privacy_main
{
    flex-direction: column;
    padding: 40px 20px;
    align-items: center;
    gap: 25px;
}
.privacy_img img
{
    width: 80%;
}
.privacy_content
{
    align-items: center;
}

.privacy_content h2
{
    font-size: 30px;
    white-space: nowrap;
}
.privacy_content p
{
    font-size: 14px;
}
.faq_h h2
{
    font-size: 30px;
}
.faq_main
{
    margin: 0 30px;
}

.footer_links
{
    flex-wrap: wrap;
    gap:50px
}

.subscribe_content h2{
    font-size: 35px;
}
.subscribe_content p {
    font-size: 10px;
}
.sub_input
{
    flex-direction: column;
    padding: 0 20px;
}
.policy_checkbox

{   gap:0;
    align-items: start;
}
.footer_img
{
    gap:20px
}
}

@media (max-width: 480px) 
{
.sub_search
{
    padding: 10px 20px;
}


}