/******************************************************************
  Template Name: Dreams
  Description: Dreams wedding template
  Author: Colorib
  Author URI: https://colorlib.com/
  Version: 1.0
  Created: Colorib
******************************************************************/
/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Counter Section
7.  Team Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/
/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/
html,
body {
  height: 100%;
  font-family: "Josefin Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #111111;
  font-weight: 400;
  font-family: "Play", sans-serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 16px;
  font-family: "Josefin Sans", sans-serif;
  color: #adadad;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
}

.counter__item__text i {
    font-size: 40px;
    color: #B59410;
    margin-bottom: 10px;
    display: inline-block;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #fff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}


/*---------------------
  Helper CSS
-----------------------*/
.section-title {
  margin-bottom: 50px;
}
.section-title.center-title {
  text-align: center;
}
.section-title.center-title h2:after {
  right: 0;
  margin: 0 auto;
}
.section-title span {
  color: #FF5A00;
  display: block;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.section-title h2 {
  color: #FFFFFF;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 25px;
}
.section-title h2:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 70px;
  background: #FF5A00;
  content: "";
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 100px;
  padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */
.primary-btn {
  display: inline-block;
  font-size: 15px;
  font-family: "Play", sans-serif;
  font-weight: 700;
  padding: 14px 32px 12px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}
.primary-btn:hover:before {
  height: 100%;
  width: 100%;
}
.primary-btn:hover:after {
  height: 100%;
  width: 100%;
}
.primary-btn:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  width: 30px;
  border-left: 2px solid #FF5A00;
  border-top: 2px solid #FF5A00;
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}
.primary-btn:after {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  border-right: 2px solid #FF5A00;
  border-bottom: 2px solid #FF5A00;
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}

.site-btn{

    height:60px;
    width: 400px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
        90deg,
        #FF5A00,
        #8F00FF
    );

    font-size:16px;
    color: white;

    font-weight:700;

    letter-spacing:1px;

    transition:.4s ease;
}

.site-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 10px 30px rgba(143,0,255,0.35);
}

/* Preloder */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
/*---------------------
  Header
-----------------------*/
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9;
}

.header__logo {
  padding: 30px 0;
}
.header__logo a {
  display: inline-block;
}

.header__nav__option {
  text-align: right;
  padding: 28px 0px;
}

.header__nav__menu {
  display: inline-block;
  margin-right: 45px;
}
.header__nav__menu ul li {
  list-style: none;
  display: inline-block;
  margin-right: 45px;
  position: relative;
}
.header__nav__menu ul li.active a:after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.header__nav__menu ul li:hover a:after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.header__nav__menu ul li:hover .dropdown {
  top: 34px;
  opacity: 1;
  visibility: visible;
}
.header__nav__menu ul li:last-child {
  margin-right: 0;
}
.header__nav__menu ul li .dropdown {
  position: absolute;
  left: 0;
  top: 60px;
  width: 140px;
  background: #ffffff;
  text-align: left;
  padding: 2px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.header__nav__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}
.header__nav__menu ul li .dropdown li a {
  font-size: 14px;
  color: #111111;
  padding: 8px 20px;
  text-transform: capitalize;
}
.header__nav__menu ul li .dropdown li a:after {
  display: none;
}
.header__nav__menu ul li a {
  font-size: 15px;
  font-family: "Play", sans-serif;
  color: #ffffff;
  display: block;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
}
.header__nav__menu ul li a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #FF5A00;
  content: "";
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.header__nav__social {
  display: inline-block;
  position: relative;
  padding-left: 50px;
}

.header__nav__social:before {
  position: absolute;
  left: 0;
  top: 4px;
  height: 13px;
  width: 1px;
  background: rgba(225, 225, 225, 0.2);
  content: "";
}
.header__nav__social a {
  color: #ffffff;
  font-size: 15px;
  margin-right: 18px;
}
.header__nav__social a:last-child {
  margin-right: 0;
}

.slicknav_menu {
  display: none;
}

/*---------------------
  Hero
-----------------------*/
.hero {
  position: relative;
}
.hero__slider.owl-carousel .owl-item.active .hero__text span {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 45px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 15px;
}
.hero__slider.owl-carousel .owl-dots button {
  color: #adadad;
  font-size: 18px;
  font-family: "Play", sans-serif;
  margin-right: 16px;
  position: relative;
  display: inline-block;
}
.hero__slider.owl-carousel .owl-dots button.active {
  color: #ffffff;
}
.hero__slider.owl-carousel .owl-dots button.active:after {
  background: #ffffff;
  height: 2px;
}
.hero__slider.owl-carousel .owl-dots button:after {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
}
.hero__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}
.hero__item {
  height: 800px;
  padding-top: 220px;
}
.hero__text span {
  color: #ffffff;
  display: block;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.hero__text h2 {
  color: #ffffff;
  font-size: 60px;
  font-weight: 700;
  line-height: 70px;
  text-transform: uppercase;
  margin-bottom: 38px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.hero__text .primary-btn {
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}

/*---------------------
  Hero Contact Form
  — Slider ke bahar hai isliye slide change par reset nahi hoga
  — Background: hero ki set-bg image ka hi overlay use ho raha hai
-----------------------*/
.hero__contact-form {
  position: absolute;
  top: 50%;
  right: calc((100% - 1140px) / 2 + 15px);
  transform: translateY(-50%);
  width: 460px;

  z-index: 9999;

  /* REMOVE opacity:0 */
  opacity: 1;

  visibility: visible;
  display: block;
}

/* Jab slider ready ho jaye tab form show karo */
/* .hero__contact-form.is-visible {
  opacity: 1;
} */

.hero__contact-form__inner{

    background:
    linear-gradient(
        145deg,
        rgba(8,8,8,0.96),
        rgba(20,10,35,0.96)
    );

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 28px;

    padding: 30px 24px;

    overflow: hidden;

    position: relative;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.45),
    0 0 30px rgba(143,0,255,0.12);

    backdrop-filter: blur(18px);
}

.hero__contact-form__inner::before{

    content:"";

    position:absolute;
    inset:0;

    padding:1px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #FF5A00,
        #8F00FF,
        #00D5FF
    );

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events:none;
}

