*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
a{
    text-decoration: none;
    cursor: pointer;
}
body{
    width: 100vw;
    height: 100vh;
}
.navbar{
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 1rem;
    border-bottom: 0.5px solid rgb(221, 221, 221);
    z-index: 1111;
    overflow: hidden;
}
.navbar .logo img{
    width: 10rem;
}
.navbar .buttons-right-nav{
    display: none;
}
.navbar .hamburger{
    width: 1.5rem;
    height: 1.2rem;
    transition: all .5s ease-in-out;
    cursor: pointer;
    position: relative;
}
.navbar .hamburger .line{
    position: absolute;
    width: 28px;
    height: 3px;
    background: #000;
    top: 0.5rem;
    right: 0;
    transition: all .5s ease-in-out;
}
.navbar .hamburger .line::after {
    content: '';
    width: 20px;
    height: 3px;
    background: #000;
    position: absolute;
    top: 8px;
    transition: all .5s ease-in-out;
}
  
.navbar .hamburger .line::before {
    content: '';
    position: absolute;
    top: -8px;
    background: #000;
    width: 28px;
    height: 3px;
    transition: all .5s ease-in-out;
}

.navbar .hamburger .line.open{
    background: transparent;
}
.navbar .hamburger .line.open::before{
    transform: rotate(45deg) translate(5px, 8px);
}
.navbar .hamburger .line.open:after{
    transform: rotate(-45deg) translate(3px, -7px);
    width: 28px;
}


.nav-links-sm{
    position: absolute;
    top: 5rem;
    left: 0;
    /* background-color: red; */
    width: 100%;
    height: auto;
    max-height: 100vh;
    font-size: 1.2rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    transition: all .5s ease-in-out;
    transform: translateY(calc(-100% - 6rem));
    padding-bottom: 6rem;
    background: #fff;
    z-index: 11;
}
.nav-links-sm.open{
    transform: translateY(0);
}
.right-nav .nav-link-xl-block{
    display: none;
}
.nav-links-sm .products,
.nav-links-sm .how-it-works,
.nav-links-sm .pricing,
.nav-links-sm .resources,
.nav-links-sm .company{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem;
}
.nav-links-sm .company{
    margin-bottom: 2rem;
}
.nav-links-sm .products a,
.nav-links-sm .how-it-works a,
.nav-links-sm .pricing a,
.nav-links-sm .resources a,
.nav-links-sm .company a{
    color: #000;
}
/* .nav-links-sm .products i{
    font-size: 1.2rem;
} */
.product-hide-menu,
.resource-hide-menu,
.company-hide-menu
{
    display: none;
    transform: translateY(-100%);
    transition: all .5s ease-in-out;
}
.product-hide-menu.open,
.resource-hide-menu.open,
.company-hide-menu.open{
    display: block;
    transform: translateY(0);
}
.product-hide-menu .products-menu,
.resource-hide-menu .resource-menu,
.company-hide-menu .company-menu{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
    padding: 1.5rem 1rem;
    color: #8a8a8a;
}

