@import url(../css2);

:root {
 --primary: #f7991f;
 --secondary: #2478be;
 --ternary: #ddb400;
 --white: #fff;
 --grey: #ccc;
 --black: #192030;
 --font-heading: "Bangers", system-ui;
 --font-body: "Poppins", sans-serif;
 --font-tab: "Mulish", sans-serif
}

body,
html {
 font-family: var(--font-body);
 overflow-x: hidden
}

ul {
 padding-left: 0
}

::-webkit-scrollbar {
 height: 3px;
 width: 3px
}

::-webkit-scrollbar-track {
 border-radius: 5px;
 background-color: #dfe9eb
}

::-webkit-scrollbar-track:hover {
 background-color: #b8c0c2
}

::-webkit-scrollbar-track:active {
 background-color: #b8c0c2
}

::-webkit-scrollbar-thumb {
 border-radius: 5px;
 background-color: var(--primary)
}

::-webkit-scrollbar-thumb:hover {
 background-color: var(--black)
}

::-webkit-scrollbar-thumb:active {
 background-color: var(--black)
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: var(--font-heading)
}

a {
 text-decoration: unset;
 color: unset
}

section {
 padding: 40px 0
}

.main section:nth-of-type(even) {
 background: #9dc2e1;
 color: #fff
}

.btn {
 background: var(--secondary);
 font-size: 16px;
 font-weight: 600;
 color: #fff;
 border-radius: 0;
 padding: 15px 30px 15px 30px
}

.btn:hover {
 background: var(--primary);
 color: var(--white)
}

.highlight {
 color: var(--secondary)
}

.filter {
 filter: hue-rotate(160deg)
}

.small-heading {
 font-size: 60px;
 font-weight: 800;
 line-height: 70px;
 letter-spacing: 6.2px
}

.img-fluid {
 width: 100%;
 object-fit: cover
}

.btn-container {
 display: flex;
 gap: 10px
}

.navbar {
 z-index: 2
}

.navbar-toggler {
 border: unset
}

.navbar-toggler-icon {
 background-image: url(../external-flat-icons-inmotus-design/67/external-Menu-round-mobile-ui-set-flat-icons-inmotus-design-3.png)
}

.navbar-toggler:focus {
 box-shadow: unset
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
 font-size: 16px;
 font-weight: 600;
 color: var(--white);
 border-radius: 0
}

#mainNav .nav-link {
 color: #000 !important
}

#mainNav.scrolled {
 background: #fff
}

#mainNav.scrolled .nav-link {
 color: #000 !important
}

.navbar-nav .nav-link:hover {
 color: var(--primary)
}

.hero {
 padding: 180px 0;
 position: relative;
 overflow: hidden;
 color: var(--white)
}

.web-hero {
 background: url(../img/meta-bg.webp) center center/cover no-repeat !important;
 color: var(--black) !important
}

.hero .bg-video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 z-index: -1
}

.hero .container {
 position: relative;
 z-index: 1
}

.hero h2 {
 font-size: 48px;
 font-weight: 800;
 line-height: 58px;
 letter-spacing: 4.5px;
 color: var(--white)
}

.web-hero h2 {
 color: var(--white)
}

.web-form {
 box-shadow: 0 0 0 5px var(--primary), 0 0 0 10px var(--black);
 padding: 20px;
 background: #fff;
 border-top-left-radius: 15px;
 border-bottom-right-radius: 15px;
 position: relative
}

.video-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 place-items: center;
 gap: 20px;
 margin-top: 50px
}

.video-grid .img-fluid {
 max-width: 100% !important;
 height: 300px;
 width: 300px;
 object-fit: cover
}

.experience .yrs {
 font-size: 92px;
 font-weight: 800;
 line-height: 95px;
 letter-spacing: 4.5px;
 text-transform: uppercase
}

.steps small {
 color: var(--white);
 text-transform: uppercase
}

.slides .slider img {
 height: 500px;
 object-fit: cover;
 width: 100%
}

.nav.nav-tabs {
 display: flex;
 justify-content: center;
 align-items: center;
 border-bottom: unset
}

.nav-tabs a,
.nav-tabs button {
 font-family: var(--font-tab) !important;
 border: unset;
 color: var(--white);
 text-transform: capitalize
}

.nav-tabs .nav-link.active {
 color: unset;
 background-color: unset;
 border: unset;
 border-bottom: 2px solid var(--primary)
}

.nav-tabs .nav-link {
 border-top-left-radius: unset;
 border-top-right-radius: unset
}

.work .nav-tabs .nav-link {
 color: #fff
}

.nav-tabs .nav-link:hover {
 isolation: unset;
 border-color: unset
}

.footer-links li:not(:last-child)::after {
  content: " · ";
  margin: 0 6px;
  color: #6c757d;
}

