body {user-select: none;}
   a {user-select: auto!important;}
   a:not([href]){user-select: auto!important;}
    * {
        margin: 0px;
        padding: 0px;
    }


    .main-div {
        background-image: url(image/bg_img_2.jpg);
        align-items: center;
        align-content: center;
        position: relative;
        justify-content: center;
        padding: 0px;
       
    }
    .main-div-abt {
        background-image: url(image/bg_img_2.jpg);
        align-items: center;
/*        align-content: center;*/
        position: relative;
        justify-content: center;
        height: 480px;
        /*margin-top: -44px;*/
    }
    .header{
       /* padding-left: 120px;
        padding-top: 11px;*/
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        transition: background-color 0.2s linear;
        z-index: 6;
    }
    .header .active{
        background-color: white;
        transition: background-color 0.5 ease;
    }
     .active{
        background: white;
     }
     .sidebardivider{
    width: 25%;
    height: auto;
    color: #d9916a;
    border-top: 1px solid;
    text-align: center;
    position: relative;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
     }
     .sidebardivider: hover{
      color: red;
     }
    .sticky {
        position: sticky;
        padding: 0 15px;
        top: 22%;
     }
    .logo{
     /*   margin-left: 87px;*/
        margin-top:0px;
         width: 177px;
    }
    .logo a:hover{
      background-color: transparent;
    }
    .header-abt {
        display: inline-flex;
        width: 100%;
        background-color: #fff;
    }
    .header-abt ul {
        margin-left: 128px;
        margin-top: 18px;*/
    }
    .header-abt li {
        display: inline;
        margin: 0px;
        padding: 24px;
        color: black;
        font-size: 15px;
        font-family: jost;
        letter-spacing: 1.4px;
        font-weight: 600;
    }
    /*.header ul {
        margin-left: 128px;
        margin-top: 18px;
    }*/
    .header li {
        float: left;
        display: block;
        margin: 0px;
        /*padding: 24px;*/
        color: black;
        font-size: 15px;
        font-family: jost;
        letter-spacing: 1.4px;
        font-weight: 600;
    }
    .button1:active {
        color: rebeccapurple;
    }
    .button1 {
        margin: 7px 26px;
        /*padding: 5px;*/
        background-color: #fff;
        color: #080808;
        border: 4px solid burlywood;
        border-radius: 5px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 18px;
        font-weight: 500;
    }
    .right-img {
        position: relative;
        width: 100%;
        max-width: initial;
        z-index: 0;
        animation-name: fadeInRight;
        transition-delay: 1200ms;
        animation-duration: 1.25s;
        right: 0px;
        padding: 0px;
        opacity: 1;
    fill: rgba(0, 0, 0, 0.6601268796992481);
    stroke: rgba(255, 255, 255, 0.75);
    }
    .left-img {
        position: absolute;
        bottom: 75px;
        top: 0px;
        z-index: 0;
        animation-name: fadeInLeft;
        transition-delay: 1200ms;
        animation-duration: 1.25s;
        left: 0px;
        width: 100%;
    }
    .left-img-zindex {
        position: absolute;
        top: 160px;
        left: 42px;
        z-index: 1;
    }
    .menu-item__plus:before {
        content: "\f14a";
        font-family: "Flaticon";
    }
    .menu{
      margin-left: 240px;
       margin-top: -11px;
    }
    .arrow {
        width: 210px;
        height: 40px;
        /*background-color: #CBCBCB;
                            border: 1px solid #CBCBCB;*/
        position: relative;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        line-height: 40px;
    }
    /*.arrow:hover+.service-menu2{
        display: block;
    }*/
.new-btn {
    /* width: 100vw; */
    /* height: 100vh; */
    /* background: #151515; */
   /* display: flex;*/
    flex-flow: row wrap;
     justify-content: center; 
    align-items: center;
    overflow: hidden;
    margin-left: 96px;
}
.new-btn1 {
    /* width: 100vw; */
    /* height: 100vh; */
    /* background: #151515; */
    display: flex;
    flex-flow: row wrap;
     /*justify-content: center;*/
    align-items: center;
    overflow: hidden;
}
.explore {
  font-family: "Space Mono", monospace;
  letter-spacing: 1px;
  background: none;
  color: #D9916A;;
  position: relative;
  outline: none;
  border: none;
  height: 50px;
  width: 190px;
  font-size: 14px;
  z-index: 2;
  transition: 0.01s 0.23s ease-out all;
  overflow: hidden !important;
}
.explore:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 55%;
  background: #3e4b3e;
  z-index: -1;
  transition: 0.3s ease-in all;
}
.explore:after {
  content: "";
  position: absolute;
  left: -5%;
  top: 5%;
  height: 90%;
  width: 5%;
  background: white;
  z-index: -1;
  transition: 0.4s 0.02s ease-in all;
}
.explore:hover {
  cursor: pointer;
  color: transparent;

}
.explore:hover:before {
  left: 100%;
  width: 25%;
}
.explore:hover:after {
  left: 100%;
  width: 70%;
}
.explore:hover .icon-right.after:after {
  left: -80px;
  color: white;
  transition: 0.2s 0.2s ease all;
}
.explore:hover .icon-right.after:before {
  left: -104px;
  top: 14px;
  opacity: 0.2;
  color: white;
}
.icon-right {
  position: absolute;
  top: -1px;
  right: 34px;
}
.icon-right:after {
  font-family: "FontAwesome";
  content: "→";
  font-size: 24px;
  display: inline-block;
  position: relative;
  top: 26px;
  transform: translate3D(0, -50%, 0);
}
.icon-right.after:after {
  left: -250px;
  color: black;
  transition: 0.15s 0.25s ease left, 0.5s 0.05s ease color;
}
.icon-right.after:before {
  content: "Explore";
  position: absolute;
  left: -230px;
  top: 14px;
  opacity: 0;
  transition: 0.2s ease-in all;
}
.signature {
  position: fixed;
  font-family: sans-serif;
  font-weight: 100;
  bottom: 10px;
  left: 0;
  letter-spacing: 4px;
  font-size: 10px;
  width: 100vw;
  text-align: center;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}