.products-menu a,
.resource-menu a,
.company-menu a{
    display: flex;
    align-items: center;
}
.products-menu a .image-box,
.resource-menu a .image-box,
.company-menu a .image-box{
    align-self: flex-start;
    margin-right: 0.5rem;
}
.products-menu a .image-box .image,
.resource-menu a .image-box .image,
.company-menu a .image-box .image{
    width: 1.2rem;
    height: 1.2rem;
    background-color: #eef1f6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.products-menu a .text,
.resource-menu a .text,
.company-menu a .text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.products-menu a .text .sub-heading,
.resource-menu a .text .sub-heading,
.company-menu a .text .sub-heading{
    font-size: 0.9rem;
    color: #000;
    font-weight: 500;
}
.products-menu a .text .para,
.resource-menu a .text .para,
.company-menu a .text .para{
    font-size: 0.8rem;
    color: #858585;
    margin-top: 0.5rem;
}


.buttons-wrapper{
    padding: 1rem;
}
.buttons-wrapper .buttons{
    display: flex;
    flex-direction: column;
    background-color: #eef1f6;
    padding: 1.5rem;
    border-radius: 5px;
}
.buttons-wrapper .buttons a button{
    width: 100%;
    padding: 1rem;
    outline: none;
    font-size: 1.1rem;
    cursor: pointer;
}
.buttons-wrapper .buttons a button.signIn{
    border: 2px solid #000;
    border-radius: 5px;
    margin-bottom: 1rem;
    background: transparent;
    color: #182042;
    font-weight: 500;
}
.buttons-wrapper .buttons a button.createAC{
    border: none;
    border-radius: 5px;
    margin-bottom: 1rem;
    background: #182042;
    color: #fff;
    font-weight: 500;
}


/*section big text */

.big-text{
    padding-top: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.big-text h1{
    font-size: 3.3rem;
    color: #182042;
    padding: 1rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 0.5rem;
}
.big-text h1 span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.big-text p{
    color: #8a8a8a;
    text-align: center;
    font-size: 1rem;
    margin: 0 0.3rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
}
.big-text .big-buttons{
    display: flex;
    flex-direction: column;
}
.big-text .big-buttons a button{
    padding: 1rem 2rem;
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}
.big-text .big-buttons a button.freeAC{
    color: #fff;
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    border: none;
    border-radius: 5px;
    margin-bottom: 1rem;
}
.big-text .big-buttons a button.watchDemo{
    color: #000;
    background: transparent;
    border: none;
    border-radius: 3px;
    margin-bottom: 1rem;
    padding: 1rem 2.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.big-text .big-buttons a button.watchDemo i{
    font-size: 1.5rem;
    margin-right: 0.5rem;
}
.big-image{
    position: relative;
    margin-top: 3rem;
    padding: 0 0.5rem 0 1rem;
    z-index: 1;
    /* overflow: hidden; */
}
.big-image .top-image-left,
.big-image .top-image-right{
    /* transform: scale(50%); */
    
    position: absolute;
    top: 0;
}
.big-image .top-image-left{
    left: 0.5rem;
}
.big-image .top-image-left img{
    height: 6rem;
    width: 6rem;
}
.big-image .top-image-right img{
    height: 5rem;
    width: 5rem;
}
.big-image .top-image-right{
    right: 0.5rem;
}
.big-image .image{
    padding-top: 5.5rem;
}
.big-image .image img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.big-image .side-image-right{
    display: none;
}


.company-slider-box{
    width: 100%;
    height: auto;
    padding: 0.5rem 1.5rem;
    /* overflow: hidden; */
    
}
.company-slider-box .content-wrapper{
    background-color: #f7f6ff;
    padding: 5rem 1rem;
    position: relative;
    top: -4.5rem;
    border-radius: 10px;
}
.company-slider-box .content-wrapper .top-box-image img{
    position: absolute;
    top: 1.8rem;
    right: 0.5rem;
    z-index: 11;
    width: 4rem;
    height: 4rem;
}



.company-slider-box .slider-wrapper{
    position: relative;
    overflow: hidden;
    width: auto;
    height: 4rem;
    margin: auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
@keyframes scroll {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-10rem * 7));
    }
}
.company-slider-box .slider-wrapper .slider{
    animation: scroll 15s linear infinite;
    width: calc(10rem * 14);
    display: flex;
}

.company-slider-box .slider-wrapper .slider .slide{
    width: 10rem;
    height: 3rem;
    margin-right: 2rem;
}
.company-slider-box .slider-wrapper .slider .slide img{
    width: 100%;
    height: 100%;
}



.company-slider-box .slider-box-text{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
}
.company-slider-box .slider-box-text p{
    cursor: pointer;
}
.company-slider-box .slider-box-text p a{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-weight: 500;
}
.company-slider-box .slider-box-text p a i{
    margin-left: 1.5rem;
}

.company-slider-box .slider-box-bottom-image{
    position: absolute;
    bottom: -3rem;
}




/* tools section */

.tools{
    position: relative;
    padding: 0 2rem;
    padding-top: 5rem;
    margin-bottom: 8rem;
    display: none;
    /* overflow: hidden; */
}
.tools .boxes-image{
    width: 8rem;
    position: absolute;
    top: -5rem;
    right: 1rem;
}
.tools .boxes-image img{
    width: 100%;
}
.tools .heading{
    display: flex;
    align-items: center;
    color: #7d8ba3;
    margin-bottom: 2rem;
}
.tools .heading span{
    font-size: 1.5rem;
    /* margin-right: 1rem ; */
   
}
.tools .heading p{
    font-weight: 500;
}
.tools h2{
    font-size: 2.55rem;
    font-weight: 600;
}
.tools h2 span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}



.tools-content{
    margin-top: 5rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* grid-gap: 2rem; */
    margin-bottom: 2rem;
    /* overflow: hidden; */
}
.tools-content .tool-tab{
    display: flex;
    /* overflow: hidden; */
}
.tools-content .tool-tab .tool-image{
    margin-right: 3rem;
}
.tools-content .tool-tab .tool-image .image{
    width: 3.5rem;
    height: 3.5rem;
    background-color: #f1f1f1;
    transform: rotate(45deg);
    position: relative;
}

