body{
    font-family: ClashDisplay-Regular;
    background-color: #F9F9F9;
}
section{
    background-image: url('/assets/img/section-bg.png');
}
.primary-color{
    color: #9A7B40;
}
a{
    text-decoration: none;
}
h1{
    font-family: ClashDisplay-Semibold;
    font-size: 70px;
    /* font-weight: 600; */
}
h2{
    font-family: ClashDisplay-Semibold;
    font-size: 40px;
    font-weight: 700;
}
p{
    font-family: 'Arial Regular';
    font-size: 19px;
    line-height: 23px;
    color: #646464;
}
.nav-item:hover{
    background-color: #ECECEC;
    border-radius: 9px;
}
.nav-item .active{
    background-color: #ECECEC;
    border-radius: 9px;
}
header .contact-icon a{
    display: flex;
    flex-direction: row;
    width: max-content;
}

/* animation css */
.slide-up
{
    animation: slide-up 0.85s cubic-bezier(0.65, 0, 0.35, 1) both
}
.btn-style1 {
    transition: all 0.5s !important;
}
.btn-style1:hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: solid 1px #000000 !important;
    transform: translateY(-0.25em) !important;
    box-shadow: 0 0 0.5em 0em #000000 !important;
    border-color: #000000 !important;
    color: #000000 !important;
}
.btn-style1:hover img{
    filter: invert() !important;
}
.btn-style2 {
    transition: all 0.5s !important;
}
.btn-style2:hover {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: solid 1px #FFFFFF !important;
    transform: translateY(-0.25em) !important;
    box-shadow: 0 0 0.5em 0em #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}
.btn-style2:hover img{
    filter: invert() !important;
}
  
@keyframes slide-up
{
    0%{
        transform: translateY(100px)
    }
    100%{
        transform: translateY(0)
    }
}
/* end animation css */

#home{
    background-image: none;
}
#home .container{
    background-color: #ECECEC;
    border-radius: 40px;
}

#home .hero-img{
    border-radius: 30px;
}
#home h1 span{
    text-shadow: 3px 3px #9A7B4080;
}
h3{
    font-family: Arial;
    font-size: 26px;
    font-weight: 700;
}
@media (min-width: 992px) {
    #home .col-lg-3 {
        flex: 0 0 auto;
        width: 30%;
    }
    #home .col-lg-9 {
        flex: 0 0 auto;
        width: 70%;
    }
    #home .col-lg-8 {
        flex: 0 0 auto;
        width: 60%;
    }
    #home .col-lg-4 {
        flex: 0 0 auto;
        width: 40%;
    }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 46%;
    }
    .col-lg-7 {
        flex: 0 0 auto;
        width: 54%;
    }
}

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-250px * 7))}
}

#client-logo .slider {
	height: 100px;
	margin: auto;
	overflow:hidden;
	position: relative;
	width: auto;
}
#client-logo .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
}
#client-logo .slide {
    height: 100px;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#about .about-img{
    border-radius: 300px;
}
#about .about-content{
    padding: 100px 0px 100px 0px;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#about .mask-img{
    z-index: -1;
}
#about .card{
    background-color: #FFFFFF;
    border-radius: 30px;
    border: solid 1px #141414;
    padding: 35px;
}
#about .card h2{
    font-size: 30px;
    font-family: 'ClashDisplay-Medium';
}
#about .card .card-right-icon{
    height: fit-content;
    background-color: #9A7B401A;
}

#work .home-card{
    background-color: #141414;
    border-radius: 50px;
    padding: 50px;
}

#work .swiper-container {
	-webkit-tap-highlight-color: transparent;
}

#work .swiper-slide {
	height: auto;
}

#work .m-slider {
	overflow: hidden;
	/* margin: 0 auto;
	padding: 30px;
	background-color: #eee;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); */
}

#work .m-slider .m-slider__item {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
}

#work .m-card {
	display: flex;
	flex-direction: column;
	padding: 15px;
	width: 100%;
	border-radius: 20px;
	background-color: #232323;
	box-shadow: 0 0 6px rgba(0, 0, 0, .1);
	transition-duration: .3s;
	transition-property: box-shadow;
}

#work .m-card img{
    border-radius: 20px;
}


#work .m-card &:active {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

#work .cards {
	margin-top: 30px;
}

#work .cards .cards__note {
    margin-top: 30px;
}

#work .cards .cards__body {
    margin-top: 30px;

    @media screen and (min-width: 768px) {
        display: flex;
    }
}

#work .cards .cards__item {
    display: flex;
    flex: 0 1 auto;
    margin-top: 30px;
    width: 100%;

    @media screen and (min-width: 768px) {
        margin-top: 0;
    }
}

#work .cards .cards__item:not(:last-of-type) {
    @media screen and (min-width: 768px) {
        margin-right: 30px;
    }
}
#work .m-card a{
    width: fit-content;
    padding: 5px 10px 5px 10px;
    border-radius: 300px;
    font-size: 20px;
}

#work .m-card h5{
    font-family: "Arial Medium";
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    text-align: left;
    color: #FFFFFF;

}

#work .m-card p{
    font-family: 'Arial Regular';
    font-size: 16px;
    font-weight: 400;
    line-height: 18.4px;
    text-align: left;
    color: #E1E1E1;
}
#work .slider-button-wrap i{
    border: solid 1px #ffffff;
    border-radius: 100%;
    padding: 20px;
    font-size: 25px;
    color: #ffffff;
}
#work .slider-button-wrap i:hover{
    background-color: #ffffff;
    color: #000000;
}

#client .m-slider__item{
    background-color: #FFFFFF;
    border: solid 1px #141414;
    border-radius: 20px;
}

