/* GOOGLE FONTS CDN LINK */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

/* SITE STYLES */

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

html {
    scroll-behavior: smooth;
}

.container {
    width: 90%;
    margin: 0 auto;
    padding: 1%;
}

.menuIcon {
    display: none !important;
}

/* SITE HEADER STYLES */

header {
    height: 100vh;
    padding: 0 20px;
    background: linear-gradient(105.18deg, #1E3C72 -2.04%, #2A5298 107.42%);
}

/* NAVBAR STYLES */

nav {
    width: 100%;
    padding: 20px 0;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.siteLogoImg {
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.siteLogoImg:hover {
    transform: translateX(5px) translateY(5px) scale(1.1);
}

.navList {
    display: flex;
    align-items: center;
    list-style: none;
}

.navLink {
    font-family: 'DM Sans';
    font-size: 20px;
    color: #fff;
    margin: 0 23px;
    text-decoration: none;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    padding: 8px;
    border-radius: 10px;
}

.navLink:hover,
.navbar:focus {
    color: #2A5298;
    background-color: #fff;
}

.siteTopBtn {
    font-family: 'DM Sans';
    font-size: 16px;
    color: #fff;
    margin: 0 23px;
    text-decoration: none;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    padding: 13px 31px;
    border-radius: 50px;
}

.siteTopBtn:hover,
.siteTopBtn:focus {
    color: #2A5298;
    background-color: #fff;
}

/* HERO PART STYLES */

.heroWrapper {
    display: flex;
    align-items: center;
    margin-top: 70px;
}

.heroImg {
    width: 600px;
    height: 100%;
}

.heroPartsHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    letter-spacing: -2px;
    color: #FFFFFF;
}

.heroPartsText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    margin-top: 30px;
}

.heroBtns {
    display: flex;
    align-items: center;
    margin: 40px 0;
}

.heroBtn1 {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    background-color: #fff;
    color: #0F2137;
    padding: 13px 31px;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s ease-in-out;    
}

.heroBtn1:hover,
.heroBtn1:focus {
    color: #fff;
    background-color: #2A5298;
}

.heroVideoWrapper {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.heroBtn2 {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    text-decoration: none; 
    margin-left: 10px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.playIcon {
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.heroBtn2:hover {
    color: #000;
}

.heroCompanyImageWrapper {
    display: flex;
    align-items: center;
}

.heroCompanyNames {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    margin-right: 21px;
    color: #FFFFFF;
    opacity: 0.6;
}

.comanyImages {
    cursor: pointer;
    transition: 0.5s ease-in-out;
    margin: 0 14px;
    opacity: 0.6;
}

.comanyImages:hover,
.comanyImages:focus {
    transform: translateY(-10px);
    opacity: 1;
}


/* APP PART STYLES */

/* APP TOP SECTION STYLES */
.appTopHeaderInfo {
    text-align: center;
}

.appTopHeaderText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    margin-top: 65px;
    color: #244886;
}

.appTopHeaderHeading {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    letter-spacing: -1.5px;
    color: #0F2137;
    margin-top: 15px;
}

.appTopSectionServiceWrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    margin-top: 70px;
}

.appTopSectionCards {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.appTopSectionCards:hover {
    transform: scale(0.99);
}

.appTopSectionCardsImg1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 30px;
    border-radius: 30px;
    background-color: #E4FFEE;
}

.appTopSectionCardsImg2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 30px;
    border-radius: 30px;
    background-color: #2A5298;
    opacity: 0.9;
}

.appTopSectionCardsImg3 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 30px;
    border-radius: 30px;
    background-color: #cc9fa7;
}

.appTopSectionCardsHeading {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    color: #0F2137;
    margin-top: 21px;
}

.appTopSectionCardsText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    margin-top: 20px;
    color: #343D48;
}


/* APP INFO SECTION PART STYLES */

.appInfoSection {
    margin-top: 100px;
}

.appInfoWrapper {
    display: flex;
    align-items: center;
}

.appInfoCards {
    padding: 20px;
}

.appInfoImage {
    width: 90%;
}

.appInfoCardItemText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: #244886;
}

.appInfoCardItemHeader {
    width: 510px;
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -1.5px;
    color: #0F2137;
    margin-top: 30px;
    margin-bottom: 81px;
}

.appInfoCardsItemBtGroup {
    width: 600px;
    display: flex;
    background: #FFFFFF;
    box-shadow: 0px 8px 24px rgba(69, 88, 157, 0.07);
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.appInfoCardsItemBtGroup:hover {
    transform: translateX(20px);
    box-shadow: 0px 8px 24px rgba(69, 200, 157, 0.7);
}

.appappInfoCardsItemBtGroupImg {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #260fba;
    padding: 20px;
    border-radius: 30px;
}

.appappInfoCardsItemBtGroupInfo {
    margin-left: 30px;
}

.appappInfoCardsItemBtGroupInfoHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 23px;
    color: #0F2137;
    margin-bottom: 20px;
}

