@import url('https://fonts.googleapis.com/css2?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');

:root {
    --primary: #e83650;
    --primary-hover: #b32133;
    --secondary: #47b2e4;
    --secondary-hover: #16739c;
    --grad-blue: linear-gradient(90deg, rgba(41,175,206,1) 0%, rgba(23,118,159,1) 100%);
    --grad-red: linear-gradient(45deg, rgba(214,45,48,1) 0%, rgba(127,34,44,1) 100%);
    --grad-scroll-sol: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(14,66,133,0) 100%);
    --tertiary: #53718d;
    --tertiary-hover: #1c3b59;
    --ams-grad: linear-gradient(90deg, rgba(63, 14, 28, 1) 0%, rgba(14, 48, 83, 1) 100%);
    --ams-dark: #070B14;
    --font-family: 'Poppins', Raleway, sans-serif;
    --col-chattr: #F8224A;
    --col-checkapp: #9A01CB;
    --col-graviti: #2895BC;
    --col-graviti-pay: #5F4388;
    --col-eventhub: #E3552D;
    --col-propertiser: #186367;
    --col-getta: #159ED3;
    --box-radius-30: 30px;
    --box-radius-15: 15px;
    --text-light: rgba(255,255,255,0.6);
    --text-lighter: rgba(255,255,255,0.9);
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 64px;
    --width-container: 1200px;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

body {
    font-family: var(--font-family);
    font-weight: 400;
    color: #444444;
}

body,
p,
li,
button {
    font-weight: 400;
}

p,
li {
    line-height: 28px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    color: #000;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.5;
}

