*{
padding:0;
margin:0;
box-sizing:border-box;
color:var(--sec-color);
font-family:'Montserrat';
}
:root{
--primary-color:rgb(19, 69, 227);
--primary-light-color:#dbeafe;
--sec-color:#101828;
--sec-light-color:rgb(52, 63, 81)
}
html{
scroll-behavior:smooth;
scroll-padding-top:80px;
}

header{
padding:0px 70px;
width:100%;
height:85px;
display:flex;
justify-content:space-between;
align-items:center;
position:fixed;
top:0;
left:0;
z-index:100;
}
.header-bg-change{
background-color:white;
box-shadow:0px 0px 10px black;
}

.logo{
width:fit-content;
height:80px;
}
.logo h2{
font-size:30px;
color:var(--primary-color);
}
.logo img{
height:100%;
width:100%;
object-fit:cover;
}
.nav-bar{
width:fit-content;
}
.menu-links{
list-style-type:none;
}
.menu-links li{
display:inline-block;
margin:0px 25px;

}
.menu-links li a{
color:#000000;
font-weight:600;
text-decoration:none;
}
a.menu-icon{
text-decoration:none;
display:none;
}
a.menu-icon i{
font-size:25px;
color:var(--primary-color);
}
#hero{
padding-top:85px;
background-image:linear-gradient(270deg, #CFF1FF 0%, #F2FCFF 0%, #F9FDFF 95.23%);
}
.hero-container{
padding:50px 70px;
display:flex;
justify-content:space-between;
align-items:center;
}
.hero-left{
width:50%;
}
.hero-right{
width:45%;
}
.hero-right img{
width:100%;
height:100;
object-fit:contain;
border-radius:25px;
box-shadow:0px 0px 30px var(--primary-light-color);
}
.hero-left h2{
font-size:55px;
}
.blue-text{
color:var(--primary-color);
}
.hero-left .hero-sub-text{
margin-top:15px;
font-size:19px;
font-weight:500;
color:var(--sec-light-color);
line-height:28px;

}
.cta-buttons{
margin-top:30px;
}
.cta-buttons a{
font-size:20px;
font-weight:600;
text-decoration:none;
color:var(--sec-color);
border:2px solid grey;
border-radius:15px;
padding:10px 15px;
margin-right:15px;
}
.cta-buttons a.active-btn{
background-color:var(--primary-color)!important;
color:white;
border:none;
}
#stats{
padding:50px 70px;
}
.stats-wrapper{
display:flex;
justify-content:space-between;
}
.stats-card{
text-align:center;

}
.stats-heading{
font-size:30px;
font-weight:900;
color:var(--sec-color);
margin:5px 0px;
}
#problem{
padding:50px 70px;
}
.problem-icon{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
width:60px;
height:60px;
}
.section-heading{
text-align:center;
font-size:45px;
font-weight:800;
}
.problem-wrapper{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin-top:20px;
}
.problem-card{
display:flex;
padding:20px 15px;
align-items:center;
border:2px solid rgb(247, 217, 217);
width:45%;
border-radius:15px;
margin:20px 0px;
box-shadow:0px 10px 15px #e8e8e8;
}
.problem-card-icon img{
width:85%;
}
.problem-card p{
margin-left:15px;
color:var(--sec-light-color);
font-size:18px;
font-weight:500;
}
.problem-subheading{
background-color:#fef2f2;
padding:25px 0px;
color:var(--sec-color);
border-radius:15px;
border:2px solid rgb(247, 217, 217);
text-align:center;
font-size:25px;
margin-top:20px;
}
#solution{
padding:50px 70px;
}
.mini-heading{
width:fit-content;
color:var(--primary-color);
background-color:var(--primary-light-color);
padding:10px 15px;
border-radius:25px 25px 25px 25px;
font-weight:600;
font-size:15px;
margin:20px auto;
}
.sub-text{
text-align:center;
color:var(--sec-light-color);
font-size:20px;
font-weight:500;
margin:20px 0px;
}
.solution-wrapper{
display:flex;
flex-direction:row;
justify-content:space-between;
flex-wrap:wrap;
}
.solution-card{
width:31%;
padding:20px;
border-radius:15px;
box-shadow:4px 4px 20px #e8e8e8;
margin:20px 0px;
}
.solution-card:hover{
box-shadow:5px 5px 25px #d2d0d0;
transition:box-shadow 0.5s;
}
.solution-icon img{
border-radius:15px;
}
.solution-heading{
margin-top:15px;
margin-bottom:15px;
}
.solution-description{
color:var(--sec-light-color);
line-height:24px;
font-weight:400;
font-size:16px;
}
#seo-pitch{
padding:50px 70px;
background-image:linear-gradient(to bottom,white,#eaf3ff);
}
.seo-pitch-wrapper{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
.seo-pitch-card{
padding:20px 20px;
width:35%;
margin:20px;
display:flex;
flex-direction:row;
align-items:center;
border:2px solid var(--primary-light-color);
background-color:white;
box-shadow:0px 5px 15px #e8e8e8;

border-radius:15px;
}
.seo-card-img img{
border-radius:50%;
width:80%;
}
.seo-card-heading{
margin-left:15px;
font-weight:600;
}
.solution-subheading{
padding:30px 0px;
color:var(--primary-color);
border-radius:15px;
border:2px solid #c9e0ff;
text-align:center;
font-size:25px;
margin-top:20px;
}

#demo{
padding:50px 70px;
}
.demo-wrapper{
margin-top:40px;
}
.demo-wrapper video{
display:block;
width:70%;

margin:auto;
}
#pricing{
padding:50px 70px;
}
.pricing-wrapper{
margin-top:50px;
display:flex;
justify-content:center;
}
.price-card{
padding:40px 40px;;
border-radius:15px;
border:2px solid var(--primary-light-color);
margin:0px 20px;
width:35%;
box-shadow:0px 0px 15px #e8e8e8;
}
.best-price-card{
border:2px solid var(--primary-color)!important;
}