#client .fa-star{
    color: #FFC107;
    font-size: 15px;
}

#client .m-slider {
	overflow: hidden;
	/* margin: 0 auto;
	padding: 30px;
	background-color: #eee;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); */
}
#client .slider-button-wrap i{
    border: solid 1px #141414;
    border-radius: 100%;
    padding: 20px;
    font-size: 25px;
}
#client .slider-button-wrap i:hover{
    background-color: #000000;
    color: #ffffff;
}
#client .swiper-pagination{
    position: static;
}

#client .swiper-pagination-bullet{
    padding: 7px;
    /* background-color: #D9D9D9; */
}

#client .swiper-pagination-bullet-active{
    background-color: #141414;
}


#services .m-slider__item{
    background-color: #FFFFFF;
    border: solid 1px #141414;
    border-radius: 20px;
}

#services .fa-star{
    color: #FFC107;
    font-size: 15px;
}

#services .m-slider {
	overflow: hidden;
	/* margin: 0 auto;
	padding: 30px;
	background-color: #eee;
	box-shadow: inset 0 0 6px rgba(0, 0, 0, .1); */
}
#services .slider-button-wrap i{
    border: solid 1px #141414;
    border-radius: 100%;
    padding: 20px;
    font-size: 25px;
}
#services .slider-button-wrap i:hover{
    background-color: #000000;
    color: #ffffff;
}

#contact .container{
    background-color: #141414;
    border-radius: 60px;
    color: #ffffff;
}
#contact h1{
    border-bottom: solid 1px #FFFFFF33;
}
#contact h4{
    font-family: 'ClashDisplay-Regular';
    font-size: 40px;
}
#contact p{
    font-size: 16px;
    color: #FFFFFF;
}
#contact i{
    background-color: #262626;
    color: #9A7B40;
    font-size: 25px;
    padding: 17px 19px 17px 19px;
    border-radius: 100%;
}
#contact h5{
    font-family: 'ClashDisplay-Regular';
    font-size: 24px;
}
#contact form input{
    background-color: transparent;
    border-radius: 10px;
    border: solid 1px #FFFFFF;
    padding: 15px;
    color: #ffffff;
}
input:focus-visible {
   outline: none;
}
#contact form textarea{
    background-color: transparent;
    border-radius: 10px;
    border: solid 1px #FFFFFF;
    padding: 15px;
    color: #ffffff;
}
textarea:focus-visible {
   outline: none;
}
#contact button{
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 300px;
    box-shadow: none;
    font-size: 20px;
}


@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-1268px * 1))}
}

.animated-text .slider {
	height: 100px;
	margin: auto;
	overflow:hidden;
	position: relative;
	width: auto;
}
.animated-text .slide-track {
    animation: scroll 10s linear infinite;
    display: flex;
    width: fit-content;
}
.animated-text .slide {
    height: 100px;
    /* width: 250px; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.animated-text h1{
    text-wrap: nowrap;
    opacity: 10%;
}


footer{
    background-color: #F0EEEE;
    border-radius: 60px 60px 0px 0px;
    margin-top: 3%;
}
footer .subscribe{
    margin-top: -3%;
    background-color: #141414;
    border-radius: 300px;
    padding: 20px 30px 20px 30px;
}
footer .subscribe form{
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
footer input{
    background-color: transparent;
    border: none;
    color: white;
    font-size: 20px;
}
footer form button{
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 300px;
    box-shadow: none;
    font-size: 20px;
}
footer .social-icon i{
    font-size: 22px;
    color: #000000;
}
footer p{
    font-size: 14px;
}
footer .footer-nav {
    margin: 20px 0;
    justify-content: center;
    /* margin-right: 180px; */
    display: flex;
    align-items: center;
}
footer .footer-nav a {
    color: #555;
    text-decoration: none;
    margin: 0 10px;
    font-size: 0.95em;
}
footer .footer-2{
    border-top: solid 1.5px #000000;
    padding-top: 16px;
}

@media (max-width: 768px) {
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 30px;
    }
    h3{
        font-size: 18px;
    }
    p{
        font-size: 14px;
    }
    .hero-arrow{
        display: none;
    }
    .hero-1{
        display: none;
    }
    .hero-2{
        display: none;
    }
    #about .about-content {
        padding: 50px 0px 50px 0px;
    }
    #work .home-card{
        border-radius: 30px;
    }
    #work .home-card {
        padding: 30px;
    }
    #work .all-btn{
        padding: 1rem !important;
    }
    #work .m-card a {
        font-size: 1rem;
    }
    #work .m-card h5 {
        font-size: 1rem;
    }
    #work .m-card p {
        font-size: 14px;
    }
    #client .slider-button-wrap i {
        padding: 10px;
        font-size: 15px;
    }
    #client .slider-button-wrap {
        padding-bottom: 10px;
    }
    .py-5{
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    #services .slider-button-wrap i {
        padding: 10px;
        font-size: 15px;
    }
    #services .slider-button-wrap {
        padding-bottom: 10px;
    }
    #contact .container{
        border-radius: 30px;
    }
    #contact h4 {
        font-size: 30px;
    }
    #contact p {
        font-size: 14px;
    }

    footer .subscribe form {
        display: grid;
    }
    footer .subscribe form input{
        width: 100% !important;
        margin-bottom: 10px;
    } 
    footer .subscribe form button {
        width: 100% !important;
    }
    footer .subscribe{
        border-radius: 30px;
    }
    footer .footer-2 p{
        font-size: 10px;
    }
    footer .footer-2 .col-lg-6{
        display: flex !important;
        justify-content: center !important;
    }
    .footer-nav {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr);
    }
    .footer-nav span{
        display: none;
    }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}