/*
Theme Name: Christmas Event Pro
Theme URI: https://www.theclassictemplates.com/wp-themes/event-planner-wordpress-theme/
Author: Theclassictemplates
Author URI: https://www.theclassictemplates.com/
Description:
Version: 0.0.1
Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 5.6
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: christmas-event-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments

Christmas Event Pro WordPress Theme has been create:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #44D8E2;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root {
--font-Poppins: 'Poppins', sans-serif;
}d by Theclassictemplates(Theclassictemplates.net), 2023.
Christmas Event Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */


  html body {
    margin: 0;
    padding: 0;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    position: relative;
    color: var(--color-black);
    font-weight: 300;
    font-size: 15px;
    font-family: var(--font-Poppins);
    overflow-x: hidden;
    background-color:var(--color-white);
    overflow-x: hidden;
    width: 100%;
  }

.bypostauthor {
  font-weight: 600;
}
.wpcf7-spinner {
  display: none;
}
/*.sticky{
    position: unset;
}*/
/*--------- Site Loader --------------*/
h2{
  font-size: 52px;
  /* padding-right: 32%; */
  font-weight: 700;
  line-height: 70px;
}
    .preloader{
      display: flex;
      background: #DC143C;
      height: 100%;
      width: 100%;
      left: 0;
      bottom: 0;
      top: 0;
      position: fixed;
      z-index: 99999;
    }
    .preloader .loading-dot{
        width: 15px;
        height: 15px;
        margin: auto;
        border-radius: 50%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                    40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        animation: load 3s infinite linear;
    }
    @keyframes load{
        0% {
            transform: rotate(0deg);
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
        25%{
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        -40px -40px 0px 0px #fff,40px 40px 0px 0px #fff,-40px 40px 0px 0px #fff,40px -40px 0px 0px #fff;
        }
        50%{
            box-shadow: 0px -40px 0px 0px #fff,0px 40px 0px 0px #fff,-40px 0px 0px 0px #fff,40px 0px 0px 0px #fff,
                        -40px -40px 0px 0px #fff,40px 40px 0px 0px #fff,-40px 40px 0px 0px #fff,40px -40px 0px 0px #fff;
        }
        70%{
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        75%{
            width:10px;
            height:10px;
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        80%{
            background-color: #fff;
            width:40px;
            height:40px;
            transform: rotate(360deg);
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        85%{
            background-color: #fff;
            width:40px;
            height:40px;
            transform: rotate(360deg);
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        90%{
            background-color: #fff;
            width:10px;
            height:10px;
            transform: rotate(360deg);
            box-shadow: 0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,
                        0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff,0px 0px 0px 0px #fff;
        }
        95%{
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
        100%{
            transform: rotate(360deg);
            box-shadow: 0px 40px 0px 0px #fff,0px -40px 0px 0px #fff,40px 0px 0px 0px #fff,-40px 0px 0px 0px #fff,
                        40px 40px 0px 0px #fff,-40px -40px 0px 0px #fff,40px -40px 0px 0px #fff,-40px 40px 0px 0px #fff;
        }
    }

section#servicess,#offer,#howitwork {
    padding: 5% 0px;
}
.pricing-plan-box-outer{
  margin: 0 7%;
}
#about .leftimg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#about .leftimg{
-webkit-mask-image: url(assets/images/about/about-shape.png);
  mask-image: url(assets/images/about/about-shape.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  position: relative;
  width: auto;
  height: auto;
  margin: 35px;
}
#about .svgimg svg{
  width: 100%;
  height: 100%;
}
#about .svgimg{
  position: absolute;
  top: 0;
  left: 0;
  /* width: 600px; */
  /* height: 630px; */
  z-index: -1;
}
#servicess .sec_small_heading span{
  color: #fff;
}

.blogss .bolg-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.blogss .bolg-image{
  overflow: hidden;
  /* width: 100%; */
  height: 330px;
}
.blogss:hover img {
  transform: scale(1.07);
  overflow: visible;
  transition: 0.5s ease-in-out;
}




#menu-primary-menu li:hover ul.sub-menu {
    /* display: block; */
}
#menu-primary-menu li ul.sub-menu {
    /* transform-origin: top center;
    animation: translateX 300ms 60ms ease-in-out forwards; */
}
#menu-primary-menu >li:hover ul.sub-menu{
    animation-name: flipInY;
    animation-duration: 0.9s;
    animation-timing-function: ease-in-out;
    border-radius: 0;
}

#menu-primary-menu >li:hover ul.sub-menu {
    transition: all 0.5s;
}
#menu-primary-menu >li:hover ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    padding: 8px 0px;
}


@keyframes translateX {
  0% {
      opacity: 0;
      transform: translateX(60px);
  }
  80% {
      transform: translateX(-5px);
  }

  100% {
      opacity: 1;
      transform: translateX(0px);
  }
}




.btn-primary:before, .btn-primary:after {
  background-color: #000;
}
.btn-primary{
  position: relative;
  z-index: 1;
}
.btn-primary:after {
  top: auto;
  bottom: -4px;
}
.btn-primary:before, .btn-primary:after {
  content: "";
  background: #000;
  width: 30px;
  height: 7px;
  border-radius: 0;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  top: -4px;
  z-index: -1;
  transition: all 0.2s;
  opacity: 0;
}
.btn-primary:hover {
  color: #fff !important;
}
.btn-primary:hover {
  color: #fff;
  border-radius: 0px;
  background-color: transparent !important;
  box-shadow: none;
  transition: all 0.4s;
}
.btn-primary:hover:after {
  top: auto !important;
  bottom: 0;
}
.btn-primary:hover:before, .btn-primary:hover:after {
  top: 0;
  height: 50%;
  width: 100%;
  border-radius: 0px;
  transition-delay: 0.2s;
  opacity: 1;
  z-index: -1;
}