@import url('https://fonts.googleapis.com/css2?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 {
    --primary-color: #930a4f;
    --secondary-color: #c90000;
    --black-color: #000000;
    --white-color: #FFFFFF;
    --primary-font: "Poppins", sans-serif;
}

/* General Style */

.heading-box h5 {
    color: var(--primary-color);
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--primary-font);
    font-size: 16px;
    margin: 0;

}

.heading-box h2 {
    font-family: var(--primary-font);
    color: var(--black-color);
    font-weight: 500;
    font-size: 42px;

}


.heading-box-white h5 {
    color: var(--white-color);
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--primary-font);
    font-size: 16px;
    margin: 0;

}

.heading-box-white h2 {
    font-family: var(--primary-font);
    color: var(--white-color);
    font-weight: 500;
    font-size: 42px;

}

/* Header */

header {
    padding: 15px 0;
}

header .navbar .nav-link {
    color: var(--black-color);
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 400;
}

header .navbar .navbar-brand img {
    max-width: 160px;

}

header .consultation-btn {
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 16px;
    text-decoration: none;
    margin: 0 0 0 20px;
    padding: 8px 18px;
    border-radius: 10px;
}

header .tel-icon {
    margin: 0 15px 0 0;
    max-width: 30px;
}

header .mail-icon {
    max-width: 30px;
}

header .navbar-toggler {
    border: none;
    outline: none;
}

header .navbar-toggler img {
    max-width: 40px;
}

.primary-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-color);
    padding: 5px 5px 5px 22px;
    border-radius: 40px;
    width: fit-content;
    border: none;
}

.primary-btn-wrap p {
    margin: 0;
    color: var(--white-color);
    font-family: var(--primary-font);
    font-size: 20px;
}

.primary-btn-wrap .svg-wrap {
    background-color: var(--white-color);
    padding: 10px;
    margin: 0 0 0 10px;
    border-radius: 30px;
}

/* Banner */

.banner {
    height: 100vh;
    background-image: url(../images/banner.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    /* position: relative; */
    /* 
    display: flex;
    align-items: center; */

}

/* .banner::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;

} */

.banner .content-box {
    padding: 100px 0 0 0;
}

.banner .content-box .left h1 {
    font-family: var(--primary-font);
    font-weight: 500;
    color: var(--white-color);
    font-size: 60px;
}

.banner .content-box .left p {
    font-family: var(--primary-font);
    font-weight: 400;
    color: var(--white-color);
    font-size: 16px;
}

.banner .content-box .left a {
    background-color: var(--white-color);
    text-decoration: none;
    color: var(--black-color);
    margin: 0;
    padding: 8px 18px;
    border-radius: 10px;
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 16px;
}

.banner .form-box {
    background-color: #BDBDBD;
    border-radius: 30px;
    padding: 30px;
    width: 100%;
    margin-left: auto;
}

.banner .form-box h4 {
    text-align: center;
    color: #4E002E;
    font-size: 30px;
    font-family: var(--primary-font);
    font-weight: 500;
}

.banner .form-box input,
.banner .form-box select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: none;
}

.banner .form-box select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: none;

    font-size: 16px;
    font-family: var(--primary-font);
    color: var(--black-color);
    font-weight: 500;
}

.banner .form-box form {
    margin: 30px 0 0 0;
}

.banner .form-box input::placeholder {
    font-size: 16px;
    font-family: var(--primary-font);
    color: var(--black-color);
    font-weight: 500;
}

.banner .form-box select option {
    font-size: 16px;
    font-family: var(--primary-font);
    color: var(--black-color);
    font-weight: 500;
}

.button-box {
    display: flex;
    justify-content: end;
}

.banner .counter-box {
    margin: 100px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 75%;
}


.banner .counter-box p {
    font-family: var(--primary-font);
    color: var(--white-color);
    font-weight: 400;
    font-size: 20px;
    margin: 0 0 10px 0;
    line-height: 0;
}

.banner .counter-box h3 {
    font-family: var(--primary-font);
    color: var(--white-color);
    font-weight: 500;
    font-size: 50px;
    margin: 0;
}

/* About */

.about {
    margin: 100px 0 0 0;
    overflow: hidden;
}