.fontFamily-Poppins{
 font-family: 'Poppins';
}

.footer-links a {
  color: #6c757d;
  text-decoration: none;
}

.nav-link:hover {
 color: unset;
 border: unset
}

.package .nav-tabs .nav-link.active {
 background-color: var(--secondary);
 font-size: 16px;
 font-weight: 600;
 color: #fff;
 border-top: 4px solid var(--white) !important;
 border-radius: 0;
 padding: 15px 30px 15px 30px
}

.package .nav-link:focus-visible {
 outline: 0;
 box-shadow: unset
}

.package ul li span {
 text-wrap: wrap;
 font-size: 15px
}

.price-box {
 box-shadow: 0 0 20px 1px #ccc;
 padding: 20px;
 border-radius: 15px;
 background: white;
 color: #000;
}

.top-area .price {
 font-size: 46px;
 font-weight: 700;
 color: var(--black)
}

.mid-area {
 border: 1px solid #ccc;
 padding: 10px;
 border-radius: 5px;
 height: 200px;
 overflow-y: scroll
}

.bottom-area {
 margin-top: 20px
}

.fa-star {
 color: gold
}

.slick-dots li.slick-active button:before {
 opacity: 1;
 color: var(--primary)
}

.custom-form {
 display: flex;
 flex-direction: column;
 gap: 20px
}

.custom-form input,
.custom-form textarea {
 border: unset;
 outline: unset;
 padding: 10px;
 border-bottom: 2px solid
}

.elementor-shape-fill {
 fill: var(--secondary)
}

#accordionFlushExample {
 border: 1px solid var(--black);
 margin-top: 20px
}

.accordion-button {
 padding-left: 50px;
 font-family: var(--font-body);
 transition: all .8s
}

.accordion-button::before {
 content: '\f055';
 font: var(--fa-font-solid);
 position: absolute;
 left: 15px
}

.accordion-button:not(.collapsed)::before {
 content: '\f056';
 font: var(--fa-font-solid)
}

.accordion-button:hover {
 z-index: unset;
 background: var(--secondary)
}

.accordion-button:focus {
 border-color: unset;
 box-shadow: unset
}

.accordion-button:not(.collapsed) {
 color: var(--white);
 background-color: var(--black);
 box-shadow: unset
}

.accordion-button::after {
 content: "\f078";
 background-image: unset;
 font: var(--fa-font-solid)
}

.accordion-button:not(.collapsed)::after {
 background-image: unset;
 content: '\f078';
 font: var(--fa-font-solid);
 transform: rotate(90deg)
}

footer {
 background: var(--black);
 padding: 150px 0 40px;
 position: relative
}

.pattern {
 margin-top: -160px
}

footer h2 {
 font-size: 60px;
 font-weight: 800;
 line-height: 70px;
 letter-spacing: 6.2px;
 color: var(--white)
}

footer p {
 color: var(--white)
}

.underline {
 border-bottom: 2px solid var(--primary);
 padding: 50px
}

.footer-link {
 color: var(--white)
}

.social {
 background: var(--primary);
 width: 45px;
 padding: 10px;
 font-size: 24px;
 border-radius: 100%
}

.insta {
 width: 45px
}

.copyright {
 color: var(--white) !important
}

.slick-slide {
 display: flex !important;
 justify-content: center;
 align-items: center
}

.intl-tel-input.allow-dropdown input,
.intl-tel-input.allow-dropdown input[type=tel],
.intl-tel-input.allow-dropdown input[type=text],
.intl-tel-input.separate-dial-code input,
.intl-tel-input.separate-dial-code input[type=tel],
.intl-tel-input.separate-dial-code input[type=text] {
 width: 100%
}

@media (max-width:992px) {
 #mainNav {
  background: var(--white)
 }

 #mainNav .nav-link {
  color: var(--black) !important
 }

 .btn-container {
  flex-direction: column
 }

 .hero {
  padding: 60px 0 40px
 }

 .hero h2 {
  font-size: 50px;
  font-weight: 800;
  line-height: 65px;
  letter-spacing: 4.5px;
  color: var(--white)
 }

 .small-heading {
  font-size: 44px;
  line-height: 40px
 }

 .nav.nav-tabs {
  flex-direction: column
 }

 .video-grid {
  grid-template-columns: 1fr
 }

 small {
  margin-bottom: 40px
 }

 .footer-row {
  gap: 20px
 }
}

.side-form {
 position: fixed;
 top: 0;
 right: -420px;
 width: 400px;
 max-width: 100%;
 height: 100%;
 background: #fff;
 z-index: 1000;
 padding: 30px;
 box-shadow: -2px 0 8px rgba(0, 0, 0, .3);
 transition: right .2s ease-in-out;
 overflow-y: auto
}

