@font-face {
    font-family: poppins-light;
    src: url(font/Poppins-Light.ttf);
}

@font-face {
    font-family: poppins-Medium;
    src: url(font/Poppins-Medium.ttf);
}

@font-face {
    font-family: poppins-regular;
    src: url(font/Poppins-Regular.ttf);
}

@font-face {
    font-family: poppins-semibold;
    src: url(font/Poppins-SemiBold.ttf);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.padding {
    padding: 20px 60px;
}

h3 {
    font-family: poppins-semibold;
    font-size: 45px !important;
}
h4 {
    font-family: poppins-semibold;
    font-size: 25px !important;
}
p{
    font-family:poppins-light !important ;
    font-size: 16px;
}
html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden !important;
}

#navbar {
    width: 100%;
    height: 90px;
    padding: 0 80px;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
    z-index: 99;
}

#navbar li a {
    text-decoration: none;
    color: #000;
    font-family: poppins-Medium;
}

#navbar .navbar-brand img {
    width: 80px;
}

#navbar .navbar-nav {
    gap: 30px;
}

#menu-icon i {
    color: #000 !important;
}

#navbarSupportedContent {
    background-color: #fff;
}

#Black-Button button {
    color: #ffffff;
    padding: 8px 25px;
    border-radius: 50px;
    background-color: #000000;
    border: none;
    transition: 0.5s;
}

#Black-Button button i {
    color: #ffffff;
}

#Black-Button button:hover {
    scale: 1.1;
}
#White-Button button {
    color: #000000;
    padding: 8px 25px;
    border-radius: 50px;
    background-color: #ffffff;
    border: none;
    transition: 0.5s;
}

#White-Button button i {
    color: #000000;
}

#White-Button button:hover {
    scale: 1.1;
}

/* ---------------------------------------------------BANNER----------------------------------------------- */
#banner {
    padding: 20px 60px;
    position: relative;
}
#banner img{
    width: 100%;
}
#banner h3{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}

.carousel-inner img {
    border-radius: 30px;
}

/* ---------------------------------------------------BANNER-END----------------------------------------------- */

/* --------------------------------------------welcome to INTALLUGLASS START----------------------------------------- */

#sec-two {
    display: flex;
    align-items: center;
}

#sec-two li {
    list-style: none;
    background-color: #000;
    display: inline-block;
    border-radius: 50px;
    color: #fff;
    padding: 2px 15px;
    font-family: poppins-light;
}

#sec-two p {
    font-size: 18px;
    font-family: poppins-light;
    padding-bottom: 20px;
}

/* ---------------------------------------------welcome to INTALLUGLASS END----------------------------------------- */

/* -----------------------------------------section-Three------------------------------------- */
#sec-three {
    background-color: #F2F2F2;
    padding: 40px 0;
}

#sec-three #card {
    border-radius: 25px;
    padding: 30px;
    border: none;
}

#sec-three #card i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

#sec-three #card h4 {
    padding-top: 15px;
    font-family: poppins-semibold;
}

#sec-three #card p {
    font-family: poppins-light;
    font-size: 16px;
}

.red {
    color: #FF4646;
}

.yellow {
    color: #FFDF12;
}

.green {
    color: #04E617;
}

.blue {
    color: #006AFF;
}

.pink {
    color: #FF0088;
}

.orange {
    color: #FFAE58;
}

/* -----------------------------------------section-Three-END------------------------------------- */

/* -----------------------------------------section-Four------------------------------------- */
#sec-four {
    padding: 40px 0;
}

#sec-four .row {
    position: relative;
}

#sec-four #black-box {
    background-color: #000;
    padding: 70px;
    color: #fff;
    border-radius: 100px 0 100px 0;
    position: absolute;
    top: 120px;
    left: -80px;
}

#sec-four #black-box p {
    font-family: poppins-light;
    font-size: 16px;
}

#sec-four #black-box li {
    font-family: poppins-light;
    font-size: 18px;
}

@media (max-width:768px) {
    #sec-four #black-box {
        background-color: #000;
        padding: 40px;
        color: #fff;
        border-radius: 0px 0 0px 0;
        position: static;
        top: 120px;
        left: -80px;
    }
}

/* -----------------------------------------section-Four-END------------------------------------- */

/* -----------------------------------VIDEO-START------------------------------------- */
#videoCarousel i{
    color: #000;
    font-size: 25px;
}
/* -----------------------------------VIDEO-END------------------------------------- */

/* ------------------------------------------------FAQ-START------------------------------------------- */
#faq {
    background-color: #000;
    padding: 40px 0;
    font-family: poppins-semibold;
}

#faq h3 {
    color: #fff;
}
#accordion{
    padding: 0 250px;
}
#accordion .card{
        border-radius: 20px !important;
    }