.best-seller-tag{
background-color:var(--primary-color);
color:white;
font-weight:600;
font-size:16px;
padding:5px 15px;
width:fit-content;
border-radius:25px 25px 25px 25px;
margin:-55px auto 25px auto;
}

.price-card h3{
text-align:center;
}
.price-tag{
margin:20px 0px;
font-size:30px;
font-weight:800;
}
.features-wrapper{
margin-top:20px;
margin-bottom:20px;
}
.features-wrapper ul li{
list-style-type:none;
line-height:50px;
font-weight:500;
color:var(--sec-light-color);
}
.flex-list{
display:flex;
justify-content:space-between;
}
.tick{
color:var(--primary-color);
}
.price-cta{
display:block;
font-size:18px;
color:white;
font-weight:600;
padding:10px;
border-radius:15px;
width:100%;
text-align:center;
background-color:var(--primary-color);
text-decoration:none;
}

#reviews{
padding:50px 70px;
}
.reviews-wrapper{
margin-top:70px;
display:flex;
justify-content:space-between;
}
.review-tile-container{
width:25%;
border-radius:15px;
padding:20px;
box-shadow:0px 0px 20px #e8e8e8;
}
.review-stars-center{
text-align:center;
}
.review-pic-container{
width:150px;
height:150px;
border-radius:50%;
overflow:hidden;
margin:-100px auto 0px auto;
border:5px solid var(--main-blue);
}
.review-pic-container img{
width:100%;
height:100%;
object-fit:cover;
}
.review-tile-content{
margin-top:10px;

}
.user-review{
text-align:center;
color:var(--sec-color);
line-height:25px;
}
.user-name{
margin-top:10px;
font-weight:500;
color:var(--sec-color);
text-align:center;
}

