/*.......body fonts.......*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
    --font-family: 'Poppins', sans-serif;
}
/*.......colors for website.......*/
:root {
    --primary: #c1121f;
    --secondary: #fe5e00;
    --highlight: #ffc300;
    --black: #000000;
    --white: #ffffff;
}
::-moz-selection {
    color: var(--black);
    background: var(--highlight);
}

::selection {
    color: var(--black);
    background: var(--highlight);
}
input {
    accent-color: #0000ff;
}
.logo-pre {
    background: none!important;
    width: 300px!important;
    height: auto!important;
    border-radius: 10px;
    padding: 20px;
}

/*.......heading highlight.......*/
.red-heading {
    font-weight: 700;
    color: var(--primary);
} 
.highlight {
    color: var(--black);
    background-color: var(--highlight);
}
/*.......background.......*/
.white-bg {
    background-color: var(--white)!important;
} 
.primary-bg {
    background-color: var(--primary)!important;
    color: var(--white);
} 
.secondary-bg {
    background-color: var(--secondary)!important;
    color: var(--white);
} 
.white-bg {
    background-color: var(--white)!important;
    color: var(--black)!important;
} 
.black-bg {
    background-color: var(--black)!important;
    color: var(--white)!important;
}
.engrave-bg {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.emboss-bg {
    background: var(--white);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.color-white {
    color: var(--white)!important;
}
.color-black {
    color: var(--black)!important;
}
.yellow-text {
    color: var(--highlight)!important;
}
/*.......company icons.......*/
.company-icons a {
    color: var(--white);
    font-size: 30px;
    margin-right: 20px;
}
.company-icons a::hover {
    color: var(--white);
}
.insta-bg {
    background-color: #833ab4;
    background: linear-gradient(to right, #833ab4,#fd1d1d,#fcb045);
}
.facebook-bg {
    background-color: #3b5998;
}
.linkedin-bg {
    background-color: #0077b5;
}
.ff-social-icons a {
    padding: 5px 13px;
    margin-right: 5px;
    border-radius: 50%;
    font-size: 30px;
}
/*.......white animated background.......*/
.animated-white-bg {
  background: linear-gradient(-45deg, var(--white), var(--highlight), var(--secondary), var(--primary));
  background-size: 200% 200%;
  animation: gradient 8s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*.......cta button.......*/
.btn-cta {
    background: linear-gradient(135deg, var(--highlight) 0%, var(--secondary) 54%, var(--black) 100%);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

/*.......about new.......*/
.about-new {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 50px;
}
/*..........records...........................*/
.records {
    height: 0px;
    position: relative;
    z-index: 5;
    margin-top: -60px;
    margin-bottom: 100px;
}

.records-box {
    background-color: #ffffff;
    box-shadow: 5px 5px 19px rgba(0, 0, 0, 0.06);
    width: 60%;
    border-radius: 14px;
    padding: 30px 10px;
    display: flex;
    margin: auto;
}

.records-box h2 {
    font-size: 40px;
    margin-block: 0px;
}

.records-box p {
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    margin-block: 0;
    margin-block-start: 5px;
}

.records-box div, .con-foot div {
    position: relative;
    flex-grow: 3;
}

.records-box div::after, .con-foot div::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    height: 100%;
}

.records-box div:nth-last-child(1):after,
 .con-foot div:nth-last-child(1):after {
    display: none;
}

.record-boxes {
    text-align: center;
}

.service-sec-list {padding: 25px;}
.service-sec-list img{height: 160px;width: 160px;}
.service-sec-list:hover{padding: 50px 25px; }
.service-sec-list:hover img{height:0px;  width: 160px;}


/*.............. Comparison section.............. */
.animate-img {
    animation: myAnim 10s ease 0s infinite alternate-reverse both;
    transform-origin: center bottom;
}
.comparebox {
    padding: 20px 20px;
    margin: 0;
}
.business-startup {
    background: url(../images/wave-hero.svg) center top no-repeat;
}

.cb-we {
  background-color: #EDF9F8;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.advantage, .disadvantage {
    text-align: justify;
}

.disadvantage {
    margin-left: 25px;
}
.advantage li:before {
    color: #00D26A!important;
}
.disadvantage li::before {
  content: "\f00d"; 
  color: #d60000;
}

.contactinfo a {
    font-size: 15px;
}
.floating-input:not(:placeholder-shown)~label {
    top: -10px;
    left: 15px;
    font-size: 12px;
    color: #828282;
    width: auto;
    background: var(--white);
}

@media only screen and (max-width: 768px) {
    .about-new {
        flex-direction: column-reverse;
    }
    .pt1 {
        margin-top: 50px;
    }
    .records {
        margin-top: -100px;
        margin-bottom: 0px;
    }
    .records-box h2 {
        font-size: 20px;
        margin-block: 0px;
    }
    .records-box p {
        font-size: 10px;
    }
    .records-box {
        width: 90%;
        border-radius: 10px;
        padding: 10px 10px;
        flex-wrap: wrap;
    }
    .record-boxes {
        margin: 20px 0px;
    }
    .comparison-table {
        font-size: 0.85rem;
    }
    .comparison-table td {
        padding: 10px 8px;
    }
    .newline-mobile {
        display:block;
    }
    .fttlnks {
        flex-direction: column-reverse;
        margin-bottom: 30px;
    }
}