.form__label {
  color: #ffffff;
  font-size: 11px;
  font-family: "Play", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.6;
}

.form__title{

    font-size: 34px;

    line-height: 42px;

    font-weight: 800;

    text-transform: uppercase;

    background: linear-gradient(
        90deg,
        #ffffff,
        #FF5A00
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    border-bottom:none;

    margin-bottom:30px;
}

.form__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}

.form__row .form__group {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.form__group {
  margin-bottom: 12px;
}

.form__group input,
.form__group textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid linear-gradient(90deg, #FF5A00, #FF7B00);
  color: #ffffff;
  font-family: "Play", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 11px 14px;
  outline: none;
  -webkit-transition: border-color 0.3s, background 0.3s;
  -o-transition: border-color 0.3s, background 0.3s;
  transition: border-color 0.3s, background 0.3s;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}


.contact__form input,
.contact__form textarea{

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 14px;

    height: 60px;

    color:#ffffff;

    font-size:15px;

    padding: 0 20px;

    margin-bottom:18px;

    transition:.4s ease;
}

.contact__form textarea{
    height:160px;
    padding-top:18px;
}

.contact__form input:focus,
.contact__form textarea:focus{

    border-color:#8F00FF;

    box-shadow:
    0 0 20px rgba(143,0,255,0.18);

    background: rgba(255,255,255,0.06);
}

.form__group input::-webkit-input-placeholder,
.form__group textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-size: 11px;
}
.form__group input::-moz-placeholder,
.form__group textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-size: 11px;
}
.form__group input:-ms-input-placeholder,
.form__group textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-size: 11px;
}
.form__group input::placeholder,
.form__group textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-size: 11px;
}

.form__group input:focus,
.form__group textarea:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
}

.form__group textarea {
  height: 95px;
}

.form__submit {
  width: 100%;
    background: linear-gradient(90deg,#FF5A00,#8F00FF);
  color: #ffffff;
  border: none;
  padding: 13px 20px;
  font-family: "Play", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  -webkit-transition: background 0.3s, color 0.3s, -webkit-transform 0.2s;
  transition: background 0.3s, color 0.3s, -webkit-transform 0.2s;
  -o-transition: background 0.3s, color 0.3s, transform 0.2s;
  transition: background 0.3s, color 0.3s, transform 0.2s;
  border-radius: 0;
}

.form__submit:hover {
  background: linear-gradient(90deg,#8F00FF,#FF5A00);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}

.form__submit:active {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.form__success {
  display: none;
  text-align: center;
  padding: 13px;
  color: #ffffff;
  font-family: "Play", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.35);
  margin-top: 10px;
}
.hero {
  overflow: hidden;
}

.hero__slider,
.hero__slider .owl-stage-outer,
.hero__slider .owl-stage,
.hero__slider .owl-item {
  overflow: hidden !important;
}

/* Floating WhatsApp */

.floating-whatsapp {
  position: fixed;

  right: 25px;
  bottom: 25px;

  width: 62px;
  height: 62px;

  background: #25D366;
  color: #ffffff;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 34px;

  z-index: 999999;

  text-decoration: none;

  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);

  transition: all 0.3s ease;

  animation: whatsappPulse 2s infinite;
}

.floating-whatsapp:hover {
  transform: translateY(-5px) scale(1.08);

  color: #ffffff;

  box-shadow: 0 15px 40px rgba(37, 211, 102, 0.65);
}

/* Pulse Animation */

@keyframes whatsappPulse {

  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }

  70% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }

}

/* Mobile */

@media only screen and (max-width: 767px){

    .hero__contact-form{
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        background: linear-gradient(90deg,#FF5A00,#8F00FF);;

        transform: none;

        width: 100%;

        margin-top: 40px;
        padding: 0 15px;

        z-index: 1;
    }

    .hero__item{
        padding-bottom: 80px;
        height: auto;
    }

}

@media only screen and (max-width: 575px) {

  .floating-whatsapp {
    width: 56px;
    height: 56px;

    font-size: 30px;

    right: 18px;
    bottom: 18px;
  }

}
/*---------------------
  Responsive
-----------------------*/
@media (max-width: 1199px) {
  .hero__contact-form {
    right: 15px;
    width: 400px;
  }
}

/* ===================================
   MOBILE HERO FIX
=================================== */

@media only screen and (max-width: 991px){

    .hero{
        overflow: visible;
    }

    .hero__item{
        height: auto;
        padding-top: 140px;
        padding-bottom: 80px;
    }

    /* TEXT */

    .hero__text{
        text-align: center;
        margin-bottom: 40px;
    }

    .hero__text span{
        font-size: 12px;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }

    .hero__text h2{
        font-size: 42px;
        line-height: 52px;
        margin-bottom: 24px;
    }

    /* CONTACT FORM */

    .hero__contact-form{
        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        transform: none;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 0 15px;

        z-index: 1;
    }

    .hero__contact-form__inner{
        border-radius: 18px;
        padding: 30px 24px;
    }

    /* BUTTON */

    .site-btn{
        width: 100%;
    }

}
/* MOBILE LOGO */


/* MOBILE HERO TEXT */

@media only screen and (max-width: 767px){

    .hero__text{
        text-align: center;
        padding: 0 10px;
    }

    .hero__text span{
        font-size: 10px;
        letter-spacing: 2px;
        line-height: 18px;
    }

    .hero__text h2{
        font-size: 42px;
        line-height: 52px;
        margin-bottom: 24px;
    }

    .primary-btn{
        font-size: 13px;
        padding: 12px 24px;
    }

}

@media only screen and (max-width: 575px){

    .hero__item{
        padding-top: 120px;
    }

    .hero__text h2{
        font-size: 30px;
        line-height: 40px;
    }

    .hero__text span{
        font-size: 11px;
    }

    .hero__contact-form__inner{
        padding: 22px 18px;
    }

}
.work{
    background: #121212;
    padding: 100px 0;
}

/* GALLERY */

.work__gallery{
    display: grid;

    grid-template-columns: repeat(3, 380px);

    justify-content: center;

    gap: 100px; /* horizontal + vertical dono gap */
}

/* ITEM */

.work__item{
    width: 380px;
    height: 260px;

    overflow: hidden;
}

/* IMAGE */

.work__item img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}
/*==================================
  PREMIUM LUXURY TEAM SECTION
==================================*/

