:root { --primaryblue: #001169; --primarygreen: #BFCD45; --primarygreenhover: #EEFF5B; --lightblue: #4DAADF; --lightbluehover: #53C1FF; --darkorange: #FF4901; }

/*Buttons
=============================*/
.bg-primaryblue { background-color: var(--primaryblue) }
.btn { border-radius: 4px; padding: 0.75rem 1.5rem; }
.btn.text-bold { font-weight: 600; }
.btn-green { background: var(--primarygreen); color: #000; }
.btn-lightblue { background: var(--lightblue); color: #000; }
.btn-lightblue:hover, .btn-lightblue:focus, .btn-lightblue:active, .btn-lightblue:focus-visible { background: var(--lightbluehover) !important; }
.btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green:focus-visible { background: var(--primarygreenhover) !important; }
.btn-dark { box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3); }

/*Typography
==========================*/
html { font-size: 16px; }
body { font-size: 1rem; font-family: 'Inter', sans-serif; color: #000; }
h1 { font-size: 4rem; font-weight: 800; color: #fff; }
h2 { font-size: 2.5rem; font-weight: 700; }
.h3 { font-size: 1.5rem; font-weight: 700; }
.SecTitle { text-align: center; }
.SecTitle .h3 { color: var(--darkorange); position: relative; display: inline-block; padding: 0 15px 5px }
.SecTitle .h3:after { position: absolute; left: 50%; height: 4px; background-color: var(--primarygreen); bottom: -5px; content: ""; transform: translateX(-50%); max-width: 110px; width: 100%; }
.SecTitle.white .h3 { color: #fff; }
p { color: #757575; font-size: 1.125rem; line-height: 1.8em; }

/*Navigation
==========================*/
li.nav-item .nav-link { border-bottom: 2px solid transparent; }
li.nav-item { margin: 0px 0.75rem; }
li.nav-item .nav-link.active, li.nav-item .nav-link:hover { border-bottom: 2px solid var(--primarygreen); }
li.mobBtn { display: none; }

/* Hero Section
==============================*/

.heroSec {
    padding: 16rem 0 22rem;
    position: relative;
    overflow: hidden;
}
.heroSec:before { position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: linear-gradient(252.03deg, #383DED 13.71%, #E83CBA 41.99%, #FF004E 72.89%, #FF8500 101.17%); opacity: 0.8; z-index: -1; }
.heroSec p { color: #fff; font-size: 1.5rem; font-weight: 600; margin-top: 10px; }
.heroSec .container { position: relative; z-index: 2; }
.heroStripe { position: absolute; z-index: 1; top: 0; background-repeat: no-repeat; height: 100%; width: 21rem; background-size: 100% auto; }
.herodec { position: absolute; z-index: -2 }
.confetti { bottom: -56%; left: -2%; max-width: 110px; }
.bow { bottom: 4%; right: 16%; max-width: 135px; }
.ring { top: 67%; left: 15%; max-width: 160px; }
.flawer { right: 11%; top: -17%; max-width: 120px; }
.stars.stOne { bottom: 0; left: -10%; }
.stars.stTwo { left: 35%; top: -20%; }
.stars.stThree { bottom: -19%; right: 31%; }
.stars.stFour { right: 14%; top: 34%; }
.leftStripe { left: 0; background-image: url('../images/hero_leftstripe.svg'); background-position: top left; }
.rightStripe { right: 0; background-image: url('../images/hero_rightstripe.svg'); background-position: bottom right; }
.videoSec {
    position: relative;
    z-index: 3;
    margin-top: -17rem;
}
.videoFrame { max-width: 980px; padding-bottom: 43.25%; position: relative; width: 100%; border: 14px solid #000; border-radius: 33px; }
.videoFrame iframe { position: absolute; height: 100%; width: 100%; left: 0; top: 0; border-radius: 18px; }
.heroSec .stars { position: absolute; }

.heroSec:after{position: absolute;bottom: -2px;left: -4px;right: -4px;background: url('../images/hero_rounded.svg') no-repeat bottom center/ contain;content: "";height: 100%;}

/*About us
========================*/
.aboutSec, .testimonialSec, .whySec { padding: 7rem 0; position: relative }
.aboutSec p:last-child{margin-bottom: 0;}
.whySec { background: url('../images/Whybg.svg') no-repeat center center/ cover, linear-gradient(252.03deg, #383DED 13.71%, #E83CBA 41.99%, #FF004E 72.89%, #FF8500 101.17%) !important; }
.whyReason { background-color: #fff; font-size: 1.35rem; color: #000; border-radius: 8px; padding: 1rem 1.5rem; box-shadow: 2px 6px 8px rgba(0, 0, 0, 0.16);height: 100%;}
.whyReason span { color: var(--darkorange); text-transform: uppercase; font-weight: 700; }
.signupSec { padding: 5rem 0; background: linear-gradient(252.03deg, #383DED 13.71%, #E83CBA 41.99%, #FF004E 72.89%, #FF8500 101.17%); }
.signupboxbtn .btn { font-size: 1.125rem; }
.signupboxbtn { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 16px; text-align: center; padding: 3rem 0; }
.signupSec h2, .signupSec p { color: #fff; }
.signupSec p { margin-bottom: 0; font-weight: bold; font-size: 1.111rem; }
.signUpcontent { position: relative }
.arrowImg { position: absolute; left: -6rem; bottom: -2.5rem; }
.querySec { background-color: var(--primarygreen); position: relative; padding: 7rem 0 0; background-image: url(../images/lines.svg); background-position: center; background-repeat: no-repeat; background-size: cover; }
.querySec p { font-size: 2.25rem; color: #000; }
.mailButton { background-color: #fff; border: 2px solid var(--primaryblue); padding: 0.5rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1.5rem; color: #000; display: inline-block; }
.testimonailSec { padding: 6rem 0; }
#testiSlider .item { padding: 2rem; }
.reviewBox { background: #FFFFFF; box-shadow: 0px 13px 24px rgba(0, 0, 0, 0.08); border-radius: 16px; width: 100%; padding: 2.5rem 2rem 4rem; justify-content: space-between; }
.clientImg { height: 120px; width: 120px; position: relative; }
.clientText { width: calc(100% - 140px); }
#testiSlider .owl-carousel .owl-item img { display: block; width: 100%; object-fit: cover; }
#testiSlider .owl-dots { display: none; }
.clientName p { margin: 0; }
#testiSlider .owl-nav { text-align: center; margin-top: -66px; z-index: 5; position: relative; }
#testiSlider .owl-nav button { height: 64px; width: 64px; background: linear-gradient(252.03deg, #383DED 0.62%, #E83CBA 31.52%, #FF004E 72.37%, #FF8500 101.17%);  !important; border-radius: 64px; margin: 0px 5px; cursor: pointer; position: relative; overflow: hidden; }
#testiSlider .owl-nav button:hover { background: linear-gradient(252.03deg, #383DED 0.62%, #E83CBA 31.52%, #FF004E 72.37%, #FF8500 101.17%); }
#testiSlider .owl-nav button.disabled { background: #989898 !important; cursor: not-allowed; }
#testiSlider .owl-nav button span { background-size: 24px auto; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; font-size: 0; }
#testiSlider .owl-nav .owl-next span { background-image: url(../images/arrow-next.svg); }
#testiSlider .owl-nav .owl-prev span { background-image: url(../images/arrow-prev.svg); }
.testimonialInner { background: url('../images/map.svg') no-repeat top center /100% auto; }
.climgOne { max-width: 64px; margin-top: 10.68rem; }
.climgTwo { max-width: 70px; margin-top: 2.43rem; }
.climgThree { max-width: 48px; margin-top: 8.312rem; }
.climgFour { max-width: 80px; margin-top: 11.312rem; }
.starsTesti { margin-bottom: 0; }
.querySecImg img { max-width: 100%; }

/*Footer
========================*/
footer { background: var(--primaryblue); padding: 2.5rem 0; }
.footerNav { text-align: center; }
.footerNav ul li { display: inline-block; list-style: none; padding: 0 1rem; }
.footerNav ul li a { color: #fff; text-decoration: none; opacity: 0.5; }
.footerNav ul li a:hover { opacity: 1; }
.footerNav ul { margin: 0; padding: 0; }
.footerSocial a { height: 40px; width: 40px; display: inline-block; line-height: 38px; text-align: center; background: rgba(255, 255, 255, 0.1); border-radius: 4px; margin-left: 0.75rem; }
.footerSocial a:hover { background: var(--lightblue); }
.footerBottom ul { padding: 0; margin-bottom: 0; }
.footerBottom ul li { list-style: none; display: inline-block; font-size: 0.875rem; position: relative; padding: 0 0.75rem; }
.footerBottom ul li, .footerBottom ul li a { color: rgba(255, 255, 255, 0.5); }
.footerBottom ul li a:hover { color: rgba(255, 255, 255, 1); }
.footerBottom ul li a { text-decoration: none; }
.footerBottom ul li:after { width: 1px; top: 2px; bottom: 1px; background: rgba(255, 255, 255, 0.5); position: absolute; content: ""; right: 0; }
.footerBottom ul li:last-child:after { display: none; }

/* Responsive media query
================================*/
@media only screen and (max-width:1399px) {
    .heroSec { overflow: hidden; }
    .flawer { right: 7%; top: -14%; max-width: 100px; }
    .bow { bottom: 2%; right: 14%; max-width: 105px; }
    .ring { top: 69%; left: 13%; max-width: 120px; }
    .confetti { bottom: -54%; left: -3%; max-width: 80px; }
    .stars.stFour { right: 10%; top: 34%; }
    .stars.stOne { bottom: 0; left: -2%; }
    .stars.stThree { bottom: -15%; right: 31%; }
    .footerNav ul li { padding: 0 0.25rem; }
    .querySec p { font-size: 1.5rem; }
    .mailButton { padding: 0.5rem 1.25rem; font-size: 1.25rem; }
    .mailButton img { max-height: 60px; }
    .querySec { padding: 5rem 0 0; }
    .footerNav ul li a { font-size: 1rem; }
    .footerSocial a { height: 36px; width: 36px; line-height: 32px; margin-left: 0.5rem; }
}
@media only screen and (max-width:1199px) {
    .flawer { right: 1%; top: -12%; max-width: 80px; }
    .confetti { bottom: -52%; left: -9%; max-width: 80px; }
    .bow { bottom: 2%; right: 14%; max-width: 85px; }
    .ring { top: 71%; left: 11%; max-width: 100px; }
}
@media only screen and (max-width:1100px) {
    html { font-size: 14px; }
    li.nav-item { margin: 0px 0.5rem; }
    a.navbar-brand img { height: 4rem; }
    .navbar .btn { border-radius: 4px; padding: 0.5rem 1rem; }
    .confetti { bottom: 78%; left: -3%; }

}
@media only screen and (max-width:1025px) {
    .confetti { bottom: auto; left: 3%; top: -19%; }
    .stars.stOne { bottom: -8%; left: 5%; }
    .flawer { right: 4%; top: -15%; max-width: 81px; }
    .bow { bottom: 0%; right: 12%; max-width: 80px; }
        .videoSec {
    margin-top: -11rem;
}
}
@media only screen and (max-width:991px) {
    h1 { font-size: 3rem; }
    .heroSec p { font-size: 1.3rem; }
    .heroSec p br { display: none; }
    .heroSec { padding: 14rem 0; }
    .confetti { left: 3%; top: -19%; max-width: 60px; }
    .flawer { right: 3%; top: -12%; max-width: 71px; }
    .stars.stOne { bottom: -10%; left: -4%; }
    .stars.stThree { bottom: -5%; right: 29%; }
    .stars.stFour { right: 10%; top: 28%; }
    .videoFrame { border: 5px solid #000; border-radius: 24px;padding-bottom: 55.25%; }
    .aboutSec, .testimonailSec, .whySec { padding: 4rem 0; }
    h2 { font-size: 2.3rem; }
    h2 br { display: none; }
    .clientImg { height: 60px; width: 60px; }
    .clientText { width: calc(100% - 80px); }
    .climgFour { max-width: 50px; }
    .aboutSec { padding: 4rem 0; position: relative; }
    .templateSlider .owl-item:nth-child(even) .item { padding-top: 3rem; }
    footer { text-align: center; }
    .footerNav { margin: 1.5rem 0; }
    .footerSocial { text-align: center !important; }
    .footerSocial a { height: 32px; width: 32px; line-height: 30px; margin: 0 0.25rem; }
    .footerSocial a img { height: 20px; }
    .footerBottom ul li { font-size: 1rem; line-height: 1.2em; }
    .footerNav ul li { padding: 0.25rem 0.5rem; }
    .testimonailSec { padding: 4rem 0 2rem; }
    .mailButton { padding: 0.5rem 1rem; font-size: 1.2rem; }
    .mailButton img { max-height: 50px; }
    .querySec p { font-size: 1.5rem; }
}
@media only screen and (max-width:767px) {
    .NavButton a.btn { display: none }
    li.mobBtn { display: block; }
    div#navbarSupportedContent { position: absolute; top: 100%; right: 0; width: 320px; background: var(--primaryblue); padding: 15px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
    li.nav-item { margin: 0.5rem; }
    a.navbar-brand img { height: 3.5rem; }
    .container { padding-left: 15px; padding-right: 15px; }
    .herodec { display: none; }
    h1 { font-size: 2.5rem; }
    .heroSec p { font-size: 1.2rem; }
    .heroSec .stars { position: absolute; width: 17px; }
    .heroSec { padding: 10rem 0 14rem; }
    .stars.stTwo { left: 36%; top: -13%; }
    .stars.stOne { bottom: 20%; left: 0%; }
    .stars.stThree { bottom: -5%; right: 21%; }
    .stars.stFour { right: 6%; top: 23%; }
    p, .querySec p, .signupSec p { font-size: 1.1rem; line-height: 1.6em; }
    .heroStripe { width: 15rem; }
    h2 { font-size: 2rem; }
    .aboutSec { text-align: center; }
    .aboutSec p:last-child { margin-bottom: 0; }
    .aboutSec, .testimonailSec, .whySec { padding: 3rem 0; }
    .querySecImg { display: none; }
    .whyReason { font-size: 1.2rem; padding: 0.8rem 1.2rem; }
    .whyReason img { max-width: 36px; }
    #testiSlider .item { padding: 1rem; }
    #testiSlider .owl-nav { margin-top: -36px; }
    #testiSlider .owl-nav button { height: 44px; width: 44px; }
    .getInTouch { text-align: center }
    .getintoucImg { display: none; }
    .reviewBox { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08); padding: 2rem 2rem 4rem; }
    .h3 { font-size: 1.25rem; font-weight: 700; }
    .starsTesti img { max-height: 20px; }
    .arrowImg { display: none; }
    section.signupSec .row { flex-direction: column-reverse; text-align: center; }
    .signupboxbtn { background: transparent; border: none; border-radius: 0; text-align: center; padding: 0; margin-top: 20px; }
    .signupSec { padding: 3rem 0; }
    .querySec { padding: 3rem 0; text-align: center; }
    .mailButton { padding: 0.25rem 1rem; font-size: 1.2rem; }
    .footerLogo img { max-height: 60px; }
    .footerBottom ul li { padding: 0 0.75rem; margin: 0.5rem 0; }
    .videoFrame { padding-bottom: 56.25%; }
}
@media only screen and (max-width:575px) {
    div#navbarSupportedContent { width: 100%; left: 0; }
    .stars { display: none; }
    .videoSec { margin-top: -6rem; }
    .heroStripe { width: 11rem; }
    .heroSec { padding: 9rem 0 9rem; }
    h1 {font-size: 2rem;}
    h1 br { display: none }
    h2 { font-size: 1.6rem; }
    .testimonialInner > .d-flex { display: none !important; }
    .reviewBox.d-flex { display: block !important; text-align: center; }
    .clientImg { height: 50px; width: 50px; position: relative; margin: 0 auto 10px; }
    .clientText { width: 100%; }
    .reviewBox { display: block !important; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 2rem 1.5rem 3rem; }
    .mailButton { padding: 0.25rem 0.75rem; font-size: 1rem; }
    .mailButton img { max-height: 38px; }
    .whyReason img { max-width: 26px; }
    .whyReason { font-size: 1rem; padding: 0.8rem 1.2rem; }
    p, .querySec p, .signupSec p { font-size: 1rem; line-height: 1.6em; }
    .heroSec p { font-size: 1.125rem; }
}