.about .left {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about p {
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 400;
}

.about .right {
    position: relative;
}

.about .right .about1 {
    animation: rightLeft 3s linear infinite;
}

.about .right .about2 {
    position: absolute;
    left: 0;
    top: 0;

}

.about .right .about3 {
    position: absolute;
    left: 0;
    top: 0;
    animation: upDown 3s linear infinite;

}

.service {
    margin: 50px 0 0 0;
    background-color: var(--primary-color);
    padding: 100px 0;
    overflow: hidden;
}

.service .heading-wrap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.service .heading-wrap .navigation-btn {
    display: flex;
    align-items: center;
}


.service .heading-wrap .navigation-btn button {
    border: 1px solid var(--white-color);
    padding: 10px 14px;
    border-radius: 50%;
    background-color: var(--primary-color);
    margin: 0 0 0 10px;
}

.service .heading-wrap .navigation-btn button:hover {
    background-color: var(--white-color);
}

.service .heading-wrap .navigation-btn button i {
    color: var(--white-color);
    font-size: 20px;
}

.service .heading-wrap .navigation-btn button:hover i {
    color: var(--primary-color);
}


.service .content-box {
    margin: 50px 0 0 0;
}

.service .content-box .swiper-slide {
    height: auto;
}

.service .card {
    border-radius: 20px;
    padding: 20px;
    height: 100%;
}

.service .card-body {
    padding: 15px 0 0 0;

}

.service .card .img-box {
    overflow: hidden;
    border-radius: 20px;
    height: 260px;
}

.service .card .img-box img {
    transition: all 0.3s ease-in-out;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.service .card:hover .img-box img {
    transform: scale(1.2);
    transition: all 0.3s ease-in-out;
}



.service .card-body .card-title {
    color: var(--black-color);
    font-size: 32px;
    font-family: var(--primary-font);
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

.service .card:hover .card-title {
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.service .card-body .card-text {
    color: var(--black-color);
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 400;
    padding: 8px 0 0 0;
    transition: all 0.3s ease-in-out;
}

.service .card:hover .card-text {
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}


/* Projects */

.projects {
    padding: 100px 0 0 0;
    overflow: hidden;
    position: relative;
}

.projects .circle-logo {
    position: absolute;
    left: -8%;
    top: 2%;

}

.circle-logo {
    animation: rotateAnimation 9s infinite ease-in-out !important;
}

.projects .heading-box {
    text-align: center;
    margin: 0 0 50px 0;
}


.projects .tab-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects .tab-box .nav-item {
    margin: 0 15px 0 0;
}

.projects .tab-box .nav-link.active {
    background-color: var(--primary-color);
    font-family: var(--primary-font);
    font-size: 18px;
    border-radius: 10px;
    color: var(--white-color);
}

.projects .tab-box .nav-link {
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    color: var(--primary-color);
}

.projects .tab-content .card {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
}

.projects .tab-content .card {
    position: relative;
    overflow: hidden;
    height: 100%;
    object-fit: cover;
}

.projects .tab-content .card:hover::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.49352240896358546) 0%, rgba(0, 0, 0, 0.5663515406162465) 33%, rgba(0, 0, 0, 1) 73%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 1) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: 2;
}

.projects .tab-content .card .description-box {
    position: absolute;
    bottom: -100%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, 0);
    width: 100%;
    text-align: start;
    padding: 0 30px 0 30px;
}

.projects .tab-content .card .description-box h1 {
    font-size: 30px;
    color: var(--white-color);
    font-family: var(--primary-font);
    font-weight: 600;
    display: inline;
    text-align: start;
}


.projects .tab-content .card .description-box p {
    color: var(--white-color);
    font-weight: 400;
    font-size: 18px;
}

.projects .tab-content .card:hover .description-box {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    
}

.projects .tab-content .card img {
    transition: all 0.3s ease-in-out;
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;

}

.projects .tab-content .card:hover img {
    transform: skew(7deg) scale(1.2);
    transition: all 0.3s ease-in-out;

}

.projects .tab-content .card-box {
    display: flex;
    gap: 10px;
}

.projects .tab-content .card-box .card-wrap {
    /* border: 1px solid var(--primary-color); */
    padding: 10px;
    border-radius: 20px;
    height: 48vh;
    flex: 1;
}

.fancybox-caption__body {

    font-size: 30px !important;
}

#pills-profile .card-box .card-wrap{
    flex: initial;
}

.projects .tab-content .card-box .card-border .card {
    border-radius: 20px;
}

/* testimonial */

.testimonial {
    padding: 100px 0 0 0;
    position: relative;
    overflow: hidden;
}

