@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    margin : 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --white : #fff;
    --black : #000;
    --yellow : #CC8809;
    --primary-color : #0D1820;
}
:focus , :active :focus-visible{
    box-shadow: unset !important;
}
html{
    scroll-behavior: smooth ;
}
/* font family  */
.poppins{
    font-family: Poppins, sans-serif;
}
.playfair{font-family: "Playfair Display", serif;}

/* font family  */

/* indexs */
#navigation{
    z-index: 9999999999 !important;
}
.z-index-g{
    z-index: 9999 !important;
}
.z-index-l{
    z-index:1;
}

/* indexs end*/


/* font sizes  */
.fs-18{
    font-size: 18px;
}
.fs-25{
    font-size: 25px;
}
.fs-44{
    font-size: 44px;
}
.fs-50{
    font-size: 50px;
}
.fs-65{
    font-size: 65px;
}
.lh{
    line-height: 1.8;
}
/* end  */

/* widths */
.w-95{
    width: 95%;
}
/* width  */

#navigation .nav-link{
    padding: 13px 20px !important;
}
.btn-primary{
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    border: 0;
    color: var(--primary-color);
    background-color: var(--yellow);
    border-radius: 0px 0px 0px 0px;
    padding: 019px 045px 019px 045px;
}
.btn-primary:hover{
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    border: 0;
    background-color: var(--yellow);
    border-radius: 0px 0px 0px 0px;
    padding: 019px 045px 019px 045px;
}

.text-dark{color: var(--primary-color) !important;}
.text-black{color: var(--black) !important;}
.text-light{
    color: var(--white);
}
#navigation .active{
    color: var(--yellow);
}
.bg-yellow{
    background-color: var(--yellow);
}
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    transition: 0.5s ease-in;
}
#services .listing{
    position: absolute;
    top: 12%;
    left: 2%;

}
#services .nav-link.active{
    background-color: transparent;
    color: var(--black);
    position: relative;
}
#services .nav-link.active::after{
    content: url(../images/Polygon-1.png);
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translate(-50%, 0px);
    transition: 0.5s ease-in-out !important;
}
#services .panes{
   margin-top: 6%;
   width: 75%;
}
#services .btn-arrow{
    background-color: var(--yellow);
    padding: 30px;
    border-radius: 50%;
    margin: 10px;
    font-size: 18px;
    line-height: 0;
}
#services .buttons{
    position: absolute;
    top: 10%;
    right: 10%;
}
#contact{
    background-color: var(--black);
}
#contact .form-control,#contact .input-group-text{
    background-color: transparent;
    border-radius: 0px !important;
    border-top:0px !important; border-left: 0px !important; border-right: 0px !important;
    border-bottom: 2px solid var(--white) !important;
    color: var(--white);
}