.team {
  position: relative;
  padding: 140px 0;
  overflow: hidden;

  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg,#050505 0%, #0B0715 45%, #12091F 100%);
}

/* Animated Spotlight */
.team::before{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  background: radial-gradient(circle, rgba(143,0,255,0.12), transparent 70%);
  top:-250px;
  right:-200px;
  animation: glowMove 8s ease-in-out infinite alternate;
}

.team::after{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  background: radial-gradient(circle, rgba(255,90,0,0.10), transparent 70%);
  bottom:-250px;
  left:-200px;
  animation: glowMove2 10s ease-in-out infinite alternate;
}

@keyframes glowMove{
  0%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(-60px,60px);
  }
}

@keyframes glowMove2{
  0%{
    transform: translate(0,0);
  }
  100%{
    transform: translate(80px,-40px);
  }
}

/* Title */

.section-title.team__title{
  text-align:center;
  margin-bottom:90px;
}

.section-title.team__title span{
  color:#FF5A00;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:14px;
  display:block;
  margin-bottom:15px;
}

.section-title.team__title h2{
  font-size:58px;
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:2px;
  position:relative;
  display:inline-block;
}

.section-title.team__title h2::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-16px;
  width:100px;
  height:4px;
  border-radius:30px;
  background:linear-gradient(90deg,#FF5A00,#8F00FF);
}

/*==================================
  TEAM CARD
==================================*/

.team__item{
  position:relative;
  height:460px;
  overflow:hidden;
  border-radius:28px;

  background-size:cover;
  background-position:center;

  border:1px solid rgba(255,255,255,0.08);

  transition:
    transform .6s cubic-bezier(.17,.84,.44,1),
    box-shadow .6s ease,
    border-color .6s ease;

  box-shadow:
    0 10px 35px rgba(0,0,0,0.45);

  isolation:isolate;
}

/* IMAGE ZOOM EFFECT */

.team__item::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.10),
      rgba(0,0,0,0.65)
    );

  z-index:1;

  transition:.5s ease;
}

/* LUXURY GLOW BORDER */

.team__item::after{
  content:"";
  position:absolute;
  inset:0;

  border-radius:28px;
  padding:1px;

  background:
    linear-gradient(
      135deg,
      rgba(255,90,0,0.9),
      rgba(143,0,255,0.9),
      rgba(0,213,255,0.9)
    );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  opacity:0;

  transition:.5s ease;
}

/* HOVER */

.team__item:hover{
  transform:
    translateY(-16px)
    scale(1.02);

  border-color:rgba(255,255,255,0.18);

  box-shadow:
    0 15px 40px rgba(0,0,0,0.55),
    0 0 35px rgba(143,0,255,0.18),
    0 0 60px rgba(255,90,0,0.12);
}

/* IMAGE SHOULD STAY VISIBLE */

.team__item:hover::before{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.05),
      rgba(0,0,0,0.55)
    );
}

.team__item:hover::after{
  opacity:1;
}

@keyframes borderGlow{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}

/* Hover Effects */

.team__item:hover{
  transform:
    translateY(-18px)
    rotateX(4deg)
    rotateY(-4deg)
    scale(1.02);

  border-color:rgba(143,0,255,0.4);

  box-shadow:
    0 0 25px rgba(143,0,255,0.25),
    0 0 60px rgba(255,90,0,0.15);
}

.team__item:hover::after{
  opacity:1;
}

/* Stagger Layout */

.team__item.team__item--second{
  margin-top:-50px;
}

.team__item.team__item--third{
  margin-top:-100px;
}

.team__item.team__item--four{
  margin-top:-150px;
}

/*==================================
  TEXT AREA
==================================*/

.team__item__text{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  z-index:2;

  padding:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02),
      rgba(255,255,255,0.06)
    );

  backdrop-filter:blur(12px);

  border-top:1px solid rgba(255,255,255,0.08);

  transition:.5s ease;
}

/* HOVER TEXT EFFECT */

.team__item:hover .team__item__text{
  padding-bottom:36px;
  backdrop-filter:blur(18px);
}



/* Name */

.team__item__text h4{
  font-size:24px;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;

  transition:.4s ease;
}

.team__item:hover .team__item__text h4{
  color:#ffffff;
  letter-spacing:1px;
}

/* Role */

.team__item__text p{
  color:#d0d0d0;
  font-size:15px;
  margin:0;

  transition:.4s ease;
}

.team__item:hover .team__item__text p{
  color:#ffffff;
}
.team__item .shine{
  position:absolute;
  top:-120%;
  left:-40%;
  width:60%;
  height:300%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.15),
      transparent
    );

  transform:rotate(25deg);

  z-index:2;

  transition:1s;
}

.team__item:hover .shine{
  left:130%;
}

/*==================================
  MOBILE
==================================*/

@media only screen and (max-width:991px){

  .team{
    padding:90px 0;
  }

  .section-title.team__title h2{
    font-size:40px;
  }

  .team__item{
    height:400px;
    margin-bottom:30px;
  }

  .team__item.team__item--second,
  .team__item.team__item--third,
  .team__item.team__item--four{
    margin-top:0;
  }
}


/*==================================
  PREMIUM LATEST / BLOG SECTION
==================================*/

.latest{
  position:relative;
  overflow:hidden;
  padding:130px 0 100px;

  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.15), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.10), transparent 25%),
    linear-gradient(180deg,#050505 0%, #0B0715 45%, #12091F 100%);
}

/* Animated Glow */

.latest::before{
  content:"";
  position:absolute;
  width:700px;
  height:700px;

  background:
    radial-gradient(circle, rgba(143,0,255,0.10), transparent 70%);

  top:-250px;
  right:-220px;

  animation: latestGlow 8s ease-in-out infinite alternate;
}

