@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
body { margin: 0; padding: 0; font-family: "Manrope", sans-serif;}
p, li {color: #252525;font-size: 16px; letter-spacing: .6px;line-height: 1.8;margin: 0 0 16px 0; font-family: "Manrope", sans-serif;}
.main-table li {color: #252525;font-size: 16px;letter-spacing: .4px;line-height: 1.5;margin: 0 0 10px 0; font-family: "Manrope", sans-serif;}
a { text-decoration: none !important; font-family: "Manrope", sans-serif;}
h1, h2, h3, h4, h5 { font-family: "Manrope", sans-serif;}

.main-table {padding: 7% 0;text-align: start;}

.heading { color: #1f1f1f; font-size: 42px; font-weight: 800; margin: 0 0 30px 0;}
.heading1 { color: #17472d; font-size: 46px; font-weight: 800; margin: 0 0 20px 0;}
.sub-heading { color: #c55a11; font-size: 26px; font-weight: 800; margin: 0 0 15px 0;}
.custom-btn { display: inline-block; border: 1px solid #17472d; padding: 13px 45px; color: #17472d; border-radius: 30px; font-weight: 600; overflow: hidden; position: relative; font-size: 16px;}
.custom-btn::after { content: ''; position: absolute; width: 100%; height: 100%; left: -100%; top: 0; background: #17472d; transition: all .4s ease-in-out;}
.custom-btn:hover::after { left: 0;}
.custom-btn span { position: relative; z-index: 2; transition: all .4s ease-in-out;}
.custom-btn:hover span { color: #fff;}

.top-header { position: absolute; top: 0; right: 0; left: 0; z-index: 9; padding: 15px 0; } 
.top-header a { display: inline-block; background: #ae9b64; color: #fff; padding: 4px 12px; border-radius: 14px; font-size: 13px; font-weight: 400; letter-spacing: .7px;}

header {position: absolute;width: 100%;/* top: 50px; */left: 0;z-index: 9;}
header img {width: 200px;padding: 0 0 0 3%;}

.banner-section { position: relative;}
.banner-section video{ width: 100%; height: 100vh; object-fit: cover;}
.banner-section::after { content: ''; position: absolute; width: 100%; height: 100vh; background: rgba(31, 8, 8, 0.2); top: 0; left: 0;}
.banner-section .banner-content { position: absolute; z-index: 3; top: 27%; left: 13%; width: 80%;} 
.banner-section h1 { color: #fff; font-size: 60px; font-weight: 700; text-shadow: 3px 4px 6px rgba(0, 0, 0, .6);}

.banner-section h1 span{ color: #f2eadd; margin-left: 5px; letter-spacing: -6px; font-weight: 800;}
.banner-section h1 .word { position: absolute; opacity: 0;}
.banner-section h1 .letter { display: inline-block; position: relative; transform: translateZ(25px); transform-origin: 50% 50% 25px;}
.banner-section h1 .letter.behind { transform: rotateX(-90deg);}
.banner-section h1 .letter.in { transform: rotateX(0deg); transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.banner-section h1 .letter.out { transform: rotateX(90deg); transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);}
.banner-section .banner-bottom { position: absolute; width: 100%; bottom: 5%; z-index: 3;}
.banner-section .banner-bottom .banner-card { background: #ffffff; border-radius: 8px; padding: 20px;}
.banner-section .banner-bottom .banner-card h4 img { width: 30px; margin: 0 12px 0 0;}
.banner-section .banner-bottom .banner-card h4 { color: #17472d; margin: 0; font-size: 21px; font-weight: 700; margin: 0 0 10px 0;} 
.banner-section .banner-bottom .banner-card p { font-size: 15px; margin: 0;}

.inner-banner { background: #17472d; padding: 4% 0; position: relative;}
.inner-banner marquee { position: absolute; top: 50%; transform: translate(0, -50%);}
.inner-banner marquee h1 { font-size: 110px; font-weight: 700; color: #00000000; -webkit-text-stroke-width: 1px; stroke-width: 1px; -webkit-text-stroke-color: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .1); letter-spacing: 0;}
.inner-banner h2 {color: #fff;font-size: 47px;font-weight: 800;letter-spacing: .4px;position: relative;text-align: start;z-index: 3;}
.inner-banner p { position: relative; z-index: 3; font-size: 18px; margin: 0; color: #ae9b64; letter-spacing: 1px; letter-spacing: 500;}
.inner-banner p a { color: #fff;}
.inner-banner span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #fff; margin: 0 10px;}

.team-page .team-card { border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.team-page .team-card img { border-radius: 10px 10px 0 0;}
.team-page .team-card:hover img { filter: grayscale(0);}
.team-page .team-card .team-mane { padding:30px 20px; text-align: center; position: relative;}
.team-page .team-card .team-mane h2 { color: #17472d; font-size: 24px; font-weight: 800; text-align: center; margin: 0 0 4px 0; }
.team-page .team-card .team-mane p { color: #333; font-size: 15px; margin: 0;}
.team-page .team-card .team-mane .icon { position: absolute; top: -20px; right: 20px;}
.team-page .team-card .team-mane .icon a { margin: 0; display: inline-block; width: 35px; height: 35px; border-radius: 50%; background: #c55a11; color: #fff; line-height: 2.3;}

.contact-page .contact-info .icon i{ color: #ae9b64; font-size: 24px; margin: 4px 10px 0 0;}
.contact-page .contact-info p, .contact-page .contact-info p a { font-size: 17px; color: #1f1f1f;}

.contact-form { background: #f2eadd;}
.contact-form .form-control { background: #fff; border: 0; padding: 20px; margin: 0 0 18px 0; border-radius: 10px; font-size: 15px;}
.contact-form input[type='button'] { background: transparent; border: 1px solid #17472d; color: #17472d; font-size: 16px; text-transform: uppercase; font-weight: 700; letter-spacing: .8px; padding: 13px 54px; border-radius: 30px;}  

.service-page .ser-card { border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 30px; margin: 0 0 25px 0; min-height: 215px;} 
.service-page .ser-card img { margin: 0 0 15px 0; width: 80px;}
.service-page .ser-card h4 {margin: 0;color: #313131;font-size: 19px;/* font-weight: 700; */line-height: 1.4;}

.about-section { padding: 8% 0; position: relative;}
.about-section .section-title {position: absolute;font-size: 180px;font-weight: 900;color: #f2eadd;text-transform: uppercase;letter-spacing: 1px;top: 0px;right: 5%;opacity: .5;}
.about-section .left-pic, .about-section .text { position: relative; z-index: 3;} 
.about-section .left-pic img { border: 15px solid #0c0c0c; border-radius: 18px;}

.service-section {padding: 8% 0;background: #f7f2eb;position: relative;}
.service-section .section-title {position: absolute;font-size: 180px;font-weight: 900;color: #17472d;text-transform: uppercase;letter-spacing: 1px;top: 0px;left: 50%;opacity: .05;transform: translate(-50%, 0);}
.service-section .ser-card1 { border: 1px solid #17472d; padding: 15px 20px 15px 30px; border-radius: 50px; margin: 8px 0; transition: all .3s ease-in-out;}
.service-section .ser-card1:hover { background: #fff;}
.service-section .ser-card1 .icon img { width: 40px; margin: 0 15px 0 0;}
.service-section .ser-card1 .text h4 { font-size: 18px; margin: 0; color: #313131;}

.why-choose { padding: 7% 0; position: relative;}
.why-choose .section-title {position: absolute;font-size: 150px;font-weight: 900;color: #f2eadd;text-transform: uppercase;letter-spacing: 1px;top: 0px;left: 3%;opacity: .5;width: auto;}
.why-choose .heading1 { position: relative; z-index: 2;}
.why-choose .why-choose-card { padding: 40px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; margin: 18px 0; min-height: 310px;}
.why-choose .why-choose-card .icon { position: relative; width: 60px; text-align: center; display: inline-block; margin: 0 0 20px 0;} 
.why-choose .why-choose-card .icon::after { content: ''; position: absolute; width: 60px; height: 60px; background: #ae9b64; border-radius: 50%; left: -18px; top: -5px; opacity: .5;}
.why-choose .why-choose-card .icon img { position: relative; z-index: 2;}
.why-choose .why-choose-card h4 { color: #17472d; font-size: 21px; font-weight: 700; margin: 0 0 8px 0;}
.why-choose .why-choose-card p { margin: 0;}

.vision-mission { padding: 6% 0;}
.vision-mission .vision-card { margin: 0 0 30px 0;}
.vision-mission .vision-card .icon { width: 84px; margin: 0 50px 0 0;}
.vision-mission .vision-card h4 { color: #c55a11; font-size: 27px; font-weight: 700; margin: 0 0 18px 0;}
.vision-mission .vision-card ul { list-style-image: url(image/right.png);}

.softwares {padding: 7% 0;background: #f7f2eb;position: relative;}
.softwares .section-title { position: absolute; font-size: 150px; font-weight: 900; color: #17472d; text-transform: uppercase; letter-spacing: 1px; top: 20px; left: 50%; opacity: .05; transform: translate(-50%, 0);}
.softwares .software-card { background: #fff; padding: 25px; border-radius: 10px;}
.softwares .carousel-control-next, .softwares .carousel-control-prev { width: 6%; filter: brightness(0);}

.models { padding: 7% 0;}

.contact-section { padding: 7% 0; background-image: linear-gradient(90deg, #f2eadd 50%, #ae9b64 50%);}
.contact-section .form-control { background: #fff; border: 0; padding: 16px; margin: 0 0 10px 0; border-radius: 6px; font-size: 15px;}
.contact-section input[type='button'] { background: transparent; background: #f2eadd; color: #17472d; font-size: 16px; text-transform: uppercase; font-weight: 700; letter-spacing: .8px; padding: 13px 54px; border-radius: 30px; border: 0;}  

footer { background-image: url('image/footer-bg.jpg'); padding: 6% 0 0 0; background-size: cover;}
footer h4 {color: #fff; font-size: 24px; font-weight: 600; margin: 0 0 20px 0;}
footer h5 {color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 5px 0;}
footer p, footer p a { color: #ececec; margin: 0 0 5px 0; font-size: 15px;}
footer p a:hover { color: #f2eadd;}
footer .footer-bottom { margin: 5% 0 0 0; border-top: 1px solid rgba(255, 255, 255, .6); padding: 12px 0;}
footer .social-icon a { display: inline-block; border: 1px solid rgba(255, 255, 255, .7); color: #fff; width: 35px; height: 35px; border-radius: 50%; text-align: center; font-size: 14px; line-height: 2.3; margin: 0 0 0 2px;}

.global-coverage { background: #f2eadd;}
.global-coverage .global { background: #fff; padding: 40px; border-radius: 10px; min-height: 625px;}
.global-coverage .global h4 {color: #c55a11; font-size: 27px; font-weight: 700; margin: 0 0 18px 0;}
.global-coverage .global ul { list-style-image: url('image/check-mark.png');}
.global-coverage .global ul li { color: #1f1f1f; font-size: 17px; margin: 0 0 10px 0;}

@media (min-width: 320px) and (max-width: 768px) { 
    body { overflow-x: hidden ;}
    p, li {font-size: 15px; line-height: 1.6;}
    .main-table li {font-size: 15px;}

    .heading { font-size: 27px; margin: 0 0 20px 0;}
    .heading1 { font-size: 30px;}
    .sub-heading { font-size: 21px;}
    .custom-btn { padding: 10px 32px; font-size: 15px;}

    .top-header { display: none;}

   
    header img { width: 180px;}

    .banner-section { position: relative;}
    .banner-section video{ width: 100%; height: 350px;}
    .banner-section .banner-content { top: 22%; left: 3%;} 
    .banner-section h1 { font-size: 27px;}

    .banner-section h1 span{ color: #f2eadd; margin-left: 5px; letter-spacing: -6px; font-weight: 800;}
    .banner-section h1 .word { position: absolute;}
    .banner-section .banner-bottom { position: relative;}

    .inner-banner { padding: 6% 0;}
    .inner-banner marquee h1 { font-size: 60px;}
    .inner-banner h2 { color: #fff; font-size: 34px;}
    .inner-banner p { font-size: 15px;}

    .about-section .text {margin: 30px 0 0 0;} 

    .service-section {padding: 8% 0;background: #f7f2eb;position: relative;}
    .service-section .section-title {display: none;}
    .service-section .ser-card1 { padding: 15px 20px;}
    .service-section .ser-card1 .icon img { width: 35px; margin: 0 20px 0 0;}
    .service-section .ser-card1 .text h4 { font-size: 16px;}

    .why-choose .section-title {display: none;}
    .why-choose .why-choose-card { padding: 30px; margin: 12px 0; min-height: 210px;}

    .vision-mission .vision-card { margin: 0 0 20px 0;}
    .vision-mission .vision-card .icon { width: 90px; margin: 0 10px 0 0;}
    .vision-mission .vision-card h4 { font-size: 17px; margin: 0 0 15px 0;}

    .softwares .section-title { display: none;}
    .softwares .software-card { padding: 15px; margin: 0 0 10px 0;}

    .models { padding: 7% 0;}

    .contact-section { background-image: linear-gradient(180deg, #f2eadd 30%, #ae9b64 70%);}

    footer { background-image: url('image/footer-bg.jpg'); padding: 6% 0 0 0; background-size: cover;}
    footer h4 {color: #fff; font-size: 24px; font-weight: 600; margin: 0 0 20px 0;}
    footer p, footer p a { color: #ececec; margin: 0 0 5px 0; font-size: 15px;}
    footer p a:hover { color: #f2eadd;}
    footer .footer-bottom { margin: 5% 0 0 0; border-top: 1px solid rgba(255, 255, 255, .6); padding: 12px 0;}
    footer .social-icon a { display: inline-block; border: 1px solid rgba(255, 255, 255, .7); color: #fff; width: 35px; height: 35px; border-radius: 50%; text-align: center; font-size: 14px; line-height: 2.3; margin: 0 0 0 2px;}

    .global-coverage { background: #f2eadd;}
    .global-coverage .global { min-height: 300px;}
    .global-coverage .global h4 {color: #c55a11; font-size: 27px; font-weight: 700; margin: 0 0 18px 0;}
    .global-coverage .global ul { list-style-image: url('image/check-mark.png');}
    .global-coverage .global ul li { color: #1f1f1f; font-size: 17px; margin: 0 0 10px 0;}
}

.jcgmt-container {
    float:left;
    padding: 3px;
}
.jcgmt-container .jcgmt-lbl {
    font-size: 12px;
    color: #ffffff;
    line-height: 22px;
    text-align: center;
    width: 110px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 auto;
}
.jcgmt-clockHolder {
    width:100px; 
    margin:0 auto;
    position:relative;
    overflow: hidden;
}
.jcgmt-sec,
.jcgmt-min,
.jcgmt-hour {
    display:block;
    position:absolute;
}

.jcgmt-rotatingWrapper {
    position:absolute;
    width:100px;
    height:100px;
}
.jcgmt-digital,
.jcgmt-date {
    font-weight:bold;
    font-size: 12px;
    color: #ffffff;
    text-align:center;
    margin-left:8px;
    /* display: none; */
}