.tools-content .tool-tab .tool-image .image .img-wrap{
    position: absolute;
    top: -0.6rem;
    transform: rotate(-45deg);
    right: -12px;
    background-color: #fff;
    padding: 0.7rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.5px solid #eef1f6;
    box-shadow: 0px 10px 16px rgba(178,166,227,0.2);
}
.tools-content .tool-tab .tool-image .image .img-wrap img{
    width: 2rem;
}
.tools-content .tool-tab .tab-text{

}
.tools-content .tool-tab .tab-text h4{
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.tools-content .tool-tab .tab-text p{
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.tools-content .tool-tab .tab-text span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    cursor: pointer;
}
.tools-content .tool-tab .tab-text span i{
    margin-left: 1rem;
}



.seam{
    padding: 0 1rem;
    
}
.seam-background{
    background-color: #fff0f2;
    padding-top: 4rem;
    padding-bottom: 2rem;
    border-radius: 10px;
    position: relative;
}
.seam .seam-background .top-boxes{
    width: 5.5rem;
    position: absolute;
    top: 1.5rem;
    right: 1.7rem;
}
.seam .seam-background p{
    font-size: 2rem;
    padding: 0 2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1.5rem;
}
.seam .seam-background span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.seam .seam-background span i{
    margin-left: 1rem;
}

.seam-logos{
    display: flex;
    flex-direction: row;
    margin-top: 2rem;
    /* margin-bottom: 2rem; */
    overflow: hidden;
    /* padding: 0 1rem; */
}
.seam-logos .seam-wrapper{
    padding: 0 0.5rem;
    width: auto;
    /* margin-bottom: 4rem; */
}
.seam-logos .seam-wrapper.seam-margin-top{
    margin-top: 4rem;
}
.seam-logos .seam-wrapper .seam-logo{
    border: 3px solid #fff;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px 8px 24px rgba(255,152,98,0.2);

}
.seam-logo .logo-image{
    width: 6rem;
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.seam-logo .logo-image img{
    width: 4rem;
    object-fit: cover;
    object-position: center;
}



.platform{
    position: relative;
    padding: 0 0.5rem;
    padding-top: 5rem;
}
.platform-content{
    padding: 0 1.5rem;
}
.platform .platform-heading{
    display: flex;
    align-items: center;
    color: #7d8ba3;
    margin-bottom: 2rem;
}
.platform .platform-heading span{
    font-size: 1.5rem;
    margin-right: 1rem ;
   
}
.platform .platform-heading p{
    font-weight: 500;
}
.platform h2{
    font-size: 2.55rem;
    font-weight: 600;
}
.platform h2 span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.platform .platform-background{
    background-color: #1b1d33;
    margin-top: 3rem;
    border-radius: 10px;
    padding: 8rem 0;
    position: relative;
    overflow: hidden;
}
.platform-background .platform-padding{
    padding: 0 1rem;
}
.platform-padding .platform-image-text{
    display: none;
}
.platform-background .top-box-image{
    width: 3rem;
    position: absolute;
    top: 2.5rem;
    left: 0.2rem;
}
.platform-background .platform-content-wrapper{
    display: flex;
    padding-top: 2rem;
}
.platform-background .platform-content-wrapper .platform-content-image{
    display: none;
}
.platform-content-wrapper .platform-text .image-container{
    display: flex;
    align-items: center;
}
.platform-text .image-container .image-wrapper{
    width: 3rem;
    height: 3rem;
    background-color: #dda006;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}
.platform-text .image-container .image-wrapper.second{
    background-color: #b1a5e2;
}
.platform-text .image-container .image-wrapper.third{
    background-color: #fe9862;
}
.platform-text .image-container .image-wrapper.last{
    background-color: #80a5f7;
}
.image-container .text{
    color: #eef1f6;
    font-weight: 500;
    letter-spacing: 0.1rem;
}
.platform-text .platform-text-container{
    margin-bottom: 4rem;
}
.platform-text-container h4{
    color: white;
    margin: 1.5rem 0;
    font-size: 1.5rem;
}
.platform-text-container p{
    color: rgba(198,208,226,1);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 1.5rem 0;
}
.platform-text-container p a{
    color: rgba(45,166,242,1);
    font-weight: bold;
    display: flex;
    align-items: center;
}
.platform-text-container p a i{
    margin-left: 1rem;
}

.platform-text .bottom-box{
    position: absolute;
    bottom: 2rem;
    right: 0.2rem;
}
.platform-padding .verticle-line{
    display: none;
}



.trust{
    position: relative;
    padding: 0 0.5rem;
    padding-top: 5rem;
}
.trust-content{
    padding: 0 1rem;
}
.trust .trust-heading{
    display: flex;
    align-items: center;
    color: #7d8ba3;
    margin-bottom: 2rem;
}
.trust .trust-heading span{
    font-size: 1.5rem;
    margin-right: 1rem ;
   
}
.trust .trust-heading p{
    font-weight: 500;
}
.trust h2{
    font-size: 2.55rem;
    font-weight: 600;
}
.trust h2 span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.trust-content .trust-desc{
    color: gray;
    margin-top: 1rem;
    font-weight: 400;
    font-size: 1rem;
}

.trust-image{
    padding: 1rem;
    margin: 2rem 1rem 0 1rem;
    background-color: #eef1f6;
    display: flex;
    justify-content: space-between;
}
.trust-image .left{
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.left .image{
    width: 5rem;
    height: 5rem;
    background-color: #fff;
    border: 1px solid #eef1f6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trust-image .center{
    /* width: 8rem; */
    margin-top: 1.5rem;
}
.center img{
    width: 100%;
}
.trust-image .right{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.right .image{
    width: 5rem;
    height: 5rem;    
}
.right .image img{
    width: 100%;
    height: 100%;
}
.right p,
.left p{
    text-align: center;
    margin-top: 0.5rem;
    color: #182042;
}
.right p{
    font-weight: bold;
}
.left p span{
    font-weight: bold;
}

.fans{
    position: relative;
    padding: 0 0.5rem;
    padding-top: 6rem;
}
.fans .fans-background{
    background-color: #f7f6ff;
    padding-top: 8rem;
    padding-bottom: 5rem;
    position: relative;
    border-radius: 10px;
    padding-left: 1rem;
    padding-right: 1rem;
}
.fans-background .top-left{
    position: absolute;
    top: 3.1rem;
    left: 2.2rem;
    width: 6rem;
}
.fans-background .top-right{
    position: absolute;
    top: 3.5rem;
    right: 0.5rem;
    width: 7.5rem;
}

.fans-background .text-content{
    margin-bottom: 5rem;
}
.fans-background .text-content h2{
    text-align: center;
    font-size: 2.5rem;
    color: rgba(24,32,66,1);
}

.fans-background .text-content h2 span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.fans-background .text-content p{
    color: rgba(24,32,66,1);
    text-align: center;
    margin: 2rem auto 0 auto;
    font-size: 1.1rem;
    letter-spacing: 0.075rem;
}
.text-content .button{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 10rem;
}
.button button{
    padding: 1rem 3rem;
    font-size: 1.2rem;
    color: #fff;
    background-color: #182042;
    border-radius: 5px;
    border: 0;
    outline: none;
    display: flex;
    align-items: center;
}
.button button i{
    margin-left: 1rem;
}
.testimonial-slider{
    transition: all .5s ease-in-out;
    position: relative;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10rem;
    
}

.testimonial-slider .fans-slider{
    width: auto;
    height: auto;
    position: relative;
    padding: 6rem 2rem;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0,0.2);
}
.fans-slider .slider-user-image{
    position: absolute;
    top: -6rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    width: 7.5rem;
    height: 7.5rem;
    box-shadow: 16px 16px 40px rgba(24,32,66,0.2);
}
.slider-user-image img{
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.slider-text{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.slider-text .name{
    color: rgba(34,14,109,1);
    font-weight: 700;
    font-size: 1.1rem;
}
.slider-text .designation{
    color: rgba(34,14,109,1);
    font-size: 1rem;
}
.slider-text .company-logo{ 
    margin-bottom: 2rem;
}
.quote{
    position: relative;
    z-index: 0;
}

.slider-text .quote .description{
    text-align: center;
    color: rgba(24,32,66,1);    
    font-size: 0.9rem;
    line-height: 1.4rem;
    z-index: 111;
}
.quote .top_quote{
    position: absolute;
    top: -4rem;
    left: -1rem;
    opacity: 0.8;
    z-index: -1;
}
.quote .bottom_quote{
    position: absolute;
    bottom: -2rem;
    right: 0;
    opacity: 0.8;
    z-index: -1;
}


.fans-background .slider-btns{
    position: absolute;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
}
.slider-btns button{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    bottom: 0;
    background-color: #c6d0e2;
    border: 0;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    cursor: pointer;
}
.slider-btns button i{
    color: #99a8c2;
}
.slider-btns .left-btn{
    margin-right: 2rem;
}






.api{
    position: relative;
    padding: 0 0.5rem;
    padding-top: 5rem;
}
.api-content{
    padding: 0 0.5rem;
}
.api h2{
    font-size: 2.55rem;
    font-weight: 600;
}
.api h2 span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.api-content p{
    color: gray;
    margin: 1rem 0;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
}
.api .api-screen{
    position: relative;
    background-color: #ffece3;
    width: 100%;
    height: 5.5rem;
    margin-top: 5rem;
}
.api-screen img{
    position: absolute;
    width: 95%;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
}



.operators{
    position: relative;
    padding: 0 0.5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.operators-content{
    padding: 0 0.5rem;
}
.operators h2{
    font-size: 2.55rem;
    font-weight: 600;
    text-align: center;
}
.operators h2 span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.cards{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding: 0 1rem;
}
.cards .left-card,
.cards .right-card{
    width: auto;
    height: auto;
    padding: 2rem;
    border-radius: 10px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cards .left-card{
    background-color: #ffece3;
    margin-bottom: 4rem;
}
.cards .right-card{
    background-color: #f7f6ff;
}
.left-card img,
.right-card img{
    width: 100%;
}
.left-card h2,
.right-card h2{
    margin-top: 1.5rem;
    font-size: 2rem;
    line-height: 2.5rem;
    text-align: center;
}
.left-card p,
.right-card p{
    margin: 1.25rem 0;
    font-size: 1rem;
    line-height: 1.5rem;
    text-align: center;
    color: rgba(24,32,66,1);
}
.left-card span,
.right-card span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-card span a,
.right-card span a{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-weight: 500;
    line-height: 1.5rem;
    text-align: center;
    font-size: 1.1rem;
}
.left-card span a i,
.right-card span a i{
    margin-left: 1rem;
}



.footer{
    position: relative;
    top: -3.5rem;
    background-color: #182042;
    width: 100%;
    height: auto;
    padding-top: 15rem;
    padding-bottom: 2rem;
}
.footer .left-top{
    position: absolute;
    top: 7rem;
    left: 0.1rem;
    width: 4rem;
}
.footer-content{
    padding: 0 1.5rem;
    padding-bottom: 11rem;
    position: relative;
    margin-bottom: 3rem;
}
.footer-content h2{
    color: #fff;
    margin-top: 0.5rem;
    font-size: 2.5rem;
    line-height: 3rem;
}
.footer-content p{
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6rem;
    color: #fff;
}
.footer-content button{
    border: 0;
    outline: none;
    background-color: #fff;
    color: #182042;
    padding: 1rem 3rem;
    font-size: 1rem;
    border-radius: 5px;
    font-weight: 600;
}

.footer-content .right-bottom{
    position: absolute;
    bottom: 0;
    right: 3rem;
    width: 9rem;
}





.footer-links{
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
}
.footer-links .grid-links{
    padding: 0 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2rem;
}
.grid-links .links{
    display: flex;
    flex-direction: column;
}
.links span{
    color: rgb(255,255,255);
    opacity: 0.3;
    margin-bottom: 1rem;
}
.links a{
    color: #fff;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 400;
}

.footer-links .search{
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    margin-top: 2rem;
}
.search label{
    color: #fff;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}
.search .input{
    width: 100%;
    position: relative;
}
.search .input input{
    color: #fff;
    border: none;
    border-bottom: 1px solid;
    background-color: transparent;
    outline: none;
    border-color: rgba(255,255,255,0.3);
    padding: 0.5rem 1rem 0.5rem 0.2rem;
    width: 100%;
}

.search .input i{
    position: absolute;
    right: 1rem;
    font-size: 1.2rem;
    color: #fff;
    opacity: 0.8;
    top: 50%;
    transform: translateY(-50%);
}


.border{
    padding: 0 1rem;
    margin-bottom: 2rem;
}
.border hr{
    background-color: #fff;
    opacity: 0.3;
}



.rights{
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
}
.rights p{
    font-size: 0.9rem;
    color: rgb(198,208,226);
    margin-bottom: 0.5rem;
    text-align: center;
}
.rights p span{
    background: linear-gradient(to right,#422b99,#791b96 19.27%,#a3008b 36.46%,#c5007b 56.77%,#e00066 75.52%,#ff5300);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.rights .pages{
    display: flex;
    flex-wrap: wrap; 
}
.pages a{
    margin-right: 1.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
    font-weight: 400;
    font-size: 0.8rem;
}




.chat{
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color:#ff5300;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1111;
}
.chat img{
    filter: invert(100%);
    width: 2.5rem;
}