/* ── home.css ── */
p{font-size:1.2rem;color:#333;line-height:1.8}
.home-btn{display:inline-block;border:none;padding:3px 20px;background:#77a507;color:#fff;font-size:1.2em;border-radius:2px}
.home-slider{padding-top:85px;padding-bottom:0px;text-align:center}
h1.sliderh1{font-size:2.5em;line-height:1.4}
h1.sliderh1 span{font-size:1.1em;display:inline-block;font-weight:300;width:100%}
.sliderh4{font-size:1.1em;line-height:1.7;font-weight:400;max-width:1024px;margin:25px auto 40px}
.banner-getstarted{max-width:420px;display:grid;grid-template-columns:1fr 180px;margin:auto}
.getstarted-form input{border:1px solid #ccc;padding:8px 20px 8px;line-height:1;border-top-left-radius:2px;border-bottom-left-radius:2px}
.get-started-submit,a.get-started-submit,input.get-started-submit,button.get-started-submit{display:inline-block;border:none;padding:6px 20px;margin-left:-4px;border:1px solid #77a507;background:#77a507;color:#fff;font-size:1.2em;border-radius:2px}
.home-slider input.get-started-submit{padding: 13px 20px;}
.banner-getstarted a.get-started-submit{border-top-left-radius:0;border-bottom-left-radius:0}
a.get-started-submit:hover,a.get-started-submit:hover{border:1px solid #00457c;background:#00457c}
.get-started-submit span{color:#fff}
.slider1{margin-top:10px;font-size:.95rem}
.slider1 span{font-weight:500}
@media only screen and (min-width:1025px) {
.home-slider{padding-top:150px;padding-bottom:0px}
}
@media only screen and (min-width:440px) {
.home-slider .getstarted-form input{border:2px solid #77a507;}
}
.home-section2{background:#00457c;color:#fff;padding:50px 0 60px}
.home-container2{display:grid;grid-template-columns:1fr 1fr;grid-gap:30px}
.home-cnt2{display:grid;grid-template-columns:100px 1fr;grid-gap:20px;align-items:center}
.home-cnt2 h2,.home-cnt2 h3,.home-cnt2 h4{color:#fff;font-size:1.7rem;font-weight:500;/*text-shadow:0 0 5px rgba(0,0,0,0.2)*/}
.home-cnt2 p{color:#fff;margin-bottom:0;font-weight:400;line-height:1.5;font-size:1.1rem;/*text-shadow:0 0 4px rgba(0,0,0,0.3)*/}
.home-features{text-align:center;padding:65px 0 70px}
.home-features-container{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:25px;text-align:center;margin:auto}
.homef-title{font-size:1.1rem;font-weight:400;color:#111}
.homef-img{box-sizing:content-box;opacity:.8;overflow:hidden;transform:scale(0.6);margin:auto;border-radius:1px;width:100px;height:100px;margin:1px auto -3px auto;transition:all .2s ease;background-image:url(/theme/images/css_sprites.png)}
.hf-automated-time{background-position:-110px -10px}
.homef-reg{margin-top:70px}
.homef-reg .get-started-submit,.homef-reg a.get-started-submit{border:none;padding:8px 40px;margin-left:0;font-size:1.6em;font-weight:500}
.home-time-tracking{background-color:#00457c;color:#fff;padding:100px 0;position:relative;overflow:hidden;width:100%;height:auto}
.home-time-tr-container{display:grid;grid-template-columns:5fr 5fr;grid-gap:20px;align-items:center}
.home-time-tr-cnt h2,.home-time-tr-cnt h3,.home-time-tr-cnt h4{color:#fff;font-size:2.3em;margin-bottom:15px}
.home-time-tr-cnt p{color:#fff;font-weight:300}
.time-tracking-img{position:absolute;left:0px;top:-120px;height: auto; width: 100%;}
.home-screenshots{padding:70px 0}
.home-sh-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:30px;align-items:center}
.home-sh-container h2,.home-sh-container h3{font-weight:500;font-size:2.3rem;margin-bottom:15px}
.daily-routine{padding:50px 0;background-color:#f3f4f5}
.daily-routine-container{display:grid;grid-template-columns:10fr 7fr;grid-gap:50px;align-items:center}
.daily-routine-container h2,.daily-routine-container h3,.daily-routine-container h4{font-weight:500;font-size:2.3rem;margin-bottom:15px}
.daily-routine-container p{color:#222}
.home-app-usage{padding:50px 0; background-color: #fff; }
/*.home-app-usage p{color: #fff}*/
.app-usage-container{display:grid;grid-template-columns:1fr 1fr;grid-gap:30px;align-items:center}
.app-usage-container h2,.app-usage-container h3,.document-title-container h2,.document-title-container h3{font-weight:500;font-size:2.3rem;margin-bottom:15px;}
.home-project-management-section{background: rgb(255,255,255);
/*background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(243,244,245,1) 100%);*/}
.home-project-management{padding:60px 0;position:relative;width:100%;height:auto;overflow-x:hidden;overflow-y:visible}
.home-project-management2{padding-bottom: 50px;}
.project-management-container{display:grid;grid-template-columns:10fr 6fr;grid-gap:30px;align-items:center}
.project-management-container h2,.project-management-container h2{font-weight: 500;
font-size: 2.3rem;
margin-bottom: 15px;}
.project-management-container p{}
.project-management-bg{ width: auto;
height: 430px;
position: absolute;
right: -185px;
top: 55px;box-shadow: 0px 0px 17px rgba(0,0,0,0.2);
border-radius: 1px;}
.pms-trial-btn{margin-left:10px; }
/*.home-project-management2{background:#fbfbfb;background:linear-gradient(0deg,rgba(251,251,251,1) 0%,rgba(251,251,251,1) 50%,rgba(0,69,124,1) 50%,rgba(0,69,124,1) 100%)}*/
.pms-ul{padding-left:0px; display:grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 30px; grid-row-gap: 5px;}
.pms-ul li{position:relative;list-style:none;}
.pm-icon {
transform: scale(0.5);
border: 0 solid #ccc;
margin: auto;
width: 80px; height: 80px;
margin: 0px auto 0px -15px;
transition: all .2s ease;
background-image: url(/theme/images/pmt_sprites.png);
/*filter: grayscale(90%);*/
}
.pms-ul li a{ grid-template-columns: 50px 1fr;
grid-gap: 5px;
display: grid;
align-items: center;
font-weight: 500;
line-height: 1.2;
font-size: 1rem;}
.pms-ul li a span{color: #333}
.pms-ul li a:hover .pm-icon{filter: grayscale(0%);}
.pms-ul li a:hover span{color: #77a507}
.bg-Custom_Workflow {
background-position: -10px -10px;
}
.bg-Task_Management {
background-position: -110px -10px;
}
.bg-Agile_Scrum {
background-position: -10px -110px;
}
.bg-Backlog_Sprint {
background-position: -110px -110px;
}
.bg-Bug_Tracking {
background-position: -210px -10px;
}
/*.pms-ul li::before{transform:scale(0.8);content:'';background:url(/theme/uploads/2019/03/right-tick.png);height:20px;width:25px;left:-29px;top:5px;position:absolute}*/
.pm1-sec{padding:10px 0 15px;/*background-color:#fff;*/display:grid;grid-template-columns:repeat(5,1fr);text-align:center;/*box-shadow:0 10px 40px 0 rgba(0,0,0,0.05)*/;border-radius:2px;position:relative;z-index:1; }
.pm1-cnt h4{font-size:1.1rem;font-weight:400}
.pm1-img{border:0 solid #ccc;margin:auto;width:125px;height:125px;margin:-7px auto -6px auto;transition:all .2s ease;background-image:url(/theme/images/pms-proc.png)}
/*.bg-Initiation_Process{background-position:-10px -10px}
.bg-Project_Planning{background-position:-250px -10px}
.bg-Project_Execution{background-position:-130px -130px}
.bg-Performance_Monitoring{background-position:-10px -130px}
.bg-Final_Closure {background-position: -130px -370px;}*/
.bg-Initiation_Process{background-position:-155px -10px; transform:scale(0.85);}
.bg-Project_Planning{background-position:-300px -7px; transform:scale(0.75);}
.bg-Project_Execution{background-position:-155px -155px; transform:scale(0.8);}
.bg-Performance_Monitoring{background-position:-10px -151px; transform:scale(0.85);}
.bg-Final_Closure {background-position: -10px -10px; transform:scale(0.8);}
.bg-Network_security{background-position:-130px -10px}
.bg-Secure_hosting{background-position:-250px -130px}
.bg-System_security{background-position:-10px -250px}
.bg-App_Tracking{background-position:-130px -250px}
.bg-Audit_Daily_Routine{background-position:-250px -250px}
.bg-Automated_Screenshots{background-position:-370px -10px}
.bg-Automated_Time_Tracking{background-position:-370px -130px}
.bg-Data_security{background-position:-370px -250px}
.bg-Document_Title_Tracking{background-position:-10px -370px}
/* icon-section */
.sm-icon img{
border-radius: 1px;
width: 100px;
height: 100px;
margin: 1px auto -3px auto;
transition: all .2s ease;
box-sizing: content-box;
opacity: .8;
overflow: hidden;
transform: scale(.6);
}
@media only screen and (max-width: 767px) {
.mb-icon-box{
display: none;
}
}
.testimonial-thumb{width:75px;border-radius:50%;border:2px solid #eee;margin-bottom:10px}
#carouselExampleControls i{font-size:25px}
.tf-client-testimonial,.tf-client-name,.tf-client-designation{color:#333}
.about{text-align:center}
.home-services{text-align:center}
.home-services1{display:grid;margin-top:25px}
.home-services{padding-top:50px;padding-bottom:40px}
.home-services h2{margin-bottom:38px;padding-bottom:6px}
.home-services1 h3{font-size:1.6em;margin-top:15px}
.home-services1 div{position:relative;overflow:hidden}
.home-services1 div div.book-more-btn{position:absolute;top:-40px;transition:all .2s ease;opacity:0}
.home-services1 div:hover div.book-more-btn{position:absolute;opacity:1;top:44px;width:100%;transition:all .4s ease}
.home-services1 div:hover img{filter:none;-webkit-filter:grayscale(100%)}
.btn-primary{color:#fff;font-size:14px;border:none}
.head-border{position:relative}
.head-border::before{content:"";position:absolute;width:200px;height:1px;bottom:-10px;background:#ccc;left:50%;margin-left:-100px}
.head-border::after{content:"";position:absolute;width:80px;height:3px;bottom:-11px;background:#cd2323;left:50%;margin-left:-40px}
.issue-tracker h5{position:relative}
.issue-tracker h5:after{display:block;content:"";height:2px;width:375px;margin:15px auto 20px;position:relative;background:#77a507}
.head-border-left::after,.head-border-left::before{left:0;margin-left:0}
.entry-content .what-we-do-4u img{max-width:270px;margin:auto;display:table;transform:scale(1);transition:all .3s ease}
.entry-content .what-we-do-4u img:hover{transform:scale(1.1);transition:all .5s ease}
.entry-content .home-section1 p{text-align:center}
.what-we-do-4u,.Modern-Platforms{display:grid}
.news-img{width:280px;float:left;margin-right:15px}
.news-cnt{text-align:left}
.blog-news .carousel-inner{min-height:200px}
a.tab-read{color:#fff;background:#cd2323;display:inline-block;padding:2px 10px;border-radius:2px;font-weight:400;transition:all .25s ease}
a.tab-read:hover{color:#fff;background:#222;transition:all .5s ease}
.testimonial-profile{height:auto;width:27%;float:left;text-align:center}
.home-acordian-section a{text-align:center;color:#cd2424;display:block;padding:1px 0;margin:5px auto 15px}
.testimonial-cnt{height:auto;width:73%;padding-left:25px;float:left}
.carousel .testimonial-img img{width:80px;height:80px;display:block;border-radius:50%;margin:auto;border:1px solid #999;padding:2px}
.testimonial-profile p{font-weight:600}
.resp-tabs-container h4{font-size:1.4rem}
.blog-news .carousel-indicators{padding-top:20px;position:relative;right:0;bottom:0}
.blog-news .carousel-indicators li{background-color:#333}
.blog-news .carousel-indicators li.active,.blog-news .carousel-indicators li:hover{background-color:#cd2323}
.home-data-security{padding:60px 0 50px;background-color:#00457c; text-align:center}
.home-data-security p{color: #fff;}
.home-data-security h2,.home-data-security h3{font-size:2rem;color:#fff;font-weight:500;margin-bottom:15px}
.Modern-Platforms{grid-column-gap:25px}
.what-we-do-4u a{color:#555}
.what-we-do-4u a:hover{color:#cd2323}
.what-we-do-4u{padding:1px 8%;grid-column-gap:6%;margin-top:55px}
.what-we-do-4u h3{text-align:center;font-size:1.7em!important;margin:20px auto 10px!important;color:#444}
.entry-content .what-we-do-4u p{text-align:center}
.Modern-Platforms div{ border: 5px solid #0e5186;
text-align: center;
padding: 0 10px 10px;
transition: all .1s ease;
border-radius: 1px;}
.Modern-Platforms div a{display:inline-block}
.Modern-Platforms div p{display:none!important}
.Modern-Platforms div:hover{border:5px solid #0f5994;transition:all .2s ease}
.Modern-Platforms div h3{text-align: center;
margin: 1px auto!important;
font-size: 1.1rem;
color: #fff;
font-weight: 400;}
.Modern-Platforms div:hover h3{color:#fff}
.entry-content .what-we-do-4u p{text-align:center}
.Modern-Platforms div:hover div{border:0 solid #ccc}
.entry-content .home-section1 p{margin-bottom:1px!important}
.Modern-Platforms div div{border:0 solid #ccc;transform:scale(0.8);margin:auto;width:80px;height:80px;margin:1px auto 1px auto;-moz-transform:scale(0.8);transition:all .2s ease}
.Modern-Platforms div:hover div{transform:scale(0.9);transition:all .4s ease}
.bg-Blockchain{background-position:-110px -10px}
.bg-Android{background-position:-10px -10px}
.bg-iOS{background-position:-10px -210px}
.bg-WebApp{background-position:-10px -310px}
.bg-Cms{background-position:-110px -110px}
h3.home-products1{text-align:center!important;font-size:2em!important;color:#eee!important;margin-bottom:25px!important;font-weight:300}
h3.home-products1:after{display:block;content:"";height:2px;width:240px;margin:16px auto 20px;position:relative;background:#77a507}
.entry-content p.home-products-cnt{margin:5px auto 10px!important;display:table;text-align:left}
.entry-content p.home-products-cnt2{margin:5px auto 30px 0 !important;font-size:16px;display:table;text-align:center;color:#eee}
.home-products-cnt{color:#ccc;text-align:center;font-weight:300;margin-left:auto;margin-right:auto}
.home-products-cnt2{color:#ccc;text-align:center;font-size:18px;font-weight:400}
.home-products-new{margin-top:0;padding-top:50px;padding-bottom:25px;margin-bottom:0;position:relative}
.home-products-new-bg{background:#1c1b1b url(/theme/images/product-bg.jpg) fixed;background-size:cover;width:100%;height:90%;z-index:-1;position:absolute;margin-top:-50px}
.new-pro-section{display:grid;grid-template-columns:1fr 1fr 1fr;grid-column-gap:30px;grid-row-gap:30px;margin-top:20px;padding:0;text-align:center}
.new-pro-section li{background:#fff;box-shadow:1px 1px 25px rgba(0,0,0,0.1);padding:5px 15px 10px;transition:all .5s ease;position:relative;list-style:none}
.new-pro-section li:hover{transition:all .7s ease;box-shadow:1px 1px 25px rgba(0,0,0,0.3)}
.new-pro-section li span{display:inline-block;transform:scale(0.8);transition:all .2s ease;position:absolute;left:0}
.new-pro-section li:hover span{transform:scale(0.9);transition:all .4s ease}
.new-pro-section li h3{text-align:left;font-size:19px!important;color:#333!important;margin-top:-10px!important;margin-bottom:10px!important;font-weight:50;padding-left:66px}
.new-pro-section li h3 span,.new-pro-section li:hover h3 span{transform:scale(1);width:100%;text-align:left!important;font-size:19px!important;font-weight:400;position:relative;color:#333}
.new-pro-section li p{text-align:justify!important;padding-top:5px}
.new-pro-section li a{text-align:left;color:#cd2424;display:block;margin-top:11px}
.new-pro-section li a:hover{color:#333}
.what-we-do-4u p{margin-bottom:1px}
.what-we-do-4u p a{padding-bottom:2px;padding-top:3px;display:inline-block}
.new-pro-section li span{display:inline-block;transform:scale(0.8);transition:all .2s ease;position:absolute;left:0}
.new-pro-section li > span:first-child{width:80px;height:80px;background:url(https://ioss.in/wp-content/uploads/2018/09/css_sprites.png)}
.bg-Taxi_Management{background-position:-110px -10px}
.new-pro-tab .resp-tabs-list{padding:0;margin:0}
.ioss-about{text-align:center;margin-bottom:40px}
.ioss-about p{max-width:1024px;margin:30px auto}
.ioss-about p span{display:inline-block;width:100%;font-size:1.1em;color:#333}
.ioss-about p span a{color:#cd2323!important;font-style:italic}
.ioss-about h2{font-weight:400;font-size:2rem;margin-bottom:40px}
.resp-tabs-container h3{font-size:1.5rem}
.service-more{padding:3px 14px;background:#cd2323;color:#eee;font-weight:400;border-radius:2px;margin-top:15px;display:table;transition:all .25s ease}
.service-more:hover{background:#222;color:#fff;transition:all .5s ease}
.newtimeline{display:grid;grid-template-columns:4fr 6fr;grid-column-gap:25px}
.time-line-bg2{margin-bottom:0!important;padding:30px 0 25px}
.brd-pro{width:340px;display:table;margin:0 auto;opacity:.2}
.banner_lft_sec p span { border-bottom: 4px #e8f9c7 solid; color: #81a725; font-weight: 600; }
@media only screen and (min-width:1440px) {
.caption-container .getstarted-form a{margin-top:0}
}
#timeline{width:730px;height:auto;overflow:hidden;margin:20px auto;position:relative;}
#dates{height:60px;overflow:hidden;padding-left:5px}
#dates li{list-style:none;float:left;width:100px;height:50px;font-size:20px;text-align:center;}
#dates a{line-height:32px;padding-bottom:25px;color:#666}
#dates a:hover{color:#cd2524}
#dates .selected{font-size:32px;color:#cd2524}
#issues{height:auto;overflow:hidden;text-align:center}
#issues li{height:auto;list-style:none;float:left}
#issues,#issues li{width:700px;width:700px}
#issues li.selected img{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}
#issues li img{float:left;margin:10px 30px 10px 50px;background:transparent;-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);zoom:1;-webkit-transition:all 2s ease-in-out;transition:all 2s ease-in-out;-webkit-transform:scale(0.7,0.7);transform:scale(0.7,0.7)}
#issues li h1{color:#fc0;font-size:48px;margin:20px 0;text-shadow:#000 1px 1px 2px}
#issues li h4{color:#fc0;text-align:center;display:none}
.entry-content #issues li h3{color:#ccc;text-align:center;font-size:1.5em;font-weight:300;margin-top:20px!important;margin-bottom:15px!important}
#issues li p{font-size:14px;font-weight:500;color:#555;text-align:center;padding:1px 50px}
#grad_left,#grad_right{width:100px;height:auto;position:absolute;top:0}
#next{right:0;background-image:url(https://ioss.in/wp-content/uploads/2018/09/next-prv.png)}
#prev{left:0;background-image:url(https://ioss.in/wp-content/uploads/2018/09/next-prv.png)}
#next,#prev{position:absolute;top:0;font-size:70px;top:45%;width:22px;height:38px;background-position:0 6px;background-repeat:no-repeat;text-indent:-9999px;overflow:hidden;opacity:.4;transition:all 0 ease-in-out}
#next:hover,#prev:hover{background-position:0 -76px;opacity:.9;transition:all 0 ease-in-out}
#next.disabled,#prev.disabled{opacity:.2}
#prev{-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:FlipH}
.getstarted-section{background-image:url(/theme/uploads/2022/02/product-bg.webp);background-position:center center;background-size:cover;position:relative;padding:50px 0}
.getstarted-section .container{text-align:center}
.getstarted-capt{margin-top:0;display:inline-block}
.getstarted-capt h2{color:#ffffff;font-weight:500;font-size:2.2em;margin-bottom:13px;/*text-transform:uppercase*/}
.getstarted-capt h4{color:#ffffff;font-weight:500;font-size:2.2em;margin-bottom:13px;/*text-transform:uppercase*/}
.getstarted-capt strong{color:#ffffff;font-weight:500;font-size:18px;margin-bottom:13px;/*text-transform:uppercase*/}
.getstarted-capt h3{color:#ffffff;font-weight:500;font-size:1.3em;/*text-transform:uppercase*/}
.getstarted-form{text-align:center;margin-top:40px}
.getstarted-input{display:inline-block}
.caption-container .getstarted-form input{background:#fff;border:2px solid #77a507;padding:8px 20px;height:45px;margin-right:-3px}
.caption-container .getstarted-form a{padding:3px 20px;border:2px solid #77a507;background:#77a507;color:#fff;height:45px}
.caption-container .getstarted-form a:hover{border:2px solid #00457c;background:#00457c}
.issue-tracker{background:#f6f6f6;background:-moz-linear-gradient(left,rgba(246,246,246,1) 1%,rgba(255,255,255,1) 100%);background:-webkit-linear-gradient(left,rgba(246,246,246,1) 1%,rgba(255,255,255,1) 100%);background:linear-gradient(to right,rgba(246,246,246,1) 1%,rgba(255,255,255,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6',endColorstr='#ffffff',GradientType=1);-webkit-clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);background:#f6f6f6;padding-top:70px;padding-bottom:30px;border-bottom:1px solid #eee;box-shadow:inset 0 54px 143px rgba(0,0,0,0.04);margin-top:-65px}
.issue-tracker h5{text-align:center;font-size:1.1em;margin-bottom:50px}
.issue-tracker h2{text-align:center;font-size:2rem!important;margin-top:25px!important}
.issue-tracker-container{display:grid;grid-template-columns:3fr 2fr;grid-column-gap:50px;grid-row-gap:10px}
.issue-trac h3{text-align:left;font-size:1.5em}
.issue-trac p{text-align:left}
.issue-trac{border-left:3px solid #77a507;border-left:3px solid #77a507;padding-left:13px;margin-bottom:32px;margin-top:8px}
.real-time-tracking{margin-top:0;padding-top:30px;padding-bottom:50px;background:#00457c}
.real-time-tracking-cnt{display:grid;grid-template-columns:2fr 2fr;grid-column-gap:50px;grid-row-gap:10px;align-items:center}
.real-time-cnt h2,.real-time-cnt h3,.real-time-cnt h4{color:#fff;opacity:.9;font-size:2.4rem}
.real-time-cnt p{color:#fff;opacity:.9;font-weight:300}
.desktop-monitoring-sec{padding-top:80px;padding-bottom:40px}
.why-us-cnt h2,.why-us-cnt h4,.why-us-cnt p,.why-us-cnt img{text-align:center}
.why-us-cnt h2{font-size:2.4em}
.why-us-cnt img{max-width:520px;margin:5px auto 15px;display:table}
.why-us-sec{-webkit-clip-path:polygon(30% 0%,70% 0%,100% 0,100% 93%,70% 100%,30% 100%,0 95%,0 0);clip-path:polygon(30% 0%,70% 0%,100% 0,100% 93%,70% 100%,30% 100%,0 93%,0 0);background:#eee;padding-top:40px;padding-bottom:40px;background:rgba(255,255,255,1);background:-moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(255,255,255,1)),color-stop(100%,rgba(238,238,238,1)));background:-webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);background:-o-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);background:-ms-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0)}
.why-us-cnt-more{display:table;padding:0 20px;margin:15px auto;border:2px solid #77a507;font-weight:300;font-size:1.2em;letter-spacing:.02em;color:#fff;background:#77a507;border-radius:1px}
.testimonial{text-align:center;padding-top:40px;padding-bottom:75px;margin-bottom:-40px}
.testimonial .carousel-item img{padding:1px}
.testimonial .carousel-inner{box-shadow:0 0 100px rgba(0,0,0,0.1);min-height:380px;margin-bottom:-60px;padding:30px;margin-top:0}
.testimonial .carousel-control-next,.testimonial .carousel-control-prev{color:#333}
.carousel-item img{padding-top:120px;height:auto;}
.rc-anchor-light.rc-anchor-normal{display:none!important}
.testimonial{background:#fff;background-position:center;background-repeat:no-repeat;background-size:cover}
.testimonial-content{position:relative;height:235px;background:#fff none repeat scroll 0 0;border-radius:6px;box-shadow:0 0 8px 0 rgba(0,0,0,0.1);padding:15px}
.center .testimonial-content{background-color:#488104}
.testimonial-content p{font-size:16px;text-align:left;line-height:25px}
.center .testimonial-content p{color:#fff;font-size:17px;font-weight:300}
.testimonial-content p a{color:#61ab01;font-size:2.5em;font-weight:300;line-height:0}
.center .testimonial-content p a{color:#fff}
.testimonial-author{display:flex}
.author-image{background:#FFF;width:90px;height:90px;padding:10px}
.author-image img{position:relative;display:inline-block;border:5px solid #FFF;box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;border-radius:100%;height:auto;height: 70px !important;width: 70px !important;}
.center .testimonial-content:after{content:"";position:absolute;bottom:-15px;left:50px;width:0;height:0;z-index:9;border-left:15px solid transparent;border-left:0 solid rgba(0,0,0,0);border-right:15px solid transparent;border-top:15px solid #488104}
.testimonial-author{text-align:left;padding-top:10px}
.author-details{margin-top:25px;margin-left:3px}
.testimonial-author h4{font-size:1.2em;color:#333;font-weight:500;margin-bottom:2px}
.testimonial-author h5{ font-size: 0.9em;
color: #666;
font-weight: 400;}
.testimonial-author h5 span{ font-weight: 500;
color: #444;}
.testimonial h3{font-size:2.2rem;color:#111;font-weight:500;margin-bottom:35px}
.home-document-title{padding-top: 70px; padding-bottom: 50px; background-color: #f3f4f5;}
.document-title-container {display: grid;align-items: center;}
.document-title-container img{box-shadow: 0px 0px 17px rgba(0,0,0,0.2);}
@media(min-width:1025px) {
.document-title-container img{ width: 610px!important;
padding: 5px 5px 0px 5px;
background: #fff;
margin-bottom: 20px;
border-radius: 2px;}
.home-screenshots img{width: 600px!important;}
}
@media(min-width:441px) {
.document-title-container {
grid-template-columns: 10fr 8fr;
grid-gap: 50px;
align-items: left;
}
.document-title-cnt{order: 2}
}
@media only screen and (max-width:1024px) {
.carousel-caption h1{font-size:2.1em}
.carousel-caption h2,.carousel-caption h4{font-size:1.4em}
.carousel-caption h2 span,.carousel-caption h4 span{font-size:.7em;line-height:25px}
.caption-container .getstarted-form a{margin-top:0}
.testimonial-content{height:330px;}
}
@media only screen and (max-width:980px) {
.carousel-item img{padding-top:270px}
.carousel-caption div.caption-container{margin-top:-110px}
}
@media only screen and (max-width:768px) {
.home-products-new-bg{height:100%}
.testimonial-content{height:auto; min-height: 200px;}
}
@media only screen and (max-width:767px) {
.carousel-caption h1{font-size:2em}
.caption-container .getstarted-form a{margin-top:3px}
.issue-tracker-container{grid-template-columns:1fr}
.issue-tracker{-webkit-clip-path:polygon(0 0%,100% 0,100% 100%,0 100%);clip-path:polygon(0 0%,100% 0,100% 100%,0 100%);padding:15px 0}
.getstarted-section{-webkit-clip-path:polygon(0 0%,100% 0,100% 100%,0 100%);clip-path:polygon(0 0%,100% 0,100% 100%,0 100%);padding:40px 0}
.issue-trac h3{text-align:center}
p{font-size:1rem}
.issue-trac p{text-align:center}
.issue-trac{border-left:0 solid #77a507}
.issue-tracker-img{text-align:center}
.issue-tracker-img img{max-width:300px}
.real-time-tracking-cnt{grid-template-columns:1fr;text-align:center}
.real-time-tracking-cnt img{width:300px;margin:auto}
.issue-tracker-cnt{order:2}
.desktop-monitoring-sec{padding-top:40px}
}
@media only screen and (max-width:440px) {
.home-document-title {padding-top: 40px;}
.document-title-cnt{text-align: center;}
.getstarted-input{margin-bottom:10px;margin-top:20px}
.getstarted-form{margin-top:10px}
.carousel-item img{padding-top:400px}
h3.home-products1,.home-section2 h2,.real-time-cnt h2,.real-time-cnt h3,.real-time-cnt h4,.why-us-cnt h2,.h2,.home-section2 h2,.issue-tracker h2,.getstarted-capt h2{font-size:28px!important}
.carousel-caption h1{font-size:1.5em}
.carousel-caption h2,.carousel-caption h4{font-size:1.2em!important}
.carousel-caption h2 span,.carousel-caption h4 span{font-size:.8em;line-height:20px}
.issue-trac h3{font-size:1.3em}
.getstarted-form a{margin-left:0}
.caption-container .getstarted-form input{margin-right:0}
.issue-tracker h5:after{width:250px}
}
@media(min-width:769px) {
.new-pro-tab{display:grid;grid-template-columns:1fr 1fr;background:rgba(0,0,0,0.5);border-radius:2px;margin-top:25px;padding:30px}
.new-pro-tab .resp-tabs-container{padding-left:42px}
.new-pro-tab .resp-tabs-container .resp-tab-content{height:100%}
.new-pro-tab .resp-tabs-list{display:grid;grid-template-columns:1fr 1fr;text-align:center;grid-row-gap:20px;grid-column-gap:25px}
.new-pro-tab .resp-tabs-list li{display:grid;align-items:center;border:1px solid rgba(255,255,255,0.3);padding:12px 20px 9px!important}
.new-pro-tab .resp-tabs-list li h4{font-size:16px;color:#ccc;font-weight:500;line-height:25px}
.new-pro-tab li.resp-tab-active h4,.new-pro-tab li.resp-tab-item:hover h4{color:#cd2323;font-weight:500}
}
@media only screen and (max-width:1024px) {
.what-we-do-4u{padding:1px 0}
}
@media only screen and (max-width:800px) {
.new-pro-section{grid-template-columns:1fr 1fr}
.Modern-Platforms{grid-column-gap:1px}
}
@media only screen and (max-width:767px) {
.what-we-do-4u{padding:1px 0;grid-column-gap:25px}
.entry-content .what-we-do-4u img{max-width:225px}
.new-pro-section li h3,.entry-content .new-pro-section li h3 span,.entry-content .new-pro-section li p,.entry-content .new-pro-section li a{text-align:left!important}
.entry-content h3.home-products1{text-align:left!important}
.banner_lft_sec{padding-top: 30px;}
}
@media only screen and (min-width:441px) {
.entry-content .home-section1 p{padding:1px 0}
.what-we-do-4u{grid-template-columns:7fr 6fr 7fr}
.Modern-Platforms{grid-template-columns:1fr 1fr 1fr 1fr;max-width:800px;margin:30px auto 20px;text-align:center}
}
@media only screen and (max-width:441px) {
.new-pro-section{grid-template-columns:1fr}
.what-we-do-4u{grid-row-gap:30px}
.Modern-Platforms{grid-template-columns:1fr 1fr;grid-row-gap:10px;margin-top:35px}
.new-pro-section li span{position:relative}
.new-pro-section li h3{padding-left:0}
.new-pro-section li h3,.entry-content .new-pro-section li h3 span,.entry-content .new-pro-section li p,.entry-content .new-pro-section li a{text-align:center!important}
.and-icon{display:none}
.new-pro-section li{padding:0 15px}
.new-pro-section li h3 span{display:inline;margin-left:5px}
h3.home-products1:after{margin-left:auto}
.entry-content p.home-products-cnt,.entry-content p.home-products-cnt2{text-align:center}
.entry-content h3.home-products1{text-align:center!important}
}
@media only screen and (max-width:440px) {
.carousel-item img{padding-top:540px}
.carousel-caption{top:32%}
.carousel-caption div.caption-container{margin-top:-150px}
}
@media(min-width:1441px) {
.testimonial{padding:70px 0 65px}
.carousel-caption{bottom:165px}
.home-download,a.home-download,.caption-container a.home-download{margin-top:30px}
}
.home-download,a.home-download,.caption-container a.home-download{background:#00457c;border:1px solid #00457c;color:#fff!important;height:auto;padding:4px 20px 3px;border-radius:30px;font-size:16px;font-weight:500}
.home-download:hover,a.home-download:hover,.caption-container a.home-download:hover{color:#333!important;background:#fff;border:1px solid #dedede}
.home-download i,a.home-download i,.caption-container a.home-download i{font-size:15px!important;color:#fff;margin-right:5px}
.home-download:hover i,a.home-download:hover i,.caption-container a.home-download:hover i{color:#00457c}
.home-time-tr-img{position: relative;}
@media only screen and (min-width:1600px) {
.home-time-tracking {
padding: 120px 0;}
.time-tracking-img {
left: -60px;
top: -130px;
height: 441px;
width: 110%;
}
.daily-routine {
padding: 80px 0;
}
.project-management-bg {
right: 1px;
top: 55px;
}
.pms-ul li {
margin-top: 0px;
font-size: 1.1rem;
}
}
@media only screen and (min-width:1024px) {
.home-cnt2 h2, .home-cnt2 h3, .home-cnt2 h4 {
max-width: 380px;
}
}
@media only screen and (min-width:1025px) {
.pm1-sec{ grid-gap: 20px;}
.pm1-cnt{box-shadow: 0 0 100px rgba(0,0,0,0.08);
padding: 23px 3px;
text-align: center;
border-radius: 100%;}
.home-app-usage {
padding: 60px 0;
}
.daily-routine {
padding: 70px 0;
}
}
@media only screen and (min-width:1600px) {
.pm1-sec{grid-gap:35px;}
.pm1-cnt{padding:40px 20px;}
.daily-routine-container img{max-width: 736px;}
}
@media only screen and (max-width:1024px) {
.home-time-tracking {
padding: 65px 0 70px;
}
.time-tracking-img {
position: absolute;
left: -210px;
bottom: 54px;
height: 328px;
width: auto;
}
.project-management-bg{ right: -320px;}
}
@media only screen and (max-width:768px) {
.time-tracking-img{position:relative;left:auto;bottom:0px;height:auto;width:100%;margin:auto;display:table; top: inherit;}
.home-time-tracking{padding:40px 0}
.home-time-tr-container{grid-template-columns:100%;grid-gap:20px;text-align:center}
.home-features{padding:30px 0}
.homef-img{transform:scale(0.5);margin:1px auto -10px}
.homef-reg{margin-top:50px}
.project-management-bg{width:80%;height:auto;position:relative;right:auto;top:auto;display:table;margin:auto}
.getstarted-capt h2,.getstarted-capt h3{text-transform:none}
h1.sliderh1{font-size:1.8em}
.home-time-tr-cnt h2,.home-time-tr-cnt h3,.home-time-tr-cnt h4,.home-sh-container h2,.home-sh-container h3,.daily-routine-container h2,.daily-routine-container h3,.daily-routine-container h4,.app-usage-container h2,.app-usage-container h3,.project-management-container h2,.project-management-container h3,.home-data-security h2,.home-data-security h3,.testimonial h3{font-size:2em}
.project-management-container{grid-template-columns:1fr}
}
@media only screen and (max-width:767px) {
.home-container2{grid-template-columns:1fr}
.home-features-container,.pm1-sec{grid-template-columns:repeat(3,1fr)}
.homef-reg .get-started-submit,.homef-reg a.get-started-submit{padding:5px 20px;
font-size:1.2em}
}
@media only screen and (max-width:440px) {
.home-container2{grid-template-columns:1fr}
.home-features-container,.pm1-sec{grid-template-columns:repeat(2,1fr)}
.home-cnt2{grid-template-columns:1fr;text-align:center}
.home-cnt2 img{width:130px;margin:auto}
.banner-getstarted{grid-template-columns:1fr; grid-gap: 10px;
/*padding-left: 10px; padding-right: 10px;*/width: 100%}
.getstarted-form input {
padding: 10px 15px 10px; width: 100%!important; }
.home-slider .get-started-submit,
.home-slider a.get-started-submit,
.home-slider input.get-started-submit,
.home-slider button.get-started-submit {
display: inline-block;
border: none;
padding: 15px 20px;
margin-left: 0px;
}
.get-started-submit, a.get-started-submit { padding: 8px 20px;}
.home-time-tr-cnt h2,.home-time-tr-cnt h3,.home-time-tr-cnt h4,.home-sh-container h2,.home-sh-container h3,.daily-routine-container h2,.daily-routine-container h3,.daily-routine-container h4,.app-usage-container h2,.app-usage-container h3,.project-management-container h2,.project-management-container h3,.home-data-security h2,.home-data-security h3,.testimonial h3{font-size:1.6em}
.time-tracking-img{height:auto;width:100%}
.home-slider{padding-top:80px;padding-bottom:30px}
.home-section2{padding:30px 0 60px}
.home-cnt2 h2,.home-cnt2 h3,.home-cnt2 h4{font-size:1.5rem}
.home-time-tracking,.home-screenshots,.daily-routine,.home-app-usage,.home-project-management{padding:40px 0}
.home-sh-container,.daily-routine-container,.app-usage-container{grid-template-columns:1fr;text-align:center}
.daily-routine-container{grid-gap: 30px;}
.daily-routine-container div:first-child{order:2}
.home-btn{font-size:1.1em}
h1.sliderh1{font-size:1.7em}
.pms-ul{padding-left:20px;width:auto;margin:auto auto 15px;display:table;text-align:left}
.home-project-management{text-align:center}
.getstarted-capt h2,.getstarted-capt h3{text-transform:none;font-weight:500}
/*.footer1 h4,.footer1 p{text-align:center}
.footer-li{display:table;margin:auto auto 10px;width:auto;text-align:center}
.footer-li li{width:auto}*/
.homef-title,.pm1-cnt h4 { font-weight: 500; }
}
/* new-banner-section */
.banner-container{ display: grid; grid-template-columns: 1fr 620px; align-items:center; grid-gap: 60px;}
.productive-time img{
width: 209px;
}
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.vert .carousel-item-next,
.vert .active.carousel-item-right {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100% 0);
}
.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
transform: translate3d(0,-100%, 0);
}
.slider1 {
text-align: left;
}
.left-text{text-align: left;}
.banner-getstarted {
margin: 0;
}
.home-slider {
padding-top: 120px;
padding-bottom: 0px;
}
.banner-background{
background-image: url(/theme/uploads/2022/02/home-page-background.webp);
background-position: center;
background-size: cover;
height: auto;
max-height: 518px;
}
.carousel-item img {
padding-top: 0px;
height:auto;
}
.sliderh4 {
margin: 10px auto 20px;
}
h1.sliderh1 span {
display: inline;
}
.getstarted-form {margin-top: 20px;}
@media only screen and (min-width: 1400px) {
.sliderh4 {margin: 16px auto 20px;}
.slider1 {margin-top: 18px;}
}
@media only screen and (max-width: 1366px) {
.banner-container{ grid-template-columns: 1fr 490px;}
h1.sliderh1 span {display: inline;font-size: 1.0em;}
.ml-0{margin-left: 0;}
.productive-time img {width: 173px;}
h1.sliderh1 {font-size: 2.4em;}
}
@media only screen and (max-width:1024px) {
.banner-container{ grid-template-columns: 1fr; grid-gap: 0px;}
.banner-img{ display: none;}
h1.sliderh1 span {display: inline-block;}
.banner-cnt{text-align: center !important;}
.banner-getstarted {margin: 0 auto;}
.slider1 {text-align: center;}
.signup-terms-link {text-align: center;}
}
@media only screen and (max-width: 768px) {
.productive-time img{
width: 170px;
}
.getstarted-form input {
padding: 10px 15px 10px;
width: 100%!important;
}
.home-slider .get-started-submit, .home-slider a.get-started-submit, .home-slider input.get-started-submit, .home-slider button.get-started-submit {
display: inline-block;
border: none;
padding: 15px 20px;
margin-left: 0;
}
.banner-getstarted {
grid-template-columns: 1fr;
grid-gap: 10px;
width: 100%;
}
}
/* new-banner-section */
/* ── newstyle-home2025.css ── */
:root {
/* ===== BRAND COLORS ===== */
--clr-primary: #81B504;
--clr-primary-2: #7EB303;
--clr-primary-rgb: 129, 181, 4;
--clr-secondary: #004073;
--clr-secondary-light: #E6ECF1;
--clr-accent: #ff4d4d;
--clr-white: #ffffff;
--clr-white-rgb: 255, 255, 255;
--clr-surface: #f9f9f9;
--clr-text: #222222;
--clr-text-grey: #555555;
--clr-text-grey-rgb: 85, 85, 85;
--clr-border: #e0e0e0;
--clr-border-2: #E2E2E2;
--clr-border-rgb: 224, 224, 224;
--clr-muted: #888888;
/* ===== GRADIENT SYSTEM ===== */
--gradient-primary: linear-gradient(134.489deg, var(--clr-primary) 0%, #94D200 100%);
--gradient-accent: linear-gradient(135deg, #ff4d4d 0%, #ff7b00 100%);
--gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
--gradient-light: linear-gradient(135deg, #f8f8f8 0%, #eaeaea 100%);
--gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
/* ===== TYPOGRAPHY ===== */
--font-primary: "Inter", sans-serif;
--font-secondary: "Inter", sans-serif;
/* --font-secondary: "Satoshi", "Inter", sans-serif; */
--font-size-h1: 3.5rem;
--font-size-h2: 2.25rem;
--font-size-h3: 1.2rem;
--font-size-h5: 1.1rem;
--font-size-body-lg: 1.25rem;
--font-size-body: 1.031rem;
--font-size-sm: 1rem;
--font-size-xsm: 0.9rem;
--line-height-h1: 4rem;
/* 50px */
--line-height-body: 1.5;
--letter-spacing-h1: 0.01rem;
--letter-spacing-body: 0.02rem;
/* ===== SPACING SYSTEM ===== */
--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 60px;
--space-xxl: 140px;
/* ===== CONTAINER WIDTHS ===== */
--container-max: 1200px;
--content-width-xl: 1000px;
--content-width: 800px;
/* ===== SHADOWS & RADIUS ===== */
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
--shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.1);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 20px;
--radius-xl: 50px;
/* ===== TRANSITIONS ===== */
--transition-base: all 0.3s ease;
--transition-fast: all 0.15s ease-in;
--tab-w: 200px;
--tab-gap: 15px;
}
#desklog-main--landing-page{
background: #F8FAF9!important;
}
.desklog-main-landing-page section {
padding: 60px 0;
}
.desklog-main-landing-page h2 {
font-size: var(--font-size-h2);
color: var(--clr-text);
font-family: var(--font-secondary);
}
.desklog-main-landing-page p {
font-size: var(--font-size-body);
color: var(--clr-text-grey);
font-family: var(--font-primary)!important;
max-width: 800px;
}
.desklog-main-landing-page .bottom-line {
width: 100%;
height: 2px;
margin: 20px 0;
border-bottom: 1px solid var(--clr-border);
}
.desklog-main-landing-page .main-header {
padding-bottom: 30px;
}
.desklog-main-landing-page .custom-container {
max-width: 1260px;
margin: 0 auto;
}
.desklog-main-landing-page .header-section h2 {
font-size: var(--font-size-h2);
color: var(--clr-text);
font-weight: 200;
white-space: normal;
}
.desklog-main-landing-page .header-section p {
font-size: var(--font-size-body);
color: var(--clr-text-grey);
max-width: var(--content-width-xl);
width: 100%;
margin: auto;
white-space: normal;
}
.desklog-main-landing-page .header-section .main-text {
color: var(--clr-primary);
font-weight: 700;
}
.desklog-main-landing-page .header-section .main-text.blue-text {
color: var(--clr-secondary);
font-weight: 700;
}
.desklog-main-landing-page .header-section .bold-text {
color: var(--clr-text);
font-weight: 700;
}
.feature-list .feature-list-col {
padding-right: 0;
}
.feature-list .feature-list-ul-blue {
list-style: none;
margin: 0 0 10px 0;
padding: 0;
}
.feature-list .feature-list-ul-blue li {
position: relative;
padding-left: 36px;
line-height: 1.6;
/* margin-bottom: 0px; */
}
.feature-list .feature-list-ul-blue li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: 24px 24px;
/* background-image: url("data:image/svg+xml;utf8,"); */
}
.feature-list .feature-list-ul-blue li p {
/* margin-bottom: 0; */
}
.feature-list .feature-list-ul-green {
list-style: none;
margin: 0 0 10px 0;
padding: 0;
}
.feature-list .feature-list-ul-green li {
position: relative;
padding-left: 36px;
line-height: 1.6;
margin-bottom: 10px;
}
.feature-list .feature-list-ul-green li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: 24px 24px;
background-image: url("data:image/svg+xml;utf8,");
}
.feature-list .feature-list-ul-green li p {
margin-bottom: 0;
}
.gradient-div {
position: relative;
overflow: hidden;
width: 100%;
max-width: 100vw;
}
.orb {
position: absolute;
width: clamp(480px, 30vw, 1500px);
height: clamp(480px, 30vw, 1500px);
background: radial-gradient(circle at 50% 50%, #e9f6d4 0%, rgba(233, 246, 212, 0.6) 40%, rgba(233, 246, 212, 0.25) 65%, rgba(233, 246, 212, 0) 95%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
border-radius: 50%;
pointer-events: none;
touch-action: none;
}
.orb.orb--set1 {
left: -3%;
top: 10%;
z-index: 0;
}
.orb.orb--set2 {
right: -10%;
bottom: -6%;
z-index: 0;
}
.orb.orb--set3 {
z-index: 0;
right: -5%;
top: 25%;
}
.orb.orb--set4 {
right: -3%;
top: 2%;
z-index: 0;
}
.orb.orb--set5 {
z-index: 0;
left: -10%;
bottom: 10%;
}
.orb.orb--set6 {
right: -10%;
bottom: 10%;
z-index: 0;
}
.orb.orb--setN1 {
width: clamp(480px, 50vw, 1500px);
height: clamp(480px, 50vw, 1500px);
left: -15%;
top: -60%;
z-index: 0;
background: radial-gradient(circle at 50% 50%, rgba(243, 248, 238, 0.51) 0%, rgb(243, 248, 238) 40%, rgba(233, 246, 212, 0.25) 65%, rgba(233, 246, 212, 0) 95%);
}
.orb.orb--setN2 {
background: radial-gradient(circle at 50% 50%, rgba(233, 246, 212, 0.6) 0%, rgba(233, 246, 212, 0.6) 40%, rgba(233, 246, 212, 0.25) 65%, rgba(233, 246, 212, 0) 95%);
width: clamp(480px, 50vw, 1500px);
height: clamp(480px, 50vw, 1500px);
right: -10%;
z-index: 0;
bottom: -50%;
}
@media (max-width: 991.98px) {
.orb {
/* width: clamp(420px, 70vw, 1200px);
height: clamp(420px, 70vw, 1200px); */
display: none;
}
.first-part {
white-space: nowrap;
font-size: 2.5rem;
}
.reveal-content {
font-weight: 800;
}
.desklog-hero-section .hero-main-heading {
font-size: 2.2rem;
margin-bottom: 15px !important;}
}
@media (max-width: 575.98px) {
.orb {
width: 70vw;
height: 70vw;
max-width: 420px;
max-height: 420px;
}
.feature-list .feature-list-ul-green li{
margin-bottom: 0!important;
}
}
/* ===============================
COMMON BASE – HOME BUTTON CUSTOM
================================== */
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: #81b740;
border-color: #81b740;
}
.home-btn-custom {
font-size: var(--font-size-body-lg);
font-weight: 400;
font-family: var(--font-secondary);
letter-spacing: 0.03em;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem!important;
gap: 0.75rem;
padding: 0.75rem 1.75rem;
border: none;
border-radius: var(--radius-md, 6px);
text-decoration: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--transition-base, all 0.3s ease);
}
/* ===============================
PRIMARY BUTTON – HOME BUTTON PRIMARY
================================== */
.home-btn-primary {
background: var(--gradient-primary, linear-gradient(134.489deg, #81B504 0%, #94D200 100%));
color: #fff;
}
.home-btn-primary:hover {
background: linear-gradient(314.489deg, #81B504 0%, #94D200 100%);
}
.home-btn-primary:active {
transform: translateY(0);
box-shadow: var(--shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.05));
}
.home-btn-primary:focus-visible {
outline: 2px solid rgba(148, 210, 0, 0.5);
outline-offset: 2px;
}
/* ===============================
SECONDARY BUTTON – HOME BUTTON SECONDARY
================================== */
.home-btn-secondary {
font-weight: 500;
color: var(--clr-primary);
background: rgba(242, 249, 227, 0.5058823529);
border: 1.8px solid var(--clr-primary);
transition: var(--transition-base, all 0.25s ease-in-out);
}
.home-btn-secondary:hover {
background: var(--gradient-primary, linear-gradient(134.489deg, #81B504 0%, #94D200 100%));
color: #fff;
border-color: transparent;
box-shadow: var(--shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.05));
}
.home-btn-secondary:active {
transform: translateY(0);
box-shadow: none;
}
.home-btn-secondary:focus-visible {
outline: 2px solid rgba(129, 181, 4, 0.4);
outline-offset: 3px;
}
.home-btn-secondary::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.15);
opacity: 0;
transition: opacity 0.4s ease;
}
.home-btn-secondary:hover::before {
opacity: 1;
}
.home-btn-secondary:hover svg {
filter: brightness(0) invert(1);
}
.btn-section {
gap: 12px;
}
.btn-section .cta-plain {
background-color: var(--clr-white);
color: var(--clr-secondary);
}
.btn-section .cta-plain.btn-secondary {
background-color: transparent;
border: solid 1px var(--clr-secondary);
color: var(--clr-secondary);
}
.btn-section .cta-outline {
background-color: var(--clr-secondary);
color: var(--clr-white);
border: 1px solid var(--clr-white);
}
.btn-section .cta-outline:hover {
background: #015394;
}
.btn-section .cta-outline .btn-svg svg {
width: 25px;
height: 25px;
}
.start-now-btn span {
display: block;
transition: transform 0.3s ease;
}
.start-now-btn::after {
content: "→";
font-weight: bold;
opacity: 0;
transform: translateX(10px);
width: 0;
transition: all 0.3s ease;
color: var(--clr-secondary);
}
.start-now-btn:hover {
border-color: var(--clr-secondary);
}
.start-now-btn:hover span {
transform: translateX(-5px);
}
.start-now-btn:hover::after {
opacity: 1;
transform: translateX(0);
}
.view-more-btn-div{
text-align: center;
margin: auto;
display: flex;
justify-content: center;
}
.view-more-btn {
width: fit-content;
margin: auto;
padding: 0.3rem 1rem !important;
font-size: 1rem !important;
border-radius: 5px !important;
}
.home-btn-secondary-reverse {
font-weight: 500;
color: #fff;
background: var(--gradient-primary, linear-gradient(134.489deg, #81B504 0%, #94D200 100%));
border: 1.8px solid transparent;
box-shadow: var(--shadow-soft, 0 4px 20px rgba(0, 0, 0, 0.05));
transition: var(--transition-base, all 0.25s ease-in-out);
position: relative;
overflow: hidden;
}
.home-btn-secondary-reverse:hover {
background: rgba(242, 249, 227, 0.5058823529);
color: var(--clr-primary);
border-color: var(--clr-primary);
box-shadow: none;
}
.home-btn-secondary-reverse:active {
transform: translateY(0);
box-shadow: none;
}
.home-btn-secondary-reverse:focus-visible {
outline: 2px solid rgba(129, 181, 4, 0.4);
outline-offset: 3px;
}
.home-btn-secondary-reverse::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.15);
opacity: 1;
transition: opacity 0.4s ease;
}
.home-btn-secondary-reverse:hover::before {
opacity: 0;
}
.home-btn-secondary-reverse svg {
filter: brightness(0) invert(1);
}
.home-btn-secondary-reverse:hover svg {
filter: none;
}
.start-btn {
font-family: inherit;
font-size: 20px;
background: #fff;
color: #004073;
padding: 0.7em 1em;
padding-left: 0.9em;
display: flex;
align-items: center;
border: none;
border-radius: 16px;
overflow: hidden;
transition: all 0.2s;
cursor: pointer;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.start-btn span {
display: block;
transition: all 0.3s ease-in-out;
white-space: nowrap;
font-weight: 500;
font-size: 1.1rem;
}
.start-btn svg {
display: block;
transform-origin: center center;
transition: transform 0.3s ease-in-out;
}
.start-btn:hover .svg-wrapper {
animation: pulse 1s ease-in-out infinite;
}
.start-btn:hover svg {
transform: translateX(2.7em) scale(1.5);
}
.start-btn:hover span {
transform: translateX(8em);
opacity: 0;
}
.start-btn:active {
transform: scale(0.95);
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.shedule-demo-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
transition: all 0.2s;
cursor: pointer;
position: relative;
padding-left: 20px;
padding-right: 20px;
}
.shedule-demo-btn svg {
display: block;
transform-origin: center center;
transition: transform 0.3s ease-in-out;
}
.btn-text {
display: block;
transition: all 0.3s ease-in-out;
white-space: nowrap;
}
.shedule-demo-btn:hover .svg-wrapper {
animation: pulse 1s ease-in-out infinite;
}
.shedule-demo-btn:hover svg {
transform: translateX(3.5em) scale(1.1);
}
.shedule-demo-btn:hover .btn-text {
transform: translateX(50px);
opacity: 0;
}
.shedule-demo-btn:active {
transform: scale(0.95);
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.start-tracking-free-btn {
position: relative;
overflow: hidden;
background-color: #ffffff;
z-index: 1;
}
.start-tracking-free-btn:hover{
background: #dbe6ef;
}
.start-tracking-free-btn::after {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 250%;
height: 100%;
background: linear-gradient(120deg, transparent 20%, rgba(0, 0, 0, 0.1) 50%, transparent 80%);
transform: skewX(-20deg);
transition: left .5s ease;
z-index: -1;
}
.start-tracking-free-btn:hover::after {
left: 150%;
transition: left 0.5s ease;
}
.view-more-link {
position: relative !important;
overflow: hidden !important;
z-index: 1;
}
.view-more-link span,
.view-more-link svg {
position: relative;
z-index: 5;
}
.view-more-link::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 79px;
height: 100%;
background: linear-gradient(to right, rgba(25, 165, 148, 0) 0%, rgb(255 255 255 / 33%) 50%, rgba(30, 196, 180, 0) 99%);
transform: translateX(-200%) skewX(-25deg);
animation: periodicShine 4s ease-in-out infinite;
pointer-events: none;
z-index: 2;
}
@keyframes periodicShine {
0% { transform: translateX(-200%) skewX(-25deg); }
80% { transform: translateX(500%) skewX(-25deg); }
100% { transform: translateX(500%) skewX(-25deg); }
}
.view-more-btn .explore-svg {
transform: rotate(-34deg);
transition: transform 0.4s
ease-in-out;
}
.view-more-btn:hover .explore-svg {
transform: rotate(0deg);
}
@media (max-width: 768px) {
.view-more-btn-div {
text-align: center;
margin: 0;
/* display: flex; */
/* justify-content: start; */
/* width: fit-content !important; */
}
.btn-section {
gap: 12px;
flex-direction: column;
width: -moz-fit-content;
width: fit-content;
align-items: center;
text-align: center;
justify-content: center;
margin: auto;
}
}
.desklog-hero-section {
background-image: repeating-linear-gradient(to right, rgba(220, 220, 220, 0) 0px, rgb(220 220 220 / 42%) 1px, rgba(0, 0, 0, 0) 1.3px, transparent 100px);
background-repeat: repeat;
background-size: 400px 100%;
}
.desklog-hero-section .hero-section {
padding: var(--space-xl) 0 var(--space-sm);
}
.desklog-hero-section .hero-main-heading {
color: var(--clr-text);
font-size: var(--font-size-h1);
font-weight: 400;
letter-spacing: var(--letter-spacing-h1);
line-height: var(--line-height-h1);
font-family: var(--font-secondary);
margin: 0 auto 2px;
}
.desklog-hero-section .hero-main-heading .first-part {
font-weight: 600;
color: var(--clr-primary);
}
/* =========================================
SHARED STYLES (Base)
========================================= */
.hero-main-heading {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
/* animation: fadeIn 1.5s forwards cubic-bezier(0.785, 0.135, 0.15, 0.86); */
}
.first-part {
white-space: nowrap;
z-index: 2;
}
.reveal-wrapper {
display: grid;
overflow: hidden;
}
.reveal-content {
min-width: max-content;
}
/* =========================================
DESKTOP ANIMATION
========================================= */
@media (min-width: 769px) {
.hero-main-heading {
margin: 0;
display: flex;
flex-direction: column;}
/* .first-part {
animation: slideUp 1.5s forwards cubic-bezier(0.785, 0.135, 0.15, 0.86);
} */
.reveal-wrapper {
grid-template-columns: 0fr;
}
.reveal-content {
padding-left: 15px;
/* transform: translateX(-100%);
animation: slideContentVertical 1.5s forwards cubic-bezier(0.785, 0.135, 0.15, 0.86); */
font-size: 3rem;
}
}
/* =========================================
MOBILE ANIMATION (Vertical Stack)
max-width: 768px
========================================= */
@media (max-width: 768px) {
.hero-main-heading {
flex-direction: column;
line-height: 0.9;
}
.reveal-wrapper {
grid-template-rows: 0fr;
grid-template-columns: 1fr;
justify-items: center;
}
.reveal-content {
padding-left: 0;
padding-top: 0;
}
}
/* =========================================
KEYFRAMES
========================================= */
@keyframes fadeIn {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideLeft {
0% {
transform: translateX(24%);
}
60% {
transform: translateX(24%);
}
100% {
transform: translateX(0%);
}
}
@keyframes openDrawerHorizontal {
0% {
grid-template-columns: 0fr;
}
60% {
grid-template-columns: 0fr;
}
100% {
grid-template-columns: 1fr;
}
}
@keyframes slideContentHorizontal {
0% {
transform: translateX(-100%);
}
60% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
/* 3. MOBILE SPECIFIC (Vertical) */
@keyframes slideUp {
0% {
transform: translateY(25%);
}
60% {
transform: translateY(25%);
}
100% {
transform: translateY(0%);
}
}
@keyframes openDrawerVertical {
0% {
grid-template-rows: 0fr;
}
60% {
grid-template-rows: 0fr;
}
100% {
grid-template-rows: 1fr;
}
}
@keyframes slideContentVertical {
0% {
transform: translateY(-100%);
}
60% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
.desklog-hero-section .hero-sub-heading {
color: var(--clr-text);
font-size: var(--font-size-sm);
font-weight: 500;
letter-spacing: 0.01rem;
display: inline-block;
line-height: 1.5;
margin-top: 1.6rem;
font-family: var(--font-secondary);
}
.desklog-hero-section .hero-p {
color: var(--clr-text-grey);
font-size: var(--font-size-body-lg);
font-weight: 400;
letter-spacing: var(--letter-spacing-body);
margin-top: 0.8rem;
max-width: var(--content-width-xl);
margin: 5px auto 25px;
line-height: var(--line-height-body);
font-family: var(--font-primary) !important;
}
.desklog-hero-section .hero-buttons {
gap: 10px;
margin: 20px auto 7px;
}
.desklog-hero-section .hero-buttons .sparkle-svg svg {
width: 30px;
height: auto;
}
.desklog-hero-section .sparkle-svg {
display: inline-block;
width: 28px;
height: 28px;
perspective: 700px;
-webkit-perspective: 700px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-origin: center center;
will-change: transform;
}
.desklog-hero-section .sparkle-svg svg {
width: 24px;
height: 24px;
display: block;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-origin: center center;
transform-style: preserve-3d;
}
.desklog-hero-section .sparkle-svg.spin-once {
animation: spin3d-z 2200ms cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}
@keyframes spin3d-z {
0% {
transform: rotateZ(0deg) rotateX(8deg) rotateY(0deg);
}
25% {
transform: rotateZ(90deg) rotateX(6deg) rotateY(25deg);
}
50% {
transform: rotateZ(180deg) rotateX(-6deg) rotateY(180deg);
}
75% {
transform: rotateZ(270deg) rotateX(6deg) rotateY(335deg);
}
100% {
transform: rotateZ(360deg) rotateX(8deg) rotateY(360deg);
}
}
.desklog-hero-section .home-btn-custom {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.1rem;
}
.desklog-hero-section .btn-text {
font-weight: 600;
line-height: 1;
display: inline-block;
}
.desklog-hero-section .hero-tag-lines p {
font-size: var(--font-size-xsm);
color: var(--clr-text-grey);
font-weight: 500;
}
.desklog-hero-section .hero-tag-lines p:not(:last-child)::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75391 0L5.87648 3.45492H9.50919L6.57026 5.59017L7.69283 9.04508L4.75391 6.90983L1.81498 9.04508L2.93755 5.59017L0 3.45492H3.63134L4.75391 0Z' fill='%2381B504'/%3E%3C/svg%3E") no-repeat center/contain;
}
.desklog-hero-section .home-feature-tabs-section::after {
position: absolute;
top: 40px;
left: 0;
right: 0;
content: "";
/* background-image: url(/theme/uploads/2026/01/banner-after-img.webp);*/
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 100%;
height: 75%;
z-index: 0;
max-width: 1190px;
margin: auto;
border: 1px solid #b6d175;
border-image: linear-gradient(to bottom, #b6d175, transparent) 1;
border-radius: 30px;
}
.home-feature-tabs-section{
/* overflow: hidden; */
}
object.feature-tab-pane-img-mobile {
pointer-events: none;
}
#featureTabContent {
position: relative;
transition: height 0.35s ease;
}
.desklog-hero-section .feature-tab-pane {
opacity: 0;
transition: opacity 0.35s ease;
}
.desklog-hero-section .feature-tab-pane.active.show {
opacity: 1;
}
.desklog-hero-section .home-feature-tabs {
gap: var(--tab-gap);
max-width: calc(5 * var(--tab-w) + 4 * var(--tab-gap) + 15px);
width: 100%;
margin: 0 auto;
padding: 5px;
z-index: 4;
background: #f7f9f8d9;
border: none;
border-radius: var(--radius-md);
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch!important;
touch-action: pan-x;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-left: 10px;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
-webkit-user-drag: none;
}
.desklog-hero-section .home-feature-tabs::-webkit-scrollbar {
display: none;
}
.desklog-hero-section .home-feature-tabs.dragging {
cursor: grabbing;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.desklog-hero-section .home-feature-tabs::-webkit-scrollbar {
height: 8px;
}
.desklog-hero-section .home-feature-tabs::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 4px;
}
.desklog-hero-section .home-feature-tabs .feature-btn-div {
flex: 0 0 auto;
scroll-snap-align: start;
cursor: grab;
}
.desklog-hero-section .home-feature-tabs .feature-btn-div:first-child {
margin-left: 0;
}
.desklog-hero-section .home-feature-tabs .feature-btn-div:last-child {
margin-right: 0;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link {
width: var(--tab-w);
text-align: left !important;
gap: 8px;
padding: 0.75rem;
color: var(--clr-text-grey);
background: #f7f9f8;
border: 1px solid rgb(85 85 85 / 14%);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.3s ease;
border-radius: 10px 10px 0 0;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link:hover, .desklog-hero-section .home-feature-tabs .feature-tabs-link:hover h2 {
color: var(--clr-primary);
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link.active {
color: var(--clr-primary);
background-color: #ecf4da;
border-color: #ecf4da;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link.active .feature-btn-svg svg{
transform: scale(1.3);
transform-origin: center;
transition: transform 0.3s ease;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link.active h2 {
color: #75a501;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link:focus-visible {
outline: 2px solid rgba(var(--clr-primary-rgb), 0.5);
outline-offset: 2px;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link .feature-btn-svg {
width: 19px;
height: 19px;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link h2 {
font-size: 1rem;
font-family: var(--font-secondary);
line-height: 1.2;
color: var(--clr-text-grey);
font-weight: 400;
}
@keyframes fillProgress {
from {
width: 0%;
}
to {
width: 100%;
}
}
.desklog-hero-section .feature-tabs-link {
position: relative;
}
.desklog-hero-section .feature-tabs-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background-color: #81b504;
width: 0%;
}
/* .desklog-hero-section .feature-tabs-link.active::after {
animation: fillProgress 3s linear forwards;
}
*/
.desklog-hero-section .home-feature-tabs.paused .feature-tabs-link.active::after {
animation-play-state: paused;
}
.desklog-hero-section .home-feature-tabs.is-dragging {
scroll-behavior: auto !important;
cursor: grabbing;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.desklog-hero-section .feature-tab-content {
max-width: 1200px;
width: 100%;
/* background: url("/theme/uploads/2025/11/feature-tab-content_vector-line.webp") no-repeat center; */
background-size: contain;
background-position: top center;
z-index: 2;
}
/* .desklog-hero-section .feature-tab-content::before {
position: absolute;
width: 350px;
height: 350px;
content: "";
background-size: contain;
top: 0;
transform: translate(-50%, 20%);
left: 0;
background-repeat: no-repeat;
background-image: url(/theme/uploads/2025/11/concentric-circle1.png);
}
.desklog-hero-section .feature-tab-content::after {
position: absolute;
width: 250px;
height: 250px;
content: "";
background-size: contain;
top: 20%;
right: 0%;
transform: translate(40%, 0%);
background-image: url(/theme/uploads/2025/11/concentric-circle2.png);
} */
.desklog-hero-section .feature-tab-content .feature-tab-pane-img {
z-index: 2;
margin-top:-20px;
}
.desklog-hero-section .feature-tab-content .feature-tab-pane-content {
max-width: var(--content-width);
}
.desklog-hero-section .feature-tab-content .feature-tab-pane-content h3 {
font-weight: 700;
font-size: 1.5rem;
}
.feature-tab-pane-content p{
line-height: 1.4;
}
.feature-tabs-link {
position: relative;
}
.feature-tabs-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background-color: #81b504;
width: 0%;
transition: width 0s;
}
.feature-tabs-link.active::after {
width: 100%;
transition: width 2s linear;
}
.home-feature-tabs {
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.home-feature-tabs.grabbing {
cursor: grabbing;
}
/*
.desklog-hero-section .home-btn-custom:after {
content: "";
position: absolute;
top: 0;
left: -200px;
width: 200px;
height: 100%;
z-index: 9;
background: -webkit-linear-gradient( to right, rgba(25, 165, 148, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(30, 196, 180, 0) 99% );
background: linear-gradient(to right, rgba(25, 165, 148, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(30, 196, 180, 0) 99%);
-webkit-background-size: 200% 100%;
background-size: 200% 100%;
animation: slide-light 2.3s infinite;
-webkit-animation: slide-light 2.3s infinite;
} */
@keyframes slide-light {
0% {
left: -200px;
/* Start off-screen */
opacity: 0;
}
20% {
opacity: 0.5;
}
80% {
left: 100%;
/* Move completely across the button */
opacity: 0;
}
100% {
left: 100%;
/* End off-screen */
opacity: 0;
}
}
@-webkit-keyframes slide-light {
0% {
left: -200px;
/* Start off-screen */
opacity: 0;
}
20% {
opacity: 0.5;
}
80% {
left: 100%;
/* Move completely across the button */
opacity: 0;
}
100% {
left: 100%;
/* End off-screen */
opacity: 0;
}
}
/* =========================================
MOBILE / TABLET OPTIMIZATIONS
========================================= */
@media screen and (max-width: 991px) {
.feature-tab-content {
min-height: 300px;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.feature-tab-content img,
.feature-tab-content object {
pointer-events: none;
user-drag: none;
-webkit-user-drag: none;
}
.tab-pane {
transition: opacity 0.3s ease-in-out;
}
.desklog-hero-section .hero-section {
text-align: center;
padding: 10px 10px;
padding-top: 1.7rem;
}
.desklog-hero-section .hero-main-heading {
font-size: 2.1rem;
line-height: 1.2;
margin: 0 0 15px 0;
text-align: center;
}
.desklog-hero-section .hero-sub-heading {
text-align: center;
margin-top: 25px;
}
.desklog-hero-section .hero-p {
margin: 10px 0 15px 0;
font-size: 1rem;
width: 100%;
text-align: center;
}
.desklog-hero-section .hero-buttons {
flex-wrap: wrap;
flex-direction: row;
margin: 20px 0;
}
.desklog-hero-section .home-btn-custom {
font-size: 1rem;
}
.desklog-hero-section .hero-tag-lines {
align-items: start !important;
gap: 0;
margin-bottom: 15px;
flex-wrap: wrap;
}
.desklog-hero-section .hero-tag-lines p {
display: inline-block;
text-align: left;
margin-bottom: 0;
flex: none;
}
.desklog-hero-section .home-feature-tabs {
max-width: 100%;
border-width: 1px;
padding: 5px;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link {
flex-direction: row;
}
.desklog-hero-section .feature-tab-pane-img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link h2 {
text-align: left;
}
.desklog-hero-section .hero-tag-lines p:not(:last-child)::after {
content: none;
}
.desklog-hero-section .hero-tag-lines p::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75391 0L5.87648 3.45492H9.50919L6.57026 5.59017L7.69283 9.04508L4.75391 6.90983L1.81498 9.04508L2.93755 5.59017L0 3.45492H3.63134L4.75391 0Z' fill='%2381B504'/%3E%3C/svg%3E") no-repeat center/contain;
}
.desklog-hero-section .feature-tab-pane-content {
text-align: center;
padding: 0 10px;
padding-top: 0 !important;
}
}
.desklog-ratings-awards-section {
z-index: 0;
margin-top: -55px;
}
.desklog-ratings-awards-section::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 99vw;
height: 160px;
transform: translate(-50%, -50%);
background: linear-gradient(180deg, #eaf5cf 0%, #edf7d8 55%, #f4fae8 100%);
opacity: 1;
z-index: -1;
pointer-events: none;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div {
overflow: hidden;
z-index: 1;
gap: 12px;
max-width: var(--content-width, 1100px);
margin: 10px auto;
height: 250px;
padding: 22px 28px;
background: var(--clr-primary, #76b81b);
border-radius: var(--radius-xl, 24px);
box-shadow: 0px 4px 8.1999998093px 0px rgba(0, 0, 0, 0.14);
}
.desklog-ratings-awards-section .desklog-ratings-awards-div::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
background: url(/theme/uploads/2026/01/rating-leaf.webp) center/350px no-repeat;
filter: saturate(90%);
pointer-events: none;
z-index: -1;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .ratings-parent-div {
border: 3px solid rgb(var(--clr-border-rgb), 0.3);
padding: 5px 5px 2.5px;
border-radius: 999px;
width: 100%;
max-width: 310px!important;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .ratings-div {
z-index: 1;
gap: 10px;
margin: 0 auto;
padding: 6px 12px;
background: #fff;
max-width: 310px;
width: 100%;
border-radius: 999px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .ratings-div .ratings-div-img {
height: 28px;
max-width: 180px;
width: 100%;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .ratings-div .ratings-div-text {
color: #004073;
font-weight: 600;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .ratings-awards-tagline .h5 {
font-size: 15px;
font-weight: 400;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .logo-section {
gap: 16px;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .logo-section .logo-div-parent {
border: 3px solid rgb(var(--clr-border-rgb), 0.3);
padding: 5px 5px 2.5px;
border-radius: 22px;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .logo-section .logo-div {
width: 92px;
height: 92px;
flex: 0 0 auto;
border-radius: 22px;
background: #fff;
display: grid;
place-items: center;
padding: 10px;
box-shadow: 0px 2.4305040836px 11.4233675003px 0px rgba(0, 0, 0, 0.14);
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .logo-section .logo-div img {
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
.logo-div-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
/* The Transition: 0.5s smooth fade and scale */
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
opacity: 1;
transform: scale(1);
backface-visibility: hidden; /* Smoother rendering */
}
/* This class is added by JS to trigger the fade out */
.logo-div-img.swapping {
opacity: 0;
transform: scale(0.8); /* Shrink slightly while fading out */
}
/* =========================================
MOBILE / TABLET OPTIMIZATIONS
========================================= */
@media (max-width: 767px) {
.desklog-hero-section .feature-tab-content {
/* background: url("/theme/uploads/2025/11/feature-tab-content_vector-line-mobile.png") no-repeat center; */
background-size: contain;
background-position: top center;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div {
border-radius: 0;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div {
height: auto;
gap: 14px;
padding: 18px;
border-radius: 0;
}
.logo-section {
gap: 7px !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
.logo-section::-webkit-scrollbar {
display: none;
}
.logo-section .desklog-ratings-awards-section .desklog-ratings-awards-div .logo-section .logo-div {
width: 54px;
height: 54px;
border-radius: 18px;
}
.ratings-awards-tagline h5 {
font-size: 16px;
}
}
@media (max-width: 575.98px) {
.benefits-band .benefits-track .benefit-card .check svg {
width: 20px;
height: 20px;}
.desklog-hero-section .home-btn-custom {
font-size: 1rem;
width: 100% !important;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div {
padding: 10px;}
.desklog-hero-section .hero-p {
margin: 10px 0 15px 0 !important;
margin-bottom: 50px !important;
}
.desklog-hero-section .feature-tab-content .feature-tab-pane-img{
margin-top: 0!important;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .logo-section .logo-div {
width: 44px;
height: 44px;
border-radius: 13px;
}
.desklog-ratings-awards-section .desklog-ratings-awards-div .logo-section .logo-div-parent {
border-radius: 18px;
}
.desklog-hero-section .home-feature-tabs .feature-tabs-link {
padding: 0.75rem 0.9rem;
}
.software-features{
padding-top: 0!important;
}
.desklog-hero-section .hero-main-heading{
font-size: 1.85rem;
margin-bottom: 15px !important;
}
.reveal-content {
font-weight: 800!important;
}
.first-part {
font-size: 2rem;
}
.desklog-hero-section .hero-section{
padding: 50px 0;
padding-top: 40px;
}
.desklog-hero-section .hero-p{
margin: 10px 0 35px 0 !important;
line-height: 28px;
letter-spacing: 0.5px;
}
.desklog-hero-section .hero-buttons {
gap: 20px;
}
}
.benefits-band {
z-index: 0;
}
.benefits-band .benefits-track {
min-height: 80px;
display: flex;
align-items: center;
}
.benefits-band .benefits-track .benefit-card {
width: 45%;
color: var(--clr-text);
line-height: 1.5;
font-weight: 500;
font-size: var(--font-size-body);
padding: 14px 18px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
margin: 0 2px;
}
.benefits-band .benefits-track .benefit-card .check {
color: #1c7ed6;
}
.benefits-band .benefits-track .benefit-card .check svg {
width: 25px;
height: 25px;
padding: 3px;
}
.benefits-band .benefits-track .benefit-connector {
height: 24px;
width: 76px;
flex: 0 0 auto;
}
.benefits-band .benefits-track .benefit-connector .dot {
width: 12px;
height: 12px;
background: #e8f2ff;
border: 2px solid #1c7ed6;
border-radius: 50%;
position: relative;
z-index: 1;
}
.benefits-band .benefits-track .benefit-connector::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: 5px;
height: 5px;
background: #1c7ed6;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.benefits-band .benefits-track .benefit-connector .dash {
position: absolute;
left: 0;
right: 0;
height: 0;
border-top: 2px dashed rgba(199, 203, 206, 0.35);
z-index: 0;
}
@media (max-width: 1400px) {
.benefits-band .benefits-track .benefit-card{
font-size: 14px;
}
}
@media (max-width: 400px) {
.desklog-hero-section .home-btn-custom {
font-size: 1rem;
width: 100%!important;
}
.desklog-hero-section .hero-p {
margin: 10px 0 15px 0 !important;
}
}
/* =========================================
MOBILE / TABLET OPTIMIZATIONS
========================================= */
@media (max-width: 992px) {
.benefits-band .benefits-track .benefit-card {
width: 250px;
height: 80px;
}
.benefits-band{
padding-top:0!important;
}
.middle-connector {
display: none !important;
}
.benefits-band .benefits-track {
flex-direction: column;
gap: 17px;
margin: auto;
}
.benefits-band .benefits-track .benefit-track-sub {
justify-content: center;
display: flex;
align-items: center;
}
}
@media (max-width: 767.98px) {
.benefits-track {
padding-bottom: 8px;
}
.benefits-track::-webkit-scrollbar {
display: none;
}
.benefit-card {
font-size: 14px;
padding: 12px 16px;
}
.benefit-connector {
width: 40px!important;
}
.ratings-section::before, .ratings-section::after {
display: none;
}
}
@media (max-width: 575.98px) {
.benefits-band .benefits-track .benefit-card {
width: 250px;
height: 121px;
max-height: 100%;
font-size: 14px;
flex-direction: column;
justify-content: center;
text-align: center !important;
}
.desklog-hero-section .getstart{
width: 100%!important;
}
.desklog-hero-section .home-btn-custom {
font-size: 1rem;
width: 100%!important;
}
#desklog-sticky-stack {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
}
/* =========================================
PULSE & FLOW ANIMATIONS
========================================= */
@keyframes dotPulseEffect {
0% {
box-shadow: 0 0 0 0 rgba(28, 126, 214, 0.7);
transform: scale(1.1);
background: #e8f2ff;
}
20% {
box-shadow: 0 0 0 8px rgba(28, 126, 214, 0);
transform: scale(1.3);
background: #1c7ed6;
}
100% {
box-shadow: 0 0 0 0 rgba(28, 126, 214, 0);
transform: scale(1.1);
background: #e8f2ff;
}
}
@keyframes dashFlowEffect {
0% {
border-color: rgba(199, 203, 206, 0.35);
}
20% {
border-color: #1c7ed6;
}
100% {
border-color: rgba(199, 203, 206, 0.35);
}
}
@media (min-width: 993px) {
.benefits-band .benefits-track .benefit-connector .dot {
animation: dotPulseEffect 3s infinite ease-in-out;
}
.benefits-band .benefits-track .benefit-connector .dash {
animation: dashFlowEffect 3s infinite ease-in-out;
}
.benefits-track .benefit-track-sub:first-child .benefit-connector .dot,
.benefits-track .benefit-track-sub:first-child .benefit-connector .dash {
animation-delay: 0s;
}
.benefits-track>.benefit-connector.middle-connector .dot,
.benefits-track>.benefit-connector.middle-connector .dash {
animation-delay: 1s;
}
.benefits-track .benefit-track-sub:last-child .benefit-connector .dot,
.benefits-track .benefit-track-sub:last-child .benefit-connector .dash {
animation-delay: 2s;
}
}
/* accurate time wrapper section */
.accurate-time-wrapper-features .industry-card {
display: block;
position: relative;
border-radius: 16px;
overflow: hidden;
height: 350px;
text-decoration: none;
margin-bottom: 30px;
transition: transform 0.3s ease;
background-color: #fff;
background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0) 50%, #ffffff 100%), linear-gradient(to right, rgb(245 252 229) 1px, transparent 1px), linear-gradient(to bottom, rgb(250 250 250) 1px, transparent 1px);
background-size: cover, 30px 30px, 30px 30px;
background-repeat: no-repeat, repeat, repeat;
}
.accurate-time-wrapper-features .industry-card:hover {
transform: translateY(-5px);
}
.effortless-billing {
right: 0px;
top: 40px;
position: absolute;
}
.automated-timesheet {
right: 27px;
top: 5px;
position: absolute;
}
.accurate-time-wrapper-features .industry-card img {
width: 105%;
height: auto;
margin: auto;
/* left: -5%; */
position: absolute;
-o-object-fit: cover;
object-fit: contain;
transition: transform 0.5s ease;
}
.accurate-time-wrapper-features .industry-card:hover img {
transform: scale(1.05);
}
.accurate-time-wrapper-features .industry-card:hover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(255 255 255 / 42%) 0%, rgb(247 247 247) 50% 50%, rgb(233 247 199) 100%);
pointer-events: none;
}
/* .accurate-time-wrapper-features .industry-card:hover .accurate-time-wrapper-features-img::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 39%;
background: linear-gradient(180deg, rgb(255 255 255 / 34%) 0%, rgb(248 250 249) 50%, rgb(239 239 239 / 30%) 100%);
pointer-events: none;
z-index: 2;
} */
.accurate-time-wrapper-features .card-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 24px 12px;
z-index: 2;
color: #fff;
transform: translateY(0);
}
.accurate-time-wrapper-features-img {
width: 80%;
height: auto;
margin: auto;
position: relative;
overflow: hidden;
}
.accurate-time-wrapper-features-img img {
display: block;
width: 100%;
height: auto;
}
.accurate-time-wrapper-features .card-title {
color: #3a3a3a;
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
}
.accurate-time-wrapper-features .card-arrow {
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.accurate-time-wrapper-features .card-desc {
color: var(--clr-text-grey);
font-size: 0.95rem;
line-height: 1.5;
opacity: 0.9;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.3s ease;
opacity: 0;
}
.card-desc p {
margin-top: 1rem;
line-height: 1.5;
}
.accurate-time-wrapper-features .industry-card:hover .card-desc {
margin-bottom: 1rem;
}
@media (min-width: 992px) {
.accurate-time-wrapper-features .industry-card:hover .card-arrow {
opacity: 1;
transform: translateX(0);
}
}
.accurate-time-wrapper-features .industry-card:hover .card-desc {
max-height: 200px;
opacity: 1;
}
.accurate-time-wrapper-features .dashboard-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
height: 100%;
min-height: 400px;
border: 1px solid #eaecf0;
}
.accurate-time-wrapper-features .dashboard-img-col {
background: #f9fafb;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.accurate-time-wrapper-features .dashboard-img-col img {
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.accurate-time-wrapper-features .dashboard-content-col {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.accurate-time-wrapper-features .dashboard-title {
font-size: 1.5rem;
font-weight: 700;
color: #101828;
margin-bottom: 15px;
}
.accurate-time-wrapper-features .dashboard-desc {
color: #475467;
margin-bottom: 20px;
}
.accurate-time-wrapper-features .dashboard-list {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.accurate-time-wrapper-features .dashboard-list li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
color: #344054;
font-weight: 500;
}
.accurate-time-wrapper-features .dashboard-list li::before {
content: "•";
color: #2c5af5;
font-size: 1.5rem;
position: absolute;
left: 0;
top: -5px;
}
.accurate-time-wrapper-features .btn-link-custom {
color: #2c5af5;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: color 0.2s;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.accurate-time-wrapper-features .btn-link-custom:hover {
color: #1a3dbf;
text-decoration: none;
}
@media (min-width: 992px) {
.accurate-time-wrapper-features .dashboard-card {
flex-direction: row;
}
.accurate-time-wrapper-features .dashboard-img-col {
width: 55%;
}
.accurate-time-wrapper-features .dashboard-content-col {
width: 45%;
}
}
.card-icon {
width: 50px;
height: 45px;
background-color: #81b504;
border: 2px solid #ffffffed;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2rem;
margin-right: 15px;
box-shadow: 0px 0px 0px 6px #9ebc7961;
aspect-ratio: 1/1;
}
.accurate-time-wrapper-features-img {
width: 100%;
height: 100%;
max-height: 275px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.accurate-time-wrapper-features-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
display: block;
}
.free-time-tracking-software {
background: var(--clr-secondary-light);
overflow-y: visible;
}
.free-time-tracking-software .bottom-line {
width: 80%;
}
.free-time-tracking-software .hero-visual img {
width: -moz-fit-content;
width: fit-content;
height: auto;
max-height: 700px;
max-width: 100%;
}
.free-time-tracking-software-btn {
width: -moz-fit-content;
width: fit-content;
background-color: var(--clr-secondary);
border-color: var(--clr-secondary);
font-size: var(--font-size-body-lg);
font-weight: 400;
}
.free-time-tracking-software-btn.home-btn-custom:hover {
background-color: #005ba3;
border-color: #005ba3;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
color: #fff;
}
.free-time-tracking-software-btn.home-btn-custom {
position: relative;
overflow: hidden;
}
.free-time-tracking-software-btn.home-btn-custom::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 120%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
transition: .45s ease;
}
.free-time-tracking-software-btn.home-btn-custom:hover::after {
left: 120%;
}
/* =========================================
MOBILE / TABLET OPTIMIZATIONS
========================================= */
@media (max-width: 991.98px) {
.header-section br{
display: none;
}
.free-time-tracking-software .bottom-line {
width: 100%;
}
.free-time-tracking-software .free-time-tracking-software-row {
justify-content: center;
align-items: center;
gap: 20px;
}
.free-time-tracking-software .feature-list .feature-list-col {
padding-right: 15px;
}
.free-time-tracking-software .free-time-tracking-software-row {
position: relative;
}
.free-time-tracking-software .left-section {
position: absolute;
width: 175px;
right: 0;
bottom: 0;
}
}
@media (max-width: 991.98px) {
.free-time-tracking-software .left-section {
width: 210px;
right: -32px;
}
}
@media (max-width: 575.98px) {
.free-time-tracking-software .left-section {
width: 30%;
right: 0px;
bottom: -6%;
}
.wellness-module .wellness-module-img img{
transform: scale(0.9);
transform-origin: center;
}
}
@media (max-width: 400px) {
.free-time-tracking-software .left-section {
width: 25%;
right: 3px;
top: -4%!important;
height: fit-content;
}
}
.wellness-module .wellness-module-img img.position-absolute {
width: 100%;
height: auto;
max-height: 700px;
max-width: 180px;
}
.wellness-module-img img {
max-width: 100%;
height: auto;
}
.wellness-module-img .wellness-main-img {
z-index: 1;
border-radius: 12px;
}
.badge-water,
.badge-stand {
z-index: 2;
width: clamp(110px, 22%, 160px);
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08));
will-change: transform;
}
.badge-water {
left: 0.8rem;
bottom: 0.8rem;
animation: moveY 5.5s ease-in-out infinite;
}
.badge-stand {
right: 0.8rem;
top: 0.8rem;
animation: moveX 5.5s ease-in-out infinite;
}
@keyframes moveX {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-200px);
}
100% {
transform: translateX(-100px);
}
}
@keyframes moveY {
0% {
transform: translateX(100px);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(100px);
}
}
/* =========================================
MOBILE / TABLET OPTIMIZATIONS
========================================= */
@media (max-width: 992px) {
.badge-water,
.badge-stand {
width: clamp(90px, 26vw, 140px);
}
.badge-water {
left: 0.6rem;
bottom: 0.6rem;
}
.badge-stand {
right: 0.6rem;
top: 0.6rem;
}
}
@media (max-width: 576px) {
.orb {
display: none;
}
.wellness-module-row {
flex-direction: column-reverse;
}
.badge-water,
.badge-stand {
width: clamp(84px, 40vw, 170px) !important;
}
.wellness-module-img {
margin-top: 25px;
}
@keyframes moveX {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
@keyframes moveY {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
}
/* desklog sticky stack starts */
#desklog-sticky-stack {
position: relative;
overflow: visible;
padding: 0;
margin-bottom: 50px;
padding-bottom: 5rem;
}
#desklog-sticky-stack .stack-container {
position: relative;
}
#desklog-sticky-stack .desklog-feature {
position: sticky;
top: 12vh;
min-height: 50vh;
border-radius: 12px;
padding: 25px !important;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transform-origin: 50% 0%;
margin-bottom: 0;
will-change: transform, box-shadow;
margin-bottom: 60px;
background: #fff;
border: 1px solid var(--clr-primary);
}
#desklog-sticky-stack .desklog-feature::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 30px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 100%);
}
#desklog-sticky-stack .feature-content {
background: #fff;
border-radius: 20px;
}
.feature-image-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.feature-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
display: block;
}
#desklog-sticky-stack .feature-content::-webkit-scrollbar {
display: none;
}
#desklog-sticky-stack .desklog-feature.feature1 {
margin-top: 0;
z-index: 1;
}
#desklog-sticky-stack .desklog-feature.feature2 {
top: 15vh;
z-index: 2;
}
#desklog-sticky-stack .desklog-feature.feature3 {
top: 18vh;
z-index: 3;
}
@media only screen and (min-width: 769px) {
.desklog-feature.feature2 {
grid-template-columns: none !important;
}
}
/* =========================================
MOBILE / TABLET (Reset to normal flow)
========================================= */
@media (max-width: 991.98px) {
#desklog-sticky-stack .stack-container {
height: auto !important;
padding-bottom: 50px;
}
#desklog-sticky-stack .desklog-feature {
/* position: relative !important; */
/* top: auto !important; */
min-height: auto !important;
margin-bottom: 30px !important;
/* transform: none !important; */
width: 100%;
}
#desklog-sticky-stack .feature-content {
max-height: none;
overflow: visible;
}
}
/* =========================================
MOBILE STICKY STACK (Max-Width: 768px)
========================================= */
@media (max-width: 768px) {
#desklog-sticky-stack .stack-container {
height: auto !important;
padding-bottom: 0px;
overflow: visible !important;
}
#desklog-sticky-stack .desklog-feature {
position: sticky !important;
min-height: 70vh !important;
margin-bottom: 100px !important;
margin-top: 0 !important;
width: 100%;
padding: 30px 20px;
transform: none !important;
opacity: 1 !important;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05) !important;
}
#desklog-sticky-stack .container.stack-container > :last-child {
margin-bottom: 0 !important;
}
#desklog-sticky-stack .desklog-feature.feature1,
#desklog-sticky-stack .desklog-feature.feature2,
#desklog-sticky-stack .desklog-feature.feature3 {
top: 12vh !important;
z-index: 1 !important;
}
/* #desklog-sticky-stack .feature-content {
padding-bottom: 60px;
} */
.data-security-module {
padding-top: 0 !important;
}
}
/* =========================================
SMALL MOBILE OPTIMIZATIONS (Max-Width: 400px)
========================================= */
@media (max-width: 400px) {
#desklog-sticky-stack .desklog-feature.feature1,
#desklog-sticky-stack .desklog-feature.feature2,
#desklog-sticky-stack .desklog-feature.feature3 {
top: 10vh !important;
}
.desklog-main-landing-page .bottom-line {
margin: 6px 0 !important;
}
/*
#desklog-sticky-stack .feature-content {
padding-bottom: 90px !important;
} */
}
@media (max-width: 380px) {
#desklog-sticky-stack .desklog-feature.feature1,
#desklog-sticky-stack .desklog-feature.feature2,
#desklog-sticky-stack .desklog-feature.feature3 {
top: 5vh !important;
}
}
/* =========================================
Base Styles (Desktop Default)
========================================= */
.data-security-module-img {
position: relative;
display: block;
}
.data-security-module-img img {
width: -moz-fit-content;
width: fit-content;
height: auto;
max-height: 700px;
max-width: 100%;
}
.data-security-module-img img.data-security-main-img {
z-index: 1;
border-radius: 12px;
display: block;
}
.data-security-module-img .gdpr-img,
.data-security-module-img .security-icon,
.data-security-module-img .integration-icon {
position: absolute;
z-index: 2;
background: #fff;
padding: 10px;
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
border-radius: 10px;
will-change: transform, background-color;
filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.08));
/* Center content inside icons */
display: flex;
align-items: center;
justify-content: center;
}
.data-security-module-img .gdpr-img .gdpr {
margin: 0 0 0 8px;
font-size: clamp(12px, 1.6vw, 16px);
line-height: 1.2;
animation: svgToWhite 5s ease-in-out infinite;
}
.data-security-module-img .gdpr-img svg {
width: clamp(22px, 2.2vw, 28px);
height: auto;
animation: svgToWhite 5s ease-in-out infinite;
}
.data-security-module-img .security-icon svg {
width: clamp(44px, 6.5vw, 70px);
height: auto;
animation: svgToWhite 5s ease-in-out infinite;
}
.data-security-module-img .integration-icon svg {
width: clamp(56px, 8vw, 92px);
height: auto;
animation: svgToWhite 5s ease-in-out infinite;
}
.data-security-module-img .gdpr-img {
top: 0.9rem;
left: 0.9rem;
animation: datamoveX 6s ease-in-out infinite, bgPulse 5.2s ease-in-out infinite;
}
.data-security-module-img .security-icon {
right: 3rem;
top: 50%;
animation: datamoveXAlt 6s ease-in-out infinite, bgPulse 5.2s ease-in-out infinite;
}
.data-security-module-img .integration-icon {
left: 1rem;
bottom: 1rem;
animation: datamoveY 6s ease-in-out infinite, bgPulse 5.2s ease-in-out infinite;
}
/* @keyframes bgPulse {
0%, 100% {
background-color: #81B504;
}
50% {
background-color: #fff;
}
} */
/* @keyframes svgToWhite {
0%, 100% {
filter: brightness(0) invert(1);
}
50% {
filter: none;
}
} */
@keyframes datamoveX {
0% {
transform: translateX(-50px);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(-50px);
}
}
@keyframes datamoveXAlt {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(-200%);
}
100% {
transform: translateY(-100%);
}
}
@keyframes datamoveY {
0% {
transform: translateX(150px);
}
50% {
transform: translateX(270px);
}
100% {
transform: translateX(150px);
}
}
/* =========================================
Tablet Optimization (max-width: 992px)
========================================= */
@media (max-width: 992px) {
.data-security-module-img .gdpr-img {
top: 0.7rem;
left: 0.7rem;
}
.data-security-module-img {
margin-top: 40px;
}
.data-security-module-img .security-icon {
top: auto;
bottom: 62%;
right: 4rem;
animation: none;
animation: mobileFloat 4s ease-in-out infinite, bgPulse 5.2s ease-in-out infinite;
}
.data-security-module-img .integration-icon {
left: 9rem;
bottom: 10rem;
animation: mobileFloatReverse 4.5s ease-in-out infinite, bgPulse 5.2s ease-in-out infinite;
}
.reveal-content{
min-width:inherit
}
.first-part{
white-space: inherit;
}
}
/* =========================================
Mobile Optimization (max-width: 576px)
========================================= */
@keyframes mobileFloat {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-12px);
}
}
@keyframes mobileFloatReverse {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
}
@media (max-width: 576px) {
.header-section h2{
font-weight: 400!important;
}
.cta-btn-w{
width: 100%;
}
.cta-btn-aw{
width: 100%
}
.curved-bg .btn-section {
width: 100%;
}
.hero-text-sm{
max-width: 680px;
margin: 0 auto;
}
.home-btn-custom {
width: 100%;
}
.desklog-hero-section .feature-tab-content .feature-tab-pane-content h3 {
font-size: 1.5rem;
}
.data-security-module-img img.data-security-main-img{
transform: scale(0.9);
transform-origin: center;
}
.data-security-module-img .gdpr-img {
padding: 6px 10px;
top: 10px;
left: 10px;
animation: mobileFloat 4s ease-in-out infinite, bgPulse 5s ease-in-out infinite;
}
.data-security-module-img .gdpr-img svg {
width: 22px;
}
.data-security-module-img .gdpr-img .gdpr {
font-size: 13px;
}
.data-security-module-img .security-icon {
padding: 8px;
top: 20px;
bottom: auto;
animation: mobileFloatReverse 5s ease-in-out infinite, bgPulse 5s ease-in-out infinite;
}
.data-security-module-img .security-icon svg {
width: 45px;
}
.data-security-module-img .integration-icon {
padding: 8px;
right: 10px;
bottom: 10px;
right: auto;
animation: mobileFloat 6s ease-in-out infinite, bgPulse 5s ease-in-out infinite;
}
.data-security-module-img .integration-icon svg {
width: 55px;
}
}
.teams-fit-section {
padding: 40px 0;
}
.teams-fit-section .teams-grid {
display: flex;
flex-direction: column;
gap: 20px;
z-index: 3;
position: relative;
}
.teams-fit-section .team-card {
background: #fff;
border-radius: 16px;
padding: 20px 9px;
border: 1px solid var(--clr-border);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.teams-fit-section .team-card h6 {
margin-bottom: 2px;
font-size: var(--font-size-h5);
margin-top: 10px;
font-weight: 600;
}
.teams-fit-section .team-card p {
margin-bottom: 0;
}
.teams-fit-section .team-card--lead {
padding: 26px 28px;
text-align: left;
align-items: flex-start;
}
.teams-fit-section .team-card--image {
padding: 0;
overflow: hidden;
}
.teams-fit-section .team-card--image img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.teams-fit-section .team-icon img {
width: 100%;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.teams-fit-section .first-row,
.teams-fit-section .second-row {
display: flex;
flex-wrap: wrap;
margin: -8px;
}
.teams-fit-section .first-row > *,
.teams-fit-section .second-row > * {
margin: 8px;
flex: 0 0 100%;
max-width: 100%;
}
/* =========================================
Tablet and Mobile Optimization
========================================= */
@media (min-width: 768px) {
.teams-fit-section .grid-lead {
flex-basis: calc(100% - 20px);
max-width: calc(100% - 20px);
}
.teams-fit-section .grid-small,
.teams-fit-section .grid-growing {
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
}
.teams-fit-section .grid-agencies,
.teams-fit-section .grid-freelancers,
.teams-fit-section .grid-enterprises,
.teams-fit-section .grid-image {
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (min-width: 992px) {
.teams-fit-section .grid-lead {
flex-basis: calc(50% - 20px);
max-width: calc(50% - 20px);
justify-content: center;
}
.teams-fit-section .grid-small,
.teams-fit-section .grid-growing {
flex-basis: calc(25% - 20px);
max-width: calc(25% - 20px);
justify-content: center;
}
.teams-fit-section .grid-agencies,
.teams-fit-section .grid-freelancers,
.teams-fit-section .grid-enterprises {
flex-basis: calc(22% - 20px);
justify-content: center;
max-width: calc(22% - 20px);
}
.teams-fit-section .grid-image {
flex-basis: calc(34% - 20px);
max-width: calc(34% - 20px);
justify-content: center;
}
}
@media (max-width: 576px) {
.teams-fit-section .first-row > *,
.teams-fit-section .second-row > * {
flex: auto;
}
}
.cta-1 {
background-color: var(--clr-secondary);
border-radius: 20px;
padding: 30px;
position: relative;
overflow: hidden;
}
.cta-1 .cta-1-content {
font-weight: 300;
}
.cta-1 .cta-1-image img {
width: 100%;
height: auto;
max-width: 550px;
display: block;
}
.cta-1 .btn-section {
gap: 10px;
}
/* =========================================
Tablet and Mobile Optimization
========================================= */
@media (max-width: 991px) {
.cta-1 {
text-align: center;
}
.cta-1 .btn-section {
justify-content: center;
margin-bottom: 30px;
}
.cta-1-image {
justify-content: center !important;
}
.cta-1-image img {
max-width: 100%;
}
}
@media (max-width: 576px) {
.cta-1 .btn-section {
flex-direction: column;
width: 100%;
}
.cta-1 .btn-section button {
width: 100%;
}
}
.software-features {
background: #F8FAF9;
}
.secondary-sub-front-page.mian-featuer {
max-width: 1000px;
margin: 0 auto;
margin-top: 0.5rem;
}
.secondary-heading-front-page.mian-featuer {
font-weight: 500;
}
.time_traking_features {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 0.7rem;
grid-row-gap: 0.7rem;
}
.time_traking_features .card {
background-color: #f8faf9;}
.features-contain {
width: 100%;
height: 100%;
padding: 24px 9px 23px 32px;
position: relative;
overflow: hidden;
transition: all 250ms ease-in-out;
}
.features-contain:hover img {
transition: all 250ms ease-in-out;
scale: 0.96;
}
.features-contain:hover {
transition: all 250ms ease-in-out;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.time_traking_features h4 {
color: rgb(48, 48, 48);
font-size: 21px;
}
.time_traking_features a {
font-size: 14px;
letter-spacing: 0.5px;
color: #1a1a1a;
border-bottom: 1px #c5df88 solid;
transition: all 250ms ease-in-out;
}
.features-contain:hover a {
padding: 0 5px;
background-color: #81b504;
color: #fff;
}
.features-contain img {
max-width: 90%;
z-index: 2;
position: relative;
margin: 0 auto;
transition: all 250ms ease-in-out;
scale: 1;
margin-top: 20px;
}
.features-contain::after {
content: "";
position: absolute;
bottom: -50px;
right: -50px;
height: 80%;
width: 80%;
border-radius: 50%;
z-index: 0;
background-color: #c2edbc;
}
.card.border-0 {
min-height: 310px;
}
.card.border-0:nth-child(1) .back,
.card.border-0:nth-child(6) .back,
.card.border-0:nth-child(9) .back,
.card.border-0:nth-child(3) .back {
background-color: #f1f3ff;
}
.card.border-0:nth-child(2) .back,
.card.border-0:nth-child(7) .back,
.card.border-0:nth-child(10) .back {
background-color: #f7ffe3;
}
.card.border-0:nth-child(3) .back,
.card.border-0:nth-child(8) .back,
.card.border-0:nth-child(11) .back {
background-color: #f1fffe;
}
.card.border-0:nth-child(5) .back,
.card.border-0:nth-child(13) .back {
background-color: #f1ffef;
}
.card.border-0:nth-child(4) .back,
.card.border-0:nth-child(12) .back {
background-color: #fff7ed;
}
.card.border-0:nth-child(1) .features-contain,
.card.border-0:nth-child(6) .features-contain,
.card.border-0:nth-child(9) .features-contain,
.card.border-0:nth-child(3) .features-contain {
background-color: #f1f3ff;
}
.card.border-0:nth-child(1) .features-contain::after,
.card.border-0:nth-child(6) .features-contain::after,
.card.border-0:nth-child(9) .features-contain::after,
.card.border-0:nth-child(3) .features-contain::after {
background-color: #c4ceff;
}
.card.border-0:nth-child(2) .features-contain,
.card.border-0:nth-child(7) .features-contain,
.card.border-0:nth-child(10) .features-contain {
background-color: #f7ffe3;
}
.card.border-0:nth-child(2) .features-contain::after,
.card.border-0:nth-child(7) .features-contain::after,
.card.border-0:nth-child(10) .features-contain::after {
background-color: #c5df88;
}
.card.border-0:nth-child(3) .features-contain,
.card.border-0:nth-child(8) .features-contain,
.card.border-0:nth-child(11) .features-contain {
background-color: #f1fffe;
}
.card.border-0:nth-child(3) .features-contain::after,
.card.border-0:nth-child(8) .features-contain::after,
.card.border-0:nth-child(11) .features-contain::after {
background-color: #c0efec;
}
.card.border-0:nth-child(4) .features-contain,
.card.border-0:nth-child(12) .features-contain {
background-color: #fff7ed;
}
.card.border-0:nth-child(4) .features-contain::after,
.card.border-0:nth-child(12) .features-contain::after {
background-color: #ebd4bb;
}
.card.border-0:nth-child(5) .features-contain,
.card.border-0:nth-child(13) .features-contain {
background-color: #f1ffef;
}
.features-contain:nth-child(5) .features-contain::after,
.features-contain:nth-child(13) .features-contain::after {
background-color: #c1f5b9;
}
.content {
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.card:hover .content {
transform: rotateY(180deg);
transition: transform 0.5s;
}
.back {
color: #242424;
transform: rotateY(180deg);
/* border: solid 5px rgba(170, 182, 189, 0.0784313725); */
z-index: 8;
}
.flip_back {
padding: 12px;
}
.flip_back h6 {
color: #111111;
font-size: 22px;
margin-top: 15px;
}
.flip_back p {
color: #111111;
}
.flip_back a {
background: #81b504;
color: #fff !important;
text-decoration: none;
padding: 5px 20px;
border-radius: 2px;
font-size: 15px !important;
display: inline-block;
margin-bottom: 0.5rem;
}
.flip_back a:hover {
background-color: #6e9b05 !important;
color: #fff !important;
text-decoration: none;
}
@media (max-width: 1366px) {
.time_traking_features {
grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
}
.integration-section {
background-color: #F3F8EE;
padding: 60px 0;
overflow: hidden!important;
}
.integration-section-content{
max-width: 800px;
margin: auto;
width: 100%;
}
.integration-section p {
font-size: var(--font-size-body);
max-width: var(--content-width);
margin: 10px auto 0;
color: var(--clr-text-grey);
}
.integration-section .integration-img-section {
gap: 20px;
flex-wrap: wrap;
max-width: 800px;
/* margin: 40px auto 0; */
padding: 30px 0 0;
}
.integration-section .integration-icon {
width: 60px;
height: auto;
filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.08));
flex-shrink: 0;
}
.integration-section .arrow-icon {
display: flex;
align-items: center;
justify-content: center;
}
.integration-section .arrow-icon svg {
width: 50px;
height: auto;
display: block;
}
.icon-wrapper {
position: relative;
cursor: pointer;
z-index: 5;
transition: transform 0.2s ease;
}
.icon-wrapper:hover {
transform: scale(1.05);
z-index: 10;
}
.main-icon {
width: 65px;
height: auto;
display: block;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}
.integration-img-section {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 80px 20px;
width: 100%;
max-width: 900px;
margin: 0 auto;
}
@keyframes elasticPop {
0% {
opacity: 0;
transform: scale(0.5) translateY(20px);
}
70% {
transform: scale(1.1) translateY(-5px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/*
.integration-img-section .icon-wrapper {
opacity: 0;
} */
.integration-img-section.in-view .icon-wrapper {
animation: elasticPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.integration-img-section.in-view .icon-wrapper:nth-child(1) {
animation-delay: 0.2s;
}
.integration-img-section.in-view .icon-wrapper:nth-child(3) {
animation-delay: 0.6s;
}
.integration-img-section.in-view .icon-wrapper:nth-child(5) {
animation-delay: 1.0s;
}
.integration-img-section .icon-wrapper:hover {
transform: scale(1.15) translateY(-5px);
transition: transform 0.3s ease;
cursor: pointer;
}
.bubble-popup {
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%) translateY(10px);
width: 260px;
background: white;
padding: 15px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 64, 115, 0.15);
border: 1px solid rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.icon-wrapper:hover .bubble-popup {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.bubble-popup::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: white transparent transparent transparent;
}
.bubble-header {
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
margin-bottom: 4px;
}
.bubble-mini-logo {
width: 24px;
height: auto;
}
.bubble-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #004073;
}
.bubble-text {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #555;
text-align: left;
}
.arrow-container {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
}
.arrow-svg {
width: 50px;
height: auto;
}
@media (max-width: 768px) {
.integration-section {
flex-direction: column;
gap: 10px;
padding: 40px 20px!important;
}
.faq-section {
padding: 40px 0px!important;}
.main-icon {
width: 50px;}
.bubble-popup {
transform: scale(0.9);
}
.arrow-svg {
width: 25px;
height: auto;
}
.bubble-popup {
width: 130px;
padding: 8px;
bottom: 140%;
border-radius: 8px;
}
.bubble-header {
gap: 5px;
padding-bottom: 4px;
margin-bottom: 2px;
}
.bubble-mini-logo { width: 15px; }
.bubble-title { font-size: 11px; }
.bubble-text { font-size: 9px; line-height: 1.2; }
.icon-wrapper:nth-of-type(1) .bubble-popup {
left: 0;
transform: translateY(10px);
}
.icon-wrapper:nth-of-type(1):hover .bubble-popup {
transform: translateY(0);
}
.icon-wrapper:nth-of-type(1) .bubble-popup::after {
left: 20px;
}
.icon-wrapper:nth-of-type(2) .bubble-popup {
}
.icon-wrapper:nth-of-type(3) .bubble-popup {
left: auto;
right: 0;
transform: translateY(10px);
}
.icon-wrapper:nth-of-type(3):hover .bubble-popup {
transform: translateY(0);
}
.icon-wrapper:nth-of-type(3) .bubble-popup::after {
left: auto;
right: 20px;
}
}
.mobile-app-section {
position: relative;
z-index: 1;
}
/* =========================================
RESPONSIVE: MOBILE & TABLET
========================================= */
@media (max-width: 768px) {
.integration-section {
padding: 40px 20px;
text-align: center;
}
.integration-section .integration-img-section {
gap: 25px;
justify-content: center;
}
.integration-section .integration-icon {
width: 55px;
}
}
.mobile-app-section {
background: #F8FAF9;
padding: 60px 0;
}
.mobile-app-section .btn-section {
gap: 15px;
flex-wrap: wrap;
}
.mobile-app-section .btn-section .store-btn {
display: flex;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-app-section .btn-section .store-btn img {
width: 160px;
height: auto;
display: block;
}
.mobile-app-section .btn-section .store-btn:hover {
transform: translateY(-3px);
opacity: 0.9;
}
.mobile-app-section .mobile-app-section-img {
position: relative;
}
.mobile-app-section .mobile-app-section-img img {
max-width: 100%;
width: auto;
height: auto;
max-height: 600px;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}
/* =========================================
RESPONSIVE: MOBILE & TABLET (< 992px)
========================================= */
@media (max-width: 991.98px) {
.mobile-app-section {
padding: 40px 0;
text-align: left;
}
.mobile-app-section .header-section {
text-align: left !important;
}
.mobile-app-section .header-section p {
text-align: left !important;
}
.mobile-app-section .feature-list {
display: flex;
flex-direction: column;
align-items: start;
}
.mobile-app-section .feature-list ul {
display: inline-block;
text-align: left;
padding-left: 0;
}
.mobile-app-section .btn-section {
justify-content: center;
flex-direction: row;
}
.mobile-app-section .mobile-app-section-img {
margin-bottom: 40px;
display: flex;
justify-content: center;
}
.mobile-app-section .mobile-app-section-img img {
max-height: 400px;
}
}
.ratings-section {
position: relative;
background: #ffffff;
}
.ratings-section .ratings-container {
padding: 150px 0;
}
.ratings-section::before {
content: "";
background-image: url("/theme/uploads/2025/11/top-curve.png");
background-position: center;
background-size: contain;
position: absolute;
background-repeat: no-repeat;
width: 100%;
height: auto;
top: -400px;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.ratings-section::after {
content: "";
background-image: url("/theme/uploads/2025/11/bottom-curve.png");
background-position: center;
background-size: contain;
position: absolute;
background-repeat: no-repeat;
width: 100%;
height: auto;
top: 0;
left: 0;
right: 0;
bottom: -400px;
z-index: 0;
}
.ratings-section .rating-img {
width: 200px;
height: auto;
padding: 0 20px;
}
.ratings-section .rating-img:not(:last-child) {
border-right: 1px solid rgba(var(--clr-border-rgb), 0.5);
}
/* =========================================
RESPONSIVE: MOBILE & TABLET (< 992px)
========================================= */
@media (max-width: 1200px) {
.ratings-section .ratings-container {
padding: 128px 0;
}
.ratings-section::before {
top: -425px;
}
.ratings-section::after {
bottom: -425px;
}
}
@media (max-width: 768px) {
.ratings-section::before {
top: -490px;
}
.ratings-section::after {
bottom: -490px;
}
}
@media (max-width: 576px) {
.integration-section .arrow-icon svg{
width: 35px!important;
}
.ratings-section .rating-img:not(:last-child) {
border-right: none;
padding:0;
width: 140px;
}
.integration-section .integration-icon {
width: 45px;
}
.integration-section .integration-img-section {
gap: 10px;}
.ratings-section::after {
bottom: -335px;
}
.ratings-section::before {
top: -335px;
}
.ratings-section .ratings-container {
padding: 60px 0;
}
}
@media (max-width: 400px) {
.ratings-section::after {
display:none;
}
.ratings-section::before {
display:none;
}
.mobile-app-section .btn-section .store-btn img {
width: 150px;}
}
.home-page-testimonial-section {
margin: 0 auto;
padding: 40px 20px;
text-align: center;
background: #F8FAF9;
}
.home-page-testimonial-section h2 {
font-weight: 700;
margin-bottom: 6px;
}
.home-page-testimonial-section p.lead {
color: #5f666b;
margin-bottom: 30px;
font-size: 0.95rem;
}
.owl-item .card-pair {
display: flex;
flex-direction: column;
gap: 24px;
align-items: stretch;
}
.desklog-main-landing-page .testimonial-card {
border: 1px solid var(--clr-border);
background-color: var(--clr-white);
border-radius: 10px;
padding: 20px;
text-align: left;
box-shadow: 0 6px 18px rgba(46, 57, 80, 0.04);
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.desklog-main-landing-page .testimonial-stars {
color: var(--clr-primary);
margin-bottom: 10px;
font-size: 0.9rem;
}
.desklog-main-landing-page .testimonial-text {
font-size: .92rem;
line-height: 1.7;
color: #33393e;
margin-bottom: 10px;
max-height: 150px;
overflow: auto;
}
.desklog-main-landing-page .testimonial-text::-webkit-scrollbar {
width: 8px;
}
.desklog-main-landing-page .testimonial-text::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.desklog-main-landing-page .testimonial-text::-webkit-scrollbar-thumb {
background-color: #81b5044a;
border-radius: 10px;
border: 2px solid #f1f1f1;
}
.desklog-main-landing-page .testimonial-text::-webkit-scrollbar-thumb:hover {
background-color: #81b504;
}
.desklog-main-landing-page .testimonial-meta p {
font-size: var(--font-size-body);
color: var(--clr-text);
font-weight: 600;
margin-bottom: 0;
}
.desklog-main-landing-page .testimonial-role p {
margin-bottom: 0;
font-size: 0.8rem !important;
line-height: 1.4;
color: var(--clr-muted);
}
/* Owl nav styles */
.desklog-main-landing-page .owl-nav button {
background: transparent;
border: 1px solid #e6e9eb;
padding: 8px 12px;
border-radius: 50%;
margin: 0 8px;
}
.desklog-main-landing-page .owl-nav button:hover {
background: #fff;
}
.desklog-main-landing-page .owl-dots {
margin-top: 20px;
}
.home-testimonial-btn-section .prev-btn {
background: rgb(var(--clr-primary-rgb), 0.1);
border: 1px solid var(--clr-primary);
border-radius: 5px;
padding: 5px 10px;
}
.home-testimonial-btn-section .prev-btn .fa-chevron-left {
color: var(--clr-primary);
}
.home-testimonial-btn-section .next-btn {
background: rgb(var(--clr-primary-rgb), 0.1);
border: 1px solid var(--clr-primary);
border-radius: 5px;
padding: 5px 10px;
}
.home-testimonial-btn-section .next-btn .fa-chevron-right {
color: var(--clr-primary);
}
@media (max-width: 767.98px) {
.desklog-main-landing-page .owl-item .card-pair {
gap: 14px;
}
}
.counter-number {
font-variant-numeric: tabular-nums;
display: inline-block;
}
.home-faq-section{
background: #F8FAF9;
}
.faq-section {
z-index: 3;
position: relative;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
max-width: var(--content-width);
}
.faq-accordion .card {
border: none;
border-bottom: 1px solid var(--clr-border);
border-radius: 0;
background: transparent;
box-shadow: none;
margin-bottom: 0;
}
.faq-accordion .card-header {
background: transparent;
border-bottom: 1px solid var(--card-border-2);
padding: 14px 8px;
cursor: pointer;
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
/* all: unset; */
background: transparent;
border: teal;
padding: 0;
/* font-size: 16px !important; */
}
.faq-question h6 {
text-align: left;
margin: 0;
font-size: var(--font-size-h5);
font-weight: 500;
}
.faq-toggle {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border-radius: 50%;
transition: transform 0.25s ease;
color: #222;
border: none;
}
.faq-toggle[aria-expanded=true] svg {
transform: rotate(180deg);
}
.card-body {
padding: 16px 8px 22px;
color: #4b5256;
border-bottom: 1px solid var(--card-border);
text-align: left;
}
.faq-cta {
margin-top: 32px;
margin-bottom: 6px;
background: var(--clr-primary-2);
}
.btn-accent {
background: var(--accent);
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 6px;
font-weight: 600;
box-shadow: 0 6px 18px rgba(136, 195, 11, 0.15);
}
.btn-accent:hover {
filter: brightness(0.96);
}
@media (max-width: 576px) {
.header-section h2 {
font-size: 1.6rem!important}
.desklog-main-landing-page .container {
padding-right: 15px;
padding-left: 15px;
}
.faq-heading {
font-size: 1.25rem;
}
.ratings-section .rating-img {
width: 170px;
}
.card-body {
font-size: 0.92rem;
padding-left: 6px;
padding-right: 6px;
}
.faq-accordion .card-header {
text-align: left;
}
.faq-section .header-section {
text-align: left;
}
.home-btn-custom {
padding: 0.75rem;
white-space: normal;
}
}
.curved-bg {
position: relative;
width: 100%;
background: #004073;
overflow: hidden;
}
.curved-bg .header-section {
position: relative;
z-index: 2;
}
.curved-bg .header-section p {
max-width: var(--content-width);
}
.curved-bg .btn-section {
position: relative;
z-index: 2;
}
.curved-bg::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 100%, #004577 0%, #003d6b 70%);
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
transform: scaleY(1.5);
z-index: 1;
}
.curved-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(132.608deg, rgba(0, 64, 115, 0.1) 0%, rgba(0, 64, 115, 0.1) 20%, rgba(0, 121, 217, 0.1) 100%) left, linear-gradient(-132.608deg, rgba(0, 64, 115, 0.1) 0%, rgba(0, 64, 115, 0.1) 20%, rgba(0, 121, 217, 0.1) 100%) right;
background-size: 50% 100%;
background-repeat: no-repeat;
z-index: 2;
pointer-events: none;
}
.home-feature-tabs-section {
width: 100%;
position: relative;
}
/* -------------------------------------
Above 1440px
------------------------------------- */
@media (min-width: 1441px) {
.home-feature-tabs-section {
aspect-ratio: 163 / 100;
}
}
/* -------------------------------------
Till 992px ( ≤ 992 )
------------------------------------- */
@media (max-width: 992px) {
.home-feature-tabs-section {
aspect-ratio: 19 / 42;
overflow: hidden;
}
}
/* -------------------------------------
After 992px ( ≥ 993 )
------------------------------------- */
@media (min-width: 993px) and (max-width: 1440px) {
.home-feature-tabs-section {
aspect-ratio: 5/4;
}
}
/* -------------------------------------
After 576px ( ≥ 577 )
------------------------------------- */
@media (min-width: 577px) and (max-width: 992px) {
.home-feature-tabs-section {
aspect-ratio: 19 / 37;
}
}
/* -------------------------------------
Till 436px ( ≤ 436 )
------------------------------------- */
@media (max-width: 436px) {
.home-feature-tabs-section {
aspect-ratio: 19 / 50;
}
}
.tabs-top-move{
margin-top: 55rem !important;
}
/* ── owl.carousel.min.css ── */
/**
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:4px 5px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px;transition: all 0.5s;}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#77a507;
transition: all 0.5s;}
.owl-theme .owl-dots .owl-dot.active span{width: 22px;transition: all 0.5s;}
.owl-theme .owl-nav {
display: none;
}
.owl-dots{margin-top: 20px;}
/* ── owl.theme.default.min.css ── */
/**
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}