.side-form.open {
 right: 0
}

.side-form h2 {
 margin-top: 100px
}

.slide-tab {
 position: fixed;
 top: 50%;
 right: -20px;
 transform: translate(-50%, -50%);
 background-color: orange;
 color: #fff;
 font-weight: 700;
 padding: 12px 10px;
 border-radius: 6px 0 0 6px;
 cursor: pointer;
 z-index: 1002;
 text-align: center;
 box-shadow: -2px 2px 6px rgba(0, 0, 0, .2);
 writing-mode: vertical-rl;
 text-orientation: mixed;
 transition: all .3s
}

.close-btn {
 background: 0 0;
 border: none;
 font-size: 28px;
 color: #000;
 position: absolute;
 top: 15px;
 right: 20px;
 cursor: pointer
}

.client-box {
 padding: 20px;
 background: rgba(255, 255, 255, .85);
 box-shadow: 0 0 40px 1px #ccc
}

.client-box p {
 color: #000
}

.showImages {
 cursor: pointer
}

.image-container {
 position: fixed;
 top: -100%;
 left: 0;
 width: 100%;
 height: 50vh;
 background: #fff;
 transition: top .5s ease;
 z-index: 999;
 display: flex;
 flex-direction: column
}

.image-container.active {
 top: 0
}

.closeImage {
 position: absolute;
 top: 10px;
 right: 15px;
 background: 0 0;
 border: none;
 font-size: 28px;
 color: #000;
 cursor: pointer;
 z-index: 1000
}

.images {
 flex: 1;
 display: flex;
 align-items: center;
 overflow-x: auto;
 overflow-y: hidden;
 white-space: nowrap;
 padding: 60px 20px 20px
}

.images::-webkit-scrollbar {
 height: 8px
}

.images img {
 height: 100%;
 margin-right: 10px;
 flex-shrink: 0;
 border-radius: 5px;
 object-fit: cover
}

@media (max-width:768px) {
 .image-container {
  height: 40vh
 }
}

@media (max-width:480px) {
 .image-container {
  height: 30vh
 }
}

header {
 background-color: #fff;
 color: #fff;
 border-bottom: 1px solid #cccccc3b
}

header .row {
 height: 100px
}

.shape-box {
 position: absolute;
 top: 0;
 background: var(--primary);
 height: 60px;
 width: 45%;
 padding: 20px 30px;
 display: flex;
 justify-content: space-around;
 clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%)
}

.shape-box a {
 text-decoration: none;
 color: #fff
}

header i {
 color: var(--white) !important
}

.custom-bg {
 background: #1f4037;
 background: -webkit-linear-gradient(to right, #1f4037, #99f2c8);
 background: linear-gradient(to right, #1f4037, #99f2c8);
 color: #fff
}

.custom-br {
 border-radius: 15px
}

.text-justify {
 text-align: justify
}

.card.shadow.custom-br {
 height: 310px
}

p.card-text {
 height: 150px;
 overflow-y: scroll
}

.showcase-box {
 height: 400px;
 overflow: hidden
}

.showcase-img {
 object-fit: cover;
 object-position: 0 0;
 transition: object-position 3s ease-in-out
}

.showcase-box:hover .showcase-img {
 object-position: 0 -500px
}

@media (max-width:992px) {
 .web-hero h2 {
  color: var(--black)
 }
}

@media screen and (max-width:1024px) {
 .large-img {
  width: 100%;
  height: auto
 }
}

.web .custom-form input,
.web .custom-form textarea {
 border: unset;
 outline: unset;
 padding: 10px;
 border-bottom: 2px solid;
 background: #fff;
 border-bottom: 2px solid #000
}

.web input#ContactUsControl_btnSubmit {
 background: var(--primary)
}

.web .price-box {
 box-shadow: unset;
 padding: 20px;
 border-radius: 15px;
 background: linear-gradient(to right, #1f4037, #99f2c8)
}

.web .top-area .price {
 font-size: 46px;
 font-weight: 700;
 color: var(--white)
}

.web .card.shadow.custom-br {
 height: 310px;
 background: linear-gradient(to right, #1f4037, #99f2c8a8)
}

.web .slick-dots li button:before {
 opacity: .5;
 color: #fff
}

.web .slick-dots li.slick-active button:before {
 opacity: 1;
 color: var(--primary)
}

.web section#pkg {
 padding: 120px 0
}

.anim {
 animation: anim 10s linear infinite
}

@keyframes anim {

 0%,
 100% {
  transform: translateY(0) rotate(0)
 }

 50% {
  transform: translateY(-30px) rotate(5deg)
 }
}

.hero .overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .5);
 z-index: 0
}

.hero .content {
 position: relative;
 z-index: 1
}

#mainNav .nav-link:hover {
 color: var(--primary) !important
}