@charset "utf-8";
/* CSS Document */
.jira-page .banner{background-image: url("../img/jira-banner.png");height: 530px;background-repeat: no-repeat;background-size: cover;margin-top: 106px;background-position: center;}
/*.jira .banner .button {letter-spacing: 1.5px;background-size: 203% 100%;margin-right: 10px;font-size: 24px;}*/
.jira-page .banner .col-md-12{text-align: center;}
.jira-page .banner h1{margin-top: 184px;color: #007AFF;font-family: o-semibold;font-size: 90px;}
.jira-page .banner h1 span{color: #5A4D9F;}
.jira-page .banner p{font-family: o-medium;font-size: 20px;margin-bottom: 60px;}
.jira-page .banner .button{ border-radius: 100px;background: linear-gradient(to right, #5A4D9F 50%, #FFC65A 50%);background-size: 203% 100%;background-position: right bottom;transition: all .5s ease-out;padding: 15px 25px;font-family: o-bold;color: #2B2B2B;font-size: 24px;text-decoration: none;letter-spacing: 1px;font-weight: 100;border: 0px!important;margin: 0px 12px 16px 0px;}
.jira-page .banner a:hover {background-position: left bottom;color: #fff;}
/*Intro*/
.jira-page .seamless{text-align: center;}
.jira-page .seamless h2{font-family: o-bold;margin-top: 60px;font-size: 40px;margin-bottom: 40px;}
.jira-page .seamless p{font-size: 20px;margin-bottom: 40px;}
.jira-page .seamless a:hover {background-position: left bottom;color: #fff;}
.jira-page .seamless .button{ border-radius: 100px;background: linear-gradient(to right, #5A4D9F 50%, #FFC65A 50%);background-size: 203% 100%;background-position: right bottom;transition: all .5s ease-out;padding: 15px 25px;font-family: o-bold;color: #2B2B2B;font-size: 18px;text-decoration: none;letter-spacing: 1px;font-weight: 100;border: 0px!important;margin: 0px 12px 16px 0px;}
/*what-can*/
.jira-page .what-can h3{font-family: o-bold;margin-top: 80px;font-size: 40px;margin-top: 70px;text-align: center;}
.jira-page .what-can .what-grid{margin-top: 30px;}
.jira-page .what-can .col-md-5 img{width: 100%;}
.jira-page .what-can .grid-row{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;padding: 20px;border-radius: 25px;margin-bottom: 30px;}
.jira-page .what-can .grid-row h4{font-family: o-semibold;font-size: 20px;color: #2B2B2B;margin-bottom: 10px;}
.jira-page .what-can .grid-row p{font-family: l-regular;font-size: 18px;color: #2B2B2B;}
.jira-page .what-can .scroll-class{overflow-y: scroll;height: 375px;}
.jira-page .grid-row .row {display: flex;align-items: center;}
.jira-page .grid-row img {max-height: 94px;width: auto;}
/*feature-synergita*/
.jira-page .feature-synergita{margin-bottom: 30px;}
.jira-page .feature-synergita h4{font-family: o-bold;margin-top: 114px;font-size: 40px;margin-bottom: 40px;text-align: center;}
.jira-page .feature-synergita .feature-gird{border: 1px solid #2B2B2B;padding: 30px 30px 15px;border-radius: 25px;min-height: 228px;transition: transform .1s;}
.jira-page .feature-synergita .feature-gird:hover{box-shadow: rgb(90, 77, 159) 9px 14px 0px -23px, rgb(90, 77, 159) 0px 8px 10px -7px;    border: 1px solid #5A4D9F;transform: scale(1.01);}
.jira-page .feature-synergita .feature-gird:hover h5{color:#5A4D9F;}
.jira-page .feature-synergita .feature-gird .hover{display: none;}
.jira-page .feature-synergita .feature-gird:hover .first-img{display: none;}
.jira-page .feature-synergita .feature-gird:hover .hover{display: block;}
.jira-page .feature-synergita .feature-gird h5{font-family: o-semibold;font-size: 24px;margin: 13px 0px;}
.jira-page .feature-synergita .feature-gird p{font-family: l-regular;font-size: 20px;}
.jira-page .feature-synergita .col-md-4:nth-child(2) .feature-gird h5{text-wrap: balance;}
/*synergita-okr*/
.jira-page .synergita-okr h5{font-family: o-bold;margin-top: 114px;font-size: 40px;margin-bottom: 40px;text-align: center;}
.jira-page .synergita-okr p{font-size: 20px;font-family: l-regular;text-align: center;}
.jira-page .synergita-okr h6{font-family: o-semibold;color: #5A4D9F;font-size: 36px;text-align: center;margin-top: 30px;}
/*flow-chart*/
/* .jira{margin-top: 150px;} */
.jira-page .jira .container-fluid{width: 1170px;}
.jira-page .jira .flowchart{position: relative;background-color: #fff;padding-top: 210px;}
.jira-page .jira .flowchart .first-hover img{width: 192px;}
.jira-page .jira .flowchart .second-hover img{width: 199px;}
.jira-page .jira .flowchart .third-hover img{width: 197px;}
.jira-page .jira .flowchart .fourth-hover img{width: 198px;}
.jira-page .jira .flowchart .fifth-hover img{width: 199px;}
.jira-page .jira .flowchart .sixth-hover img{width: 249px;}
.jira-page .jira .flowchart .first-hover{transform: translate(0px, -3px);}
.jira-page .jira .flowchart .second-hover{position: absolute;transform: translate(174px, -203px);}
.jira-page .jira .flowchart .third-hover{position: absolute;transform: translate(356px, -103px);}
.jira-page .jira .flowchart .fourth-hover{position: absolute;transform: translate(535px, -291px);}
.jira-page .jira .flowchart .fifth-hover{position: absolute;transform: translate(716px, -193px);}
.jira-page .jira .flowchart .sixth-hover{position: absolute;transform: translate(898px, -200px);}
.jira-page .jira .flowchart .first-text{width: 148px;text-align: center;}
.jira-page .jira .flowchart .second-text{position: absolute;left: 202px;width: 142px;text-align: center;top: 357px;}
.jira-page .jira .flowchart .third-text{position: absolute;left: 389px;width: 137px;text-align: center;top: 175px;}
.jira-page .jira .flowchart .fourth-text{position: absolute;width: 137px;text-align: center;transform: translate(578px, -120px);}
.jira-page .jira .flowchart .fifth-text{position: absolute;right: 256px;width: 134px;text-align: center;bottom: 163px;}
.jira-page .jira .flowchart .sixth-text{position: absolute;right: 66px;width: 134px;text-align: center;top: 358px;}
.jira-page .jira{position: relative;margin-bottom: 200px;}
.jira-page .jira .side-border-blue{position: absolute;top: 358.7px;width: 37%;z-index: -1;}
.jira-page .jira .side-border-blue img{height: 17.6px;width: 100%;}
.jira-page .jira .side-border-yellow{position: absolute;right: 0px;top: 178.8px;width: 37%;z-index: -1;}
.jira-page .jira .side-border-yellow img{width: 100%;height: 16px;}
/* hover color changes */
.jira-page .jira .flowchart .hover-icon{display: none;}
.jira-page .jira .flowchart .hover-icon-2{display: none;}
.jira-page .jira .flowchart .hover-icon-3{display: none;}
.jira-page .jira .flowchart .hover-icon-4{display: none;}
.jira-page .jira .flowchart .hover-icon-5{display: none;}
.jira-page .jira .flowchart .hover-icon-6{display: none;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon{display: block;width: 22px !important;position: absolute;left: 62px;height: 97px;top: 0px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-2{display: block;width: 19px !important;position: absolute;left: 90px;height: 97px;top: 60px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-3{display: block;width: 19px !important;position: absolute;left: 90px;height: 93px;top: 49px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-4{display: block;width: 20px !important;position: absolute;left: 92px;height: 94px;top: 54px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-5{display: block;width: 19px !important;position: absolute;left: 92px;height: 94px;top: 36px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-6{display: block;width: 20px !important;position: absolute;left: 99px;height: 94px;top: 54px;}
.jira-page .jira .flowchart .hover-effect:hover .first-text p{color: #9682FF;}
.jira-page .jira .flowchart .hover-effect:hover .second-text p{color: #5A4D9F;}
.jira-page .jira .flowchart .hover-effect:hover .third-text p{color: #FFC65A;}
.jira-page .jira .flowchart .hover-effect:hover .fourth-text p{color: #9682FF;}
.jira-page .jira .flowchart .hover-effect:hover .fifth-text p{color: #5A4D9F;}
.jira-page .jira .flowchart .hover-effect:hover .sixth-text p{color: #FFC65A;}
.jira-page .jira .flowchart p{font-family: l-bold;}
.jira-page .jira .mobile-tab-chart{display: none;}
/* bottom-cta */
.jira-page .cta{background-color: #FFC65A;min-height: 200px;display: flex;align-items: center;}
.jira-page .cta p {font-size: 24px;}
.jira-page .cta h4 {font-family: o-bold;font-size: 40px;}
.jira-page .cta .button {color: #2b2b2b;background: linear-gradient(to right,#ffc65a 50%,#fff 50%);background-position-x: 0%;
background-position-y: 0%;background-size: auto;background-size: 202% 100%;background-position: right bottom;transition: .5s ease-out;padding: 12px 32px;border-radius: 50px;font-family: o-semibold;font-size: 24px;text-transform: capitalize;}
.jira-page .cta a{text-decoration: none;}
.jira-page .cta .col-md-4{display: flex;align-items: center;}
.jira-page .footer{margin-top: 0px;}
@media (min-width: 991px) and (max-width:1199px) {
.jira-page .banner {height: 485px;}
.jira-page .banner h1 {margin-top: 105px;}
.jira-page .jira-page .banner { height: 378px;}
.jira-page .jira-page .banner h1 {margin-top: 64px;}
.jira-page .feature-synergita .feature-gird {min-height: 317px;}
.jira-page .jira .container-fluid {width: 960px;}
.jira-page .jira .flowchart .first-hover {transform: translate(0px, -4px);}
.jira-page .jira .flowchart .first-text {width: 117px;text-align: center;}
.jira-page .jira .flowchart .first-hover img {width: 159px;}
.jira-page .jira .flowchart .second-hover {transform: translate(143px, -168px);}
.jira-page .jira .flowchart .second-hover img {width: 163px;}
.jira-page .jira .flowchart .second-text {left: 160px;width: 123px;top: 355px;}
.jira-page .jira .flowchart .third-hover {position: absolute;transform: translate(292px, -86px);}
.jira-page .jira .flowchart .third-text {left: 309px;width: 125px;top: 150px;}
.jira-page .jira .flowchart .third-hover img {width: 160px;}
.jira-page .jira .flowchart .fourth-hover {transform: translate(437px, -238px);}
.jira-page .jira .flowchart .fourth-hover img {width: 160px;}
.jira-page .jira .flowchart .fourth-text {width: 114px;transform: translate(467px, -92px);}
.jira-page .jira .flowchart .fifth-text {right: 209px;width: 116px;bottom: 150px;}
.jira-page .jira .flowchart .fifth-hover {transform: translate(583px, -159px);}
.jira-page .jira .flowchart .fifth-hover img {width: 160px;}
.jira-page .jira .flowchart .sixth-text {right: 46px;width: 134px;top: 346px;}
.jira-page .jira .flowchart .sixth-hover {transform: translate(729px, -168px);}
.jira-page .jira .flowchart .sixth-hover img {width: 207px;}
.jira-page .jira .side-border-blue {top: 335.7px;}
.jira .side-border-blue img {height: 13.6px;}
.jira-page .jira .side-border-yellow {top: 186.4px;}
.jira-page .jira .side-border-yellow img {height: 13px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon{width: 16px !important;left: 53px;height: 80px;top: 0px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-2{width: 14px !important;left: 74px;height: 75px;top: 50px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-3{width: 14px !important;left: 74px;height: 77px;top: 39px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-4{width: 15px !important;left: 75px;height: 78px;top: 43px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-5{width: 13px !important;left: 76px;height: 77px;top: 28px;}
.jira-page .jira .flowchart .hover-effect:hover .hover-icon-6{width: 16px !important;left: 83px;height: 78px;top: 45px;}
.jira-page .jira .flowchart .hover-effect:hover .first-text p{color: #9682FF;}
.jira-page .jira .flowchart .hover-effect:hover .second-text p{color: #5A4D9F;}
.jira-page .jira .flowchart .hover-effect:hover .third-text p{color: #FFC65A;}
.jira-page .jira .flowchart .hover-effect:hover .fourth-text p{color: #9682FF;}
.jira-page .jira .flowchart .hover-effect:hover .fifth-text p{color: #5A4D9F;}
.jira-page .jira .flowchart .hover-effect:hover .sixth-text p{color: #FFC65A;}
.jira-page .synergita-okr h6 {margin-bottom: 60px;}
/*cta*/
.jira-page .cta .button {padding: 12px 28px;}
.jira-page .footer{margin-top: 0px;}
} 
@media (min-width: 768px) and (max-width:990px) {
.jira-page .banner {background-position: center;height: 365px;}
.jira-page .banner h1 {margin-top: 40px;}
.jira-page .jira-page .banner {height: 301px;}
.jira-page .jira-page .banner h1 {font-size: 64px;margin-top: 50px;}
.jira-page .what-can h3 {margin-top: 64px;}
.jira-page .what-can .col-md-5{width: 100%;}
.jira-page .what-can .col-md-7{width: 100%;margin-top: 30px;}
.jira-page .feature-synergita .col-md-4{width: 100%;margin-bottom: 30px;}
.jira-page .synergita-okr h5 {margin-top: 0px;}
.jira-page .synergita-okr h6 {margin-bottom: 30px;}
.jira-page .what-can .scroll-class {overflow-y: inherit;height: auto;}
.jira-page .what-can .grid-row p {font-size: 16px;}
.jira-page .jira {margin-bottom: 40px;}
.jira-page .cta h4 {font-size: 28px;}
.jira-page .cta p {font-size: 18px;}
.jira-page .cta .button {font-size: 16px;padding: 12px 28px;}
.jira-page .feature-synergita h4 {margin-top: 50px;}
.jira-page .feature-synergita .feature-gird {min-height: 195px;}
.jira-page .jira .flowchart, .jira .side-border-blue, .jira .side-border-yellow{display: none;}
.jira-page .jira .mobile-tab-chart{display: block;}
.jira-page .jira .mobile-tab-chart img{width: 100%;}
.jira-page .footer-mobile{margin-top: 0px;}
}
@media (min-width: 320px) and (max-width:768px) {
.jira-page .banner .container, .jira-page .seamless .container, .jira-page .what-can .container, .jira-page .feature-synergita .container, .jira-page .synergita-okr .container, .jira-page .cta .container{width: 100%;max-width: 100%;padding: 0px 30px;}
.jira-page .banner {height: 289px;margin-top: 52px;background-position: center;}
.jira-page .banner h1 {font-size: 36px;margin-top: 85px;}
.jira-page .banner .button {font-size: 16px;}
.jira-page .banner p {margin-bottom: 35px;}
.jira-page .seamless h2 {font-size: 36px;}
.jira-page .seamless p {font-size: 16px;}
.jira-page .what-can h3 {margin-top: 60px;}
.jira-page .what-can .col-md-5{width: 100%;}
.jira-page .what-can .col-md-7{width: 100%;margin-top: 40px;}
.jira-page .what-can h3 {font-size: 36px;}
.jira-page .grid-row img {margin-bottom: 10px;}
.jira-page .what-can .scroll-class {overflow-y: inherit;height: auto;}
.jira-page .feature-synergita .feature-gird p {font-size: 16px;}
.jira-page .feature-synergita h4 {margin-top: 40px;font-size: 36px;}
.jira-page .feature-synergita .col-md-4{width: 100%;margin-bottom: 30px;}
.jira-page .what-can .grid-row p {font-size: 16px;}
.jira-page .synergita-okr h5 {margin-top: 0px;font-size: 36px;}
.jira-page .synergita-okr p {font-size: 16px;}
.jira-page .jira .flowchart, .jira .side-border-blue, .jira .side-border-yellow{display: none;}
.jira-page .jira .mobile-tab-chart{display: block;}
.jira-page .jira .mobile-tab-chart img{width: 100%;margin-top: 30px;}
.jira-page .jira {margin-bottom: 40px;}
.jira-page .cta h4 {font-size: 28px;}
.jira-page .cta .button {font-size: 18px;}
.jira-page .cta p {font-size: 16px;}
.jira-page .cta {padding: 20px 0px;}
.jira-page .cta .col-md-8{width: 100%;}
.jira-page .cta .col-md-4{width: 100%;}
.jira-page .jira-page .footer-mobile{margin-top: 0px;}
.jira-page .footer-mobile{margin-top: 0px;}
}