.arrow::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 6px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-left: 8px solid #080707;
    transition: 0.3s;
    transform-origin: 50% 50%;
    will-change: transform;
    }
    .arrow:hover::before {
        content: '';
        transform: rotate(90deg);
    }
    .primary-nav ul>li.menu-item-has-children:hover>a>.menu-item__plus,
    .primary-nav ul>li.mega-menu.mega-cat:hover>a>.menu-item__plus {
        transform: rotate(90deg);
    }
    .primary-nav ul>li.menu-item-has-children>a>.menu-item__plus,
    .primary-nav ul>li.mega-menu.mega-cat>a>.menu-item__plus {
        margin-bottom: 1px;
        margin-left: 8px;
        font-style: normal;
        font-size: 9px;
        height: 1em;
        width: 1em;
        font-weight: 400;
        display: block;
        line-height: 1em;
        color: inherit;
        transition: 0.3s;
        transform-origin: 50% 50%;
        will-change: transform;
    }
    .primary-nav>ul>li[class*=current]>a .item_text:before,
    .primary-nav>ul>li:hover>a .item_text:before {
        opacity: 1;
        transform: scaleY(1);
    }
    .tag-line {
        position: relative;
        text-align: center;
        color: var( --e-global-color-accent);
        font-weight: 500;
        letter-spacing: 2.4px;
        top: 190px;
        font-family: system-ui;
    }
    .tag-line p {
        margin: 0 0 16px 0;
    }
    .fadeIn {
        animation-name: fadeIn;
    }
    .banner-heading {
        text-align: center;
        width: 100%;
        position: relative;
        top: 145px;
        animation-name: zoomIn ;
        animation-duration: 1.25s; 
    }
    .banner-heading h1{
         font-size:4rem;
         font-weight:400;
         font-family: "bona nova";
     }
    .banner-heading p{
         font-size: 19px;
         font-family: "Bona Nova";
         font-weight: 600;
         letter-spacing: 2px;
     }
    .zoom-in {
        animation-name: zoomeIn;
    }
    .animated {
        animation-duration: 1.25s;
    }
    .heading h2 {
        color: var( --e-global-color-accent);
        font-size: 80px;
        line-height: 1.23em;
        font-family: var(--pembe-header-font-family);
        color: #262626;
        font-weight: 100;
        letter-spacing: 7.4px;
    }
    .heading-abt {
        position: relative;
        text-align: center;
    }
    /*.heading-abt h2 {
        font-size: 72px;
        line-height: 1.23em;
        font-family: "Bona Nova";
        color: #262626;
        font-weight: 100;
        letter-spacing: 7.4px;
        text-align: center;
        margin-top: 100px;
        margin-bottom: 10px;
    }*/
    .heading-abt2{
         font-size: 72px;
        line-height: 1.23em;
        font-family: "Bona Nova";
        color: #262626;
        font-weight: 100;
        letter-spacing: 7.4px;
        text-align: center;
        margin-top: 100px;
        margin-bottom: 10px;
    }
    .heading-abt span {
        color: #D9916A;
        letter-spacing: 2px;
        font-weight: 600;
    }
    
    .heading-abt a {
        letter-spacing: 2px;
        font-family: "Bona Nova";
        font-weight: 600;
        color: #262626;
    }
    
    .arrow-abt::before {
        content: '';
        position: absolute;
        left: 48%;
        top: 206px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-left: 8px solid #080707;
        transition: 0.3s;
        transform-origin: 50% 50%;
        will-change: transform;
    }
    
    .cursive1 {
        color: #709d59;
        font-family: 'Moon Dance', cursive;
        font-size: 66px;
        line-height: 1em;
        position: relative;
        font-weight: 100;
        text-align: center;
        z-index: 1;
        letter-spacing: 2px;
    }
    
    .cursive {
        margin: -63px 0px 0px 0px;
        padding: 0px 100px 0px 0px;
    }
    
    .about {
        position: relative;
        margin: 10px 0px 10px 0px;
        align-content: center;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
       /* z-index: -1;*/
    }
    .aboutus {
        position: relative;
        margin: 230px 0px 10px 0px;
        align-content: center;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .about2 {
        position: relative;
        display: flex;
        align-content: center;
        align-items: center;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 22px;
    }
    
    .abt-heading {
        position: relative;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        z-index: 1;
        line-height: 0;
        width: 50%;
        /*top: 54px;*/
    }
    
    .title1 {
        font-size: 42px;
        display: block;
        line-height: 1.34em;
        font-weight: 400;
        color: #262626;
        padding: 10px;
    }
    
    .abt-col {
        position: relative;
        display: flex;
        position: relative;
        max-width: 100%;
        /* display: flex; */
        width: 50%;
        margin: 0px 0px 0px 115px;
    }
    
    .subtitle {
        display: inline-block;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.29em;
        order: 1;
    }
    
    .subtitle-text {
        margin: 22px 0px 0px 20px;
        color: #D9916A;
        display: inline-block;
        position: relative;
        line-height: 1;
        letter-spacing: 0.29em;
        order: 1
    }
    
    .subtitle-text::after {
        content: '';
        width: 7.8em;
        position: absolute;
        top: 50%;
        height: 1px;
        background-color: currentColor;
        margin-left: 15px;
    }
    
    .spacer-inner {
        --spacer-size: 10px;
    }
    
    .abt-discription {
        font-size: 18px;
        width: 100%;
        max-width: 100%;
        position: relative;
        color: #535353;
        --spacer-size: 10px;
        top: 31px;
        line-height: 30px;
        padding: 16px;
    }
     .serv-discription {
        font-size: 18px;
        width: 100%;
        max-width: 100%;
        position: relative;
        color: #535353;
        --spacer-size: 10px;
        line-height: 30px;
        padding: 16px;
    }

    .serv-h3{font-size:17px;font-weight:400;line-height: 30px;}
    
    /*  .main-div-abt h2{line-height: 0px;}*/

    .list{
        font-size: 18px;
        color: #535353;

    }
       .contact-btn {
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: 0.5s ease-in-out;
        min-width: 213px;
        padding: 22px;
        background-color: #D9916A;
        display: inline-flex;
        justify-content: center;
        position: relative;
        border: unset;
        border-radius: 30px;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 500;
        letter-spacing: 0.1em;
        height: auto;
        /*margin: 69px 0px;*/
        font-family: 'Jost';
        font-weight: 600;
    }
    

    .btn {
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: 0.5s ease-in-out;
        min-width: 213px;
        padding: 22px;
        background-color: #D9916A;*/
        display: inline-flex;
        justify-content: center;
        position: relative;
        border: unset;
        border-radius: 30px;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 500;
        letter-spacing: 0.1em;
        height: auto;
      /*  margin: 69px 0px;*/
        margin-bottom: 50px;
        font-family: 'Jost';
        font-weight: 600;
    }
    
    .btn::before {
        content: "";
        position: absolute;
        top: 69px;
        right: 0;
        bottom: 0;
        left: 58%;
        margin: auto 0;
        border-radius: 200px;
        background-size: 88px;
        background-position-x: -100%;
        background-position-y: calc(50% - 8px);
        width: 88px;
        height: 88px;
        background-color: #E9A27C;
        transform: translateX(-100%), calc(50% - 8px);
        transition: all 0.5s cubic-bezier(0.71, 0.14, 0.26, 1.62);
        z-index: -1;
    }
    
    .btn:hover {
        background-color: #E9A27C;
    }
    
    .btn:active {
        color: #FFFFFF;
    }
    
    .btn:hover:before {
        left: 50%;
        border-radius: inherit;
        --button-bg-size: 100%;
        --button-bg-position-y: 0;
        --button-bg-position-x: -50%;
        transition: all 0.5s ease-in-out;
    }
    
    .btn:active {
        color: var(--pembe-button-color-idle);
        background-color: var(--button-bg-color-idle);
        box-shadow: inset 1px 2px 5px rgb(0 0 0 / 12%);
        transition: 0.2s ease-in-out;
    }
    
    .btn-text {
        line-height: 1.3;
        letter-spacing: 0.1em;
        color: #FFFFFF
    }
    
    .btn-content {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 2;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .abt-img {
        position: relative;
        width: 50%;
        display: flex;
    }
    
    .abt-img-1 {
        position: absolute;
        display: flex;
        z-index: 1;
    }
    
    .abt-img-2 {
        z-index: 1;
    }
    
    .abt-img-pg {
        display: flex;
        z-index: 1;
        margin-top: 16px;
    }
    
    .studio {
        position: absolute;
        width: initial;
         z-index: 1; 
        bottom: -110px;
        right: 0;
        animation-name: fadeInUp;
        animation-duration: 2s;
        
    }


    
    .studio h3 {
       color: #E9A27C;
    font-family: 'Moon Dance', cursive;
    font-size: 87px;
    line-height: 1em;
    font-weight: 100;
    position: relative;
    z-index: 1;
    text-align: right;
    letter-spacing: 10px;
}
    


    .studioabt {
        position: absolute;
        width: initial;
        /* z-index: 1; */
        bottom: 28px;
        right: 0;
    }

    .studioabt h3 {
       color: #E9A27C;
    font-family: 'Moon Dance', cursive;
    font-size: 87px;
    line-height: 1em;
    font-weight: 100;
    position: relative;
    z-index: 1;
    text-align: right;
    letter-spacing: 10px;
}
    
    .counts {
        /* max-width: 1200px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 100%;
    margin: 117px 0px 117px 64px;*/
    }
    
    .counts ul {
        position: relative;
        justify-content: space-around;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        z-index: -1;
    }
    
    .counts li {
        display: inline;
        margin: 0px;
        padding: 24px;
        color: #262626;
        font-size: 15px;
        font-family: 'Moon Dance', cursive;
        letter-spacing: 1.4px;
        line-height: 1.25;
        text-align: center;
    }
    
    .counts li p {
        z-index: 1;
        right: 0;
        white-space: nowrap;
        margin-top: 18px;
        letter-spacing: 0.025em;
        color: #90AF80;
        font-size: 70px;
        font-family: 'Moon Dance', cursive;
    }
    
    .counts li h2 {
        font-weight: 100;
        font-family: "jost";
        font-size: 27px
    }
      .box{
    display : flex;
    text-align: center;
            
   }

 .item_count{
   height: 200px;
   text-align: center;
  }

  .item_count h2{
   z-index: 1;
    right: 0;
    white-space: nowrap;
    margin-top: 18px;
    letter-spacing: 0.025em;
    color: #90AF80;
    font-size: 70px;
    font-family: 'Moon Dance', cursive;    
  }
  .item_count h5{
    font-weight: 100;
    font-family: "jost";
    font-size: 27px;   
  }
    
  .plus::after {
   content: "\002B";
    position: absolute;
  font-size: 5rem;
}
    .our-services {
        max-width: 100%;
        display: flex;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .our-services-main {
        width: 100%;
        background-color: #2C322C;
        position: relative;
      /*  z-index: -1;*/
    }
    
    .title2 {
        font-size: 48px;
        display: block;
        line-height: 1.34em;
        font-weight: 400;
        color: #ffffff;
    }
    
    .unique-concept {
        text-align: right;
        color: #E9A27C;
        font-family: 'Moon Dance', cursive;
        position: relative;
        width: 100%;
        margin: -79px -55px 0px 0px;
        font-size: 141px;
        line-height: 1.5em;
    }
    
    .services-icons {
        POSITION: relative;
        display: flex;
        justify-content: space-around;
    }
    
    .services-icons i {
        color: #e9a27c;
        border-width: 1px;
        border-style: solid;
        border-radius: 50%;
        padding: 47px;
        position: relative;
        font-size: 38px;
        display: inline-block;
        line-height: 1;
        text-align: center;
        justify-content: center;
        margin-top: 60px;
        overflow: hidden;
        z-index: 1;
    }
    
    .services-icons .icons i::after {
        content: "";
        margin: 40px -30px -30px 40px;
        background-color: #3e4b3e;
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: inherit;
        transition: 0.3s;
        font-family: Flaticon;
        font-size: inherit;
        font-style: normal;
    }
    
    .services-icons .icons-center i::after {
        content: "";
        margin: 40px 40px -30px -30px;
        background-color: #3e4b3e;
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: inherit;
        transition: 0.3s;
        font-family: Flaticon;
        font-size: inherit;
        font-style: normal;
    }
    
    .services-icons .icons-last i::after {
        content: "";
        margin: -30px -30px 40px 40px;
        background-color: #3e4b3e;
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: inherit;
        transition: 0.3s;
        font-family: Flaticon;
        font-size: inherit;
        font-style: normal;
    }
    .services-icons .icons-fourth i::after {
        content: "";
        margin: 40px 40px -30px -30px;
        background-color: #3e4b3e;
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: inherit;
        transition: 0.3s;
        font-family: Flaticon;
        font-size: inherit;
        font-style: normal;
    }
    
    .services-icons .icons i:hover:after {
        margin: 0px;
    }
    
    .services-icons .icons-center i:hover:after {
        margin: 0px;
    }
    
    .services-icons .icons-last i:hover:after {
        margin: 0px;
    }
    .services-icons .icons-fourth i:hover:after {
        margin: 0px;
    }
    
    
    .services-icons h3 {
        padding: 0px 50px 0px 0px;
        color: #FFFFFF;
        margin-bottom: 12px;
        position: relative;
        z-index: 1;
        font-size: 28px;
        line-height: 1.4;
        word-break: break-word;
        transition: 0.4s;
        font-family: Bona Nova;
        letter-spacing: 2px;
        font-weight: 100;
    }
    
    .services-icons p {
        color: #D2D2D2;
        font-size: 18px;
        padding: 0px 20px 0px 0px;
        font-size: 18px;
        transition: 0.4s;
        font-family: jost;
    }
    
    .icons {
        margin-left: 36px;
        margin-right: 30px;
        padding: 0px 30px 38px;
        margin-bottom: 48px;
    }
    
    .icons-center {
        margin: 54px -63px 0px -61px;
        padding: 0px 30px 38px;
    }
    .icons-fourth {
        margin: 54px -63px 0px -61px;
        padding: 0px 30px 38px;
    }
    
    
    .arrow-btn {
        margin: 31px 0px 0px 0px;
        padding: 16px 16px 16px 16px;
        display: inline-flex;
        justify-content: center;
        position: relative;
        border: unset;
        border-radius: 30px;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 500;
        letter-spacing: 0.1em;
        height: auto;
        overflow: hidden;
        color: #D9916A;
        background-color: transparent;
        pointer-events: none;
        min-width: 203px
    }
    
    .arrow-service {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 2;
        -webkit-user-select: none;
        user-select: none;
        flex-direction: row-reverse;
        z-index: 1;
        transform: translateX(calc( -100% + var(--folding-extra-offset, 22px)));
        pointer-events: all;
        transition: inherit;
    }
    
    .arrow1 {
        line-height: 0.5em;
        fill: #D9916A;
        border-color: #D9916A;
        margin-left: 13px;
        position: absolute;
        z-index: 1;
        width: 1em;
        height: 0.36em;
        display: block;
        font-size: 50px;
        text-align: center;
        font-size: 50px;
        margin-right: 46px;
        color: #D9916A;
    }
    
    .arrow1::before {
        content: '';
        position: absolute;
        width: calc(100% - 0.02em + 1px);
        height: 0.02em;
        background-color: currentColor;
        top: calc(50% - 0.02em);
        right: auto;
        left: 0;
        transform: unset;
    }
    
    .arrow1::after {
        content: '';
        position: absolute;
        border: solid #D9916A;
        border-width: 0 0.02em 0.02em 0;
        padding: 0.1em;
        transform: rotate(-45deg);
        right: calc(0.02em + 1px);
        top: calc(50% - 0.12em);
    }
    
    .circle-arrow {
        border-color: #D9916A;
        margin: 31px 0px 0px 0px;
        padding: 16px 16px 16px 16px;
        background-color: transparent;
        pointer-events: none;
        color: #D9916A;
        min-width: 203px;
        display: inline-flex;
        justify-content: center;
        position: relative;
        border: unset;
        border-radius: 30px;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 500;
        letter-spacing: 0.1em;
        height: auto;
        overflow: hidden;
        transition: 0.3s ease-in-out;
    }
    
    .circle-arrow::after {
        border: 1px solid #e9dddd;
        border-radius: 30px;
        width: 50px;
        height: 50px;
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: inherit;
        pointer-events: all;
        transform: translateX(17px);
        transition: inherit;
    }
    
    .arrow2 {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 2;
        -webkit-user-select: none;
        user-select: none;
        flex-direction: row-reverse;
        transform: translateX(calc( -100% + var(--folding-extra-offset, 22px)));
        pointer-events: all;
        transition: inherit;
        z-index: 1;
    }
    
    .readmore {
        transition: 0.4s, color 0s;
        line-height: 1.3;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: #D9916A;
        display: none;
    }
    
    .readmore:hover {
        display: block;
    }
    
    .readmore-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 2;
        margin-right: 238px;
        margin-top: 47px;
    }
    
    .text {
        color: #D9916A;
        transition: all 0.3s;
        word-spacing: 3.6px;
        font-family: jost;
        font-size: 12px;
        font-weight: 700;
        line-height: 22.5px;
        letter-spacing: 5px;
    }
    
    .marquee {
        margin-top: 0px;
        margin-bottom: 0px;
        display: inline-block;
        white-space: nowrap;
        z-index: -1;
        position: relative;
    }
    
    .divider {
        top: -2px;
        left: -6px;
        margin: 0px 14px 0px 14px;
        color: #D9916A;
        -webkit-text-stroke-width: 95px;
        font-size: 95px;
        width: 1em;
        height: 1px;
        background-color: currentColor;
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }
    
    .projects {
        display: flex;
        flex-direction: column;
        position: relative;
        text-align: left;
       /* z-index: -1;*/
    }
    
    .projects h2 {
        display: inline-block;
        font-size: 54px;
        line-height: 1.3;
        font-weight: 400;
        color: var(--pembe-header-font-color);
        letter-spacing: 0.025em;
        transition: all 0.4s;
        transform: skew(0deg);
        position: relative;
        z-index: 2;
        transition: z-index 0s 0.1s;
        font-family: bona Nova;
        transition: all 0.4s;
    }
    
    .project-image1 {
        height: 260px;
        position: absolute;
        top: -92%;
        right: 11%;
        display: none;
        transform-origin: top center;
        pointer-events: none;
        transition: all 0.45s;

    }
    
    .project-image2 {
        height: 260px;
        position: absolute;
        top: -100%;
        left: 13%;
        display: none;
        transform: translate(calc( var(--wgl-image-position) * -1), -40px);
        transform-origin: top center;
        pointer-events: none;
        transition: all 0.45s;
    }
    
    .project-image3 {
        height: 260px;
        position: absolute;
        top: 20%;
        left: 12%;
        display: none;
        transform: translate(calc( var(--wgl-image-position) * -1), -40px);
        transform-origin: top center;
        pointer-events: none;
        transition: all 0.45s;
    }
    
    .project-image4 {
        height: 260px;
        position: absolute;
        top: 42%;
        left: 11%;
        display: none;
        transform: translate(calc( var(--wgl-image-position) * -1), -40px);
        transform-origin: top center;
        pointer-events: none;
        transition: all 0.45s;
    }
    
    .project-image5 {
        height: 260px;
        position: absolute;
        top: 52%;
        left: 11%;
        display: none;
        transform: translate(calc( var(--wgl-image-position) * -1), -40px);
        transform-origin: top center;
        pointer-events: none;
        transition: all 0.45s;
    }
    
    .project-image1:hover {
        opacity: 1;
        transform: translate(calc( var(--wgl-image-position) * -1), -50%) skewY(0) scaleZ(1);
        visibility: visible;
    }
    
    .project-image2:hover {
        opacity: 1;
        transform: translate(calc( var(--wgl-image-position) * -1), -50%) skewY(0) scaleZ(1);
        visibility: visible;
    }
    
    .project-image3:hover {
        opacity: 1;
        transform: translate(calc( var(--wgl-image-position) * -1), -50%) skewY(0) scaleZ(1);
        visibility: visible;
    }
    
    .project-image4:hover {
        opacity: 1;
        transform: translate(calc( var(--wgl-image-position) * -1), -50%) skewY(0) scaleZ(1);
        visibility: visible;
    }
    
    .project-image5:hover {
        opacity: 1;
        transform: translate(calc( var(--wgl-image-position) * -1), -50%) skewY(0) scaleZ(1);
        visibility: visible;
    }
    
    .circle {
        position: relative;
        border: 1px solid #D9916A;
        width: 50px;
        height: 50px;
        border-radius: 30px;
    }
    
    .circle:hover {
        width: 100%;
    }
    
    .circle:after {
        line-height: 0.5em;
        fill: #D9916A;
        border-color: #D9916A;
        margin-left: 13px;
        position: relative;
        z-index: 1;
        width: 1em;
        height: 0.36em;
        display: block;
        margin: 0;
        font-size: 50px;
        text-align: center;
        font-size: 50px;
    }
    
    .project-headings1 {
        color: #262626;
    }
    .project-headings2 {
        color: #262626;
    }
    .project-headings3 {
        color: #262626;
    }
    .project-headings4 {
        color: #262626;
    }
    .project-headings5 {
        color: #262626;
    }
    .project-headings6 {
        color: #262626;
    }
    
    .project-headings1:hover {
        color: #90AF80;
        font-style: italic;
    }
    .project-headings2:hover {
        color: #90AF80;
        font-style: italic;
    }
    
    .project-headings:after {
        border: 1px solid green;
        width: 10px;
        height: 14px;
    }
    
    .arrow3 {
       line-height: 0.5em;
    fill: #D9916A;
    border-color: #D9916A;
    margin-left: 13px;
    position: absolute;
    z-index: 1;
    width: 1em;
    height: 0.36em;
    display: block;
    font-size: 50px;
    text-align: left;
    font-size: 78px;
    margin-right: 46px;
    color: #779A65;
    left: 44%;
    margin-top: -5px;
    }
    
    .arrow3::before {
        content: '';
        position: absolute;
        width: calc(100% - 0.02em + 1px);
        height: 0.02em;
        background-color: currentColor;
        top: calc(50% - 0.02em);
        right: auto;
        left: 0;
        transform: unset;
    }
    
    .arrow3::after {
        content: '';
        position: absolute;
        border: solid #779A65;
        border-width: 0 0.02em 0.02em 0;
        padding: 0.1em;
        transform: rotate(-45deg);
        right: calc(0.02em + 1px);
        top: calc(50% - 0.12em);
    }

    .default-img{
        background-color: red;
        visibility: hidden;
    }


    .project-headings2:hover.default-img {
        visibility: visible;
        opacity: 1;
    }
   .project-headings1:hover+.project-image1 {
        display: block;
    }
    
    .project-headings1:hover+.default-img {
        display: none;
   }
    
    .project-headings:hover+.project-image2 {
        display: block;
    }
    
    .project-headings:hover+.project-image3 {
        display: block;
    }
    
    .project-headings:hover+.project-image4 {
        display: block;
    }
    
    .project-headings:hover+.project-image5 {
        display: block;
    }
    
    .project-btn:hover {
    cursor: pointer;
    color: transparent;
    color: beige;
    }
    .project-btn {
    margin: 0px 0px 0px 150px;
    background-color: rgb(217, 145, 106);
    text-align: center;
    width: 160px;
    height: 54px;
    color: rgb(255, 255, 255);
    font-family: Jost;
    position: relative;
    font-size: 14px;
    font-weight: 700;
    z-index: 1;
    letter-spacing: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: initial;
    border-image: initial;
    padding: 9px;
    border-radius: 47px;
    overflow: hidden;
    }
    
    .project-btn::after {
        content: "";
        width: 88px;
        height: 88px;
        border: 1px;
        background-position-x: 100%;
        background-position-y: calc(50% - 8px);
        border-radius: 200px;
        left: 61%;
        position: absolute;
        background-color: #E9A27C;
        right: 0;
        top: 76px;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }
    
    .project-btn2:hover {
    cursor: pointer;
    color: transparent;
    color: beige;
    }
    .project-btn2 {
    /* margin-top: 55px;*/
    background-color: #D9916A;
    text-align: center;
    border: 1px solid;
    width: 128px;
    height: auto;
    color: #ffff;
    font-family: 'Jost';
    padding: 15px;
    border-radius: 35px;
    position: relative;
    font-size: 11px;
    font-weight: 700;
    z-index: 1;
    overflow: hidden;
    letter-spacing: 2px;
}
    }
    
    .project-btn2::after {
        content: "";
        width: 88px;
        height: 88px;
        border: 1px;
        background-position-x: 100%;
        background-position-y: calc(50% - 8px);
        border-radius: 200px;
        left: 61%;
        position: absolute;
        background-color: #E9A27C;
        right: 0;
        top: 76px;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }
    
    .contactbtnser  {
     /*   margin-top: 55px;*/
    background-color: #D9916A;
    text-align: center;
    border: 1px solid;
    width: 128px;
    height: auto;
    color: #ffff;
    font-family: 'Jost';
    padding: 15px;
    border-radius: 35px;
    position: relative;
    font-size: 11px;
    font-weight: 700;
    z-index: 1;
    overflow: hidden;
    letter-spacing: 2px;
}
    .contactbtnser::after {
        content: "";
        width: 88px;
        height: 88px;
        border: 1px;
        background-position-x: 100%;
        background-position-y: calc(50% - 8px);
        border-radius: 200px;
        left: 61%;
        position: absolute;
        background-color: #E9A27C;
        right: 0;
        top: 76px;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }
     
     .contactbtn{
        background-image:url(image/sidebar-contact_us.jpg);
        width: 100%;text-align: center;color: white;
         background-position: center;position: absolute;
         bottom: -3%;
     }
    .product-design {
        position: relative;
        display: flex;
        margin-top: 100px;
        background-image: url(image/bg_img_2.jpg);
        background-size: cover;
        background-position: center;
      /*  z-index: -1;*/
    }
    
    .product-design .img2 {
        position: absolute;
        top: 0%;
    }
    
    .design {
        width: 100%;
        position: relative;
        display: flex;
    }
    
    .design1 h3 {
        font-size: 30px;
        font-family: 'Bona Nova';
        letter-spacing: 2px;
        margin: 34px 0px 10px 0px;
        color: #E9A27C;
        font-weight: 400;
        padding-left: 92px;
    }
    
    .design1 p {
        font-size: 18px;
        margin: -39px 0px 0px 0px;
        color: #535353;
        font-family: "jost";
        padding-right: 31px;
        padding-left: 96px;
        line-height: 29px;
        font-weight: 400;
    }
    
    .number1 {
        font-family: "Bona Nova", Sans-serif;
        font-size: 36px;
        line-height: 1em;
        width: 80px;
        height: 80px;
        position: absolute;
        z-index: -1;
        top: 0;
        right: 0;
        left: 0;
    }
    
    .number1 span {
        margin: -43px 0px 0px -90px;
        padding: 12px 5px 1px 8px;
        border-radius: 50% 50% 50% 50%;
        color: #FFFFFF;
        background-color: #d9916a;
        font-family: "Bona Nova", Sans-serif;
        font-size: 37px;
        line-height: 1em;
        width: 60px;
        height: 60px;
        text-align: center;
        z-index: -1;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        justify-content: center;
    }
    
    .design2 h3 {
        font-size: 30px;
        font-family: 'Bona Nova';
        letter-spacing: 2px;
        margin: 34px 0px 10px 0px;
        color: #779A65;
        font-weight: 400;
        padding-left: 92px;
    }
    
    .design2 p {
        font-size: 18px;
        color: #535353;
        font-family: "jost";
        padding-right: 31px;
        padding-left: 96px;
        line-height: 29px;
        font-weight: 400;
    }
    
    .number2 span {
    margin: -58px 0px 0px -22px;
    padding: 5px 5px 1px 8px;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF;
    background-color: #779A65;
    font-family: "Bona Nova", Sans-serif;
    font-size: 50px;
    line-height: 1em;
    width: 88px;
    height: 82px;
    text-align: center;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
}
    
    
    .footer {
        position: relative;
        display: flex;
        justify-content: space-around;
        background-color: #262626;
        margin-top: 123px;
    }
    
    .footer p {
        color: #ffff;
    }
    
    .footer1 {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .footericon{color: #D9916A;}
    
    .title3 {
        font-size: 32px;
        display: block;
        line-height: 1.34em;
        font-weight: 400;
        color: #ffffff;
        letter-spacing: 3px;
        font-family: 'Bona Nova';
    }
    
    .fa {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 25px;
        text-rendering: auto;
        color: Black;
        padding: 10px;
    }
    
    .footer2 {
        margin: 100px 0px 10px 0px;
    }
    
    .footer h3 {
        font-size: 30px;
        font-family: 'Bona Nova';
        color: #ffff;
        margin-left: 45px;
    }

    .footer li{
    color: white;
    text-decoration-style: none;
    font-size: 20px;
    font-weight: 600;
    list-style: none;
    margin-left: 49px;
    line-height: 2;
    }
    
    .contact {
        position: relative;
        display: flex;
    }
    .contact a{text-decoration: none;color: white;}
    .contact a:hover{text-decoration: none;color: white;}
    .contact i {
        font-size: 30px;
        color: #D9916A;
    }
    
    .contact p {
        font-size: large;
        padding-left: 17px;
    }

    .cont_right {
    /*width: 27%;
    float: left;*/
    margin-left: 18%;
    margin-top: 14%;
    }

    .cont-title {
    font-size: 25px;
    color: #000;
    margin-bottom: 15px;
    font-weight: 600;
}
.pt8 {
    padding-top: 8px;
}
.w100 {
    width: 100%;
    float: left;
    /* background-color: #ffff; */
}
.contactdetails {
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #D9916A;
}
.contactdetails a {
    color: #000;
    text-decoration: none;
}


    .footer3 {
        margin: 100px 0px 10px 0px;
    }
    
    .footer3 span {
        font-size: 20px;
    }
    
    .footer3 p {
        font-size: 18px;
    }
    
   .footer a {
        text-decoration: none;
        color: white;
    }
    .footer a:hover{color: white;
     text-decoration: none;}
    
    .sub-services {
        position: relative;
        display: flex;
    }
    
    .service-box {
        width: 28%;
        border: 1px;
        justify-content: space-between;
        margin: 0px 17px;
        margin-bottom: 49px;
        background-color: #FAF6F1;
        text-align: left;
        padding: 26px 52px 25px 34px;
    }
    
    .service-box h3 {
        font-size: 25px;
        text-align: left;
        padding-left: 30px;
        font-family: "Bona Nova";
        color: #535353;
        letter-spacing: 1px;
        margin-left: 24px;
        margin-top: -32px;
    }
    
    .service-box p {
        line-height: 1.5;
        padding: 25px;
        font-size: 18px;
        text-align: left;
        font-family: "Bona Nova";
        color: #535353;
        margin-left: 25px;
    }
    
    .service-box .fa {
        color: #080707;
        padding: 10px;
        margin-top: 20px;
    }
    /* Contact Form*/
    
    .contact-form {
        margin-top: 30px;
    }
    
    .contact-form .input-block {
        background-color: rgba(255, 255, 255, 0.8);
        border: solid 1px #CFCCC8;
       /* height: 13px;*/
        padding: 8px;
        position: relative;
        margin-bottom: 10px;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    
    .contact-form .input-block.focus {
        background-color: #fff;
        border: solid 1px #fb2900;
    }
    
    .contact-form .input-block.textarea {
        height: auto;
    }
    
    .contact-form .input-block.textarea .form-control {
        height: auto;
        resize: none;
    }
    
    .contact-form .input-block label {
        position: absolute;
        left: 25px;
        top: 25px;
        display: block;
        margin: 0;
        font-weight: 300;
        z-index: 1;
        color: #333;
        font-size: 18px;
        line-height: 10px;
    }
    
    .contact-form .input-block .form-control {
        background-color: transparent;
        padding: 0;
        border: none;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        height: auto;
        position: relative;
        z-index: 2;
        font-size: 18px;
        color: #333;
    }
    
    .contact-form .input-block .form-control:focus label {
        top: 0;
    }
    
    .contact-form .square-button {
        background-color: rgba(255, 255, 255, 0.8);
        color: #fb2900;
        font-size: 26px;
        text-transform: uppercase;
        font-weight: 700;
        text-align: center;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        padding: 0 60px;
        height: 60px;
        border: none;
        width: 100%;
    }
    
    .contact-form .square-button:hover,
    .contact-form .square-button:focus {
        background-color: white;
    }

    .mobile_contact{display: none;}

 /*_____________________________________@media Query_____________________*/


   @media (min-width: 768px) and (max-width: 1024px) {
        .contact-wrap {
            /*width: 60%;*/
            margin: auto;
        }
        .bullet-points{
            position: relative;
        }
         .contactbtn{display: none;}
        .bullet-points{display: none;}
    }
    @media only screen and (min-width:321px) and (max-width:768px){
         .contactbtn{display: none;}
        .bullet-points{display: none;}
        
    }
    /*----page styles---*/
    
    .contact-form {}
    
    .contact-wrap {
        padding: 28px 75px;
        background-color: #FAF6F1;
        margin-bottom: 50px;
    }
    
    /*h2 {
        color: #262626;
        font-size: 30px;
        text-transform: uppercase;
        font-weight: 700;
        text-align: center;
        font-family: "Bona Nova";
        letter-spacing: 2px;
    }*/
    
    h1 .small {
        font-size: 18px;
        display: block;
        text-transform: none;
        font-weight: 300;
        margin-top: 10px;
        color: #ff7c62;
    }
    
    .made-with-love {
        margin-top: 40px;
        padding: 10px;
        clear: left;
        text-align: center;
        font-size: 10px;
        font-family: arial;
        color: #fff;
    }
    
    .made-with-love i {
        font-style: normal;
        color: #F50057;
        font-size: 14px;
        position: relative;
        top: 2px;
    }
    
    .made-with-love a {
        color: #fff;
        text-decoration: none;
    }
    
    .made-with-love a:hover {
        text-decoration: underline;
    }

    .bullet-points{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .bullet-points i {
        color: #262626
    }
    
    .bullet-points span {
        color: black;
        font-size: 14px;
        font-family: jost;
        letter-spacing: 1.4px;
        font-weight: 600;
        line-height: 35px;
    }
    .bullet-points span a{
    color: black;
    font-family: jost;
    letter-spacing: 1.4px;
    font-weight: 600;
    }

    /* Navbar*/
    
    .topnav {
      /*  overflow: hidden;*/
        position: relative;
        display: flex;
      /*  background-color: #333;*/
    }
    
    .topnav a {
        float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 4px 17px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Jost';
    letter-spacing: 1px;
    /* padding-left: 50px; */
    margin-left: 30px;

    }
    
    .topnav a:hover {
        /*background-color: #ddd;*/
        color: black;
    }
    
    .topnav a.active {
        transition: background-color 0.5s ease;
       /* background-color: transparent;*/
        color: black;
    }
    
    .topnav .icon {
        display: none;
    }
   .design-discription {
        position: relative;
        margin: 10% 0% 10%;
        padding-left: 168px;
    }
    
    
    .design-discription1 {
        position: relative;
        margin: 10% 0% 10%;
    }

 /*___________________________________________________@media query max-with:600;__________________*/   


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

        .button1{
            margin: 7px 116px;
        }
        
        .bullet-points{
           position: relative;
           text-align: center;
           display: none;
        }
 
         .contactbtn{display: none;}   

        .header{
            margin-left: 0px;
            /*margin-top:37px*/
           /* padding: 20px 0px;*/
        }
         .topnav a.active{
            display: none;
         }
        .topnav a:not(:first-child) {
            display: none;
        }
        .topnav a.icon {
            float: right;
            display: block;
            padding-left:  93px;
            font-size: 30px;
        }
        .left-img{
            width: 100%;
            text-align: left;
            padding: 0px;
        }
        .right-img {
            width: 50%;
            text-align: right;
            padding: 0px;
            visibility: hidden;
            
        }
         .contact-wrap{padding: 0px;}
      /*  .banner-heading {
            text-align: center;
            width: 100%;
            position: relative;
            top: -83px;
            left: 0px;
            margin-bottom: -180px;
        }*/

        .banner-heading h1{
            font-size: 2rem;
        }

        .cursive1{
            font-size: 50px;
        }
         
         .title1{font-size: 27px;padding: 13px;}

         .studio h3{font-size: 49px;
                 margin-bottom: 61px;}

         .counts li{padding: 0px;}      

        .counts li h2 {
            font-weight: 600;
            font-family: "jost";
            font-size: 15px;
        }
        .title2{font-size: 35px;}
        .counts li p{font-size: 40px;margin-top: 0px;}
        .unique-concept {
            position: relative;
            right: 4%;
            margin: -40px -55px 0px 0px;
            font-size: 70px;
            line-height: 1;
        } 

         .icons-last{margin-left: 32px;}
         .icons-fourth{margin-left: -6px;margin-top: 0px;}
         .subtitle-text::after{width: 3.8em;}
         .projects h2{
            font-size: 25px;
        }
        .abt-img-1 {
            width: 100%;
        }

         .services-icons h3{padding: 0px;font-size: 27px;}
       .design-discription{
            padding:0px;
            margin-left: 18px;
        }
       .topnav a {
          float: left;
          display: block;
         color: #000000;
         text-align: center;
         padding: 3px 0px;
         text-decoration: none;
         font-size: 20px;
         font-weight: 600;
         font-family: 'Jost';
        letter-spacing: 2px;
      /* padding-left: 50px;*/
       }

      .logo{width: 109px;
        height: 100%;
        margin-top: 21px;
        margin-left: 10px;
     }

     .menu{
        margin-left: 0px;
     }

     .heading-abt2{
        font-size: 30px;
     }
     .active{
        background: white;
      /* padding: 51px 0px 0px;*/
     }
     .footer{margin-top: 0px;}
     .footer1{margin-bottom: 0px;}
     .footer1 img{margin-left: 53px;}
     .title3{margin-left: 35px;}
     .footericon{margin-left: 35px;}
  }
 /*__________________________________________________@media query max-with:600;__________________*/   

    @media screen and (max-width: 600px) {
        .topnav.responsive {
            position: relative;
        }
        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 10%;
        }
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

    }
 /*___________________________________________________Tab View_________________*/   
         

      @media (min-width: 481px) and (max-width: 767px) {
        .right-img{visibility: hidden;}
    }

     @media (min-width: 768px) and (max-width: 1024px){
        .right-img{display: none;}
         .left-img{height: 500px;}
         .banner-heading{top: 65px;}
         .abt-heading{top: 54px}
         .abt-img{margin-top: 80px}
         .services-icons h3{word-break: inherit;
            padding: 0px;}
         .icons{margin-left: 0px;}   
         .elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .title_1st{margin-left: 130px;}
         .elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase:not(:hover) .showcase__content.active_default .showcase__image{display: none;}
         .arrow3{display: none;}
         .project-btn{margin-left: 300px;}
         .design-discription{left: 82px;margin-top: 0px;}
         .unique-concept{line-height: 1;}
         .cursive1{color: #000;}
         .header li{margin-right: -12px;}
         .footer1{margin-bottom: 0px; left: 53px;}

     }


 /*___________________________________________________@media query min-with:600;__________________*/   
         

     @media only screen and (min-width: 600px) {
        /*.banner-heading{
            top:0px;
        }*/
    }
 /*___________________________________________________@media query min-with:1200;__________________*/   


    @media only screen and (min-width: 1200px) {

 }
 /*___________________________________________________@media query min-with:992;__________________*/   
     
      @media (min-width: 992px){
        .banner-heading{
            top:40px;
        }
    }

/*___________________________________________Key Frame Animations___________________*/

  
@keyframes slidein {
  from {
    margin-left: 0px; 
    opacity: 0;
  }

  to {
      margin-left: 100px; 
    opacity: 1;
  }
}


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeInRight{

from{
    opacity:0;transform:translate3d(100%,0,0)
}
to{opacity:1;transform:none}
}
.fadeInRight{animation-name:fadeInRight}

@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}
@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}


.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top:-6px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
} 


header {
  position: relative;
  width: 100%;
  background: transparent;
}
.header2 {
  position: relative;
  width: 100%;
  background: white;
}

/*.logo {
  position: relative;
  z-index: 123;
  padding: 10px;
  font: 18px verdana;
  color: #6ddb07;
  float: left;
  width: 15%;
}*/

.logo a {
  color: #6ddb07;
}

nav {
  position: relative;
  width: 980px;
  margin: 0 auto;
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 0px;
}

#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #head-mobile {
  display: none;
}

