/* Move down content because we have a fixed navbar that is 50px tall */
/*@import(Url:https://fonts.googleapis.com/css?family=Open Sans);*/

/*@import(Url:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);*/
@import url('fa-all.css');
@import url('Site.css');
   
body {
    padding-top: 0px;
    /*padding-bottom: 20px;*/
    /*linear-gradient(#045dfe, #033afe, #1ca6fd,#1ca6fd)!important;*/
    font-family: "Open Sans", sans-serif;
    background:rgba(136, 152, 170, .15)!important;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding: 10px!important;
    min-height: 570px !important;
    background:#fff;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}
.jumbotron {
    background: #004eda linear-gradient(#004eda, #004eda);
    color:#fff;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}
#main .navbar-inverse {
    background: #003aa3 !important;
    color:#fff!important;
}
#main .navbar-inverse a{
    color:#fff!important;
}
.dtma{
    display:table;
    margin:0px auto;
}
.footer-icon {
    margin-left: 1px;
    margin-right: 1px;
    /*background-color: #6c3db7;*/
    /* border: 1px solid #4c84ff; */
    /* border-radius: 5px; */
    text-align: center;
    padding: 3px 0px;
}
    .footer-icon .btn-div {
        height: 40px !important;
        /*max-height: 40px !important;*/
        overflow: hidden;
    }
    .footer-icon .btn-div label{
        margin-bottom:-5px!important;
    }
    .footer-icon button.btn-primary, .footer-icon div.btn-primary {
        /* background-color: #1766ff !important; */
        /* background-color: #fbbc05 !important; */
        /* border: 2px solid #6c3db7; */
        border: 0px solid #fff !important;
        background-color: transparent !important;
        color: #f86220;
    }
    .footer-icon .btn-sm{
        padding:5px 4px!important;
    } 
    .footer-icon i {
        font-size: 17px !important;
        color: #fff !important;
    }
    .footer-icon .btn-sm p, .btn-div p {
        font-size: 10px !important;
        line-height: 11px !important;
        color: #fff !important;
        clear: both !important;
        display: block !important;
        white-space: normal !important;
        margin: 0px;
        padding: 0px;
        text-align: center !important;
    }
    .switch {
        position: relative;
        display: inline-block;
        width: 40px;
        height: 24px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
.slider .on, .slider .off{
    font-size: 11px;
}
.color-circle {
    background: linear-gradient(45deg, #de187e, #803aea);
    width: 500px;
    height: 500px;
    border-radius: 50%;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}
.modal-header button {
    border: none !important;
    font-weight: 500;
    color: #fff;
    font-size: 28px;
    line-height: 7px;
    padding: 6px !important;
    float: right !important;
    margin-left: 5px;
    border-radius: 2px;
}

.minimize {
    background: rgba(250, 203, 8, 0.67);
}
.close2 {
    background: rgba(255, 0, 0, 0.70);
}
li.nav-item a.nav-link.indicators {
    padding: 3px !important;
    margin: 0px 5px !important;
    font-size: 15px !important;
    background-color: #fff;
    border-radius: 5px !important;
    font-weight: bold;
    width: 25px;
    height: 25px;
}
.d-none{
    display:none!important;
}
.clear{
    clear:both!important;
}
.coming-soon{
    height:300px;
    display:table;
    margin:20px auto;
    background:url(images/coming-soon.jpg) no-repeat center center;
    background-size:cover!important;
    width:100%;

}
.card-info .card-header{
    background:#2196F3;
    color:#fff;
}


.top-color {
    /*background-image: linear-gradient(#1f76a5,#00abd5);*/
    /*min-height:600px;
            width:100%!important;*/
    /*background: linear-gradient(180deg, #00e2ab, #00afd8) !important;*/
    /*background: linear-gradient(180deg,#1f76a5, #00afd8, #00afd8, #fff) !important;
            box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 20px -20px;*/
}
/* Set padding to keep content from hitting the edges */
.body-content {
    /*padding-left: 15px;
    padding-right: 15px;
    padding: 15px !important;
    min-height: 500px;
    background-color: #fff !important;*/
}

/* Override the default bootstrap behavior where horizontal description lists
           will truncate terms that are too long to fit in the left column
        */
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

#gcm-talk .navbar-inverse {
    background-image: linear-gradient(#1f76a5,#00abd5 )!important;
    border: none !important;
    border-bottom: 3px solid #7fc523 !important;
    border-radius: 0px !important;
    /*background-color:transparent!important;
            border:none!important;*/
    color: #fff;
    /*height: 100px !important;*/
    margin-bottom: 0px !important;
    padding: 5px 10px !important;
}

    #gcm-talk .navbar-inverse a {
        color: #fff !important;
    }

.logo {
    max-height: 70px !important;
    max-width: 90vw !important;
}

.banner {
    width: 90%;
    display: table;
    margin: 10px auto;
    color: #fff !important;
    /*background: #babef8;*/
    /*background: linear-gradient(180deg, #00e2ab, #00afd8)!important;*/
    background-image: linear-gradient(150deg, #1f76a5,#00abd5 );
    /*#7f3eac, #7f3eac,*/ border-radius: 10px !important;
    padding: 5px !important;
    height: 400px;
    /*box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;*/
    text-align: center !important;
    position: relative !important;
}
    /*.bg-banner{
            background:url(images/Settings.png) no-repeat left center!important;
            background-size:contain!important;
        }*/
    /*.bg-banner {
            background: url(images/11672775.png) no-repeat left center !important;
            background-size: contain !important;
            opacity: 0.35;
            width: 300px;
            height: 300px;
            z-index: 900 !important;
            position: absolute;
            left: 10px;
            top: 30px;
        }*/
    .banner .row {
        z-index: 1000 !important;
        position: absolute;
        left: 10px;
        top: 30px;
    }

.animated {
    animation: 2s up-downease-in-out infinite alternate-reverse both;
}

@keyframes up-down {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes right-left {
    0% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(-10px);
    }
}

.banner h2 {
    /*font-size: 40px;
                font-weight: 400;
                font-family: Poppins, sans-serif;*/
    font-size: 26px !important;
    font-weight: normal !important;
}

/*.banner*/
.color {
    color: #0091aa;
    /*font-size: 35px !important;*/
    /*padding-top: 25px !important;*/
    /*line-height: 90px !important;*/
    text-shadow: 1px 1px 1px #FFF;
    /*animation: right-left 2s ease-in-out infinite alternate-reverse both;*/
}

#icon {
    top: 25px;
    z-index: 100;
    position: absolute;
    -webkit-animation: linear infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 50s;
}

@-webkit-keyframes run {
    0% {
        left: 0;
    }

    48% {
        -webkit-transform: rotateY(0deg);
    }

    50% {
        left: calc(100% - 100px);
        -webkit-transform: rotateY(180deg);
    }

    98% {
        -webkit-transform: rotateY(180deg);
    }

    100% {
        left: 0;
        -webkit-transform: rotateY(0deg);
    }
}


.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
    /*display:flex!important;*/
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

footer {
    background-image: linear-gradient(#1f76a5,#00abd5 );
    color: #fff !important;
    padding: 10px 0px;
    width: 100%;
    font-size: 13px !important;
}

    footer .footer a {
        padding: 5px 30px 5px 30px !important;
        color: #fff !important;
        margin-bottom: 5px !important;
        display: block !important;
    }

.black-spot {
    padding: 0px;
    margin: 0px;
    background: url(https://www.gcmtechsolutions.com/content/images/black-spot.png) left center;
    background-repeat: no-repeat;
    padding-left: 15px;
    /* min-height: 10px; */
}

.dtma {
    display: table;
    margin: 0px auto !important;
}

.d-none {
    display: none !important;
}

.about {
    /*margin:40px auto;*/
}

    .about p {
        line-height: 25px !important;
        color: #000;
        text-align: justify;
    }

    .about h4 {
        font-weight: 700;
        color: #1f76a5;
    }

.section-title h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    text-transform: uppercase;
    position: relative;
    text-align: center
}

    .section-title h2:before {
        content: "";
        position: absolute;
        display: block;
        width: 160px;
        height: 1px;
        background: #00afd8;
        left: 0;
        right: 0;
        bottom: 1px;
        margin: auto;
    }

    .section-title h2::after {
        content: "";
        position: absolute;
        display: block;
        width: 60px;
        height: 3px;
        background: #ff0075;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }

.btn-danger {
    background-color: #388da8 !important;
    border-color: #388da8 !important;
}

*, ::after, ::before {
    box-sizing: border-box;
}

section, .section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 100px;
    overflow: clip;
}

.hero {
    width: 100%;
    /*min-height: 70vh;*/
    position: relative;
    padding: 10px 0 10px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

    .hero .hero-bg {
        content: "";
        background: rgba(255, 255, 255, 0.21);
        position: absolute;
        inset: 0;
        z-index: -2;
        opacity: 0.4;
    }

        .hero .hero-bg img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

    .hero h1 {
        margin: 0;
        font-size: 35px;
        font-weight: 700;
        line-height: 36px;
    }

        .hero h1 span {
            color: #008fa9;
        }

    .hero h3, .h3 {
        font-size: 20px !important;
    }

    .hero h2, .h2 {
        font-size: 22px !important;
    }

@media (min-width: 768px) {
    /*.hero .hero-img {
                max-width: 350px;
            }*/
}

.align-items-center {
    align-items: center !important;
}

.justify-content-center {
    justify-content: center !important;
}

.flex-column {
    flex-direction: column !important;
}

.d-flex {
    display: flex !important;
}

.zoom-in-out-box {
    /*margin: 24px;*/
    width: 450px;
    /*height: 450px;*/
    /*background: #f500cc;*/
    animation: zoom-in-zoom-out 25s ease infinite;
    max-width: 100vw !important;
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(1, 1);
    }
    /*100% {
                transform: scale(1, 1);
            }*/
}

.zoom-out-text {
    /*margin: 24px;*/
    /*width: 500px;
            height: 500px;*/
    /*background: #f500cc;*/
    animation: zoom-out-text 25s ease infinite;
    /*font-size:50px!important;*/
}

@keyframes zoom-out-text {
    0% {
        transform: scale(1.2, 1.2);
    }

    50% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1.2, 1.2);
    }
    /*100% {
                transform: scale(1, 1);
            }*/
}

