@import url('https://fonts.googleapis.com/css2?family=Carrois+Gothic&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --default-text-color: rgb(237, 236, 236);
    --background-color: rgb(20, 18, 11);
    --background-hover-color: #1B1913;
    --link-text-color:oklab(65.216% 0.16831 0.1314) ;
    --link-text-hover-color: oklab(0.652196 0.168318 0.131453 / 0.75);
    --btn-text-color:rgb(20, 18, 11);
    --btn-background-color:rgb(241,241,241);
    --btn-hover-color:#D7D6D5;
    --secondary-text-color:oklab(0.943853 0.00107113 0.000336707 / 0.6);
    --black:#191710;
    --card-background-color:rgb(27, 25, 19);
}

*{
    margin: 0;
    box-sizing: border-box;
}

body {
  font-family: "Inter", "Carrois Gothic", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--default-text-color);

  background-color:var(--background-color);
}

header{
    width: 100vw;
    padding:0 20px;
    background-color: var(--background-color);
    position: fixed;
}

#nav-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 1024px;
    max-width: 1300px;
    height: 52px;
    margin: 0 auto;
    
}

#logo-container{
    display: flex;
    align-items: center;
    gap: 3px;
}
#nav-links ul{
    display: flex;
    list-style-type: none;
    align-items: center;
    gap: 32px;
}

.nav-link-item a{
    color: var(--default-text-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-decoration: none;
}

.nav-link-item:hover a{
    color: oklab(0.943853 0.00107113 0.000336707 / 0.75);
}

#nav-right-box{
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn{
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 14px;
    cursor: pointer;
}
#sign-up-btn{
    padding: 5.5px 10.5px;
    border-radius: 13px;
    background-color: rgb(0, 0, 0,0);
    color: var(--default-text-color);
    border: 0.8px oklab(0.943853 0.00107113 0.000336707 / 0.2) solid;
}
#sign-up-btn:hover{
    background-color: var(--background-hover-color);
}

#download-btn{
    background-color: var(--btn-background-color);
    color: var(--btn-text-color);
    padding: 5.5px 10.5px;
    border-radius: 13.5px;
}
#download-btn:hover{
    background-color: var(--btn-hover-color);
}

#hero-section{
    padding: 112px 20px 65px 20px;
}

.container{
    min-width: 1024px;
    max-width: 1300px;
    margin: 0 auto;
}

.top-text{
    width: 36rem;
    margin-top: 46px;
    margin-bottom: 60px;
}
.hero-text{
    font-size: 26px;
    line-height: 33px;
    font-weight: 400;
    text-align: left;
}

.cta-button{
    width:236px ;
    height: 45px ;
    border-radius: 22px;
    background-color: var(--btn-background-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
    margin-top: 24px;
}
.cta-button span{
    margin-top: 4px;
}
.cta-button:hover{
    background-color: var(--btn-hover-color);
}
.cta{
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    color: var(--btn-text-color);
    text-decoration: none;
}

.hero-image-box img{
    width: 1300px;
    height: 683px;
    border-radius: 8px;
    /* object-fit: cover; */
}

#trusted_logos{
    /* padding:0 20px; */
    padding-bottom: 10px;
    
}
#trusted_logos h2{
    text-align: center;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

.logos-container{
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 10px;
    margin-top: 24px;
}

.logo-item {
    /* border: 2px solid red; */
    display: flex;
    width: 154px;
    height: 100px;
    justify-content: center;
    align-items: center;
    background-color: var(--card-background-color);
    border-radius: 5px;
}
.feature-section{
    margin-top:90px;
}

.feature-cont{
    padding: 16px 20px;
    background-color: var(--card-background-color);
    border-radius: 5px;
    display: flex;
    gap: 40px;
}

.feat-left-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}

.feat-text-box{
    display: flex;
    flex-direction: column;
    gap:14px;
}

.feat-desc h3,p{
    font-size: 22px;
    line-height: 29px;
    font-weight: 400;
}

.feat-desc h3{
    color: var(--default-text-color);
}

.feat-desc p{
    color: var(--secondary-text-color);
}

.feat-link{
    display: flex;
    align-items: center;
    gap: 2px;
}

.feat-link a{
    text-decoration: none;
    color: var(--link-text-color);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.feat-link a:hover{
    color: var(--link-text-hover-color);
}

.feat-image-container img{
    border-radius: 5px;
}


.testimonial-container h3{
    text-align: center;
    font-size: 36px;
    line-height: 43px;
    color: var(--default-text-color);
    font-weight: 400;
    margin-bottom: 45px;
}

.testimonial-section{
    margin-top: 85px;
    padding-top: 45px;
}

.testimonial-cards-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.feedback-text, pre{
    font-size: 16px;
    font-family: "Inter", "Carrois Gothic", sans-serif;
    line-height: 24px;
    font-weight: 400;
    color: var(--default-text-color);
}

.user-avatar-container{
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 5px;
}

.user-avatar-container img{
    width: 100%;
    height: auto;
}

.testimonial-card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 278px;
    background-color: var(--card-background-color);
    padding: 18px 18px;
    border-radius: 4px;

}
.user-detail{
    display:flex;
    gap: 12px;
    justify-content: start;
    
}

