/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
   --primary-color: #F2B821;
   --secondary-color: #05213C;
   --black-color: #292929;
   --light-black-color: #343536;
   --dark-color: #313131;
   --body-color: #5A5A5A;
   --gray-color: #777F81;
   --light-color: #fdfdfd;
   --dark-blue: #0054a8;
   --color-valid: #f00;

   /* Bootstrap Theme Color  */
   --bs-gray-100: #F6F6F6;
   --bs-gray-300: #DCDCDC;
   --bs-primary-text-emphasis: var(--primary-color);
   --bs-body-color-rgb: 90, 90, 90;
   --bs-light-rgb: rgba(255, 255, 255, 1);
   --bs-dark-rgb: 41, 41, 41;
   --bs-primary-rgb: 178, 142, 113;
}

/* Fonts */
:root {
   --heading-font: "Poppins", sans-serif;
   --body-font: verdana, helvetica, "Poppins", sans-serif;
}

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

html {
   box-sizing: border-box;
}

body {
   background-color: var(--light-color);
   font-family: var(--body-font);
   font-size: 1.0rem;
   line-height: 175%;
   /*   font-size: 16px;
      font-weight: 400;
      line-height: 175%;*/
   /*   letter-spacing: 0.32px;*/
   color: var(--body-color);
   margin: 0;
}

p {
   color: var(--body-color);
}

a {
   color: inherit;
   text-decoration: none;
   transition: 0.3s ease-in-out;
}

a:hover {
   color: var(--primary-color);
}

.text-light {
   color: var(--light-color) !important;
}

.text-primary {
   color: var(--primary-color) !important;
}

.text-black {
   color: var(--black-color) !important;
}

.text-blue {
   color: var(--dark-blue) !important;
}

.bg-blue {
   background-color: var(--dark-blue) !important;
}

/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
   background-color: var(--light-color) !important;
}

.bg-primary {
   background-color: var(--primary-color) !important;
}

.bg-secondary {
   background-color: var(--secondary-color) !important;
}

.bg-gray {
   background-color: var(--bs-gray-100) !important;
}

/*--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
   padding-top: 5em;
   padding-bottom: 5em;
}

.padding-medium {
   padding-top: 10em;
   padding-bottom: 10em;
}

.padding-large {
   padding-top: 12em;
   padding-bottom: 12em;
}

@media only screen and (max-width: 990px) {
   .padding-small {
      padding-top: 6em;
      padding-bottom: 6em;
   }
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
   margin-top: 8.125em;
   margin-bottom: 8.125em;
}

.margin-medium {
   margin-top: 10em;
   margin-bottom: 10em;
}

.margin-large {
   margin-top: 12em;
   margin-bottom: 12em;
}

/* - Section Title
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
   color: var(--dark-color);
   font-family: var(--heading-font);
   text-transform: capitalize;
   font-weight: 600;
   /*   letter-spacing: 0.84px;*/
   line-height: 115%;
}

h6 {
   font-weight: 500;
   text-transform: uppercase;
   /*   letter-spacing: 0.3rem;*/
}

/* - Content width
--------------------------------------------------------------*/
.container-md {
   max-width: 1465px;
}

.container-lg {
   max-width: 1750px;
}

/* Animation */
@media (min-width: 200px) {
   .animate {
      animation-duration: 0.3s;
      -webkit-animation-duration: 0.3s;
      animation-fill-mode: both;
      -webkit-animation-fill-mode: both;
   }
}

/* Animate Slide */
@keyframes slide {
   0% {
      transform: translateY(1rem);
      opacity: 0;
   }

   100% {
      transform: translateY(0rem);
      opacity: 1;
   }

   0% {
      transform: translateY(1rem);
      opacity: 0;
   }
}

@-webkit-keyframes slide {
   0% {
      -webkit-transform: transform;
      -webkit-opacity: 0;
   }

   100% {
      -webkit-transform: translateY(0);
      -webkit-opacity: 1;
   }

   0% {
      -webkit-transform: translateY(1rem);
      -webkit-opacity: 0;
   }
}

