body { font-family: Poppins; padding: 0; margin: 0; overflow-x: hidden; font-size: 15px; } * { box-sizing: border-box; font-family: Poppins; } h1 { font-size: 28px; font-weight: 700; color: #fff; line-height: 60px; margin-bottom: 50px; margin-top: 0; } h6, p { font-size: 14px; line-height: 25px; color: #2f4461; font-family:Inter; } h2 { font-size: 32px; line-height: 50px; font-weight: 600; color: #4680ff; } h3 { color: #fb617f; } a { text-decoration: none; outline: none; } a:focus { text-decoration: none; outline: none; } section { padding-top: 40px; padding-bottom: 0px; } ol, ul { list-style: none; padding: 0; } .mt20 { margin-top: 20px; } .mt100 { margin-top: 100px; } .mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .mb60 { margin-bottom: 60px; } .mb90 { margin-bottom: 90px; } .o-hidden { overflow: hidden; } .text-bold { font-weight: 700; } .btn-login { padding: 7px 18px; text-decoration: none; transition: all 0.3s; box-shadow: 0 5px 25px -7px #464444; background: #11c15b; border: 1px solid #11c15b; border-radius: 28px; font-family: Inter; color: #fff; font-size: 16px; text-decoration: none; transition: all 0.3s; } .btn-login:focus, .btn-login:hover { background: #fff; border: 1px solid #1aeb72; color: #1aeb72; text-decoration: none; opacity: 0.8; cursor: pointer; box-shadow: none; } .navbar { margin-bottom: 0; padding: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .navbar-toggle { border: none; } .navbar-right { margin-right: 0; } .navbar-toggle .icon-bar { background-color: #fb819f; width: 24px; } .nav-item > li > a { padding: 15px; } .navbar-brand { height: 50px; padding: 0 15px; } .navbar-brand img { height: 50px; } .nav-base { padding: 15px 0; top: 0; transition: all 200ms ease-in-out; z-index: 9999; } .nav-base #navigation ul li a { text-transform: capitalize; font-size: 15px; } .nav-base .logo-blue { display: none; } .nav-base.mini-nav { padding: 8px 0; box-shadow: 0 0 2px rgba(100, 100, 100, 0.3); } .nav-base.mini-nav .logo-blue { display: block; } .nav-base.mini-nav .logo-white { display: none; } .nav > li > a:focus, .nav > li > a:hover { background-color: transparent; } .nav-base #navigation ul li a.btn { padding: 7px 15px; margin-bottom: 0; margin-right: 0; margin-top: 7px; min-width: 40px; } .nav-base.dark-bg.mini-nav #navigation ul li.active a, .nav-base.dark.mini-nav #navigation ul li.active a, .nav-base.light-bg.mini-nav #navigation ul li.active a, .nav-base.light.mini-nav #navigation ul li.active a { color: #4680ff; } .nav-base.dark { background: transparent; } .nav-base.dark #navigation ul li a { color: #fff; padding: 0 18px; } .nav-base.dark #navigation ul li a:hover { color: #222; } .nav-base.dark #navigation ul li a.btn { color: #fff; background: #00aff0; } .nav-base.dark #navigation ul li a.btn:hover { background: transparent; color: #fff; border-color: #fff; } .nav-base.dark #navigation ul li a.btn-secondary { color: #fff; border-color: #fff; background: none; } .nav-base.dark #navigation ul li a.btn-secondary:hover { color: #fff; border-color: #00aff0; background: #00aff0; } .nav-base.dark.mini-nav { z-index: 1200; background: #fff; box-shadow: 5px 2px 12px -3px #999; } .nav-base.dark.mini-nav #navigation ul li a { color: #666; } .nav-base.dark.mini-nav #navigation ul li a.active { color: #4680ff; } .nav-base.dark.mini-nav #navigation ul li a:hover { color: #4680ff; } .nav-base.dark.mini-nav #navigation ul li a.btn { color: #00aff0; border-color: #00aff0; background: transparent; } .nav-base.dark.mini-nav #navigation ul li a.btn:hover { color: #fff; border-color: #00aff0; background: #00aff0; } .nav-base.dark.mini-nav #navigation ul li a.btn-secondary { color: #fff; border-color: #00aff0; background: #00aff0; } .nav-base.dark.mini-nav #navigation ul li a.btn-secondary:hover { color: #00aff0; border-color: #00aff0; background: transparent; } .nav-base.light { background: transparent; } .nav-base.light #navigation ul li a { color: #666; } .nav-base.light #navigation ul li a:hover { color: #00aff0; } .nav-base.light #navigation ul li a.btn { color: #fff; background: #00aff0; } .nav-base.light #navigation ul li a.btn:hover { color: #00aff0; background: transparent; } .nav-base.light #navigation ul li a.btn-secondary { color: #00aff0; background: none; } .nav-base.light #navigation ul li a.btn-secondary:hover { color: #fff; background: #00aff0; } .nav-base.light.mini-nav { background: #fff; } .nav-base.light.mini-nav #navigation ul li a { color: #555; } .nav-base.light.mini-nav #navigation ul li a:hover { color: #00aff0; } .nav-base.light.mini-nav #navigation ul li a.btn { color: #00aff0; background: transparent; } .nav-base.light.mini-nav #navigation ul li a.btn:hover { color: #fff; background: #00aff0; } .nav-base.light.mini-nav #navigation ul li a.btn-secondary { color: #fff; background: #00aff0; } .nav-base.light.mini-nav #navigation ul li a.btn-secondary:hover { color: #00aff0; background: none; } .nav-base.dark-bg { background: #242424; } .nav-base.dark-bg #navigation ul li a { color: #fff; } .nav-base.dark-bg #navigation ul li a:hover { color: #00aff0; } .nav-base.dark-bg #navigation ul li a.btn { color: #fff; background: #00aff0; } .nav-base.dark-bg #navigation ul li a.btn:hover { color: #fff; border-color: #fff; background: transparent; } .nav-base.dark-bg #navigation ul li a.btn-secondary { color: #fff; border-color: #fff; background: none; } .nav-base.dark-bg #navigation ul li a.btn-secondary:hover { color: #fff; border-color: #00aff0; background: #00aff0; } .nav-base.dark-bg.mini-nav { background: #232323; } .nav-base.light-bg { background: #fff; } .nav-base.light-bg #navigation ul li a { color: #555; } .nav-base.light-bg #navigation ul li a:hover { color: #00aff0; } .nav-base.light-bg #navigation ul li a.btn { color: #fff; background: #00aff0; } .nav-base.light-bg #navigation ul li a.btn:hover { color: #00aff0; background: transparent; } .nav-base.light-bg #navigation ul li a.btn-secondary { color: #00aff0; background: none; } .nav-base.light-bg #navigation ul li a.btn-secondary:hover { color: #fff; background: #00aff0; } .nav-base.light-bg.mini-nav { background: #fff; } .nav-base #navigation ul li.active a { color: #fff; } .dark.mini-nav .navbar-brand { visibility: visible; } .main-header { background: radial-gradient(#53a2ef 30%, #4680ff 70%); background-size: cover; padding-top: 0; padding-bottom: 0; position: relative; overflow: hidden; position: relative; margin-top: -100px; transform-origin: center; } .main-header:after { /*content:"";position:absolute;bottom:-200px;height:400px;background-color:#fff;width:100%;transform:skewY(-10deg);*/ } .main-header .img-section { position: relative; /*margin-top:100px;*/ } .main-header .img-section .img-chat { /*top:150px;left:50px;*/ position: absolute; z-index: 3; /*box-shadow:0 10px 38px 2px rgba(4,26,55,0.25);*/ /*animation:floating1 8s infinite;-webkit-animation:floating1 8s infinite;-webkit-animation-delay:1s;animation-delay:1s;*/ } .main-header .img-section .img-browser { position: relative; z-index: 2; /*animation:floating1 10s infinite;-webkit-animation:floating1 10s infinite;-webkit-animation-delay:1s;animation-delay:1s;*/ } .main-header .img-section .img-followers { bottom: -75px; position: absolute; right: -55px; z-index: 3; /*box-shadow:0 10px 38px 2px rgba(4,26,55,0.25);*/ /*animation:floating2 7s infinite;-webkit-animation:floating2 7s infinite;-webkit-animation-delay:1s;animation-delay:1s;*/ width: 220px; } .home-cont img { display: inline-block; } .home-cont h2 { margin-top: 0; } .main-header { position: relative; overflow: visible; } .main-header h1 { color: #fff; margin-bottom: 10px; font-weight: 700; font-size: 45px; text-shadow: 0 2px 4px rgba(102, 102, 102, 0.34); } .main-header .content-text h3 { color: #fff; margin-bottom: 50px; } .learn-more { background: #3abb69; border: 2px solid #3abb69; border-radius: 28px; color: #fff; font-size: 18px; padding: 10px 20px; text-decoration: none; transition: all 0.5s; width: 80%; box-shadow: 0 2px 18px -7px #3abb69; } .learn-more:focus, .learn-more:hover { background: #fff; color: #3abb69; text-decoration: none; border: 2px solid #fff; cursor: pointer; box-shadow: 0 2px 18px -7px #3abb69; } .main-header .main-header-sub { width: 100%; display: flex; align-items: center; padding-top: 300px; padding-bottom: 150px; z-index: 9; } .main-header .content-text { top: calc(50% - 150px); width: 100%; position: relative; } .main-header .content-text .circle-1 { position: absolute; left: -22%; width: 150px; height: 150px; border: 8px solid #db85fb; border-radius: 50%; opacity: 0.3; animation: floating 10s infinite; -webkit-animation: floating 10s infinite; } .main-header .content-text .circle-2 { position: absolute; right: -20%; bottom: 0; width: 80px; height: 80px; border: 15px solid #00ffc9; border-radius: 50%; opacity: 0.4; animation: floating 9s infinite; -webkit-animation: floating 9s infinite; } .main-header .content-text .circle-3 { position: absolute; top: 0; right: 0; width: 30px; height: 30px; border: 6px solid #b1af00; border-radius: 50%; opacity: 0.6; animation: floating 8s infinite; -webkit-animation: floating 8s infinite; } .main-header .content-text .circle-4 { position: absolute; top: -50px; left: 0; width: 100px; height: 100px; border: 15px solid #f95eaa; border-radius: 50%; opacity: 0.5; z-index: -1; animation: floating 7s infinite; -webkit-animation: floating 7s infinite; } .about-you { overflow: hidden; padding-bottom: 100px; } .about-you h2 { margin-bottom: 120px; } .about-you .about-image .img-1 { position: absolute; z-index: 1; } .about-you .about-image .img-2 { position: absolute; left: 17%; top: -40px; z-index: 3; } .about-you .about-image .img-3 { position: relative; left: 232%; z-index: 5; } .about-you .about-image .img-4 { position: absolute; left: 60%; top: -60px; z-index: 8; } .about-you .about-image .img-5 { position: absolute; right: 0; top: -20%; z-index: 7; } .about-you .about-image .img-6 { position: absolute; left: 9%; top: 250px; z-index: 2; } .about-you .about-image .img-7 { position: absolute; left: 20%; top: 250px; z-index: 4; } .about-you .about-image .img-8 { position: absolute; left: 50%; top: 300px; z-index: 6; } .about-you .about-image .img-9 { position: absolute; right: 0; top: 250px; z-index: 8; } .about-you .about-image .img-hvr { transition-delay: 0s !important; } .about-you .about-image .img-hvr:hover { z-index: 999; transform: scale(1.1) !important; } .habit { background-color: #303549; position: relative; margin-top: 150px; padding-bottom: 190px; background-size: cover; } .habit h2 { font-weight: 600; color: #fff; } .habit h3 { font-weight: 600; color: #fff; } .habit h4 { margin: 25px 0 20px; line-height: 1.6; font-size: 16px; } .habit i { font-size: 40px; margin-top: 30px; margin-bottom: 20px; } .habit p { color: #fff; font-size: 14px; line-height: 24px; letter-spacing: 1px; } .habit .work { padding: 20px; margin-bottom: 60px; color: #fff; border-radius: 15px; margin-left: 15px; margin-right: 15px; background-image: linear-gradient(34deg, #4680ff 0%, #81c1fd 100%); box-shadow: 0 5px 23px 2px rgba(4, 26, 55, 0.45); transition: all 0.3s; } .habit .work:hover { box-shadow: 0 7px 23px 2px rgba(4, 26, 55, 0.45); transform: scale(1.02); } .habit .play { padding: 20px; margin-bottom: 60px; color: #fff; border-radius: 15px; position: absolute; top: 25%; margin-left: 15px; margin-right: 15px; background-image: linear-gradient(34deg, #1fe4bd 0%, #67cfc6 99%); box-shadow: 0 5px 23px 2px rgba(4, 26, 55, 0.45); transition: all 0.3s; } .habit .play:hover { box-shadow: 0 7px 23px 2px rgba(4, 26, 55, 0.45); transform: scale(1.02); } .habit .grow { padding: 20px; margin-bottom: 60px; color: #fff; border-radius: 15px; margin-left: 15px; margin-right: 15px; background-image: linear-gradient(34deg, #f1c40f 0%, #f3da75 100%); box-shadow: 0 5px 23px 2px rgba(4, 26, 55, 0.45); transition: all 0.3s; } .habit .grow:hover { box-shadow: 0 7px 23px 2px rgba(4, 26, 55, 0.45); transform: scale(1.02); } .habit .rest { padding: 20px; margin-bottom: 60px; color: #fff; border-radius: 15px; position: absolute; top: 75%; margin-left: 15px; margin-right: 15px; background-image: linear-gradient(34deg, #f78ea4 0%, #ff9eac 100%); box-shadow: 0 5px 23px 2px rgba(4, 26, 55, 0.45); transition: all 0.3s; } .habit .rest:hover { box-shadow: 0 7px 23px 2px rgba(4, 26, 55, 0.45); transform: scale(1.02); } .habit .right-main { display: flex; align-items: center; height: 100%; margin-left: 50px; } .schedule:before { content: ""; opacity: 0.2; top: 30%; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; background: url("../images/bg-svg.svg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .schedule { position: relative; overflow: hidden; padding-top: 120px; } .schedule .schedule-text { margin-top: 50px; } .schedule h2 { margin-top: 20px; } .schedule .schedule-content { position: relative; margin: 80px 0 0; } .schedule .schedule-content .row { display: flex; align-items: center; } .schedule .schedule-content ul li { line-height: 1.52; } .schedule .schedule-content ul li:before { content: ""; display: inline-block; width: 11px; height: 11px; background-color: #4680ff; border-radius: 10px; margin: 0 10px; } .schedule .schedule-content ul li:after { content: ""; display: flex; width: 1px; height: 15px; background-color: #4680ff; margin: 0 15px; } .schedule .schedule-content ul li:last-child:after { content: none; } .schedule .schedule-content .left-main p { margin: 20px 0 30px; } .schedule .schedule-content .ui1 { position: absolute; z-index: 1; top: 130px; left: 140px; } .schedule .schedule-content .ui2 { position: absolute; z-index: 1; top: 190px; right: 140px; } .team { position: relative; overflow: hidden; padding-top: 0; } .team .tab-content .title { margin-top: 80px; } .team #version1 h2 { margin: 30px 0; } .team #version1 h3 { margin-bottom: 20px; } #sync2 h3 { margin-top: 0; } #carousel-custom-dots .owl-dot.active { background: transparent; } .owl-carousel .owl-item { padding: 25px 0; } .owl-carousel .owl-item img { width: auto; } .owl-carousel .owl-item p:first-child { /*width:50%;margin:0 auto 25px;font-size:18px;line-height:35px;*/ } .team-images { width: 110px !important; border-color: transparent !important; display: inline-block; } .team-images img { border-radius: 100px; opacity: 0.6; transition: all ease-in-out 0.5s; cursor: pointer; border: 2px solid transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); opacity: 1; } .team-images:hover { background: transparent !important; } .team-images .img-1 { position: absolute; top: 50px; left: 160px; width: 90px; z-index: 1; animation: floating 7s infinite; -webkit-animation: floating 7s infinite; } .team-images .img-2 { position: absolute; top: 140px; left: 20px; width: 65px; z-index: 1; animation: floating 6s infinite; -webkit-animation: floating 6s infinite; } .team-images .img-3 { position: absolute; top: 170px; left: 200px; width: 82px; z-index: 1; animation: floating 5s infinite; -webkit-animation: floating 5s infinite; } .team-images .img-4 { position: absolute; top: 250px; left: 150px; width: 55px; z-index: 1; animation: floating 8s infinite; -webkit-animation: floating 8s infinite; } .team-images .img-5 { position: absolute; top: 310px; left: -20px; z-index: 1; animation: floating 9s infinite; -webkit-animation: floating 9s infinite; } .team-images .img-6 { position: absolute; top: 330px; left: 220px; width: 50px; z-index: 1; animation: floating 5s infinite; -webkit-animation: floating 5s infinite; } .team-images .img-7 { position: absolute; top: 430px; left: 100px; z-index: 1; animation: floating 6s infinite; -webkit-animation: floating 6s infinite; } .team-images .img-8 { position: absolute; top: 50px; right: 160px; width: 90px; z-index: 1; animation: floating 6s infinite; -webkit-animation: floating 6s infinite; } .team-images .img-9 { position: absolute; top: 140px; right: 20px; width: 65px; z-index: 1; animation: floating 5s infinite; -webkit-animation: floating 5s infinite; } .team-images .img-10 { position: absolute; top: 170px; right: 200px; width: 82px; z-index: 1; animation: floating 9s infinite; -webkit-animation: floating 9s infinite; } .team-images .img-11 { position: absolute; top: 250px; right: 150px; width: 50px; z-index: 1; animation: floating 8s infinite; -webkit-animation: floating 8s infinite; } .team-images .img-12 { position: absolute; top: 310px; right: -20px; z-index: 1; animation: floating 5s infinite; -webkit-animation: floating 5s infinite; } .team-images .img-13 { position: absolute; top: 330px; right: 220px; width: 50px; z-index: 1; animation: floating 6s infinite; -webkit-animation: floating 6s infinite; } .team-images .img-14 { position: absolute; top: 430px; right: 100px; z-index: 1; animation: floating 7s infinite; -webkit-animation: floating 7s infinite; } .team-images.active img { border: 2px solid #0e7ae8; border-radius: 65px; opacity: 1; } #team .nav-pills { padding-top: 80px; } #team .nav-pills li { float: none; display: inline-block; } #team .nav-pills li a { transition: all ease-in 0.3s; } #team .nav-pills li a:hover { opacity: 1; background: #0e7ae8; color: #fff; transition: all ease-in 0.3s; } .nav-pills li a { border: 1px solid #0e7ae8; } .nav-pills li.active a { background: #0e7ae8; transition: all ease-in 0.3s; border: 1px solid transparent; opacity: 1; } .nav-pills li.active a:focus { background: #0e7ae8; transition: all ease-in 0.3s; border: 1px solid transparent; opacity: 1; } .nav-pills li.active a:hover { background: #fff; color: #0e7ae8; border: 1px solid #0e7ae8; } .team-block img { bottom: -10px; position: relative; z-index: 1; transition: 0.3s; margin: 0 auto; } .team-desc { background: #f7f7f7; padding-bottom: 10px; border-radius: 5px; position: relative; z-index: 2; } .team-name { padding: 10px 0; } .team-position p { color: #0e7ae8; } .team-socials { display: inline-block; padding-top: 15px; padding-left: 0; } .team-socials li { float: left; padding-right: 5px; padding-left: 5px; } .team-socials li a { color: #2d2d2d; } .team-socials i { transition-duration: 0.4s; cursor: pointer; font-size: 20px; } .team_layout2 { padding: 50px 0; } .team-block:hover img { bottom: 0; transition: 0.3s; } .team-desc { transition-duration: 0.5s; } .team-block:hover .team-desc { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.19); transition-duration: 0.5s; } .post-by { display: flex; align-items: center; justify-content: center; margin-bottom: 60px; } .post-by img { width: 50px; height: 50px; border-radius: 100px; margin: 0 10px; } .post-by .name h6, .post-by .name p { margin-bottom: 0; text-align: left; } .post-by .name h6 { color: #4680ff; font-size: 15px; } .post-by .name p { font-size: 13px; } .round-header-circle { position: absolute; left: 50%; top: 50%; opacity: 0.5; z-index: 0; transform: translate(-50%, -50%); } .round-header-circle .round-1 .r-1, .round-header-circle .round-2 .r-1, .round-header-circle .round-3 .r-1 { top: -5px; margin-left: -5px; } .round-header-circle .round-animate { width: 900px; height: 900px; position: relative; display: inline-block; } .round-header-circle .round-animate .round-1 span, .round-header-circle .round-animate .round-2 span, .round-header-circle .round-animate .round-3 span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; position: absolute; left: 50%; } .round-header-circle .round-animate .round-1 span { border: 2px solid #8c1bff; } .round-header-circle .round-animate .round-2 span { border: 2px solid #00ffc9; } .round-header-circle .round-animate .round-3 span { border: 2px solid #b1af00; } .round-header-circle .round-animate .round-1, .round-header-circle .round-animate .round-2, .round-header-circle .round-animate .round-3 { border: 1px solid rgba(255, 255, 255, 0.48); border-radius: 50%; position: absolute; } .round-header-circle .round-animate .round-1 { width: 900px; height: 900px; transform: rotate(23deg); animation: round-1 100s linear infinite; } .round-header-circle .round-animate .round-1 span.r-2 { width: 50px; height: 50px; border: 8px solid #8c1bff; } .round-header-circle .round-animate .round-1 span.r-3 { width: 20px; height: 20px; border: 3px solid #8c1bff; } .round-header-circle .round-animate .round-2 { width: 700px; top: 100px; height: 700px; left: 100px; transform: rotate(-41deg); animation: round-2 80s linear infinite; } .round-header-circle .round-animate .round-2 span.r-2 { width: 30px; height: 30px; border: 5px solid #00ffc9; } .round-header-circle .round-animate .round-2 span.r-3 { width: 30px; height: 30px; border: 8px solid #00ffc9; } .round-header-circle .round-animate .round-3 { width: 500px; top: 200px; height: 500px; left: 200px; transform: rotate(0deg); animation: round-3 60s linear infinite; } .round-header-circle .round-animate .round-3 span.r-2 { width: 20px; height: 20px; border: 3px solid #adadad; } .round-header-circle .round-animate .round-3 span.r-3 { width: 30px; height: 30px; border: 5px solid #adadad; } .round-header-circle .round-1 .r-2 { margin-left: 343px; top: 682px; } .round-header-circle .round-1 .r-3 { margin-left: -424px; top: 262px; } .round-header-circle .round-1 .r-4 { margin-left: -338px; top: 745px; } .round-header-circle .round-2 .r-2 { margin-left: -354px; top: 248px; } .round-header-circle .round-2 .r-3 { margin-left: -198px; top: 632px; } .round-header-circle .round-2 .r-4 { margin-left: 192px; top: 633px; } .round-header-circle .round-3 .r-2 { margin-left: -254px; top: 190px; } .round-header-circle .round-3 .r-3 { margin-left: 2px; top: 483px; } .round-header-circle .round-3 .r-4 { margin-left: 244px; top: 233px; } .round-built-by { position: absolute; left: -40%; top: 15%; opacity: 0.2; z-index: -9; } .round-built-by .round-animate { width: 700px; height: 700px; position: relative; display: inline-block; } .round-built-by .round-animate .round-1 span, .round-built-by .round-animate .round-2 span, .round-built-by .round-animate .round-3 span { border-radius: 50%; position: absolute; left: 50%; } .round-built-by .round-animate .round-1, .round-built-by .round-animate .round-2, .round-built-by .round-animate .round-3 { border: 1px solid #e2e2e2; } .round-built-by .round-animate .round-1, .round-built-by .round-animate .round-2, .round-built-by .round-animate .round-3 { border: 1px solid #adadad; border-radius: 50%; position: absolute; } .round-built-by .round-animate .round-1 { width: 700px; height: 700px; transform: rotate(23deg); animation: round-1 100s linear infinite; } .round-built-by .round-animate .round-2 { width: 600px; top: 50px; height: 600px; left: 50px; transform: rotate(-41deg); animation: round-2 80s linear infinite; } .round-built-by .round-animate .round-3 { width: 500px; top: 100px; height: 500px; left: 100px; transform: rotate(0deg); animation: round-3 60s linear infinite; } .round-built-by .round-1 .r-1 { border: 2px solid #8c1bff; width: 15px; height: 15px; top: -8px; background-color: #eef6fe; } .round-built-by .round-1 .r-2 { margin-left: 339px; top: 330px; width: 20px; height: 20px; border: 3px solid #8c1bff; background-color: #eef6fe; } .round-built-by .round-2 .r-1 { border: 2px solid #00ffc9; width: 15px; height: 15px; top: -8px; background-color: #eef6fe; } .round-built-by .round-2 .r-2 { margin-left: -300px; top: 239px; width: 20px; height: 20px; border: 3px solid #00ffc9; top: 216px; background-color: #eef6fe; } .round-built-by .round-3 .r-1 { border: 2px solid #b1af00; width: 15px; height: 15px; top: -8px; background-color: #eef6fe; } .round-built-by .round-3 .r-2 { margin-left: -254px; top: 290px; width: 20px; height: 20px; border: 3px solid #b1af00; background-color: #eef6fe; } .schedule-round { position: absolute; left: 50%; top: 50%; opacity: 1; z-index: -9; transform: translate(-50%, -50%); } .schedule-round .round-animate { width: 1300px; height: 1300px; position: relative; display: inline-block; transform: scale(0.8); } .schedule-round .round-animate .round-1 span, .schedule-round .round-animate .round-2 span, .schedule-round .round-animate .round-3 span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #222; position: absolute; left: 50%; } .schedule-round .round-animate .round-1 span { border: 2px solid #8c1bff; } .schedule-round .round-animate .round-2 span { border: 2px solid #00ffc9; } .schedule-round .round-animate .round-3 span { border: 2px solid #b1af00; } .schedule-round .round-animate .round-1, .schedule-round .round-animate .round-2, .schedule-round .round-animate .round-3 { border: 1px solid #e2e2e2; } .schedule-round .round-animate .round-1, .schedule-round .round-animate .round-2, .schedule-round .round-animate .round-3 { border: 1px solid #e6e6e6; border-radius: 50%; position: absolute; } .schedule-round .round-animate .round-1 { width: 1350px; height: 1350px; transform: rotate(23deg); animation: round-1 100s linear infinite; } .schedule-round .round-animate .round-2 { width: 1020px; top: 180px; height: 1020px; left: 190px; transform: rotate(-41deg); animation: round-2 80s linear infinite; } .schedule-round .round-animate .round-3 { width: 680px; top: 360px; height: 680px; left: 360px; transform: rotate(0deg); animation: round-3 60s linear infinite; } .schedule-round .round-1 .r-2 { margin-left: 343px; top: 1247px; } .schedule-round .round-1 .r-3 { margin-left: -186px; top: 17px; } .schedule-round .round-1 .r-4 { margin-left: -338px; top: 1255px; } .schedule-round .round-2 .r-2 { margin-left: -300px; top: 91px; } .schedule-round .round-2 .r-3 { margin-left: -198px; top: 955px; } .schedule-round .round-2 .r-4 { margin-left: 192px; top: 953px; } .schedule-round .round-3 .r-2 { margin-left: -254px; top: 82px; } .schedule-round .round-3 .r-3 { margin-left: 2px; top: 493px; } .schedule-round .round-3 .r-4 { margin-left: 234px; top: 73px; } .amazing-features { background-image: url("../images/shape2.jpg"); position: relative; background-size: cover; padding-top: 0; } .amazing-features .blue-card i { color: #4680ff; } .amazing-features .blue-card:hover { background-color: rgba(70, 128, 255, 0.3); } .amazing-features .green-card i { color: #11c15b; } .amazing-features .green-card:hover { background-color: rgba(17, 193, 91, 0.3); } .amazing-features .pink-card i { color: #fb617f; } .amazing-features .pink-card:hover { background-color: rgba(251, 97, 127, 0.3); } .amazing-features .yellow-card i { color: #ffb64d; } .amazing-features .yellow-card:hover { background-color: rgba(255, 182, 77, 0.3); } .amazing-features .coffee-card i { color: #ab7967; } .amazing-features .coffee-card:hover { background-color: rgba(171, 121, 103, 0.3); } .amazing-features .skyblue-card i { color: #1fe4bd; } .amazing-features .skyblue-card:hover { background-color: rgba(31, 228, 189, 0.3); } .amazing-features h2 { margin-bottom: 70px; } .amazing-features .custom-feature { background-color: #fff; margin: 15px 0; padding: 40px; box-shadow: 0 0 20px 0 #ddd; transition: all 0.2s ease; } .amazing-features .custom-feature .icon img { position: absolute; left: 50%; top: 25%; transform: translate(-50%, -50%); } .amazing-features .custom-feature p { font-size: 13px; } .amazing-features .custom-feature h5 { margin: 20px 0; } .amazing-features .custom-feature i { font-size: 40px; margin: 40px 0; } .amazing-features .custom-feature:hover { box-shadow: 0 0 25px 0 #bbb; } .video { /*padding:235px 0;*/ } .bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .thumb, .video-frame { width: 100%; } .video-frame { height: 320px; } .video-play { background-color: #fff; border-radius: 50%; display: block; width: 80px; height: 80px; padding-left: 10px; font-size: 40px; margin: 0 auto; box-shadow: 0 3px 15px -2px rgba(94, 94, 94, 0.65); -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .video-play:hover { transform: scale(1.3); color: #ff3366; } .mfp-close:hover { background-color: transparent; box-shadow: none; } .powerful-template .template { width: 100%; margin: 0 auto; } .powerful-template .template h2 { margin-bottom: 50px; } .powerful-template .template h3 { margin-bottom: 20px; } .powerful-template .about-image { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 3px 15px -2px rgba(94, 94, 94, 0.65); transition: all ease-in-out 0.3s; } .powerful-template .about-image:hover { box-shadow: 0 2px 14px 0 #5e5e5e; transform: translate3d(0px, -4px, 0px) scale(1.02); } .powerful-template .about-hvr-effect { background-color: rgba(0, 0, 0, 0.3); position: absolute; width: 100%; height: 100%; top: 0; cursor: pointer; transition: all ease-in-out 0.5s; transform: scale(0); opacity: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .powerful-template .about-hvr-effect .btn-preview { background-color: #fff; border: 1px solid #4680ff; border-radius: 20px; color: #4680ff; box-shadow: 0 0 1px 0 #4680ff; font-size: 15px; } .powerful-template .about-hvr-effect .btn-preview:focus { box-shadow: none; } .powerful-template .about-hvr-effect .btn-preview:hover { background-color: #4680ff; border: 1px solid #4680ff; color: #fff; box-shadow: 0 8px 8px -7px #4680ff; } .powerful-template .about-us-creative .about-image:hover .about-hvr-effect { transition: all ease-in-out 0.5s; transform: scale(1); opacity: 1; } .powerful-template .about-detail { padding-top: 15px; text-align: center; padding-bottom: 40px; } .powerful-template .about-detail h5 { font-size: 16px; color: #4680ff; letter-spacing: 1px; margin: 10px 0 0; } .powerful-template .about-detail .btn-mobile { display: none; } .visit { background-color: #f1f1f1; overflow: hidden; } .visit h5 { font-weight: 700; color: #4680ff; margin-bottom: 20px; } .visit h2 { color: #222; margin-bottom: 40px; font-size: 48px; } .visit h2:after { content: ""; position: absolute; bottom: 65px; width: 100px; height: 5px; background-color: #4680ff; transform: translateX(-50%); left: 50%; text-align: center; } .visit ul li { font-size: 22px; display: inline-block; padding: 0 10px; border-right: 1px solid #ccc; color: #afafaf; } .visit ul li:last-child { border-right: none; } .footer { padding: 50px auto 20px; } .footer h3 { font-size: 18px; color: #222; font-weight: 600; margin-bottom: 30px; } .footer p { font-size: 14px; color: #383838; } .footer ul li a { text-decoration: none; color: #222; } .footer ul li h5 { font-size: 14px; color: #888888; margin: 0 auto 30px; } .footer .footer_socials a i { font-size: 22px; margin-right: 10px; color: #adadad; } .footer .get-in-touch { background-color: #4680ff; color: #fff; border-color: #4680ff; font-size: 14px; margin-bottom: 20px; padding: 10px 20px; } .footer .get-in-touch:focus { box-shadow: none; } .footer-logo { margin: 40px 0; } .copyright { /*background-color:#4680ff;*/ padding: 15px 0; margin-top: 15px; border-top: 1px solid #454956; } .copyright p, .copyright p a { font-size: 14px; color: #ffffff; margin-bottom: 0; margin-top: 10px; } .screenshot { width: 100%; margin: 0 auto; } .screenshot h3 { margin-bottom: 20px; } .screenshot h2 { margin-bottom: 50px; } .my-gallery .owl-stage-outer { overflow: hidden; } .my-gallery .owl-item { display: inline-block; } .wave-main { position: relative; bottom: 70px; } .wave { position: absolute; left: 0; right: 0; top: 250px; bottom: 0; z-index: 1; transform: rotate(180deg); } .wave + .wave { z-index: 2; } .scrollup { position: fixed; bottom: 80px; right: 21px; display: none; z-index: 1100; background: #f41152; color: #fff; border-radius: 100px; height: 50px; width: 50px; line-height: 1.5; cursor: pointer; transition: 0.5s; } .btn-info { color: #fff; background-color: #f41152; border-color: #f41152; } .scrollup i { color: #fff; } @-webkit-keyframes round-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes round-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes round-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes round-2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes round-3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes round-3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes floating1 { 0% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(-20px); -moz-transform: rotateX(0deg) translateY(-20px); -ms-transform: rotateX(0deg) translateY(-20px); -o-transform: rotateX(0deg) translateY(-20px); transform: rotateX(0deg) translateY(-20px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @-webkit-keyframes floating1 { 0% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(-20px); -moz-transform: rotateX(0deg) translateY(-20px); -ms-transform: rotateX(0deg) translateY(-20px); -o-transform: rotateX(0deg) translateY(-20px); transform: rotateX(0deg) translateY(-20px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @keyframes floating2 { 0% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(15px); -moz-transform: rotateX(0deg) translateY(15px); -ms-transform: rotateX(0deg) translateY(15px); -o-transform: rotateX(0deg) translateY(15px); transform: rotateX(0deg) translateY(15px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @-webkit-keyframes floating2 { 0% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(15px); -moz-transform: rotateX(0deg) translateY(15px); -ms-transform: rotateX(0deg) translateY(15px); -o-transform: rotateX(0deg) translateY(15px); transform: rotateX(0deg) translateY(15px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); -moz-transform: rotateX(0deg) translateY(0px); -ms-transform: rotateX(0deg) translateY(0px); -o-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @keyframes floating { from { -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg); -moz-transform: rotate(0deg) translate(-10px) rotate(0deg); -ms-transform: rotate(0deg) translate(-10px) rotate(0deg); -o-transform: rotate(0deg) translate(-10px) rotate(0deg); transform: rotate(0deg) translate(-10px) rotate(0deg); } to { -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg); -moz-transform: rotate(360deg) translate(-10px) rotate(-360deg); -ms-transform: rotate(360deg) translate(-10px) rotate(-360deg); -o-transform: rotate(360deg) translate(-10px) rotate(-360deg); transform: rotate(360deg) translate(-10px) rotate(-360deg); } } @-webkit-keyframes floating { from { -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg); -moz-transform: rotate(0deg) translate(-10px) rotate(0deg); -ms-transform: rotate(0deg) translate(-10px) rotate(0deg); -o-transform: rotate(0deg) translate(-10px) rotate(0deg); transform: rotate(0deg) translate(-10px) rotate(0deg); } to { -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg); -moz-transform: rotate(360deg) translate(-10px) rotate(-360deg); -ms-transform: rotate(360deg) translate(-10px) rotate(-360deg); -o-transform: rotate(360deg) translate(-10px) rotate(-360deg); transform: rotate(360deg) translate(-10px) rotate(-360deg); } } @media (min-width: 768px) { .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { float: left; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0; } } @media (min-width: 992px) { .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: auto; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; } } @media (min-width: 1200px) { .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { float: left; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.66666667%; } .col-lg-pull-10 { right: 83.33333333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.66666667%; } .col-lg-pull-7 { right: 58.33333333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.66666667%; } .col-lg-pull-4 { right: 33.33333333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.66666667%; } .col-lg-pull-1 { right: 8.33333333%; } .col-lg-pull-0 { right: auto; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.66666667%; } .col-lg-push-10 { left: 83.33333333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.66666667%; } .col-lg-push-7 { left: 58.33333333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.66666667%; } .col-lg-push-4 { left: 33.33333333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.66666667%; } .col-lg-push-1 { left: 8.33333333%; } .col-lg-push-0 { left: auto; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0; } } @media (max-width: 1366px) { .schedule h2 { margin-top: 20px; margin-bottom: 40px; } .schedule h3 { margin-top: 20px; } .about-you { padding-top: 30px; } .about-you .about-image .img-3 { left: 175%; } .about-you .about-image .img-4 { top: 30px; } .main-header .content-text .circle-1 { left: -15%; } .main-header .content-text .circle-2 { right: 0; } .schedule .schedule-text { margin-top: 0; } .team { padding-bottom: 30px; } } @media (max-width: 1199px) { .team-round-left, .team-round-right { display: none; } .round-header-circle { display: none; } .schedule .schedule-content .ipad { right: -30%; } .schedule .schedule-content .ipad-2 { left: -35%; } } @media (max-width: 1024px) { section { padding-top: 50px; padding-bottom: 50px; } .habit h3 { font-size: 22px; } .habit h4 { line-height: 30px; font-size: 14px; margin: 15px 0 10px; } .schedule { padding-top: 60px; } .schedule .schedule-content .left-main { margin-top: 320px; margin-bottom: 320px; } .schedule .schedule-text { margin: 140px 0 50px; } .about-us-creative .about-detail .btn-mobile { display: block; margin: 8px auto; } .about-us-creative .btn-preview { background-color: #3a73f1; border: 1px solid #3a73f1; border-radius: 20px; font-size: 14px; } .about-us-creative .btn-preview:focus { box-shadow: none; } .about-us-creative .btn-preview:hover { opacity: 0.8; } .about-us-creative .about-hvr-effect { display: none; } .team .owl-dots { display: none; } .post-by { margin-bottom: 0; } .amazing-features { padding-top: 50px; } .team .tab-content .title { margin-top: 20px; } } @media (max-width: 991px) { .nav-base.dark #navigation ul li a { padding: 0 8px; } #team .owl-dot { display: none; } .main-header .img-chat, .main-header .img-followers { /*display:none;*/ } .habit { margin-top: 0; padding-bottom: 30px; } .habit .right-main { text-align: center; } .habit .right-main .right { display: block; width: 100%; margin-bottom: 25px; } .habit .right-main .right h2 { margin-bottom: 25px; } .habit .round-built-by { display: none; } .habit .play, .habit .rest { position: initial; } .schedule h2 { margin: 0; } .schedule .schedule-text { margin: 0; } .schedule .schedule-content .left-main, .schedule .schedule-content .right-main { width: 80%; margin: 40px auto; } .schedule .schedule-content .ipad, .schedule .schedule-content .ipad-2 { display: none; } .schedule .schedule-round { display: none; } .about-you h2 { margin-bottom: 30px; } .about-you .about-image { text-align: center; display: block; width: 100%; } .about-you .about-image .img-3, .about-you .about-image .img-4, .about-you .about-image .img-7 { position: static; width: auto; display: block; margin: 0 auto; } .about-you .about-image .img-1, .about-you .about-image .img-2, .about-you .about-image .img-5, .about-you .about-image .img-6, .about-you .about-image .img-8, .about-you .about-image .img-9 { display: none; } .about-you .about-image .img-3, .about-you .about-image .img-4 { box-shadow: 0 10px 38px 2px rgba(4, 26, 55, 0.25); } .about-you .about-image .img-7 { box-shadow: 0 10px 38px 2px rgba(4, 26, 55, 0.25); } .about-you .about-image img { margin: 25px auto !important; width: 90% !important; } .amazing-features h2 { margin-bottom: 40px; } .footer h3 { font-size: 16px; } .wave-main { display: none; } } @media (max-width: 767px) { .nav-base .logo-blue { display: block; } .habit .right-main { margin-left: 0; } .navbar-brand { margin-left: 15px; } .nav-base .logo-white { display: none; } h2 { font-size: 26px; line-height: 30px; } h3 { font-size: 18px; } p { width: 100%; } .main-header h1 { font-size: 32px; } .main-header:after { display: none; } .video { /*padding:60px 0;*/ } .video .video-play { width: 50px; height: 50px; padding-left: 5px; font-size: 30px; } .video .video-play i { margin-top: 10px; } .navbar-dark .navbar-toggler { color: #e5317e; outline: none; margin-right: 25px; } .nav-base.dark { background-color: #fff; } .nav-base.dark #navigation ul { text-align: center; background-color: #fff; } .nav-base.dark #navigation ul li { padding: 10px 0; } .nav-base.dark #navigation ul li.active a { color: #4680ff; } .nav-base.dark #navigation ul li a { color: #222; } .nav-base.dark .btn-login { margin: 0 auto; } .schedule .schedule-content { margin: 30px 0 0; } .schedule .schedule-content .gadget-1, .schedule .schedule-content .gadget-2 { display: none; } .schedule .schedule-content .left-main, .schedule .schedule-content .right-main { margin-top: 20px; margin-bottom: 30px; } .schedule .schedule-content .left-main .left h3, .schedule .schedule-content .right-main .left h3 { font-size: 20px; } .owl-carousel .owl-item p:first-child { width: 100%; font-size: 12px; line-height: 22px; } .visit h2 { font-size: 34px; } .visit h2:after { bottom: 54px; } .visit ul li { font-size: 15px; } .about-you { padding-top: 60px; } .about-you .about-image .img-1 { margin-bottom: 20px; } .amazing-features .custom-feature i { font-size: 40px; margin: 20px 0 40px; } .habit .grow, .habit .play, .habit .rest, .habit .work { margin-bottom: 30px; } } @media (max-width: 575px) { .navbar-toggler { margin-right: 15px; } .navbar-brand { padding: 0; } .footer { text-align: center; } } @media (max-width: 575px) { h1 { font-size: 18px; line-height: 1.1; margin-bottom: 10px; } h2 { line-height: 28px; margin-bottom: 10px; } h3 { font-size: 18px; } h6, p { font-size: 12px; line-height: 18px; } .main-header .content-text .circle-1, .main-header .content-text .circle-2, .main-header .content-text .circle-3, .main-header .content-text .circle-4 { display: none; } .habit { margin-top: 0; } .footer h3 { margin-bottom: 10px; } .footer ul { margin: 5px 0 30px; } .footer ul li h5 { margin-bottom: 15px; } } @media (max-width: 480px) { .powerful-template { padding-bottom: 0; } .team .owl-carousel .owl-item p:first-child { font-size: 14px; line-height: 25px; } .visit h2 { font-size: 24px; } .visit h2:after { bottom: 120px; } .visit ul li { font-size: 15px; display: block; border: none; line-height: 30px; } .main-header h1 { margin-bottom: 15px; } .main-header h1 img { display: none; } .main-header .img-section { margin-top: 25px; } .main-header h3 { line-height: 28px; } .main-header .main-header-sub { padding-top: 220px; } .main-header .content-text h3 { margin-bottom: 15px; } .about-you { padding-bottom: 50px; } } .corp_training_frm { background: rgba(234, 231, 231, 0.3) none repeat scroll 0 0; padding: 15px; border-radius: 10px; } .corp_training_frm .contact_us_sbm_btn { margin-top: 20px; margin-bottom: 20px; } .corp_training_frm h2 { font-size: 18px; color: white; font-family: Poppins; } #contactus { background: black; padding: 20px; } .bottom_down_contact { text-align: justify; color: white; font-size: 16px; margin-top: 20%; } @media screen and (max-width: 480px) { OurServices #Leading { font-size: 18px; } section #enrollment { font-size: 22px; } #contactus #connectwith { font-size: 22px; } } OurServices #leading { font-size: 32px; } /* Override Font Awesome to add font-display */ @font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: swap; /* 👈 Fixes Lighthouse warning */ src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.x/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.x/webfonts/fa-solid-900.woff") format("woff"); } .cc-section { padding: 60px 20px; background:#062334; font-family: Inter; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .cc-container { max-width: 1400px; margin: 0 auto; width: 100%; } .cc-header { text-align: center; margin-bottom: 50px; } .cc-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.2); color: #fff; padding: 8px 20px; border-radius: 50px; font-size: 14px; font-weight: 600; letter-spacing: 1px; margin-bottom: 20px; backdrop-filter: blur(10px); } .cc-badge-icon { width: 20px; height: 20px; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .cc-title { font-size: 42px; font-weight: 800; color: #fff; margin: 0; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; padding: 0; margin: 0; } .cc-card { background: #fff; border-radius: 20px; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); cursor: pointer; position: relative; } .cc-card:hover { transform: translateY(-15px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } .cc-card-image { width: 100%; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .cc-card:nth-child(1) .cc-card-image { background: linear-gradient(rgba(240, 147, 251, 0.9), rgba(245, 87, 108, 0.9)), url("https://images.unsplash.com/photo-1526379095098-d400fd0bf935?w=800&q=80") center/cover; } .cc-card:nth-child(2) .cc-card-image { background: linear-gradient(rgba(79, 172, 254, 0.9), rgba(0, 242, 254, 0.9)), url("https://images.unsplash.com/photo-1667372393119-3d4c48d07fc9?w=800&q=80") center/cover; } .cc-card:nth-child(3) .cc-card-image { background: linear-gradient(rgba(67, 233, 123, 0.9), rgba(56, 249, 215, 0.9)), url("https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&q=80") center/cover; } .cc-card:nth-child(4) .cc-card-image { background: linear-gradient(rgba(250, 112, 154, 0.9), rgba(254, 225, 64, 0.9)), url("https://images.unsplash.com/photo-1526379879527-8559ecfcaec0?w=800&q=80") center/cover; } .cc-card:nth-child(5) .cc-card-image { background: linear-gradient(rgba(159, 122, 234, 0.9), rgba(188, 140, 255, 0.9)), url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80") center/cover; } .cc-icon-wrapper { width: 100px; height: 100px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; padding: 15px; } .cc-card:hover .cc-icon-wrapper { transform: scale(1.1) rotate(3deg); } .cc-icon { width: 80px; height: 80px; object-fit: contain; } .cc-card-content { padding: 20px; text-align: center; } .cc-card-title { font-size: 20px; font-weight: 700; color: #2d3748; margin: 0 0 10px 0; line-height: 1.4; } .cc-card-subtitle { font-size: 12px; color: #718096; margin: 0; line-height: 1.6; } .cc-card-badge { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.95); color: #667eea; padding: 6px 16px; border-radius: 50px; font-size: 12px; font-weight: 700; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .cc-decorative-circle { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); top: -100px; right: -100px; } .cc-decorative-circle-small { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); bottom: -50px; left: -50px; } @media (max-width: 1200px) { .cc-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; } } @media (max-width: 768px) { .cc-section { padding: 40px 15px; } .cc-title { font-size: 36px; } .cc-grid { grid-template-columns: 1fr; gap: 20px; } .cc-card-image { height: 200px; } .cc-icon-wrapper { width: 100px; height: 100px; padding: 10px; } .cc-card-content { padding: 25px; } .cc-card-title { font-size: 20px; } .cc-card-subtitle { font-size: 14px; } } @media (max-width: 480px) { .cc-title { font-size: 26px; } .cc-card-image { height: 200px; } .cc-card-content { padding: 20px; } .cc-badge { font-size: 12px; } }