*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Gotham", Arial, Helvetica, sans-serif;
}

body{
    color:#333;
}

section{
    overflow: hidden;
}

.s1{
width:1200px;
    max-width:95%;
    margin:40px auto;
    padding-top: 10vh;
    overflow: visible;
}

.s1-container{
    display:flex;
    gap:70px;
    align-items:flex-start;
}

.s1 .ab1{
    width: 300px;
    top:10px;
    transform: translate(200px);
    rotate: 180deg;
    z-index: -10;
}
.s1 .ab2{
    width: 160px;
    bottom:-20px;
    left:20px;
    z-index:-10;
    
}

.left{
    flex:1;
}

.breadcrumb{
    display:inline-block;
    background:linear-gradient(to right, rgb(79, 192, 207) , rgb(8, 235, 8) );
    color:#fff;
    padding:8px 14px;
    font-size:18px;
    margin-bottom:20px;
    font-weight: 100;
}


h1{
    color:#005d86;
    font-size:48px !important;
    margin-bottom:18px;
    font-weight: 900;
}

h2{
    color:#015c83;
    font-size:40px !important;
    line-height:40px;
    margin-bottom:-18px;
    font-weight: 900;

}

p{
    font-size:16px;
    line-height:32px;
    font-weight: 300;
    color:rgb(0, 92, 133);
    margin-bottom:22px;
}

h3{
    color:#005d86;
    font-size:38px;
    margin-top:45px;
    margin-bottom:25px;
    font-weight: 800;

}