#contact{
padding:50px 70px;
background-color:var(--primary-color);
}
.text-white{
color:white;
}
.contact-wrapper{
margin-top:40px;
display:flex;
justify-content:space-between;
}
.contact-form{
width:51%;
border-radius:20px;
background-color:white;
padding:30px;
}
.contact-info{
width:45%;
border-radius:20px;
background-color:white;
padding:30px;
}
.contact-heading{
font-size:22px;
margin-bottom:20px;
}
.input-wrapper{
display:flex;
justify-content:space-between;
}

.input-wrapper input[type="text"]{
padding:15px;
width:48%;
display:block;
margin:10px 0px;
border-radius:15px;
background-color:#f0f0f0;
border:0px;
font-size:15px;
}
input[type="email"]{
padding:15px;
width:100%!important;
display:block;
margin:10px 0px;
border-radius:15px;
background-color:#f0f0f0;
border:0px;
font-size:15px;
}
textarea{
padding:15px;
width:100%;
border-radius:15px;
border:0px;
background-color:#f0f0f0;
font-size:15px;
margin:10px 0px;
}

input[type="text"]::placeholder, input[type="email"]::placeholder{
font-weight:500;
}
textarea::placeholder{
font-size:15px;
font-weight:500;
}
input[type="button"]{
display:block;
width:100%;
border-radius:15px;
text-align:center;
font-weight:600;
font-size:18px;
padding:10px;
background-color:var(--primary-color);
color:white;
border:0px;
margin-top:20px;
}

.contact-block{
display:flex;
flex-direction:row;
align-items:center;
margin:30px 0px;
}
.contact-sub-block h3{
font-size:16px;
margin-bottom:5px;
}
.contact-sub-block p{
font-weight:500;
color:var(--sec-light-color);
}
.contact-sub-block a{
display:block;
font-weight:500;
color:var(--sec-light-color);
text-decoration:none
}
.contact-icon{
border-radius:15px;
padding:20px;
width:fit-content;
margin-right:20px;
}
.phone-icon{
background-color:var(--primary-light-color);
}
.phone-icon i{
color:var(--primary-color);
font-size:18px;
}
.mail-icon{
background-color:rgb(217, 249, 228);
}
.mail-icon i{
color:rgb(0, 159, 60);
font-size:18px;
}
.location-icon{
background-color:rgb(241, 230, 253);
}
.location-icon i{
color:rgb(152, 16, 251);
font-size:18px;
}
footer{
background-color:rgb(14, 22, 36);
}
.footer-wrapper{
display:flex;
flex-direction:row;
justify-content:space-between;
padding:50px 70px;

}
.footer-heading{
color:white;
font-size:18px;
margin-bottom:10px;
}
.footer-logo-section{
width:25%;

}
.footer-logo-section p{
color:white;
margin-top:15px;
}
.quick-links{
width:fit-content;
text-align:center;

}
.quick-links ul li{
list-style-type:none;
line-height:30px;

}
.quick-links ul li a{
color:white;
text-decoration:none;
}
.services-footer{
width:fit-content;
text-align:center;
}
.services-footer ul li{
list-style-type:none;
line-height:30px;
}
.services-footer ul li a{
text-decoration:none;
color:white;
}
.s-links-container a{
text-decoration:none;
margin-right:15px;
}
.s-links-container a i:hover{
color:var(--primary-color);
transition:color 0.5s;
}
.s-links-container a i{
color:white;
font-size:22px;
}
.author{
color:white;
text-align:center;
font-weight:500;
text-align:center;
border-top:0.5px solid #464646;
padding:10px 30px;
}

/*mobile responsive code*/