h1 {
    font-size: 80px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

.bg-grad-blue {
    background: var(--grad-blue);
}

.bg-grad-red {
    background: var(--grad-red);
}

section {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}
.sec-np-top{
    padding-top:unset;
}
.sec-hp {
    padding-top: 50px;
    padding-bottom: 50px;
}
.sec-np{
    padding-top:unset;
    padding-bottom:unset;
}
.ams-grad {
    background:var(--ams-grad);
}

.df-cc {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*--- list gen ---*/
.list-gen {
    margin: 10px 0 30px;
    padding-left: unset;
}

    .list-gen li {
        display: flex;
        margin-bottom: 10px;
    }

    .list-gen i {
        font-size: 16px;
        font-weight: 700;
        margin-right: 10px;
        padding-top: 5px;
    }


/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.btn {
    padding: 10px 25px;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 50px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.btn-secondary{
    background:var(--secondary);
    border-color:var(--secondary);
    color:#fff;
}
    .btn-secondary:hover,
    .btn-secondary:focus{
        background: var(--secondary-hover);
        border-color: var(--secondary-hover);
        color: #fff;
    }


.btn-block {
    width: 100%;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header .logo {
    transition: all 0.2s ease-in-out;
}
#header .logo img {
    max-height: 70px;
    height: 70px;
}

#header.header-scrolled, #header.header-inner-pages {
    background: var(--ams-grad);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    transition: all 0.2s ease-in-out;
}
    #header.header-scrolled .logo img {
        max-height: 55px;
        height: 55px;
        transition: all 0.2s ease-in-out;
    }

.navbar .getstarted, .navbar .getstarted:focus {
    padding: 8px 20px;
    margin-left: 30px;
    border-radius: 50px;
    color: var(--secondary);
    font-size: 14px;
    border: 2px solid var(--secondary);
    font-weight: 600;
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero-mtop {
    margin-top: 100px;
}

.home-hero {
    width: 100%;
    height: 70vh;
    background: var(--ams-grad);
    align-items: center;
    position: relative;
    padding-top: unset;
    padding-bottom: unset;
}

    .home-hero h1 {
        text-align: center;
        font-size: 80px;
        font-weight: 300;
        line-height: 1.2;
        color: #fff;
    }
        .home-hero h1 .h1-emp{
            font-weight:700;
        }
        .home-hero h1 span.ital {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-style: italic;
        }

        .home-hero h1 span.thin {
            font-weight: 200;
            display:block;
        }

        .home-hero h1 span.bold {
            font-weight: 800;
        }

    .home-hero p {
        margin: 20px 100px;
        padding: 0 150px;
        line-height: 1.5em;
        font-size: 1.5rem;
        font-weight:300;
        color: #fff;
        text-align: center;
    }

.hero-stars {
    background: transparent url('../img/hero-stars.jpg') no-repeat top center;
    height: 75vh;
}

.hero-btns {
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px 380px;
}
.hero-btns a{
    flex:1;
    margin:10px;
}

.home-hero-elements,
.sub-hero-elements {
    width: 100%;
    display: flex;
    justify-content: center;
}

.home-hero-elements {
    background: transparent url('/img/hero-elements.svg') no-repeat top center;
    background-size: contain;
    height: 75vh;
    align-items: center;
}

/*--------------------------------------------------------------
# Solutions
--------------------------------------------------------------*/

.scroll-solutions {
    background: var(--grad-scroll-sol);
    padding: 0 100px 100px 100px;
}

.card-grid-ss {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: var(--spacing-l);
    grid-row-gap: var(--spacing-l);
    width: 100%;
}

@media(min-width: 540px) {
    .card-grid-ss {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 960px) {
    .card-grid-ss {
        grid-template-columns: repeat(5, 1fr);
    }
}

.card-ss {
    list-style: none;
    position: relative;
}

    .card-ss:before {
        content: '';
        display: block;
        padding-bottom: 150%;
        width: 100%;
    }

.card__background {
    background-size: cover;
    background-position: center;
    border-radius: var(--spacing-l);
    bottom: 0;
    filter: brightness(0.75) saturate(1.2) contrast(0.85);
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: center;
    trsnsform: scale(1) translateZ(0);
    transition: filter 200ms linear, transform 200ms linear;
}

.card-ss:hover .card__background {
    transform: scale(1.05) translateZ(0);
}

.card-grid-ss:hover > .card-ss:not(:hover) .card__background {
    filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}

.card__content {
    left: 0;
    padding: var(--spacing-l);
    position: absolute;
    top: 0;
}

.card__category {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-s);
    text-transform: uppercase;
}

.card__heading {
    color: var(--text-lighter);
    font-size: 1.9rem;
    text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
    line-height: 1.4;
    word-spacing: 100vw;
}

/*--------------------------------------------------------------
# Home | G Scrolling Carousel
--------------------------------------------------------------*/
.gsc-section {
    padding-top:0;
    padding-bottom:0;
}
.g-scrolling-carousel {
    position: relative;
    padding: 50px 0;
}

    .g-scrolling-carousel .items {
        display: flex;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

        .g-scrolling-carousel .items > * {
            display: block;
            min-width: 144px;
            user-select: none;
        }

        .g-scrolling-carousel .items a {
            background: #fff;
            border-radius: 25px;
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
            height: 460px;
            min-width:360px;
            margin: 20px;
            overflow:hidden
        }
            .g-scrolling-carousel .items a.gsc-chattr {
                background: var(--col-chattr);
            }
            .g-scrolling-carousel .items a.gsc-checkapp {
                background: var(--col-checkapp);
            }
            .g-scrolling-carousel .items a.gsc-graviti {
                background: var(--col-graviti);
            }
            .g-scrolling-carousel .items a.gsc-getta {
                background: var(--col-getta);
            }
            .g-scrolling-carousel .items a.gsc-gravitipay {
                background: var(--col-graviti-pay);
            }
            .g-scrolling-carousel .items a.gsc-eventhub {
                background: var(--col-eventhub);
            }
            .g-scrolling-carousel .items a.gsc-propertiser {
                background: var(--col-propertiser);
            }

            .g-scrolling-carousel .items a .gsc-image {
                height:250px;
                overflow:hidden;
            }
            .g-scrolling-carousel .items a .gsc-image img{
                height:100%;
                width:auto;
            }
            .g-scrolling-carousel .items a .gsc-info {
                height: 210px;
                padding: 25px 30px;
                color: #fff;
                white-space:normal;
                position:relative;
            }
            .g-scrolling-carousel .items a .gsc-info h3{
                font-size:2.5rem;
                font-weight:700;
                color:#fff;
            }
                .g-scrolling-carousel .items a .gsc-info p {
                    font-size: 0.938rem;
                    color: #fff;
                    padding-right:50px;
                }
            .gsc-arrow-icon {
                background:rgba(0,0,0,0.3);
                border-radius:50%;
                width:50px;
                height:50px;
                color:#fff;
                display:flex;
                align-items:center;
                justify-content:center;
                position:absolute;
                bottom:25px;
                right:25px;
            }


.jc-right,
.jc-left {
    width: 36px;
    height: 36px;
    color: #757575;
    margin-bottom: auto;
    margin-top: auto;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 4px 8px 0 rgba(0,0,0,0.20);
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0.94;
}

.jc-right {
    right: 25px;
}

.jc-left {
    left: 25px;
}

    .jc-right:hover,
    .jc-left:hover {
        opacity: 0.98;
    }

    .jc-right:active,
    .jc-left:active {
        background-color: rgba(245, 245, 245, 0.98);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 8px 0 rgba(0,0,0,0.20);
    }

    .jc-right svg,
    .jc-left svg {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 24px;
        height: 24px;
        fill: #757575;
    }

    .jc-right:hover svg,
    .jc-left:hover svg {
        fill: #000;
    }





.hp-solutions-indv{
    min-height:200px;
    min-width:100px;
    border-radius:20px;
    background:#fff;
}

/*--------------------------------------------------------------
# Home | Services - Section
--------------------------------------------------------------*/

.home-services {
    background: var(--ams-grad);
    color: #fff;
    position: relative;
}

.h-services-row {
    border-top: 1px rgba(255,255,255,0.3) solid;
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
}

    .h-services-row .number {
        width: 20%;
    }

    .h-services-row .title,
    .h-services-row .description {
        width: 40%;
    }

    .h-services-row .title {
        font-size: 2.5rem;
        font-weight: 600;
        padding-right: 3rem;
    }

/*--------------------------------------------------------------
# Home | Solutions - Section
--------------------------------------------------------------*/
.home-solutions {
    background: var(--ams-grad);
    color: #fff;
    position: relative;
}

.h-solutions-intro a {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    color: #fff;
    padding: 15px;
    transition: all 0.5s;
}

    .h-solutions-intro a:hover {
        box-shadow: inset 0 0 0 10em var(--ams-dark);
    }

    .h-solutions-intro a .logo {
        max-width: 200px;
        width: 180px;
        height: 100px;
    }

    .h-solutions-intro a .image {
        border-radius: 25px;
        margin-bottom: 15px;
        height: 350px;
        overflow: hidden;
    }

        .h-solutions-intro a .image img {
            width: 100%;
        }

.h-solution-intro a p {
    font-size: 1.125rem;
    color: #fff;
    margin: unset;
    padding: 1rem;
}

.btn-view-sol {
    background: transparent;
    border: 1px #fff solid;
    border-radius: 25px;
    color: #fff;
    display: block;
    padding: 8px 35px;
    transition: all 0.5s;
}

.h-solutions-intro a:hover .btn-view-sol {
    background: #fff;
    color: #000;
}

.sec-solutions{}


/*--------------------------------------------------------------
# Sub Page Styling
--------------------------------------------------------------*/

.sub-head {
    background: var(--ams-grad);
    background-size: cover;
}

.sub-hero-stars,
.sub-hero-elements {
    align-items: end;
}

.sub-hero-stars {
    background: transparent url('../img/hero-stars.png') no-repeat top center;
}

.sub-hero-elements {
    background: transparent url('/img/hero-elements.svg') no-repeat top center;
    background-size: cover;
}

.sub-head .services-header {
    font-size: 60px;
    line-height: 70px;
    margin-bottom: 50px;
    color: #fff;
    font-weight: 700;
    padding-top:150px;
}

    .sub-head .services-header span {
        color: #321629;
        font-weight: 700;
        -webkit-text-stroke: 1px rgba(255,255,255,0.6);
    }

.sh-h3-flex {
    display:flex;
    align-items:end;
    margin-bottom:50px;
}

.sub-head h3 {
    color: #fff;
}



/*--------------------------------------------------------------
# Sub Page - Services
--------------------------------------------------------------*/
.services-shape-left {
    height: 600px;
    width: 220px;
    position: absolute;
    left: 0;
    top: 0;
}

.services-shape-right {
    height: 600px;
    width: 180px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.services-setup {
    display: flex;
    align-items: center;
}

.services-info-block {
    display: flex;
    flex-direction: column;
    padding: 3.5rem;
}

.services-type {
    color: var(--primary);
    font-size: 1.125rem;
    margin-bottom: unset;
}

.services-illustrations {
    width: 100%;
    max-width: 600px;
    padding: 3rem;
}


.hero-banner {
    height: 500px;
    background: #ccc;
    border-radius: 25px;
}

.hb-design {
    height: 500px;
    border-radius: 25px;
    background: #ccc url('/img/design-hero-banner.jpg') no-repeat center center;
    background-size: cover;
}

/*--------------------------------------------------------------
# Sub Page - Contacts
--------------------------------------------------------------*/
.sp-contact {
    background: var(--ams-grad);
    color: #fff;
    position: relative;
}
.card-glass {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding:50px;
}
    .card-glass h3,
    .card-glass h4{
        color: #fff;
    }
    .card-glass p{
        color:rgba(255,255,255,0.7)
    }
.card-glass label{
    margin-bottom:10px;
    color:#fff;
    font-weight:400;
}
    .card-glass .form-control {
        background: transparent;
        padding: .65rem 1rem;
        border:1px rgba(255,255,255,0.5) solid;
        border-radius:10px;
        color:rgba(255,255,255,0.7);
    }


.spc-services input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.spc-services .group {
    display: flex;
    align-items: center;
}

/* Styles */
.spc-services label {
    display: flex;
    align-items: center;
    padding: 1rem 1rem 1rem 2rem;
    position: relative;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.25, 0.5, 1.9);
}

.spc-services label::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: 1px solid;
    border-radius: 10px;
    z-index: -1;
    transition: all 0.25s cubic-bezier(0.25, 0.25, 0.5, 1.9);
}

.spc-services input[type=radio] + label::before {
    border-radius: 2rem;
}

/* Checked */
.spc-services input:checked + label {
    padding-left: 1em;
    color: #fff;
}

    .spc-services input:checked + label::before {
        width: 100%;
        height: 100%;
        background: var(--secondary);
        border: 0;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
    }


/*--------------------------------------------------------------
# Marquee
--------------------------------------------------------------*/
.marquee {
    opacity: 0.4;
    display: flex;
    overflow: hidden;
    height: 17vh;
    user-select: none;
    gap: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    -webkit-text-stroke: 1.5px #fff;
    text-stroke: 1.5px #fff;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
    transition: all 0.5s ease;
    -webkit-font-smoothing: antialiased;
}


.marquee__group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-width: 100%;
    animation: scroll 15s linear infinite reverse;
}

    .marquee__group span {
        color: white;
        font-size: 5vw;
        font-weight: 800;
        white-space: nowrap;
        font-family: Poppins, sans-serif !important;
    }

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 2rem));
    }
}