.right{
    width:420px;
    height: 100%;
    background:#fff;
    border-top:4px solid;
    border-image: linear-gradient(to right, rgb(79, 192, 207), rgb(8, 235, 8)) 1;
    border-bottom:4px solid ;
    border-image: linear-gradient(to right, rgb(79, 192, 207), rgb(8, 235, 8)) 1;
    padding: 20px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

form{
    display:flex;
    flex-direction:column;
    gap:14px;
}

form div input{
    box-shadow: inset;
}
form input {
    box-shadow:#333;
}

.row{
    display:flex;
    gap:12px;
}

input,
textarea{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    font-size:14px;
    outline:none;
}

textarea{
    resize:vertical;
    min-height:90px;
}

input:focus,
textarea:focus{
    border-color:#00bcd4;
}

button{
    width:120px;
    background:linear-gradient(to right,#00c6ff,#2ecc71);
    color:#fff;
    border:none;
    padding:13px;
    border-radius:25px;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}





/* seciton 2  */


/* DEFAULT LINE */
.payroll-benefits-section{
    width:100%;
    background:#f9fbfd;
    padding:70px 0;
}

.payroll-benefits-section .s2-container{
   /* max-width:1000px; */
    margin:auto;
    padding:0 20px;
}

/* ===========================
   TITLE
=========================== */

.benefits-title{
    margin:0 auto 60px;
    text-align:center;
    color:#065989;
    font-size:42px;
    font-weight:800;
    line-height:1.2;
}

/* ===========================
   ACCORDION
=========================== */

.payroll-accordion{
    width:100%;
}

.payroll-accordion .accordion-item{
    border:0;
    border-bottom:2px solid #43da37;
    background:transparent;
}

.payroll-accordion .accordion-button{

    background:transparent;
    box-shadow:none;
    border:none;

    /*display:flex;
    align-items:center; */

    padding:22px 0;

    color:#065989;

}

.payroll-accordion .accordion-button:not(.collapsed){
    background:transparent;
    color:#065989;
}

.payroll-accordion .accordion-button:focus{
    box-shadow:none;
}

/* number */

.faq-no{

    width:55px;
    font-weight:700;
    color:#065989;

}

/* title */

.faq-title{

    flex:1;
    text-align:center;
    color:#065989;
    font-weight:500;
    padding-right:35px;
    font-weight: bold;

}

/* arrow */

.payroll-accordion .accordion-button::after{

    margin-left:auto;
    margin-right:0;

}

.accordion{
                padding: 0px 80px;
            }

/* ===========================
   ANSWER BOX
=========================== */

.payroll-accordion .accordion-collapse{

    padding:0 20px 20px;

}

.payroll-accordion .accordion-body{

    width:100%;
    margin:0;
    padding:30px;

    border:2px solid #43da37;

    color:#065989;
   
    box-sizing:border-box;

    background:#f8f9fb;

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

.benefits-title{

    font-size:32px;
    margin-bottom:40px;

}
.accordion{
    padding: 10px;
}

.faq-no{

    width:35px;

}

.faq-title{

    font-size:15px;
    padding-right:15px;

}

.payroll-accordion .accordion-button{

    padding:18px 0;

}

.payroll-accordion .accordion-collapse{

    padding:0 10px 15px;

}

.payroll-accordion .accordion-body{

    padding:20px;
    font-size:15px;

}

}
.bene-item {
    border-bottom: 3px solid #2ecc71;
    padding: 20px 0;
    cursor: pointer;
    
}

.bene-question{
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:15px
}



.bene-question span{
    transform: translateY(-10px);
    display: none;
}
/* REMOVE LINE WHEN OPEN */
.bene-item.active {
    border-bottom: none;
}

/* ANSWER */
.bene-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* OPEN STATE */
.bene-item.active .bene-answer {
    max-height: 300px;
}

/* CONTENT BOX */
.bene-answer p {
    margin-top: 0; 
    padding: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
     background-color:#f3f8fc;
}

.bene-answer p {
    border: 3px solid #2ecc71;
}
.bene-item.active .bene-answer {
    margin-top: -2px;
}





/*section 3*/

.s3 {
    padding: 80px 20px;
}

.s3-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}

/* LEFT CONTENT */

.s3-content{
    width: 60%;
}

.s3 h2 {
    font-size: 40px !important;
    font-weight: 900;
    color:rgb(0, 92, 133);
    margin-bottom: 20px;
    line-height: 48px;
}

.s3-content p {
    font-size: 16px;
    color: rgb(0, 92, 133);
    line-height: 32px;
    margin-bottom: 15px;
    font-weight: 300;
}

/* RIGHT IMAGE */
.s3-image {
    display: flex;
    justify-content: center;
}

.s3-image img {
    width: 100%;
    max-width: 450px;
}


/* section 4 */

.s4{
    padding:60px;
    background-color: #005c85;
    color: white;
}
.s4 h2{color: white;
font-size: 40px;
line-height: 48px;
font-weight: 700;
width: 900px;
}
.s4 p{color: white;
font-size: 16px;
line-height: 32px;
font-weight: 300;

}
.s4 h4{color:white; font-size:20px;
    line-height: 28px;
    font-weight: 700;
margin-top: 40px; margin-bottom: 20px}

.s4 li{
    margin-bottom: 8px;

    margin-left: 20px;
font-size: 16px;
line-height: 28px;
}




/* section 5 */


.s5{
    padding:50px;
    overflow:hidden;
}
.s5 h2{
    font-size: 40px !important; 
    line-height: 48px;
    color: rgb(0, 92, 133);
    font-weight: 900;
}

.s5bottom h2{
    font-size:20px;
    margin-top: 60px;
    line-height: 28px;
    font-weight: 700;
}

.s5cardcont{
    gap:15px;
    margin-top: 25px;
}

.s5cardcont h4{
    font-size:20px;
    line-height: 28px;
    font-weight: 700;
    color: #005c85;
}

.s5cardcont .imgcont{
    height:100px;
    width: 100px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background:linear-gradient(rgb(131, 200, 212) , rgb(65, 214, 65));
    flex-shrink: 0;
}
.s5cardcont .imgcont img{
    height:100%;
    width: 100%;

}

.s5cardcont div{
    width: 30vw;
    border-radius: 15px;
    border: solid 2px rgb(17, 201, 17) ;
    gap:25px;
    padding:20px
}




/* section 6 */

.s6 {
    background-color: #005c85;
    padding: 0px 5vw;
    
}

.s6img1{
    height: 20vw;
    object-fit: contain;
}
.s6img2{
    height: 30vw;
}
.s6{
    color: white;
}

.s6head1{color: white; font-size: 24px; 
line-height: 32px;
font-weight: 700;
}
.s6cont p{color:white;

}
.s6cont li{
    line-height: 24px;
    margin-bottom: 10px;
    margin-left: 16px;
}
.s6head2{
    font-size: 20px;
    line-height: 32px;
    color: white;
    font-weight: 600;
}

.s6foot{color: white; margin-top: 40px;
font-size: 18px;
line-height: 32px;
font-weight: 300;
}




/* SECTION 7 */

.s7{
    background:#f4f7f9;
    padding:60px ;
}
.s7textcont{
    padding: 0px 2vw;
}
.s7textcont p{
    font-size: 16px;
    line-height: 27px;
    font-weight: 400
}

.s7 h2{
    font-size: 40px !important;
    line-height: 48px;
    font-weight: 900;
}
.s7-desc {
    max-width:1050px;
    margin-bottom:40px;
}

/* ROW */
.s7-row {
    margin-top:40px;
    width: 65vw;
}
.s7-row div h4{
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
}

/* LIST */
.s7-list  {
    margin-top:15px;
    padding-left:20px;

}

.s7-list li {
    margin-bottom:12px;
    font-size:18px;
    color:#2c6c85;
}

/* IMAGE */
.s7-img {
    width:100%;
}

/* HEADINGS */
.s7 h4 {
    color:#005d86;
    font-size:20px;
    margin-bottom:10px;
}

.s8{
    padding: 40px 70px;
}



/* SECTION 10 */
.s10 {
    background: #eef3f6;
    padding: 80px 20px;
}

.s10-container {
    max-width: 1100px;
    margin: auto;
    text-align: center;
}

/* TITLE */
.s10 h2 {
    font-size: 40px !important;
    font-weight: 700;
    color: #0b5c7a;
    line-height: 1.3;
}

.s10 h2 span {
    display: block;
}

/* DESCRIPTION */
.s10-desc {
    max-width: 700px;
    margin: 20px auto;
    color: #444;
    line-height: 1.6;
}

.s10-sub {
    margin-top: 10px;
    color: #333;
}

/* ROW */
.s10-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 40px;
    text-align: left;
}

