/* Template Name: Pacifico Author URI: Author Name: Epic Themes Version: 1.0 */ /* --- TABLE OF CONTENT 01. GENERAL LAYOUT 02. MENU-NAV 03. FOOTER 04. HOME 05. ABOUT 06. TEAM 07. SERVICES/FEATURES 08. PRICING 09. BLOG 10. CONTACT & REGISTER 11. OTHER ELEMENTS a. Newsletter & Register b. Buttons c. Gallery Images Animation d. Testimonials e. Accordion Tabs f. Partners g. Fun Facts h. PopUp Video i. Features List 12. MEDIA QUERIES --- */ /* ========================================================== */ /* 01. GENERAL LAYOUT */ /* ========================================================== */ .foodblog-inner { background-color: #232323 !important; margin: 0px; padding-top: 150px !important; padding-bottom: 30px !important; } .foodblog { background-color: black !important; margin: 0px; padding-top: 150px !important; padding-bottom: 30px !important; } .categorycarousel { display: none !important; } .pconly { display: none !important; } .gal-container { padding: 12px; } .gal-item { overflow: hidden; padding: 3px; } .gal-item .box { height: 350px; overflow: hidden; } .box img { height: 100%; width: 100%; object-fit: cover; -o-object-fit: cover; } .gal-item a:focus { outline: none; } .gal-item a:after { content: "\e003"; font-family: 'Glyphicons Halflings'; opacity: 0; background-color: rgba(0, 0, 0, 0.75); position: absolute; right: 3px; left: 3px; top: 3px; bottom: 3px; text-align: center; line-height: 350px; font-size: 30px; color: #fff; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .gal-item a:hover:after { opacity: 1; } .modal-open .gal-container .modal { background-color: rgba(0, 0, 0, 0.4); } .modal-open .gal-item .modal-body { padding: 0px; } .modal-open .gal-item button.close { position: absolute; width: 25px; height: 25px; background-color: #000; opacity: 1; color: #fff; z-index: 999; right: -12px; top: -12px; border-radius: 50%; font-size: 15px; border: 2px solid #fff; line-height: 25px; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.35); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.35); } .modal-open .gal-item button.close:focus { outline: none; } .modal-open .gal-item button.close span { position: relative; top: -3px; font-weight: lighter; text-shadow: none; } .gal-container .modal-dialogue { width: 80%; } .gal-container .description { position: relative; height: 40px; top: -40px; padding: 10px 25px; background-color: rgba(0, 0, 0, 0.5); color: #fff; text-align: left; } .gal-container .description h4 { margin: 0px; font-size: 15px; font-weight: 300; line-height: 20px; } .gal-container .modal.fade .modal-dialog { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); top: 100px; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .gal-container .modal.fade.in .modal-dialog { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); opacity: 1; } .addcart { color: white; border: 1px solid black; background-color: #FFA4E1; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 700; margin-top: 50px; width: 98%; /*max-width:535px;*/ padding: 16px 0; text-transform: uppercase; -webkit-border-radius: 3px 3px; -moz-border-radius: 3px 3px; border-radius: 3px 3px; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } .dropdown { float: right; /*padding-right: 30px;*/ } .dropdown .dropdown-menu { padding: 20px; top: 55px !important; width: 350px !important; left: -218px !important; box-shadow: 0px 5px 30px black; } .total-header-section { border-bottom: 1px solid #d2d2d2; } .total-section p { margin-bottom: 20px; } .cart-detail { padding: 15px 0px; } .cart-detail-img img { width: 100%; height: 100%; padding-left: 15px; } .cart-detail-product p { margin: 0px; color: #000; font-weight: 500; } .cart-detail .price { font-size: 12px; margin-right: 10px; font-weight: 500; } .cart-detail .count { color: #C2C2DC; } .checkout { /*border-top:1px solid #d2d2d2;*/ padding-top: 15px; } .checkout .btn-primary { border-radius: 50px; height: 50px; } .dropdown-menu:before { content: " "; position: absolute; top: -20px; right: 50px; border: 10px solid transparent; border-bottom-color: #fff; } .profilebar { float: right; /*padding-right: 30px;*/ } .profilebar .dropdown-menu { padding: 20px; top: 72px !important; width: 350px !important; right: 123px !important; box-shadow: 0px 5px 30px black; } .total-header-section { border-bottom: 1px solid #d2d2d2; } .total-section p { margin-bottom: 20px; } .logout { /*border-top:1px solid #d2d2d2;*/ padding-top: 15px; } .logout .btn-primary { border-radius: 50px; height: 50px; } .profilebar:before { content: " "; position: absolute; top: -20px; right: 50px; border: 10px solid transparent; border-bottom-color: #fff; } .profilebtn { top: 9px; left: 25px; position: relative; } .cartbtn { top: 9px; left: 40px; position: relative; } @media only screen and (max-width: 1024px) { .dropdown { float: right; /*padding-right: 30px;*/ } .dropdown .dropdown-menu { padding: 20px; top: 80px !important; float: left !important; position: relative !important; width: 350px !important; right: 50px !important; box-shadow: 0px 5px 30px black; } .total-header-section { border-bottom: 1px solid #d2d2d2; } .total-section p { margin-bottom: 20px; } .cart-detail { padding: 15px 0px; } .cart-detail-img img { width: 50%; height: 50%; padding-left: 50px; } .cart-detail-product p { margin: 0px; color: #000; font-weight: 500; } .cart-detail .price { font-size: 12px; margin-right: 10px; font-weight: 500; } .cart-detail .count { color: #C2C2DC; } .checkout { /*border-top:1px solid #d2d2d2;*/ padding-top: 15px; } .checkout .btn-primary { border-radius: 50px; height: 50px; } .dropdown-menu:before { content: " "; position: absolute; top: -20px; right: 50px; border: 10px solid transparent; border-bottom-color: #fff; } .profilebar { float: right; /*padding-right: 30px;*/ } .profilebar .dropdown-menu { padding: 20px; top: 65px !important; width: 350px !important; right: 70px !important; box-shadow: 0px 5px 30px black; } .total-header-section { border-bottom: 1px solid #d2d2d2; } .total-section p { margin-bottom: 20px; } .logout { /*border-top:1px solid #d2d2d2;*/ padding-top: 15px; } .logout .btn-primary { border-radius: 50px; height: 50px; } /*.profilebar:before{ content: " "; position:absolute; top:-20px; right:50px; border:10px solid transparent; border-bottom-color:#fff; }*/ .profilebtn { top: 49px; left: -4px; position: relative; display: none; } .cartbtn { top: 49px; left: -112px; position: relative; display: none; } } .navbar-bottom { overflow: hidden; background-color: #333; position: fixed; bottom: 0; width: 100%; z-index: 9999; display: none; } @media only screen and (max-width: 1024px) { .navbar-bottom { overflow: hidden; background-color: #FFA4E1; position: fixed; bottom: 0; width: 100%; z-index: 9999; display: block; ; } .navbar-bottom a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar-bottom a:hover { background: white; color: #FFA4E1; } } @media (min-width: 768px) { .gal-container .modal-dialog { width: 55%; margin: 50 auto; } } @media (max-width: 768px) { .gal-container .modal-content { height: 250px; } } /* Footer Style */ i.red { color: #BC0213; } .gal-container { padding-top: 75px; padding-bottom: 75px; } @media screen and (max-width: 992px) { .categorycarousel { display: block !important; } } @media screen and (min-width: 992px) { .pconly { display: block !important; } } @media(max-width: 786px) { .categorycarousel { display: block !important; } } .firstdiv { margin-top: 100px; margin-bottom: 0px; } .slider-browse { background-position: center; background-repeat: no-repeat; background-size: cover; color: white; height: 80vh; padding-top: 80px; } .slider-browse h1 { color: white; } .owl-nav button { position: absolute; top: 50%; background-color: #000; color: #fff; margin: 0; transition: all 0.3s ease-in-out; } .owl-nav button.owl-prev { left: 0; } .owl-nav button.owl-next { right: 0; } .owl-dots { text-align: center; padding-top: 15px; } .owl-dots button.owl-dot { width: 15px; height: 15px; border-radius: 50%; display: inline-block; background: #ccc; margin: 0 3px; } .owl-dots button.owl-dot.active { background-color: #000; } .owl-dots button.owl-dot:focus { outline: none; } .owl-nav button { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.38) !important; } .owl-nav span { font-size: 70px; position: relative; top: -5px; } .owl-nav button:focus { outline: none; } .darkslider { background-color: black !important; padding: 30px; position: relative; top: -15px; } .socialrow { background-color: #232323 !important; } /* FOOTER */ .footer h1, h2, h3, h4, h5, h6 {} .footer a, a:hover, a:focus, a:active { text-decoration: none; outline: none; } .footer a, .footer a:active, .footer a:focus { color: black; text-decoration: none; transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -ms-transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s; } .footer ul { margin: 0; padding: 0; list-style: none; } .footer img { max-width: 100%; height: auto; } .footer section { padding: 60px 0; /* min-height: 100vh;*/ } .footer { background: #FFA4E1; padding-top: 80px; padding-bottom: 40px; } /*END FOOTER SOCIAL DESIGN*/ .single_footer {} @media only screen and (max-width:768px) { .single_footer { margin-bottom: 30px; } } .single_footer h4 { color: black; margin-top: 0; margin-bottom: 15px; font-weight: 700; text-transform: uppercase; font-size: 20px; } .single_footer p { color: black; } .single_footer ul { margin: 0; padding: 0; list-style: none; } .single_footer ul li {} .single_footer ul li a { color: black; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; font-size: 15px; text-transform: capitalize; } .single_footer ul li a:hover { color: #ff3666; } .single_footer_address {} .single_footer_address ul {} .single_footer_address ul li { color: black; } .single_footer_address ul li span { font-weight: 400; color: #232323; line-height: 28px; } .contact_social ul { list-style: outside none none; margin: 0; padding: 0; } /*START NEWSLETTER CSS*/ .subscribe { display: block; position: relative; margin-top: 15px; width: 100%; } .subscribe__input { background-color: #fff; border: medium none; border-radius: 5px; color: #333; display: block; font-size: 15px; font-weight: 500; height: 60px; letter-spacing: 0.4px; margin: 0; padding: 0 150px 0 20px; text-align: center; text-transform: capitalize; width: 100%; } @media only screen and (max-width:768px) { .subscribe__input { padding: 0 50px 0 20px; } } .subscribe__btn { background-color: #FFA4E1; border-radius: 0 25px 25px 0; color: #FFA4E1; cursor: pointer; display: block; font-size: 13px; height: 60px; position: absolute; right: 0; top: 0; width: 73px; } .subscribe__btn i { transition: all 0.3s ease 0s; } @media only screen and (max-width:768px) { .subscribe__btn { right: 0px; } } .subscribe__btn:hover i { color: #ff3666; } .footer button { padding: 0; border: none; background-color: #232323; -webkit-border-radius: 0; border-radius: 0; } /*END NEWSLETTER CSS*/ /*START SOCIAL PROFILE CSS*/ .profilepage { background-color: black !important; padding-bottom: 20px; padding-top: 110px; } .profilepage h1 { font-weight: 300 !important; font-size: 40px !important; margin-bottom: 10px !important; } /*.profilepage p{ font-style: italic !important; font-size: 28px !important; }*/ .profilepage h2 { font-size: 22px !important; color: black !important; font-weight: 300 !important; } .social_profile ul { /* list-style: outside none none; */ /* margin: 0; */ /* padding: 0; */ } .social_profile ul li { float: left; } .social_profile ul li a { /* text-align: center; */ /* border: 0px; */ /* text-transform: uppercase; */ /* transition: all 0.3s ease 0s; */ /* margin: 0px 5px; */ font-size: 18px; color: #FFA4E1; background-color: #232323; /* border-radius: 40px; */ /* width: 30px; */ /* height: 30px; */ line-height: 25px; /* display: block; */ /* border: 1px solid rgba(255,255,255,0.2); */ } @media only screen and (max-width:768px) { .social_profile ul li a { margin-right: 10px; margin-bottom: 40px; } } @media only screen and (max-width:480px) { .social_profile ul li a { width: 30px; height: 30px; line-height: 40px; } } .social_profile ul li a:hover { background: #ff3666; border: 1px solid #ff3666; color: #fff; border: 0px; } /*END SOCIAL PROFILE CSS*/ .copyright { margin-top: 70px; padding-top: 40px; color: #232323; font-size: 15px; border-top: 1px solid rgba(255, 255, 255, 0.4); text-align: center; } .copyright a { color: #01c7e9; transition: all 0.2s ease 0s; } .copyright a:hover { color: #ff3666; } ul, ol { list-style: none; list-style-image: none; margin: 0; padding: 0; color: #858585; font-size: 14px; line-height: 24px; margin-bottom: 20px; } ul li, ol li { /* font-size: 15px; */ /* line-height: 28px; */ } ul li i { vertical-align: middle; padding-right: 5px; } p { font-size: 15px; line-height: 24px; font-weight: 400; color: #7c8595; margin-bottom: 15px; } a, a:hover, a:focus { text-decoration: none; outline: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; line-height: 1.2; margin-bottom: 20px; color: #2F362F; font-weight: 700; } h1 { font-size: 42px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 18px; } h2.section-title { font-size: 36px; line-height: 40px; color: #292929; margin-bottom: 15px; } h2.section-title.grey { color: #ddd; } h2.section-title.white { color: #ffffff; } p.section-subtitle { font-size: 16px; } p.section-subtitle.grey { color: #bbb; } p.section-subtitle.white { color: #ffffff; } h3.medium-title { font-size: 32px; margin-top: 10px; } ul { padding: 0; } ul li { /* list-style-type: none; */ } a:hover, a:focus, a:active, a:visited { text-decoration: none; } iframe { max-width: 100%; border: none; } .white-text { color: #fff; } .blue { color: #3498db; } .lyla { color: #6B02FF; } .section-white { background: #fff; padding: 70px 0; } .section-grey { background: #f2f7f8; padding: 70px 0; } .section-white.no-padding, .section-grey.no-padding { padding: 0; } .section-white.small-paddings, .section-grey.small-paddings { padding: 30px 0; } .section-gradient { background: #008aff; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom right, #6B02FF, #985BEF); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd); /* For Firefox 3.6 to 15 */ background: linear-gradient(to 135deg, #6B02FF 0%, #985BEF 100%); /* Standard syntax */ padding: 70px 0; } .section-dark { background-color: #272834; padding: 70px 0; } .width-100 { width: 100%; } /* margin and padding classes */ .no-padding { padding: 0; } .no-padding-left { padding-left: 0; } .no-padding-right { padding-left: 0; } .small-padding-left { padding-left: 5px; } .margin-right-25 { margin-right: 25px !important; } .margin-top-110 { margin-top: 110px !important; } .margin-top-100 { margin-top: 100px !important; } .margin-top-90 { margin-top: 90px !important; } .margin-top-80 { margin-top: 80px !important; } .margin-top-60 { margin-top: 60px !important; } .margin-top-50 { margin-top: 50px !important; } .margin-top-40 { margin-top: 40px !important; } .margin-top-35 { margin-top: 35px !important; } .margin-top-30 { margin-top: 30px !important; } .margin-top-20 { margin-top: 20px !important; } .margin-top-10 { margin-top: 10px !important; } .margin-top-5 { margin-top: 5px !important; } .margin-bottom-0 { margin-bottom: 0px !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-bottom-20 { margin-bottom: 20px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-bottom-40 { margin-bottom: 40px !important; } .margin-bottom-50 { margin-bottom: 50px !important; } .margin-bottom-60 { margin-bottom: 60px !important; } .margin-bottom-70 { margin-bottom: 70px !important; } .margin-bottom-80 { margin-bottom: 80px !important; } .margin-bottom-100 { margin-bottom: 100px !important; } .margin-bottom-120 { margin-bottom: 120px !important; } .margin-bottom-130 { margin-bottom: 120px !important; } .margin-bottom-140 { margin-bottom: 140px !important; } .padding-top-0 { padding-top: 0px !important; } .padding-top-10 { padding-top: 10px !important; } .padding-top-20 { padding-top: 20px !important; } .padding-top-25 { padding-top: 25px !important; } .padding-top-30 { padding-top: 30px !important; } .padding-top-40 { padding-top: 40px !important; } .padding-top-45 { padding-top: 45px !important; } .padding-top-50 { padding-top: 50px !important; } .padding-top-60 { padding-top: 60px !important; } .padding-top-70 { padding-top: 70px !important; } .padding-top-80 { padding-top: 80px !important; } .padding-top-100 { padding-top: 100px !important; } .padding-top-120 { padding-top: 120px !important; } .padding-bottom-70 { padding-bottom: 70px !important; } .padding-bottom-60 { padding-bottom: 60px !important; } .padding-bottom-50 { padding-bottom: 50px !important; } .padding-bottom-40 { padding-bottom: 40px !important; } .padding-bottom-30 { padding-bottom: 30px !important; } .padding-bottom-20 { padding-bottom: 20px !important; } .padding-bottom-10 { padding-bottom: 10px !important; } .padding-bottom-0 { padding-bottom: 0px !important; } .margin-top-0 { margin-top: 0px !important; } /* ========================================================== */ /* 02. MENU-NAV */ /* ========================================================== */ .navbar-brand { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 700; color: black !important; } .navbar-fixed-top.opaque .navbar-brand { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 700; color: #353535 !important; } .navbar-fixed-top.opaque .navbar-brand { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 700; color: #353535 !important; } .navbar-fixed-top #navbar-collapse-02 .current a { color: #008aff; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navbar-fixed-top.opaque #navbar-collapse-02 .current a { color: #4285f4 !important; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navbar { padding-top: 20px; padding-bottom: 20px; } .navbar-fixed-top { position: absolute !important; background-color: white !important; border-bottom: none; transition: background-color 0.25s ease 0s; } .navbar-fixed-top.opaque { position: fixed !important; background-color: #fff !important; border-bottom: 1px solid #eee; padding: 20px 0; transition: all 0.25s ease-in-out 0s; } .navbar-fixed-top .navbar-nav>li>a, .navbar-fixed-top .navbar-nav>li>a:hover { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navbar-fixed-top .navbar-nav>li>a { color: black !important; font-size: 14px !important; line-height: 30px !important; text-transform: uppercase; padding: 10px 20px !important; font-family: 'Montserrat', sans-serif; font-weight: 600; } .navbar-fixed-top.opaque .navbar-nav>li>a { color: #454545 !important; } .navbar-fixed-top .navbar-nav>li>a.discover-btn { background: transparent; border: 1px solid #fff; border-radius: 5px 5px; padding: 8px 24px !important; margin-left: 10px; margin-right: 15px; font-family: 'Montserrat', sans-serif; font-weight: 600; } .navbar-fixed-top.opaque .navbar-nav>li>a.discover-btn { color: #fff !important; background: #008aff; background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); background: -o-linear-gradient(bottom right, #6B02FF, #985BEF); background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd); background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .navbar-fixed-top .navbar-nav>li>a.discover-btn:hover { border: 1px solid #ffffff; color: #4285f4 !important; background: #ffffff; } .navbar-fixed-top.opaque .navbar-nav>li>a.discover-btn:hover { color: #fff !important; background: #008aff; background: -webkit-linear-gradient(135deg, #985BEF 0%, #6B02FF 100%); background: -o-linear-gradient(bottom right, #985BEF, #6B02FF); background: -moz-linear-gradient(bottom right, #985BEF, #6B02FF); background: linear-gradient(135deg, #985BEF 0%, #6B02FF 100%); } .navbar-fixed-top.opaque #navbar-collapse-02 .current a.discover-btn { color: #fff !important; } /* ========================================================== */ /* 03. FOOTER */ /* ========================================================== */ /* ========================================================== */ /* 04. HOME */ /* ========================================================== */ .divider { /* height: 14vh; */ } .homeslide { background-image: url(../images/homeslide.png); background-size: cover; background-repeat: no-repeat; height: 80vh; } .aboutslide { margin-top: 80px; background-image: url(../images/aboutslide.png); background-size: cover; background-repeat: no-repeat; height: 80vh; } .homepage { background-image: url(../images/home1.png) !important; } .imgsection { background-image: url(../images/home2.png) !important; height: 773px; background-repeat: no-repeat; background-position: center; background-size: contain; } .homepage h1 { font-weight: 300 !important; font-size: 40px !important; margin-bottom: 10px !important; } .homepage p { font-style: italic !important; font-size: 28px !important; } .homepage h2 { font-size: 22px !important; color: black !important; font-weight: 300 !important; } .homepagebtn { background: linear-gradient(135deg, #ff2def 0%, #ff8a00 100%) !important; color: white !important; border-radius: 50px !important; box-shadow: 0 8px 25px rgba(255, 0, 168, 0.4) !important; transition: all 0.3s ease !important; } .homepagebtn:hover { transform: translateY(-3px) !important; box-shadow: 0 15px 35px rgba(255, 0, 168, 0.6) !important; } .home-section { background: white; background-size: cover; width: 100%; position: relative; padding-top: 225px; padding-bottom: 225px; } .home-section h1 { margin-bottom: 30px; font-size: 70px; /*line-height: 70px;*/ font-weight: 500; color: black; letter-spacing: 1px; } .home-section p { font-size: 16px; line-height: 24px; font-weight: 400; color: black; margin-bottom: 10px; } .stitle { font-weight: 300 !important; } .newsletter-section { background-color: #FFA4E1 !important; } .newsletter-heading { font-weight: 300 !important; } .nlinput { border: 2px solid black !important; background-color: #fff; } a.hero-video-text { margin-left: 34px; font-size: 16px; line-height: 28px; color: black; } i.hero-video-icon { width: 34px; height: 34px; border: 1px solid #fff; border-radius: 50% 50%; font-size: 20px; line-height: 34px; color: #fff; margin-top: 12px; margin-left: 5px; display: inline-block; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } a.hero-video-text:hover .hero-video-icon { background: #fff; color: #4285f4; } /* ========================================================== */ /* 05. ABOUT */ /* ========================================================== */ .about-box { margin-top: 20px; text-align: center; } .about-box i { font-size: 58px; margin-bottom: 0; color: #FFA4E1; display: inline-block; line-height: 58px; cursor: pointer; border-radius: 50%; } .about-box h3 { font-size: 20px; color: white; margin-bottom: 15px; } .about-box p { padding: 0 10px; } blockquote { font-size: 16px; color: #4285f4; border-left: 2px solid #4285f4; } a.btn-download { color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 16px; background: #4285f4; border: 2px solid #4285f4; border-radius: 5px 5px; padding: 15px 25px; display: inline-block; margin-top: 30px; margin-bottom: 60px; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } a.btn-download i { font-size: 16px; margin-right: 10px; } a.btn-download:hover { color: #4285f4; background: transparent; border: 2px solid #4285f4; } ul.features-responsive { margin-bottom: 40px; } ul.features-responsive li { font-size: 15px; line-height: 20px; font-weight: 400; color: #8f8f8f; display: block; margin-bottom: 10px; } ul.features-responsive li i { font-size: 18px; vertical-align: bottom; color: #4285f4; margin-right: 10px; } /* ========================================================== */ /* 06. TEAM */ /* ========================================================== */ .team-item { background: #f4f5f6; text-align: center; margin: 20px 0; padding: 50px 20px 40px 20px; border-radius: 8px 8px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .team-item:hover { background: #1d1e2b; } .team-item h3 { margin: 20px 0 1px 0 !important; color: #454545; font-size: 18px; font-weight: 700; text-transform: uppercase; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } .team-item:hover h3 { color: #ddd; } .team-info { display: block; margin-bottom: 0; } .team-info p { color: #acacac; font-style: italic; } .team-info::after { background: #008aff; background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); background: -o-linear-gradient(bottom right, #6B02FF, #985BEF); background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd); background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); display: inline-block; vertical-align: middle; content: ""; width: 50px; height: 3px; margin-top: -20px; } .team-img { max-width: 140px; padding: 6px 6px; background-color: #dedede; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } ul.team-icon { margin-top: 25px; } ul.team-icon li { display: inline-block; margin: 0 3px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } ul.team-icon li a { margin: 0; display: inline-block; padding: 8px 8px; width: 34px; height: 34px; font-size: 18px; line-height: 18px; background-color: #fff; border-radius: 50%; color: #fff; } ul.team-icon li a.twitter { background-color: #4099ff; } ul.team-icon li a.pinterest { background-color: #C92228; } ul.team-icon li a.facebook { background-color: #3b5998; } ul.team-icon li a.dribble { background-color: #ea4c89; } .team-icon li a:hover { color: #dedede; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } /* ========================================================== */ /* 07. SERVICES/FEATURES */ /* ========================================================== */ .feature-box { overflow: hidden; margin: 10px 0 20px 0; } .feature-box i { float: left; font-size: 48px; color: #008aff; background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); background: -o-linear-gradient(bottom right, #6B02FF, #985BEF); background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd); background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .feature-box-text { float: left; width: 70%; margin-left: 30px; } .feature-box h4 { font-size: 18px; color: #ddd; margin-bottom: 10px; } .feature-box p { color: #7c8595; } .feature-inner { float: left; width: 70%; margin-left: 30px; } .feature-inner h4, .feature-inner-left h4, .feature-inner-right h4 { font-size: 18px; color: #282828; margin-top: 0; margin-bottom: 10px; } .feature-wrapper { overflow: hidden; margin: 30px 0; } .feature-wrapper i.lefts { float: right; margin-top: 10px; margin-right: 3px; } .feature-wrapper i.rights { float: left; margin-top: 10px; margin-left: 3px; } .feature-inner-left { float: right; width: 70%; text-align: right; padding-right: 30px; } .feature-inner-right { float: left; width: 70%; text-align: left; padding-left: 30px; } /* ========================================================== */ /* 08. PRICING */ /* ========================================================== */ .price-box-white { text-align: center; border: 2px solid #f8f8f8; padding: 50px 0; width: 90%; margin-top: 30; margin-bottom: 20px; margin-left: 20px; border-radius: 8px 8px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .price-box-grey { text-align: center; background: #f4f5f6; border: 2px solid #f4f5f6; padding: 50px 0; width: 90%; margin-top: 30; margin-bottom: 20px; margin-left: 20px; border-radius: 8px 8px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .price-box-blue { text-align: center; background: #008aff; background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); background: -o-linear-gradient(bottom right, #6B02FF, #985BEF); background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd); background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); padding: 50px 0 40px 0; color: #fff; width: 90%; margin-top: 30; margin-bottom: 20px; margin-left: 20px; border-radius: 8px 8px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .price-box-blue:hover, .price-box-grey:hover, .price-box-white:hover { transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); /* IE 9 */ -webkit-transform: scale(1.03, 1.03); /* Safari */ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } .price-box-white .price-title, .price-box-white ul.pricing-list li.price-value, .price-box-grey .price-title, .price-box-grey ul.pricing-list li.price-value { color: #292929; } .price-box-white .price-subtitle, .price-box-white .price-text, .price-box-grey .price-subtitle, .price-box-grey .price-text { color: #6a6a6a; } ul.pricing-list li.price-title { font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 1px; } ul.pricing-list li.price-value { font-family: 'Roboto', sans-serif; font-size: 70px; line-height: 70px; display: block; margin-top: 20px; margin-bottom: 10px; } ul.pricing-list li.price-subtitle { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; } ul.pricing-list li.price-text { font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 28px; font-weight: 400; margin-bottom: 5px; } ul.pricing-list li.price-tag a { color: #fff; background: #008aff; background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); background: -o-linear-gradient(bottom right, #6B02FF, #985BEF); background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd); background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); border-radius: 5px 5px; padding: 15px 30px; display: inline-block; font-size: 14px; line-height: 24px; font-weight: 600; margin: 40px 0 30px 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } ul.pricing-list li.price-tag a:hover { background: #008aff; background: -webkit-linear-gradient(135deg, #985BEF 0%, #6B02FF 100%); background: -o-linear-gradient(bottom right, #985BEF, #6B02FF); background: -moz-linear-gradient(bottom right, #985BEF, #6B02FF); background: linear-gradient(135deg, #6B02FF 0%, #6B02FF 100%); } .price-box-blue ul.pricing-list li.price-tag a { color: #fff; background: transparent; border: 2px solid #fff; border-radius: 5px 5px; padding: 15px 30px; display: inline-block; font-size: 14px; line-height: 24px; font-weight: 600; margin: 40px 0 30px 0; } .price-box-blue ul.pricing-list li.price-tag a:hover { color: #4285f4; border: 2px solid #fff; background: #fff; } /* ========================================================== */ /* 09. BLOG */ /* ========================================================== */ .blog-item { -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } .blog-item img {} .blog-item-inner { padding: 10px 0 20px 0; } .blog-item-inner p { margin: 15px 0 20px 0; } h3.blog-title { margin-top: 15px; margin-bottom: 10px; } h3.blog-title a { font-size: 21px; color: #454545; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } h3.blog-title a:hover { color: #228798; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } a.blog-icons { color: #858585; font-size: 14px; font-style: italic; margin-right: 10px; padding-right: 10px; border-right: 1px solid #aaa; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } a.blog-icons i { color: #656565; font-size: 16px; line-height: 16px; vertical-align: text-bottom; } a.blog-icons.last { border-right: none; } a.blog-icons:hover { color: #228798; transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; } a.button-blog { background-color: #34b1c4; border: 1px solid #34b1c4; color: #fff; display: inline-block; font-weight: 400; font-size: 13px; padding: 10px 20px; margin: 0 0 20px 0; -webkit-border-radius: 3px 3px; -moz-border-radius: 3px 3px; border-radius: 3px 3px; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } a.button-blog:hover { background-color: transparent; border: 1px solid #34b1c4; color: #34b1c4; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } /* ========================================================== */ /* 10. CONTACT & REGISTER */ /* ========================================================== */ /* ----- Contact ----- */ #contact-form { margin: 0 auto; width: 100%; max-width: 960px; text-align: center; margin-bottom: 10px; } input.contact-input { width: 100%; height: 55px; padding-left: 2%; padding-right: 2%; margin-bottom: 20px; color: #aaa; border: 1px solid #757575; background-color: transparent; font-size: 14px; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } textarea { height: 205px; margin-bottom: 20px; width: 100%; padding-left: 2%; padding-right: 2%; padding-top: 10px; padding-bottom: 10px; color: #aaa; border: 1px solid #757575; background-color: transparent; font-size: 14px; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } input.contact-submit { color: #fff; background: #008aff; background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); background: -o-linear-gradient(bottom right, #6B02FF, #985BEF); background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd); background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); border: none; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 600; margin-top: 10px; padding: 18px 32px; position: relative; text-transform: uppercase; -webkit-border-radius: 5px 5px; -moz-border-radius: 5px 5px; border-radius: 5px 5px; transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } input.contact-submit:hover { color: #fff; background: #008aff; background: -webkit-linear-gradient(135deg, #985BEF 0%, #6B02FF 100%); background: -o-linear-gradient(bottom right, #985BEF, #6B02FF); background: -moz-linear-gradient(bottom right, #985BEF, #6B02FF); background: linear-gradient(135deg, #985BEF 0%, #6B02FF 100%); } input.white-input::-webkit-input-placeholder, textarea.white-input::-webkit-input-placeholder { /* WebKit browsers */ color: #aaa; } input.white-input:-moz-placeholder, textarea.white-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #aaa; } input.white-input::-moz-placeholder, textarea.white-input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #aaa; } input.white-input:-ms-input-placeholder, textarea.white-input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #aaa; } #contact-form input.contact-input:focus, #contact-form textarea.contact-commnent:focus { border-color: #fff; outline: none; } p.contact_success_box { display: inline-block; color: #fff; font-size: 20px; font-style: italic; padding: 20px 20px; border: 1px solid #fff; webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* ----- Register ----- */ .register-inner { width: 100%; max-width: 585px; padding: 50px 0 50px 35px; } .register-form { padding: 25px 0 20px 0; } input.register-input { width: 100%; height: 52px; padding-left: 2%; padding-right: 2%; margin-bottom: 20px; color: black; border: 1px solid black; background-color: transparent; font-size: 14px; float: left; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } textarea.register-input { width: 100%; padding-left: 2%; padding-right: 2%; margin-bottom: 20px; color: black; border: 1px solid black; background-color: transparent; font-size: 14px; float: left; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } select.register-input { width: 100%; height: 52px; padding-left: 2%; padding-right: 2%; margin-bottom: 20px; color: #fff; border: 1px solid #fff; background-color: transparent; font-size: 14px; float: left; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } input.register-submit-top, input.register-submit { color: black; border: 1px solid black; background-color: white; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 700; width: 99%; /*max-width:535px;*/ padding: 16px 0; text-transform: uppercase; -webkit-border-radius: 3px 3px; -moz-border-radius: 3px 3px; border-radius: 3px 3px; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } textarea.register-submit-top, textarea.register-submit { color: #34b1c4; border: 1px solid #fff; background-color: #fff; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 700; width: 100%; max-width: 535px; padding: 16px 0; text-transform: uppercase; -webkit-border-radius: 3px 3px; -moz-border-radius: 3px 3px; border-radius: 3px 3px; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } /* My Css */ input.register-submit-top:hover { color: white; background: #ffa4e1 !important; border: none; transform: translateY(10px); } input.register-submit-top { width: 99%; /*max-width:540px;*/ } input.register-submit:hover { color: #fff; background-color: transparent; border: 1px solid #fff; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } input.white-input::-webkit-input-placeholder, select.white-input::-webkit-input-placeholder { /* WebKit browsers */ color: black !important; } input.white-input:-moz-placeholder, select.white-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: black !important; } input.white-input::-moz-placeholder, select.white-input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: black !important; } input.white-input:-ms-input-placeholder, select.white-input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: black; } textarea.white-input::-webkit-input-placeholder, select.white-input::-webkit-input-placeholder { /* WebKit browsers */ color: black !important; } textarea.white-input:-moz-placeholder, select.white-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: black !important; } textarea.white-input::-moz-placeholder, select.white-input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: black !important; } textarea.white-input:-ms-input-placeholder, select.white-input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: black; } #register-form input.register-input:focus, #register-form select.register-input:focus { border-color: #fff !important; outline: none; } input.login-input { width: 100%; height: 52px; padding-left: 2%; padding-right: 2%; margin-bottom: 20px; border: 1px solid black; background-color: white; font-size: 14px; float: left; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } input.login-submit-top, input.login-submit { color: white; border: 1px solid black; background-color: #FFA4E1; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 700; /*margin-top: 50px;*/ width: 98%; /*max-width:535px;*/ padding: 16px 0; text-transform: uppercase; -webkit-border-radius: 3px 3px; -moz-border-radius: 3px 3px; border-radius: 3px 3px; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } input.login-submit:hover { color: #fff; background-color: transparent; border: 1px solid #fff; transition: all .50s ease-in-out; -moz-transition: all .50s ease-in-out; -webkit-transition: all .50s ease-in-out; } input.white-input::-webkit-input-placeholder, select.white-input::-webkit-input-placeholder { /* WebKit browsers */ color: black !important; } input.white-input:-moz-placeholder, select.white-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: black !important; } input.white-input::-moz-placeholder, select.white-input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: black !important; } input.white-input:-ms-input-placeholder, select.white-input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: black; } textarea.white-input::-webkit-input-placeholder, select.white-input::-webkit-input-placeholder { /* WebKit browsers */ color: black !important; } textarea.white-input:-moz-placeholder, select.white-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: black !important; } textarea.white-input::-moz-placeholder, select.white-input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: black !important; } textarea.white-input:-ms-input-placeholder, select.white-input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: black; } #register-form input.register-input:focus, #register-form select.register-input:focus { border-color: #fff !important; outline: none; } p.register_success_box { display: inline-block; color: #fff; font-size: 16px; font-style: italic; margin: 20px 0 30px 0; padding: 20px 20px; border: 1px solid #fff; webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } /* ========================================================== */ /* 11. OTHER ELEMENTS */ /* ========================================================== */ .extra-image { position: relative; margin-top: 30px; margin-bottom: -200px; z-index: 200; } /* ----- a) Newsletter ----- */ .newsletter_form_wrapper { width: 100%; text-align: center; margin-bottom: 30px; } .newsletter_form_box { margin: 0 auto; max-width: 730px; } #newsletter-form #email_newsletter { width: 100%; max-width: 500px; height: 65px; padding: 0 20px; border: 2px solid #6B02FF; background-color: #fff; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; color: #757575; font-size: 16px; font-weight: 600; margin: 0; } #newsletter-form #submit-button-newsletter { width: 165px; height: 65px; background: #232323; border: none; color: #FFA4E1; display: inline; margin: 0 0 0 -5px; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; font-size: 14px; font-weight: 700; vertical-align: top; transition: background-color .25s ease-in-out; -moz-transition: background-color .25s ease-in-out; -webkit-transition: background-color .25s ease-in-out; } #newsletter-form #submit-button-newsletter:hover { color: #454545; background-color: #fff; transition: background-color .25s ease-in-out; -moz-transition: background-color .25s ease-in-out; -webkit-transition: background-color .25s ease-in-out; } input#email_newsletter::-webkit-input-placeholder { /* WebKit browsers */ color: #757575; } input#email_newsletter:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #757575; } input#email_newsletter::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #757575; } input#email_newsletter:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #757575; } .newsletter_success_box { font-size: 18px; font-style: italic; color: #fff; margin: 5px 0; } /* b) Buttons */ .btn-blue { color: #fff !important; background: #008aff; background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); background: -o-linear-gradient(bottom right, #6B02FF, #985BEF); background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd); background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 22px; font-weight: 500; border-radius: 6px 6px; margin: 10px 0; padding: 16px 30px; display: inline-block; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .btn-blue.small { padding: 14px 26px; } .btn-blue:hover { color: #fff; background: #008aff; background: -webkit-linear-gradient(135deg, #985BEF 0%, #6B02FF 100%); background: -o-linear-gradient(bottom right, #985BEF, #6B02FF); background: -moz-linear-gradient(bottom right, #985BEF, #6B02FF); background: linear-gradient(135deg, #985BEF 0%, #6B02FF 100%); } .btn-white { color: #6B02FF; background-color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 22px; font-weight: 500; border: 1px solid #fff; border-radius: 5px 5px; margin: 10px 10px; padding: 15px 30px; display: inline-block; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .btn-white:hover { color: #fff; background: transparent; border: 1px solid #fff; } .btn-white-border { color: #fff; background: transparent; font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 22px; font-weight: 500; border: 1px solid #fff; border-radius: 5px 5px; margin: 10px 10px; padding: 15px 30px; display: inline-block; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .btn-white-border:hover { color: #008aff; background: #fff; border: 1px solid #fff; } .btn-white i, .btn-white-border i { font-size: 22px; line-height: 22px; margin-right: 10px; vertical-align: text-top; } /* ----- c) Gallery Images Animations ----- */ .popup-wrapper { display: block; position: relative; overflow: hidden; } .popup-gallery { display: inline-block; position: relative; } .first-gallery { margin-bottom: 15px; } .popup-gallery img { position: relative; z-index: 10; width: 100%; height: auto; } .popup-gallery:hover img { opacity: 0.25; } .popup-gallery a span.eye-wrapper, .popup-gallery a span.eye-wrapper2 { background-color: #000; position: absolute; display: block; overflow: hidden; z-index: 2; height: 100% !important; top: 0%; margin-top: 0px; left: 0%; right: 0%; font-size: 22px; color: #fff; text-align: center; font-weight: 300; opacity: 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .popup-gallery-rounded a span.eye-wrapper, .popup-gallery-rounded a span.eye-wrapper2 { -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } .popup-gallery a span.eye-wrapper i.eye-icon, .popup-gallery a span.eye-wrapper2 i.eye-icon { position: absolute; display: inline-block; font-size: 38px; z-index: 3; top: 50% !important; margin-top: -19px !important; left: 0%; right: 0%; } .popup-gallery a:hover span { opacity: 1; } .popup-gallery img, .popup-gallery a span { -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .gallery-show { box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); border: 8px solid rgba(255, 255, 255, 0.8); margin: 20px 10px 40px 10px; } .gallery-item-wrapper { float: left; width: 100%; } /* d) Testimonials */ .testim-inner { text-align: center; } .testim-inner img { max-width: 130px; border: 1px solid #fff; border-radius: 50% 50%; padding: 6px 6px; background-color: #dedede; display: inline-block !important; } .testim-inner h6 { margin-bottom: 5px; font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 26px; color: #292929; font-weight: 700; } .testim-inner span.job-text { font-size: 18px; line-height: 26px; font-weight: 500; color: #656565; } .testim-inner p { font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 32px; font-weight: 300; font-style: italic; color: #454545; margin-top: 20px; } .testim-inner i { font-size: 70px; color: #7aa9f7; margin-top: 20px; margin-bottom: 40px; } /* e) Accordion Tabs */ .panel-wrapper { margin-bottom: 25px; } .panel-icon { margin-right: 5px; font-size: 20px; vertical-align: middle; } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; font-weight: 500; color: #454545; font-family: 'Roboto', sans-serif; } .panel-title>a, .panel-title>small, .panel-title>.small, .panel-title>small>a, .panel-title>.small>a { color: #656565; } .panel-group { margin: 10px 0; } .panel-group .panel { margin-bottom: 0; background: transparent; } .panel-body { padding: 20px 10px 10px 10px; } .panel-heading { padding: 8px 10px 16px 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .panel-default { border-color: transparent; } .panel-default>.panel-heading { color: #959595; background-color: transparent; border: none; } .panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>.list-group { border-top: 3px solid #4285f4; } /* f) Partners */ .section-grey.sponsors-padding { padding: 25px 0 25px 0; } .sponsors { text-align: center; } .sponsors img.sponsor { opacity: 0.4; margin: 10px 25px; max-height: 28px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .sponsors img.sponsor:hover { opacity: 0.8; } .partners-title { display: inline-block; font-size: 18px; line-height: 26px; margin-right: 30px; color: #7c8595; } /* ----- g) Fun Facts ----- */ .fun-facts-box { display: inline-block; width: 19%; padding: 10px; } .fun-facts-title { font-size: 16px; font-weight: 400; color: #7c8595; font-style: italic; } .fun-facts-title span { font-size: 32px; line-height: 40px; font-weight: 600; font-style: normal; color: #454545; } .fun-facts-box i { font-size: 45px; line-height: 54px; color: #008aff; background: #008aff; background: -webkit-gradient(linear, left top, right bottom, from(#b580ff), to(#905ca4)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* h) PopUp Video */ .youtube-video-wrapper { background: url(http://placehold.it/600x500) top center no-repeat; background-size: initial; padding: 160px 0; position: relative; text-align: center; } .youtube-video-icon { width: 100px; height: 100px; border: 2px solid #fff; border-radius: 50% 50%; display: inline-block; background: #fff; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .youtube-video-icon:hover { background: #6B02FF; border: 2px solid #6B02FF; } .youtube-video-icon:hover i { color: #fff; } .youtube-video-icon i { font-size: 60px; line-height: 100px; color: #6B02FF; margin-left: 10px; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } /* i) Features List */ .no-padding-bottom { padding-bottom: 0; } ul.features-list-hero { display: inline-block; margin-bottom: 25px; } ul.features-list-hero li { float: left; margin: 8px 0; color: #ffffff; font-size: 16px; line-height: 26px; } ul.features-list-hero li i { float: left; padding-right: 20px; color: #ffffff; font-size: 42px; line-height: 46px; vertical-align: text-top; } ul.features-list-hero li i.blue { color: #008aff; background: #008aff; background: -webkit-gradient(linear, left top, right bottom, from(#b580ff), to(#905ca4)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================== */ /* 12. MEDIA QUERIES */ /* ========================================================== */ @media (max-width: 991px) { .hero-picture { margin-bottom: 0; } .navbar-fixed-top.opaque { padding: 10px 0 10px 0; } .navbar-default .navbar-toggle { border-color: #9f9f9f !important; } .navbar-default .navbar-toggle .icon-bar { background-color: #9f9f9f !important; } } @media (max-width: 767px) { .home-section { padding-top: 150px; padding-bottom: 50px; } .home-title h1 { font-size: 40px; line-height: 50px; padding: 30px 35px; } .home-title span { font-size: 24px; line-height: 30px; } .home-title p { margin-bottom: 30px !important; } } @media (max-width: 375px) { .navbar-toggle { margin-bottom: 0; border: 1px solid #9f9f9f !important; } .navbar-default .navbar-toggle { border-color: #aeaeae !important; } .navbar-default .navbar-toggle .icon-bar { background-color: #aeaeae !important; } .owl-carousel .owl-item img { width: 80% !important; margin: 0 10%; } .fun-facts-box { width: 48% !important; } #newsletter-form #email_newsletter { -moz-border-radius: 5px 5px 5px 5px !important; -webkit-border-radius: 5px 5px 5px 5px !important; border-radius: 5px 5px 5px 5px !important; } #newsletter-form #submit-button-newsletter { display: inline-block; margin-top: 10px !important; -moz-border-radius: 5px 5px 5px 5px !important; -webkit-border-radius: 5px 5px 5px 5px !important; border-radius: 5px 5px 5px 5px !important; } .extra-image { margin-bottom: -140px !important; } } @media (max-width: 320px) { .newsletter-input { width: 60%; } .btn-newsletter { width: 38%; margin-top: 12px; } } .workout-inner { background-image: url(../images/workout-inner.png) !important; background-size: cover; background-repeat: no-repeat; background-position: center; } .workout-inner h1 { font-weight: 300 !important; font-size: 40px !important; margin-bottom: 10px !important; color: white !important; } .workout-inner p { font-style: italic !important; font-size: 28px !important; color: white !important; } .workout-inner h2 { font-size: 22px !important; color: black !important; font-weight: 300 !important; color: white !important; } .workout-innerbtn { background-color: #FFA4E1 !important; color: white !important; } .shoppage { margin-top: 30px; background-image: url(../images/shopheader.png) !important; } .shoppage h1 { font-weight: 300 !important; font-size: 70px !important; margin-bottom: 10px !important; } .shoppage p { font-size: 20px !important; font-weight: 200 !important; } .shoppage h2 { font-size: 22px !important; color: black !important; font-weight: 300 !important; } button.ddselect { background-color: #232323; border: 1px solid white; width: 100%; height: 52px; padding-left: 2%; padding-right: 2%; margin-bottom: 20px; color: #fff; font-size: 14px; float: left; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } button.paypalbtn { background-color: #F8D434; width: 98%; height: 52px; padding-left: 2%; padding-right: 2%; margin-top: 20px; color: #fff; font-size: 14px; float: left; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } button.stripebtn { background-color: #6156F2; width: 98%; height: 52px; padding-left: 2%; padding-right: 2%; margin-top: 20px; color: #fff; font-size: 25px; float: left; -webkit-border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } button.stripebtn:hover { color: #fff; } .shoppage { margin-top: 30px; background-image: url(../images/shopheader.png) !important; } .shoppage h1 { font-weight: 300 !important; font-size: 70px !important; margin-bottom: 10px !important; } .shoppage p { font-size: 20px !important; font-weight: 200 !important; } .shoppage h2 { font-size: 22px !important; color: black !important; font-weight: 300 !important; } .sec-title { position: relative; margin-bottom: 70px; } .sec-title .title { position: relative; display: block; font-size: 16px; line-height: 1em; color: #ff8a01; font-weight: 500; background: rgb(247, 0, 104); background: -moz-linear-gradient(to left, rgba(247, 0, 104, 1) 0%, rgba(68, 16, 102, 1) 25%, rgba(247, 0, 104, 1) 75%, rgba(68, 16, 102, 1) 100%); background: -webkit-linear-gradient(to left, rgba(247, 0, 104, 1) 0%, rgba(68, 16, 102, 1) 25%, rgba(247, 0, 104, 1) 75%, rgba(68, 16, 102, 1) 100%); background: linear-gradient(to left, rgba(247, 0, 104) 0%, rgba(68, 16, 102, 1) 25%, rgba(247, 0, 104, 1) 75%, rgba(68, 16, 102, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F70068', endColorstr='#441066', GradientType=1); color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; letter-spacing: 5px; margin-bottom: 15px; } .sec-title h2 { position: relative; display: inline-block; font-size: 48px; line-height: 1.2em; color: #1e1f36; font-weight: 700; } .sec-title .text { position: relative; font-size: 16px; line-height: 28px; color: #888888; margin-top: 30px; } .sec-title.light h2, .sec-title.light .title { color: #ffffff; -webkit-text-fill-color: inherit; } .pricing-section { position: relative; padding: 100px 0 80px; } .pricing-section .outer-box { max-width: 1100px; margin: 0 auto; } /*.pricing-section .row{ margin: 0 -30px; }*/ .pricing-block { position: relative; padding: 0 30px; margin-bottom: 40px; } .pricing-block .inner-box { position: relative; background-color: #ffffff; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); padding: 0 0 10px; max-width: 370px; margin: 0 auto; border-radius: 50px; /* border-bottom: 20px solid #FFA4E1; */ } .pricing-block .icon-box { position: relative; padding: 50px 30px 0; background-color: #FFA4E1; text-align: center; } .pricing-block .icon-box:before { position: absolute; left: 0; bottom: 0; height: 75px; width: 100%; border-radius: 50% 50% 0 0; background-color: #ffffff; content: ""; } .pricing-block .icon-box .icon-outer { position: relative; height: 150px; width: 150px; background-color: #ffffff; border-radius: 50%; margin: 0 auto; padding: 10px; } .pricing-block .icon-box i { position: relative; display: block; height: 130px; width: 130px; line-height: 120px; border: 5px solid #FFA4E1; border-radius: 50%; font-size: 50px; color: #FFA4E1; -webkit-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; } .pricing-block .inner-box:hover .icon-box i { transform: rotate(360deg); } .pricing-block .price-box { position: relative; text-align: center; padding: 10px 20px; } .pricing-block .title { position: relative; display: block; font-size: 24px; line-height: 1.2em; color: #222222; font-weight: 600; } .pricing-block .price { display: block; font-size: 30px; color: #222222; font-weight: 700; color: #FFA4E1; } .pricing-block .features { position: relative; max-width: 200px; margin: 0 auto 20px; } .pricing-block .features li { position: relative; display: block; font-size: 14px; line-height: 30px; color: #848484; font-weight: 500; padding: 5px 0; padding-left: 30px; border-bottom: 1px dashed #dddddd; } /* .pricing-block .features li:before { position: absolute; left: 0; top: 50%; font-size: 16px; color: #2bd40f; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; content: "\f058"; font-family: "Font Awesome 5 Free"; margin-top: -8px; } */ .pricing-block .features li.false:before { color: #e1137b; content: "\f057"; } .pricing-block .features li a { color: #848484; } .pricing-block .features li:last-child { border-bottom: 0; } .pricing-block .btn-box { position: relative; text-align: center; } .pricing-block .btn-box a { position: relative; display: inline-block; font-size: 14px; line-height: 25px; color: #ffffff; font-weight: 500; padding: 8px 30px; background-color: #FFA4E1; border-radius: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 300ms ease; } .pricing-block .btn-box a:hover { color: #ffffff; } .pricing-block .inner-box:hover .btn-box a { position: relative; display: inline-block; font-size: 14px; line-height: 25px; color: #ffffff; font-weight: 500; padding: 8px 30px; background-color: #FFA4E1; border-radius: 10px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 300ms ease; } .pricing-block:nth-child(2) .icon-box i, .pricing-block:nth-child(2) .inner-box { border-color: #FFA4E1; } .pricing-block:nth-child(2) .btn-box a, .pricing-block:nth-child(2) .icon-box { background-color: #FFA4E1; } .pricing-block:nth-child(2) .inner-box:hover .btn-box a { /* color:#FFA4E1; background:none; border-radius:0px; border-color:#FFA4E1; */ } .pricing-block:nth-child(2) .icon-box i, .pricing-block:nth-child(2) .price { color: #FFA4E1; } .pricing-block:nth-child(3) .icon-box i, .pricing-block:nth-child(3) .inner-box { border-color: #FFA4E1; } .pricing-block:nth-child(3) .btn-box a, .pricing-block:nth-child(3) .icon-box { background-color: #FFA4E1; } .pricing-block:nth-child(3) .icon-box i, .pricing-block:nth-child(3) .price { color: #FFA4E1; } .pricing-block:nth-child(3) .inner-box:hover .btn-box a { /* color:#FFA4E1; background:none; border-radius:0px; border-color:#FFA4E1; */ } /* My Css */ .social_profile i.fa.fa { padding: 0 0 !important; margin: 0 0; } .social_profile ul li { background: black !important; width: 35px; height: 35px; margin: 0 6px 0 0; border-radius: 25px; text-align: center; } .social_profile ul li a { line-height: 32px; background: transparent; } .social_profile ul li a:hover { background: transparent !important; } .social_profile ul li:hover { background: #ff3666 !important; } .register-form span.invalid-feedback strong { color: red; font-size: 12px; font-weight: 600; } .navbar-brand img{ width: 95px; } .navbar-brand { margin-top: -41px; width: 13px; } .pt-10{padding-top: 10px;} .mt-10{margin-top: 10px;} .mt-20{margin-top: 20px;} .pb-10{padding-bottom: 10px;} .mb-10{margin-bottom: 10px;} .py-15{padding: 15px 0px;} .text-white{color: white} .w-100{width: 100%} .bg-white{background: white} .hr-76-video{width: 76%; height: 5px; border-top: 2px solid #6a6868;margin: 9px auto;} .hr-100-video{width: 100%; height: 5px; border-top: 2px solid #6a6868;margin: 0px auto;background: #232323;} .video-section {background: white; background-size: cover; width: 100%; position: relative; padding-top: 80px; padding-bottom: 80px; } .videopage h1 {font-weight: 300 !important; font-size: 26px !important; margin-bottom: 10px !important; color: #fff; font-weight: 500; } .videopagebtn {background-color: #FD00A8 !important; color: white !important; font-size: 17px !important; } .video-section p {font-size: 19px !important; line-height: 50px; font-weight: 400; color: white; margin-bottom: 10px; } .videopage {background-image: linear-gradient(45deg, #0c0c0c8f, #0c0c0c8f), url(public/frontend-assets/assets/images/home1.png) !important;} .video_content p{color:#bdbbbb } .video_section_content{background: #232323; padding: 80px 0px} .video_section_content .heading{font-weight: 700;font-size: 21px;} .video_section_content .sub-heading{font-weight: 400;font-size: 18px;} .video_section_content {color: #fff;} .video_socail{text-align: center;} .video_socail .app .heading{display: inline-block;} .video_socail .app ul li a{font-size: 13px; color: #bdbbbb;} .video_socail .app ul li{margin: 0px 4px;} .video_socail .social_icon ul li, .video_socail .app ul li{display: initial;} .video_socail .social_icon ul li a{padding: 9px 10px 12px 14px; background: #444444; border-radius: 8px; color: #fff; margin: 0px 5px;} /* .user_sidenav .avatar img{width: 98px;border-radius: 50px;} .user_sidenav-wrap ul li{padding: 10px 18px;} .user_sidenav-wrap ul li:hover{background: #4446;} .user_sidenav-wrap ul li a{color:#fff} .user_sidenav-wrap{ background: #232323; padding: 19px 0px; border-radius: 10px; color: #fff; } .user_ashboard .card h1{font-size: 22px;margin-top: 0px;margin-bottom: 15px;}*/ .user_sidebar .features{max-width: 100%;margin: 0 auto 0px;} .user_ashboard .card{min-height: 352px;position: relative; background-color: #ffffff; box-shadow: 0 20px 40px rgb(0 0 0 / 8%); padding: 20px 35px; max-width: 100%; margin: 0 auto; border-radius: 50px;} .user_ashboard table tr td {padding: 15px 5px !important;text-align: center;} .user_ashboard table tr th { padding: 15px 5px !important;background: #ffdfdf; font-weight: 700; text-align: center; } @media only screen and (max-width: 767px){ .navbar-brand img {width: 72px;} .social_profile ul li a{margin-right: 0px;} .copyright{margin-top: 0px;} .imgsection{height: 215px;} .subscribe__input {padding: 0px 20px;text-align: left;} .home-section h1 {font-size: 31px !important;font-weight: 500 !important;} .pricing-section{padding: 10px 0 10px;} .sec-title img{margin-top: 0px;} .section-white h1.section-title.stitle {font-size: 32px;} .owl-carousel .owl-item img{width: 100% !important} .single_footer_address.single_footer h4{margin-top: 10px} .register-form .row .col-lg-6.col-md-12.no-padding-left{clear: both;} } /* Header Shrink and Glass Effect */ .navbar-shrink { padding-top: 0px !important; padding-bottom: 0px !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; } .navbar-shrink .navbar-brand img { width: 70px !important; transition: width 0.3s ease !important; } .navbar-shrink .navbar-nav>li>a { font-size: 12px !important; padding: 8px 15px !important; transition: all 0.3s ease !important; } /* Professional Animations */ /* Keyframe Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Animation Classes */ .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; } .animate-fade-in-left { animation: fadeInLeft 0.8s ease-out forwards; } .animate-fade-in-right { animation: fadeInRight 0.8s ease-out forwards; } .animate-scale-in { animation: scaleIn 0.6s ease-out forwards; } .animate-bounce-in { animation: bounceIn 0.8s ease-out forwards; } .animate-slide-in-up { animation: slideInUp 0.6s ease-out forwards; } .animate-float { animation: float 3s ease-in-out infinite; } /* Delay Classes for Staggered Animations */ .animate-delay-1 { animation-delay: 0.1s; } .animate-delay-2 { animation-delay: 0.2s; } .animate-delay-3 { animation-delay: 0.3s; } .animate-delay-4 { animation-delay: 0.4s; } .animate-delay-5 { animation-delay: 0.5s; } /* Hover Animations */ .hover-lift { transition: all 0.3s ease; } .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .hover-scale { transition: all 0.3s ease; } .hover-scale:hover { transform: scale(1.05); } .hover-glow { transition: all 0.3s ease; } .hover-glow:hover { box-shadow: 0 0 20px rgba(255, 45, 239, 0.4); } /* Scroll Animations */ .scroll-reveal { opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; } .scroll-reveal.revealed { opacity: 1; transform: translateY(0); } /* Button Animations */ .btn-animated { position: relative; overflow: hidden; transition: all 0.3s ease; } .btn-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn-animated:hover::before { left: 100%; } .btn-pulse:hover { animation: pulse 0.6s ease-in-out; } /* Card Animations */ .card-animated { transition: all 0.3s ease; } .card-animated:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); } /* Loading Animation */ .loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #ff2def; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Parallax Effect */ .parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* Advanced Scrolling Effects */ /* Parallax Elements */ .parallax-slow { transform: translateY(var(--parallax-y, 0)); transition: transform 0.1s linear; } .parallax-fast { transform: translateY(calc(var(--parallax-y, 0) * -0.5)); transition: transform 0.1s linear; } /* Scroll-based Transformations */ .scroll-scale { transition: transform 0.3s ease-out; } .scroll-rotate { transition: transform 0.3s ease-out; } .scroll-fade { transition: opacity 0.3s ease-out; } /* Sticky Elements */ .sticky-section { position: sticky; top: 0; z-index: 10; } .sticky-background { position: sticky; top: 0; height: 100vh; z-index: -1; } /* Scroll Progress Bar */ .scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 4px; background: linear-gradient(90deg, #ff2def, #ff8a00); z-index: 9999; transition: width 0.25s ease-out; } /* Scroll Snap */ .scroll-snap-container { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; } .scroll-snap-section { scroll-snap-align: start; min-height: 100vh; } /* Transform on Scroll */ .transform-on-scroll { transition: all 0.3s ease-out; } /* Background Parallax */ .parallax-bg { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* Floating Elements */ .float-on-scroll { transition: transform 0.3s ease-out; } /* Zoom on Scroll */ .zoom-on-scroll { transition: transform 0.3s ease-out; } /* Rotate on Scroll */ .rotate-on-scroll { transition: transform 0.3s ease-out; } /* Opacity on Scroll */ .opacity-on-scroll { transition: opacity 0.3s ease-out; } /* Blur on Scroll */ .blur-on-scroll { transition: filter 0.3s ease-out; } /* Scale Text on Scroll */ .scale-text { transition: transform 0.3s ease-out; } /* Reveal from Sides */ .reveal-left { transform: translateX(-100%); transition: transform 0.8s ease-out; } .reveal-left.revealed { transform: translateX(0); } .reveal-right { transform: translateX(100%); transition: transform 0.8s ease-out; } .reveal-right.revealed { transform: translateX(0); } .reveal-top { transform: translateY(-100%); transition: transform 0.8s ease-out; } .reveal-top.revealed { transform: translateY(0); } .reveal-bottom { transform: translateY(100%); transition: transform 0.8s ease-out; } .reveal-bottom.revealed { transform: translateY(0); } /* Morphing Shapes */ .morph-on-scroll { transition: all 0.5s ease-out; } /* Gradient Shift on Scroll */ .gradient-shift { background: linear-gradient(45deg, var(--color1), var(--color2)); transition: background 0.3s ease-out; } /* Text Shadow on Scroll */ .text-shadow-scroll { transition: text-shadow 0.3s ease-out; } /* Border Animation on Scroll */ .border-animate { position: relative; overflow: hidden; } .border-animate::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, #ff2def, #ff8a00); transition: left 0.5s ease-out; } .border-animate.revealed::before { left: 100%; } /* Particle Effects */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .particle { position: absolute; background: rgba(255, 45, 239, 0.1); border-radius: 50%; animation: float-particle 10s infinite linear; } @keyframes float-particle { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; } } /* Scroll-based Color Changes */ .color-shift { transition: color 0.3s ease-out, background-color 0.3s ease-out; } /* Skew on Scroll */ .skew-on-scroll { transition: transform 0.3s ease-out; } /* 3D Transform on Scroll */ .transform-3d { transition: transform 0.3s ease-out; transform-style: preserve-3d; }