@media only screen and (min-width: 360px) {
    .marquee__group span {
        font-size: 6vw;
    }
}


/*--------------------------------------------------------------
# Shapes
--------------------------------------------------------------*/

.inverted-radius {
    position: relative;
    --r: 50px; /* the radius */
    --s: 50px; /* the size of the corner*/

    width: 100%;
    aspect-ratio: 1;
    background: #3FB8AF;
    border-radius: var(--r);
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%) no-repeat;
    mask: calc(var(--s) + var(--r)) 0 var(--_m), 0 calc(var(--s) + var(--r)) var(--_m), radial-gradient(var(--s) at 0 0,#0000 99%,#000 101%) var(--r) var(--r) no-repeat, conic-gradient(at calc(var(--s) + 2*var(--r)) calc(var(--s) + 2*var(--r)), #000 75%,#0000 0);
}

.ir-design {
    background: #ccc url('../img/services-design.jpg') no-repeat center center;
    background-size: cover;
}

.ir-development {
    background: #ccc url('../img/services-development.jpg') no-repeat center center;
    background-size: cover;
}

.ir-integration {
    background: #ccc url('../img/services-integration.jpg') no-repeat center center;
    background-size: cover;
}

.ir-consulting {
    background: #ccc url('../img/services-consulting.jpg') no-repeat center center;
    background-size: cover;
}

