@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
.about-banner{position:relative;}
.about-banner:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0a1e4245;z-index:0;}


.about-section{background-color:#dddddd;}

    .about-banner { padding: 17% 0 12% 0; background-image: url(image/about-banner.jpg); background-size: cover;}
    .about-banner h2 { color: #fff; font-size: 52px; font-weight: 500; margin: 0 0 20px 0;}
    .about-banner p, .about-banner p a { color: #dadada; margin: 0; font-size: 18px;}
    
    .about-page { padding: 6% 0;}
    .about-page p:first-child { font-size: 20px; font-weight: 500; margin: 0 0 5px 0;}
    .about-page p { font-size: 17px; margin: 0;}

.about-banner {padding: 17% 0 12% 0;background-image: url(image/about-banner.jpg);background-size: cover;height: 418px;}
.about-banner h2 {color: #fff;font-size: 52px;font-weight: 500;margin: 0 0 20px 0;text-align:left!important;z-index: 2;position: relative;}
.about-banner p, .about-banner p a {color: #dadada;margin: 0 0 30px 0;font-size: 18px;position: relative;z-index: 2;}
 
body { margin: 0; padding: 0; font-family: "Open Sans", sans-serif; overflow-x: hidden;}
a { text-decoration: none; font-family: "Open Sans", sans-serif;}
p {font-family: "Open Sans", sans-serif;font-size: 16px;letter-spacing: .5px;line-height: 1.6;margin: 0 0 18px 0;}
.main-table ul li { font-family: "Open Sans", sans-serif; font-size: 16px; letter-spacing: .5px; line-height: 1.4; margin: 0 0 10px 0;}
h1, h2, h3, h4 { font-family: "Playfair Display", serif;}
h5, h6 { font-family: "Open Sans", sans-serif;}

#gallery .carousel-control-prev {
    left: -50px;
    background-color:red;
    height:40px;
    width:40px;
    border-radius:50%;
    align-self:center;
}
#gallery .carousel-control-prev .carousel-control-prev-icon, #gallery .carousel-control-next .carousel-control-next-icon{width:20px;height:20px;}
#gallery .carousel-control-next {
    right: -50px;
    background-color:#c02731;
    height:40px;
    width:40px;
    border-radius:50%;
    align-self:center;
}
img.gal {
    margin-bottom: 35px;
    animation: slideInLeft 1000ms;
}
img.gal {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    transform: scale(1);
    -webkit-transform: scale(1);
}

img.gal:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.button-top {
    background: #fff;
    border-radius: 13px;
    padding: 8px 12px;
    margin-left: 23px;
    font-size: 15px;
    display: flex;
    color: #000;
}
.heading { color: #242424; font-size: 38px; font-weight: 700; letter-spacing: .7px; position: relative; text-align: center; margin: 0 0 50px 0;}
.heading::after { content: ''; position: absolute; width: 100px; height: 2px; background: #c02731; bottom: -10px; left: 0; right: 0; margin: 0 auto;}
.sub-heading {color: #242424;font-size: 34px;font-weight: 700;margin: 0 0 20px 0;text-align: left;animation: zoomInLeft 1000ms;}
.sub-heading1 {color: #6d7174;font-size: 27px;font-weight: 600;margin: 20px 0 10px 0;}
.title { color: #575757; font-size: 21px; margin: 0 0 30px 0;}
.text-color { color: #c02731;}

header { position: absolute; z-index: 2; width: 100%; padding: 15px 5%;} 
header p, header p a { color: #f0f0f0; font-size: 17px;}
header i { font-size: 24px; margin: 4px 5px 0 0;}

.banner-section { position: relative;}
.banner-section video{ width: 100%; height: 100vh; object-fit: cover;}
.banner-section::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(rgba(7, 7, 7, 0.7), rgba(255, 255, 255, 0.0));top: 0;left: 0;}
.banner-section .banner-content { position: absolute; top: 52%; z-index: 1; width: 70%; left: 15%; text-align: center;}
.banner-section .banner-content h1 { color: #fff; font-size: 34px; font-weight: 700; background: rgba(0, 0, 0, 0.7); display: inline-block; padding: 16px 20px 20px 20px; letter-spacing: .8px;}

.banner-bottom {padding: 4% 0;}
.banner-bottom h2 { font-size: 42px; font-weight: 700; color: #121212; letter-spacing: .5px; margin: 0 0 15px 0;}
.banner-bottom h2 span { color: #c02731;}
.banner-bottom p {font-size: 21px;text-align: center !important;}

.about-section { padding: 0 0 6% 0;}
.about-section .icon { background: #c02731; display: inline-block; width: 75px; height: 75px; padding: 14px; border-radius: 50%; border: 7px solid #e4e4e4;}

.service-section { background: #e4e4e4; padding: 5% 0 7% 0;}
.service-section .ser-card { background: #fff; padding: 35px; min-height: 278px;}
.service-section .ser-card img { width: 80px; margin: 0 0 18px 0;}
.service-section .ser-card h4 { color: #c02731; font-size: 22px; font-weight: 700; font-family: "Open Sans", sans-serif; margin: 0 0 18px 0;}
.service-section .ser-card a { color: #121212; background: #e4e4e4; display: inline-block; padding: 8px 24px; font-size: 15px; font-weight: 500;}

.section-4 { padding: 6% 0;}
.section-4 p {font-size: 20px;}

.section-5 { padding: 6% 0; background: #e4e4e4;}
.section-5 .title { font-size: 19px; margin: 30px 0 0 0;}
.section-5 .why-choose {padding: 18px;border: 1px solid #888888;margin: 10px 0 0 0;min-height: 190px;}
.section-5 .why-choose img {width: 82px;}
.section-5 .why-choose h4 {color: #c02731;font-size: 22px;letter-spacing: .5px; font-weight: 800;}
.section-5 .why-choose p {margin: 0;font-size: 15px;}

.Request-a-call { padding: 6% 0; background: #c02731;}
.Request-a-call .heading { color: #fff;}
.Request-a-call .heading::after { background: #ddd;}
.Request-a-call .form-control { padding: 10px 15px; margin: 0 0 10px 0;}
.Request-a-call input[type='button'] { background: #121212; color: #fff; border: 0; padding: 12px 62px; border-radius: 30px; text-transform: uppercase; letter-spacing: .6px; font-size: 15px; margin: 10px 0 0 0;}
.Request-a-call input[type='button']:hover { background: #000;}

footer { background: #121212; padding: 5% 0 0 0;}
footer p, footer p a { color: #afafaf; font-size: 14px; margin: 0 0 8px 0;}
footer p a:hover { color: #fff;}
footer p i { margin: 5px 5px 0 0;}
footer p {display: flex;animation: zoomInDown 1000ms;}
footer h4 { color: #ececec; font-size: 22px; margin: 0 0 20px 0; letter-spacing: .5px; border-bottom: 1px solid #ececec; padding: 0 0 8px 0;}
footer .social-icon a { display: inline-block; width: 35px; height: 35px; background: #c02731; color: #fff; border-radius: 50%; text-align: center; font-size: 14px; line-height: 2.4;}
footer .footer-bottom { background: #000; margin: 4% 0 0 0; padding: 15px 0;}
footer .footer-bottom p { margin: 0; display: block !important;}

.inner-banner { background-image: url(image/inner-banner.jpg); background-size: cover; padding: 20% 0 6% 0;}
.inner-banner h1 {color: #fff; text-align: center; font-size: 50px; font-weight: 700; letter-spacing: .7px; position: relative;}
.inner-banner h1::after { content: ''; position: absolute; width: 80px; height: 3px; background: #c02731; bottom: -6px; left: 0; right: 0; margin: 0 auto;}
.main-table { padding: 5% 0;}

.contact-information {padding: 20px 0;animation: zoomInLeft 1000ms;}
.contact-information i { color: #c02731; font-size: 36px;}
.contact-information h5 {font-family: "Open Sans", sans-serif;color: #161616;text-transform: uppercase;font-size: 16px;font-weight: 700;margin: 0 0 5px 0;text-align: left;}
.contact-information p, .contact-information p a {margin: 0; color: #242424; font-size: 18px; line-height: 1.4;}
.contact-form .form-control {margin: 0 0 14px 0;padding: 14px;border-color: #c9c9c9;animation: fadeInUp 1000ms;}
.contact-form input[type="button"] { background: #c02731; border: 0; color: #fff;}

.service-page .ser-card1 {background: #fff;box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 25px;margin: 0 0 24px 0;padding: 30px;text-align: left;animation: fadeInUp 1000ms;}
.service-page .ser-card1 h5 {font-size: 20px;font-weight: 600;text-align: left; line-height: 1.3;margin: 0 0 15px 0;}
.service-page .ser-card1 p {margin: 0 0 10px 0; font-style: 15px;}
.service-page .ser-card1 a { display: inline-block; background: #c02731; color: #fff; padding: 6px 16px; font-size: 14px;}
.service-page .nav {background: #242424;padding: 25px;animation: rollIn 1000ms;}
.service-page .nav .nav-item {margin: 0;}
.service-page .nav .nav-link { background: #c02731; color: #fff; padding: 18px 15px; margin: 0 10px; font-size: 17px; border-radius: 10px 10px 0 0;}   
.service-page .nav .nav-link.active { background: #1a1a1a;}
.service-page .tab-pane ul{ list-style-image: url(image/right.png);}

@media ( min-width: 320px) and ( max-width: 768px) { 
    p { font-size: 15px; letter-spacing: .3px; line-height: 1.5; margin: 0 0 12px 0;}
    .main-table ul li { font-size: 15px; letter-spacing: .3px; line-height: 1.3;}

    .heading {font-size: 27px;letter-spacing: .5px;margin: 0 0 30px 0 !important;}
    .sub-heading { font-size: 24px;}
    .sub-heading1 { font-size: 20px;}
    .title { font-size: 18px; margin: 0 0 20px 0;}

    header { width: 100%; padding: 15px 5%;} 
    header img { width: 90px;}

    .banner-section video{ width: 100%; height: 320px;}
    .banner-section .banner-content { top: 52%; width: 80%; left: 10%;}
    .banner-section .banner-content h1 { font-size: 21px; font-weight: 600;}

    .banner-bottom h2 { font-size: 21px; font-weight: 700;}
    .banner-bottom p { font-size: 17px;}

    .about-section { padding: 0 0 6% 0;}
    .about-section .about-img img { margin: 0 0 30px 0;}
    .about-section .icon { width: 52px; height: 52px; padding: 8px; border: 3px solid #e4e4e4;}

    .service-section .ser-card { padding: 25px; min-height: 200px; margin: 0 0 15px 0;}
    .service-section .ser-card img { width: 60px; margin: 0 0 10px 0;}
    .service-section .ser-card h4 { font-size: 18px; margin: 0 0 10px 0;}
    .service-section .ser-card a { font-size: 14px;}

    .section-4 { padding: 6% 0;}
    .section-4 p {font-size: 20px;}

    .section-5 { padding: 6% 0;}
    .section-5 .title { font-size: 15px; }
    .section-5 .why-choose { padding: 15px; border: 1px solid #888888; margin: 10px 0 0 0; min-height: 100px;}
    .section-5 .why-choose img { width: 60px;}
    .section-5 .why-choose h4 { font-size: 19px;}   

    .Request-a-call .form-control { padding: 8px 12px;}
    .Request-a-call input[type='button'] { padding: 10px 32px; font-size: 14px; margin: 0;}

    footer p, footer p a { margin: 0 0 5px 0;}
    footer h4 { font-size: 19px; margin: 25px 0 12px 0;}

    .inner-banner { background-size: cover; padding: 28% 0 6% 0;}
    .inner-banner h1 { font-size: 32px;}
    .main-table { padding: 5% 4% !important;}

    .service-page .nav { padding: 10px;}
    .service-page .nav .nav-item {margin: 0;}
    .service-page .nav .nav-link { padding: 8px; margin: 5px; font-size: 13px; border-radius: 10px 10px 0 0;}   
    .service-page .nav .nav-link.active { background: #1a1a1a;}
    .service-page .tab-pane ul{ list-style-image: url(image/right.png);}
}

.whatsapp_btn2{ position: fixed; bottom: 2em; right: 25px; width: 55px; height: 55px; z-index: 9999;}
.whatsapp_btn2 .icon_logo{ position: relative; z-index: 100; padding: 5px;}
.whatsapp_btn2 .icon_logo > a > img{ width: 100%;}
.whatsapp_btn2 .circle_waves{ border-radius: 50%; background-color: #3cc04e; width: 55px; height: 55px; position: absolute; opacity: 0; bottom: 1px; left: 0px; z-index: 99; animation: waves 4s infinite cubic-bezier(.36, .11, .89, .32);}

@keyframes waves {
    from {
        transform: scale(.55, .55);
        opacity: .6;
    }
    to {
        transform: scale(1.8, 1.8);
        opacity: 0;
    }
}

.card-1 {box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;height: 100%;padding: 20px;background: linear-gradient(to right, rgb(192 39 49), rgb(42 41 41));color: #fff;}
.card-bg {padding: 0 70px  70px;box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;}
.card-bg .sub-heading1{text-align:center !important;}
.card-1  .crd-hd {text-align:center !important;color: #fff;font-weight:600;}
.card-1 p{text-align:center !important;}