.latest::after{
  content:"";
  position:absolute;
  width:600px;
  height:600px;

  background:
    radial-gradient(circle, rgba(255,90,0,0.08), transparent 70%);

  bottom:-250px;
  left:-180px;

  animation: latestGlow2 10s ease-in-out infinite alternate;
}

@keyframes latestGlow{
  0%{
    transform:translate(0,0);
  }
  100%{
    transform:translate(-60px,60px);
  }
}

@keyframes latestGlow2{
  0%{
    transform:translate(0,0);
  }
  100%{
    transform:translate(80px,-40px);
  }
}

/*==================================
  SECTION TITLE
==================================*/

.section-title.center-title{
  text-align:center;
  margin-bottom:80px;
}

.section-title.center-title span{
  color:#FF5A00;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:14px;
  display:block;
  margin-bottom:15px;
}

.section-title.center-title h2{
  font-size:58px;
  font-weight:800;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:2px;
  position:relative;
  display:inline-block;
}

.section-title.center-title h2::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-16px;

  width:100px;
  height:4px;

  border-radius:30px;

  background:
    linear-gradient(90deg,#FF5A00,#8F00FF);
}

/*==================================
  SLIDER FIX
==================================*/

.latest__slider .owl-item{
  padding:15px;
}

.latest__slider .col-lg-4{
  width:100% !important;
  max-width:100% !important;
  flex:0 0 100% !important;
}

.latest__slider.owl-carousel .owl-stage{
  display:flex;
}

.latest__slider.owl-carousel .owl-item{
  display:flex;
  height:auto;
}

/*==================================
  BLOG CARD
==================================*/

.blog__item.latest__item{
  position:relative;
  overflow:hidden;

  width:100%;
  display:block;

  min-height:420px;

  padding:40px 35px;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.05)
    );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(14px);

  transition:all .5s ease;

  isolation:isolate;

  margin:0;
}





/* Dark Overlay */

.blog__item.latest__item::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.65) 10%,
      rgba(0,0,0,0.88) 100%
    );

  z-index:-1;

  transition:0.5s ease;
}

/* Hover Effect */

.blog__item.latest__item:hover{

  transform:
    translateY(-14px)
    scale(1.02);

  border-color:rgba(143,0,255,0.35);

  box-shadow:
    0 0 25px rgba(143,0,255,0.18),
    0 0 50px rgba(255,90,0,0.10);
}

/* Show Image */

.blog__item.latest__item:hover::before{
  opacity:1;
}

/* Image Clear on Hover */

.blog__item.latest__item:hover::after{
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.30) 10%,
      rgba(0,0,0,0.70) 100%
    );
}

/*==================================
  TITLE
==================================*/

.blog__item.latest__item h4{
  font-size:28px;
  line-height:1.4;
  font-weight:700;
  color:#fff;
  margin-bottom:25px;

  transition:0.4s ease;

  word-break:normal;
  overflow-wrap:normal;
}

/*==================================
  CATEGORY TAGS
==================================*/

.blog__item.latest__item ul{
  margin-bottom:22px;
}