.appappInfoCardsItemBtGroupInfoText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #343D48;
}


/* APP SECTION BOTTOM PART STYLES */

.appBtSectionHeaderInfo {
    margin-top: 70px;
}

.appBtSectionHeaderInfoText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: #244886;
}

.appBtSectionHeaderInfoHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    letter-spacing: -1.5px;
    color: #0F2137;
    margin-top: 20px;
}

.appBtSectionWrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
}

.appBtSectionCards {
    display: flex;
    align-items: center;
    padding: 20px;
    margin: 30px 10px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    border: 2px solid #fff;
    border-radius: 20px;
}

.appBtSectionCards:hover {
    border: 2px solid #260fba;
}

.appBtSectionCardsInfoPart {
    margin-left: 20px;
}

.appBtSectionCardsInfoPartHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    color: #0F2137;
}

.appBtSectionCardsInfoPartText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #343D48;
    margin-top: 20px;
}

.appComSectionWrapper {
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.appComSectionCardsText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: #244886;
    margin-bottom: 10px;
}

.appComSectionCardsHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -1.5px;
    color: #0F2137;
    margin-bottom: 40px;
}

.appComSectionBtText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #02073E;
    margin-bottom: 30px;
}

.appComSectionLink {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.16px;
    padding: 13px 31px;
    background-color: #02073E;    
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    border: 2px solid #fff;
}

.appComSectionLink:hover {
    background-color: #fff;
    color: #02073E;
    border: 2px solid #02073E;
}

.appComSectionCards {
    width: 100%;
    padding: 20px;
}

.appComSectionCardsImage {
    width: 100%;
}


/* HOW IT WORKS PART STYLES */

.howItWorks {
    height: auto;
    padding: 50px 0;
    background: url("img/howItWorksBgImg.png") no-repeat center/cover;
}

.howItWorksTopPart {
    text-align: center;
}

.howItWorksTopText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: #FFFFFF;
    opacity: 0.7;
}


.howItWorksTopTextHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    text-align: center;
    letter-spacing: -1.5px;
    color: #FFFFFF;
    margin-top: 5px;
}


.howItWorksWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}

.howItWorksCard {
    width: 263px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    margin: 20px;
}

.howItWorksCard:hover, 
.howItWorksCard:focus {
    transform: translateX(-20px);
}

.howItWorksCardTop {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.howItWorksCardTopNum {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 20px ;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 20px;
}

.howItWorksCardTopNumber {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 34px;
    color: #22437D;
}

.arrowImg {
    width: 60%;
}

.howItWorksCardBottomHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    color: #FFFFFF;
}

.howItWorksCardBottomText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    color: #FFFFFF;
    opacity: 0.65;
    margin-top: 15px;
}

/* PAYMENT PART STYLES */

.paymentWrapper {
    display: flex;
    align-items: center;
}

.paymentCard {
    width: 100%;
    padding: 50px;
}

.paymentImg {
    width: 100%;
}

.paymentCardTopText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    color: #244886;
}

.paymentCardHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    letter-spacing: -1.5px;
    color: #0F2137;
    margin-top: 8px;
}

.paymentCardText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #02073E;
    margin-top: 40px;    
    margin-bottom: 30px;
}

.paymentCardLink {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.16px;
    color: #FFFFFF;
    padding: 13px 35px;
    border-radius: 50px;
    background-color: #02073E;
    text-decoration: none;
    border: 2px solid #fff;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    outline: none;
}

.paymentCardLink:hover {
    background-color: #fff;
    color: #02073E;
    border: 2px solid #02073E;
}


/* PRICING PART STYLES */

.pricing {
    height: auto;
    padding: 50px 0;
    background: url("img/howItWorksBgImg.png") no-repeat center/cover;
}

.pricingWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}

.pricingCards {
    width: 480px;
    margin: 0 15px;
}

/* FREE CARD STYLES */

.freePlan {
    background: #2F5392;
    border-radius: 10px;
    padding: 70px 40px;
}

.freePlanHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 29px;
    letter-spacing: -0.55px;
    color: #FFFFFF;
}

.freePlanText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    margin-top: 10px;
    opacity: 0.7;
}

.pricingCardBody {
    margin-top: 57px;
}

.pricingCardBodyGruops {
    display: flex;
    align-items: center;
    margin: 15px 0;
}

