/* Base CSS */

/* font family  */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

:root {
   --primary-color: #192227;
   --secondary-color: #F9A600;
}

a {
    text-decoration: none;
    transition: all .3s;
}
button {
    transition: all .3s;
}
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: none;
}
body {
   font-family: "Poppins", sans-serif;
   color: var(--primary-color);
}
h1, h2, h3, h4, h5, h6 {
   font-family: "Outfit", sans-serif;
}
.section-title h2 {
   font-size: 44px;
   line-height: normal;
}
.section-title h3 {
   font-size: 36px;
   line-height: normal;
}
.section-title p {
	font-size: 24px;
	text-transform: capitalize;
}
/* Base CSS End */

/* header area start */
.header-area {
	top: 27px;
}
.header-top-wrapper {
	background-color: var(--secondary-color);
	gap: 6px;
   margin-bottom: 12px;
}
.header-top-wrapper p {
	font-size: 14px;
}
.header-top-wrapper a {
	width: 22px;
	height: 22px;
	background-color: var(--primary-color);
}
.header-top-wrapper a img {
	width: 10px;
	transform: rotate(-45deg);
   transition: all .3s;
}
.header-top-wrapper a:hover img {
   transform: rotate(0);
} 
.logo {
	gap: 7px;
	color: var(--secondary-color);
	font-size: 20px;
	text-transform: capitalize;
}
.menu-item-wrap {
	margin-right: 15px;
	gap: 66px;
}
.menu-item-wrap li a {
   color: #fff;
}
.menu-item-wrap li a:hover {
   color: var(--secondary-color);
}
.menu-btn {
   color: var(--primary-color);
   background-color: var(--secondary-color);
   padding: 6px 30px;
}
.menu-btn img {
   width: 10px;
}
.menu-btn:hover {
   background-color: #fff;
}


/* offcanvas menu start */
.offcanvas {
	background-color: var(--primary-color);
}
.offcanvas .menu-item-wrap li a {
	font-size: 18px;
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid #fff;
}
.offcanvas .menu-btn {
	padding: 10px 24px;
	font-size: 18px;
}
.menu-btn img {
	width: 18px;
}
/* offcanvas menu end */

/* header area end */

/* hero area start */
.hero-area {
   padding: 165px 0 53px;
   border-radius: 0px 0px 30px 30px;
   background-color: var(--primary-color);
}
.hero-area-main {
	padding: 30px 0;
	border-radius: 44px;
}
.hero-wrapper {
	max-width: 1210px;
	gap: 93px;
}
.hero-title {
	font-size: 72px;
	line-height: normal;
}
.hero-desc {
	font-size: 20px;
	max-width: 500px;
}
.hero-thumb {
	border-radius: 185.105px;
	border: 3.791px solid #D9D9D9;
	width: 330px;
}
.hero-thumb img {
   border-radius: inherit;
}
.brand-area-btn {
	border-radius: 30px;
	background-color: var(--secondary-color);
	font-size: 34px;
	color: var(--primary-color);
	text-transform: capitalize;
	padding: 31px 85px;
   gap: 10px;
   height: max-content;
}
.brand-area-btn .btn-icon {
	width: 70px;
	height: 70px;
	background-color: var(--primary-color);
}
.brand-area-btn .btn-icon img {
   width: 30px;
}
.brand-slider-container {
	width: calc(100% - 470px);
	padding: 0 21px;
	border-radius: 20px;
	border: 1px solid #FFF;
}
.brand-slide {
	width: 300px;
	height: 132px;
	border-right: 1px solid #4A5357;
}
.testimonial-slider-container {
	border-radius: 30px;
	border: 1px solid #D9D9D9;
	background: var(--secondary-color);
	padding: 47px 84px;
}
.testimonial-img {
	width: 166px;
	height: 166px;
}
.testimonial-img img {
   width: 136px;
}
.review {
	font-size: 44px;
	text-transform: capitalize;
	max-width: 1220px;
	margin: 33px auto;
}
.testimonial-name {
	font-size: 32px;
	margin-bottom: 0;
}
/* hero area end */

/* pricing area start */
.pricing-area {
	padding: 120px 0;
}
.pricing-area-title {
	border-radius: 51px;
	background-color: var(--secondary-color);
	padding: 26px 40px 26px 22px;
	margin-bottom: 30px;
	gap: 21px;
}
.pricing-area-title h2 {
	border-radius: 40px;
	background-color: var(--primary-color);
	padding: 22px 40px;
	max-width: 600px;
	flex-shrink: 0;
}
.price-title-right {
	gap: 30px;
}
.arrow-btn {
	width: 122px;
	height: 122px;
	background-color: var(--primary-color);
	flex-shrink: 0;
	transform: rotate(-45deg);
}
.arrow-btn img {
   width: 50px;
}
.arrow-btn:hover {
   background-color: #fff;
   transform: rotate(0);
}
.price-title {
	padding: 22px;
	background-color: var(--primary-color);
	border-radius: 40px;
   margin-bottom: 24px;
}
.price-card {
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 8px 5px;
	min-height: 470px;
	height: 100%;
}
.price-card-title {
	margin: 0 30px 0 12px;
	padding: 25px 0px 30px 20px;
	border-bottom: 1px solid #000;
}
.price-card-title h5 {
	font-size: 24px;
	line-height: normal;
}
.price-card-title h2 {
	font-size: 77px;
	line-height: normal;
}
.price-card-title h2 span {
   font-size: 36px;
}
.price-card-top ul {
	padding: 25px 35px;
	gap: 25px;
}
.price-card-top ul li {
	gap: 12px;
	font-size: 20px;
	text-transform: capitalize;
}
.price-card-btn {
	gap: 16px;
	font-size: 28px;
	padding: 17px;
	background-color: var(--primary-color);
	color: var(--secondary-color);
}
.price-card-btn .btn-icon {
	width: 38px;
	height: 38px;
	background-color: var(--secondary-color);
	flex-shrink: 0;
	transform: rotate(-32deg);
}
.price-card-btn .btn-icon img {
   width: 15px;
}
.price-card-btn:hover {
   background-color: #fff;
   color: var(--primary-color);
}
.price-card-tag {
   font-size: 24px;
   padding: 8px 15px;
   top: 25px;
   right: 32px;
}
/* pricing area end */