.blog__item.latest__item ul li{
  display:inline-block;

  padding:8px 18px;
  margin-right:10px;
  margin-bottom:10px;

  border-radius:30px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  color:#d7d7d7;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* Remove old slash */

.blog__item.latest__item ul li::after{
  display:none;
}

/*==================================
  PARAGRAPH
==================================*/

.blog__item.latest__item p{
  color:#cfcfcf;
  font-size:16px;
  line-height:1.8;
  margin-bottom:28px;

  word-break:normal;
  overflow-wrap:normal;
}

/*==================================
  BUTTON
==================================*/

.blog__item.latest__item a{
  position:relative;

  display:inline-flex;
  align-items:center;

  color:#fff;
  font-weight:600;

  transition:0.4s ease;

  word-break:normal;
}

/* Arrow */

.blog__item.latest__item a span{
  margin-left:10px;
}

/* Hover Button */

.blog__item.latest__item:hover a{
  color:#FF5A00;
}

/*==================================
  OWL DOTS
==================================*/

.latest__slider.owl-carousel .owl-dots{
  text-align:center;
  padding-top:50px;
}

.latest__slider.owl-carousel .owl-dots button{
  width:12px;
  height:12px;

  border-radius:50%;

  background:rgba(255,255,255,0.25);

  margin:0 8px;

  transition:0.4s ease;
}

.latest__slider.owl-carousel .owl-dots button.active{
  width:38px;

  border-radius:20px;

  background:
    linear-gradient(90deg,#FF5A00,#8F00FF);
}

/*==================================
  MOBILE
==================================*/

@media only screen and (max-width:991px){

  .latest{
    padding:90px 0;
  }

  .section-title.center-title h2{
    font-size:40px;
  }

  .blog__item.latest__item{
    min-height:auto;
    padding:30px;
  }

  .blog__item.latest__item h4{
    font-size:24px;
  }
}
/*---------------------
  Call To Active
-----------------------*/
.callto {
  padding-top: 130px;
}
.callto.sp__callto {
  padding-top: 0;
  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg, #050505 0%, #0A0A12 50%, #12091F 100%);
}

.callto__text h2 {
  color: #ffffff;
  font-size: 42px;
  font-weight: 700;
  line-height: 55px;
  margin-bottom: 22px;
}
.callto__text p {
  font-size: 15px;
  color: #ffffff;
  opacity: 0.7;
  text-transform: uppercase;
  margin-bottom: 55px;
}
.callto__text a {
  color: #ffffff;
  background: #FF5A00;
  font-size: 15px;
  font-weight: 700;
  font-family: "Play", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  padding: 14px 32px 12px;
}

/*---------------------
  Footer
-----------------------*/
.footer {
  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg, #050505 0%, #0A0A12 50%, #12091F 100%);
}

.footer__top {
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__top__logo {
  line-height: 40px;
}
.footer__top__logo a {
  display: inline-block;
}

.footer__top__social {
  text-align: right;
}
.footer__top__social a {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  height: 40px;
  width: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  line-height: 44px;
  text-align: center;
  margin-right: 6px;
}
.footer__top__social a:hover{
  background-color: #FF5A00;
}
.footer__top__social a:last-child {
  margin-right: 0;
}

.footer__option {
  padding-bottom: 35px;
  padding-top: 75px;
}

.footer__option__item {
  margin-bottom: 35px;
}
.footer__option__item h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 35px;
}
.footer__option__item p {
  font-weight: 300;
  margin-bottom: 20px;
}
.footer__option__item .read__more {
  font-size: 16px;
  color: #ffffff;
}
.footer__option__item .read__more span {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}
.footer__option__item ul li {
  list-style: none;
}
.footer__option__item ul li a {
  color: #adadad;
  font-size: 16px;
  font-weight: 300;
  line-height: 32px;
}
.footer__option__item form {
  position: relative;
}
.footer__option__item form input {
  height: 50px;
  width: 100%;
  padding-left: 20px;
  border: 1px solid #544E5E;
  background: transparent;
  font-size: 16px;
  color: #adadad;
}
.footer__option__item form input::-webkit-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::-moz-placeholder {
  color: #adadad;
}
.footer__option__item form input:-ms-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::-ms-input-placeholder {
  color: #adadad;
}
.footer__option__item form input::placeholder {
  color: #adadad;
}
.footer__option__item form button {
  font-size: 20px;
  color: #ffffff;
  border: none;
  height: 50px;
  width: 50px;
  background: #FF5A00;
  line-height: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}

.footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
}

.footer__copyright__text {
  margin-bottom: 0;
  font-weight: 300;
}
.footer__copyright__text i {
  color: #00bfe7;
}
.footer__copyright__text a {
  color: #00bfe7;
}

/*---------------------
  Breadcrumb
-----------------------*/
.breadcrumb-option {
  padding-top: 180px;
}

.breadcrumb__text h2 {
  color: #ffffff;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 12px;
}

.breadcrumb__links a {
  font-size: 16px;
  color: #ffffff;
  font-weight: 300;
  display: inline-block;
  margin-right: 32px;
  position: relative;
}
.breadcrumb__links a:after {
  position: absolute;
  right: -22px;
  top: -3px;
  content: "/";
  color: #adadad;
  font-size: 20px;
}
.breadcrumb__links span {
  font-size: 16px;
  color: #adadad;
  font-weight: 300;
  display: inline-block;
}

/*==================================
  CLEAN LUXURY ABOUT SECTION
==================================*/

/*==================================================
    MOBILE PREMIUM MENU
==================================================*/

@media only screen and (max-width: 767px){

    /* HEADER */

    .header{
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        padding: 25px 0;
    }

    /* LOGO */

    .header__logo{
        position: relative;
        z-index: 99999;
    }

    .header__logo img{
        width: 90px;
        height: auto;
    }

    /* MENU BUTTON */

    .slicknav_menu{
        background: transparent;
        padding: 0;
    }

    .slicknav_btn{

        position: absolute;

        right: 20px;
        top: 10px;

        z-index: 99999;

        background:
        linear-gradient(
        135deg,
        #ff5a00,
        #ff7b00
        );

        border-radius: 14px;

        padding: 10px 16px;

        box-shadow:
        0 0 25px rgba(255,90,0,0.35);

        transition: 0.3s;
    }

    .slicknav_btn:hover{

        transform: translateY(-2px);

        box-shadow:
        0 0 35px rgba(255,90,0,0.45);
    }

    /* MENU BOX */

    .slicknav_nav{

        position: absolute;

        top: 95px;
        left: 50%;

        transform: translateX(-50%);

        width: calc(100% - 40px);

        padding: 18px;

        border-radius: 28px;

        background:
        linear-gradient(
        145deg,
        rgba(15,15,15,0.96),
        rgba(20,20,20,0.92)
        );

        backdrop-filter: blur(20px);

        border: 1px solid rgba(255,255,255,0.08);

        overflow: hidden;

        box-shadow:
        0 0 40px rgba(123,0,255,0.16),
        0 0 40px rgba(255,90,0,0.10);

    }

    /* GLOW BORDER */

    .slicknav_nav::before{

        content: "";

        position: absolute;

        inset: 0;

        padding: 1px;

        border-radius: 28px;

        background:
        linear-gradient(
        90deg,
        #7b00ff,
        #ff5a00
        );

        -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

        -webkit-mask-composite: xor;

        opacity: 0.7;

        pointer-events: none;
    }

    /* MENU UL */

    .slicknav_nav ul{
        margin: 0;
        padding: 0;
    }

    /* MENU LINKS */

    .slicknav_nav a,
    .slicknav_nav .slicknav_row{

        position: relative;

        display: flex;
        align-items: center;

        padding: 18px 20px;

        margin-bottom: 12px;

        border-radius: 18px;

        color: #ffffff;

        font-size: 20px;

        font-weight: 700;

        letter-spacing: 0.5px;

        transition: 0.35s;

        background:
        rgba(255,255,255,0.02);

        border: 1px solid rgba(255,255,255,0.04);
    }

    /* HOVER */

    .slicknav_nav a:hover,
    .slicknav_nav .slicknav_row:hover{

        color: #ff5a00;

        background:
        linear-gradient(
        90deg,
        rgba(123,0,255,0.10),
        rgba(255,90,0,0.10)
        );

        border-color:
        rgba(255,90,0,0.30);

        transform: translateX(6px);
    }

    /* REMOVE LAST GAP */

    .slicknav_nav li:last-child a{
        margin-bottom: 0;
    }

}


.about{
  position:relative;
  overflow:hidden;
  padding:140px 0;

  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.10), transparent 25%),
    linear-gradient(180deg,#050505 0%, #0A0A12 50%, #12091F 100%);
}

/* Glow */

.about::before{
  content:"";
  position:absolute;
  width:700px;
  height:700px;

  background:
    radial-gradient(circle, rgba(143,0,255,0.10), transparent 70%);

  top:-250px;
  right:-200px;
}