.zoom-bg {
    /*margin: 24px;*/
    width: 500px;
    height: 500px;
    /*background: #f500cc;*/
    animation: zoom-bg 15s ease infinite;
}

@keyframes zoom-bg {
    0% {
        transform: scale(1.9, 1.9);
    }

    50% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1.1, 1.1);
    }
    /*100% {
                transform: scale(1, 1);
            }*/
}

@media all and (max-width:768px) {

    footer tr {
        display: table;
        width: 100%;
    }

    footer td.footer {
        display: table-row;
    }

    .zoom-in-out-box {
        max-width: 80vw !important;
    }
}

h2.page-title {
    background: #00add4 !important;
    color: #fff !important;
    font-size: 22px;
    padding: 8px !important;
    border-radius: 5px !important;
    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
}
.card {
    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15);
    border: 2px solid rgba(136, 152, 170, .15);
    border-radius: 5px;
    width: 100% !important;
    /*min-width: 350px;*/
    max-width: 100% !important;
}
    .card .card-header {
        padding: 10px;
        background: linear-gradient(310deg, #2dce89, #2dcecc);
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        border-radius: 5px;
        margin: 5px;
        
    }
    .card-body{
        padding:15px;
    }
    .card-title{
        padding:0px;
        margin:0px;
        font-size:20px;
    }
.table th {
    background: linear-gradient(#2dcecc, #2dcecc);
    color: #fff;
}
.cou-code{
    width:unset;
    padding:0px;
    border:none!important;
    background:none!important;
    min-width:25px!important;
    max-width:30px!important;
}
.input-group {
    width: 100%;
    max-width:280px!important;
    margin-bottom:15px!important;
   
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}
.bg-box{
    width:100%;
    /*background:rgba(136, 152, 170, .15);*/
}
.bg-box h6{
    font-weight:600;
    color:#1f76a5!important;
}
.small{
    font-size:11px;
}