.slide {
   -webkit-animation-name: slide;
   animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/

.btn {
   --bs-btn-padding-x: 2rem;
   --bs-btn-padding-y: 1rem;
   --bs-btn-font-size: 1rem;
   --bs-btn-font-weight: 500;
   text-transform: uppercase;
   border-radius: 0px;
   transition: all 0.5s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
   --bs-btn-color: var(--light-color);
   --bs-btn-bg: var(--primary-color);
   --bs-btn-border-color: var(--primary-color);
   --bs-btn-hover-color: var(--light-color);
   --bs-btn-hover-bg: var(--primary-color);
   --bs-btn-hover-border-color: var(--primary-color);
   --bs-btn-focus-shadow-rgb: 49, 132, 253;
   --bs-btn-active-color: var(--light-color);
   --bs-btn-active-bg: var(--primary-color);
   --bs-btn-active-border-color: var(--primary-color);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--light-color);
   --bs-btn-disabled-bg: var(--primary-color);
   --bs-btn-disabled-border-color: var(--primary-color);
}

/* - Button Hover Effect
--------------------------------------------------------------*/
.btn-slide.btn-bg {
   background-color: var(--light-color);
}

.btn-slide {
   position: relative;
   display: inline-block;
   border: none;
   cursor: pointer;
   background-color: var(--secondary-color);
}

.btn-slide.hover-slide-right::before {
   top: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 3%;
   position: absolute;
   content: "";
   background-color: var(--primary-color);
   transition: 0.3s ease-in-out;
}

.btn-slide span {
   position: relative;
   display: inline-block;
   top: 0;
   left: 0;
   width: 100%;
   transition: 0.3s;
   font-weight: 600;
}

.btn-slide.hover-slide-right:hover::before {
   width: 100%;
}

.btn-slide.hover-slide-right:hover span {
   color: var(--light-color);
}

/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
   text-transform: uppercase;
   font-weight: 500;
   color: var(--dark-color);
   font-family: var(--heading-font);
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
   color: var(--dark-color);
   background-color: var(--bs-gray-300);
}

.dropdown-toggle::after {
   border: none;
   margin-left: 0em;
   vertical-align: 0em;
}

/* Breadcrumb
------------------------------------------------------------- */
.breadcrumb-item+.breadcrumb-item::before {
   color: var(--bs-light);
   position: relative;
}

/* Pagination
------------------------------------------------------------- */
.pagination {
   --bs-pagination-color: var(--black-color);
   --bs-pagination-hover-color: #fff;
   --bs-pagination-hover-bg: var(--primary-color);
   --bs-pagination-hover-border-color: var(--primary-color);
   --bs-pagination-focus-color: #fff;
   --bs-pagination-focus-bg: var(--primary-color);
   --bs-pagination-focus-box-shadow: none;
   --bs-pagination-active-bg: var(--primary-color);
   --bs-pagination-active-border-color: var(--primary-color);
}

/* Accordion
------------------------------------------------------------- */
.accordion {
   --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
   --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
   --bs-accordion-border-radius: 0px;
}

.accordion-button:focus {
   box-shadow: none;
}

.accordion-button:not(.collapsed) {
   background-color: transparent;
   box-shadow: none;
}

/* Form
------------------------------------------------------------- */
.form-control:focus {
   border: 1px solid #acacac;
   box-shadow: none;
}

/* Swiper
------------------------------------------------------------- */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
   width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px));
   height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
   background: var(--dark-color);
}

/* Modal Video
------------------------------------------------------------- */
.modal-dialog {
   max-width: 800px;
   margin: auto;
   height: 100vh;
   display: flex;
   align-items: center;
}

.modal-content {
   padding: 0;
   background-color: #f5f3ef;
   border: none;
   border-radius: 0
}

/* 4.1 Header
/*----------------------------------------------*/
a.nav-link {
   text-transform: capitalize;
   font-weight: 500;
   color: var(--dark-color);
   font-family: var(--heading-font);
   transition: all 0.3s ease-in-out;
}

a.nav-link::after {
   content: "";
   text-align: center;
   display: block;
   width: 0;
   height: 2px;
   background: var(--primary-color);
   transition: width 0.9s;
}

a.nav-link.active::after,
a.nav-link:focus::after,
a.nav-link:hover::after {
   width: 100%;
   transition: width 0.9s;
}

#primary-header .dropdown .search::after {
   content: none;
}

#primary-header .search-dropdown .dropdown-menu {
   width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
   min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
   padding: 0 12px;
   min-height: -webkit-fill-available;
   border-radius: 0.25rem;
}

@media only screen and (max-width: 990px) {
   a.nav-link {
      font-size: 1.5rem;
   }

   a.nav-link.active::after,
   a.nav-link:focus::after,
   a.nav-link:hover::after {
      width: 0%;
   }

   a.nav-link.active,
   a.nav-link:focus,
   a.nav-link:hover {
      color: var(--primary-color) !important;
   }
}

