:root {
    --black: #000000;
    --white: #ffffff;
    --gray: #878888;
    --light-gray: #dddddd;
    --light-gray-second:#efefef;
    --red: #da3438;
    --dark-gray: #333333;
    --blue:#eaf9fe;
    --yellow:#ffcc01;
}


@font-face {
    font-family: nicoler;
    src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: nicoleb;
    src: url(../fonts/Roboto-Bold.ttf);
}

@font-face {
    font-family: nicolem;
    src: url(../fonts/Roboto-Medium.ttf);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: nicoler;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: nicoleb;
}

a {
    text-decoration: none !important;
    color: var(--dark-gray);
}


/* Background */
.bg-nicole {
    background-color: var(--red);
}

.bg-nicole-gray {
    background-color: var(--dark-gray);
}

.bg-nicole-white {
    background-color: var(--white);
}

.bg-nicole-red {
    background-color: var(--red);
}
.bg-yellow{
    background-color: var(--yellow);
}

/* contact navbar */
.header1 a {
    color: var(--white);
}

.header1 {
    padding: 30px;
}

.header1 a:hover {
    color: var(--dark-gray);
}

/*  */
.logo-nicole{
    box-shadow: 5px 5px 40px var(--red);
}

/* Font  */
.fnicolem {
    font-family: nicolem;
}

.border-bottom-nicole-red {
    border-bottom: 5px solid var(--red);
}

/* Main Navbar */
#navbar1 {
    overflow: hidden;
    top: 0;
    width: 100%;
}

.sticky1+.content {
    padding-top: 30px;
}

.sticky1 {
    position: fixed;
    width: 100%;
    z-index: 99;
}

.navbar {
    /* border-bottom: 1px solid var(--red); */
    padding: 2px !important;
}

.navbar img {
    height: 9vh;
    padding: 1vh;
}

.nav-item a {
    color: var(--dark-gray);
    font-size: 0.8rem;
    text-transform: uppercase;
    /* padding: 2.3vh; */
    font-weight: 800;
    border-bottom: 2px solid var(--white);
}

.nav-item a:hover {
    border-bottom: 2px solid var(--red);
    /* border-top: 3px solid var(--black);
    background-color: var(--light-gray); */
    /* margin-bottom: -2px; */
    color: var(--red) !important;
}

/* credit copyright*/
.credit {
    background-color: var(--dark-gray);
    margin: 0px;
    color: #FFFFFF;
    font-size: 0.8rem;
}

.credit a {
    color: var(--white);
}

.credit a:hover {
    color: var(--red);
}

.credit .line-container {
    display: flex;
    justify-content: space-between;
}

/* About Start 

About Section */
.about-back-container {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2rem;
}

.about {
    padding: 4rem 0rem;
}

.about p {
    text-align: justify;
    /* color:var(--white); */
    color: #8e8e8e;
}

/* About us image */
/* .imageabout {
    height: 65%;
    border: 0px solid white;
    height: 389px;
    width: 405px;
} */
.about .img-fluid {
    height: 10vh;
}

.about .btn {
    color: var(--white);
}

.about .btn:hover {
    color: black;
}

/* About End */
/* GO TO TOP */
.gotop {
    display: none;
}

.faq-section{
    padding:4rem 0px;
}

.accordion-item{
    border: 1px solid var(--gray) !important;
    margin-bottom: 15px;
}

.accordion-button:not(.collapsed){
    color: var(--black) !important;
    background-color:var(--white);
}

/* What is DEF Section */
.def {
    padding: 4rem 0rem;
    background-color: var(--blue);
}

.def img {
    width: 65%;
}

.def p {
    text-align: justify;
}

/* nicnat  */
.nicnat-section{
    padding: 3rem 0px;
}

.nic-logo{
    width: 30%;
}

/* SCR-section */

.SCR-section{
    padding: 4rem 0rem;
}
.scr-img{
    width: 70%;
}

/* quote */
.quote {
    padding: 5rem 0rem;
}

.quote {
    background-image: url("../images/oiltrucks.jpg");
    background-color: grey;
    background-blend-mode: multiply;
    padding: 100px 0px;
    background-position: center;
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.quote h1 {
    font-family: 'Times New Roman', Times, serif;
}

.quote .btn1 {
    color: var(--white);
    border: 0.5px solid var(--red) !important;
    border-radius: 0px;
    padding: 0.3rem 1.5rem;
}

.quote .btn1:hover {
    background-color: transparent;
}

/* how does it work css */
.work {
    padding: 120px 0px;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.9;
    background-image: url("../images/factory.jpg");
}

/* footer */
.footer {
    padding: 2rem 0rem 3rem 0rem;
    color: var(--dark-gray);
}

.footer h1 {
    border-bottom: 1px solid var(--red);
    color: var(--red);
}

.footer h4 {
    color: var(--dark-gray);
}

.footer .mobnum {
    font-size: 1.5rem;
    color: var(--dark-gray);
}

.footer .mobnum:hover {
    color: var(--red);
}

.footer .mail {
    color: var(--dark-gray);
}

.footer .mail:hover {
    color: var(--red);
}

.followus a {
    font-size: 1.7rem;
    color: var(--dark-gray);
    margin-right: 5px;
}

.followus a:hover {
    /* margin-right: 1.5rem; */
    color: var(--red);
}

.address-mobile {
    display: none;
}

.address a:hover {
    color: var(--red);
}

.footer iframe {
    height: 100%;
    width: 100%;
}

/* animation */
.rotate {
    -webkit-animation: rotate 5s normal linear infinite;
    animation: rotate 5s normal linear infinite;
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }

    25% {
        -webkit-transform: rotate3d(0, 0, 1, 90deg);
        transform: rotate3d(0, 0, 1, 90deg);
    }

    50% {
        -webkit-transform: rotate3d(0, 0, 1, 180deg);
        transform: rotate3d(0, 0, 1, 180deg);
    }

    75% {
        -webkit-transform: rotate3d(0, 0, 1, 270deg);
        transform: rotate3d(0, 0, 1, 270deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

/*  */
.reveal {
    transform: translateY(150px);
    opacity: 0;
    transition: 1s;
}
.reveal.active {
    transform: translateY(0);
    opacity: 1;
}