/*
Theme Name: hello elementor child
Theme URI: 
Description: Child theme of hello-elementor theme for the Hello Elementor theme
Author: <a href="https://elementor.com/?utm_source=wp-themes&#038;utm_campaign=author-uri&#038;utm_medium=wp-dash">Elementor Team</a>
Author URI: 
Template: hello-elementor
Version: 3.4.4
*/

/* Generated by Orbisius Child Theme Creator (https://orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Thu, 25 Sep 2025 07:23:29 +0000 */ 
/* The plugin now uses the recommended approach for loading the css files.*/






        /* Hamburger Button */
        .hamburger {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 40px;
            height: 25px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1002;
            transition: all 0.3s ease;
        }

        .hamburger:hover {
            transform: scale(1.1);
        }

        .hamburger span {
            display: block;
            height: 3px;
            width: 100%;
            background: #fff;
            border-radius: 3px;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            transform-origin: center;
        }

        /* Hamburger Animation */
      
       .hamburger-menubx button.hamburger span {
    transition: all 1s !important;
}

        .hamburger.active { filter:brightness(0) invert(1); }

        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 6px); margin-top: 5px;
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
            transform: translateX(20px);
        }

        .hamburger.active span:nth-child(3) {
            transform: rotate(-46deg) translate(11px, -11px);
        }

        /* Overlay */
        .overlay {
            position: fixed; display:none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
/*             background:#c2c2c221; backdrop-filter: blur(10px); */
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 22;
        }

        .overlay.active {
            visibility: visible;
            opacity: 1;
        }

        /* Sidebar */
        .sidebar {
            position: fixed;
            top: 0; padding-top:25px;
/* 			display: flex; flex-direction: column; justify-content: space-between; */
            right: -400px;
            width:400px; padding-left: 16px; padding-right:25px;
            height: 100vh;
            background:#035D5D;
            backdrop-filter: blur(20px);
            box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
            transition: right 1s cubic-bezier(0.25, 0.8, 0.25, 1);
            z-index:2;
            overflow-y: scroll;
        }

 .sidebar .sidebar-header {}

        .sidebar.active {
            right: 0;
        }

        .sidebar-header {
            padding: 25px 20px 20px 20px;
/*             border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
            position: relative;
        }

        .close-btn {
            position: absolute;
            top: -5px;
            right: 15px;
            background: none;
            border: none;
            font-size: 40px;
            cursor: pointer;
            color: #666;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .close-btn:hover {
            background: rgba(0, 0, 0, 0.1);
            transform: rotate(90deg);
        }

        .sidebar-logo {
            font-size: 22px;
            font-weight: bold;
            color: #333;
            letter-spacing: 1.5px;
            margin-bottom: 5px;
        }

        .sidebar-tagline {
            color: #666;
            font-size: 14px;
            font-style: italic;
        }

        /* Navigation Menu */
        .nav-menu {
            padding: 10px 0;
        }

        .nav-item {
            list-style: none;
            margin: 0;
        }

        .nav-link {
            display: block;
            padding: 15px 20px;
            color: #333;
            text-decoration: none;
            font-size: 15px;
            font-weight: 400;
/*             border-bottom: 1px solid rgba(0, 0, 0, 0.05); */
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateX(30px);
            animation: slideInRight 0.5s ease forwards;
        }

        .nav-link:nth-child(1) { animation-delay: 0.1s; }
        .nav-link:nth-child(2) { animation-delay: 0.2s; }
        .nav-link:nth-child(3) { animation-delay: 0.3s; }
        .nav-link:nth-child(4) { animation-delay: 0.4s; }
        .nav-link:nth-child(5) { animation-delay: 0.5s; }
        .nav-link:nth-child(6) { animation-delay: 0.6s; }

        @keyframes slideInRight {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .nav-link:before {
            content: ''; display:none;
            position: absolute;
            left: -100%;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
            transition: left 0.5s ease;
        }

        .nav-link:hover:before {
            left: 100%;
        }

        .nav-link:hover {
/*             color: #667eea; */
            padding-left: 25px;
/*             background: rgba(102, 126, 234, 0.05); */
        }

        .nav-link:after {
            content: '';
            position: absolute; display:none;
            left: 0;
            bottom: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transition: width 0.3s ease;
        }

        .nav-link:hover:after {
            width: 100%;
        }

        /* Social Links */
        .social-section {
            padding: 20px;
/*             border-top: 1px solid rgba(0, 0, 0, 0.1); */
/*             background: rgba(248, 249, 250, 0.5); */
        }

        .social-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }

        .social-links {
            display: flex;
            gap: 12px;
        }

        .social-link {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 3px 12px rgba(102, 126, 234, 0.3);
            font-size: 14px;
        }

        .social-link:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
        }

        /* Main Content */
        .main-content {
            padding-top: 80px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-section {
            text-align: center;
            color: white;
            padding: 40px;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .hero-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .sidebar {
                width: 280px;
                right: -280px;
            }
            
            .hero-title {
                font-size: 2rem;
            }
            
            .header {
                padding: 15px 20px;
            }
        }

        @media (max-width: 480px) {
            .sidebar {
                width: 65%; height: 100vh;

                right: -100vw; padding-top:0;
            }
        }


/*!
 * Module: pushReleaseFromLeft Animation
 * Usage: <div class="cssanimation ca__fx-pushReleaseFromLeft">Your Content</div>
 */
/* stylelint-disable */

:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -100px;
}