/* database area start */
.database-area {
	padding: 102px 0;
	border-radius: 0px 0px 30px 30px;
	background-color: var(--primary-color);
}
.database-area-title {
	margin-bottom: 60px;
}
.database-area-title h3 {
	max-width: 590px;
}
.database-area-title p {
	max-width: 470px;
}
.database-btn-wrap {
	padding: 88px;
	border-radius: 100px;
	gap: 63px 24px;
}
.database-btn {
	background-color: var(--secondary-color);
	color: var(--primary-color);
	border-radius: 37px;
	padding: 8px 13px;
	font-size: 32px;
	line-height: normal;
   gap: 56px;
   font-family: "Outfit", sans-serif;
}
.database-btn-left {
	gap: 24px;
}
.btn-left-icon {
	width: 112px;
	height: 112px;
	background-color: var(--primary-color);
   transition: all .3s;
}
.database-btn .btn-text {
	width: 256px;
}
.database-btn.small .btn-text {
   width: 225px;
}
.database-btn .btn-arrow {
	transform: rotate(-45deg);
   transition: all .3s;
}
.database-btn:hover {
   background-color: var(--primary-color);
   color: var(--secondary-color);
}
.database-btn:hover .btn-left-icon {
   background-color: #fff;
}
.database-btn:hover .btn-arrow {
   transform: rotate(0);
   filter: brightness(99);
}
/* database area end */

/* testimonial area start */
.testimonial-area {
	padding: 120px 0;
}
.testimonial-area-title {
	border-radius: 51px;
	background-color: var(--secondary-color);
	gap: 21px;
	margin-bottom: 30px;
	padding: 26px 22px;
}
.testimonial-area-title h2 {
	border-radius: 40px;
	background-color: var(--primary-color);
	padding: 22px 40px;
	max-width: 720px;
}
.testimonial-area-title p {
	max-width: 400px;
}
.testimonial-area .testimonial-slider-container {
	margin: 0 20px;
}
.testimonial-slider2 .review {
	max-width: 815px;
	margin-bottom: 145px;
}
.slider-nav-wrap {
   gap: 29px;
   bottom: 65px;
}
.slider-nav {
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.50);
   transition: all .3s;
}
.slider-nav-prev {
   transform: rotate(180deg);
}
.slider-nav:hover {
   background-color: #fff;
}
/* testimonial area end */

/* cta area start */
.cta-area {
   padding:  0 24px 68px;
}
.cta-area-wrapper {
   border-radius: 60px;
   background-color: var(--secondary-color);
   padding: 57px 0;
}
.cta-wrapper {
	gap: 90px;
}
.cta-content h2 {
	font-size: 48px;
}
.cta-content p {
   font-size: 20px;
}
.cta-btn {
   gap: 10px;
   color: var(--secondary-color);
   background-color: var(--primary-color);
   padding: 31px 85px;
   font-size: 34px;
   border-radius: 30px;
}
.cta-btn .btn-icon {
   width: 70px;
   height: 70px;
   background-color: var(--secondary-color);
}
.cta-btn .btn-icon img {
   width: 29px;
}
.cta-btn:hover {
   background-color: #fff;
   color: var(--primary-color);
}
.cta-img {
	width: 415px;
	height: 510px;
	background-color: var(--primary-color);
   border-radius: 206px;
   gap: 24px;
}
.cta-img-icon {
   width: 90px;
}
.cta-img-text {
	font-size: 66px;
	color: var(--secondary-color);
}
/* cta area end */

/* footer area start */
.footer-area {
	border-radius: 99px 99px 0px 0px;
	background-color: var(--primary-color);
	padding: 88px 28px 24px;
}
.footer-wrapper {
	gap: 24px;
	padding-bottom: 30px;
}
.footer-logo {
	gap: 13px;
	font-size: 38px;
}
.footer-logo img {
   width: 50px;
}
.policy-menu {
   gap: 30px;
}
.policy-menu a {
   color: var(--secondary-color);
}
.policy-menu a:hover {
   color: #fff;
}
.payment-method {
	gap: 60px;
}
.pay-method-icon {
	width: 70px;
	height: 48px;
	background-color: #fff;
	border: 1px solid #D9D9D9;
	border-radius: 8px;
}
.copyright {
   padding-top: 30px;
}
.copyright-text {
	font-size: 12px;
}
/* footer area end */