@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter/Inter-VariableFont_opsz\,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

/* Inter - Italic */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter/Inter-Italic-VariableFont_opsz\,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

/* Martian Mono - Variable Font */
@font-face {
  font-family: 'Martian Mono';
  src: url('assets/fonts/martian-mono/MartianMono-VariableFont_wdth\,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
:root{
    /*Neutral*/
    --Neutral900 : #062630;
    --Neutral700 : #385159;
    --Neutral200 : #E6E1DF;
    --Neutral100 : #FAF5F3;
    --Neutral0 : #ffffff;
    /*Ligh Salmon*/
    --LightSalmon500 : #FEA36F;
    --LightSalmon100 : #FFE2D1;
    --LightSalmon50 : #FFF5EF;
    /*gradient*/
    --TextGradient: linear-gradient(107deg, #FF9A60 -11.37%, #062630 61.84%);
    --gradient: linear-gradient(90deg, #FFE2D1 0%, #FFF5EF 100%);
    /*fonts*/
    --fontMartion: 'Martian Mono', monospace;
    --fontInter: 'Inter', sans-serif;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html{
    font-size: 16px;
}
body{
    font-family: 'Martian Mono', monospace;
    overflow-x: hidden;
}
img{
   max-width:100%;
   display:block;
}
header{
    display: flex;
    flex-direction: column;
    gap: 80px;
    background: url("assets/images/pattern-light-bg.svg"),  var(--gradient);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    min-height: 834px;
}
/*header::before{
    content: " ";
    position: absolute;
    width:600px;
    height: 600px;
    bottom: -150px;
    right: -140px;
    background-image: url("assets/images/pattern-glow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}*/
nav{
    margin-left: 135px;
    margin-top: 32px;
}
.heroSection{
    min-height: 606px;
    display: flex;
    gap: 64px;
    margin: 0 135px;
}
.contentContainer{
    display: flex;
    flex-direction: column;
    flex: 1;
    align-self: center;
    min-width: 0;
}
.textContainer{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}
.textContainer h1{
    background: var(--TextGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3.875rem;
    line-height: 1.2;
    letter-spacing: -2px;
    font-weight: bold;
}
.textContainer p{
    font-family: var(--fontInter);
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: var(--Neutral700);
    font-weight: 400;
}
.calltoaction{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.calltoaction button{
    max-width:380px;
    width: 100%;
    height: 64px;
    background-color: transparent;
    outline: none;
    border: 2px solid var(--Neutral900);
    color: var(--Neutral900);
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    gap: 20px;
    border-radius: 12px;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight:600;
}
.calltoaction button:hover{
    background: var(--gradient);
    cursor: pointer;
}
.compTotalTestimonial{
    display: flex;
    gap: 12px;
}
.compTotalTestimonial img{
    width: 110px;
    height: 40px;
}
.ratingcontainer{
    display: flex;
    flex-direction: column;
}
.starscontainer{
    display: flex;
    width: 120px;
    height: 24px;
}
.starscontainer img{
   width: 24px;
   height: 24px;
}
.ratingcontainer p{
    color: var(--Neutral700);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
}
.imageContainer{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
}
.imageContainer img{
    width: 100%;
    height: 100%;
    object-fit:cover ;
    object-position:top;
}
main{
    display: flex;
    flex-direction: column;
    gap: 120px;
    margin: 120px 135px 0 135px;
}

.intro{
    display: flex;
    justify-content: space-between;
    gap:80px;
    min-height: 520px;
    max-width: 100%;
}
.introImageCont{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    min-width: 0;
}
.introImageCont img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 10% 20%;
    border-radius: 12px;
}
.introContent{
    flex: 1;
    display: flex;
    gap:34px;
    flex-direction: column;
    align-self: center;
    min-width: 0;
}
.introContent h2{
    color: var(--Neutral900);
    font-size: 3.125rem;
    line-height: 1.3;
    letter-spacing: -2px;
    font-weight: 600;

}
.introContent div ul{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap:24px;
}
.introContent div ul li{
    display: flex;
    gap: 14px;
}
.introContent div ul li p{
    color: var(--Neutral700);
    font-family: var(--fontInter);
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.5px;
    font-weight: 400 ;
}
.features{
    display: flex;
    gap: 80px;
    min-height: 520px;
    max-width: 100%;
}
.featuresCont{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: center;
    min-width: 0;
}
.featuresCont h2{
    color: var(--Neutral900);
    font-weight: 600;
    font-size:3.125rem;
    line-height: 1.3;
    letter-spacing: -2px;
}
.featuresCont h2 span{
    background-image: url("assets/images/pattern-circle.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120%;
    white-space: nowrap;
    overflow: visible;
}
.features p{
    font-family: var(--fontInter);
    color:var(--Neutral700);
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.5px;
    font-weight: 400;

}
.featuresImgCont{
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.featuresImgCont img{
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
    border-radius:12px ;
}
.steps{
    background: url("assets/images/pattern-light-bg.svg"),  var(--gradient);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    min-height: 454.02px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 64px;
    position: relative;
    z-index: 1;
}
/*.steps::before{
    content: " ";
    position: absolute;
    width:600px;
    height: 600px;
    bottom: -150px;
    right: -140px;
    background-image: url("assets/images/pattern-glow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    overflow: hidden;
}*/
.steps h2{
    color: var(--Neutral900);
    font-size: 3.125rem;
    line-height: 1.3;
    letter-spacing: -2px;
    font-weight: 600;
    margin-top:80px;
}
.stepsToTake{
    display: flex;
    gap: 48px;
    margin: 0 50px 50px 80px;
}
.stepsToTake > div{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.stepsToTake > div > div {
    display: flex;
    justify-content: space-between;

}
.stepsToTake > div > div > p{
    border: 2px solid var(--Neutral900);
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 600;
    padding: 15px 20px;
    border-radius: 8px;
}
.stepsToTake > div p{
    color: var(--Neutral900);
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 600;
} 
.pricing{
    min-height: 519px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
}
.pricing > h2 {
    color: var(--Neutral900);
    font-size: 3.125rem;
    line-height: 1.3;
    letter-spacing: -2px;
    font-weight: 600;
}
.pricing > .boxesContainer{
    display: flex;
    gap: 24px;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.box1 , .box3{
    width: 286px;
    height: 358px;
    border: 1px solid var(--Neutral200);
    background-color: var(--Neutral0);
    border-radius: 8px;
    padding: 24px;
}
.textbox{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.textbox p:first-child{
    color: var(--Neutral900);
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -1px;
    font-weight: 600;
}
.textbox p > span{
    color: var(--Neutral900);
    font-size: 2.125rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -1px;
}
.textbox p + p,
.bigboxText P + P{
    color: var(--Neutral700);
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.5px;
    font-family: var(--fontInter);
    font-weight: 400;
}
.textbox ul,
 .bigboxText ul ,
 .box3text > div > ul {
    list-style-type: none;
}
.textbox > div > ul > li,
.bigboxText> div >ul>li,
.box3text > div > ul > li  {
    display: flex;
    gap: 12px ;
    align-items: center;
    padding-bottom: 10px;
    color: var(--Neutral700);
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.5px;
    font-family: var(--fontInter);
    font-weight: 400;
}
.box1 button,
.box3 button{
    border: 2px solid var(--Neutral900);
    border-radius: 8px;
    background-color: var(--LightSalmon50);
    color: var(--Neutral900);
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 600;
    width: 100%;
    max-width: 238px;
    height: 63px;
}
.box1 button:hover{
    background: var(--gradient);
    cursor: pointer;
}
.box2{
   width: 350px;
   height: 390px;
   border: 1px solid var(--Neutral200);
   border-radius: 8px; 
   background-color: var(--Neutral100);
   padding: 40px 24px;
}
.bigboxText{
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    background: url("assets/images/pattern-glow.svg"), var(--Neutral100);
    background-position:center;
    background-size: cover;
}

.bigboxText P:first-child{
     color: var(--Neutral900);
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -1px;
    font-weight: 600;
}
.bigboxText p > span{
    color: var(--Neutral900);
    font-size: 2.125rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -1px;
}
.box2 button{
    width: 100%;
    max-width: 302px;
    height: 63px;
    background-color: var(--LightSalmon50);
    border: 2px solid var(--Neutral900);
    border-radius: 8px;
    margin-top:32px;
    color: var(--Neutral900);
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 600;
}
.box2 button:hover{
    background: var(--gradient);
    cursor: pointer;
}
.box3{
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px;
}
.box3text{
    display: flex ;
    flex-direction: column;
    gap:24px;
}
.box3text p:first-child{
    color: var(--Neutral900);
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: -1px;
    font-weight: 600;
}
.box3text P + P{
    color: var(--Neutral900);
    font-size: 2.125rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -1px;
}
.box3 button{
    border: 2px solid var(--Neutral900);
    border-radius: 8px;
    background-color: var(--LightSalmon50);
    color: var(--Neutral900);
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 600;
    width: 238px;
    height: 63px;
}
.box3 button:hover{
    background: var(--gradient);
    cursor: pointer;
}
.testimonials{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 100%;
    min-height: 296px;
}
.testimonialstars{
    display: flex;
    gap: 6px;
}
.testimonialstars img{
      max-width: 100%;
      height: auto;
}
.testimonials p{
    color: var(--Neutral900);
    font-size: 2.125rem;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 600;
    text-align: center;
}
.testimonials p + p{
    color: var(--Neutral700);
    font-size: 1.25rem;
    line-height: 1.4;
    letter-spacing: -0.5px;
    font-family: var(--fontInter);
    font-weight: 400;
}
footer{
    min-height: 521px;
    width: 100%;
    margin-top: 120px;
    background-image: url("assets/images/pattern-dark-bg.svg");
    background-color: var(--Neutral900);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px 8px 0 0;
    padding: 80px 135px 0 135px;
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
}
.footerContent{
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    text-align: center;
}
.footerContent > h2{
    color: var(--Neutral100);
    font-size: 3.125rem;
    line-height: 1.3;
    letter-spacing: -2px;
    font-weight: 600;
}
.reviewsection{
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}
.reviewsection button{
    width: 380px;
    height: 64px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--Neutral0);
    border-radius:8px;
    background:transparent;
    outline: none;
    color: var(--Neutral0);
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -1px;
    font-weight: 600;
}
.reviewsection button:hover{
    background: var(--TextGradient);
}            
.testReviews{
    display: flex;
    gap: 15px;
    align-items: center;
}
.testReviews img{
    width: 110px;
    height: 40px;
}
.last5stars {
    width: 148px;
    height: 28px;
    display: flex;
}
.testReviews > div {
    display: flex;
    flex-direction: column;
    gap:8px;
    justify-content: center;
}
.testReviews > div > p{
    color: var(--Neutral0);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
}
.lastDivFooter{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--Neutral700) ;
}
.lastDivFooter p{
    color: var(--Neutral0);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
}
@media (max-width:1024px){
    header{
        gap:64px;
    }
    nav{
        margin-left: 32px;
    }
    .heroSection{
        flex-direction: column;
        margin: 0 32px 50px 32px;
    }
 
    main{
        margin: 80px 32px 0 32px;
        gap:80px;
    }
    .intro{
        flex-direction: column-reverse;
    }
    .features{
        flex-direction: column;
    }
    .intro, .features{
        gap: 40px;
    }
    .steps{
        align-items: normal;
        align-content: normal;
        padding: 80px 32px;
    }
    .steps h2{
        margin-top: 0;
    }
    .stepsToTake{
        flex-direction: column;
        margin: 0;
    }
    .stepsToTake img{
        display: none;
    }
    .boxesContainer{
        flex-wrap: wrap;
    }
    .box2{
        width: 286px;
        height: 358px;
        padding: 24px;
    }
    .box2 button{
        width: 238px;
        height: 63px;
        
    }
    .bigboxText> div >ul>li{
        padding-bottom: 8px;
    }
    .boxesContainer > div{
        max-width: 300px;
        width: 100%;
        height: 358px;
    }
    .testimonials{
        align-items: flex-start;
    }
    .testimonials p{
        text-align: left;
    }
    footer{
        margin-top: 80px;
        padding: 64px 32px 0 32px;
    }
}
@media (max-width: 576px) {
    header{
        gap:48px;
    }
    nav{
        margin-left: 16px;
    }
    .heroSection{
        margin: 0 16px 25px 16px;
    }
    .textContainer h1{
        font-size: 2.375rem;
    }
    .calltoaction button{
        width: 100%;
    }
    main{
        margin: 64px 16px 0 16px;
        gap:40px;
    }
    .introContent h2,
    .featuresCont h2,
    .steps h2,
    .pricing > h2,
    .footerContent > h2{
        font-size: 2.125rem;
    }
    .steps{
        gap:32px;
        padding: 64px 16px;
    }
    .stepsToTake,
    .pricing{
        gap: 24px;
    }
    .testimonials p{
       font-size: 1.5rem; 
    }
    footer{
        margin-top: 64px;
        padding: 48px 16px 0px 16px;
    }
}
    @media (max-width:436px) {
        .reviewsection button{
            width: 100%;
        }
        .last5stars img{
            max-width: 40px;
            width: 100%;
            height: 30px;
        }
}