@media(max-width:700px){
header{
padding:0px 30px;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
}
.logo{
width:100%;
text-align:center;
}
.logo img{
width:75px;
}
.navbar{
width:100%;
position:absolute;
top:85px;
left:0px;
background-color:white;
display:none;
}
.navbar-resp{
width:100%;
position:absolute;
top:85px;
left:0px;
background-color:white;
display:block;
}
.menu-links li{
display:block;
margin:20px 0px;
text-align:center;
}
a.menu-icon{
text-decoration:none;
display:block;
position:absolute;
top:30px;
right:15px;
}
a.menu-icon i{
font-size:25px;
color:var(--main-blue);

}
}
@media(max-width:770px){
#stats,#problem,#solution,#seo-pitch,#demo,#pricing,#reviews,#contact{
padding:50px 30px;
}
.stats-card{
width:45%;
margin:20px 0px;
}
.stats-heading{
font-size:25px;
}
.stats-wrapper{
flex-wrap:wrap;
}
.section-heading{
font-size:35px;
}
.problem-wrapper{
flex-wrap:no-wrap;
flex-direction:column;
}
.problem-card{
width:100%;
margin:10px 0px;
}
.problem-card p{
font-size:17px;
}
.sub-text{
font-size:19px;
}
.problem-subheading{
margin-top:40px;
font-size:22px;
}
.solution-wrapper{
flex-direction:column;
}
.solution-card{
width:100%;
}
.seo-pitch-wrapper{
flex-wrap:nowrap;
flex-direction:column;
}
.seo-pitch-card{
width:100%;
margin:10px 0px;
}
.seo-pitch-card h3{
font-size:17px;
}
.solution-subheading{
font-size:22px;
}
.pricing-wrapper{
flex-direction:column;
}
.price-card{
width:100%;
margin:20px 0px;
}
@keyframes reviews-slider{
0% {left:0%;}
30% {left:0%;}
35% {left:-100%;}
65% {left:-100%;}
70% {left:-200%;}
100% {left:-200%;}
}
.review-slider{
width:100%;
overflow:hidden;
}
.reviews-wrapper{
margin-top:20px;
position:relative;
width:300%;
justify-content:space-between;
animation:reviews-slider 20s linear infinite;
}
.review-tile-container{
width:80%;
margin:15px;

}

.contact-wrapper{
flex-direction:column;
}
.contact-form,.contact-info{
width:100%;
margin:20px 0px;
}
.footer-wrapper{
flex-direction:column;
padding:30px 30px 20px 30px;
}
.footer-logo-section,.quick-links,.services-footer,.social-links{
width:100%;
margin:10px 0px;
}
.footer-logo-section p{
text-align:center;
}
.social-links{
text-align:center;
}
.author{
color:white;
font-size:14px;
font-weight:500;
text-align:center;
border-top:0.5px solid #464646;
padding:10px 30px;
}
}
@media(min-width:771px) and (max-width:1024px){
#hero,#stats,#problem,#solution,#seo-pitch,#demo,#pricing,#reviews,.footer-wrapper{
padding:50px;
}
.price-card{
width:48%;
}
.seo-pitch-card{
width:42%;
}
.contact-wrapper{
flex-direction:column;
align-items:center;
}
.contact-form,.contact-info{
width:90%;
margin:20px 0px;
}
}
@media(max-width:1024px){
.hero-container{
padding-left:30px;
padding-right:30px;
flex-direction:column-reverse;
align-items:center;
}
.hero-left{
width:100%;
margin-top:20px;
text-align:center;

}
.hero-left h2{
font-size:38px;
text-align:center;
line-height:55px;
}
.hero-right{
width:100%;
}
.cta-buttons a{
font-size:18px;
}
}
@media(min-width:360px) and (max-width:442px){
.hero-container{
padding-left:15px;
padding-right:15px;
}
.hero-left h2{
font-size:34px;
line-height:50px;
}
.cta-buttons a{
margin-right:7px;
font-size:16.5px;
}
.hero-left .hero-sub-text{
font-size:17px;
}
.contact-info,.contact-form{
padding:20px 15px;
}
.contact-sub-block a, .contact-sub-block p{
font-size:15px;
}
input[type="button"]{
font-size:16.5px;
}
input[type="text"], input[type="email"], textarea{
font-size:15px;
}
input[type="text"]::placeholder, input[type="email"]::placeholder, textarea::placeholder{
font-size:15px;
}
.contact-icon{
margin-right:15px;
padding:10px;
border-radius:10px;
}
.seo-card-img img{
width:45px;
}
.contact-icon{
margin-right:12px;
}
}