@charset "utf-8";
/*------------------------------------------------------------------
[PAD Changes Stylesheet]

Project: New Wave Hetty Kate
Version: 1
Last change: January 2024
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Common styles
2. Page loader / .page-loader
3. Typography
4. Buttons
5. Forms fields
6. Home sections / .home-section
    6.1. Home content
    6.2. Scroll down icon
    6.3. Headings styles
7. Compact bar / .nav-bar-compact
8. Classic menu bar / .main-nav
9. Sections styles / .page-section, .small-section, .split-section
10. Alternative services / .alt-service-grid
11. Team / .team-grid
12. Features
13. Benefits (Process)
14. Counters
15. Portfolio / #portfolio
    15.1. Works filter
    15.2. Works grid
    15.3. Works full view
16. Banner section
17. Testimonial
    18.1. Logotypes
18. Post previews (news section)
19. Newsletter
20. Contact section
    20.1. Contact form
21. Bottom menu / .bot-menu
22. Google maps  /.google-map
23. Footer / .footer
24. Blog
    24.1. Pagination
    24.2. Comments
    24.3. Sidebar
25. Shop
26. Pricing
27. Shortcodes
    27.1. Owl Carousel
    27.2. Tabs
    27.3. Tabs minimal
    27.4. Alert messages
    27.5. Accordion
    27.6. Toggle
    27.7. Progress bars
    27.8. Font icons examples
    27.9. Intro page
28. Special demos
29. Bootstrap multicolumn grid


/*------------------------------------------------------------------
# [Color codes]

# Black (active elements, links, text) #111
# Gray (text) #777
# Dark #111
# Dark Lighter #252525
# Gray BG #f4f4f4
# Gray BG Lighter #f8f8f8
# Mid grey #5f5f5f
# Borders #e9e9e9

# */


/*------------------------------------------------------------------
[Typography]

Body:               14px/1.6 "Open Sans", arial, sans-serif;
Headers:            Dosis, arial, sans-serif;
Serif:              "Times New Roman", Times, serif;
Section Title:      35px/1.3 "Open Sans", arial, sans-serif;
Section Heading:    24px/1.3 "Open Sans", arial, sans-serif;
Section Text:       15px/1.7 "Open Sans", arial, sans-serif;

-------------------------------------------------------------------*/


.mobile-on .desktop-nav ul li a {
    animation: none !Important;}


.bg-black {
  /* The image used */
  background-image: url('../img/bg-dark-silver.jpg');
  /* Full height */
  height: 100%; }

.bg-purple  {
  /* The image used */
  background-image: url('../img/bg-light-purple.jpg');
  /* Full height */
  height: 100%;} 
  
.bg-pink {
  /* The image used */
  background-image: url('../img/bg-light-hotpink.jpg');
  /* Full height */
  height: 100%;}   
}
  
.bg-purple, .bg-black, .bg-pink {
  /* Create the parallax scrolling effect */
  background-attachment: scroll;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.small-section-bg {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 140px 0;
}
.head-section-bg {
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 110px 0 40px;
}

.glitch {
    position: relative;
    font-size: 110px;
    font-family: 'indelibleregular', arial, sans-serif;
    transform: rotate(-10deg) translateX(-80%) translateY(-1%);
    z-index: 1;
    overflow:visible;
    letter-spacing: -0.08em;
    display: inline-block;
    color: #31231f !IMportant;
}

.glitch:after, .glitch:before {
    position: absolute;
    top: 0; 
    left: 0;
    transform: none; /* Center horizontally */
    background: transparent;
    width: 120%;
    content: attr(data-text);
    clip: rect(0, 900px, 0, 0);
    margin: 0;
    letter-spacing: -0.08em;
    display:inline-flex;
}
           
.glitch:after {
  animation: glitch-anim 2s infinite linear alternate-reverse;
  left: 1px;
  text-shadow: 1px 0 red;
}
.glitch:before {
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
  left: -1px;
  text-shadow: -1px 0 limegreen;
}
           
@keyframes glitch-anim {
  0%, 100% {
    clip: rect(0, 9999px, 0, 0);
  }
  10% {
    clip: rect(25px, 9999px, 85px, 0);
  }
  20% {
    clip: rect(15px, 9999px, 100px, 0);
  }
  30% {
    clip: rect(50px, 9999px, 150px, 0);
  }
  40%, 60% {
    clip: rect(20px, 9999px, 130px, 0);
  }
  50% {
    clip: rect(70px, 9999px, 200px, 0);
  }
  70%, 90% {
    clip: rect(40px, 9999px, 160px, 0);
  }
  80% {
    clip: rect(60px, 9999px, 190px, 0);
  }
}

@keyframes glitch-anim-2 {
  0%, 100% {
    clip: rect(0, 9999px, 0, 0);
  }
  10% {
    clip: rect(30px, 9999px, 75px, 0);
  }
  20% {
    clip: rect(20px, 9999px, 95px, 0);
  }
  30% {
    clip: rect(55px, 9999px, 145px, 0);
  }
  40%, 60% {
    clip: rect(25px, 9999px, 125px, 0);
  }
  50% {
    clip: rect(65px, 9999px, 195px, 0);
  }
  70%, 90% {
    clip: rect(45px, 9999px, 155px, 0);
  }
  80% {
    clip: rect(60px, 9999px, 180px, 0);
  }
}
    

           
@media (max-width: 498px) {
    .glitch {
        /* These properties encourage the text to split over two lines */
        word-wrap: break-word; 
        white-space: normal; 
        /* Adjust font size if needed to fit the smaller screen */
        font-size: 80px;}

    .glitch:after, .glitch:before {
        /* Ensure these elements still align with the glitch text */
        width: 100%;
        margin: 0;}
}        

@media (max-width: 810px) {
    .glitch {
        position: relative;
        font-size: 100px;
        font-family: 'indelibleregular', arial, sans-serif;
        transform: rotate(-10deg) translateX(-15%) translateY(40%);}
        .hero-text {transform:translateX(-15%) translateY(40%);}
        .reimagined {font-size:22px !important; color:black;
        transform: translateX(30%) translateY(-30%);
        text-shadow: 0 0 5px rgba(255, 255, 255, 1) !important;}
}
        
@media (max-width: 569px) {
    .glitch {font-size: 100px;}
}
        
@media (max-width: 469px) {
    .glitch {font-size: 90px;}
}
        
@media (max-width: 430px) {
    .glitch {
        font-size: 110px;
        transform: rotate(-12deg) translateX(-15%) translateY(30%);
        line-height: normal;
        margin-bottom: -40px;
        display:inline-block;}
    .hero-text {
        transform: translateX(-25%) translateY(90%);}
    .small-section-bg{padding-top:50px !Important;}
    
}
@media only screen and (max-width: 480px) {
.small-section {
    padding: 51px 0 !important;
}}

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Full viewport height */
    min-width: 100vw;
    background-image: url('../img/hero-01.jpg');
    background-size: cover;
    background-position: 70% center;
    background-repeat: no-repeat;
    text-align: center;
    
}
        