.pricingCardBodyGruopsIconWrapper i {
    font-size: 25px;
    color: #3FDBB1;
}

.xmark, .xmarkText {
    color: #6D86B2 !important;
}

.xmarkGroups:last-child {
    margin-bottom: 80px;
}

.freePlanBodyText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    margin-left: 13px;
}

.pricingBottomLink {
    text-align: center;
}

.freePlanBtLink {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.16px;
    color: #2F5392;
    padding: 13px 31px;
    background-color: #fff;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    border: 2px solid transparent;
}

.freePlanBtLink:hover {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

/* PREMIUM CARD STYLES */

.premiumPlan {
    background-color: #fff;
    border-radius: 10px;
    padding: 60px 40px;
    position: relative;
}

.premiumCardPriceWrapper {
    position: absolute;
    top: 10%;
    right: 10%;
}

.premiumCardPriceText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: right;
    color: #343D48;
}

.premiumCardPriceNum {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 26px;
    line-height: 34px;
    text-align: right;
    letter-spacing: -0.55px;
    color: #25CB9E;
}


.premiumCardTopBox {
    width: 118px;
    padding: 1px 8px;
    background: #EF9E48;
    border-radius: 3px; 
}

.premiumCardTopBoxText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.14px;
    color: #FFFFFF;
}

.premiumPlanHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.55px;
    color: #0F2137;
    margin-bottom: 7px;
}

.premiumPlanText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #343D48;
}

.premiumPlanBodyText {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #343D48;
    margin-left: 13px;
}

.premiumPlanBtLinkWrapper, .freePlanBtLinkWrapper {
    margin-top: 80px;
}

.premiumPlanBtLink {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    letter-spacing: -0.16px;
    color: #FFFFFF;
    background-color: #02073E;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    padding: 13px 31px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.premiumPlanBtLink:hover {
    background-color: #fff;
    color: #02073E;
    border: 2px solid #02073E;
}


.premiumPlan , .freePlan {
    cursor: pointer;
    transition: 0.5s ease-in-out;
    border: 2px solid transparent;
}

.premiumPlan:hover , .freePlan:hover {
    transform: translateY(-5px);
    border: 2px solid #25CB9E;
}

/* SITE FOOTER PART STYLES */

.footerWrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    border-top: 2px solid #E5ECF4;
    padding-top: 58px;
}

.footerCards {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 20px;
}

.footerListHeader {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.5px;
    color: #0F2137;
    margin-bottom: 28px;
}

.footerTexts {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #02073E;
    opacity: 0.8;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    margin: 10px 0;
}

.footerTexts:hover {
    color: #260fba;
    opacity: 1;
}




































/* SITE MEDIA QUERIES */

@media screen and (max-width: 1200px) {

    .heroWrapper {
        margin-top: 0;
    }
    
    .navLink {
        font-size: 16px;
    }

    .siteTopBtn {
        padding: 13px 20px;
    }

    .heroPartsHeader {
        font-size: 50px;
    }

    .heroPartsText {
        font-size: 15px;
    }

    .heroCompanyNames {
        margin-right: 0;
    }

    .heroImg {
        width: 100%;
        height: 100%;
    }

    .appBtSectionWrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .howItWorksWrapper {
        display: flex;
        flex-wrap: wrap;
    }

    .howItWorksCard {
        margin: 20px;
    }


}

