*, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } body{ text-rendering: optimizeSpeed; overflow-x: hidden; font-family: Manrope; } html{ font-size: 62.5%; scroll-behavior: smooth; } .clear-fix::after{ content: ""; clear: both; display: block; } @font-face { font-family: Manrope; src: url('../fonts/Manrope-ExtraBold.woff'); font-weight: 700; font-display: block; } @font-face { font-family: Manrope; src: url('../fonts/Manrope-Bold.woff'); font-weight: 600; font-display: block; } @font-face { font-family: Manrope; src: url('../fonts/Manrope-SemiBold.woff'); font-weight: 500; font-display: block; } @font-face { font-family: Manrope; src: url('../fonts/Manrope-Medium.woff'); font-weight: 400; font-display: block; } @font-face { font-family: Manrope; src: url('../fonts/Manrope-Regular.woff'); font-weight: 300; font-display: block; } /* reuse components */ /* btn effect 1 */ .btn:link, .btn:visited{ display: inline-block; padding: 1.4rem 3.2rem; font-size: 1.4rem; font-weight: 300; border-radius: 10rem; text-transform: capitalize; cursor: pointer; transition: all .3s; position: relative; outline: none; text-decoration: none; } .btn:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); color: #fff; } .btn:active{ transform: translateY(0); color: #fff; } .btn::after{ content: ""; display: inline-block; border-radius: 10rem; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: all .3s ease-in-out; } .btn-gradient-blue{ background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); color: #fff; } .btn-gradient-blue::after{ background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); } .btn:hover::after{ transform: scaleX(1.4) scaleY(1.6); opacity: 0; } /* about btn */ .about-btn:link, .about-btn:visited{ display: inline-block; padding: 1.4rem 3.2rem; font-size: 1.4rem; font-weight: 300; border-radius: 10rem; text-transform: capitalize; cursor: pointer; transition: all .3s; position: relative; outline: none; text-decoration: none; color: #000; } .about-btn:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); color: rgba(0, 121, 255, 1); } .about-btn:active{ transform: translateY(0); color: rgba(0, 121, 255, 1); } .about-btn::after{ content: ""; display: inline-block; border-radius: 10rem; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: all .3s ease-in-out; } .about-btn-white{ background: #fff; color: #fff; } .about-btn-white::after{ background: #fff; } .about-btn:hover::after{ transform: scaleX(1.4) scaleY(1.6); opacity: 0; } /* btn effect 1 */ /* btn effect 2 */ .button:link, .button:visited{ display: inline-block; padding: 1.4rem 3.2rem; font-size: 1.4rem; font-weight: 300; border-radius: 10rem; text-transform: capitalize; cursor: pointer; transition: all .3s; outline: none; border: 1px solid #0079FF; text-decoration: none; } .button:hover{ transform: translateY(-.5rem); box-shadow: 0 1rem 2rem rgb(0, 0, 0, .2); border: 1px solid transparent; background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); color: #fff; } .button:active{ transform: translateY(0); box-shadow: 0 1rem 2rem rgb(0, 0, 0, .2); } /* novit button */ .button-novit:link, .button-novit:visited{ display: inline-block; padding: 1.4rem 3.2rem; font-size: 1.4rem; font-weight: 300; border-radius: 10rem; text-transform: capitalize; cursor: pointer; transition: all .3s; outline: none; border: 1px solid #ffffff; text-decoration: none; color: #fff; } .button-novit:hover{ transform: translateY(-.5rem); box-shadow: 0 1rem 2rem rgb(0, 0, 0, .2); border: 1px solid #fff; background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); color: #fff; } .button-novit:active{ transform: translateY(0); box-shadow: 0 1rem 2rem rgb(0, 0, 0, .2); } /* btn effect 2 */ /* reuse components */ /* navigation start */ .navbar-toggler{ background: linear-gradient( to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); outline: none; padding: 4px; } .navbar-toggler:focus{ outline: none; outline-offset: 1rem; } .bar-1{ width: 16px; height: 3px; background: #fff; } .bar-2{ width: 25px; height: 3px; background: #fff; margin: 6px 0; } .bar-3{ width: 20px; height: 3px; background: #fff; } .navbar .nav-item:not(:last-child){ margin-right: 4rem; } .navbar .nav-link{ text-decoration: none; text-transform: capitalize; font-size: 1.4rem; color: rgba(0, 17, 35, 1); font-weight: 300; transition: all .5s; } .navbar-toggler{ transition: all .5s ease-in-out; } .navbar-toggler:hover{ transform: rotateY(180deg); } .active .nav-link{ color: #333; } .active .nav-link::after{ content: ""; width: 2.5rem; height: .4rem; display: block; background: linear-gradient(to right bottom, rgba(0, 121, 255, 1), rgba(47, 173, 250, 1)); margin: auto; border-radius: 100px; position: relative; top: 4px; left: 0; backface-visibility: hidden; } .active .about-nav::after{ content: ""; width: 2.5rem; height: .4rem; display: block; background: #fff; margin: auto; border-radius: 100px; position: relative; top: 4px; left: 0; backface-visibility: hidden; } .active .reliability-nav::after{ content: ""; width: 2.5rem; height: .4rem; display: block; background: #fff; margin: auto; border-radius: 100px; position: relative; top: 4px; left: 0; backface-visibility: hidden; } .active .prices-nav::after{ content: ""; width: 2.5rem; height: .4rem; display: block; background: #fff; margin: auto; border-radius: 100px; position: relative; top: 4px; left: 0; backface-visibility: hidden; } /* navigation end */ /* header section start */ #header-section{ padding: 6rem 0; } .hero-right-image { width: 124%; height: auto; } .hero-texts{ margin-top: 9rem; } .hero-heading-primary{ font-size: 4.6rem; color: #0079FF; font-weight: 600; text-transform: capitalize; width: 65%; } .hero-heading-secondary{ font-size: 2rem; color: #001123; font-weight: 300; text-transform: capitalize; width: 74%; margin-top: 1.6rem; margin-bottom: 0; } .hero-paragraph{ font-size: 1.4rem; font-weight: 300; color: #778697; text-transform: capitalize; margin-top: 2rem; margin-bottom: 0; width: 74%; } .scroll-down{ font-size: 1.4rem; font-weight: 300; color: #0079FF; margin-top: .5rem; } .hero-btn{ margin-top: 1.4rem; } .hero-down-button{ transition: all .3s ease-in-out; position: relative; top: -8rem; text-decoration: none; } .down-link-text{ text-decoration: none; } .hero-down-button:hover{ transform: translateY(-.5rem); } /* header section end */ /* catalyst section start */ #catalyst-section{ padding: 10rem 0; margin-top: -9rem; } .catalyst-title{ font-size: 1.4rem; font-weight: 300; color: #00CF84; display: inline-block; padding: .8rem 1.6rem; background: rgba(222, 255, 243, 1); border-radius: 100px; transition: all .3s ease-in-out; cursor: pointer; } .catalyst-title:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); } .catalyst-title:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); } .catalyst-left-heading{ font-size: 3.6rem; font-weight: 600; color: #001123; margin-top: 2.2rem; } .right-heading{ font-size: 2rem; font-weight: 600; color: #0079FF; text-transform: capitalize; } .right-paragraph{ font-size: 1.8rem; font-weight: 300; color: #778697; margin-top: 1.4rem; } /* second part */ .margin-second-part{ margin-top: 10rem; } .catalyst-items{ transform: translateX(4rem); } .catalyst-icon-1{ margin-right: 2rem; background: rgba(242, 246, 249, 1); padding: 1.3rem; border-radius: 2rem; border: 1px solid #D8EAFF; margin-bottom: 6rem; } .catalyst-icon-2{ margin-right: 2rem; background: rgba(242, 246, 249, 1); padding: 1.3rem; border-radius: 2rem; border: 1px solid #D8EAFF; margin-bottom: 6rem; } .catalyst-icon-3{ margin-right: 2rem; background: rgba(242, 246, 249, 1); padding: 1.3rem; border-radius: 2rem; border: 1px solid #D8EAFF; } .catalyst-icon-heading-1{ font-size: 2rem; font-weight: 600; color: #001123; } .catalyst-icon-heading-2{ font-size: 2rem; font-weight: 600; color: #001123; } .catalyst-icon-heading-3{ font-size: 2rem; font-weight: 600; color: #001123; } .catalyst-paragraph-1{ font-size: 1.8rem; font-weight: 300; color: #001123; margin-top: 1rem; margin-bottom: 0; } .catalyst-paragraph-2{ font-size: 1.8rem; font-weight: 300; color: #001123; margin-top: 1rem; margin-bottom: 0; } .catalyst-paragraph-3{ font-size: 1.8rem; font-weight: 300; color: #001123; margin-top: 1rem; margin-bottom: 0; } .catalyst-button{ margin-top: 2.8rem; } /* second part */ /* catalyst section end */ /* pragmatic section start */ #pragmatic-section{ background: rgba(251, 252, 254, 1); padding: 10rem 0; margin-top: -5rem; } .cards{ width: 98%; margin: auto; margin-top: 9rem; } .pragmatic-title{ font-size: 1.4rem; font-weight: 300; color: #31B0FA; display: inline-block; padding: .8rem 1.6rem; background: rgba(229, 245, 255, 1); border-radius: 100px; transition: all .3s ease-in-out; cursor: pointer; } .pragmatic-title:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); } .pragmatic-title:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); } .pragmatic-section-title{ font-size: 3.6rem; font-weight: 600; color: #001123; text-transform: capitalize; width: 65%; margin: auto; margin-top: 2.2rem; } .pragmatic-section-subtitle{ font-size: 2rem; font-weight: 300; color: #778697; width: 70%; margin: auto; margin-top: 2.6rem; } .pragmatic-card-1{ background: #fff; height: 35rem; width: auto; border-radius: 15px; position: relative; padding: 3rem; border: none; transition: all .3s ease-in-out; } .pragmatic-card-2{ background: #fff; height: 35rem; width: auto; border-radius: 15px; position: relative; padding: 3rem; border: none; transition: all .3s ease-in-out; } .pragmatic-card-3{ background: #fff; height: 35rem; width: auto; border-radius: 15px; position: relative; padding: 3rem; border: none; transition: all .3s ease-in-out; } .pragmatic-card-1:hover{ transform: translateY(-3rem); box-shadow: 0 2rem 4rem rgba(207, 207, 207, .9); } .pragmatic-card-2:hover{ transform: translateY(-3rem); box-shadow: 0 2rem 4rem rgba(207, 207, 207, .9); } .pragmatic-card-3:hover{ transform: translateY(-3rem); box-shadow: 0 2rem 4rem rgba(207, 207, 207, .9); } .pragmatic-card-heading-1{ font-size: 2rem; font-weight: 600; color: #001123; margin-top: 1rem; } .pragmatic-card-heading-2{ font-size: 2rem; font-weight: 600; color: #001123; line-height: 3rem; margin-top: 1rem; width: 95%; } .pragmatic-card-heading-3{ font-size: 2rem; font-weight: 600; color: #001123; margin-top: 1rem; } .pragmatic-card-paragraph-1{ font-size: 1.8rem; font-weight: 300; color: #778697; } .pragmatic-card-paragraph-2{ font-size: 1.8rem; font-weight: 300; color: #778697; } .pragmatic-card-paragraph-3{ font-size: 1.8rem; font-weight: 300; color: #778697; } .pragmatic-button{ margin-top: 5.6rem; } /* pragmatic section end */ /* performance section start */ #performance-section{ padding: 10rem 0; margin-top: -5rem; } .performance-title{ font-size: 1.4rem; font-weight: 300; color: #3D00CF; display: inline-block; padding: .8rem 1.6rem; background: rgba(236, 222, 255, 1); border-radius: 100px; transition: all .3s ease-in-out; cursor: pointer; } .performance-title:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); } .performance-title:active{ transform: translateY(0); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); } .performance-left-heading{ font-size: 3.6rem; font-weight: 600; color: #001123; margin-top: 2.2rem; } .performance-right-paragraph{ font-size: 2rem; font-weight: 300; color: #001123; } .performance-button{ margin-top: 2.2rem; } .left-content{ margin-top: 9.9rem; } /* left part calculation */ .left-calculation-1{ border-bottom: 2px solid transparent; width: 85%; transition: all .3s ease-in-out; cursor: pointer; border-bottom: 1px solid #DCDCDC; } .left-calculation-1:hover{ border-bottom: 1px solid rgba(0, 207, 132, 1); } .left-calc-heading-1{ font-size: 4rem; font-weight: 300; color: #00CF84; } .left-calc-text-1{ font-size: 1.8rem; font-weight: 300; color: #001123; margin-top: .4rem; } .left-calculation-2{ margin-top: 5rem; border-bottom: 2px solid transparent; width: 85%; transition: all .3s ease-in-out; cursor: pointer; border-bottom: 1px solid #DCDCDC; } .left-calculation-2:hover{ border-bottom: 1px solid rgba(0, 207, 132, 1); } .left-calc-heading-2{ font-size: 4rem; font-weight: 300; color: #00CF84; } .left-calc-text-2{ font-size: 1.8rem; font-weight: 300; color: #001123; margin-top: .4rem; width: 90%; } /* right calculation part */ .right-content{ margin-top: 10rem; } .right-percent-1{ border-bottom: 2px solid transparent; transition: all .3s ease-in-out; border-bottom: 1px solid #DCDCDC; transition: all .3s ease-in-out; cursor: pointer; } .right-percent-1:hover{ border-bottom: 1px solid rgba(0, 207, 132, 1); } .right-percent-heading-1{ font-size: 4rem; font-weight: 300; color: #00CF84; } .right-percent-text-1{ font-size: 1.8rem; font-weight: 300; color: #001123; margin-top: .4rem; } .right-percent-2{ border-bottom: 2px solid transparent; transition: all .3s ease-in-out; border-bottom: 1px solid #DCDCDC; cursor: pointer; } .right-percent-2:hover{ border-bottom: 1px solid rgba(0, 207, 132, 1); } .right-percent-heading-2{ font-size: 4rem; font-weight: 300; color: #00CF84; } .right-percent-text-2{ font-size: 1.8rem; font-weight: 300; color: #001123; margin-top: .4rem; } .right-percent-2{ margin-top: 5rem; } /* performance section end */ /* freedom section start */ #freedom-section{ padding: 10rem 0; } .freedom-background-image{ background-image: url(../image/freedom-background.png); height: 73rem; width: auto; background-size: cover; background-repeat: no-repeat; background-position: center; } .freedom-section-content{ background: rgba(251, 252, 254, 1); border-radius: 2rem; height: 83rem; width: 100%; padding: 5rem; transform: translateY(-25rem); } .freedom-title{ font-size: 1.4rem; font-weight: 300; color: #00CF84; display: inline-block; padding: .8rem 1.6rem; background: rgba(222, 255, 243, 1); border-radius: 100px; transition: all .3s ease-in-out; cursor: pointer; } .freedom-title:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); } .freedom-title:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); } .freedom-section-title{ font-size: 3.6rem; font-weight: 600; color: #001123; width: 70%; margin: auto; margin-top: 3rem; } /* all cards */ .freedom-cards{ margin-top: 4.7rem; } /* left content-1 */ .left-card-content-1{ background: rgb(255, 255, 255); border-radius: 1.5rem; padding: 3rem; transition: all .3s ease-in-out; backface-visibility: hidden; } .left-card-content-1:hover{ box-shadow: 0 2rem 4rem rgba(158, 158, 158, .18); transform: translateY(-.5rem); } .left-card-heading-1{ font-size: 2rem; font-weight: 600; color: #0079FF; } .left-card-text-1{ font-size: 1.8rem; font-weight: 300; color: #778697; } /* left content-2 */ .left-card-content-2{ background: rgb(255, 255, 255); border-radius: 1.5rem; margin-top: 4rem; padding: 3rem; transition: all .3s ease-in-out; backface-visibility: hidden; } .left-card-content-2:hover{ box-shadow: 0 2rem 4rem rgba(158, 158, 158, .18); transform: translateY(-.5rem); } .left-card-heading-2{ font-size: 2rem; font-weight: 600; color: #0079FF; } .left-card-text-2{ font-size: 1.8rem; font-weight: 300; color: #778697; } /* right content-1 */ .right-card-content-1{ background: rgb(255, 255, 255); border-radius: 1.5rem; padding: 3rem; transition: all .3s ease-in-out; backface-visibility: hidden; } .right-card-content-1:hover{ box-shadow: 0 2rem 4rem rgba(158, 158, 158, .18); transform: translateY(-.5rem); } .right-card-heading-1{ font-size: 2rem; font-weight: 600; color: #0079FF; } .right-card-text-1{ font-size: 1.8rem; font-weight: 300; color: #778697; } /* right content-2 */ .right-card-content-2{ background: rgb(255, 255, 255); border-radius: 1.5rem; padding: 3rem; transition: all .3s ease-in-out; margin-top: 4rem; backface-visibility: hidden; } .right-card-content-2:hover{ box-shadow: 0 2rem 4rem rgba(158, 158, 158, .18); transform: translateY(-.5rem); } .right-card-heading-2{ font-size: 2rem; font-weight: 600; color: #0079FF; } .right-card-text-2{ font-size: 1.8rem; font-weight: 300; color: #778697; } /* title bottom */ .title-bottom-text{ font-size: 2.6rem; color: #001123; text-decoration: underline; width: 70%; margin: auto; margin-top: 4.7rem; } .title-bottom-button{ margin-top: 3rem; } /* freedom section end */ /* novit section start */ #novit-section{ padding-top: 8rem; } .novit-background{ background-image:url(../image/novit-background.png); background-size: 100%; height: 33rem; width: 100%; padding: 4rem; background-repeat: no-repeat; } .novit-title{ font-size: 2rem; font-weight: 600; color: #00CF84; } .novit-text{ font-size: 2.6rem; font-weight: 600; color: #fff; width: 40%; line-height: 4rem; margin-bottom: 0; margin-top: 1rem; } /* novit section end */ /* email part start */ #email-section{ background: rgba(0, 121, 255, 1); padding: 7rem 0; margin-top: -13rem; } #about-email-section{ background: rgba(0, 121, 255, 1); padding: 12rem 0; margin-top: -13rem; } #relibility-email-section{ background: rgba(0, 121, 255, 1); padding: 12rem 0; margin-top: -13rem; } #prices-email-section{ background: rgba(0, 121, 255, 1); padding: 12rem 0; margin-top: -13rem; } .form-group{ position: relative; } .email-contents{ position: absolute; top: 50%; left: 50%; width: 90%; transform: translate(-21%, -50%); } .email-left-heading{ font-size: 3.6rem; font-weight: bold; color: #fff; margin-bottom: 0; } input[type="email"]{ font-size: 1.8rem; font-weight: 300; background: transparent; border: none; border-bottom: 1px solid rgb(255, 255, 255); border-radius: 0; transition: all .3s ease-in-out; color: #fff; display: inline-block; width: 70%; margin-top: 1rem; } .form-group input::placeholder{ color: #fff; } input[type="email"]:focus{ outline: none; background: transparent; border-bottom: 1px solid rgb(255, 255, 255); } .email-icon{ transform: translateX(-2.4rem) translateY(-.5rem); } .input-label{ color: #fff; display: block; font-size: 1.8rem; font-weight: 600; } /* email part end */ /* footer section strat */ #footer-section{ background: rgba(0, 17, 35, 1); color: #fff; padding: 10rem 0; } /* first col */ .footer-icons{ margin-top: 3rem; } .icon-list{ list-style-type: none; padding-left: 0; } .list-item{ display: inline-block; border: 1px solid #fff; border-radius: 50; height: 3.5rem; width: 3.5rem; text-align: center; line-height: 3.5rem; border-radius: 50%; transition: all .3s ease-in-out; } .list-item:hover{ transform: rotate(360deg); } .list-item:not(:last-child){ margin-right: 1.6rem; } .list-link{ text-decoration: none; font-size: 2rem; color: #fff; } .list-link:hover{ color: #fff; } .whats-app-text{ text-decoration: none; } .whats-app{ margin-top: 19rem; } .fa-whatsapp{ font-size: 3.1rem; color: #fff; margin-right: 2.3rem; } .icon-right-text{ text-decoration: none; color: #fff; font-size: 1.8rem; font-weight: 300; display: inline-block; transform: translateY(-.5rem); } /* second col */ .footer-heading-title-1{ font-size: 1.8rem; font-weight: 600; color: #fff; } .footer-text-title-1{ margin-top: 3rem; } .text-list-1{ list-style-type: none; padding-left: 0; } .text-item-1{ font-size: 1.4rem; font-weight: 300; } .text-item-1:not(:last-child){ margin-bottom: 2rem; } /* third col */ .footer-heading-title-2{ font-size: 1.8rem; font-weight: 600; color: #fff; } .footer-text-title-2{ margin-top: 3rem; } .text-list-2{ list-style-type: none; padding-left: 0; } .text-item-2{ font-size: 1.4rem; font-weight: 300; } .text-item-2:not(:last-child){ margin-bottom: 2rem; } .text-item-2-modified{ font-size: 1.4rem; font-weight: 300; width: 55%; } /* footer bottom */ .border-top{ border-top: 1px solid #fff; margin-top: 1rem; } .copyright-texts{ margin-top: 1.5rem; } .copyright{ font-size: 1.4rem; font-weight: 300; } .footer-bottom-text{ margin-top: 1.5rem; } .terms{ font-size: 1.4rem; font-weight: 300; float: left; margin-right: 3rem; padding-bottom: 0; } .border{ width: 2px; display: inline-block; height: 20px; background: #fff; } .privacy{ font-size: 1.4rem; font-weight: 300; transform: translateX(15rem) translateY(-2.2rem); overflow: hidden; } /* footer section end */ /*********************** about page ***********************/ /* about header start */ #about-banner{ background-image: url(../image/about-banner.png); background-size: cover; background-repeat: no-repeat; height: 100vh; width: auto; background-position: center; } .about-header-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .about-header-title{ font-size: 4.6rem; font-weight: bold; color: #fff; width: 95%; text-align: center; margin: auto; } .about-breadcrumb{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, 17rem); } .about-breadcrumb-list{ display: inline-block; } .about-breadcrumb-link{ text-decoration: none; font-size: 2rem; font-weight: 600; color: #fff; } .about-breadcrumb-link:hover{ color: #fff; } .fa-angle-right{ font-size: 2rem; margin: 0 2rem; } /* about header end */ /* about us section start */ #about-section{ padding-bottom: 25rem; padding-top: 10rem; } .about-title-text{ font-size: 1.4rem; font-weight: 300; color: #0079FF; display: inline-block; padding: .8rem 1.6rem; background: rgba(229, 245, 255, 1); border-radius: 100px; transition: all .3s ease-in-out; cursor: pointer; } .about-title-text:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); } .about-title-text:active{ transform: translateY(0); } .about-right-part-1{ margin-left: -.6rem; } /* about 1st part */ .about-1st-part{ margin-top: 3rem; } .about-left-heading{ font-size: 3.6rem; font-weight: 600; color: #001123; width: 80%; } .right-first-text{ font-size: 1.8rem; font-weight: 300; color: #778697; } .right-text-color{ color: #001123; } .right-second-text{ font-size: 1.8rem; font-weight: 300; color: #778697; margin-top: 2.5rem; } /* about 1st part */ /* about 2nd part */ .about-left-title-2{ font-size: 3.6rem; font-weight: 600; color: #001123; } .about-2nd-part{ margin-top: 7.2rem; } /* person 1 */ .person-image-1{ width: 100%; height: auto; } .person-1:hover .person-bio-1{ transform: scale(1); background: rgba(255, 255, 255, 1); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); } .person-bio-1{ padding: 1rem; transform: scale(0); transition: all .3s ease-in-out; text-align: center; } .person-name-1{ font-size: 2.5rem; font-weight: 600; color: #001123; } .person-title-1{ font-size: 1.8rem; font-weight: 300; color: #00CF84; } /* person 1 */ /* person 2 */ .person-image-2{ width: 100%; height: auto; } .person-2:hover .person-bio-2{ transform: scale(1); background: rgba(255, 255, 255, 1); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); } .person-bio-2{ padding: 1rem; transform: scale(0); transition: all .3s ease-in-out; text-align: center; } .person-name-2{ font-size: 2.5rem; font-weight: 600; color: #001123; } .person-title-2{ font-size: 1.8rem; font-weight: 300; color: #00CF84; } /* person 2 */ /* person 3 */ .person-image-3{ width: 100%; height: auto; } .person-3:hover .person-bio-3{ transform: scale(1); background: rgba(255, 255, 255, 1); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); } .person-bio-3{ padding: 1rem; transform: scale(0); transition: all .3s ease-in-out; text-align: center; } .person-name-3{ font-size: 2.5rem; font-weight: 600; color: #001123; } .person-title-3{ font-size: 1.8rem; font-weight: 300; color: #00CF84; } /* person 3 */ /* about 2nd part */ /* about us section end */ /********************************* prices section start ***********************/ /* prices section start */ #prices-section{ padding-top: 10rem; padding-bottom: 25rem; } #priceing-banner{ background-image: url(../image/prices-banner.png); background-size: cover; background-repeat: no-repeat; height: 100vh; width: auto; background-position: center; } .prices-header-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .prices-header-title{ font-size: 4.6rem; font-weight: bold; color: #fff; width: 100%; text-align: center; margin: auto; } .prices-breadcrumb{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, 14rem); } .prices-breadcrumb-list{ display: inline-block; } .prices-breadcrumb-link{ text-decoration: none; font-size: 2rem; font-weight: 600; color: #fff; } .prices-breadcrumb-link:hover{ color: #fff; } /* section title */ .plans-title{ font-size: 1.4rem; font-weight: 300; color: #00CF84; display: inline-block; padding: .8rem 1.6rem; background: rgba(222, 255, 243, 1); border-radius: 100px; transition: all .3s ease-in-out; cursor: pointer; margin: auto; } .plans-title:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); } .plans-title:active{ transform: translateY(0); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); } .priceing-title{ font-size: 3.6rem; font-weight: 600; color: #001123; margin-top: 3rem; } .priceing-subtitle{ font-size: 2rem; font-weight: 300; color: #778697; margin-top: 2.6rem; } /* section title */ /* include card itmes */ /* include card 1 */ .card-1{ border-radius: 2rem; border: 1px solid rgba(225, 231, 236, 1); transition: all .3s ease-in-out; } /* card hover-1 */ .card-1:hover{ transform: translateY(-2rem); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .15); background: rgba(0, 207, 132, 1); } .card-1:hover .fa-check-circle-o{ color: #fff; } .card-1:hover .include-text-1{ color: #fff; } .card-1:hover .include-text-width-1{ color: #fff; } .card-1:hover .includes-1{ color: #fff; } .card-1:hover .sliver-title-1{ color: #fff; } .card-1:hover .price-1{ color: #fff; } .card-1:hover .month-1{ color: #fff; } .card-1:hover .include-btn-1{ background: #fff; color: #00CF84; } /* card hover-1 */ .card-content{ margin-top: 8.2rem; } .card-body{ padding: 2rem; } .include-items-1{ margin-top: 3rem; } .sliver-title-1{ font-size: 1.4rem; font-weight: 600; color: #00CF84; } .price-1{ font-size: 2.6rem; font-weight: 600; color: #001123; margin-top: 1rem; } .month-1{ font-size: 1.4rem; font-weight: 300; color: #778697; } .includes-1{ font-size: 1.2rem; font-weight: 300; color: #001123; } .check-mark-icon-1{ margin-right: .6rem; font-size: 1.5rem; color: #001123; } .fa-check-circle-o{ color: #00CF84; } .include-text-1{ font-size: 1.4rem; font-weight: 300; color: #001123; } .include-list-1{ margin-top: 1.3rem; } .include-text-width-1{ width: 75%; font-size: 1.4rem; font-weight: 300; color: #001123; display: inline-block; } .include-button-1{ margin-top: 5.2rem; } /* include btn 1 */ .include-btn-1:link, .include-btn-1:visited{ text-decoration: none; display: block; padding: 1rem 5rem; border-radius: 100px; color: #fff; font-size: 1.4rem; transition: all .3s ease-in-out; } .include-btn-color-1{ background: rgba(0, 207, 132, 1); } .include-btn-1:hover{ transform: translateY(-.5rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); background: #fff; border: 1px solid rgba(0, 207, 132, 1); } .include-btn-1:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); } /* include btn 1 */ /* include card 1 */ /* include card 2 */ .card-2{ border-radius: 2rem; background: rgb(255, 255, 255); color: rgb(0, 0, 0); transition: all .3s ease-in-out; border: 1px solid rgba(225, 231, 236, 1); } .card-2:hover{ transform: translateY(-2rem); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .10); } /* card hover-2 */ .card-2:hover{ transform: translateY(-2rem); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .15); background: rgba(0, 121, 255, 1); } .card-2:hover .fa-check-circle-o{ color: #fff; } .card-2:hover .include-text-2{ color: #fff; } .card-2:hover .include-text-width-2{ color: #fff; } .card-2:hover .includes-2{ color: #fff; } .card-2:hover .sliver-title-2{ color: #fff; } .card-2:hover .price-2{ color: #fff; } .card-2:hover .month-2{ color: #fff; } .card-2:hover .include-btn-2{ background: #fff; color: rgba(0, 121, 255, 1); } /* card hover-2 */ .card-content{ margin-top: 8.2rem; } .card-body{ padding: 2rem; } .include-items-2{ margin-top: 3rem; } .sliver-title-2{ font-size: 1.4rem; font-weight: 600; color: #0079FF; } .price-2{ font-size: 2.6rem; font-weight: 600; color: rgb(0, 0, 0); margin-top: 1rem; } .month-2{ font-size: 1.4rem; font-weight: 300; color: #778697; } .includes-2{ font-size: 1.2rem; font-weight: 300; color: rgb(0, 0, 0); } .check-mark-img-2{ width: 1.4rem; height: auto; margin-right: .6rem; } .include-text-2{ font-size: 1.4rem; font-weight: 300; color: rgb(0, 0, 0); } .include-list-2{ margin-top: 1.3rem; } .include-text-width-2{ width: 75%; font-size: 1.4rem; font-weight: 300; color: rgb(0, 0, 0); display: inline-block; /*! margin-top: -.2rem; */ } .include-button-2{ margin-top: 5.2rem; } /* include btn 2 */ .include-btn-2:link, .include-btn-2:visited{ text-decoration: none; display: block; padding: 1rem 5rem; border-radius: 100px; color: #ffffff; font-size: 1.4rem; transition: all .3s ease-in-out; } .include-btn-color-2{ background: rgba(0, 121, 255, 1); } .include-btn-2:hover{ transform: translateY(-.5rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15); } .include-btn-2:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15); } /* include btn 2 */ /* include card 2 */ /* include card 3 */ .card-3{ border-radius: 2rem; background: #fff; border: 1px solid rgba(225, 231, 236, 1); transition: all .3s ease-in-out; } .card-3:hover{ transform: translateY(-2rem); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .15); } /* card hover-3 */ .card-3:hover{ transform: translateY(-2rem); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .15); background: rgba(134, 117, 255, 1); } .card-3:hover .fa-check-circle-o{ color: #fff; } .card-3:hover .include-text-3{ color: #fff; } .card-3:hover .include-text-width-3{ color: #fff; } .card-3:hover .includes-3{ color: #fff; } .card-3:hover .sliver-title-3{ color: #fff; } .card-3:hover .price-3{ color: #fff; } .card-3:hover .month-3{ color: #fff; } .card-3:hover .include-btn-3{ background: #fff; color: rgba(134, 117, 255, 1); } /* card hover-3 */ .card-content{ margin-top: 8.2rem; } .card-body{ padding: 2rem; } .include-items-3{ margin-top: 3rem; } .sliver-title-3{ font-size: 1.4rem; font-weight: 600; color: #8675FF; } .price-3{ font-size: 2.6rem; font-weight: 600; color: #000; margin-top: 1rem; } .month-3{ font-size: 1.4rem; font-weight: 300; color: #778697; } .includes-3{ font-size: 1.2rem; font-weight: 300; color: #001123; } .check-mark-img-3{ width: 1.4rem; height: auto; margin-right: .6rem; } .include-text-3{ font-size: 1.4rem; font-weight: 300; color: #001123; } .include-list-3{ margin-top: 1.3rem; } .include-text-width-3{ width: 75%; font-size: 1.4rem; font-weight: 300; color: #001123; display: inline-block; /*! margin-top: -.2rem; */ } .include-button-3{ margin-top: 5.2rem; } /* include btn 3 */ .include-btn-3:link, .include-btn-3:visited{ text-decoration: none; display: block; padding: 1rem 5rem; border-radius: 100px; color: #ffffff; font-size: 1.4rem; transition: all .3s ease-in-out; } .include-btn-color-3{ background: rgba(134, 117, 255, 1); } .include-btn-3:hover{ transform: translateY(-.5rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15); } .include-btn-3:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); } /* include btn 3 */ /* include card 3 */ /* include card 4 */ .card-4{ border-radius: 2rem; background-image: url(../image/card-4-background.png); background-size: cover; background-repeat: no-repeat; transition: all .3s ease-in-out; } .card-4:hover{ transform: translateY(-2rem); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .10); } .card-content{ margin-top: 8.2rem; } .card-body{ padding: 2rem; } .include-items-4{ margin-top: 2rem; } .sliver-title-4{ font-size: 1.4rem; font-weight: 600; color: #8675FF; } .price-4{ font-size: 2.6rem; font-weight: 600; color: #000; margin-top: 1rem; } .month-4{ font-size: 1.4rem; font-weight: 300; color: #778697; } .includes-4{ font-size: 1.2rem; font-weight: 600; color: #fff; } .check-mark-img-4{ width: 1.4rem; height: auto; margin-right: .6rem; } .include-text-4{ font-size: 1.4rem; font-weight: 300; color: #fff; } .include-list-4{ margin-top: 1.3rem; } .include-text-width-4{ width: 75%; font-size: 1.4rem; font-weight: 300; color: #fff; display: inline-block; /*! margin-top: -.2rem; */ } .include-button-4{ margin-top: 5.2rem; } /* include btn 4 */ .include-btn-4:link, .include-btn-4:visited{ text-decoration: none; display: block; padding: 1rem 5rem; border-radius: 100px; color: #ffffff; font-size: 1.4rem; background: rgba(0, 121, 255, 1); transition: all .3s ease-in-out; } .include-btn-color-4{ background: rgba(134, 117, 255, 1); } .include-btn-4:hover{ transform: translateY(-.5rem); box-shadow: 0 1rem 2rem rgba(255, 255, 255, 0.15); } .include-btn-4:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(255, 255, 255, 0.15); } /* include btn 4 */ /* include card 4 */ /* include itmes */ /* prices section end */ /* reliability section start */ #reliability-banner{ background-image: url(../image/reliability-banner.png); background-size: cover; background-repeat: no-repeat; height: 100vh; width: auto; background-position: center; } #reliability-section{ padding: 10rem 0; } .relibility-header-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } .relibility-header-title{ font-size: 4.6rem; font-weight: bold; color: #fff; width: 100%; text-align: center; margin: auto; } .relibility-breadcrumb{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, 14rem); } .relibility-breadcrumb-list{ display: inline-block; } .relibility-breadcrumb-link{ text-decoration: none; font-size: 2rem; font-weight: 600; color: #fff; } .relibility-breadcrumb-link:hover{ color: #fff; } .relibility-breadcrumb-link:hover{ color: #fff; } .relibility-title-text{ text-align: center; } .relibility-title{ font-size: 1.4rem; font-weight: 300; color: #FC8F66; display: inline-block; padding: .8rem 1.6rem; background: #FFECE5; border-radius: 100px; transition: all .3s ease-in-out; cursor: pointer; } .relibility-title:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); } .relibility-title:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); } .relibility-heading{ font-size: 3.6rem; font-weight: 600; color: #001123; width: 70%; margin: auto; margin-top: 3rem; text-align: center; z-index: 1; line-height: 55px; } .text-background{ background-image: url(../image/text-background.png); background-size: 100%; background-position: center; } .relibility-title:hover{ transform: translateY(-.3rem); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2); } .relibility-title:active{ transform: translateY(0); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2); } .text-background{ transform: translateX(2px) translateY(-62px); z-index: -1; width: 36%; } .relibility-heading-main{ position: relative; } .sliver-title-1 { font-size: 2rem; font-weight: 600; color: #00CF84; } .price-1 { font-size: 3.6rem; font-weight: 600; color: #001123; margin-top: 2rem; } .month-1 { font-size: 1.8rem; font-weight: 300; color: #778697; } .includes-1 { font-size: 2.2rem; font-weight: 300; color: #001123; } .include-text-1 { font-size: 2rem; font-weight: 300; color: #001123; } .include-text-width-1 { width: 75%; font-size: 2rem; font-weight: 300; color: #001123; display: inline-block; margin-top: 2px; } .check-mark-icon-1 { margin-right: .6rem; font-size: 2.5rem; color: #001123; } .include-btn-1:link, .include-btn-1:visited { text-decoration: none; display: block; padding: 1rem 5rem; border-radius: 100px; color: #fff; font-size: 2rem; transition: all .3s ease-in-out; } .sliver-title-2 { font-size: 2rem; font-weight: 600; color: #00CF84; } .price-2 { font-size: 3.6rem; font-weight: 600; color: #001123; margin-top: 2rem; } .month-2 { font-size: 1.8rem; font-weight: 300; color: #778697; } .includes-2 { font-size: 2.2rem; font-weight: 300; color: #001123; } .include-text-2 { font-size: 2rem; font-weight: 300; color: #001123; } .include-text-width-2 { width: 75%; font-size: 2rem; font-weight: 300; color: #001123; display: inline-block; margin-top: 2px; } .include-btn-2:link, .include-btn-2:visited { text-decoration: none; display: block; padding: 1rem 5rem; border-radius: 100px; color: #ffffff; font-size: 2rem; transition: all .3s ease-in-out; } .sliver-title-3 { font-size: 2rem; font-weight: 600; color: #00CF84; } .price-3 { font-size: 3.6rem; font-weight: 600; color: #001123; margin-top: 2rem; } .month-3 { font-size: 1.8rem; font-weight: 300; color: #778697; } .includes-3 { font-size: 2.2rem; font-weight: 300; color: #001123; } .include-text-3 { font-size: 2rem; font-weight: 300; color: #001123; } .include-text-width-3 { width: 75%; font-size: 2rem; font-weight: 300; color: #001123; display: inline-block; margin-top: 2px; } .include-btn-3:link, .include-btn-3:visited { text-decoration: none; display: block; padding: 1rem 5rem; border-radius: 100px; color: #ffffff; font-size: 2rem; transition: all .3s ease-in-out; } .includes-4 { font-size: 2rem; font-weight: 600; color: #fff; } .include-text-4 { font-size: 2.2rem; font-weight: 300; color: #fff; } .include-text-width-4 { width: 75%; font-size: 2.2rem; font-weight: 300; color: #fff; display: inline-block; margin-top: 1px; } .include-btn-4:link, .include-btn-4:visited { text-decoration: none; display: block; padding: 1rem 5rem; border-radius: 100px; color: #ffffff; font-size: 2rem; background: rgba(0, 121, 255, 1); transition: all .3s ease-in-out; } /* globe structure */ .globe-background{ background-image: url(../image/glove-img.png); background-size: 100%; background-repeat: no-repeat; margin-top: 7rem; } .signal-control-1{ transform: translateX(59rem) translateY(40rem); display: inline-block; overflow: hidden; transition: all .80s ease-in-out; } .signal-control-2{ transform: translateX(25rem) translateY(11rem); display: inline-block; overflow: hidden; transition: all .80s ease-in-out; } .orange-signal{ transform: translateX(18px) translateY(-56px); opacity: 0.5; overflow: hidden; } .blue-signal{ transform: translateX(1rem) translateY(-390px); opacity: 0.5; overflow: hidden; } .green-signal{ transform: translateX(69px) translateY(-113px); opacity: 0.5; overflow: hidden; } .parple-signal{ transform: translateX(-59px) translateY(159px); opacity: 0.5; overflow: hidden; } .signal-control-1:hover ~ .both-signal-1 .orange-signal{ opacity: 1; } .signal-control-1:hover ~ .both-signal-1 .parple-signal{ opacity: 1; } .signal-control-2:hover ~ .both-signal-2 .green-signal{ opacity: 1; } .signal-control-2:hover ~ .both-signal-2 .blue-signal{ opacity: 1; } /* globe structure */ /* reliability section end */ /* innovative section start */ #innovative-section{ margin-bottom: 25rem; margin-top: -10rem; } .innovative-title{ font-size: 2.6rem; font-weight: 600; width: 66%; text-align: center; margin: auto; } .innovative-texts{ margin-top: 5.5rem; } .innovative-heading-1{ font-size: 1.8rem; font-weight: 300; color: #001123; line-height: 30px; margin-top: .9rem; } .innovative-heading-2{ font-size: 1.8rem; font-weight: 300; color: #001123; } .innovative-heading-2{ font-size: 1.8rem; font-weight: 300; color: #001123; } /* innovative section end */