@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
body { margin: 0; padding: 0; font-family: "Libre Franklin", sans-serif; overflow-x: hidden;}
p, li {color: #c8c8c8;font-size: 15px;line-height: 1.6;letter-spacing: 1px;margin: 0 0 12px 0;font-family: "Libre Franklin", sans-serif;font-weight: 350;}
.main-table li {color: #c8c8c8; font-size: 15px;line-height: 1.6;margin: 0 0 10px 0; letter-spacing: 1px; font-family: "Libre Franklin", sans-serif; font-weight: 350;}
a { text-decoration: none !important; font-family: "Libre Franklin", sans-serif;}
h1, h2, h3, h4, h5, h6 { font-family: "Libre Franklin", sans-serif; color: #1e1e1e;}

.main-table { text-align: left; padding: 5% 0; background-image: linear-gradient(45deg, #050505, #1e1e1e); }

#zonediv1 { overflow: hidden}
#widgetsControl_C, #widgetsControl{ height: auto !important;}
#zonediv1 .container-fluid { margin: 0; padding: 0;}
#zonediv { background-image: linear-gradient(45deg, #050505, #1e1e1e);}

#MenuControl .nav-item { margin: 0}
#MenuControl .nav-item .nav-link {color: #fff;font-size: 14px;padding: 24px 0;}
#MenuControl .nav-fill{ width:100%;}
#MenuControl .bg-light {/* background: #fff!important; *//* height: 100%; *//* padding: 0 2% 0 0; */}

/* #HomepagecontentControl_C { margin-top: -21px} */

@media (min-width: 769px)  {
  #HeaderControl {position: absolute;left: 0; top: 0px; z-index: 9;width: 30%;text-align: center; background: #000000a6; backdrop-filter: blur(2px); padding: 5px 0}
  #MenuControl {position: absolute;right: 0; top: 0px; z-index: 8 !important; width: 70%; background: #000000a6; backdrop-filter: blur(2px);}
}

#HeaderControl.RadDock_Default .rdMiddle .rdCenter, #HeaderControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#MenuControl .bg-light { --bs-bg-opacity: 1; background-color: transparent !important; height: 100%;}
#MenuControl.RadDock_Default .rdMiddle .rdCenter, #MenuControl.RadDock_Default .rdBottom .rdCenter { background-color: transparent !important;}
#zonediv #HeaderControl, #zonediv #MenuControl {position: relative;background: #0f0f0f;border-top: 1px solid #fff; top: 0; }
#zonediv #WidgetControl4 { margin: 0; padding: 0}
#zonediv #WidgetControl4 .top-header {background: #0f0f0f; position: relative; width: 100%; left: 0}
#HeaderControl, #MenuControl{ height: 90px !important}

#zonediv #RadDockZone1.container{max-width: 100%; margin-top: 0 !important; padding: 0; overflow: hidden;}

#OtherPageControl {padding: 0;margin: 0 0 -16px 0;}

@media (min-width: 320px) and (max-width: 768px ){
  .navbar-toggler {position: relative;right: 10px;margin-top: -105px;background: #fff;}
  #MenuControl { height: 0 !important;}
  #HeaderControl {height: 75px !important;background: #0f0f0f;}
  #MenuControl {height: 0 !important;background: #0f0f0f;}
  .navbar-collapse {background: #131313;margin-top: -20px;}
}

.heading {font-size: 42px;margin: 0 0 20px 0;text-transform: uppercase;font-weight: 800;letter-spacing: .5px;font-style: italic;}
.sub-heading {font-size: 24px;margin: 0 0 20px 0; color: #dfdfdf; font-weight: 500; letter-spacing: .8px; padding: 5px 0; border-bottom: 1px dashed #303030;}
.custom-btn { background: #fff; color: #111111; display: inline-block; padding: 16px 36px; font-size: 16px; font-weight: 500; border: 4px solid; border-image: linear-gradient(180deg, #111111 0%, #FAFAFA 78%, #FFFFFF 92%, #FFFFFF 100%) 1 / 3px stretch; transition: all .3s ease-in-out;}
.custom-btn:hover { color: #111111; background-image: linear-gradient(45deg, #0000ff, #ffffff);}

header {/* position: absolute; *//* z-index: 2; *//* background: #000000a6; *//* width: 100%; *//* padding: 5px 0; *//* backdrop-filter: blur(2px); */}
header img { width: 110px;}

.banner-section {padding:0 0 5% 0;background-image: url('../image/banner-img.jpg');background-size: cover;overflow: hidden;}
.banner-section .text { position: relative; padding: 60px 0; margin: 88px 0 0 0;}
.banner-section .text::after {content: '';position: absolute;width: 80%;height: 100%;background: #0000ff8a;top: 0;right: 5%;transform: skewX(330deg);backdrop-filter: blur(2px);}
.banner-section .text .right-text { position: relative; z-index: 2;}
.banner-section .text .right-text h1 {color: #fff;font-size: 60px;font-weight: 900;letter-spacing: .8px;text-shadow: #2c2c2c 0px 4px 8px;margin: 0 0 22px 0;}
.banner-section .text .right-text p {color: #fff;font-size: 27px;font-weight: 600;line-height: 1.4;text-align: end;padding: 0 30px 20px 0;}
.banner-section .text .right-text .btn {display: block;background: #ffffff;width: 260px;margin: 20px 0;border-radius: 30px;font-size: 15px;font-weight: 500; padding: 15px 20px}
.banner-section .text .right-text .btn img { width: 25px; margin: 0 70px 0 0 }
.banner-section .text .right-text .about-us { margin-left: 25%;}
.banner-section .text .right-text .contact-us { margin-left: 15%;}
.banner-section .text .right-text .gallery { margin-left: 5%;}

.our-promise {background: #181818;border-top: 8px solid #111111; position: relative;overflow: hidden;}
.our-promise::after {content: '';position: absolute;width: 320px;height: 320px;border-radius: 50%;background: #0000ff;left: -2%;top: -18%;box-shadow: rgb(0 0 255) -10px 0px 130px 240px; opacity: .2;}
.our-promise p { font-size: 17px;}
.our-promise .left-pic{ margin-top: 15%; position: relative; z-index: 2;}
.our-promise .text { margin-top: 10%; position: relative; z-index: 2;}
.our-promise .right-pic{ position: relative; z-index: 2;}

.about-section { padding: 8% 0; background-image: linear-gradient(45deg, #050505, #1e1e1e); overflow: hidden; position: relative;}
.about-section::after {content: '';position: absolute;width: 180px;height: 180px;border-radius: 50%;background: #0000ff; right: -2%; top: 35%;box-shadow: rgb(0 0 255) -10px 0px 130px 240px; opacity: .06;}
.about-section .heading {color: #fff;margin-left: -28%;font-size: 50px;text-shadow: 3px 10px 10px #000000;letter-spacing: 1px; margin-bottom: 30px}

.service-section { padding: 7% 0; background: #131313;}
.service-section .ser-card { padding: 40px; margin: 20px 0 0 0; transition: all .3s ease-in-out;}
.service-section .ser-card h4 { color: #fff; margin: 25px 0 10px 0; font-size: 20px; font-weight: 600; letter-spacing: 1px;}
.service-section .ser-card p { font-size: 14px; color: #dddada;}
.service-section .ser-card:hover { background: #0000ff;}
.service-section .ser-card:hover img { filter: brightness(0);}

footer { background: #000; padding: 5% 0 0 0;}
footer .social-icon h4 { font-size: 20px; color: #fff; font-weight: 600; letter-spacing: 1px;}
footer .social-icon a {display: inline-block;width: 35px;height: 35px;background: #fff;border-radius: 50%;text-align: center;padding: 9px;margin: 0 0 0 5px;} 
footer .social-icon a img { width: 15px;}
footer h3 { color: #fff; margin: 20px 0 10px 0; text-transform: uppercase; font-size: 18px; letter-spacing: 1.5px; font-weight: 700;}
footer p, footer a {color: #adadad;font-size: 14px;margin: 0 0 10px 0;line-height: 1.5;text-align: justify;}
footer .footer-bottom { margin: 4% 0 0 0; padding: 15px 0; border-top: 1px solid #ffffff21;}

.team-banner { background: #0a0a0a;}
.team-banner h1 {color: #fff;margin-left: -5%;font-size: 56px;text-shadow: 3px 10px 10px #000000;letter-spacing: 1px; margin-bottom: 30px; text-transform: uppercase; font-style: italic; font-weight: 800; line-height: 1.2;}

.team-page .team-card .text {background: #000000;padding: 30px;min-height: 160px;}
.team-page .team-card .text h4 { color: #fff; font-size: 22px; font-weight: 600; letter-spacing: .8px;}
.team-page .team-card .text p {margin: 0;font-size: 14px;font-style: italic;}

.about-banner { padding: 15% 0; background-image: url('../image/about-banner.jpg'); background-size: cover;}
.about-banner h1, .gallery-banner h1 {color: #fff; font-size: 56px;text-shadow: 3px 10px 10px #000000;letter-spacing: 1px; margin-bottom: 20px; text-transform: uppercase; font-style: italic; font-weight: 800; line-height: 1.2;}
.about-banner p, .about-banner p a, .gallery-banner p, .gallery-banner p a { color: #ececec;}

.testimonial-card { padding: 50px 40px; background: #000; margin: 12px 0; min-height: 400px;}
.testimonial-card p img { width: 30px; margin: -25px 5px 0 0;}
.testimonial-card p { color: #a6a6a6;}
.testimonial-card h5 { color: #fff; margin: 0; font-size: 18px; font-weight: 500; letter-spacing: .8px; font-style: italic;}

.ser-card1 { padding: 30px; border: 1px solid #ffffff15; margin: 12px 0; background: #ffffff07; min-height: 420px;}
.ser-card1 h4 { color: #fff; font-size: 20px; margin: 20px 0 10px 0; letter-spacing: 1px;}
.ser-card1 p { font-size: 14px; color: #b8b8b8;}

.gallery-banner { padding: 10% 0 5% 0; background-image: linear-gradient(45deg, #000, #0f0f0f, #181818); position: relative; overflow: hidden;}
.gallery-banner::after {content: '';position: absolute;width: 120px;height: 120px;border-radius: 50%;background: #0000ff;right: 4%;top: -12%;box-shadow: rgb(0 0 255) -10px 0px 170px 150px;opacity: .16;}

.gallery-card { overflow: hidden; border: 1px solid #ffffff15; margin: 12px 0;}
.gallery-card img { transition: all .7s ease-in-out;}
.gallery-card:hover img{ transform: scale(1.2);}

.contact-info { padding: 30px; border: 1px solid #ffffff15; margin: 12px 0; background: #ffffff07; min-height: 220px;}
.contact-info i { color: #0000ff; font-size: 19px; width: 30px; height: 30px; background: #fff; text-align: center; border-radius: 2px; padding: 6px; margin: 0 0 20px 0;}
.contact-info h4 { color: #fff; font-size: 17px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600;}
.contact-info p { font-size: 14px; margin: 0;}

@media (min-width: 320px) and (max-width: 991px) {
  p, li { font-size: 14px;line-height: 1.5;}
  .main-table li { font-size: 15px;line-height: 1.5;}

  .heading {font-size: 27px;}
  .sub-heading {font-size: 20px; margin: 0 0 16px 0;}
  .custom-btn { padding: 12px 24px; font-size: 14px;}

  header img {width: 90px;padding: 6px 0;}

  .banner-section { background-position: center;}
  .banner-section .text {padding: 50px 0 20px 0;margin: 0px 0 0 0;}
  .banner-section .text::after { width: 60%; background: #0000ff5e; transform: skewX(340deg);}
  .banner-section .text .right-text { position: relative; z-index: 2;}
  .banner-section .text .right-text h1 { font-size: 26px; margin: 0 0 18px 0;}
  .banner-section .text .right-text p { font-size: 17px; padding: 0 0 15px 0;}
  .banner-section .text .right-text .btn { display: none;}

  .our-promise p { font-size: 15px;}
  .our-promise .left-pic{ width: 85%; margin: 0 auto;}
  .our-promise .right-pic{ display: none;}

  .about-section .heading {font-size: 27px; font-weight: 700; margin: 20px 0 15px 0;}

  footer .social-icon h4 { font-size: 18px;}
  footer .social-icon a { width: 30px; height: 30px; line-height: 2;} 
  footer .social-icon a img { width: 14px;}
  footer h3 { font-size: 17px;}
  footer p, footer a { font-size: 13px;}

  .team-banner h1 { font-size: 24px; font-weight: 700; margin: 20px 10px;}

  .team-page .team-card .text { margin: 0 0 10px 0;}

  .about-banner { padding: 15% 0; background-position: center;}

  .testimonial-card { padding: 30px 20px; min-height: 200px;}
  .testimonial-card p img { width: 24px; margin: -20px 5px 0 0;}
  .testimonial-card h5 { font-size: 16px;}

}

@media (min-width: 992px) and (max-width: 1400px) {
  p, li { font-size: 15px;line-height: 1.5;}
  .main-table li { font-size: 15px;line-height: 1.5;}

  .heading {font-size: 36px;}
  .sub-heading {font-size: 21px;}
  .custom-btn { padding: 14px 30px; font-size: 14px;}

  .banner-section { background-position: right;}
  .banner-section .text .right-text { position: relative; z-index: 2;}
  .banner-section .text .right-text h1 { font-size: 47px; margin: 0 0 16px 0;}
  .banner-section .text .right-text p { font-size: 20px;}

  .our-promise p { font-size: 16px; margin: 0 0 20px 0 !important;}

  .about-section .heading {color: #fff;margin-left: -28%;font-size: 40px;text-shadow: 3px 10px 10px #000000;letter-spacing: 1px; margin-bottom: 30px}

  .team-banner h1 {font-size: 42px;}

  .about-banner h1, .gallery-banner h1 { font-size: 38px;}

  .testimonial-card p img { width: 24px; margin: -20px 5px 0 0;}
  .testimonial-card p { font-size: 14px;}
  .testimonial-card h5 { font-size: 16px;}
}

.modal-body { padding: 50px;}
.modal .btn-close {position: absolute;top: -15px;right: -15px;background-color: #c5c5c5;opacity: 1;width: 40px;height:40px;border-radius: 50%;z-index: 9999999;}

.contact-form .form-control {padding: 15px; margin: 0 0 12px 0;}
.contact-form input[type='button'] { background: #0000ff; padding: 13px 34px; color: #fff; border: 0; font-size: 17px; margin: 10px 0 0 0;} 

#actcontrol {width: 80%;margin: 4% auto;background: #ffffff12;border: 1px solid #ffffff1c;padding: 30px 0 0 0;}
#actcontrol h2 { font-size: 36px; margin: 0 0 20px 0;text-transform: uppercase;font-weight: 800;letter-spacing: .5px;font-style: italic; color: #fff}
#actcontrol #_cmnt { text-align: center; width: 80%; margin: 0 auto}
#actcontrol label { color: #ecececad; margin: 15px 0 3px 0}
#actcontrol .form-control, #actcontrol .form-select { padding: 10px; background: #ffffff0d; border-color: #ffffff5c; color: #ffff}

@media (min-width: 320px) and (max-width: 767px) {
  .modal { padding: 10px; margin: 90px 0 0 0;}
  .modal-body { padding: 30px;}
  .modal .btn-close { top: -10px;right: -10px; width: 30px;height: 30px;}

}