.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}

.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}

.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}
/* stylelint-enable */

.ca__fx-pushReleaseFromLeft {
  animation-name: pushReleaseFromLeft;
}

@keyframes pushReleaseFromLeft {
  0% {
    transform: translateX(-10%);
  }

  30% {
    transform: translateX(10px);
  }
}

/*!
 * Module: pushReleaseFromRight Animation
 * Usage: <div class="cssanimation ca__fx-pushReleaseFromRight">Your Content</div>
 */
/* stylelint-disable */

:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -100px;
}

.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}

.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}

.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}
/* stylelint-enable */

.ca__fx-pushReleaseFromRight {
  animation-name: pushReleaseFromRight;
}

@keyframes pushReleaseFromRight {
  0% {
    transform: translateX(10%);
  }

  30% {
    transform: translateX(-10px);
  }
}

/*!
 * Module: pushRelease Animation
 * Usage: <div class="cssanimation ca__fx-pushRelease">Your Content</div>
 */
/* stylelint-disable */

:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -100px;
}

.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}

.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}

.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}
/* stylelint-enable */

.ca__fx-pushRelease {
  animation-name: pushRelease;
}

@keyframes pushRelease {
  15% {
    transform: scale(0.1);
  }
}

/**
 * Module: Push Release From
 * Filename: ca__PushReleaseFrom.css
 */
.ca__fx-pushReleaseFrom {
  animation-name: pushReleaseFrom;
}

/*!
 * Module: pullRelease Animation
 * Usage: <div class="cssanimation ca__fx-pullRelease">Your Content</div>
 */
/* stylelint-disable */

:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -100px;
}

.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}

.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}

.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}
/* stylelint-enable */

.ca__fx-pullRelease {
  animation-name: pullRelease;
}

@keyframes pullRelease {
  15% {
    transform: scale(1.01);
  }
}


/*!
 * Module: pushReleaseFromTop Animation
 * Usage: <div class="cssanimation ca__fx-pushReleaseFromTop">Your Content</div>
 */
/* stylelint-disable */

:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -100px;
}

.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}

.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}

.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}
/* stylelint-enable */

.ca__fx-pushReleaseFromTop {
  animation-name: pushReleaseFromTop;
}

@keyframes pushReleaseFromTop {
  0% {
    transform: translateY(-10%);
  }

  30% {
    transform: translateY(10px);
  }
}

/*!
 * Module: pushReleaseFromBottom Animation
 * Usage: <div class="cssanimation ca__fx-pushReleaseFromBottom">Your Content</div>
 */
/* stylelint-disable */

:root {
  --cssanimation-duration: 1s;
  --cssanimation-fill-mode: both;
  --cssanimation-infinite: infinite;
  --cssanimation-backface-visibility: hidden;
  --cssanimation-transform-style: preserve-3d;
  --cssanimation-will-change: transform, opacity;
  --cssanimation-display: inline-block;
  --move-distance: -100px;
}

.cssanimation {
  animation-duration: var(--cssanimation-duration, 1s);
  animation-fill-mode: var(--cssanimation-fill-mode, both);
}

.cssanimation span {
  display: var(--cssanimation-display, inline-block);
}

.infinite {
  animation-iteration-count: var(--cssanimation-infinite, infinite) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cssanimation,
  .cssanimation span {
    animation: none !important;
    transition: none !important;
  }
}
/* stylelint-enable */

.ca__fx-pushReleaseFromBottom {
  animation-name: pushReleaseFromBottom;
}

@keyframes pushReleaseFromBottom {
  0% {
    transform: translateY(10%);
  }

  30% {
    transform: translateY(-10px);
  }
}

/**
 * Module: Push Release To
 * Filename: ca__PushReleaseTo.css
 */
.ca__fx-pushReleaseTo {
  animation-name: pushReleaseTo;
}