// Start Container Size Defiend .container { max-width: 1290px; } // End Container Size Defiend // Color Defiend .text-color { color: $text-color1; } // Start Normal Hover Transtion Effect .transition-1 { transition-timing-function: linear; transition-duration: 0.3s; } // Ent Normal Hover Transtion Effect // Start sticky header .header-sticky { &.sticky-on { position: fixed; top: 0; left: 0; width: 100%; -webkit-animation: 1s slideInDown; animation: 1s slideInDown; z-index: 999999999; box-shadow: 61px 11px 278px 73px #0d6efd00; background-color: $bg-color1; } } .header-area-3.header-sticky { &.sticky-on { position: fixed; top: 0; left: 0; width: 100%; -webkit-animation: 1s slideInDown; animation: 1s slideInDown; z-index: 999999999; box-shadow: 61px 11px 278px 73px #0d6efd00; background-color: $text-color8; } } // End sticky header // Start Liniar Shep .hero-area-1-shep-1, .hero-area-2-shep-1, .hero-area-3-shep-1 { position: absolute; right: 0; top: 0; fill: rgba(204, 255, 0, 0.45); filter: blur(165.5px); width: 384px; height: 399px; z-index: -1; } .hero-area-1-shep-2, .hero-area-2-shep-2, .hero-area-shep-2 { position: absolute; bottom: 25%; fill: rgba(204, 255, 0, 0.45); filter: blur(165.5px); width: 384px; height: 399px; left: 0; z-index: -1; } // End Liniar Shep .mb-30 { margin-bottom: 30px; } // Start Title And Sub Title .title { text-align: center; .sub-title { margin-bottom: 15px; p { margin: 0; padding: 0; font-size: 18px; font-style: normal; font-weight: 700; font-family: $heading-font; color: $text-color2; text-transform: uppercase; @media (max-width: 495px) { font: 16px; } } &.sub-title-home-3 { p { color: $text-color6; } } &.sub-title-home-2 { p { color: $text-color4; } } } .main-title { h3 { margin: 0; padding: 0; font-size: 50px; font-style: normal; font-weight: 700; font-family: $heading-font; color: $text-color1; position: relative; display: inline; @media (max-width: 768px) { font-size: 35px; line-height: 1.4; } @media (max-width: 495px) { font-size: 22px; line-height: 1.2; br { display: none; } } span { position: absolute; right: 11px; bottom: 0; z-index: -1; @media (max-width: 768px) { bottom: -12px; } @media (max-width: 425px) { display: none; } } } } } // End Title And Sub Title // Start Shep Blur .blur-1 { fill: rgba(204, 255, 0, 0.45); filter: blur(165.5px); z-index: -1; width: 384px; height: 399px; } // End Shep Blur // Start Tab Animation .tab-animation { animation: tabinganimation 2s ease-out; } // End Tab Animation // Start Extra Padding And Margin .mt-55 { margin-top: 55px; } .mt-110 { margin-top: 110px; } // End Extra Padding And Margin // Start Slider Arrow Btn 1 .slider-btn-1 { position: relative; @media (max-width: 899px) { position: absolute; bottom: 135px; left: 50%; } .swiper-button-next, .swiper-button-prev { &::after { display: none; } width: 60px; height: 60px; border: 1px solid #252525; background: $text-color4; text-align: center; border-radius: 50%; display: block; transition-timing-function: linear; transition-duration: 0.3s; svg { width: 18px; } @media (max-width: 1024px) { width: 45px; height: 45px; line-height: 40px; & svg { width: 15px; } } } } // End Slider Arrow Btn 1 // Start Search Popup .search-bar { width: 100%; height: 100vh; position: absolute; background-color: $bg-color1; z-index: 99999999999; top: -100%; opacity: 0; visibility: hidden; left: 0; transition: all 500ms ease; &.active { top: 0; opacity: 1; visibility: visible; position: fixed; } .search { form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; width: 90%; gap: 20px; } } input[type="text"] { padding: 20px 28px; border-radius: 4px; background-color: $bg-color4; font-size: 18px; font-style: normal; font-weight: 500; line-height: 160%; text-transform: capitalize; color: $text-color1; font-family: $body-font; border: none; outline: none; width: 70%; &::placeholder { color: $text-color1; } } a { font-size: 25px; width: 50px; height: 50px; border-radius: 50%; display: block; text-align: center; border: 4px solid $text-color4; position: absolute; top: 20px; right: 20px; line-height: 45px; i { color: $text-color1; } } &.home-1 { input[type="submit"] { background-color: $text-color2; color: $text-color5; } a { border-color: $text-color2; } } &.home-3 { input[type="submit"] { background-color: $text-color6; color: $text-color1; &:hover { color: $text-color5; } } a { border-color: $text-color6; } } } // End Search Popup // Start Video Button Popup Btn 1 Home 1 .video-main { position: relative; display: inline-block; } .video { height: 50px; width: 50px; line-height: 50px; text-align: center; border-radius: 100%; background: transparent; color: #fff; display: inline-block; background: #000000; z-index: 999; } .waves { position: absolute; width: 150px; height: 150px; background: $text-color1; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border-radius: 100%; right: -45px; bottom: -45px; z-index: -1; -webkit-animation: waves 3s ease-in-out infinite; animation: waves 3s ease-in-out infinite; opacity: 0.5; } .wave-1 { -webkit-animation-delay: 0s; animation-delay: 0s; } .wave-2 { -webkit-animation-delay: 1s; animation-delay: 1s; } .wave-3 { -webkit-animation-delay: 2s; animation-delay: 2s; } // End Video Button Popup Btn 1 Home 1