.about::after{
  content:"";
  position:absolute;
  width:600px;
  height:600px;

  background:
    radial-gradient(circle, rgba(255,90,0,0.08), transparent 70%);

  bottom:-250px;
  left:-180px;
}

/*==================================
  CONTENT
==================================*/

.about__text{
  position:relative;
  z-index:2;
}

/* Small Title */

.about__text .section-title span{
  color:#FF5A00;
  font-size:14px;
  letter-spacing:4px;
  text-transform:uppercase;

  display:block;
  margin-bottom:20px;
}

/* Main Heading */

.about__text .section-title h2{
  color:#fff;
  font-size:68px;
  line-height:1.15;
  font-weight:800;
  text-transform:uppercase;

  margin-bottom:40px;

  position:relative;
}

/* Line */

.about__text .section-title h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-18px;

  width:110px;
  height:4px;

  border-radius:30px;

  background:
    linear-gradient(90deg,#FF5A00,#8F00FF);
}

/* Paragraph */

.about__text__desc{
  max-width:900px;
  margin-top:60px;
}

.about__text__desc p{
  color:#d0d0d0;
  font-size:19px;
  line-height:2;
  margin-bottom:25px;
}

/* Experience */

.about__experience{
  margin-top:45px;
}

.about__experience h3{
  font-size:70px;
  font-weight:800;

  margin-bottom:10px;

  background:
    linear-gradient(90deg,#FF5A00,#8F00FF);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.about__experience p{
  color:#cfcfcf;
  font-size:18px;
  line-height:1.9;
}

/*==================================
  MOBILE
==================================*/

@media only screen and (max-width:991px){

  .about{
    padding:90px 0;
  }

  .about__text .section-title h2{
    font-size:42px;
  }

  .about__text__desc p{
    font-size:16px;
    line-height:1.8;
  }

  .about__experience h3{
    font-size:54px;
  }
}
/*---------------------
  Testimonial
-----------------------*/
.testimonial {
  padding-bottom: 60px;
}

.testimonial__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}
.testimonial__slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 35px;
}
.testimonial__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}
.testimonial__slider.owl-carousel .owl-dots button.active {
  background: #00bfe7;
}
.testimonial__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.testimonial__text {
  padding: 30px 40px 25px 30px;
  border: 1px solid #FF5A00 ;
  margin-bottom: 25px;
  position: relative;
  z-index: 9;
}
.testimonial__text P {
  color: #ffffff;
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  line-height: 30px;
  margin-bottom: 0;
}

.testimonial__author {
  padding-left: 30px;
}

.testimonial__author__pic {
  float: left;
  margin-right: 20px;
}
.testimonial__author__pic img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.testimonial__author__text {
  overflow: hidden;
}
.testimonial__author__text h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 8px;
}
.testimonial__author__text span {
  color: #ffffff;
  font-size: 14px;
  font-weight: 300px;
  display: inline-block;
}

/*---------------------
  Services
-----------------------*/
.services {
  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg, #050505 0%, #0A0A12 50%, #12091F 100%);
  padding-bottom: 60px;
  padding-top: 110px;
}

.services__title p {
  margin-bottom: 45px;
  color: #B8B8C0;
}


.services__item {
  margin-bottom: 45px;
}
.services__item:hover .services__item__icon:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
}
.services__item h4 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-top: 26px;
  margin-bottom: 18px;
}
.services__item p {
  margin-bottom: 0;
}

.services__item__icon {
  position: relative;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
}
.services__item__icon:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255,255,255,0.15);
  content: "";
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.services__item__icon i {
    color: #FF5A00;
    font-size: 28px;
}
.services__item__icon {
    background: #fff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.services__item__icon i {
    color: #FF5A00;
    font-size: 26px;
    text-shadow: 0 0 10px rgba(247, 237, 182, 0.074);
}

/*---------------------
  Services Page
-----------------------*/
.services-page {
  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg, #050505 0%, #0A0A12 50%, #12091F 100%);
  padding-bottom: 50px;
}

/*---------------------
  Logo
-----------------------*/
.logo {
  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg, #050505 0%, #0A0A12 50%, #12091F 100%);
  padding: 100px 20px;
}

.logo__carousel.owl-carousel .owl-item img {
  width: auto;
  display: inline-block;
}

/*---------------------
  Portfolio
-----------------------*/
.portfolio {
  
  background:
    radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg, #050505 0%, #0A0A12 50%, #12091F 100%);
}


.portfolio__filter {
  text-align: center;
  margin-bottom: 40px;
}
.portfolio__filter li {
  list-style: none;
  font-size: 16px;
  color: #adadad;
  margin-right: 5px;
  display: inline-block;
  cursor: pointer;
  padding: 6px 22px;
}
.portfolio__filter li.active {
  border: 1px solid #B59410;
}
.portfolio__filter li:last-child {
  margin-right: 0;
}