.inverted-radius .header {
    font-size: 75px;
    font-weight: 700;
    color: #fff;
    position: absolute;
    left: -10px;
    bottom: 0;
}

/* HTML: <div class="inverted-radius"></div> */
.inverted-radius-chattr,
.inverted-radius-checkapp,
.inverted-radius-graviti,
.inverted-radius-getta,
.inverted-radius-graviti-pay,
.inverted-radius-eventhub,
.inverted-radius-propertiser {
    --r: 35px;
    --s: 40px;
    width: 100%;
    height: 150px;
    aspect-ratio: 1;
    border-radius: var(--r);
    --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%) no-repeat;
    mask: right 0 bottom calc(var(--s) + var(--r)) var(--_m), right calc(var(--s) + var(--r)) bottom 0 var(--_m), radial-gradient(var(--s) at 100% 100%,#0000 99%,#000 101%) calc(-1*var(--r)) calc(-1*var(--r)) no-repeat, conic-gradient(from 90deg at calc(100% - var(--s) - 2*var(--r)) calc(100% - var(--s) - 2*var(--r)), #0000 25%,#000 0);
}

.inverted-radius-chattr {
    background: var(--col-chattr);
}

.inverted-radius-checkapp {
    background: var(--col-checkapp);
}

.inverted-radius-graviti {
    background: var(--col-graviti);
}

