:root {
  --blue: #348AC6;
  --saffron: #F46F27;
  --dark: #262A2E;
  --black: #000000;
  --white: #ffffff;
  --grey1: #383E43;
  --grey2: #646D74;
  --grey3: #C8D1D8;
  --grey4: #EFF4F6;
}

body{
    font-family: 'Poppins';
    font-weight: normal;
    font-size: 16px;
    color: var(--grey1);
    margin: 0;
    padding: 0;
}
a, button{
    transition: all .3s ease-out;
}
a:hover, button:hover,
a:focus, button:focus{
    outline: none !important;
    box-shadow: none !important;
}


/*Typography*/
h1{
    font-size: 54px;
    line-height: 64px;
    font-weight: bold;
    color: var(--dark);
}
h2{
    font-size:44px;
    line-height: 54px;
    font-weight: bold;
    color: var(--dark);
}
h3{
    font-size:28px;
    line-height: 38px;
    font-weight: bold;
    color: var(--dark);
}
h4{
    font-size:24px;
    line-height: 34px;
    font-weight: 600;
    color: var(--dark);
}
h5{
    font-size:18px;
    line-height: 28px;
    font-weight: bold;
    color: var(--dark);
}
h6{
    font-size:16px;
    line-height: 26px;
    font-weight: 600;
    color: var(--dark);
}
p{
    font-size: 16px;
    line-height: 26px;
    color: var(--grey2);
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
ul li{
    position: relative;
    padding-left: 34px;
    margin-bottom: 20px;
}
ul li:last-child{
    margin-bottom: 0;
}
ul li::before{
    content:"";
    position: absolute;
    left: 0;
    top: 1px;
    background: url('../images/icon-check-circle-saffron.svg') no-repeat left center;
    background-size: auto;
    width: 24px;
    height: 24px;
    
}
li{
    font-size: 16px;
    line-height: 26px;
    color: var(--grey2);
}
/*BG Colors*/
.bg-white{
    background-color: var(--white) !important;
}
.bg-dark{
    background-color: var(--dark) !important;
}
.bg-black{
    background-color: var(--black) !important;
}
.bg-grey1{
    background-color: var(--grey1) !important;
}
.bg-grey2{
    background-color: var(--grey2) !important;
}
.bg-grey3{
    background-color: var(--grey3) !important;
}
.bg-grey4{
    background-color: var(--grey4) !important;
}
.bg-primary{
    background-color: var(--blue) !important;
}
.bg-secondary{
    background-color: var(--saffron) !important;
}
/*Text Colors*/
.text-white{
    color: var(--white) !important;
}
.text-dark{
    color: var(--dark) !important;
}
.text-black{
    color: var(--black) !important;
}
.text-grey1{
    color: var(--grey1) !important;
}
.text-grey2{
    color: var(--grey2) !important;
}
.text-grey3{
    color: var(--grey3) !important;
}
.text-grey4{
    color: var(--grey4) !important;
}
.text-primary{
    color: var(--blue) !important;
}
.text-secondary{
    color: var(--saffron) !important;
}
/*Font Weights*/
.f-w-300{
    font-weight: 300 !important
}
.f-w-400{
    font-weight: normal !important
}
.f-w-500{
    font-weight: 500 !important
}
.f-w-600{
    font-weight: 600 !important
}
.f-w-700{
    font-weight: bold !important
}
.f-w-800{
    font-weight: 800 !important
}
.f-w-900{
    font-weight: 900 !important
}
/*Buttons & Links*/
.btn{
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    padding: 16px 30px;
    border-radius: 8px;
}
.btn-primary{
    background-color: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:hover:active, .btn-primary:focus:active{
    background-color: var(--dark);
    border-color: var(--dark);
}
.btn-secondary{
    background-color: transparent;
    color: var(--dark);
    border: 1px solid var(--dark);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:hover:active, .btn-secondary:focus:active{
     background-color: var(--dark);
    color: var(--white);
}
.link{
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
    color: var(--dark);
    text-decoration: underline;
}
.link:hover, .link:focus, .link:active, .link:hover:active, .link:focus:active{
    color: var(--blue);
    text-decoration: none;
}

/**/
section{
    padding-top: 100px;
    padding-bottom: 100px;
}
/*Hero Section Start*/
.hero-section{
    padding-top: 80px;
    padding-bottom: 80px;
}
.hero-section .hero-caption{
    position: relative;
}
.hero-section .hero-caption::after {
	content: "";
	background: url('../images/plane-illustration.svg') no-repeat;
    background-size: 100%;
    width: 197px;
    height: 177px;
	position: absolute;
	 top: 35px;
  right: -50px;
    z-index: -1;
}
.hero-section .hero-caption .small-text{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
}
.hero-section .hero-caption h1{
    margin-bottom: 34px;
    max-width: 550px;
}
.hero-section .hero-caption p{
    margin-bottom: 24px;
}
.hero-section .hero-caption ul{
    margin-bottom: 44px;
}
.hero-section .hero-img{
    text-align: right;
    
}
.hero-section .hero-img img {
	max-width: 100%;
	margin-right: 0;
}
/*Hero Section End*/

/*Compare Section Start*/

.compare-section{
    background: url('../images/compare-plan-img-desktop.jpg') no-repeat center top;
    padding-bottom: 0;
    background-size: cover;
    padding-top: 80px;
}
.compare-section .heading-block{
    max-width: 860px;
    margin: 0 auto 60px;
}
.compare-section .heading-block .mobile-img{
    display: none;
}
.compare-section .inner-wrap{
    gap: 30px;
}
.compare-section .inner-wrap .girl-img > img{
    max-width: 478px;
    margin: 0 auto;
}

.rate-card{
    max-width: 318px;
    margin-right: auto;
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-radius: 12px;
border: 1px solid rgba(200, 209, 216, 0.30);
background: var(--white);
box-shadow: 0px 0px 30px 0px rgba(81, 89, 98, 0.10);
}
.rate-card .logo{
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    color: var(--dark);
    text-align: center;
}
.rate-card p{
    text-align: center;
    color: var(--dark);
}
.rate-card .price{
    text-align: center;
}
.rate-card .price span{
    font-size: 34px;
font-weight: bold;
line-height: normal;
letter-spacing: 1.02px;
    background: linear-gradient(313deg, #3394D8 1.64%, #1954A5 103.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.rate-card .price sub {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.6px;
	color: var(--grey2);
	bottom: 4px;
}
.rate-card .feature-list{
    padding-top: 24px;
    border-top: 1px solid #C8D1D8;
}
.rate-card .feature-list li{
    color: var(--grey1);
    margin-bottom: 18px;
}
.rate-card .feature-list li:last-child{
    margin-bottom: 0;
}
.rate-card .feature-list li::before {
	top: 4px;
	background-size: 100%;
	width: 20px;
	height: 20px;
}

.rate-card.op{
   border: 0;
background: var(--dark);
box-shadow: 0px 0px 30px 0px rgba(81, 89, 98, 0.10);
    margin-left: auto;
    margin-right: 0;
}
.rate-card.op .logo{
    color: var(--white);
}
.rate-card.op p{
    color: var(--grey3);
}
.rate-card.op .price span{
     color: var(--saffron);
    background: none;
      -webkit-text-fill-color: var(--saffron);
}
.rate-card.op .price sub {
	color: var(--grey3);
}
.rate-card.op .feature-list{
    border-top-color: var(--grey2);;
}
.rate-card.op .feature-list li{
    color: var(--grey3);
}
.rate-card.op .feature-list li::before {
	background-image: url('../images/icon-check-circle-grey.svg');
}
/*Compare Section End*/


/*Feature Section Start*/
.feature-section{
    padding-top: 80px;
    padding-bottom: 80px;
}
.feature-section .feature-card{
    padding: 30px;
}
.feature-section .feature-card .icon{
    margin-bottom: 24px;
}
.feature-section .feature-card h4{
    margin-bottom: 15px;
}
/*Feature Section End*/

/*Pay Only CTA Section Start*/

.pay-only-section{
    padding-top: 0;
}
.pay-only-section .cta-box {
	background-image: url('../images/pay-only-img-desktop.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom right;
	padding: 64px 74px;
	border-radius: 20px;
	min-height: 448px;
}
.pay-only-section .cta-box h2{
    background: linear-gradient(313deg, #3394D8 1.64%, #1954A5 103.42%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
    letter-spacing: 1.32px;
    margin-bottom: 10px;
}
.pay-only-section .cta-box h3{
    font-weight: 500;
    margin-bottom: 40px;
}
.pay-only-section .cta-box .action .btn{
    margin-bottom: 26px;
}
/*Pay Only CTA Section End*/

/*Category Section Start*/

.category-section{
    padding: 0;
}
.category-section .inner-wrap{
    gap: 10px;
}
.category-section .categories-images-col{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    width: 50%;
}

.category-section .categories-images-col .categories-images-row{
    display: flex;
    padding-right: 0px;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    width: 100%;
    height: 220px;
}
.category-section .categories-images-col .categories-images-row .categories-images{
    flex: 1 0 0;
align-self: stretch;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.category-section .categories-images-col .categories-images-row .categories-images > img{
    width: 100%;
    height: 100%;
  object-fit: cover;
    transition: all .3s ease-out;
}
.category-section .categories-images-col .categories-images-row .categories-images:hover > img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
}
.category-section .categories-images-col .categories-images-row .categories-images .category-title {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	font-size: 18px;
    line-height: 25px;
	font-weight: 700;
	color: var(--white);
    padding: 0 10px;
    z-index: 2;
}
.category-section .categories-images-col .categories-images-row .categories-images::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.70) 100%);
    z-index: 1;
}
.category-section .categories-details-col{
    background: linear-gradient(310deg, #419FE0 1.7%, #1954A5 92.72%);
    padding: 60px 50px;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.category-section .categories-details-col .heading-block h2 {
    margin-bottom: 20px;
    color: var(--white)
}
.category-section .categories-details-col .heading-block p {
   color: var(--white);
}
.category-section .category-listing .accordion-item{
    background-color: transparent;
  border: 0;
  border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
}
.category-section .category-listing .accordion-item .accordion-header .accordion-button{
    background-color: transparent;
  border: 0;
  border-radius: 0;
    padding: 16px 0;
  color: var(--white);
    box-shadow: none !important;
    font-size: 16px;
    line-height: normal;
    font-weight: 600;
}
.category-section .category-listing .accordion-item .accordion-header .accordion-button:focus{
    box-shadow: none !important;
}
.category-section .category-listing .accordion-item .accordion-header .accordion-button::after{
    background-image: url('../images/icon-angle-down-white.svg');
}
.category-section .category-listing .accordion-item .accordion-header .accordion-button .counter{
    font-weight: bold;
    margin-right: 16px;
}
.category-section .category-listing .accordion-item .accordion-body {
	padding: 0 0 16px;
}
.category-section .category-listing .accordion-item .accordion-body .category-list li{
    font-size: 14px;
    line-height: 24px;
    color: #FFFFFF;
    margin-bottom: 10px;
}
.category-section .category-listing .accordion-item .accordion-body .category-list li:last-child{
    margin-bottom: 0;
}
.category-section .category-listing .accordion-item .accordion-body .category-list li::before{
    background-image: url('../images/icon-check-outline-grey.svg');
}

/*Category Section End*/

/*Offer banner Section Start*/

.offer-banner-section{
    padding-top: 10px;
    padding-bottom: 0;
}
.offer-banner-section .fluid-container-sm{
    padding: 0;
}
.offer-banner-section .cta-box {
	background-image: url('../images/savings-img-desktop.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top right;
	padding: 72px 0px;
	min-height: 478px;
    display: flex;
  align-items: center;
}
.offer-banner-section .cta-box h2{
  letter-spacing: 1.32px;
    margin-bottom: 20px;
}
.offer-banner-section .cta-box h3{
    font-weight: 500;
    margin-bottom: 40px;
}
.offer-banner-section .cta-box .discount-cards-group{
    margin-bottom: 50px;
    display: flex;
  align-items: center;
}
.offer-banner-section .cta-box .action .btn{
    margin-right: 20px;
}
.discount-cards-group .discount-card{
    display: flex;
padding: 20px;
align-items: center;
gap: 15px;
    border-radius: 8.381px;
background: #FFF;
box-shadow: 10px 20px 34px 0px rgba(81, 89, 98, 0.30);
    flex: 1 0 0;
  margin-right: 40px;
}
.discount-cards-group .discount-card .discount-perc{
    color: var(--saffron);
    font-size: 30px;
    font-weight: 900;
    line-height: 28px;
}
.discount-cards-group .discount-card .discount-desc{
    font-size: 18px;
    line-height: 28px;
    color: var(--dark);
}
/*Offer banner CTA Section End*/

/*Pricing Section Start*/
.pricing-section .fluid-container-xl{
    padding: 0;
}
.pricing-section .heading-block{
    margin-bottom: 60px;
}
.pricing-section .pricing-card-group{
    display: flex;
    align-items: center;
    gap: -1px;
}
.pricing-card{
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;
    align-self: stretch;
    border-top: 1px solid var(--grey3);
    border-right: 1px solid var(--grey3);
    border-bottom: 1px solid var(--grey3);
    flex: 1 0 0%;
}
.pricing-section .pricing-card-group .pricing-card:last-child{
    border-right: 0;
}
.pricing-card .title-block,
.pricing-card .price-block,
.pricing-card .feature-block,
.pricing-card .action-block{
    width: 100%;
}
.pricing-card .title-block .icon{
    margin-bottom: 16px;
}
.pricing-card .title-block .plan-title{
    margin-bottom: 4px;
}
.pricing-card .title-block .plan-offer{
    color: #DB2A9F;
    font-size: 20px;
font-weight: 600;
    line-height: normal;
}
.pricing-card .title-block .plan-offer .time{
    font-size: 14px;
font-weight: 600;
    color: var(--grey1);
}
.pricing-card .price-block .current-price{
    margin-bottom: 10px;
}
.pricing-card .price-block .old-price{
    color: #999;
    text-decoration: line-through;
}
.pricing-card .feature-block .feature-list li{
    font-size: 14px;
    line-height: 22px;
    color: var(--grey1);
    padding-left: 32px;
}
.pricing-card .feature-block .feature-list li::before{
    background-image: url('../images/icon-check-circle-blue.svg');
    height: 22px;
    width: 22px;
    background-size: 20px;
    background-position: center 1px;
}
.pricing-card .action-block{
    margin-top: auto;
}
.pricing-card .action-block .btn{
    width: 100%;
}
.pricing-card.premium .title-block .plan-title{
    color: var(--blue);
}
.pricing-card.bronze .title-block .plan-title{
    color: #ABA262;
}
.pricing-card.silver .title-block .plan-title{
    color: #AEAEAE;
}
.pricing-card.gold .title-block .plan-title{
    color: #DF9E20;
}
.pricing-card.platinum .title-block .plan-title{
    color: #71828D;
}

/*Pricing Section End*/


/*Testimonial section start*/


.testimonial-section{
    padding-top: 0;
}
.testimonial-section .heading-block{
    margin-bottom: 60px;
}
.testimonial-section .client-testimonial .feedback{
    position: relative;
    text-align: center;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 42px;
}
.testimonial-section .client-testimonial .feedback::before{
    content: "";
    background: url('../images/quote-up.svg') no-repeat;
    position: absolute;
    left: -60px;
  top: -30px;
    width: 54px;
    height: 44px;
    background-size: 100%;
}
.testimonial-section .client-testimonial .feedback::after{
     content: "";
    background: url('../images/quote-down.svg') no-repeat;
    position: absolute;
    right: -60px;
  bottom: -30px;
    width: 54px;
    height: 44px;
    background-size: 100%;
}
.testimonial-section .client-testimonial .client-info{
    text-align: center;
}
.testimonial-section .client-testimonial .client-info .avtar{
    margin-bottom: 20px;
}
.testimonial-section .client-testimonial .client-info .avtar > img{
    max-width: 70px;
    max-height: 70px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
}
.testimonial-section .client-testimonial .client-info .name{
    margin-bottom: 10px;
}
.testimonial-section .client-testimonial .action{
    margin-top: 50px;
}
/*Testimonial section end*/