.testimonial .circle-logo {
    position: absolute;
    right: -7%;
    top: 0;
}

.testimonial .heading-wrap {
    text-align: center;
}

.testimonial .heading-wrap h2 {
    font-family: var(--primary-font);
    color: var(--black-color);
    font-size: 42px;
    margin: 0;
}

.testimonial .heading-wrap p {
    color: var(--black-color);
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 400;
    padding: 8px 0 0 0;
    width: 57%;
    margin: auto;
}


.testimonial .content-box {
    margin: 50px 0 0 0;
}




.testimonial-section {
    background-color: var(--black-col);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 100px 0 0 0;
}


.testimonial-section .swiper-wrapper {
    display: flex;
    align-items: center;
    /* padding: 0 0 78px 0; */
}




.testimonial-section .swiper {
    width: 100%;
    height: 100%;
}

.testimonial-section .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;

}

.testimonial-section .swiper-slide .img-box {
    height: 100%;
    width: 100%;
    position: relative;
}

.testimonial-section .swiper-slide .img-box .play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* animation: zooming 3s linear infinite; */
    cursor: pointer;
}


.testimonial-section .swiper-slide .img-box .play-btn i {
    font-size: 80px;
    color: var(--white-color);
}


.testimonial-section .swiper-slide .img-box img {
    width: 100%;
    border-radius: 25px;
    transition: all 200ms linear;
    object-fit: cover;
    transform: scale(0.8);
}



.testimonial-section .swiper-slide-active .img-box img {
    /* height: 55vh; */
    border-radius: 25px;
    transform: scale(0.9);

}



/* awards */

.awards {
    margin: 100px 0 0 0;
    background-color: var(--primary-color);
    padding: 100px 0;
    overflow: hidden;
}

.awards .heading-box-white {
    text-align: center;
}

.awards .award-box {
    border: 1px solid var(--white-color);
    border-radius: 20px;
    padding: 50px 0;
}

.awards .award-box .prev-btn{
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translate(-50%,0);
    background: transparent;
    border: none;
}

.awards .award-box .next-btn{
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translate(-50%,0);
    background: transparent;
    border: none;
}

.awards .award-box i{
    color: #fff;
    font-size: 40px;
}



.awards .award-box .content-box {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 50px 0 0 0;
    flex-wrap: wrap;
    padding: 50px 100px 0 100px;
    position: relative;
}

.awards .award-box .content-box img {
    transition: all 0.3s ease-in-out;
    max-width: 200px;
    height: 200px;
    object-fit: contain;
}