.home-section {
    background-color: #ececec;
    background-image: linear-gradient(to right, #e7eae9, #efeff1);
        }

.reimagined {
    color:black; 
    font-size:30px;
    letter-spacing:1em; 
    display:block;
        }

.hero-text {
    clear: both; /* Clear any floating elements */
    display: block;
        }
        
.reimagined {
    font-family: "Jost", sans-serif;
    font-size:22px; color:black;
    border-right: 2px solid; /* Simulates the cursor */
    white-space: nowrap; /* Keeps the text in one line */
    overflow: hidden; /* Hides the part of text that overflows the container's width */
    width: 0; /* Initial width of the container */
    animation: typing 2s steps(30, end) forwards;
    animation-delay: 1s;
        }

@keyframes typing {
    to { width: 100%; }
        }

.scroll-down-icon {
    width: 31px;
    height: 20px;
    font-weight: bold;}
        
.scroll-down:before {
    width: 40px;
    height: 40px;}   
        
        
        
b {font-weight:500 !IMPORTANT;}        
p {font-weight:300 !important;}        
       

.tpl-alt-tabs > li {
    width: 185px !Important; }


/*-- Navigation Menu --*/


.inner-nav ul li {color:black !important;}
.inner-nav ul li a {
    color: #000 !important;
font-family:'poppinsregular', sans-serif;
    font-weight:bold;}

.glow {

  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #fff, 0 0 30px #fff, 0 0 35px #fff;
  }
  to {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff, 0 0 60px #fff, 0 0 70px #fff;
  }
}

/*-- Resize Queries --*/

@media (min-width: 576px){
.container, .container-sm {
    max-width: 85% !Important;
}}

@media only screen and (max-width: 992px) {
.tpl-alt-tabs > li {
    width: 200px;
    margin-bottom: 50px !Important;
}}
@media only screen and (max-width: 768px) {}
.page-section {
    padding: 50px 0 !important;
}}

resp-480px {
    display: none;
}












.center-pad {margin:0 auto !Important;}


.footer-social-links a:before {border:0px !Important;}

.scroll-down:before {background:#fff !important;}
.scroll-down-icon {color:black!important;}
        
        



.inner-nav ul li a {
    color: black;}

mobile-nav {border:0px !Important;transform:skewX(20deg); background:#f5f6fd;
height:75px !important; }
mobile-nav.small-height {height:55px !important;}

.nav-logo-wrap .logo img {
    max-height: 100%;
    margin: 2px 0px 0px 20px;
}

.mobile-on .desktop-nav ul li a {
    height: 49px !important;
    line-height: 49px !important;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    text-align: left;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255, .065);
    color: #fff !important;
    font-size: 15px;
    font-family: 'poppinsregular', Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 0.06em;
}