#accordion {
    .card-header {
        padding: 15px 10px !important;
        background-color: #fff;
        border: none;
        border-radius: 20px !important;
    }

    .card-header button {
        font-size: 18px
    }

    .card-header button:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .accordion-title {
        position: relative;
        display: block;
        padding: 8px 0 8px 50px;
        /* background: #213744; */
        border-radius: 8px;
        overflow: hidden;
        text-decoration: none;
        color: #000000;
        font-size: 16px;
        font-weight: 700;
        width: 100%;
        text-align: left;
        transition: all .4s ease-in-out;

        i {
            position: absolute;
            width: 40px;
            height: 100%;
            left: 0;
            top: 0;
            color: #000000;
            text-align: center;
        }

        &:hover {
            padding-left: 60px;
            color: #000000;
        }
    }

    [aria-expanded="true"] {
        background: #ffffff;
        color: #000;

        i {
            color: #000;
            background: #ffffff;
        }
    }

    .accordion-body {
        padding: 40px 55px;
    }

    .accordion-body p {
        font-family: poppins-light;
        font-size: 16px;
    }
}
/* ------------------------------------------------FAQ-END------------------------------------------- */

#blog {
    padding: 40px 0;
}

#blog #card {
    border-radius: 25px;overflow: hidden;
    border: none;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
}
#blog #card img{
    width: 100%;
    height:150px;
    object-fit: cover;
    background-size: cover;
    background-position: center
}
#blog #card .card-body{
    padding: 20px !important;
}
#sec-three #card i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

#sec-three #card h4 {
    padding-top: 15px;
    font-family: poppins-semibold;
}

#sec-three #card p {
    font-family: poppins-light;
    font-size: 16px;
}

/* -----------------------------------------------CONTACT-START------------------------------------- */
#contact{
    border-radius: 20px;
    padding: 15px 0;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}
#contact form{
    width: 100%;
    padding: 0px 0;
}
#contact form input{
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
    margin-bottom: 20px;
}
#contact form textarea{
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #c6c6c6;
}
#contact form input[type=submit]{
    background-color: #000;
    color: #fff;
    border-radius: 50px;
    padding: 5px 20px;
    margin-top: 15px;
}
/* -----------------------------------------------CONTACT-END--------------------------------------- */

#footer{
    background-color: #000;
    color: #fff;
}
#footer h3{
    font-size: 35px !important;
}
#footer h4{
    font-size: 30px;
    margin-bottom: 20px;
}
#footer p{
    font-family: poppins-light;
    font-size: 16px;
}
#footer i{
    color: red;
    font-size: 20px;
}
#footer ul li{
    font-family: poppins-light;
    font-size: 16px;
    list-style: none;
    margin-bottom: 10px;
}
#footer ul li a{
    color: #fff;
    list-style: none;
}
#bottom-bar{
    padding: 5px 60px;

}

/* --------------------------------------ABOUT-PAGE------------------------------------ */
#black{
    background-color: #000;
    text-align: center;
    color: #fff;
}
#black p{
    font-family: poppins-light;
    font-size: 16px;
}
/* -----------------------------------ABOUT-PAGE-END---------------------------------- */

/* --------------------------------------ABOUT-PAGE------------------------------------ */
#About-black-box #card{
    border: 1px solid #000;
    padding: 20px;
    border-radius: 15px;
    color: #000000;
}
#About-black-box .blackk{
    background-color: #000;
    border: 1px solid #000;
    padding: 20px;
    border-radius: 15px;
    color: #ffffff !important;
}
#About-black-box #card:hover{
    background-color: #000;
    border: 1px solid #000;
    color: #ffffff;
    transition: 0.5s;
}
/* -----------------------------------ABOUT-PAGE-END---------------------------------- */

/* -----------------------------------SERVICE-PAGE-START---------------------------------- */
#black-Table{
    background-color: #000;
    color: #fff;
    padding: 60px 0;
}
#black-Table h4{
    font-size: 25px;
}
#black-Table table{
    text-align: center;
    background-color: #424242;
    width: 100%;
    
}
#black-Table table tr{
    border: 1px solid #7b7b7b;
}
#black-Table table tr th{
    background-color: #323232;
    padding: 10px 10px;
}
#black-Table table tr td{
    padding: 5px 10px;
    font-family: poppins-light;
    font-size: 14px;
}
/* -----------------------------------SERVICE-PAGE-END---------------------------------- */
.icon-para{
    display: flex;
}
.icon-para i{
    font-size: 25px;
    color: red;
    line-height: 20px;
}
.icon-para p{
    font-size: 14px !important;
}















@media(max-width:768px) {
    h3 {
        font-family: poppins-semibold;
        font-size: 30px !important;
    }
    #navbar {
        padding: 0 0px;
    }
    #navbar .navbar-brand {
        padding: 0 20px;
    }
    #navbar #Black-Button {
        padding-left: 20px;
        padding-bottom: 50px;
    }
    #navbar .navbar-nav {
        width: 100% !important;
        padding: 20px;
        
    }
    #banner {
        padding: 20px 0px;
    }
    .padding {
        padding: 20px 10px;
    }
    #accordion{
        padding: 0 20px;
    }
    #faq-head{
        font-size: 14px !important;
    }
}