.user-name, .user-designation{
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: rgb(237, 236, 236);
}

.user-designation{
    color: var(--secondary-text-color);
}

.frontier-cards-cont{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.frontier-section{   
    margin-top: 90px;
    padding-top: 90px;
}

.frontier-container h3{
    font-size: 26px;
    line-height: 33px;
    font-weight: 400;
    padding-bottom: 24px;
}

.frontier-card{
    display: flex;
    flex-direction: column;
    /* height: 384px; */
    background-color: var(--card-background-color);
    gap:18px;
    padding: 18px 18px;
    border-radius: 4px;
}

.frontier-card-image-box{
    width:392px;
    height: 394px;
    overflow: hidden;
    border-radius: 5px;
}

.frontier-card-image-box img{
    width: 100%;
    height: auto;
}

.frontier-card-top{
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: start;
}

.frontier-heading, .frontier-desc{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.frontier-heading{
    color: var(--default-text-color);
}

.frontier-desc{ 
    color: var(--secondary-text-color);
}

.changelog-section{   
    margin-top: 90px;
    padding-top: 80px;
}

.changelog-container h3{
    margin-bottom: 22px;
    font-size: 26px;
    line-height: 33px;
    font-weight: 400;
}

.changelog-cards-box{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.changelog-card{
    display: flex;
    flex-direction: column;
    padding: 18px;
    border-radius: 4px;
    align-items: start;
    gap: 10px;
    background-color: var(--card-background-color);
}

.changelog-date{
    display: flex;
    align-items: center;
    gap: 12px;
}

.changelog-date time, .changelog-text{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.changelog-date time{
    color: var(--secondary-text-color);
}
/* .changelog-text{
    color: var(--default-text-color);
} */

.changelog-label{
    padding: 4px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.8px solid var(--secondary-text-color);
    border-radius: 2rem;
    color: var(--secondary-text-color);
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
}

.join-us-section{
    margin-top: 85px;
    padding-top: 40px;
    margin-bottom: 125px;
}

.join-text-top{
    width: 810px;
    margin-bottom: 56px;
}
.join-us-container h3{
    font-size: 36px;
    line-height: 43px;
    font-weight: 400;
    color: var(--default-text-color);
    text-wrap: balance;
}
.join-us-btn{
    width: 114px;
    height: 42px;
    margin-top: 22px;
}

.join-us-image-container{
    max-width: 1300px;
    height: 731px;
    overflow: hidden;
    border-radius: 5px;
}

.join-us-image-container img{
    width: 100%;
    height: auto;
}

.highlights-section{
    background-color: var(--card-background-color);
    padding:89px 0px;
}
.highlights-grid{
    display: grid;
    grid-template-columns: repeat(12,1fr);
}

.highlights-title{
    grid-column: 1/ span 3;
}

.highlights-title h3{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--default-text-color);
    position:sticky;
    top: 64px;
}
.highlights-card-container{
    grid-column: 4/span 6;
}

.highlights-card{
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: start;
    padding: 15px;
    border-radius: 5px;
    background-color:rgb(32, 30, 24);
    margin-bottom: 10px;
    border: 0.5px solid rgb(38, 36, 30);
}

.highlights-card-top h4, .highlights-card p{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.highlights-card-top h4{
    color: var(--default-text-color);
}
.highlights-card p{
    color: var(--secondary-text-color);
    text-wrap-style: pretty;
}

.highlight-post-link{
    margin-top: 20px;
}

.try-now-container{
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 4px solid green; */
    padding: 132px 0;
}

.try-now-box{
    display: flex;
    flex-direction: column;
    /* background-color: rgb(123, 9, 53); */
    /* border: 4px solid purple; */
}

.try-now-box h2{
    font-size: 72px;
    line-height: 72px;
    font-weight: 400;
    color: var(--default-text-color);

}

.try-now-btn-box{
    display: flex;
    justify-content: center;
}

.footer-nav-column-item h3, 
.footer-nav-column-item li a {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    color: var(--default-text-color);
    text-align: left;
}

.footer-nav-column-item h3{
    color: var(--secondary-text-color);
}
.footer-nav-column-item li {
    padding: 4px 0;
}

.footer-nav-column-item ul{
    list-style-type: none;
    padding:0;
}

footer{
    padding: 67px 20px 30px 20px;
    background-color: var(--card-background-color);
}

.footer-nav-grid{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
}

.footer-copyright-container{
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
}

.footer-copyright-container .copy-right-box{
    display: flex;
    gap: 12px;
    align-items: center;
}

.copy-right-box small,
.copy-right-box small span
{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--secondary-text-color);
    line-height: 21px;
}

.footer-copyright-container .left-box{
    display: flex;
    gap:16px;
    align-items: center;
}

.theme-box{
    display: flex;
    padding: 3px;
    border-radius: 20px;
    background-color: rgb(38, 36, 30);
}
.theme{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 12px;
    border-radius: 17px;
}
.theme1{
    background-color:rgb(58, 56, 51) ;
}

.language-selection-box,
.language-selection-box span
{
    display: flex;
    align-items: center;
}

.language-selection-box{
    background-color: rgb(38, 36, 30);
    padding: 6px 12px;
    border-radius: 17px;
    
}
.language-selection-box p{
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    padding-left: 4px;
}