.inverted-radius-getta {
    background: var(--col-getta);
}

.inverted-radius-graviti-pay {
    background: var(--col-graviti-pay);
    background: #5F4388;
}

.inverted-radius-eventhub {
    background: var(--col-eventhub);
}

.inverted-radius-propertiser {
    background: var(--col-propertiser);
}



.ir-link {
    display: flex;
    flex-direction: column;
    justify-content: start;
    color: #fff;
    height: 150px;
    position: relative;
}

    .ir-link h4,
    .ir-link p {
        color: #fff;
    }

    .ir-link h4 {
        padding: 30px 30px 0 30px;
    }

    .ir-link p {
        padding: 0 60px 30px 30px;
    }

    .ir-link .arrow-chattr,
    .ir-link .arrow-checkapp,
    .ir-link .arrow-graviti,
    .ir-link .arrow-getta,
    .ir-link .arrow-graviti-pay,
    .ir-link .arrow-eventhub,
    .ir-link .arrow-propertiser {
        background: #fff;
        border: 3px solid;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        position: absolute;
        width: 50px;
        height: 50px;
        right: 10px;
        bottom: 10px;
        z-index: 10;
    }

    .ir-link .arrow-chattr {
        border-color: var(--col-chattr);
        color: var(--col-chattr);
    }
    .ir-link:hover .arrow-chattr {
        background: var(--col-chattr);
        color: #fff;
    }

    .ir-link .arrow-checkapp {
        border-color: var(--col-checkapp);
        color: var(--col-checkapp);
    }
    .ir-link:hover .arrow-checkapp {
        background: var(--col-checkapp);
        color: #fff;
    }

    .ir-link .arrow-graviti {
        border-color: var(--col-graviti);
        color: var(--col-graviti);
    }
    .ir-link:hover .arrow-graviti {
        background: var(--col-graviti);
        color: #fff;
    }

    .ir-link .arrow-getta {
        border-color: var(--col-getta);
        color: var(--col-getta);
    }
    .ir-link:hover .arrow-getta {
        background: var(--col-getta);
        color: #fff;
    }

    .ir-link .arrow-graviti-pay {
        border-color: var(--col-graviti-pay);
        color: var(--col-graviti-pay);
    }
    .ir-link:hover .arrow-graviti-pay {
        background: var(--col-graviti-pay);
        color: #fff;
    }

    .ir-link .arrow-eventhub {
        border-color: var(--col-eventhub);
        color: var(--col-eventhub);
    }
    .ir-link:hover .arrow-eventhub {
        background: var(--col-eventhub);
        color: #fff;
    }

    .ir-link .arrow-propertiser {
        border-color: var(--col-propertiser);
        color: var(--col-propertiser);
    }
    .ir-link:hover .arrow-propertiser {
        background: var(--col-propertiser);
        color: #fff;
    }