#cssmenu {
  font-family: sans-serif;
  background: transparent;
  padding-top: 10px;
}

#cssmenu > ul > li {
  float: left;
}

#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: black;
  font-weight: 700;
}

#cssmenu > ul > li:hover > a,
#cssmenu ul li.active a {
  color: #000;
}

#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
  background: transparent !important;
  -webkit-transition: background 0.3s ease;
  -ms-transition: background 0.3s ease;
  transition: background 0.3s ease;
  border-bottom: 1px solid #E9A27C;
}

#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}

#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #000;
  content: "";
}

#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #000;
  content: "";
  -webkit-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  background: #333;
  transition: all 0.25s ease;
}

#cssmenu ul ul li:hover {
}

#cssmenu li:hover > ul {
  left: auto;
}

#cssmenu li:hover > ul > li {
  height: 35px;
}

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #ddd;
  font-weight: 400;
}

#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}

#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #fff;
}

#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #ddd;
  content: "";
}

#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #ddd;
  content: "";
  -webkit-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}

#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
  background: #363636;
}

#cssmenu ul ul ul li.active a {
  border-left: 1px solid #333;
}

#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
  border-top: 1px solid #333;
}

@media screen and (max-width: 700px) {
  .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;
    text-align: center;
    padding: 10px 0 0;
    float: none;
  }

  .logo2 {
    display: none;
  }

  nav {
    width: 100%;
  }

  #cssmenu {
    width: 100%;
  }

  #cssmenu ul {
    width: 100%;
    display: none;
    padding-top: 10px;
  }

  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid #444;
  }

  #cssmenu ul li:hover {
    background: #363636;
  }

  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }

  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }

  #cssmenu > ul > li {
    float: none;
  }

  #cssmenu ul ul li a {
    padding-left: 25px;
  }

  #cssmenu ul ul li {
    background: #333 !important;
  }

  #cssmenu ul ul li:hover {
    background: #363636 !important;
  }

  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }

  #cssmenu ul ul li a {
    color: #ddd;
    background: none;
  }

  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #fff;
  }

  #cssmenu ul ul,
  #cssmenu ul ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }

  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }

  #cssmenu #head-mobile {
    display: block;
    padding: 23px;
    color: #ddd;
    font-size: 12px;
    font-weight: 700;
  }

  .button {
    width: 55px;
    height: 46px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 12399994;
  }

  .button:after {
    position: absolute;
    top: 22px;
    right: 20px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    content: "";
  }

  .button:before {
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: absolute;
    top: 16px;
    right: 20px;
    display: block;
    height: 2px;
    width: 20px;
    background: black;
    content: "";
  }

  .button.menu-opened:after {
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    top: 23px;
    border: 0;
    height: 2px;
    width: 19px;
    background: #000;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .button.menu-opened:before {
    top: 23px;
    background: #000;
    width: 19px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid #444;
    height: 46px;
    width: 46px;
    cursor: pointer;
  }

  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }

  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }

  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: "";
  }

  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }

  #cssmenu .submenu-button.submenu-opened:after {
    background: #fff;
  }

  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: "";
  }

  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }

  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }

  #cssmenu ul ul ul li.active a {
    border-left: none;
  }

  #cssmenu > ul > li.has-sub > ul > li.active > a,
  #cssmenu > ul ul > li.has-sub > ul > li.active > a {
    border-top: none;
  }
}