.awards .card{
    background-color: transparent;
    height: 100%;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.awards .card p{
    color: var(--white-color);
    font-family: var(--primary-font);
    margin: 15px 0;
}


/* clients */

.clients {
    margin: 100px 0 0 0;
    overflow: hidden;
}

.clients .heading-box {
    text-align: center;
    padding: 0 0 50px 0;
}

.clients .content-box {
    padding: 0px 100px 0 100px;
    position: relative;
}

.clients .content-box .card {
    border: 0;
}

.clients .content-box .card img {
    max-width: 60%;
    margin: auto;
}

.clients .content-box .navigation-btn .prev-btn {
    position: absolute;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    padding: 10px 14px;

    border-radius: 50%;
    border: 1px solid var(--primary-color);
    background-color: var(--white-color);
}

.clients .content-box .navigation-btn .prev-btn:hover,
.clients .content-box .navigation-btn .next-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.clients .content-box .navigation-btn .prev-btn:hover i,
.clients .content-box .navigation-btn .next-btn:hover i {
    color: var(--white-color);
}


.clients .content-box .navigation-btn .next-btn {
    position: absolute;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    padding: 10px 14px;

    border-radius: 50%;
    border: 1px solid var(--primary-color);
    background-color: var(--white-color);
}

.clients .content-box .navigation-btn i {
    color: var(--primary-color);
    font-size: 20px;
}


/* contact-us */

.contact-us {
    margin: 100px 0 0 0;
    overflow: hidden;
}

.contact-us .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.contact-us .box {
    background-color: #D9D9D9;
    border-radius: 30px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    height: 100%;
}

.contact-us .box .phone-box {
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 0;
    text-decoration: none;
}

.contact-us .box .phone-box p {
    margin: 0 0 0 20px;
    font-size: 18px;
    color: var(--black-color);
    font-weight: 500;
    font-family: var(--primary-font);
}

.contact-us .heading-box p {
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 300;
}

.contact-us .right {
    background-color: #D9D9D9;
    height: 100%;
    border-radius: 30px;
    padding: 50px;
}

.contact-us .right h3 {
    font-size: 40px;
    font-family: var(--primary-font);
    color: var(--primary-color);
}

.contact-us .right form {
    margin: 50px 0 0 0;
}

.contact-us .right form input {
    width: 100%;
    background-color: var(--white-color);
    border: none;
    border-radius: 10px;
    padding: 15px;
    margin: 0 0 20px 0;
}

.contact-us .right form input::placeholder {
    font-family: var(--primary-font);
    font-size: 16px;
    color: var(--black-color);
}

.contact-us .right form select {
    width: 100%;
    background-color: var(--white-color);
    border: none;
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 20px 0;

    font-family: var(--primary-font);
    font-size: 16px;
    color: var(--black-color);
}


.contact-us .right form .button-box {
    margin: 100px 0 0 0;
}

footer {
    margin: 100px 0 0 0;
    background-color: #2B0115;
    padding: 100px 0 0 0;
    overflow: hidden;
}

footer .box img {
    margin: 0 0 20px 0;
    max-width: 135px;
}

footer .box p {
    color: var(--white-color);
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 300;
    width: 60%;
    margin: 0;
}

footer .box h6 {
    color: var(--white-color);
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 22px;
    margin: 0 0 20px 0;
}

footer .box ul {
    padding: 0;
    list-style: none;
}

footer .box ul li {
    padding: 0;
    margin: 0 0 16px 0;
}

footer .box ul li a {
    text-decoration: none;
    color: var(--white-color);
    font-family: var(--primary-font);
    font-weight: 400;
}

footer .copy-right {
    border-top: 1px solid var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    margin: 40px 0 0 0;
}

footer .copy-right p {
    color: var(--white-color);
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 300;
    margin: 0;
}


.banner-mob {
    display: none;
}

.consultation-mob {
    display: none;
}

@keyframes zooming {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes downUp {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes upDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(15px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes diagonalMove {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, -20px);
    }

    100% {
        transform: translate(0, 0);
    }
}




@keyframes rightLeft {
    0% {
        transform: translatex(0);
    }

    50% {
        transform: translatex(15px);
    }

    100% {
        transform: translatex(0);
    }
}

@keyframes Leftright {
    0% {
        transform: translatex(0);
    }

    50% {
        transform: translatex(-15px);
    }

    100% {
        transform: translatex(0);
    }
}


/* preloader */

/* HTML: <div class="loader"></div> */

.loader-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1111;
    background-color: var(--white-color);
}

.loader {
    width: 48px;
    height: 48px;
    position: relative;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48em;
    height: 48em;
    background-image:
        radial-gradient(circle 10px, var(--primary-color) 100%, transparent 0),
        radial-gradient(circle 10px, var(--primary-color) 100%, transparent 0),
        radial-gradient(circle 10px, var(--primary-color) 100%, transparent 0),
        radial-gradient(circle 10px, var(--primary-color) 100%, transparent 0),
        radial-gradient(circle 10px, var(--primary-color) 100%, transparent 0),
        radial-gradient(circle 10px, var(--primary-color) 100%, transparent 0),
        radial-gradient(circle 10px, var(--primary-color) 100%, transparent 0),
        radial-gradient(circle 10px, var(--primary-color) 100%, transparent 0);
    background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em,
        13em -13em, -13em -13em, 13em 13em, -13em 13em;
    background-repeat: no-repeat;
    font-size: 0.5px;
    border-radius: 50%;
    animation: blast 1s ease-in infinite;
}

.loader::after {
    font-size: 1px;
    background: var(--primary-color);
    animation: bounce 1s ease-in infinite;
}

@keyframes bounce {

    0%,
    100% {
        font-size: 0.75px
    }

    50% {
        font-size: 1.5px
    }
}

@keyframes blast {

    0%,
    40% {
        font-size: 0.5px;
    }

    70% {
        opacity: 1;
        font-size: 4px;
    }

    100% {
        font-size: 6px;
        opacity: 0;
    }
}


.hide {
    display: none;
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hidden{
    visibility: hidden;
}

.thankyou{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.thankyou h1{
    text-transform: uppercase;
    color: var(--primary-color);
    font-size: 60px;
}

.thankyou p{
    font-size: 20px;
}