/***Authored by Deepak C***/
:root {--purple: #5A4D9F;--dark-grey: #2B2B2B;}
/*banner*/
.integration #banner{background-image: url("../img/intergration-banner.jpg");background-repeat: no-repeat; background-size: cover;min-height: 605px;}
.integration #banner .banner-content .inte-main-title{font-family: o-semibold;font-size: 16px;letter-spacing: 50%;color: #5A4D9F;margin-bottom: 40px;}
.integration #banner .banner-content{margin-top: 250px;text-align: center;}
.integration #banner .banner-content h1{font-family: o-semibold;font-size: 44px;margin-bottom: 30px;}
.integration #banner .banner-content .b-one{font-family: o-regular;font-size: 24px;}
/*collaboration*/
.integration #collaboration{background-color: #F7F5FC;padding: 60px 0px;}
.integration #collaboration .collab-grid img{margin-bottom: 20px;}
.integration #collaboration .collab-grid{background-color: #fff;padding: 30px;border-radius: 25px;text-align: center;border: 1px solid #fff;}
.integration #collaboration .collab-grid.one:hover{border: 1px solid #2684FF;box-shadow: rgba(38, 132, 255, 0.25) 0px 50px 100px -20px, rgba(38, 132, 255, 0.3) 0px 30px 60px -30px;}
.integration #collaboration .collab-grid.two:hover{border: 1px solid #454DB6;box-shadow: rgba(87, 94, 172, 0.25) 0px 50px 100px -20px, rgba(87, 94, 172, 0.3) 0px 30px 60px -30px;}
.integration #collaboration .collab-grid.three:hover{border: 1px solid #E01E5A;box-shadow: rgba(224, 30, 90, 0.25) 0px 50px 100px -20px, rgba(224, 30, 90, 0.3) 0px 30px 60px -30px;}
.integration #collaboration .col-title{text-align: center;font-family: o-semibold;font-size: 40px;margin-bottom: 60px;}
.integration #collaboration .collab-grid .col-sub-title{font-family: o-semibold;font-size: 32px;margin-bottom: 14px;}
.integration #collaboration .collab-grid.one:hover .col-sub-title{color:#2684FF;}
.integration #collaboration .collab-grid.two:hover .col-sub-title{color: #454DB6;}
.integration #collaboration .collab-grid.three:hover .col-sub-title{color: #E01E5A;}
.integration #collaboration .collab-grid p{font-family: l-regular;font-size: 20px;margin-bottom: 14px;}
.integration #collaboration .collab-grid a{font-family: o-semibold;font-size: 16px;color: #231f20;text-decoration: none;}
.integration #collaboration .collab-grid:hover a{color: #5A4D9F; font-family: o-semibold;font-size: 16px;}
/*Upcoming*/
.integration .upcoming{margin-top:100px;background-color:#F7F5FC;padding: 80px 0px;}
.integration .upcoming .up-title{font-family: o-semibold;font-size: 40px;text-align: center;margin-bottom: 60px;}
.integration .upcoming .row:nth-child(2){margin-bottom: 50px;}
.integration .upcoming .row:nth-child(2), .upcoming .row:nth-child(3){justify-content: center;display: flex;}
.integration .upcoming .up-grid{text-align: center;background-color: #fff;border-radius: 24px;min-height: 170px;}
.integration .upcoming .up-grid img{margin-top: 30px;margin-bottom: 15px;}
.integration .upcoming .up-grid:hover {border: double 1px transparent;background-image: linear-gradient(white, white), linear-gradient(180deg, #DF99F7 0%, #FFDBB0 100%);background-origin: border-box;background-clip: content-box, border-box;box-shadow: 0 3px 11px 0 #0000000F;
transform: scale(105%);}
/*Hris-integration*/
.integration #hris-integration {margin-top: 50px;}
.integration #hris-integration .hris-integration-title h2 {font-family: o-medium;font-weight: 600;font-size: 34px;margin-bottom: 62px;}
.integration #hris-integration .hris-integration-card {width: 160px;aspect-ratio: 1;border: 1px solid #F8F7FF;border-radius: 24px;}
.integration #hris-integration .hris-integration-card:hover {border: double 1px transparent;background-image: linear-gradient(white, white),
linear-gradient(180deg, #DF99F7 0%, #FFDBB0 100%);background-origin: border-box;background-clip: content-box, border-box;box-shadow: 0 3px 11px 0 #0000000F;transform: scale(105%);}
.integration #hris-integration .hris-integration-card:hover .card-body h3{color: #5A4D9F;}
.integration #hris-integration .hris-integration-card .card-body {display: flex;flex-direction: column;align-items: center;padding: 20px 15px 3px;}
.integration #hris-integration .hris-integration-card img {max-width: 81px;border: 0.1px solid #E9EAEC;border-radius: 50px;}
.integration #hris-integration .hris-integration-card h3 {font-family: l-regular;font-weight: 600;font-size: 16px;text-align: center;margin-top: 4px;}
.integration #sso-integration h2 {font-family: o-medium;font-weight: 600;font-size: 34px;color: var(--dark-grey);margin: 108px 0 56px 0;}
.integration #sso-integration .sso-integration-text {font-family: l-regular;font-size: 18px;color: #9B9B9B;margin: 48px 0 72px 0;}
.integration #sso-integration .sso-integration-wrapper {border: double 1px transparent;background-image: linear-gradient(white, white),
linear-gradient(180deg, #DF99F7 0%, #FFDBB0 100%);background-origin: border-box;background-clip: content-box, border-box;border-radius: 24px;}
.integration #sso-integration .sso-integration-inner-wrapper {padding: 6% 6%;transition: all .2s ease;}
.integration #sso-integration .sso-integration-wrapper img {filter: grayscale(100%);-webkit-filter: grayscale(100%);transition: all .2s ease;}
.integration #sso-integration .sso-integration-wrapper:hover img {filter: none;-webkit-filter: grayscale(0);transform: scale(102%);}
.integration #sso-integration .sso-integration-wrapper:hover {box-shadow: 0 3px 11px 0 #0000000F;}
/*CTA*/
.integration .cta{margin: 60px 0px;}
.integration .col-md-8{display: flex;align-items: center;}
.integration .cta .cta-content {background-color:#5A4D9F;border-radius: 24px;}
.integration .cta .cta-content p{font-family: o-regular;font-size: 28px;color: #fff;}
/*Integration cards*/
.integration #integration-cards {margin-bottom: 80px;}
.integration #integration-cards a {text-decoration: none;}
.integration #integration-cards .card {border-radius: 24px;border: 1px solid #F8F7FF;padding: 1px;transition: box-shadow .3s ease;}
.integration #integration-cards .click{cursor: pointer;}
.integration #integration-cards .card:hover {box-shadow: 0 3px 11px 0 #0000000F;border: double 1px transparent;background-image: linear-gradient(white, white),linear-gradient(180deg, #DF99F7 0%, #FFDBB0 100%);background-origin: border-box;background-clip: content-box, border-box;}
.integration #integration-cards .card .card-body {padding: calc(24px + 0.5vw);}
.integration #integration-cards .card .card-text {font-family: l-regular;font-size: 18px;color: #9B9B9B;line-height: 28.8px;}
.integration #integration-cards .card:hover .card-text {color: var(--dark-grey);}
.integration #integration-cards .card .card-title {display: flex;align-items: flex-start;}
.integration #integration-cards .card .card-title .card-title-with-button {line-height: 50.4px;word-wrap: normal;}
.integration #integration-cards .card .card-title h5 {font-family: o-medium;font-weight: 600;font-size: calc(18px + 0.2vw);color: var(--purple);}
.integration #integration-cards .card .card-title .card-btn {text-wrap: nowrap;background-color: #F8F7FF;margin-left: auto;padding: 6px 12px;border-radius: 100px;
font-family: o-medium;font-size: calc(8px + 0.5vw);color: var(--purple);transition: all .3s ease;text-transform: uppercase;}
.integration #integration-cards .card .card-title a{text-decoration: none;}
.integration #integration-cards .card:hover .card-title .card-btn {background-color: #FFC65A;color: var(--dark-grey);}
/*cta*/
.integration #cta {margin-bottom: 40px;margin-top: 40px;}
.integration #cta .container {width: 95%;max-width: 95%;}
.integration #cta center {background: url("../img/cta.png") 0 0 / cover no-repeat;padding: 100px 50px 112px;border-radius: 20px;}
.integration #cta h3 {font-family: o-semibold;font-size: 40px;margin-bottom: 30px;}
.integration #cta .button {color: #2b2b2b;background: linear-gradient(to right, #ffc65a 50%, #fff 50%);background-size: 202% 100%;background-position: right bottom;transition: 0.5s ease-out;padding: 12px 32px;text-transform: uppercase;}
.integration #cta .button:hover {background-position: left bottom;color: #2b2b2b;}
.integration #cta .button {border-radius: 50px;font-family: l-bold;text-decoration: none;font-size: 16px;}
@media screen and (min-width: 992px) {
.integration #banner .banner-title {margin: 130px 0;}
.integration #banner .banner-title h1 {font-size: 64px;}
.integration #banner .banner-text-wrapper {padding: 40px;margin-top: 75px;}
.integration #banner .banner-text-wrapper p {font-size: 24px; }
 /*Hris Integration*/
.integration #hris-integration .hris-integration-title h2 {font-size: 48px;}
/*SSO integration*/
.integration #sso-integration h2 {font-size: 48px;}
/*Integration cards*/
.integration #integration-cards .card .card-title h5 {font-size: 35px;line-height: 50.4px;}
.integration #integration-cards .card .card-title .card-btn {font-size: 16px;}
.integration #integration-cards .card .card-text {font-size: 21px;}
.integration #collaboration .collab-grid {min-height: 360px;}

}
@media (min-width:768px) and (max-width:991px)
{}
@media (min-width:320px) and (max-width:768px){
.integration #banner .container, .integration #collaboration .container, .integration #hris-integration .container, .integration .upcoming .container, .integration #sso-integration .container, .integration .cta .container, .integration #integration-cards .container{width: 100%;max-width: 100%;padding: 0px 30px;}
.integration #integration-cards .card .card-title .card-btn{margin-left: 0px;width: fit-content;}
.integration #integration-cards .card .card-title{display: block;}
.integration #sso-integration h2 {margin: 60px 0 56px 0;}
.integration #integration-cards .card .card-title h5 {font-size: 24px;line-height: 35.4px !important;}
.integration #banner .banner-text-wrapper p {width: 235px;margin: 0 auto;}
/*#hris-integration {margin-top: 540px;}*/
.integration #banner .banner-content h1, .integration #collaboration .col-title  {font-size: 36px}
.integration #banner .banner-content {margin-top: 160px;}
.integration #banner .banner-content {display: block;}
.integration #collaboration .collab-grid{margin-bottom: 40px;}
.integration .upcoming .up-grid{margin-bottom: 40px;}
.integration .upcoming .row:nth-child(2) {margin-bottom: 30px;}
.integration #cta .button{display: block;width: fit-content;}
}
@media (min-width:768px) and (max-width:991px){
.integration #integration-cards .col{width: 100%;}
.integration #integration-cards .card .card-title{display: block;}
.integration #integration-cards .card .card-title a {margin-top: -31px;float: none;}
.integration #integration-cards .card .card-title .card-title-with-button{width: auto;}
.integration #integration-cards .card .card-title .card-btn{float: right;margin-top: -46px;}
.integration #integration-cards .card .card-title a .card-btn{margin-top: -50px;}
.integration #integration-cards .card .card-title .card-btn{margin-left: 0px;}
.integration #banner .banner-content {margin-top: 220px;}
.integration #collaboration .collab-grid {min-height: 395px;}
.integration .upcoming .col-md-2{width: 25%;}
.integration .cta img{width: 100%;margin-top: 34px;}

}