.size{
    font-size: 13px;
}

.header_area_container {
display: inline-block;
height: 100%;
max-height: 100%;
}
.header_area_container > * {
display: inline-block;
vertical-align: middle;
}
.delimiter {
position: relative;
}
.wgl-logotype-container.logo_over_search {
position: relative;
z-index: 10;
}
.wgl-logotype-container img {
vertical-align: middle;
max-height: 100%;
max-width: initial;
}
.wgl-logotype-container a {
display: inline-block;
}
.wgl-logotype-container a, .wgl-logotype-container a:hover {
color: inherit;
}
.wgl-logotype-container .logo-name {
font-size: 34px;
line-height: 1;
color: inherit;
}
header:not(.wgl-menu-outer_content) > .wgl-logotype-container .logo-name {
width: min-content;
font-size: 30px;
white-space: pre-line;
}
.primary-nav {
color: var(--pembe-header-font-color);
letter-spacing: 0.025em;
}
.primary-nav a {
transition: 0.3s, color 0s;
}
.primary-nav.align-left {
text-align: left;
}
.primary-nav.align-left > ul.menu > li.mega-menu-links > ul.mega-menu.sub-menu,
.primary-nav.align-left > ul.menu > li.mega-cat > div.mega-menu-container {
left: 0;
right: auto;
}
.primary-nav.align-center {
text-align: center;
}
.primary-nav.align-center > ul.menu > li.mega-menu-links > ul.mega-menu.sub-menu,
.primary-nav.align-center > ul.menu > li.mega-cat > div.mega-menu-container {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.primary-nav.align-right {
text-align: right;
}
.primary-nav.align-right > ul.menu > li.mega-menu-links > ul.mega-menu.sub-menu,
.primary-nav.align-right > ul.menu > li.mega-cat > div.mega-menu-container {
left: auto;
right: 0;
}
.primary-nav .lavalamp {
position: static;
}
.primary-nav .lavalamp-object {
position: absolute;
z-index: 0;
left: 0;
bottom: 0;
opacity: 0;
height: 3px;
width: 30px;
border-radius: 0;
transition: 1.2s 0.3s;
pointer-events: none;
}
.primary-nav .lavalamp-object::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 auto;
background-color: currentColor;
max-width: calc(100% - 36px);
}
@media (max-width: 1500px) {
.primary-nav .lavalamp-object::after {
max-width: calc(100% - 14px);
}
}
.primary-nav .lavalamp_animate .lavalamp-object {
opacity: 1;
}
.primary-nav .lavalamp:hover .lavalamp-object {
transition: 0.5s 0s;
}
.primary-nav > ul.lavalamp > li > a > span:after,
.primary-nav > ul.lavalamp > li.menu-item-has-children > a .item_text:before {
display: none !important;
}
.primary-nav ul:hover li:not(:hover) {
z-index: 0;
position: relative;
}
.primary-nav ul li {
display: inline-block;
vertical-align: middle;
line-height: inherit;
margin-bottom: 0;
z-index: unset;
}
.primary-nav ul li a {
color: inherit;
}
.primary-nav > ul li {
position: relative;
padding-left: 0;
}
.primary-nav > ul li.mega-menu {
position: static !important;
}
.primary-nav > ul li.mega-menu > ul.mega-menu {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.primary-nav > ul li.mega-menu > ul.mega-menu .menu-item__plus {
display: none;
}
.primary-nav > ul {
height: 100%;
margin-left: 0;
padding: 0;
}
.primary-nav > ul > li {
height: 100%;
}
.primary-nav > ul > li.mega-menu-links > ul.mega-menu {
padding-left: 25px;
padding-right: 25px;
}
.primary-nav > ul > li.mega-menu-links > ul.mega-menu > li > a > span:before {
display: none;
}
.primary-nav > ul > li > a {
display: flex;
position: relative;
z-index: 1;
height: 100%;
align-items: center;
padding: 0 19px;
color: inherit;
transition: 0.3s;
}
.primary-nav > ul > li > a > span.menu-item__text {
height: 100%;
display: flex;
position: relative;
align-items: center;
}
.primary-nav > ul > li > a .item_text:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: 1px;
height: 22px;
max-height: calc(50% - 0.8em);
margin-left: -1px;
background-color: currentColor;
opacity: 0;
transform: scaleY(0);
transform-origin: top center;
transition: 0.4s;
}
@media (max-width: 1500px) {
.primary-nav > ul > li > a {
padding: 0 15px;
}
}
.primary-nav > ul > li[class*=current] > a .item_text:before, .primary-nav > ul > li:hover > a .item_text:before {
opacity: 1;
transform: scaleY(1);
}
.primary-nav ul > li.menu-item-has-children > a > .menu-item__plus,
.primary-nav ul > li.mega-menu.mega-cat > a > .menu-item__plus {
margin-bottom: 1px;
margin-left: 8px;
font-style: normal;
font-size: 9px;
height: 1em;
width: 1em;
font-weight: 400;
display: block;
line-height: 1em;
color: inherit;
transition: 0.3s;
transform-origin: 50% 50%;
will-change: transform;
}
.primary-nav ul > li.menu-item-has-children > a > .menu-item__plus:before,
.primary-nav ul > li.mega-menu.mega-cat > a > .menu-item__plus:before {
content: "\f14a";
font-family: "Flaticon";
}
.primary-nav ul > li.menu-item-has-children:hover > a > .menu-item__plus,
.primary-nav ul > li.mega-menu.mega-cat:hover > a > .menu-item__plus {
transform: rotate(90deg);
}
.primary-nav ul li ul ul {
top: -3px;
left: calc(100% + 3px);
}
.primary-nav ul li ul ul:before {
content: "";
position: absolute;
z-index: -1;
width: 12px;
height: 100%;
top: 0;
left: -11px;
}
.primary-nav ul li ul li {
display: block;
}
.primary-nav ul li ul li > a > span,
.primary-nav ul li ul li > a > i {
position: relative;
}
.primary-nav ul li ul li > a > span {
padding-right: 0;
}
.primary-nav ul li ul li > a > span .item_text {
position: relative;
z-index: 1;
}
.primary-nav ul li ul li span.item_text::before {
content: "";
position: absolute;
z-index: 1;
transform-origin: left center;
background-color: var(--pembe-submenu-color);
top: auto;
bottom: 1px;
height: 1px;
width: 100%;
opacity: 0;
left: 0;
right: auto;
transform: scaleX(0);
transition: all 0.4s, opacity 0.3s 0.1s;
}
.primary-nav ul li ul li[class*=current] > a .item_text::before, .primary-nav ul li ul li.menu-item:hover > a .item_text::before {
transform: scaleX(1);
opacity: 1;
background-color: var(--pembe-primary-color);
transition: all 0.4s, opacity 0.3s;
}
.primary-nav ul li ul li:hover ul {
top: -28px;
}
@media (max-width: 1500px) {
.primary-nav ul li ul li:hover ul {
top: -18px;
}
}
.primary-nav ul li ul .menu-item {
line-height: inherit;
}
.primary-nav ul li ul .menu-item a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3px 40px 3px 40px;
opacity: 1;
position: relative;
transition: all 0.4s;
}
@media (max-width: 1500px) {
.primary-nav ul li ul .menu-item a {
padding: 2px 25px 2px 25px;
}
}
.primary-nav ul li ul .menu-item[class*=current] > a, .primary-nav ul li ul .menu-item:hover > a {
color: var(--pembe-primary-color);
}
.primary-nav ul li ul,
.primary-nav ul li div.mega-menu-container {
display: block;
position: absolute;
z-index: 555;
top: calc(100% + 25px);
left: -21px;
min-width: 300px;
margin-top: 0;
margin-left: 0;
border-radius: 0;
padding: 28px 0;
text-align: left;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: 0.3s ease-in-out;
box-shadow: unset;
}
@media (max-width: 1500px) {
.primary-nav ul li ul,
.primary-nav ul li div.mega-menu-container {
left: -10px;
padding: 18px 0;
min-width: 250px;
}
}
.primary-nav ul li:hover > ul,
.primary-nav ul li:hover > div.mega-menu-container {
z-index: 556;
top: calc(100% + 0px);
opacity: 1;
visibility: visible;
}
.primary-nav ul li:hover > ul.mega-menu > ul.mega-menu, .primary-nav ul li:hover > ul.mega-menu > li > ul.mega-menu,
.primary-nav ul li:hover > ul > ul.mega-menu,
.primary-nav ul li:hover > ul > li > ul.mega-menu,
.primary-nav ul li:hover > div.mega-menu-container.mega-menu > ul.mega-menu,
.primary-nav ul li:hover > div.mega-menu-container.mega-menu > li > ul.mega-menu,
.primary-nav ul li:hover > div.mega-menu-container > ul.mega-menu,
.primary-nav ul li:hover > div.mega-menu-container > li > ul.mega-menu {
opacity: 1;
visibility: visible;
}
.primary-nav ul li ul:not(.mega-menu) li.menu-item-has-children > a > .menu-item__plus {
margin-top: -2px;
margin-right: 0;
font-size: 9px;
transform: rotate(0);
color: #8f9d8f;
transition: 0.3s;
}
.primary-nav ul li ul:not(.mega-menu) li.menu-item-has-children[class*=current] > a > .menu-item__plus, .primary-nav ul li ul:not(.mega-menu) li.menu-item-has-children.menu-item:hover > a > .menu-item__plus {
color: var(--pembe-primary-color);
}
.primary-nav > .menu > .menu-item:nth-last-child(1) > .sub-menu {
right: 0;
}
.primary-nav > .menu > .menu-item:nth-last-child(1) > .sub-menu,
.primary-nav > .menu > .menu-item:nth-last-child(1) > .sub-menu .sub-menu {
left: auto;
}
.primary-nav > .menu > .menu-item:nth-last-child(1) > .sub-menu .sub-menu {
right: calc(100% + 3px);
}
.primary-nav > .menu > .menu-item > .sub-menu.wgl-submenu-position-left {
left: auto !important;
right: 0 !important;
}
.primary-nav > .menu > .menu-item > .sub-menu.wgl-submenu-position-right {
left: 0 !important;
right: auto !important;
}
.primary-nav ul.sub-menu.wgl-submenu-position-left {
left: auto !important;
right: 100% !important;
}
.primary-nav ul.sub-menu.wgl-submenu-position-right {
left: 100% !important;
right: auto !important;
}
.admin-bar .wgl-sticky-header {
top: 32px;
}
.admin-bar .wgl-theme-header .woo_mini_cart {
max-height: calc(100% - 32px - 30px);
margin-top: 32px;
}
@media (max-width: 599px) {
.admin-bar .wgl-theme-header, .admin-bar .wgl-theme-header.header_overlap {
top: 0;
}
}
.primary-nav ul li.mega-menu-links > ul {
padding: 0;
box-sizing: border-box;
width: 1170px;
display: flex;
flex-wrap: wrap;
}
.primary-nav ul li.mega-menu-links > ul > li {
float: left;
box-sizing: border-box;
margin: 34px 0 30px;
padding: 0;
font-size: 16px !important;
font-weight: 600 !important;
text-transform: capitalize;
}
.primary-nav ul li.mega-menu-links > ul > li:after {
content: unset;
display: none;
position: absolute;
top: 30px;
right: 0;
width: 1px;
height: calc(100% - 60px);
background: unset;
}
.primary-nav ul li.mega-menu-links > ul > li:hover ~ li {
z-index: 0;
}
.primary-nav ul li.mega-menu-links > ul > li.hide-mega-headings > a {
display: none;
}
.primary-nav ul li.mega-menu-links > ul > li:hover > a > span {
background: none !important;
}
.primary-nav ul li.mega-menu-links > ul > li > a {
position: relative;
padding: 4px 15px 0;
}
.primary-nav ul li.mega-menu-links > ul > li > a > span {
padding-left: 0 !important;
pointer-events: none;
}
.elementor-widget-wgl-flipbox.a-left .wgl-flipbox .wgl-image-box_img {
margin-right: auto;
}
.elementor-widget-wgl-flipbox.a-center .wgl-flipbox .wgl-image-box_img {
margin-left: auto;
margin-right: auto;
}
.elementor-widget-wgl-flipbox.a-right .wgl-flipbox .wgl-image-box_img {
margin-left: auto;
} .elementor-widget-wgl-gallery .wgl-gallery_items:not(.gallery-carousel) {
display: flex;
flex-wrap: wrap;
}
.elementor-widget-wgl-gallery .wgl-gallery_items.gallery-justified .wgl-gallery_item {
position: absolute;
box-sizing: content-box;
width: 100%;
height: 100%;
}
.elementor-widget-wgl-gallery .wgl-gallery_item-wrapper > a {
display: flex;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
flex-direction: column;
}
.elementor-widget-wgl-gallery .wgl-gallery_item {
position: relative;
z-index: 1;
overflow: hidden;
}
.elementor-widget-wgl-gallery .wgl-gallery_item::before, .elementor-widget-wgl-gallery .wgl-gallery_item::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transition: 0.4s;
}
.elementor-widget-wgl-gallery .wgl-gallery_item::after {
content: "\f115";
display: flex;
align-items: center;
justify-content: center;
font-family: "Flaticon";
font-size: 18px;
font-weight: normal;
color: #ffffff;
background-color: var(--pembe-secondary-color);
opacity: 0;
}
.elementor-widget-wgl-gallery .wgl-gallery_image-info {
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
transition: 0.4s;
opacity: 0;
visibility: hidden;
}.portfolio__item .item__wrapper {
border-radius: unset;
}
.portfolio__item .item__wrapper .item__image {
position: relative;
overflow: hidden;
}
.portfolio__item .item__wrapper .item__image::before, .portfolio__item .item__wrapper .item__image::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
transition: 0.35s;
}
.portfolio__item .item__wrapper .item__image::after {
opacity: 0;
}
.portfolio__item .item__wrapper:hover .item__image::after {
opacity: 1;
}
.portfolio__item .item__image {
border-radius: inherit;
transition: 0.4s;
}
.portfolio__item .item__image img {
border-radius: inherit;
transition: inherit;
}
.portfolio__item .item__image:empty {
height: 320px;
background-color: currentColor;
}
.portfolio__item .description__wrapper {
width: 100%;
color: #ffffff;
transition: 0.3s;
}
.portfolio__item .item__title .title {
font-size: var(--pembe-h6-font-size);
line-height: 1.3;
font-weight: 500;
color: #ffffff;
}
.portfolio__item .item__title .title a,
.portfolio__item .item__title .title span {
position: relative;
font: inherit;
color: inherit;
text-transform: inherit;
transition: 0.4s;
}
.portfolio__item .item__title .title a {
--pembe-title_line_size: 1px;
background-repeat: no-repeat;
background-size: 0 var(--pembe-title_line_size);
background-position: 100% 100%;
background-image: linear-gradient(90deg, currentColor, currentColor);
transition: 0.3s, background-position 0.2s, background-size 0.5s 0.1s ease-in-out;
}
.portfolio__item .item__title .title a:hover {
color: var(--pembe-header-font-color);
background-position: 0 100%;
background-size: 100% var(--pembe-title_line_size);
transition: 0.3s, background-position 0s, background-size 1.3s ease-in-out;
}
.portfolio__item .overlay {
display: flex;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
color: #ffffff;
opacity: 0;
transition: 0.5s;
}
.portfolio__item .overlay i {
font-size: 17px;
margin: auto;
height: 56px;
line-height: 56px;
width: 56px;
text-align: center;
border-radius: 56px;
background-color: var(--pembe-primary-color);
}
.portfolio__item .portfolio_link {
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 24px;
opacity: 0;
}
.portfolio__item .portfolio_link, .portfolio__item .portfolio_link-icon {
transition: 0.5s;
}
.portfolio__item .gallery_mode {
position: relative;
overflow: hidden;
}
.portfolio__item .gallery_mode .portfolio_link {
justify-content: center;
align-items: center;
}
.portfolio__item .gallery_mode .item__image img {
display: block;
}
.portfolio__item .gallery_mode .item__image::before, .portfolio__item .gallery_mode .item__image::after {
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
.portfolio__item .gallery_mode .item__image::after {
background-color: rgba(255, 255, 255, 0.8);
}
.portfolio__item .gallery_mode:hover .overlay {
opacity: 1;
}
.portfolio__item .post_meta-wrap {
margin-top: 15px;
margin-bottom: 0;
}
.portfolio__item .item__description {
width: 100%;
}
.portfolio__item .item__description:empty {
display: none;
}
.portfolio__item.additional-post .item__wrapper {
display: flex;
height: 100%;
}
.portfolio__item.additional-post .item__button {
position: absolute;
z-index: 1;
border: solid 2px var(--pembe-primary-color);
border-radius: 3px;
padding: 13px 40px;
font-size: 14px;
font-weight: bold;
}
.portfolio__item.additional-post .item__button:hover {
color: #ffffff;
background-color: var(--pembe-primary-color);
}
.portfolio__item.swiper-slide {
display: inline-block;
}
.description_under_image, .description_right_of_the_image {
position: relative;
z-index: 1;
}
.wgl-service-sat .elementor-icon i {
display: inline;
}
.wgl-service-sat .wgl-widget_wrapper.elementor-image-box-img {
height: 100%;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.wgl-service-sat .wgl-image-box_img > span {
display: flex;
}

.wgl-service-sat:hover .wgl-services_circle-wrapper:nth-child(1), .wgl-service-sat:hover .wgl-services_circle-wrapper:nth-child(2) {
animation-play-state: running;
}
@keyframes service_hexagon_1 {
0% {
transform: rotate(90deg);
}
100% {
transform: rotate(450deg);
}
}
@keyframes service_hexagon_2 {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(270deg);
}
} .admin-bar .wgl-showcase-height-full .wgl-showcase.slide-showcase .showcase__wrapper {
height: calc(100vh - 32px);
}
.elementor-widget-wgl-showcase .wgl-double-heading .dblh__title-1 {
color: #fff;
}
.elementor-widget-wgl-showcase.dbl-heading-right .dblh__subtitle:before {
display: none;
}
.elementor-widget-wgl-showcase.dbl-heading-left .dblh__subtitle:after {
display: none;
}
.elementor-widget-wgl-showcase.wgl-showcase-height-full .wgl-showcase.slide-showcase .showcase__wrapper {
height: 100vh;
}
.elementor-widget-wgl-showcase .wgl-showcase {
position: relative;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__wrapper {
position: relative;
width: 100%;
display: inline-block;
visibility: hidden;
vertical-align: top;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase.showcase__init .showcase__wrapper {
visibility: visible;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__title-inner {
transition: inherit;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 39%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
@media (max-width: 992px) {
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles {
width: 100% !important;
}
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles::-webkit-scrollbar {
display: none;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles .showcase__title {
display: inline-block;
padding: 0 40px 0 12px;
margin: 14px 0;
transition: all 0.45s;
max-width: max-content;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles .showcase__title:first-child {
margin-top: auto !important;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles .showcase__title:last-child {
margin-bottom: auto !important;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles .showcase__title.active .title_1st {
color: var(--pembe-secondary-color);
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles .showcase__title .title_1st {
display: inline-block;
font-size: 40px;
line-height: 1.3;
font-weight: 400;
color: var(--pembe-header-font-color);
letter-spacing: 0.025em;
transition: all 0.4s;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__titles .showcase__title .subtitle {
position: relative;
font-size: 24px;
line-height: 1.25em;
font-weight: 400;
font-family: var(--pembe-content-font-family);
top: -20px;
right: -18px;
color: var(--pembe-header-font-color);
transition: all 0.4s;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__images {
position: relative;
width: 61%;
height: 100%;
overflow: hidden;
margin-left: auto;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__images .showcase__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
animation: wgl-split-to-left 0.7s cubic-bezier(0.81, 0.065, 0.21, 1) forwards;
transition: opacity 0s 0.7s;

}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__images .showcase__image:hover:before {
opacity: 0;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__images .showcase__image:hover:after {
opacity: 1;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__images .showcase__image:before, .elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__images .showcase__image:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transition: 0.4s;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__images .showcase__image img {
display: none;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__images .showcase__image.active {
opacity: 1;
z-index: 1;
transition: opacity 0s;
animation: wgl-split-from-left 0.7s cubic-bezier(0.81, 0.065, 0.21, 1) forwards;
}
.elementor-widget-wgl-showcase .wgl-showcase.slide-showcase .showcase__button {
display: inline-block;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase {
display: flex;
flex-direction: column;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__wrapper {
position: relative;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__title,
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__button {
position: relative;
z-index: 2;
transition: z-index 0s 0.1s;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__image {
--wgl-image-position: 57%;
position: absolute;
top: 50%;
height: auto;
left: var(--wgl-image-position);
z-index: 4;
visibility: hidden;
opacity: 0;
transform: translate(calc( var(--wgl-image-position) * 0), -40px);
transform-origin: top center;
pointer-events: none;
transition: all 0.45s;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__image img {
max-width: unset;
width: 366px;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .subtitle {
position: relative;
font-size: 48px;
line-height: 1.25em;
font-weight: 400;
font-family: var(--pembe-content-font-family);
color: #b1b1b1;
margin-right: 0.4em;
transition: all 0.4s;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .title_1st {
display: inline-block;
font-size: 49px;
line-height: 1;
font-weight: 400;
color: var(--pembe-header-font-color);
letter-spacing: 0.025em;
transition: all 0.4s;
font-family: 'Bona Nova';
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__link {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 6;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content {position: relative;padding: 9px 89px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 2px;width: 100%;}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase:not(:hover) .showcase__content.active_default .showcase__title,
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase:not(:hover) .showcase__content.active_default .showcase__button,
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content:hover .showcase__title,
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content:hover .showcase__button {
position: relative;
z-index: 3;
transition: z-index 0s 0s;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase:not(:hover) .showcase__content.active_default .title_1st, .elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase:not(:hover) .showcase__content.active_default .subtitle,
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content:hover .title_1st,
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content:hover .subtitle {
/*color: var(--pembe-secondary-color);*/
color: red;
}
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase:not(:hover) .showcase__content.active_default .title_1st,
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content:hover .title_1st {
color: #779A65;
}

.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content:hover .title_1st {color: #779A65;transform: skew(-10deg);font-family: 
    --pembe-h6-font-family: Bona Nova;font-size: 45px;}

.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase:not(:hover) .showcase__content.active_default .showcase__image,
.elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content:hover .showcase__image {opacity: 1;transform: translate(calc( var(--wgl-image-position) * 0), -42%) skewY(0) scaleZ(1);visibility: visible;}
.elementor-widget-wgl-showcase .wgl-showcase .showcase__button {
position: relative;
}
.elementor-widget-wgl-showcase .wgl-showcase .showcase__button .wgl-showcase_button.icon-read-more {
line-height: 0;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s;
will-change: transform;
background-color: transparent;
color: var(--pembe-secondary-color);
border-radius: 50%;
}
.elementor-widget-wgl-showcase .wgl-showcase .showcase__button .wgl-showcase_button.icon-read-more i, .elementor-widget-wgl-showcase .wgl-showcase .showcase__button .wgl-showcase_button.icon-read-more span {
text-align: center;
display: inline-block;
box-sizing: content-box;
transition: 0s;
}
.elementor-widget-wgl-showcase .wgl-showcase .showcase__button .wgl-showcase_button.icon-read-more i:before, .elementor-widget-wgl-showcase .wgl-showcase .showcase__button .wgl-showcase_button.icon-read-more span:before {
display: block;
transition: transform 0.4s;
will-change: transform;
line-height: inherit;
}
.elementor-widget-wgl-showcase .wgl-showcase .showcase__button .wgl-showcase_button.icon-read-more i.flaticon-long-next,
.elementor-widget-wgl-showcase .wgl-showcase .showcase__button .wgl-showcase_button.icon-read-more i.flaticon-long-prev {
height: 1em;
width: 1em;
min-width: 1em;
line-height: 1em;
}

@media only screen and (max-width: 600px) {
    .elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__content{
        padding: 9px 60px;
    }
    .elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .showcase__image{
        display: none;
    }
    .elementor-widget-wgl-showcase .wgl-showcase.interactive-showcase .title_1st{
        font-size: 34px;
    }
    .project-btn{
        margin: 0px 0px 0px 86px;
    }
    .arrow3{
        display: none;
    }
    .arrow3{
        margin-bottom: 0px;
    }
    .icons-center{margin: 0px -134px 0px -61px;
    padding: 0px 30px 38px;}
    .icons{padding: 0px;margin-bottom: 0px;}

    .icon-last{margin: 0px -134px 0px -61px;
    padding: 0px 30px 38px;}
}

.elementor-widget-wrap>.elementor-element {
    width: 100%;
}
.elementor-1327 .elementor-element.elementor-element-9205f20 .interactive-showcase {
    align-items: center;
}

a{
    color: black;
}

.reload{
    background: none;
}

.menumobis {
    display: none;
}

<!----------------------------------------------------------------------------->

.darkHeader {
    position: fixed;
    z-index: 999;
    width: 100%;
    background: #000;
}
.clearHeader {
    position: absolute;
    z-index: 999;
    width: 100%;
}
.topheader {
    width: 100%;
    float: left;
    line-height: 60px;
}
.menuline {
    width: 100%;
    float: left;
  /*  background: #c6c6c666;*/
}
.menuline2 {
    width: 100%;
    float: left;
   background: white;
}
.logodesk{width: 65px;height: 100%;float: left;}
.menu_contaner {
   /* max-width: 664px;*/
    margin: 0px auto;
}
.bgtoggal {
    background: transparent; !important;
}
.toggle, [id^=drop] {
    display: none;
}
nav ul {
   /* float: right;*/
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
}
nav a {
   display: block;
    padding: 12px 16px;
    color: #D9916A;
    font-size: 20px;
    text-decoration: none;
    font-family: sans-serif;
}
nav ul ul {
    display: none;
    position: absolute;
    top: 53px;
}
nav ul ul li {
    width: 320px;
    float: none;
    display: list-item;
    position: relative;
    background: #000;
    float: left;
    clear: both;
}
nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
}
nav ul ul li a {
    padding: 5px 20px;
    font-size: 15px;
    border-bottom: 1px solid #141414;
}
nav a:hover {
    background-color: #000000;
    color: #fff;
    text-decoration: none;
}
nav ul li ul li:hover {
    background: #000000;
}

.w88 {
    width: 85%;
    float: left;
}
nav ul li:hover > ul {
    display: inherit;
}

.w88 {
    width: 85%;
    float: left;
}



@media all and (max-width : 767px) {
    .mobile_contact{display: block;}
    .desk_contact {display: none;}
    .logodesk{display: none;}
    .mimg {width: 100%; margin-right: 0;}
    .menuline {width: 100%; float: left; background:transparent;}
    .mobi {display: none;}
    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }

    .img_info {
    width: 100%;
    float: left;
    margin-right: 0px;
    }

    .textinfo {
    width: 100%;
    float: left;
    }

    .chatmenu {display: none;}
    .why_box {
        background: #fff;
        padding: 20px 0 !important;
        border-radius: 4px;
        margin: 15px 0;
        font-size: 13px  !important;
    }

    .carousel {padding-top: 111px;}
    .topheader {background: #000;}
    .exp {display: none;}
    .section_about {padding-top: 0px !important;}

    nav ul ul li {float: left;}
    nav ul li {background:#313131; margin-bottom: 1px;}

    nav {
        margin: 0;
    }
    nav a{ padding: 3px 16px;}

    li > a:only-child:after {
    content: '';
}

    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a,
    .menu {
        display: none;
    }

    .menu a{color: white;}

    /* Stylinf the toggle lable */
    .toggle {
        display: block;
        padding:17px 17px;  
        color:#FFF;
        font-size:20px;
        text-decoration:none;
        border:none;
        font-weight: normal;
        cursor: pointer;
        margin-bottom: 0px !important;
    }

    .toggle:hover {
        background-color: transparent;
    }

    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul {
        display: block;
    }

    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
        }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        background-color: #000000;
    }
  
    nav ul li ul li .toggle,
    nav ul ul a,
  nav ul ul ul a{
        padding:5px 20px;   
        color:#FFF;
        font-size:17px; 
        margin-bottom: 0px;
    }
  
  
    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #646464; 
    }

    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position:static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }
        
    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
        
    /* Fisrt Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
    }

    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */ 

    }

    .black{
        color: black;
    }

    nav ul li a{
        color: black;
    }

    h3
    {font-size: 17px;
    font-weight: 400;}