/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import '~@fortawesome/fontawesome-free/css/all.css';

html{
    scroll-behavior:smooth !important;
    scroll-padding: var(--scroll-padding,5rem);
    
}
* {
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

h2 {
    font-weight: 900;
}

p {
    line-height: 30px;
    font-weight: 500;
    margin: 3% 0 3% 0;
    font-size: 15px;

}
/* Header section */
#header nav {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

#header .logo {
    width: 200px;
    cursor: pointer;
}

#header ul li .hov:hover {
    cursor: pointer;
    background-color: #0d6efd !important;
    color: #fff !important;
}

#header .dropdown-toggle {
    border: none;
}

#header .btn-check:checked + .btn,
#header .btn.active,
#header .btn.show,
#header .btn:first-child:active,
:not(.btn-check) + .btn:active {
    border-color: #fff !important;
}

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

    #header .logo {
        width: 200px !important;
    }
}

/* Banner section */
#banner h2 {
    font-weight: 900;
}

#banner p {
    text-align: justify;
}

.abbr {
    width: 473px;
    height: 24px;
    top: -5012px;
    left: 7260px;
}
.abbr h3{
    margin:5% 0 0 0;
    font-size: 16px;
    font-style: italic;
    font-weight: bolder;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;
}
#banner .mobile {
    width: 620px;
    height: 340px;
}

.wrapper {
    display: inline-flex;
}

.wrapper .static-txt {
    color: #000;
    font-size: 60px;
    font-weight: 400;
}

.wrapper .dynamic-txts {
    margin-top: 15px;
    line-height: 30px;
    overflow: hidden;
}

ol,
ul {
    padding-left: 0;
}

.dynamic-txts li {
    color: #000;
    list-style: none;
    font-size: 25px;
    font-weight: 900;
    position: relative;
    top: 0;
}

@keyframes slide {
    100% {
        top: -260px;
    }
}

.dynamic-txts li span {
    position: relative;
}

.dynamic-txts li span::after {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    border-left: 2px solid #000;
    animation: typing 1.8s infinite;
}

@keyframes typing {
    100% {
        left: 100%;
        margin: 0 -35px 0 35px;
    }
}

@media only screen and (max-width: 560px) {
    #banner .mobile {
        width: 330px !important;
    }
}

@media only screen and (max-width: 1200px) {
    .wrapper .dynamic-txts {
        margin-top: 15px;
        line-height: 15px !important;
        overflow: hidden;
    }

    .dynamic-txts li {
        color: #000;
        list-style: none;
        font-size: 14px !important;
    }
}

/* Data Extraction section */

/* Define styles for the sticky section */
.sticky-section {
    position: relative;
    top: 0;
}

#Data-Extract {
    background-color: #20285E;
    color: #fff;
}

#Data-Extract p {
    text-align: center;
}

#Data-Extract .secondary-overlay ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #00439C; */
    z-index: -1;
    transition: background-color 0.3s;
}

#Data-Extract .images {
    height: 350px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#Data-Extract .img {
    width: 60%;
}

@media only screen and (max-width: 1200px) {
    #Data-Extract p {
        text-align: justify;
    }

    #Data-Extract .images {
        height: 100px;
        bottom: -1px;
    }
}

/* Features section */
/* Define styles for the sticky section */
#Features .features-icon {
    width: 60%;
    margin: 36% auto;
}

#Features p {
    text-align: justify;
}

@media only screen and (max-width: 1200px) {
    #Features .features-icon {
        width: 30%;
        margin: 5% auto;
    }
}


/*Benefits Section  */
#Benefits {
    background-color: #F8FAFC;
}

#Benefits .card {
    background-color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 15px;
}

#Benefits .blue {
    background-color: #20285E;
    color: #fff;
}

#Benefits .img-height {
    min-height: 10vh;
}

#Benefits .img {
    width: 20%;
}

#Benefits h5 {
    font-weight: 800;
}

#Benefits p {
    text-align: justify;
    min-height: 200px;
    font-size: 15px;
}

#Benefits .card:hover {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
    transform: scale(1.03);
    transition: 0.3s all linear;
}


/* Works section */
#work {
    background-color: #20285E;
}

#work .icon-img {
    width: 15%;
    margin-bottom: 5%;
}

#work h6 {
    text-align: center;
    margin: 5%;
}

#work .icon-width {
    width: 25%;
}

#work .img-height {
    min-height: 12vh;
}

#work .position-relative {
    position: relative;
    left: 80%;
    top: 45%;
}