/* Media query for mobile screens */
@media (max-width: 1024px) { /* Adjust 768px based on your mobile breakpoint */
    .small-section.parallax-2 {
        background-position: 50% 0 !important; /* Adjust this value as needed */
        background-size: cover; /* Ensures the image covers the entire section */
    }
}
@media only screen and (max-width: 480px){
.hs-line-11 {
    font-size: 30px !Important;
    letter-spacing: 0.2em;}
    .follow-social {display:block; margin:10px auto;}
    .follow-social-logo-insta {
        width: 210px !Important;
    height: auto !Important;
    margin-top: 0 !Important;}
    .follow-social-logo-fb {width: 199px!Important;
    height: auto!Important;
    margin-top: 0!Important;}
}

@media (max-width: 767px){
.col-sm-3 {
    border: 0px solid red !important;
    width: 50%;
    float: left;
}}
    


@media only screen and (max-width: 640px){
.tpl-alt-tabs > li {
    width: 36% !important;
    border: 0px solid yellow;
    margin: 10px;
}}
@media only screen and (max-width: 992px){
.tpl-alt-tabs > li {
    width: 32%;
    border: 0px solid green;
    padding: 10px 10px 25px 10px;
}}
@media (min-width: 768px){
.container {
    width: 100%;
}}

/*-- Extra Page Title Area --*/

.mod-breadcrumbs a {
   border-bottom: none;
}
.mod-breadcrumbs a:hover {
   color:yellow !Important;
}
/*-- Under Lightbox Image --*/
.mfp-title {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.04em;}

/*-- Sections --*/
.bg-dark {
    background-color: #000 !important;
}
.mt-custom-sect {padding:5px 0 50px 0;}

.small-section {
    position: relative;
    overflow: hidden; /* Ensure the pseudo-element doesn't extend outside the section */
}

.center-pad {border:0px solid red;}

/*-- Footer Social Links --*/

.footer-social-links a:hover{opacity:0.5;}
.footer-social-links a:hover:before{background: none!Important;}
.footer-social-links a:before{border: none;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;-webkit-transform: none;-moz-transform: none;-o-transform: none;-ms-transform: none;transform: none;-webkit-transition: none;-moz-transition: none;-o-transition: none;-ms-transition: none;transition: none;}

.footer-copy {margin-top: 5px;font-size: 11px;}

/*-- Copy and Fonts --*/
h2 {font-size:23px !important;}
.section-text {color:#dbdbdb !important; font-size:13px !important; font-family:'poppinsregular', Arial, sans-serif; letter-spacing:0.02em;}
.section-text-dark {color:#111; font-size:13px; font-family:'poppinsregular', Arial, sans-serif; letter-spacing:0.02em;line-height:20px;}
.section-text-dark-footer {color:#111; font-size:11px; font-family:'poppinsregular', Arial, sans-serif; letter-spacing:0.02em;line-height:20px;}
.section-text-statement {color:#dbdbdb; font-size:20px; font-family:'poppinsregular', Arial, sans-serif; letter-spacing:0.02em;}
.footer-made {color:#3d3d3d !important; font-size:9px; font-family:'poppinsregular', Arial, sans-serif; text-transform: uppercase; letter-spacing:0.04em;}
.footer-copy {
    letter-spacing: 0.06em;}
blockquote {margin: 0px 0px 20px 0px; font-family:'poppinsregular', Arial, sans-serif;}
blockquote footer {color: aliceblue; margin-top: -15px; font-family:'poppinsregular', Arial, sans-serif;}
blockquote p {font-size: 20px; font-family:'poppinsregular', Arial, sans-serif;}
.aim-text {display:block; width: 95%;margin:0 auto;}
.aim-text p {
    color: rgb(255,255,255,0.8);
    font-size: 17px !important;
    text-align: center;
}

.team-item-role {color:bisque !Important;margin-bottom: 30px;}


/*-- ALL Links --*/
a {
    border-bottom: none;
}
a:hover {
    border-bottom: none;
    opacity:0.5;
}

/*-- Animations --*/

@keyframes colorCycle {
0%, 100% {color: hotpink;}
25% {color: lightblue;}
50% {color: lightsteelblue;}
75% {color: lightcoral;}
}
.link-to-top i {animation: colorCycle 5s infinite;}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; /* Adjust the height as needed */
}

/* Typing effect style */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* Cursor effect style */
@keyframes blink {
  50% { border-color: transparent; }
}

/* Container for the typing text */
.typewriter {
  font-family: monospace;
    text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden; /* Keeps the container from expanding */
  border-right: 3px solid; /* Cursor */
  width: fit-content; /* Adjust width as needed */
  animation: 
    typing 3s steps(40, end), /* 40 is the number of characters in your text */
    blink .75s step-end infinite; /* Blinking cursor effect */
}

.gradient-text {
    background: linear-gradient(to right, #a3ddf3, #E0D7FF, #FFCCE1, #D7EEFF, #FAFFC7);
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient-animation 5s ease infinite;
    background-size: 200% 100%;
    background-clip: text;
}

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

.gradient-text-2 {
    background: linear-gradient(to right, #a3ddf3, #E0D7FF, #FFCCE1, #D7EEFF, #FAFFC7);
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient-animation 5s ease infinite;
    background-size: 200% 100%;
    background-clip: text;
}

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