/*
Theme Name: Graphic Design Portfolio Pro
Theme URI: https://www.themeignite.com//products/portfolio-wordpress-theme
Author: Themeignite
Author URI: https://www.themeignite.com//
Description: The Graphic Design Portfolio WordPress Theme is a sleek, modern, and visually compelling solution crafted specifically for graphic designers, creative studios, digital artists, freelancers, and agencies. Whether you're building a personal brand, showcasing client projects, or presenting a design agency’s portfolio, this theme offers a dynamic and flexible platform to highlight your creative work with impact.
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: graphic-design-portfolio-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments

Graphic Design Portfolio Pro WordPress Theme has been created by Themeignite (https://www.themeignite.com/), 2023.
Graphic Design Portfolio Pro WordPress Theme is released under the terms of the GNU GPL.
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* CSS Variables */
:root {
  --color-white: #ffffff;
  --color-black: #02050A;
  --color-primary:#55E6A5;
  --color-secondary:#031B4E;
  --font-Outfit: "Outfit", sans-serif;
}

/* 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-Inter);
    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: var(--color-primary);
    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;
    border-radius: 20px;
  }
  .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%, var(--color-primary) 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: var(--color-primary);
  background-image: radial-gradient(circle farthest-corner at 10% 20%, #ffffff94 0%, var(--color-primary) 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: var(--color-primary);
  background-image: radial-gradient(circle farthest-corner at 10% 20%, #ffffff94 0%, var(--color-primary) 100.3%);
}
.menu-item-129 a,
.menu-item-130 a {
	background-color: #55e6a5 !important;
	color: #000  !important;
	border-radius: 30px !important;
	padding: 6px 18px !important;
	transition: all 0.6s;
}
#footer .menu-item-130 a{padding:6px 18px !important;}
.menu-item-129 a:hover,
.menu-item-130 a:hover {
	background-color: #fff !important;0
    	color: #000 !important;
}

.mtsnb .mtsnb-container {
    padding: 5px 0px;
}
.mtsnb .notification-bar a {
	font-weight: 600;
	background: #111;
	border-radius:6px;
	color: #fff;
	padding: 5px 8px;
	margin: 5px 0 5px 10px;
	display: inline-block;
}
.site-header .stickynavbar {
	top: 50px;
}
.home #header_navigation,
#header_navigation {
	top: 50px;
}
@media only screen and (min-width: 250px) and (max-width: 767px) {
	.sidenav {
		top: 90px;
	}
	.home #header_navigation,
#header_navigation {
	top: 0px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.home #header_navigation, #header_navigation {
		top: 80px;
	}
	.sidenav {
		top: 90px;
	}
}