#work .flip-card {
    background-color: transparent;
    width: 300px;
    height: 400px;
    perspective: 1000px;
    border-radius: 15px;
}

#work .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 15px;
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
}

#work .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

#work .flip-card-front,
#work .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px;
}

#work .flip-card-front {
    background-color: #20285E;
    color: #fff;
    padding-top: 30%;
    border-radius: 10px;
}

#work .flip-card-back {
    background-color: white;
    color: #000;
    padding: 10% 6%;
    text-align: justify;
    border-radius: 10px;
    transform: rotateY(180deg);
}

@media only screen and (max-width: 1200px) {
    #work .flip-card {
        width: 100%;
    }
}

/* Data  Solution section */
/* Define styles for the sticky section */
/* .sticky-section {
    position: relative;
    top: 0;
} */

#Data-Extract-solution {
    background-color: #F8FAFC;
}

#Data-Extract-solution .card {
    border: none;
    border-radius: 15px;
}

#Data-Extract-solution .img {
    width: 15%;
}

#Data-Extract-solution .img-bg {
    min-height: 8vh;
}

#Data-Extract-solution h5 {
    font-weight: 800;
}

#Data-Extract-solution p {
    text-align: justify;
    min-height: 35rem;
}

#Data-Extract-solution .cards {
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

/* Integration Section */
/* Define styles for the sticky section */
/* .sticky-section {
    position: relative;
    top: 0;
} */

#Intergration i {
    font-size: 18px;
    color: #00439C;
}

#Intergration p {
    text-align: justify;
}

/* Free Trial section */
/* Define styles for the sticky section */
/* .sticky-section {
    position: relative;
    top: 0;
} */

#Trialplan p {
    text-align: justify !important;
    margin: 2% 0 2% 0 !important;
}

#Trialplan i {
    color: #00439C;
}

#Trialplan h5 {
    line-height: 28px;
    font-weight: 600;
}

/* Pricing Section */
#Pricing .card {
    background-color: #F8FAFC;
    border: 1px solid #d6c9c9;
}

#Pricing h3 {
    font-weight: 900;
}

#Pricing h6 {
    font-weight: 700;
    color: #0D6EFD;
}

#Pricing i {
    font-weight: 800;
    color: #0D6EFD;
}

#Pricing ul {
    padding-left: 0 !important;
    min-height: 26rem;
}

#Pricing ul li {
    list-style-type: none;
    font-weight: 300;
    font-size: 15px;
}

#Pricing li {
    padding: 10px 0;
}

#Pricing .btn {
    /* padding: 10px 20px; */
    border: none;
    cursor: pointer;
}

/* #Pricing .active {
    background-color: #007bff;
    color: white;
}

#Pricing .inactive {
    background-color: #f0f0f0;
    color: #333;
} */
.pricing-button.active {
    background-color: #007bff;
    color: white;
}

.pricing-button.inactive {
    background-color: #f0f0f0;
    color: #333;
}


  
@media only screen and (max-width: 1200px) {
    #Pricing ul {
        padding-left: 0 !important;
        min-height: 38rem !important;
    }
}

/* About Us Section  */
/* Define styles for the sticky section */
/* .sticky-section {
    position: relative;
    top: 0;
} */

#Aboutus {
    border-bottom: 1px solid #fff;
    background-color: #20285E;
    color: #fff;
}

#Aboutus p {
    text-align: justify;
}

/* Contact Section */
#Contact {
    background-color: #20285E;
}

#Contact .img {
    width: 15%;
}

#Contact .card {
    background-color: #F5F5F5;
}

#Contact textarea {
    resize: none;
}

#Contact .address {
    line-height: 30px;
}

#Contact .add {
    padding-left: 30% !important;
}

/* Footer Section */
#footer {
    background-color: #20285E;
}

#footer .footer-logo {
    width: 50%;
}

#footer .d-flex {
    justify-content: space-between;
}

#footer ol,
#footer ul {
    padding-left: 0 !important;
}

#footer ul li {
    list-style: none;
}

#footer ul li a {
    text-decoration: none;
    font-weight: 300;
    line-height: 30px;
    cursor: pointer;
}

.text-inline {
    display: flex;
    align-items: center;
    justify-content: center;
}

.usa-flag {
    width: 25px; /* Adjust the width as needed */
    margin: 7px 10px 0 0;
}

@media only screen and (max-width: 1200px) {
    #footer .footer-logo {
        width: 62% !important;
    }
}