@media screen and (max-width : 1000px) {

    header {
        height: auto;
    }

    .siteTopBtn {
        display: none;
    }

    .menuIcon {
        font-size: 20px;
        color: #fff;
        display: block !important;
    }

    .navList {
        width: 100%;
        position: fixed;
        top: 80px;
        left: -100%;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 20px;
        background: rgba(0, 0, 0, 0.8);
        cursor: pointer; 
        transition: 0.5s ease-in-out;
    }

    .navItem {
        padding: 10px 0;
    }

    .navLink {
        font-size: 20px;
    }


    .active {
        left: 0;
    }

    .heroPartsHeader {
        font-size: 50px;
    }

    .heroPartsText {
        width: 400px;
        margin: 20px auto;
        font-size: 12px;
    } 

    .heroBtn1 {
        font-size: 12px;
        padding: 15px 20px;
    }

    .heroBtn2 {
        font-size: 12px;
    }

    .playIcon {
        font-size: 25px;
    }

    .heroWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }


    .heroCompanyImageWrapper, .heroBtns {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .heroImg {
        width: 80%;
        margin-top: 50px;
    }

    .appTopSectionServiceWrapper {
        grid-template-columns: repeat(1 , 1fr);
        margin-top: 20;
    }

    .appTopSectionCards {
        width: 100%;
        margin: 10px 0;
    }

    .appTopSectionCardsText {
        width: auto;
    }

    .appTopSectionCardsImg1 {
        height: auto;
        padding: 20px;
    }

    .appInfoWrapper {
        display: flex;  
        flex-direction: column;
    }

    .appInfoCardsImagePart {
        order: 1;
    }

    .appInfoCardsItemWrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .appInfoCardItemHeader {
        width: auto;
        font-size: 30px;
        text-align: center;
    }

    .appInfoImg {
        text-align: center;
    }

    .appInfoImage {
        width: 50%;
        margin: 0 auto;
    }

    .appInfoCardsItemBtGroup {
        width: 450px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .appappInfoCardsItemBtGroupInfo {
        margin-left: 0;
        margin-top: 10px;
    }

    .appBtSectionWrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .appBtSectionCards {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .appBtSectionCardsInfoPartHeader {
        margin-top: 20px;
    }

    .appComSectionWrapper {
        display: flex;
        flex-direction: column;
    }

    .appComSectionCards {
        text-align: center;
    }


    .paymentWrapper {
        flex-direction: column;
    }

    .paymentImg {
        width: 100%;
    }

    .paymentInfoPart {
        text-align: center;
    }

    .pricingWrapper {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .premiumPlan, .freePlan {
        text-align: center;
        width: auto;
        padding: 15px;
    }

    .premiumCardPriceWrapper {
        display: none;
    }

    .pricingCardBodyGruops {
        flex-direction: column;
    }

    .pricingCardBodyGruopsText {
        margin-top: 20px;
    }

    .pricingCards {
        margin-top: 20px;
    }

    .premiumPlanBtLinkWrapper, .freePlanBtLinkWrapper {
        margin: 30px 0;
    }

    .premiumPlanBtLink, .freePlanBtLink {
        font-size: 15px;
        padding: 10px 15px;
    }

    .pricingCardBodyGruopsText {
        margin-left: 0;
    }

    .footerWrapper {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .footerCards {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
   
    
}

@media screen and (max-width : 500px) {
    .heroPartsHeader {
        font-size: 40px;
    }

    .heroPartsText {
        width: auto;
    }

    .heroCompanyImageWrapper {
        text-align: center;
        flex-direction: column;
    }

    .comanyImages {
        margin: 20px 0;
    }

    .appInfoCardsItemBtGroup {
        width: 100%;
    }

    .appInfoCardItemHeader {
        font-size: 25px;
    }

    .appTopSectionCardsImg1, .appTopSectionCardsImg2, .appTopSectionCardsImg3 {
        background-color: #fff;
    }

    .appComSectionCardsHeader {
        font-size: 36px;
    }

    .appBtSectionCards {
        margin-left: 0;
    }

    .appComSectionLink {
        font-size: 15px;
        padding: 10px 15px;
    }

    .appBtSectionCardsInfoPart {
        margin: 0;
    }

    .howItWorksTopTextHeader {
        font-size: 30px;
    }

    .howItWorksWrapper {
        margin-top: 50px;
    }

    .howItWorksCard {
        text-align: center;
    }

    .howItWorksCardTopNum {
        width: 50px;
        height: 50px;
        padding: 10px;
    }

    .howItWorksCardTopNumber {
        font-size: 24px;
    }

    .howItWorksCardBottomHeader {
        font-size: 18px;
    }

    .howItWorksCardBottomText {
        font-size: 12px;
    }

    .paymentCardTopText {
        font-size: 12px;
    }

    .paymentCardHeader {
        font-size: 30px;
    }

    .paymentCardText {
        font-size: 14px;
    }

    .paymentCardLink {
        font-size: 12px;
        padding: 10px 30px;
    }
}

@media screen and (max-width : 300px) {
    .heroPartsHeader {
        font-size: 30px;
    }

    .heroPartsText {
        width: auto;
        font-size: 12px;
    }

    .heroBtns {
        text-align: center;
        flex-direction: column;
    }

    .heroVideoWrapper {
        margin-left: 0;
    }

    .heroBtn1 {
        padding: 10px;
    }

    .heroBtn2, .playIcon {
        margin: 10px 5px;
    }

    .appComSectionLink {
        font-size: 10px;
        padding: 10px;
    }

    .appComSectionCardsHeader {
        font-size: 25px;
    }

    .appComSectionCardsText {
        font-size: 12px;
    }

    .paymentCardHeader {
        font-size: 23px;
    }
    
    .paymentInfoPart {
        padding: 10px;
    }

    .paymentCardLink {
        font-size: 13px;
        padding: 10px;
    }

    .footerListHeader {
        font-size: 15px; 
    }

    .footerTexts {
        font-size: 12px;
    }
}