/*
Theme Name: Classic Portfolio Pro 
Theme URI: https://www.theclassictemplates.com/products/portfolio-wordpress-theme
Author: Theclassictemplates
Author URI: https://www.theclassictemplates.com/
Description: Premium Portfolio WordPress Theme is a theme all creatives need to display their work to potential clients. Be it writers, designers, illustrators, cartoonists, web developers, photographers, architects, fashion designers, or marketing and advertising professionals, if you have a portfolio to show, this theme is all you need. Tell your clients about what you do and yourself under “About Me” as it becomes your call-to-action (CTA) tool. With sleek, modern design layouts, well-structured configuration, this theme is cross-platform and all-browsers compatible, making it responsive. The bug and breach free theme reassures for a faster loading website that won’t keep your clients waiting for pages to load.
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: classic-portfolio-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments

Classic Portfolio Pro WordPress Theme has been create:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #9427f4;
}

@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.
Classic Portfolio Pro WordPress Theme is released under the terms of GNU GPL

#slider .center-image .customer {
    display: none !important;
}

/* Or try targeting by the gradient background */
[style*="linear-gradient"] {
    display: none !important;
}
    /* Basic styling */
    padding: 10px 20px !important;
    border-radius: 5px !important;
}

/* Hide pseudo-elements that might create borders */
.btn-info::before,
.btn-info::after {
    display: none !important;
    content: none !important;
}

/* Hide the icon */
.btn-info i,
.btn-info .fas,
.btn-info .fa-chevron-circle-right {
    display: none !important;
}

/* Target container elements */
.header-nav,
.headerbar,
.menubar,
.right_menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Basic Style */

:root {
    --color-primary: #9427f4 !important;
}

/* Or target the button directly if the above doesn't work */
.btn-info {
    background-color: #9427f4 !important;
    border-color: #9427f4 !important;
}



  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 --------------*/

    .preloader{
      display: flex;
      background: #FF5F6A;
      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;
        }
    }








  .recentwork_box .recentwork-image:before, .recentwork_box .recentwork-image:after, .recentwork_box .overlay:before, .recentwork_box .overlay:after {
    background-color: #000;
  }
  .recentwork_box .recentwork-image:before, .recentwork_box .recentwork-image:after, .recentwork_box .overlay:before, .recentwork_box .overlay:after {
    content: '';
    background: #ffd317;
    opacity: 0.4;
    height: 100%;
    width: 25%;
    transform: translateY(-100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transition: all 0.3s;
  }
  .recentwork_box .recentwork-image .overlay:after {
    transition-delay: 0s;
  }
  .recentwork_box .recentwork-image .overlay:before {
    left: 50%;
  }
  .recentwork_box .recentwork-image .overlay:after {
    left: 75%;
  }
  .recentwork_box .recentwork-image:before {
    left: 25% ! important;
  }
  .recentwork_box .recentwork-image {
    overflow: hidden;
  }
  .recentwork_box .recentwork-image img{
    transform: scale(1);
    transition: all 1s ease 0s;
  }

  .recentwork_box:hover .recentwork-image:before, .recentwork_box:hover .recentwork-image:after, .recentwork_box:hover .overlay:before, .recentwork_box:hover .overlay:after{
    transform: translateY(0%);
  }

  .recentwork_box:hover .recentwork-image .overlay:after {
    transition-delay: 0s;
  }
  .recentwork_box:hover .recentwork-image:before {
    transition-delay: 0.225s;
  }
  .recentwork_box:hover .recentwork-image .overlay:before {
    transition-delay: 0.15s;
  }
  .recentwork_box:hover .recentwork-image:after {
    transition-delay: 0.05s;
  }


  .blogs .bolg-image{
    overflow: hidden;
  }
  .blogs:hover .bolg-image img {
    transform: scale(1.07);
    overflow: visible;
    transition: 0.5s ease-in-out;
}



.process-step-box:hover img {
    transition: 1s;
    -webkit-transition: 0.70s;
    -moz-transition: 0.70s;
    -ms-transition: 0.70s;
    -o-transition: 0.70s;
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}
.image-box img{
  animation: pulse 10s infinite ease-in-out alternate;
}
.circle img{
  animation: pulse 1s infinite ease-in-out alternate;
}



#menu-primary-menu li:hover ul.sub-menu {
  left: auto;
  top: 35px;
  text-align: left;
  -ms-animation: zoomIn .3s ease-in-out;
  -webkit-animation: zoomIn .3s ease-in-out;
  animation: zoomIn .3s ease-in-out;
}

ul.sub-menu, #menu-primary-menu li ul.sub-menu, #menu-primary-menu li ul.sub-menu:before, #menu-primary-menu li ul.sub-menu:after {
  background-image: radial-gradient(circle farthest-corner at 10% 20%, #9427f4 0%, #ffffff94 100.3%);
}
#menu-primary-menu li ul.sub-menu:before {
  content: "";
  position: absolute;
  right: 0px;
  top: -5px;
  height: 3px;
  width: 100%;
  z-index: 99;
  border-radius: 35%;
  opacity: 1;
  transition: .5s;
  background: #9427f4;
  background-image: radial-gradient(circle farthest-corner at 10% 20%, #ffffff94 0%, #9427f4 100.3%);
}
#menu-primary-menu li ul.sub-menu:after {
  content: "";
  position: absolute;
  right: 0px;
  bottom: -5px;
  height: 3px;
  width: 100%;
  z-index: 99;
  border-radius: 35%;
  opacity: 1;
  transition: .5s;
  background: #9427f4;
  background-image: radial-gradient(circle farthest-corner at 10% 20%, #ffffff94 0%, #9427f4 100.3%);
}