.portfolio__item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 20px;
  transition: 0.4s ease;
  backdrop-filter: blur(10px);
}
.portfolio__item:hover .portfolio__item__text h4:after {
  opacity: 1;
}
.portfolio__item:hover {
  transform: translateY(-8px);
  border-color: rgba(143,0,255,0.4);
  box-shadow:
    0 0 25px rgba(143,0,255,0.15),
    0 0 40px rgba(255,90,0,0.08);
}
.portfolio__filter li.active {
  background: linear-gradient(90deg,#FF5A00,#8F00FF);
  border: none;
  color: white;
  border-radius: 30px;
}
.portfolio__item__video {
  height: 240px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 28px;
      background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.portfolio__item__video .play-btn {
  display: inline-block;
  color: #ffffff;
  font-size: 20px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.portfolio__item__text {
  text-align: center;
}
.portfolio__item__text h4 {
  color: #ffffff;
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}
.portfolio__item__text h4:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #333;
  content: "";
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  opacity: 0;
}
.portfolio__item__text ul li {
  list-style: none;
  display: inline-block;
  font-size: 16px;
  font-weight: 300;
  margin-right: 24px;
  position: relative;
  color: #adadad;
}
.portfolio__item__text ul li:after {
  position: absolute;
  right: -16px;
  top: 0;
  content: "/";
}
.portfolio__item__text ul li:last-child {
  margin-right: 0;
}
.portfolio__item__text ul li:last-child:after {
  display: none;
}
.portfolio__item__text span {
  font-size: 16px;
  font-weight: 300;
  color: #adadad;
  display: block;
}

.pagination__option {
  text-align: center;
  padding-top: 20px;
}
.pagination__option.blog__pagi {
  padding-top: 5px;
}
.pagination__option .arrow__pagination {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  text-transform: uppercase;
}
.pagination__option .arrow__pagination.left__arrow {
  margin-right: 26px;
}
.pagination__option .arrow__pagination.right__arrow {
  margin-left: 18px;
}
.pagination__option .arrow__pagination span {
  opacity: 0.5;
}
.pagination__option .number__pagination {
  font-size: 18px;
  color: #ffffff;
  height: 50px;
  width: 50px;
  background: rgba(242, 242, 242, 0.1);
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
}

/*---------------------
    Blog
-----------------------*/
.blog {
  background: #121212;
}

/* base */
.blog__item {
  border: 1px solid #222;
  padding: 40px 48px 35px 30px;
  position: relative;
  z-index: 1;
  margin-bottom: 45px;
  transition: 0.4s;
}

/* smooth hover effect */
.blog__item:hover {
  border: 1px solid transparent !important;
  transform: translateY(-5px);
  
}



/* text visibility on hover */
.blog__item:hover h4,
.blog__item:hover p,
.blog__item:hover ul li,
.blog__item:hover a {
  color: #fff !important;
}
.blog__item:hover ul li {
  color: #ffffff;
}
.blog__item:hover p {
  color: #ffffff;
}
.blog__item h4 {
  color: #ffffff;
  font-weight: 700;
  line-height: 31px;
  margin-bottom: 18px;
}
.blog__item ul {
  margin-bottom: 20px;
}
.blog__item ul li {
  color: #777777;
  list-style: none;
  font-size: 14px;
  font-weight: 300;
  margin-right: 25px;
  position: relative;
  display: inline-block;
}
.blog__item ul li:after {
  position: absolute;
  right: -16px;
  top: 0px;
  content: "/";
}
.blog__item ul li:last-child {
  margin-right: 0;
}
.blog__item ul li:last-child:after {
  display: none;
}
.blog__item p {
  font-weight: 300;
  line-height: 29px;
  margin-bottom: 22px;
}
.blog__item a {
  font-size: 16px;
  color: #ffffff;
}
.blog__item a span {
  font-size: 16px;
  color: #ffffff;
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}

/*---------------------
  Blog Details Hero
-----------------------*/
.blog-hero {
  padding: 300px 0 230px;
}

.blog__hero__text {
  text-align: center;
}
.blog__hero__text h2 {
  color: #ffffff;
  font-weight: 700;
  line-height: 47px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.blog__hero__text ul li {
  font-size: 14px;
  color: #ffffff;
  font-weight: 300;
  list-style: none;
  display: inline-block;
  margin-right: 25px;
  position: relative;
}
.blog__hero__text ul li:after {
  position: absolute;
  right: -18px;
  top: 0;
  content: "/";
}
.blog__hero__text ul li:last-child {
  margin-right: 0;
}
.blog__hero__text ul li:last-child:after {
  display: none;
}
.blog__hero__text ul li span {
  text-transform: uppercase;
}

/*---------------------
  Blog Details
-----------------------*/
.blog-details {
  background: #121212;
}

.blog__details__text {
  margin-bottom: 30px;
}
.blog__details__text p {
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
}
.blog__details__text p:last-child {
  margin-bottom: 0;
}

.blog__details__quote {
  border: 1px solid rgba(225, 225, 225, 0.8);
  padding: 35px 90px 35px 40px;
  position: relative;
  margin-bottom: 35px;
}
.blog__details__quote p {
  font-size: 22px;
  font-weight: 300;
  line-height: 35px;
  font-style: italic;
  margin-bottom: 10px;
}
.blog__details__quote h6 {
  font-size: 15px;
  color: #adadad;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
}
.blog__details__quote i {
  font-size: 36px;
  color: #00bfe7;
  position: absolute;
  right: 30px;
  bottom: 25px;
}

.blog__details__desc {
  margin-bottom: 50px;
}
.blog__details__desc p {
  font-size: 18px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
}
.blog__details__desc p:last-child {
  margin-bottom: 0;
}

.blog__details__tags {
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 65px;
}
.blog__details__tags span {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  font-weight: 300;
  margin-right: 25px;
}
.blog__details__tags a {
  font-size: 16px;
  font-weight: 300;
  color: #ffffff;
  display: inline-block;
  margin-right: 11px;
  padding: 8px 15px 7px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.blog__details__option {
  margin-bottom: 40px;
}

.blog__details__option__item {
  margin-bottom: 30px;
  overflow: hidden;
  display: block;
}
.blog__details__option__item h5 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.blog__details__option__item h5 i {
  font-size: 18px;
  margin-right: 5px;
}
.blog__details__option__item.blog__details__option__item--right h5 {
  text-align: right;
}
.blog__details__option__item.blog__details__option__item--right h5 i {
  margin-right: 0;
  margin-left: 5px;
}
.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__img {
  float: right;
  margin-right: 0;
  margin-left: 25px;
}
.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__text {
  margin-right: 25px;
  text-align: right;
  float: none;
}

.blog__details__option__item__img {
  float: left;
  margin-right: 25px;
}

.blog__details__option__item__text {
  overflow: hidden;
}
.blog__details__option__item__text h6 {
  color: #ffffff;
  line-height: 21px;
  font-weight: 700;
  margin-bottom: 5px;
}
.blog__details__option__item__text span {
  font-size: 14px;
  color: #777777;
  font-weight: 300;
}

.blog__details__recent {
  margin-bottom: 60px;
}
.blog__details__recent h4 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}

.blog__details__recent__item {
  margin-bottom: 30px;
}
.blog__details__recent__item img {
  min-width: 100%;
  margin-bottom: 20px;
}
.blog__details__recent__item h5 {
  color: #ffffff;
  font-weight: 700;
  line-height: 23px;
  margin-bottom: 4px;
}
.blog__details__recent__item span {
  color: #777777;
  font-size: 14px;
  font-weight: 300;
}

.blog__details__comment h4 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}
.blog__details__comment form textarea {
  height: 120px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
}
.blog__details__comment form textarea:placeholder {
  color: #adadad;
}

.input__list {
  margin-right: -20px;
  overflow: hidden;
}
.input__list input {
  height: 50px;
  width: calc(33.33% - 20px);
  float: left;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 16px;
  color: #adadad;
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
}
.input__list input:placeholder {
  color: #adadad;
}

/*---------------------
  Contact Widget
-----------------------*/
.contact-widget {
  background: radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg, #050505 0%, #0A0A12 50%, #12091F 100%);;
  padding-bottom: 70px;
}

.contact__widget__item {
  margin-bottom: 30px;
}

.contact__widget__item__icon {
  height: 70px;
  width: 70px;
  border: 1px solid rgba(225, 225, 225, 0.5);
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  float: left;
  margin-right: 30px;
}
.contact__widget__item__icon i {
  font-size: 30px;
  color: #ffffff;
}

.contact__widget__item__text {
  overflow: hidden;
  padding-top: 7px;
}
.contact__widget__item__text h4 {
  font-size: 22px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}
.contact__widget__item__text p {
  margin-bottom: 0;
}

/*---------------------
  Contact
-----------------------*/
.contact {
  background: radial-gradient(circle at top right, rgba(143,0,255,0.18), transparent 30%),
    radial-gradient(circle at bottom left, rgba(255,90,0,0.12), transparent 25%),
    linear-gradient(180deg, #050505 0%, #0A0A12 50%, #12091F 100%);;
  padding-top: 30;
  overflow: hidden;
}

.contact__map {
  height: 450px;
}
.contact__map iframe {
  width: 100%;
}

.contact__form h3 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
}
.contact__form form input {
  height: 50px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 20px;

  color: #ffffff;
  padding-left: 20px;
  font-weight: bold;
  margin-right: 20px;
  margin-bottom: 20px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.contact__form form input:placeholder {
  color: #adadad;
}
.contact__form form input:focus {
  border-color: #e1e1e1;
}
.contact__form form textarea {
  height: 110px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 20px;
  color: #ffffff;
  padding-top: 12px;
  padding-left: 20px;
  font-weight: bold;
  margin-bottom: 14px;
  resize: none;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.contact__form form textarea:placeholder {
  color: #adadad;
}
.contact__form form textarea:focus {
  border-color: #e1e1e1;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}
/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav__menu {
    margin-right: 25px;
  }

  .header__nav__menu ul li {
    margin-right: 25px;
  }

  .header__nav__social {
    padding-left: 25px;
  }
  .header__nav__social ul li:hover{
    background-color: #B59410;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0px 145px 0 50px;
  }

  .counter__item.second__item {
    margin-top: -210px;
  }

  .counter__item.four__item {
    margin-top: -210px;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: 930px !important;
  }
}
/* Tablet Device = 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider.owl-carousel .owl-dots {
    max-width: 690px !important;
  }

  .services__title {
    margin-bottom: 50px;
  }

  .counter__item {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
    margin-bottom: 30px;
    width: auto;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0;
  }

  .counter__item.second__item {
    margin-top: 0;
  }

  .counter__item.four__item {
    margin-top: 0;
  }

  .counter__item__text {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
  }

  .counter {
    height: auto;
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 0;
  }

  .team__item.team__item--four {
    margin-top: 0;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .portfolio__filter li {
    padding: 6px 15px;
  }

  

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }
}
/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
  .services__title {
    margin-bottom: 50px;
  }

  .counter__item {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
    margin-bottom: 30px;
    width: auto;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0;
  }

  .counter__item.second__item {
    margin-top: 0;
  }

  .counter__item.four__item {
    margin-top: 0;
  }

  .counter__item__text {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
  }

  .counter {
    height: auto;
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 0;
  }

  .team__item.team__item--four {
    margin-top: 0;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: auto;
    padding: 0 15px;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 10px 30px;
  }

  .slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: #ffffff;
    font-weight: 600;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav {
    background: #222222;
  }

  .slicknav_btn {
    position: absolute;
    right: 10px;
    top: 26px;
    background: #FF5A00;
  }

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }

  .hero__text h2 {
    font-size: 40px;
    line-height: 40px;
  }

  .grid-sizer {
    width: calc(50% - 10px);
  }

  .work__item.wide__item {
    width: calc(50% - 10px);
  }

  .work__item {
    width: calc(50% - 10px);
        background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .work__item.large__item {
    width: calc(50% - 10px);
  }

  .footer__top__social {
    text-align: left;
    padding-top: 30px;
  }

  .portfolio__filter li {
    margin-bottom: 10px;
  }

  .input__list {
    margin-right: 0;
  }

  .input__list input {
    width: 100%;
    margin-right: 0;
  }

  .contact__map {
    margin-bottom: 40px;
  }

  .team__item {
    margin-bottom: 20px;
  }

  .team .p-0 {
    padding: 0 15px !important;
  }

  .about__pic__item {
    margin-right: 0;
  }

  .blog__details__quote {
    padding: 30px 45px 35px 35px;
  }
}
/* Small Device = 320px */
@media only screen and (max-width: 479px) {
  .hero__text h2 {
    font-size: 30px;
    line-height: 40px;
  }

  .grid-sizer {
    width: 100%;
  }

  .work__item.wide__item {
    width: 100%;
  }

  .work__item {
    width: 100%;
    margin-right: 0;
  }

  .work__item.large__item {
    width: 100%;
  }

  .work__gallery {
    margin-right: 0;
  }

  .pagination__option .arrow__pagination.left__arrow {
    margin-right: 15px;
  }

  .pagination__option .arrow__pagination.right__arrow {
    margin-left: 10px;
  }

  .blog__details__quote {
    padding: 30px 40px 35px 35px;
  }
}