/*--------------------------------------------------------------
# Sub Page - Images
--------------------------------------------------------------*/
.ams-long,
.ams-short,
.ams-ls-double {
    background: #ccc;
    margin-bottom: 15px;
    overflow: hidden
}

    .ams-long img,
    .ams-short img,
    .ams-ls-double img {
        width: auto;
        height: 100%;
    }

.ams-long {
    height: 400px;
    border-radius: 150px;
}

.ams-short {
    height: 150px;
    border-radius: 300px;
}

.ams-ls-double {
    height: 550px;
    border-radius: 70px;
}

.ams-img-shape-H4,
.ams-img-shape-H3,
.ams-img-shape-H25,
.ams-img-shape-H2 {
    width: 100%;
    border-radius: 35px;
    background: #ccc;
    margin-bottom: 25px;
    overflow: hidden
}

.ams-img-shape-H4 {
    height: 400px;
}

.ams-img-shape-H3 {
    height: 300px;
}

.ams-img-shape-H25 {
    height: 250px;
}

.ams-img-shape-H2 {
    height: 200px;
}

    .ams-img-shape-H4 img,
    .ams-img-shape-H3 img,
    .ams-img-shape-H25 img,
    .ams-img-shape-H2 img {
        width: 100%;
        height: auto;
    }



.pasteline-red {
    position: absolute;
    left: 0;
    bottom: 10px;
    height: 380px;
}

.pasteline-blue {
    position: absolute;
    right: 0;
    bottom: 20px;
    height: 355px;
}

.pasteline-blue-home {
    position: absolute;
    right: 0;
    bottom: 20px;
    height: 440px;
}

    .pasteline-red img,
    .pasteline-blue img,
    .pasteline-blue-home img,
    .pasteline-blue-home img {
        width: 100%;
        height: 100%;
    }


/*--------------------------------------------------------------
# Solutions
--------------------------------------------------------------*/
.solutions-subpage-logo .logo {
    max-width: 250px;
    margin-bottom: 20px;
}

.sol-img-wrapper {
    padding: 0 50px;
}

