html { scroll-behavior: smooth; }
* { padding: 0; margin: 0; }
body { font-family: var(--primary-font-1); font-weight: lighter; font-size: 18px; color: #12263A; }
.loader { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; height: 100vh; z-index: 9999999999999; overflow: hidden; }
.box { display: inline-block; width: auto; height: auto; position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); }
.loader-07 { border: 0 solid transparent; border-radius: 50%; position: relative; font-size: 220px; }
.loader-07:before, .loader-07:after { content: ''; border: .2em solid #E71D36; border-radius: 50%; width: inherit; height: inherit; position: absolute; top: 0; left: 0; -webkit-animation: loader-07 1s linear infinite; animation: loader-07 1s linear infinite; opacity: 0; }
.loader-07:before { -webkit-animation-delay: 1s; animation-delay: 1s; }
.loader-07:after { -webkit-animation-delay: .5s; animation-delay: .5s; }
@-webkit-keyframes loader-07 {
0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
50% { opacity: 1; }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
}
@keyframes loader-07 {
0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
50% { opacity: 1; }
100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
}
.head-sec .top-navigation { }
.head-sec .top-navigation .navbar { padding: 20px 30px; background-color:white; }
.navbar-brand img { height:50px; }
header .nav-up .horizontal-nav { }
header .nav-up .horizontal-nav li { margin-right: 15px; }
header .nav-up .horizontal-nav li:last-child { margin-right: 0; }
header .nav-up .horizontal-nav li .nav-link { color: #1f1f1f; text-decoration: none; font-size: 16px; font-weight: 500; }
header .nav-up .horizontal-nav .nav-link:focus, header .nav-up .horizontal-nav .nav-link:hover ,header .nav-up .horizontal-nav .nav-link.active { color: #E71D36; }
.head-sec .navigation-toggle ul { padding-left: 0; margin: auto 0; }
.head-sec .navigation-toggle ul li { list-style: none; }
.head-sec .navigation-toggle #toggle-btn { width: 45px; padding: 10px; border-radius: 3px; }
.head-sec .navigation-toggle #toggle-btn span { width: 25px; background-color: #141414; height: 2px; display: block; margin-top: 3px; -webkit-transition: .8s ease; -o-transition: .8s ease; transition: .8s ease; margin-left: auto; margin-right: auto; }
header { transition: .8s ease-in-out; }
.fixed-top { position: absolute; top: 0; right: 0; left: 0; z-index: 11111; }
.fix-top { background-color: #ffffff; position: fixed; -webkit-animation-name: animationFade; animation-name: animationFade; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-box-shadow: 1px 1px 15px #e1e1e1; box-shadow: 1px 1px 15px #e1e1e1; }
.fix-top .navbar { background-color: #fff !important; padding-top: 15px !important; padding-bottom: 15px !important; box-shadow: none !important; }
@-webkit-keyframes animationFade {
from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes animationFade {
from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
to { opacity: 1; -webkit-transform: none; transform: none; }
}
.banner-sec { background-color: #303633; position:relative; }
.banner-sec img { width:100%; }
.banner-sec .banner-details { color: #12263A; display: flex; justify-content: center; align-items: center; }
.banner-sec .banner-details .banner-inner-content .banner-heading { font-size:28px; margin-bottom: 25px; font-weight: 500; }
.banner-sec .banner-details .banner-inner-content .banner-heading_big { font-size:66px; margin-bottom: 30px; font-weight:900; text-transform:uppercase; }
@media (max-width:992px) {
.banner-sec .banner-details .banner-inner-content .banner-heading { font-size:26px; }
.banner-sec .banner-details .banner-inner-content .banner-heading_big { font-size:56px; }
}
@media (max-width: 767px) {
.banner-sec .banner-details .banner-inner-content .banner-heading { font-size:24px; }
.banner-sec .banner-details .banner-inner-content .banner-heading_big { font-size:46px; }
}
@media (max-width: 576px) {
.banner-sec .banner-details .banner-inner-content .banner-heading { font-size:22px; }
.banner-sec .banner-details .banner-inner-content .banner-heading_big { font-size:36px; }
}
.banner-sec .banner-details .banner-inner-content .banner-heading span { color: #e7e0dc; font-weight: 600; }
.banner-sec .banner-details .banner-inner-content .banner-text { margin-bottom: 30px; color: #e7e0dc; }
.banner-sec .banner-details .banner-inner-content .banner-text strong { font-size: 18px; font-weight: 500; color: #e7e0dc; }
.banner-sec .banner-img { }
.banner-sec .banner-img img { max-width: 100%; }
.banner-sec nav { width:100%; padding:0; margin:10px 0px; }
.banner-sec nav ul { display:block; width:100%; text-align:center; }
.banner-sec nav ul li { display:inline-block; position:relative; margin: 0 10px; padding:1em; border-radius: 0; background:#f1f1f1; transition: .8s ease; border: solid 1px #f1f1f1; }
.banner-sec nav ul li.active { background:#dcdcdc; transition: .8s ease; border: solid 1px #dcdcdc; }
.banner-sec nav ul li:hover { background-color: #FFFFFF; color: #1f1f1f; border: solid 1px #FFFFFF; }
.banner-sec nav ul li a { display:block; font-weight: 500; color: #1f1f1f; text-decoration: none; font-size: 14px; }
.banner-sec nav ul li a:hover { color: #1f1f1f;}
.about-sec { background:#efefef; }
.about-sec .about-details .sub-heading { font-size: 16px; color: #12263A; margin-bottom: 30px; }
.about-sec .about-details .heading { color: #12263A; font-weight: 600; margin-bottom: 30px; font-size:28px; }
@media (max-width:992px) {
.about-sec .about-details .heading { font-size:26px; }
}
@media (max-width: 767px) {
.about-sec .about-details .heading { font-size:24px; }
}
@media (max-width: 576px) {
.about-sec .about-details .heading { font-size:22px; }
}
.about-sec .about-details .detail-text { margin-bottom: 40px; }
.about-sec .about-details .quote-text { font-family: 'Inspiration', cursive; font-size: 50px; line-height: 50px; color: #ffffff; margin-bottom: 40px; }
.about-sec .banner-heading_big { font-size:66px; margin-bottom: 30px; font-weight:900; text-transform:uppercase; }
@media (max-width:992px) {
.about-sec .banner-heading_big { font-size:56px; }
}
@media (max-width: 767px) {
.about-sec .banner-heading_big { font-size:46px; }
}
@media (max-width: 576px) {
.about-sec .banner-heading_big { font-size:36px; }
}
.services-sec { position:relative; }
.services-sec .services-details .sub-heading { font-size: 16px; color: #12263A; margin-bottom: 30px; }
.services-sec .services-details .heading { font-size:28px; color: #12263A; font-weight: 600; margin-bottom: 30px; }
@media (max-width:992px) {
.services-sec .services-details .heading { font-size:26px; }
}
@media (max-width: 767px) {
.services-sec .services-details .heading { font-size:24px; }
}
@media (max-width: 576px) {
.services-sec .services-details .heading { font-size:22px; }
}
.services-sec .services-details .detail-text { margin-bottom: 40px; }
.services-sec .our-services { overflow: hidden; }
.services-sec .our-services .service-card { transition: .8s ease; }
.services-sec .our-services .service-card .image-holder { margin-bottom: 30px; transition: .8s ease; }
.services-sec .our-services .service-card .image-holder i { font-size: 60px; color: #E71D36; transition: .8s ease; }
.image-holder figure img { border: 5px solid; border-bottom-color: #ffffff; border-top-color: #f1f1f1; border-left-color: #f1f1f1; border-right-color: #ffffff; }
.image-holder figure { padding: 5px; background: #d0d0d0; border: 10px solid; border-bottom-color: #d0d0d0; border-top-color: #939393; border-left-color: #939393; border-right-color: #d0d0d0; }
.services-sec .our-services .service-card .service-card-heading { font-size:26px; font-weight: 300; margin-bottom: 20px; transition: .8s ease; }
.services-sec .our-services .service-card .service-card-detail { font-weight: lighter; font-size: 15px; color: #737373; }
.services-sec .our-services a { text-decoration: none; color: #000000; }
.services-sec .our-services .s-cards:nth-child(even) { border-left: solid 1px #e1e1e1; }
.services-sec .our-services .s-cards { border-top: solid 1px #e1e1e1; }
.services-sec .our-services .s-cards:nth-child(2),.services-sec .our-services .s-cards:first-child { border-top: solid 1px transparent; }
.services-sec .our-services .service-card:hover .service-card-heading { color: #E71D36; }
.services-sec .our-services .service-card:hover .image-holder { transform: translateY(-10px); }
.services-sec .our-services .services-btn { display: inline-block; font-weight: 500; font-size: 18px; color: #1f1f1f; background-color: #a9e4e6; text-decoration: none; padding: 20px 50px; border: solid 1px #fff; margin-right: 15px; transition: .8s ease; }
.services-sec .our-services .services-btn:hover { background-color: #1f1f1f; color: #FFFFFF; border: solid 1px #1f1f1f; }
.services-sec .our-services .services-btn i { font-size: 20px; margin-right: 5px; }
.reviews-sec { position:relative; }
.reviews-sec .reviews-details .sub-heading { font-size: 16px; color: #12263A; margin-bottom: 30px; }
.reviews-sec .reviews-details .heading { font-size:30px; color: #12263A; font-weight: 600; margin-bottom: 30px; }
.reviews-sec .reviews-details .detail-text { margin-bottom: 40px; }
.reviews-sec .reviews { }
.reviews-sec .reviews article { margin-bottom:30px; }
.reviews-sec .reviews p { font-size: 24px; line-height: 22px; font-family: var(--primary-font-review); }
.posts1-sec .post1 { }
.posts1-sec .post1 h4 { font-size: 14px; line-height: 22px; }
.author-skills { position: absolute; bottom: 0; width: 100%; position: relative; }
.author-skills .small-text { font-size: 18px; font-weight: 300; line-height: 1.4; }
.author-skills .small-heading { font-size: 24px; font-weight: bold; margin: 6px 0 18px 0; }
.about-media { position: relative; overflow: hidden; vertical-align: bottom; transition: color .3s ease-out; z-index: 0; padding-top: 30px; padding-bottom: 50px; }
.about-media::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; transform: translateY(calc(100% - 0px)); width: 100%; height: 100%; background: #ff8000; transition: transform .25s ease-out;}
.about-media:hover::before { transform: translateY(0); transition: transform .25s ease-out; }
.about-media:hover .about-icon i{ -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
.about-media .about-icon i { font-size: 55px; -webkit-transition: .8s ease; -o-transition: .8s ease; transition: .8s ease; margin-bottom: 8px; }
.about-media:hover .about-icon i { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
.app-clips { padding-top: 100px; padding-bottom: 100px; }
.app-clips .app-clips-details .sub-heading { font-size: 16px; color: #E71D36; margin-bottom: 30px; }
.app-clips .app-clips-details .heading { font-size:30px; color: #1f1f1f; font-weight: 600; padding-left: 90px; padding-right: 90px; margin-bottom: 30px; }
.app-clips .app-clips-details .detail-text { margin-bottom: 40px; }
/* ===================================
Mobile App features
====================================== */
.app-sec { position:relative; }
.app-sec .app-details { margin-bottom: 50px; }
.app-sec .app-details .sub-heading { font-size: 16px; color: #E71D36; margin-bottom: 30px; }
.app-sec .app-details .heading { font-size:30px; color: #1f1f1f; font-weight: 600; padding-left: 90px; padding-right: 90px; margin-bottom: 30px; }
.app-sec .app-details .detail-text { margin-bottom: 40px; }
.app-feature { text-align: center; margin-bottom: 4rem; }
.app-feature:hover i { transform: translateY(-5px); }
.app-feature:last-child { margin-bottom: 0; }
.app-feature h4 { font-weight: 500; font-size: 24px; }
.app-feature p { font-weight: 300; font-size: 15px; }
.app-feature i { color: #E71D36; font-size: 40px; margin-bottom: 1.5rem; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.app-image { text-align: center; position: relative; display: inline-block; width: 100%; height: 100%; }
.app-image img { max-width: 280px; margin: 0 auto; display: inline-block; }
#app-slider { position: absolute; top: 50%; width: 235px; left: 50%; height: 420px; transform: translate(-50%, -50%); }
/* ===================================
Get App Section
====================================== */
.get-app-sec { position: relative; }
.get-app-sec .overlay { position: absolute; left: 0; right: 0; bottom: 0; top:0; background-color: rgba(251, 122, 130, 0.40); }
.get-app-sec .get-app-details .sub-heading { font-size: 16px; color: #e7e0dc; margin-bottom: 30px; }
.get-app-sec .get-app-details .heading { font-size:30px; color: #e7e0dc; font-weight: 600; padding-left: 90px; padding-right: 90px; margin-bottom: 30px; }
.get-app-sec .get-app-details .detail-text { color: #e7e0dc; }
.get-app-sec .get-app-details .get-app-btn { display: inline-block; font-weight: 500; font-size: 18px; color: #1f1f1f; background-color: #FFFFFF; text-decoration: none; padding: 20px 20px; border: solid 1px #fff; margin: 5px; transition: .8s ease; }
@media only screen and (min-width: 575.98px) {
.get-app-sec .get-app-details .get-app-btn { width:230px; }
}
@media only screen and (max-width: 575.98px) {
.get-app-sec .get-app-details .get-app-btn { width:100%; }
}
.get-app-sec .get-app-details .get-app-btn:hover { background-color: #1f1f1f; color: #FFFFFF; border: solid 1px #1f1f1f; }
.get-app-sec .get-app-details .get-app-btn i { font-size: 20px; margin-right: 5px; }
/* ===================================
footer css
====================================== */
.footer-sec { background:#545460; color:#e7e0dc; }
.footer-sec .footer-icons a { display: inline-block; text-decoration: none; color: #1f1f1f; margin-right: 10px; }
.footer-sec .footer-icons a i { display: block; height: 60px; width: 60px; font-size: 24px; color: #1f1f1f; line-height: 64px; text-align: center; border-radius: 40px; background: transparent; -webkit-transition: all .3s ease !important; -o-transition: all .3s ease !important; transition: all .3s ease !important; }
.footer-sec .footer-icons a i.la-facebook-f:hover, .footer-sec .footer-icons a i.la-facebook-f:focus { color: #ffffff; -webkit-box-shadow: 0 0 15px 30px #3D558F inset; box-shadow: 0 0 15px 30px #3D558F inset; }
.footer-sec .footer-icons a i.la-twitter:hover, .footer-sec .footer-icons a i.la-twitter:focus { color: #ffffff; -webkit-box-shadow: 0 0 15px 30px #33c9dd inset; box-shadow: 0 0 15px 30px #33c9dd inset; }
.footer-sec .footer-icons a i.la-google:hover, .footer-sec .footer-icons a i.la-google:focus { color: #ffffff; -webkit-box-shadow: 0 0 15px 30px #D74937 inset; box-shadow: 0 0 15px 30px #D74937 inset; }
.footer-sec .footer-icons a i.la-linkedin-in:hover, .footer-sec .footer-icons a i.la-linkedin-in:focus { color: #ffffff; -webkit-box-shadow: 0 0 15px 30px #0474BC inset; box-shadow: 0 0 15px 30px #0474BC inset; }
.footer-sec .footer-icons a i.la-instagram:hover, .footer-sec .footer-icons a i.la-instagram:focus { color: #ffffff; background-image: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); /*-webkit-box-shadow: 0 0 15px 30px #fd5949 inset; */
/*box-shadow: 0 0 15px 30px #fd5949 inset; */
animation: 1s instaRound; }
.footer-sec .footer-icons a i.la-envelope:hover, .footer-sec .footer-icons a i.la-envelope:focus { color: #ffffff; -webkit-box-shadow: 0 0 15px 30px #D45049 inset; box-shadow: 0 0 15px 30px #D45049 inset; }
.footer-sec a.credits { color:#FFFFFF; text-decoration:none; font-size:11px; }
@-webkit-keyframes instaRound { from { opacity: 0; }
to { opacity: 1; }
}
@keyframes instaRound { from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes ripple { 0% { opacity:1; -webkit-transform:scale(0); transform:scale(0)
}
100% { opacity:0; -webkit-transform:scale(1); transform:scale(1)
}
}
@keyframes ripple { 0% { opacity:1; -webkit-transform:scale(0); transform:scale(0)
}
100% { opacity:0; -webkit-transform:scale(1); transform:scale(1)
}
}
.intro-banner-vdo-play-btn .ripple:nth-child(2) { animation-delay:.3s; -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3) { animation-delay:.6s; -webkit-animation-delay:.6s
}
/*************************************/
/************* Broad nav *************/
/*************************************/
header .broad { display: none; }
header .broad-rem { -webkit-animation: .5s display-hid !important; animation: .5s display-hid !important; }
@-webkit-keyframes display-hid { from { opacity: 1; transform: translateX(0%); }
to { opacity: 0; transform: translateX(100%); }
}
@keyframes display-hid { from { opacity: 1; transform: translateX(0%); }
to { opacity: 0; transform: translateX(100%); }
}
header .broad-nav { position: fixed; top:0; right: 0; left: auto; bottom: auto; background-color: #FFFFFF; z-index: 99999; display: block; -webkit-animation: .5s display-ctrl; animation:.5s display-ctrl; }
@-webkit-keyframes display-ctrl { from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0%); }
}
@keyframes display-ctrl { from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0%); }
}
header .broad-nav .navbar { background-color: #FFFFFF !important; padding: 20px 40px !important; }
header .broad-nav .close-nav { position: absolute; top: 6%; right: 9%; }
header .broad-nav .close-nav i { color: #1f1f1f; font-size: 30px; }
header .broad-nav .navbar { margin-top: 50px; }
header .broad-nav .navbar .nav-item { margin-bottom: 15px; }
header .broad-nav .navbar .nav-item .nav-link { color: #1f1f1f; font-size: 16px; text-decoration: none; font-weight: 500; transition: .8s ease; cursor: pointer; }
header .broad-nav .navbar .nav-item .nav-link strong { color: #1f1f1f; font-size: 16px; text-decoration: none; transition: .8s ease; cursor: pointer; }
header .broad-nav .navbar .nav-link:focus, header .broad-nav .navbar .nav-link:hover ,header .broad-nav .navbar .nav-link.active { color: #E71D36; }
/*===================================
Media Query
=====================================*/
@media (max-width: 575.98px) {
.head-sec .top-navigation .navbar { padding: 20px 30px; background-color: white; }
header .broad-nav { left: 0; bottom: 0; }
header .broad-nav .navbar { margin-top: 65px; }
.services-sec .our-services { padding-top: 0; }
.services-sec .our-services .s-cards { padding-top: 0; border: none; padding-bottom: 0; border-top: solid 1px #e1e1e100; }
.services-sec .our-services .s-cards:nth-child(2), .services-sec .our-services .s-cards:first-child { border-top: none; }
.services-sec .our-services .s-cards:nth-child(even) { border-left: solid 1px transparent; }
/*app clips sec*/
.app-clips .app-clips-details .heading { padding-left: 0; padding-right: 0; }
.app-clips .app-clips-slider { width: 60%; margin: auto; }
/*app feature sec*/
.app-sec .app-details .heading { padding-left: 0; padding-right: 0; }
/*#app-slider { */
/* left:41px; */
/*}*/
/* get app sec*/
.get-app-sec .get-app-details .heading { padding-left: 0; padding-right: 0; }
.get-app-sec .get-app-details .get-app-btn { padding: 20px 50px; margin-right: 0; width: 100%; margin-bottom: 20px; }
/* footer sec*/
.footer-sec .footer-icons a i { height: 30px; width: 30px; font-size: 18px; line-height: 31px; }
}
@media (min-width: 576px) and (max-width: 767.98px) { /*header sec*/
.head-sec .top-navigation .navbar { padding: 20px 30px; background-color: white; }
header .broad-nav { left: 0; bottom: 0; }
header .broad-nav .navbar { margin-top: 65px; }
.services-sec .our-services { padding-top: 0; }
.services-sec .our-services .s-cards { padding-top: 0; border: none; border-top: solid 1px #e1e1e100; }
.services-sec .our-services .s-cards:nth-child(2), .services-sec .our-services .s-cards:first-child { border-top: none; }
.services-sec .our-services .s-cards:nth-child(even) { border-left: solid 1px transparent; }
/*app clips sec*/
.app-clips .app-clips-details .heading { padding-left: 0; padding-right: 0; }
/*app feature sec*/
.app-sec .app-details .heading { padding-left: 0; padding-right: 0; }
.get-app-sec .get-app-details .heading { padding-left: 0; padding-right: 0; }
.get-app-sec .get-app-details .get-app-btn { padding: 20px 50px; margin-right: 0; width: 100%; margin-bottom: 20px; }
/* footer sec*/
.footer-sec .footer-icons a i { height: 40px; width: 40px; font-size: 20px; line-height: 41px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
header .broad-nav { left: 0; bottom: 0; }
header .broad-nav .navbar { margin-top: 70px; }
.get-app-sec .get-app-details .get-app-btn { padding: 20px 24px; font-size: 16px; }
.app-sec .app-features-list { width: 74%; margin: 0 auto; }
.services-sec .our-services .s-cards { padding: 30px; }
}
@media (min-width: 991.99px) and (max-width: 1200px) {
.get-app-sec .get-app-details .get-app-btn { padding: 20px 30px; }
}
.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}
.page-link { padding:10px 20px!important; position:relative; display:block; margin-left:-1px; line-height:1.25; color:#E71D36; background-color:#fff; border:1px solid #dee2e6; }
.page-link:hover{z-index:2;color:#E71D36;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}
.page-link:focus{z-index:2;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}
.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
.page-item.active .page-link{ padding:10px 20px; z-index:1; color:#fff; background-color:#E71D36; border-color:#E71D36; font-weight:700; text-decoration:none; }
.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}
.progress-wrap { position: fixed; bottom: 30px; right: 30px; height: 44px; width: 44px; cursor: pointer; display: block; border-radius: 50px; z-index: 100; opacity: 0; visibility: hidden; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; mix-blend-mode: difference; }
.progress-wrap.active-progress { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
.progress-wrap::after { position: absolute; font-family: 'Font Awesome 5 Free'; content: '\f077'; text-align: center; line-height: 44px; font-size: 13px; font-weight: 900; color: #ccc; left: 0; top: 0; height: 44px; width: 44px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; }
.progress-wrap svg path { fill: none; }
.progress-wrap svg.progress-circle path { stroke: #ccc; stroke-width: 4; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; }
/* =================================== */
#svg-wave { position: absolute; bottom: -1px; left: 0; right: 0; width: 100%; }
/* =================================== */
#about { position:relative; }
.img-sec{ position: relative; padding-right: 50px; padding-bottom: 50px; }
.about_img { padding: 2%; background-color: #f6f6f6; position: relative; }
.about_img img{ height: 100%; width: 100%; }
.blue_rectangle{ position: absolute; width: 90%; height: 60%; bottom: 2%; left: 54%; transform: translateX(-50%); background-color: #E71D36; }
#about .sub-heading { font-size: 16px; color: #E71D36; margin-bottom: 30px; }
#about .heading { font-size:30px; color: #9ca5a2; font-weight: 600; margin-bottom: 30px; }
#about .detail-text { margin-bottom: 40px; }
.about-heading .info { font-size: 18px; color: #494949; line-height: 1.4; font-family: Roboto, sans-serif; }
.margin_heading{ margin: 25px 0; }
.video-play-button { height: 70px; width: 70px; display: inline-block; top: 50%; left: 50%; -webkit-border-radius: 50px; border: 3px solid #002450; border-radius: 50px; line-height: 77px; text-align: center; color: #002450; background: transparent; -webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255); box-shadow: 0 0 0 0 rgba(0, 36, 80, .7); z-index: 1; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.video-play-button:hover i { color: #ffffff; transition: .3s ease; }
.video-play-button:hover { background: #002450; -o-animation: ripple 1.3s infinite; -webkit-animation: ripple 1.3s infinite; animation: ripple 1.3s infinite; }
.video-play-button.slider-play-button { margin: 10px; -webkit-transform: translate(0%,0%); -ms-transform: translate(0%,0%); -o-transform: translate(0%,0%); transform: translate(0%,0%); }
.video-play-button i { font-size: 32px; transition: .3s ease; }
@-webkit-keyframes ripple {
70% { -webkit-box-shadow: 0 0 0 20px rgba(0, 159, 153, 0); box-shadow: 0 0 0 20px rgba(0, 159, 153, 0); }
to { -webkit-box-shadow: 0 0 0 0 rgba(0, 159, 153, 0); box-shadow: 0 0 0 0 rgba(0, 159, 153, 0); }
}
@keyframes ripple {
70% { -webkit-box-shadow: 0 0 0 20px rgba(0, 159, 153, 0); box-shadow: 0 0 0 20px rgba(0, 159, 153, 0); }
to { -webkit-box-shadow: 0 0 0 0 rgba(0, 159, 153, 0); box-shadow: 0 0 0 0 rgba(0, 159, 153, 0); }
}
/* =================================== */