/* 4.2 Brand Section
/*----------------------------------------------*/
img.brand-image {
   filter: contrast(0);
   transition: all 0.3s ease-in;
}

img.brand-image:hover {
   filter: contrast(1);
}

/* 4.3 About Section 
/*----------------------------------------------*/
svg.play-icon {
   animation: play 1.5s alternate infinite ease-in;
}

@keyframes play {
   0% {
      transform: scale(.8);
   }

   100% {
      transform: scale(1.1);
   }
}

/* 4.4 Services Section
/*----------------------------------------------*/
/* Jarallax */
.jarallax {
   min-height: 350px;
   transition: all 0.5s ease-in-out;
}

.service-block {
   transition: all 0.5s ease-in-out;
}

.service-block:hover .jarallax {
   opacity: 0;
}

.service-btn {
   transition: all 0.5s ease-in-out;
}

.service-block:hover .service-btn {
   color: var(--dark-color);
   background-color: var(--primary-color);
   border-color: var(--primary-color);
}

/* 4.5 Project Section
/*----------------------------------------------*/
.swiper-slide.swiper-width {
   width: auto !important;
}

.project-content .portfolio-img {
   transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-img {
   opacity: 0.3;
}

.portfolio-description {
   opacity: 0;
   transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-description {
   opacity: 1;
}

/* 4.6 CTA Section
/*----------------------------------------------*/
.border-dotted {
   border: 2px dashed rgba(255, 255, 255, 0.5);
}


/* 5.1 Projects Page
/*----------------------------------------------*/

button.filter-button {
   border: 0;
   background: transparent;
   text-transform: uppercase;
   transition: all 0.5s ease-in-out;
   border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
   color: var(--bs-light);
   background: var(--primary-color);
}

/*--------------------------------------------------------------
 5.2 Pricing page 
  --------------------------------------------------------------*/
.plan-post {
   border: 1px solid var(--secondary-color);
}

span.price-tick {
   color: var(--primary-color);
}

.price-option {
   height: 300px;
}

/*--------------------------------------------------------------
 5.3 Reviews page
--------------------------------------------------------------*/

.reviews-components {
   box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
}

iconify-icon.quote {
   font-size: 60px;
   color: var(--primary-color);
}

.rate {
   color: var(--primary-color);
}

.text-justify {
   text-align: justify;
}

.top-bgimg {
   background-image: url('/images/bg-dark.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.reset-text {
   letter-spacing: normal;  /* Resets to font default */
   letter-spacing: initial; /* Resets to browser default */
}

.form-control:required {
   border-color: #ffc6c6;
}

input:valid {
   border-color: var(--color-valid);
}

/* Modern browsers (Chrome, Safari, Firefox, Edge) */
input::placeholder {
   color: #ddd;
   opacity: 0.5;
}

/* Internet Explorer 10-11 */
input:-ms-input-placeholder {
   color: #ddd;
}

/* Microsoft Edge (Older versions) */
input::-ms-input-placeholder {
   color: #ddd;
}

.form-control::-webkit-input-placeholder{
   color:#6c757d;
   opacity:0.5;
}

.form-control::-moz-placeholder{
   color:#6c757d;
   opacity:0.5;
}

.form-control:-ms-input-placeholder{
   color:#6c757d;
   opacity:0.5;
}

.form-control::-ms-input-placeholder{
   color:#6c757d;
   opacity:0.5;
}

.form-control::placeholder{
   color:#6c757d;
   opacity:0.5;
}

.form-control:disabled,.form-control[readonly]{
   background-color:#e9ecef;
   opacity:0.5;
}

input[type=date]
.form-control,input[type=datetime-local].form-control,input[type=month].form-control,input[type=time]
.form-control{
   -webkit-appearance:none;
   -moz-appearance:none;
   appearance:none
}

select.form-control:-moz-focusring{
   color:transparent;
   text-shadow:0 0 0 #495057
}

select.form-control:focus::-ms-value{
   color:#495057;
   background-color:#fff
}

.form-control-file,.form-control-range{
   display:block;
   width:100%
}

.col-form-label{
   padding-top:calc(.375rem + 1px);
   padding-bottom:calc(.375rem + 1px);
   margin-bottom:0;
   font-size:inherit;
   line-height:1.5;
   font-weight:bold
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

/* Firefox */
input[type="number"] {
   -moz-appearance: textfield;
}

.select-readonly {
   pointer-events: none;    /* Stops mouse interaction */
   background-color: #eee;   /* Gives visual "locked" cue */
   touch-action: none;       /* Stops mobile touch interaction */
}