.logo-graviti-pay .logo{
    max-width: 180px;
    margin-bottom: 20px;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

footer {
    background: var(--ams-dark);
}

.Footer-Setup, .Footer-Setup p, .Footer-Setup li, .Footer-Setup a {
    color: rgba(255, 255, 255, 0.6);
}

.Footer-Setup {
    color: #FFF;
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
}

    .Footer-Setup h5 {
        color: #fff;
    }
.foot-terms {
    display:flex;
    justify-content:space-between;
}



@media (max-width:1366px) {
    .home-hero h1 {
        font-size: 80px;
    }

    .hero-stars,
    .sub-hero-stars {
        background-size: contain;
    }

    .sub-head .services-header {
        font-size: 50px;
        line-height: 60px;
    }

    .h-solutions-intro a .image {
        height: 300px;
    }

    section {
        padding-top: 60px;
        padding-bottom: 60px;
        position: relative;
    }

    .Footer-Setup {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .scroll-solutions {
        padding: 0 50px 100px 50px;
    }
}

@media (max-width:1024px) {
    .home-hero h1 {
        font-size: 60px;
    }

    .home-hero p {
        margin: 20px 25px;
    }

    .h-solutions-intro a .image {
        height: 250px;
    }

    .pasteline-blue-home {
        height: 300px;
    }

    .pasteline-red {
        height: 300px;
    }

    .pasteline-blue {
        height: 250px;
    }
    .scroll-solutions {
        padding: 0 25px 100px 25px;
    }
    .card__heading {
        font-size: 1.45rem;
    }
}

@media (max-width:768px) {
    .home-hero h1 {
        font-size: 50px;
    }

    .home-hero p {
        padding: 0 30px;
    }

    .mhead-btns {
        padding: 20px 100px;
    }

    .home-hero,
    .hero-stars,
    .home-hero-elements {
        height: unset;
    }

    .hero-mtop {
        margin-top: 180px;
    }

    .pasteline-blue-home {
        height: 200px;
        bottom: -40px;
        z-index: 10;
    }

    .pasteline-red {
        height: 180px;
    }

    .h-services-row .title, .h-services-row .description {
        width: 80%;
    }

    .h-services-row .title {
        font-size: 2.125rem;
        margin-bottom: 1rem;
    }

    .h-services-row .description {
        margin-left: 20%;
    }

    .home-solutions .col-md-4 {
        width: 100%;
    }

    .sub-hero-elements .col-md-6 {
        width: 100%;
    }

    .sub-head .services-header {
        font-size: 45px;
        line-height: 50px;
    }

    .sub-hero-elements {
        background-size:contain;
    }

    h3 {
        font-size: 24px;
    }

    .sec-marq {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .marquee {
        height: 10vh;
    }

    .inverted-radius .header {
        font-size: 40px;
        bottom: 10px;
    }

    .sol-img-wrapper .col-md-6 {
        width: 100%;
    }
    .scroll-solutions {
        padding: 50px 25px;
    }
}

@media (max-width:480px) {
    header .container{
        padding-left:1.75rem;
        padding-right:1.75rem;
    }
    .home-hero p {
        margin: 20px;
        padding: 0;
        font-size: 1.125rem;
    }

    .mhead-btns {
        padding: 20px;
    }

        .mhead-btns .btn-light {
            margin-bottom: 15px;
        }

    .h-services-row .title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .pasteline-blue-home,
    .pasteline-red {
        height: 150px;
    }
    section,
    .Footer-Setup {
        padding: 50px 15px;
    }
    section {
        overflow: unset; 
    }
    .sub-head .services-header {
        font-size: 35px;
        line-height: 45px;
    }
    .sub-head,
    .sub-hero-stars, 
    .sub-hero-elements {
        min-height: unset;
    }

    h3 {
        font-size: 18px;
        line-height:28px;
    }
    .sub-hero-elements {
        padding-left: 15px;
        padding-right: 15px;
    }
    .sec-marq {
        padding:15px 0;
    }
    .home-hero {
        padding: 0;
    }

    .sol-img-wrapper {
        padding: unset;
    }
    .row-rev{
        display:flex;
        flex-direction:column-reverse;
    }
    .pasteline-blue {
        height: 150px;
    }
    .inverted-radius-chattr,
    .inverted-radius-checkapp,
    .inverted-radius-graviti {
        height: 90px;
        mask:unset;
    }

    .inverted-radius-chattr p,
    .inverted-radius-checkapp p,
    .inverted-radius-graviti p{
        display:none;
    }
    .ir-link {
        height: unset;
        min-height:90px;
    }
        .ir-link .arrow-chattr, 
        .ir-link .arrow-checkapp, 
        .ir-link .arrow-graviti {
            right: 20px;
            bottom: 20px;
        }
    .ams-img-shape-H3 {
        height: 230px;
    }
    .ams-long img,
    .ams-short img{
        width: 100%;
        height: auto;
    }
    .foot-terms {
        display: flex;
        flex-direction:column;
    }
    .sec-solutions {
        padding:50px 0;
    }

}

@media(max-width:425px){
    .ams-img-shape-H25 {
        height: 220px;
    }
}
@media(max-width:380px) {
    .home-hero h1 {
        font-size: 42px;
    }

    .g-scrolling-carousel .items {
        width: 340px;
    }
        .g-scrolling-carousel .items a {
            min-width: 310px;
        }
    .h-services-row .number {
        font-size: 1.5rem;
    }
}