@font-face {
    font-family: "atyp bold";
    src: url(../atyp-fonts/AtypDisplay-Bold.ttf);
}
@font-face {
    font-family: "atyp semibold";
    src: url(../atyp-fonts/AtypDisplay-Semibold.ttf);
}
@font-face {
    font-family: "atyp medium";
    src: url(../atyp-fonts/AtypDisplay-Medium.ttf);
}
@font-face {
    font-family: "atyp regular";
    src: url(../atyp-fonts/AtypDisplay-Regular.ttf);
}
* {margin: 0;padding: 0;box-sizing: border-box;}
h1,
h2,
h3,
h4,
h5,
h6 {margin: 0;}
p {margin: 0;}
ul {margin: 0;padding: 0;}
li {list-style: none;}
a {text-decoration: none;font-family: "atyp semibold";}
a:hover {transition: 0.5s;}
.section-spacing {margin-bottom: 80px;}
/* common css */
.title{font-family: "atyp bold";font-size: 45px;margin-bottom: 20px;color: #0D005B;}
.heading{font-family: "atyp semibold";font-size: 40px;margin-bottom: 20px;color: #0D005B;}
.description{font-family: "atyp regular";font-size: 16px;letter-spacing: 1px;color: #231F20;margin-bottom: 20px;}
/* Header Css */
.hed-container{background-color: #FF914D;position: relative;}
.header-logo{text-align: end;background-color: #0D005B;position: relative;}
header nav {display: flex;justify-content: space-between;align-items: center;}
.bg{background-color: #0D005B;height: 100%;width: 35%;position: absolute;left: 0;top: 0;}
header nav ul {display: flex;align-items: center;}
header nav ul li {padding-left: 40px;}
header nav ul li a {position: relative;color: #1F1956;font-size: 18px;letter-spacing: 1px;text-transform: uppercase;}
header nav ul li a::before {content: "";width: 70%;height: 3px;position: absolute;bottom: -7px;border-radius: 10px;background-color: #2996cc;transition: 0.5s;visibility: hidden;}
header nav ul li a.active::before {visibility: visible;}
header nav ul li a:hover {color: #231F20;}
/* toggel Css */
.toggle {width: 38px;height: 38px;cursor: pointer;right: 0;position: relative;z-index: 1;display: none !important;}
.toggle-icon {width: 100%;height: 2px;background: #0D005B;position: absolute;top: 0;display: block;transition: 0.3s ease-in-out;}
.toggle-icon::before, .toggle-icon::after {content: '';position: absolute;top: 10px;right: 0;height: 100%;width: 100%;background: #0D005B;transition: .3s linear;}
.toggle-icon::before {transform: translateX(0);}
.toggle-icon::after {top: 20px;width: 100%;}

/* Common Btn */
.common-btn{background-color: #0D005B;color: #FF914D;padding: 10px 20px;display: inline-block;font-family: "atyp medium";}
.common-link {color: #0D005B;text-decoration: underline;font-size: 18px;}
  /* Hero Banner */
.hero-banner-section{background-image: url(../images/hero-banner.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;padding: 255px 0;}
.hero-banner-content{max-width: 580px;background: #FFFFFF50;backdrop-filter: blur(5px);padding: 50px 30px;border-radius: 10px;}

  /* Service Slider */
.service-slider-box{position: relative;border-left: 2px solid #FF914D;}
.service-name-box{display: flex;align-items: center;justify-content: space-between;width: 100%;position: absolute;bottom: 0;left: 0;background-color: #0D005B;padding: 20px;}
.service-slider-box .service-name{color: #FF914D;}
.arrow{background-color: #FF914D;padding: 10px;border-radius: 50px;}
/* Owl Dots */
.owl-dots {text-align: center;}
.owl-dot.active {background-color: #0D005B !important;}
.owl-dot {height: 15px;width: 15px;background-color: #FF914D !important;margin: 0 5px;border-radius: 50px;}

  /* Hire Boxes */
.hire-boxes{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;column-gap: 4%;row-gap: 30px;}
.hire-box{background-color: #0D005B;padding: 50px 20px 40px;border-radius: 10px;width: 48%;position: relative;overflow: hidden;transition: 0.5s;display: flex;align-items: center;justify-content: center;height: 150px;}
.hire-box:hover{background-color: #FF914D;box-shadow: 10px 16px 50px rgba(0, 0, 0, 0.25);}
.hire-box:hover .hire-name{color: #0D005B;}
.hire-box:hover .number{background-color: #0D005B;}
.odd{background-color: #FF914D;transition: 0.5s;}
.odd:hover{background-color: #0D005B;box-shadow: 10px 16px 50px rgba(0, 0, 0, 0.25);}
.odd:hover .hire-name{color: #FF914D !important;}
.odd:hover .number{background-color: #FF914D !important;}
.odd .hire-name{color: #0D005B !important;transition: 0.5s;}
.odd  .number{background-color: #0D005B !important;transition: 0.5s;}
.hire-box .hire-name{font-size: 25px;color: #FF914D;text-align: center;transition: 0.5s;}
.hire-box .number{font-size: 20px;margin-bottom: 20px;color: #FFF;position: absolute;top: 0;left: 0;background-color: #FF914D;padding: 4px 23px 13px 14px;border-radius:0 0 50px 0;text-align: center;transition: 0.5s;}
/* Question Form  */
.got-question-section .heading{color: #FFF;}
.got-question-section .description{color: #FFF;}
.form-group{margin-bottom: 30px;}
.form-group .form-control{height: 50px;border-radius: 10px;border: 1px solid #0D005B;}
.question-sec{background-color: #0D005B;padding: 30px;border-radius: 10px;}
.form-group .form-control.texarea{height: 100px;padding: 20px}
.quo-form .question-btn{padding: 10px 30px;background-color: #FF914D;border: 1px solid transparent;border-radius: 5px;color: #0D005B;font-weight: bold;transition: 0.5s;}
.quo-form .question-btn:hover{background-color: transparent;border: 1px solid #FF914D;color: #FF914D;}
/* Delivery Box */
.delivery-box{display: flex;align-items: center;background-color: #0D005B;padding: 20px;border-radius: 10px;box-shadow: 10px 16px 50px rgba(0, 0, 0, 0.25);}
.delivery-box .sub-heading{color: #FFF;font-size: 28px;margin-bottom: 20px;font-family: "atyp medium";}
.delivery-box .description{color: #FFF;}
.customer-box{display: flex;align-items: center;background-color: #FF914D;padding: 20px;border-radius: 10px;box-shadow: 10px 16px 50px rgba(0, 0, 0, 0.25);}
.customer-box .sub-heading{color: #0D005B;font-size: 28px;margin-bottom: 20px;font-family: "atyp medium";}
.customer-box .description{color: #0D005B;}

/* Footer Css */
footer{background-color: #0D005B;padding: 50px 0;}
.social-media li a{display: inline-flex;align-items: center;column-gap: 20px;border: 1px solid #FFF;padding: 13px 0;border-radius: 10px;width: 180px;align-items: center;justify-content: center;transition: 0.5s;}
.social-media li a:hover{background-color: #FF914D;border: 1px solid transparent;color: #0D005B !important;}
.footer-link-hrading{color: #FFF;margin-bottom: 30px;font-family: "atyp medium";}
.footer-links li{margin-bottom: 15px;}
.footer-links li a{color: #FFF;transition: 0.5s;}
.footer-links li a:hover{color: #FF914D;}
.footer-links li a img{vertical-align: middle;margin-right: 10px;}
.mini-footer{background-color: #0D005B;border-top: 1px solid #FF914D;padding: 20px 0;}
.mini-footer p{text-align: center;color: #FFF;margin-bottom: 0;}
.mini-footer p a{color: #FF914D;}

/* Inner Banner Css */
.inner-banner{background-color: #F9F9F9;padding: 70px 0;}
.inner-banner .heading{color: #0D005B;}
.breadcrumb-item a{color: #0D005B;}
.breadcrumb{margin-bottom: 0;}
.breadcrumb-item+.breadcrumb-item::before{color: #FF914D;}
.breadcrumb-item.active{color: #FF914D;}
/* Why Choose Css */
.why-choose-points{display: flex;align-items: start;column-gap: 15px;margin-bottom: 30px;}
.why-choose-points .sub-heading{
  margin-bottom: 10px;
}
.contact-detail{display: flex;flex-direction: column;align-items: center;justify-content: center;row-gap: 20px;}
.contact-detail a{color: #0D005B;font-size: 20px;text-align: center;}
.service-box{margin-bottom: 30px;}
.service-box img{margin-bottom: 15px;}
.service-box .sub-heading{margin-bottom: 15px;}
/* our work page gallery css */
.main .container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 1rem;justify-content: center;align-items: center;}
.main .card {color: #252a32;border-radius: 2px;background: #ffffff;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);}
.main .card-image {position: relative;display: block;width: 100%;padding-top: 70%;background: #ffffff;}
.main .card-image img,
.main .card-image video {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}

.testimonial-slider .testimonial-box img{
  max-width: 70px;
}
.testimonial-slider .testimonial-box .client-name{
  color: #0D005B;
  margin-bottom: 10px;
}
.client-profile{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  column-gap: 20px;
}
.client-profile-name img{
  max-width: 120px !important;
}

@media only screen and (max-width: 600px) {
  .main .container {display: grid;grid-template-columns: 1fr;grid-gap: 1rem;}    .img-fluid img{padding: 0px 35px 0px 35px;}
}
@media (min-width:1200px) and (max-width:1439px) {
  .delivery-box{height: 100%;}
  .service-slider-box .service-name{font-size: 23px;}    .img-fluid img{padding: 0px 35px 0px 35px;}
}
@media (min-width:768px) and (max-width:1199px) {
  .toggle {display: block !important;z-index: 6;top: 10px;}
  .closeMenu .toggle-icon::before {visibility: hidden;opacity: 0;top: 0;transition: .3s linear;transform: rotate(135deg);}
  .closeMenu .toggle-icon::after {top: 0;transition: .3s linear;transform: rotate(90deg);}
  .closeMenu .toggle-icon {top: 50%;transform: translateY(-50%) rotate(45deg);}
  header nav .main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;height: 100vh;width: 100%;justify-content: flex-start;align-items: flex-start;row-gap: 25px;transition: 0.3s;overflow: hidden;background-color: #FF914D;padding: 100px 0 0 40px;}
  header nav .main-menu li a {color: #0D005B;font-size: 16px;}
  header nav .main-menu li {padding-left: 0;}
  header nav .main-menu.show-menu {left: 0;z-index: 4;}
  .hero-banner-section{padding: 50px 0;}
  .hire-box .hire-name{font-size: 26px;}
  .delivery-box .sub-heading,
  .customer-box .sub-heading{font-size: 25px;}
  .delivery-box{height: 100%;}
  .contact-detail{margin-bottom: 30px;}    .img-fluid img{padding: 0px 35px 0px 35px;}
}

@media (min-width:320px) and (max-width:767px) {
  .toggle {display: block !important;z-index: 6;top: 10px;}
  .closeMenu .toggle-icon::before {visibility: hidden;opacity: 0;top: 0;transition: .3s linear;transform: rotate(135deg);}
  .closeMenu .toggle-icon::after {top: 0;transition: .3s linear;transform: rotate(90deg);
}
  .closeMenu .toggle-icon {top: 50%;transform: translateY(-50%) rotate(45deg);}
  header nav .main-menu {flex-direction: column;position: absolute;top: 0;left: -100%;height: 100vh;width: 100%;justify-content: flex-start;align-items: flex-start;row-gap: 25px;transition: 0.3s;overflow: hidden;background-color: #FF914D;padding: 100px 0 0 40px;}
  header nav .main-menu li a {color: #0D005B;font-size: 16px;}
  header nav .main-menu li {padding-left: 0;}
  header nav .main-menu.show-menu {left: 0;z-index: 4;}
  .hero-banner-section{padding: 50px 0;}
  .title{font-size: 30px;}
  .hero-banner-content{padding: 20px 10px;}
  .about-us-section img{margin-bottom: 20px;}
  .heading{font-size: 25px;}
  .description{font-size: 14px;}
  .service-slider-box{border: none;}
  .service-name-box{padding: 15px;}
  .hire-box .hire-name{font-size: 14px;}
  .hire-box .number{font-size: 16px;padding: 4px 17px 9px 10px;}
  .delivery-box{margin-bottom: 30px;}
  .delivery-box .description,
  .customer-box .description{margin-bottom: 0;}
  footer{padding: 20px 0;}
  .inner-banner{padding: 40px 0;}
  .contact-detail{margin-bottom: 30px;}
}