/* LIST */
.s10-list {
    flex: 1;
    list-style: none;
    padding: 0;
}

.s10-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 15px;
    font-size: 17px;
    color: #2c6c85;
}

/* custom bullet */
.s10-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: #0b5c7a;
    font-size: 16px;
}

/* IMAGE */
.s10-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.s10-image img {
    width: 100%;
    max-width: 380px;
}

/* BOTTOM TEXT */
.s10-bottom {
    max-width: 800px;
    margin: 50px auto 0;
    color: #444;
    line-height: 1.6;
}

.s10-bottom p {
    margin-bottom: 15px;
}

/*divider*/
.divider{
        background:linear-gradient(to right, #05c1f1 , #43da37 );
        padding:50px
}

/*section 11*/


.s11{
    padding: 80px 300px;
      background:#f4f7f9;
}



.s11imgcont{
    background-color: white;
    padding : 20px;
    border-radius: 20px;
    overflow:hidden;
    width: 60vw;
}
.s11imgcont img{
    border-radius:20px;
    object-fit: contain;
    width:100%
}

/* SECTION 12 */

.s12 {
    padding:60px 220px;
}

.s12-heading {
    max-width:700px;
    font-size:18px;
    color:#2c6c85;
    margin-bottom:30px;
}

/* FORM */
.s12-form {
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ROW */
.row {
    display:flex;
    gap:20px;
}

/* INPUTS */
.s12-form input,
.s12-form textarea {
    width:100%;
    padding:14px;
    border:1px solid #dcdcdc;
    font-size:14px;
    border-radius:6px;
    outline:none;
    transition:0.2s;
}

.s12-form input:focus,
.s12-form textarea:focus {
    border-color:#00bcd4;
}

/* BUTTON */
.btn-primary {
    width:140px;
    background:linear-gradient(to right,#00c6ff,#2ecc71);
    color:#fff;
    border:none;
    padding:12px;
    border-radius:25px;
    cursor:pointer;
    font-size:16px;
    transition:0.3s;
}

.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}


/* SECTION 13 */

.s13 {
    padding:60px 220px;
}

.s13 h2{
    font-size: 40px;
    line-height: 48px;
}

/* FAQ CONTAINER */
.faq {
    margin-top:40px;
}

/* ITEM */
.faq-item {
    border-bottom:1px solid #f8f8f8;
    margin-bottom:30px;
}

/* QUESTION */
.faq-question {
    display:flex;
    align-items:center;
    gap:15px;
    background:#f8f9fb;
    padding:18px;
    cursor:pointer;
    transition:0.3s;
}


.faq-question span {
    color:#005d86;
}

.faq-question p {
    margin:0;
    font-weight:600;
    color:#005d86;
}

/* ANSWER */
.faq-answer {
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
    background:#f3f8fc;
    padding:0 18px;
} 
.faq-answer p{
    color: rgb(0, 92, 133);
    font-size : 16px;
    line-height: 28px;
    font-weight: 300px;
}

.faq-answer ul{
    margin-top:10px;
    padding-left:20px;
}

.faq-answer ul li{
    margin-bottom:6px;
    line-height:1.5;
    color: #698f9d;
}

/* ACTIVE STATE */
.faq-item.active .faq-answer {
    max-height:200px;
    padding:18px;
    border:1px solid #b6e3c1;

}


@media (max-width:1024px){

.s1-container{
    flex-direction:column;
    gap:40px;
}

/* reduce big paddings */
.s11{
    padding:60px 80px;
}

.s12{
    padding:50px 80px;
}

.s13{
    padding:50px 80px;
}

.s5{
    padding-left:10vw;
    padding-right:10vw;
}

/* grids */
.s7-grid{
    grid-template-columns:repeat(2,1fr);
}

/* images */
.s6 img{
    width:50vw;
    opacity:0.3;
}

.s6{
        padding:40px 60px;
}

}



/*Tablets*/
@media (max-width:768px){

h1{ font-size:32px; }
h2{ font-size:24px; }
h3{ font-size:26px; }

.s2-container{
    margin:20px auto;
}
.right{
    width: 95vw;
}

.s2img{
    gap:15px;
}


/* REMOVE huge paddings */
.s11,
.s12,
.s13{
    padding:40px 20px;
}

/* section 4 fix */
.s4{
    padding:40px 20px;
}

/* section 5 fix */
.s5{
    padding:40px 20px;
}
.s5 img{
    width: 90vw;
}


/* cards stack */
.s7-grid{
    grid-template-columns:1fr;
}

/* section 8 */

.s6{
        padding:30px 40px;
}

.s6-row{
    flex-direction:column;
}

.s6b2{
    flex-direction:column-reverse;
}
/* section 9 */
.s7-row{
    flex-direction:column;
    width:100%;
    margin-bottom: 70px;
}
.s7b2{
    flex-direction: column-reverse;
}

/* section 10 */
.s10-row{
    flex-direction:column;
}

/* form rows */
.row{
    flex-direction:column;
}

/* FAQ */
.faq-question{
    flex-direction:row;
    align-items:flex-start;
}

.faq-question p{
    font-size:14px;
}

}

@media (max-width:480px){

h1{ font-size:26px; }
h2{ font-size:20px; }

.breadcrumb{
    font-size:14px;
    padding:6px 10px;
}

.features li::before{
    width: 30px;
}

.right{
    width: 95vw;
}
form input,
form textarea{
    font-size:14px;
    padding:10px;
}

button{
    width:100%;
    padding:12px;
}

.accordion{
     padding: 0px 20px;
}

.s3-container{
    flex-direction: column;
    padding:0;
   
}
.s3-content{
    width: 90%;
}
.s4 h4{ font-size:4vw;}

.s4 h2{
    width: 100%;
}


.s4 li{
font-size: 13px;
}

.s5 div{
    flex-direction: column;
}
.s5cardcont{
    flex-direction: column;
}
.s5cardcont div{
width: 90vw;
}
.s5cardcont .imgcont{
    height:80px;
    width: 80px;
}

.s6 div div {
    flex-direction: column;
}
.s7{
padding:40px 20px;

.s7textcont{
    padding: 0;
}

.s7-list li{
    font-size:14px;
}

}
.s10-row{
    padding:10px 20px
}
.s11imgcont{
    width: 80vw;
}

.s6{
        padding:10px 14px;
}

/* buttons full width */
button,
.btn-primary{
    width:100%;
}

/* tighter spacing */
p{
    font-size:14px;
}
li{
    font-size: 14px;
}

/* FAQ spacing */
.faq-question{
    padding:14px;
}

.faq-answer p{
    font-size:14px;
    line-height: 20px;
}

}




/* utility  */
.flex{
    display:flex 
}
.flex-col{
    display:flex;
    flex-direction: column;
}
.items-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}

.gap-small{
    gap:20px
}
.flex-wrap { flex-wrap:wrap; }
.flex-1 { flex:2; }
.justify-start {justify-content: start;}
.flex-between { justify-content:space-between; }
.flex-around { justify-content:space-around; }
.flex-end { justify-content:flex-end; }
.items-start { align-items:flex-start; }
.items-end { align-items:flex-end; }
.gap-3{gap:58px}

.w-full { width:100%; }
.h-full { height:100%; }
.max-w { max-width:1200px; margin:auto; }
.overflow-hidden { overflow:hidden; }
.relative { position:relative; }
.absolute { position:absolute; }

.p-1 { padding:10px; }
.p-2 { padding:20px; }
.p-3 { padding:40px; }

.pt-1 { padding-top:10px; }
.pb-1 { padding-bottom:10px; }

.m-1 { margin:10px; }
.m-2 { margin:20px; }
.mt-2 { margin-top:20px; }
.mb-2 { margin-bottom:20px; }
.mx-auto { margin-left:auto; margin-right:auto; }

.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }

.text-white { color:#fff; }
.text-primary { color:#005d86; }

.font-bold { font-weight:700; }
.font-light { font-weight:300; }

.shadow { box-shadow:0 6px 20px rgba(0,0,0,.08); }