.grecaptcha-badge {
    visibility: hidden;
}

*{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: 0px solid green;
}

.navbar-brand{
    padding-left:30px;
}

.section-padding{
    padding:100px 0;
}

.righttitle{
    animation: animate__fadeInRight 1s ease-in-out;
    visibility: hidden; 
}

.rightp{
    animation: animate__fadeInRight 2s ease-in-out;
    visibility: hidden; 
}

.lefttitle{
    animation: animate__fadeInLeft 1s ease-in-out;
    visibility: hidden; 
}

.leftp{
    animation: animate__fadeInLeft 2s ease-in-out;
    visibility: hidden; 
    display: inline-block;
}

.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
}


.navbar{
    background-image: linear-gradient(to right, #003366, #0858a8);
    padding: 10px !important;
    position:sticky;
}

.navbar-nav li{
 padding:0px 10px;
 text-align:center;
 vertical-align: middle;

}

.navbar-nav .navmain {
    color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;            
}

.navsub1{
    display: flex;
    align-items: center;
}

.navsub{
    color: white;
    font-size: 17px;
    width: 100px;
    border-radius: 8px;
    letter-spacing: 0.5px !important;
    background-color: #357a38;
    border: 1px solid  rgb(78, 69, 69);
}

.navsub:hover{
    background-color: #244626;
}

.navbar-toggler{
    outline: none !important;
}


/*------------------main panel section--------------*/

.headtitle{
    font-family:'Arial';
    font-size: 35px;
    font-weight: 600;
    margin-top: 20px;
    display:inline-block;
    letter-spacing: 0.1rem;
    color: white;
}




.sub{
color: #a6a5a5;
margin-bottom: 50px;
padding-bottom: 1000px;
}

.mainpanel{
    background-image: linear-gradient(to right, #003366, #0858a8);
    overflow: hidden;
    padding-top: 50px;
    margin-block-end: 0;
    margin-block-start: 0;
    box-sizing: inherit;
    margin-bottom: 0;
    padding-bottom: 0;

}

.mainpanel .container-fluid{
    height:100%;
    padding-top: 50px;
    text-align: center;
    margin: 0 auto;
    max-width: var(--max-width);

}

.containpanel{
    align-items: center;
    display: flex;
    height: 750px;
    justify-content: center;
    --outer-pad: 35px;
    --outer-width: 163px;
    --centerpiece-pad: 35px;
    --centerpiece-width: 400px;
    margin-top:30px;
    
   
}

.containpanel2{
    display: grid;
    height: 80%;
    grid-template-columns:3fr 1fr 3fr;
    gap: 0px;
    box-sizing: inherit;
}

.mainpanel .containpanel .containpanel2 .col1:nth-child(1){

    position: relative;
}

.mainpanel .containpanel .containpanel2 .col1:nth-child(2){
    top:-80px;
    position: relative;
}

.mainpanel .containpanel .containpanel2 .secdcol:nth-child(1){
    position: relative;
}

.mainpanel .containpanel .containpanel2 .col1 div{
    border-radius: 8px; 
    margin-block-end: 0;
    margin-block-start: 0; 
    display: grid;
    margin-bottom: 24px !important;
    place-items: center !important;
    width:1090px;  
    background-image: url("pic/photo shop6/backleft7.png");
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    height:100%;
}

.mainpanel .containpanel .containpanel2 .secdcol div{
    border-radius: 8px; 
    margin-block-end: 0;
    margin-block-start: 0; 
    display: grid;
    margin-bottom: 24px !important;
    place-items: center !important;
    width:1090px;  
    background-image: url("pic/photo shop6/backright8.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    height:100%;
}


.centerise{
position:relative;
box-sizing: inherit;
margin-block-end: 0;
margin-block-start: 0;

}

.mainpanel .containpanel .containpanel2 .centerise div{
    border-radius: 8px; 
    margin-block-end: 0;
    margin-block-start: 0; 
    display: grid;
    margin-bottom: 24px !important;
    place-items: center !important;
    width:356px !important;  
    background-image: url("pic/photo shop6/loginscreenBBS2.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height:550px;
}


@media (min-width: 1024px){
    .containpanel{
        --garden-height: 700px;
        --outer-pad: 35px;
        --outer-width: 163px;
        --centerpiece-pad: 35px;
        --centerpiece-width: 356px;
    }
}

@media (min-width: 1024px){
    #mainpanel .container{
        height:980px;
    }
}

@media (min-width: 768px){
    #mainpanel .container {
        width: calc(100% - 50px*2);
    }

}


/*---------section 2 product Pos-------*/


.section-padding-top{
    padding-top:100px;
}

.section2{
    /*padding:40vmin 0;*/
    visibility: hidden;
    animation:animate__fadeInUp 1.5s ease;
    display: block;
}

.postitle{
    font-weight: 900;
    font-size: 55px;
    background: -webkit-linear-gradient( #4682b4 , #23297a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    
}

.section2 .row .col-md-6 .pos img{
    opacity:0.8;
    width:100%;
    border-radius: 0.3em;
}

.section2 .row .col-md-6:last-child{
    position: relative;

}

.section2 .row .col-md-6 .panel{
    position: absolute;
    top: 6vmin;
    left:-18vmin;
    background:white;
    border-radius: 2em;
    text-align: left;
    padding: 10vmin 5vmin 16vmin 10vmin;
    box-shadow: 0px 25px 42px rgba(0,0,0,0.3);
    z-index: 1;
    height:430px;
    letter-spacing: 0.07rem ;
}

.section2 .row .col-md-6 .panel p{
    font-size: 18px;
    color: rgba(0,0,0,0.8);
    line-height: 1.5;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
    width:600px;
}


ul.posfunction {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    column-count: 2;
    column-gap: 1em;

}

ul.posfunction li {
    padding-left: 1.5em; /* Add some spacing for the custom icon */
    position: relative; /* Position the custom icon */
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 1.7; 
}


ul.posfunction li::before {
    content: ""; /* Replace with the Unicode of your desired icon, you can use font icons like FontAwesome */
    background-image: url("pic/icon/tick2.png");
    background-size: contain;
    display: inline-block;
    width: 1.5em; /* Adjust the icon's width */
    height: 1.5em; /* Adjust the icon's height */
    position: absolute;
    left: 0; /* Position the icon to the left of the text */
    margin-right: 0.5em;
    
}


.posindustrialtitle {
    font-size: 55px;
    font-weight: 600;
    background: -webkit-linear-gradient( #4682b4 , #23297a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
  }

.usingpos{
    background-color: white;
    border: 1px solid black;
    height:230px;
    margin:15% 10% 10% 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.7rem;
    position: relative;
}

.usingpostitle{
    color: black;
    font-size: 18px;
    font-weight: 600;
}

.industry{
    animation: animate__zoomIn 0.5s ease-in;
    visibility: hidden;
}

.industry1{
    animation: animate__zoomIn 0.5s ease-in;
    visibility: hidden;
}

/*---------section 3 Customer Royalty programme-------*/

.loyaltitle {
    font-size: 48px !important;
    font-weight: 900;
    background: -webkit-linear-gradient( #4682b4 , #23297a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 20px;
}

.loyalsubtitle{
    font-size: 1.15rem;
    font-weight: 200;
}

.loyalty{
    background-image: url('pic/loyal.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 653px;
    border-radius: 10px;
}


.loyalty_contain{
    margin-top: 100px;
    width: 80%;;
    margin-left: 20px;
    
}

ul.loyalli {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    column-count: 2;
}

ul.loyalli li {
    padding-left: 1.5em; /* Add some spacing for the custom icon */
    position: relative; /* Position the custom icon */
    margin-bottom: 20px;
}

ul.loyalli li::before {
    content: ""; /* Replace with the Unicode of your desired icon, you can use font icons like FontAwesome */
    background-image: url("pic/icon/bluetick.png");
    background-size: contain;
    display: inline-block;
    width: 1.5em; /* Adjust the icon's width */
    height: 1.5em; /* Adjust the icon's height */
    position: relative;
    top: 0.25em; /* Adjust the vertical alignment */
    margin-right: 0.5em; /* Add some spacing between the icon and text */
}

.left{
    width: 55%;
    margin-left: -12px;
    margin-bottom: -3px;

}

.right{
    width: 45%;

}

.left img{
    width: 100%;


}

/*--------------section 1 hr---------------------*/
.hr_section_1 {
    background: url('/images/HR_Banner.jpg');
    height: 592px;
    background-repeat: no-repeat;
    background-size: cover;
}

.hr_section_1_text {
    color: white;
    padding-top: 150px;        
}
/*--------section 2 attendance ---------*/
.hr_section_2_text {
    text-align: left;    
    padding-top: 50px;
}

/*--------------section 3 hr---------------------*/
.hr_section_3 {
    background: url('/images/Leave_Banner.jpg');
    height: 592px;
    background-repeat: no-repeat;
    background-size: cover;
}

.hr_section_3_text {
    color: white;
    padding-top: 120px;
}

/*--------------section 4 Payslip---------------------*/

@media (min-width: 1300px) {
    .hr_section_4 {
        background: url('/images/PaySlip.jpg');
        background-position: right;
        height: 592px;
        background-repeat: no-repeat;
        background-size: auto;
        width: 100%;
    }

}

@media (max-width: 1299px) {
    .hr_section_4 {
        background: url('/images/PaySlip.jpg');
        box-shadow: inset 0 0 0 2000px rgb(255 255 255 / 0.90);
        background-position: right;
        height: 592px;
        background-repeat: no-repeat;
        background-size: auto;
        width: 100%;
        padding-top: 100px;
    }
}

.hr_section_4_text {
    color: black;
    padding-top: 120px;
}

/*--------------section 5 ---------------------*/

@media (min-width: 1300px) {
    .hr_section_5 {
        animation: animate__fadeInUp 1.5s ease;
        /* background: url('/images/Claim.png');*/
        background-color: #013568;
        /*background-position: right;*/
        /*height: 700px;*/
        /* background-repeat: no-repeat;
        background-size: auto;*/
        width: 100%;
        padding-bottom: 50px;
    }
}

@media (max-width: 1299px) {
    .hr_section_5 {
        /*background: url('/images/Claim.png');*/
        /*        box-shadow: inset 0 0 0 2000px rgb(19 34 59 / 0.80);
        background-position: right;*/
        background-color: #013568;
        /*height: 492px;*/
        background-repeat: no-repeat;
        background-size: auto;
        width: 100%;
        padding-bottom: 50px;
        animation: animate__fadeInUp 1.5s ease;
    }
}

.hr_section_5_text {
    color: white;
    padding-top: 120px;
}


/*------------------------human resources------------------------------*/

.humanR{
    background-image: linear-gradient(to bottom, #004572 0%,  #004572 60%,  #ffffff 60%,  #ffffff 100%);
}


.hrtitle {
    font-size: 60px !important;
    font-weight: 700;
    background: -webkit-linear-gradient( #4682b4 , #23297a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 20px;
}

.hrsubtitle{
    font-size: 1.10rem;
    font-weight: 200;
}


.hr_contain{
    width: 100%;;
    margin-left: 30px;
    margin-top: 100px;
}

ul.hrli {
    list-style: none;
    padding: 0;
    column-count: 2;
}

ul.hrli li {
    position: relative; 
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 500;
    color: white;
}   

ul.hrli li::before {
    content: "";
    background-image: url("pic/icon/tick.png");
    background-size: contain;
    display: inline-block;
    width: 1.5em; 
    height: 1.5em; 
    position: relative;
    top: 0.25em; 
    margin-right: 0.5em; 
}

.hrleft{
    width: 42%;
    background-image: linear-gradient( 180deg ,  #ffffff 0%, #ffffff 45%, #004572 45%,  #004572 65%,  #ffffff 65%,  #ffffff 100%);
}

.hrright{
    width: 58%;
    background-image: linear-gradient( 180deg ,  #ffffff 0%, #ffffff 45%, #004572 45%,  #004572 65%,  #ffffff 65%,  #ffffff 100%);
}

.hrright img{
    width: 1000px;
    align-items: end;
    justify-content: end;
    padding: 0;
}





/*---------------------------sales force---------------------------*/

.sforce{
    background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 8%, #004572 8%,  #004572 66%, #ffffff 66%, #ffffff 100%);
    height: 1000px;
}

.salescontiant img{
    width: 100%;
}

.salesforce_feature{
    border: 0;
    padding: 1.5rem;
    margin : 1rem auto; 
    max-width : 13rem; 
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow:  0 0.5rem 1rem rgba(23, 111, 194, 0.1);
    border-radius: 5px;
    background-color: white;
}

.salestitle{
    font-size: 54px;
    font-weight: 600;
    background: -webkit-linear-gradient( #4682b4 , #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 50px;
}

.salesful {
    text-align: center; /* Center the list items horizontally */
    margin-top: 70px;
}

.salesful li{
    font-size: 18px;
    display: inline-block;
    margin-right: 100px;
    color: white;
    
}

/*-------------------------customer reference------------------------------*/
:root {
    --gutter-sm: 24px;
    --gutter: 50px;
    --gutter-md: 70px;
    --gutter-lg: 112px;
    --gutter-xl: 140px;
    --ui-drop-shadow-sm: 0px 0px 16px rgba(0,0,0,.1);
    --max-width: calc(var(--screen-xl-min) - var(--gutter)*2);
    --garden-height: 535px;
    --outer-pad: 18px;
    --outer-width: 100px;
    --centerpiece-pad: 30px;
    --centerpiece-width: 220px;
}

.galleyctm{
    overflow: hidden;
    padding-top: 50px;
    margin-block-end: 0;
    margin-block-start: 0;
    box-sizing: inherit;
}

.galleyctm .container-fluid{
    height:980px;
    padding-top: 50px;
    text-align: center;
    margin: 0 auto;
    max-width: var(--max-width);
}

.logomain{
    align-items: center;
    display: flex;
    height: 700px;
    justify-content: center;

    --outer-pad: 35px;
    --outer-width: 163px;
    --centerpiece-pad: 35px;
    --centerpiece-width: 400px;

    
}

.combinelogo{
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr;
    gap: 24px;
    box-sizing: inherit;
}

.galleyctm .logomain .combinelogo .fircol:nth-child(1), .galleyctm .logomain .combinelogo .fircol:nth-child(7){
    top:20px;
    position: relative;
}

.galleyctm .logomain .combinelogo .fircol:nth-child(2), .galleyctm .logomain .combinelogo .fircol:nth-child(6){
    top:-48px;
    position: relative;
}

.galleyctm .logomain .combinelogo .fircol:nth-child(3), .galleyctm .logomain .combinelogo .fircol:nth-child(5){
    top:60px;
    position: relative;
}

.galleyctm .logomain .combinelogo .fircol:nth-child(4){
    top:100px;
    position: relative;
}

.galleyctm .logomain .combinelogo .fircol div{
    border-radius: 8px;  
    display: grid;
    box-shadow: 0px 0px 16px rgba(0, 0, 0,.5);
    height:163px;
    margin-bottom: 24px;
    padding: 15 px;
    place-items: center;
    width: 163px;
    /*background-color: #f8f9fa;*/
}

.fircol img{
    height: auto;
    max-width: 100%;
    display: block;
    align-items: center;
}

.centerpiece{
position:relative;
box-sizing: inherit;
margin-block-end: 0;
margin-block-start: 0;
}

.galleyctm .logomain .combinelogo .centerpiece div{
    border-radius: 8px; 
    margin-block-end: 0;
    margin-block-start: 0; 
    display: grid;
    box-shadow: 0px 0px 16px rgba(0, 0, 0,.5) !important;
    margin-bottom: 24px !important;
    place-items: center !important;
    height:356px !important;
    width:356px !important;    
    padding:35px !important;
    background-color: #003366;
}
    
.centerpiece img{
    height: auto;
    max-width: 100%;
}

.referencetitle{
    display: flex;
    justify-content: center;
    top:-30px;
}

.referencetitle h2{
    font-size: 40px;
    font-weight: 600;
    background: -webkit-linear-gradient( white , gray);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    align-items: center;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}



/*----------------------------modal box design---------------------------*/

.custom-modal {
    background-image: url('pic/imghr5.png');
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    box-shadow: 3px  2px  10px  4px rgba(255, 255, 255, 0.3);

    
}

.modal-header{
    border-bottom: 0px;
}








    @media (min-width: 1024px) {
        .logomain {
            --garden-height: 700px;
            --outer-pad: 35px;
            --outer-width: 163px;
            --centerpiece-pad: 35px;
            --centerpiece-width: 356px;
        }

        #galleyctm .container {
            height: 980px;
        }
    }


    @media (min-width: 768px) {

        #galleyctm .container {
            width: calc(100% - 50px*2);
        }
    }


    /*----------services----------*/
    .servicestitle {
        background: -webkit-linear-gradient( #4682b4, #23297a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 57px;
        font-weight: bold;
    }

    .section {
        background-size: cover; /* Scale the background image to cover the entire viewport */
        background-repeat: no-repeat;
        height: 510px;
    }

    .animationservices {
        animation: animate__fadeInUp 1s ease-in-out;
        visibility: hidden;
    }


    /*------footer section---------*/

    #footer {
        background-image: linear-gradient(to right, #003366, #0858a8);
        color: #fff;
    }

    .footer-img {
        width: 100%;
    }

    .footer-box {
        padding: 20px;
    }

    .socialimg {
        width: 180px;
        margin-bottom: 20px;
    }

    #social {
        background: #fff;
        padding: 100px 0;
    }

        #social p {
            font-size: 36px;
            font-weight: 600;
            margin-bottom: 30px;
        }

    .social-icons img {
        width: 50px;
        transition: 0.5s;
        padding: 5px;
    }

    .social-icons a:hover img {
        transform: translateY(-10px);
    }


    .bottom_contact {
        width: 20px;
    }

    /*-----------animation visibility------------------*/
    .animate__fadeInRight {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
    }

    @-webkit-keyframes fadeInRightBig {
        from {
            opacity: 0;
            -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .animate__fadeInRight {
        visibility: visible;
    }

    .animate__fadeInLeft {
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
    }

    @-webkit-keyframes fadeInLeftBig {
        from {
            opacity: 0;
            -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .animate__fadeInLeft {
        visibility: visible;
    }

    .animate__fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }

    @-webkit-keyframes fadeInUpBig {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .animate__fadeInUp {
        visibility: visible;
    }

    .animate__fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
    }

    @-webkit-keyframes fadeInDownBig {
        from {
            opacity: 0;
            -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    }

    .animate__fadeInDown {
        visibility: visible;
    }

    .animate__rotateInDownLeft {
        -webkit-animation-name: rotateInDownLeft;
        animation-name: rotateInDownLeft;
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
    }

    @-webkit-keyframes rotateInDownRight {
        from {
            -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
            opacity: 0;
        }

        to {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }

    .animate__rotateInDownLeft {
        visibility: visible;
    }


    .animate__rotateInDownRight {
        -webkit-animation-name: rotateInDownRight;
        animation-name: rotateInDownRight;
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
    }

    @-webkit-keyframes rotateInUpLeft {
        from {
            -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
            opacity: 0;
        }

        to {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }

    .animate__rotateInDownRight {
        visibility: visible;
    }

    .animate__zoomIn {
        -webkit-animation-name: zoomIn;
        animation-name: zoomIn;
    }


    @-webkit-keyframes zoomInDown {
        from {
            opacity: 0;
            -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
            -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }

        60% {
            opacity: 1;
            -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
            -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        }
    }

    .animate__zoomIn {
        visibility: visible;
    }

    /*--------------MEDIA SCREEN--------*/


    @media only screen and (max-width: 1200px) {


        .loyaltitle {
            font-size: 35px !important;
        }

        .CRM {
            padding: 13vmin 0;
        }

            .CRM .row .col-md-5:last-child {
                position: relative;
                left: -30vmin;
                z-index: 1;
            }

        .card-body p {
            font-size: 17px;
        }

        .section2 .row .col-md-6 .panel p {
            width: 300px;
        }

        .invtsytm .card p {
            font-size: 15px;
        }

        .loyalty {
            height: 555px;
        }

        .loyalty_contain {
            margin-top: 60px;
            background-color: white;
            margin-left: 20px;
        }


        ul.hrli li {
            font-size: 12px !important;
        }

        .hrleft {
            width: 40%;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 50%, #004572 50%, #004572 75%, #ffffff 75%, #ffffff 100%);
        }

        .hrright {
            width: 60%;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 50%, #004572 50%, #004572 75%, #ffffff 75%, #ffffff 100%);
        }

        .hrtitle {
            font-size: 35px !important;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 1245px) {
        .mainimg {
            margin-top: 120px;
            margin-left: 20px;
        }
    }

    @media only screen and (max-width: 1163px) {
        .salesful li {
            display: flex;
            margin-left: 180px;
            margin-top: 0;
        }

        .hrleft {
            width: 40%;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 55%, #004572 55%, #004572 80%, #ffffff 80%, #ffffff 100%) !important;
        }

        .hrright {
            width: 60%;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 55%, #004572 55%, #004572 80%, #ffffff 80%, #ffffff 100%) !important;
        }
    }

    @media only screen and (max-width: 992px) {
        .loyaltitle h1 {
            font-size: 14px;
        }

        .loyalsubtitle {
            font-size: 13px;
        }

        .loyalty_contain {
            width: 100% !important;
            margin-top: 0 !important;
            padding-top: 0 !important;
        }



        .possecontitle {
            font-size: 12px !important;
        }

        .CRM .row .col-md-7 .panel p {
            font-size: 14px;
        }

        .section2 .row .col-md-6 .panel p {
            font-size: 15px;
        }

        .posindutrial {
            margin-top: 10%;
        }



        ul.posfunction li {
            font-weight: 200;
            font-size: 13px !important;
        }

        .accounting-title {
            font-size: 47px;
        }

        .lead {
            font-size: 13px !important;
        }

        .section {
            height: auto;
        }

        .accounting-title {
            font-size: 40px;
        }

        .posindustrialtitle {
            font-size: 40px;
        }

        .section2 .row .col-md-6 .panel p {
            width: 100%;
        }

        .navbar-nav {
            text-align: center;
         
        }

        .navsub1 {
            justify-content: center;
        }
    }

    @media only screen and (max-width: 989px) {


        .headtitle {
            font-size: 35px;
            font-weight: 800;
            line-height: 1.3;
            padding-bottom: 5%;
        }

        .mainp {
            line-height: 2.0;
            word-spacing: 2px;
        }

        .lead {
            font-size: 18px;
        }



        .pt4 {
            font-size: 14px;
        }

        .hrleft {
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 55%, #004572 55%, #004572 90%, #ffffff 90%, #ffffff 100%) !important;
        }

        .hrright {
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 55%, #004572 55%, #004572 90%, #ffffff 90%, #ffffff 100%) !important;
        }

        .hrsubtitle {
            font-size: 1.0rem;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 992px) {


        .card {
            margin-bottom: 40px;
            height: auto;
        }

        .invtsytm .card {
            height: auto;
        }

        .invent::after {
            height: 100%;
        }


        .CRM .row .col-md-7 .panel {
            width: 400px;
            font-size: 13px;
        }

        .loyaltitle {
            position: relative;
        }

        .heading1 {
            font-size: 15px;
        }
    }

    @media only screen and (max-width: 898px) {

        .headtitle {
            font-size: 24px; /* Adjust the font size to your preference */
        }

        .mainp {
            font-size: 16px; /* Adjust the font size to your preference */
        }

        .hrleft {
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 68%, #004572 68%, #004572 100%) !important;
        }

        .hrright {
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 68%, #004572 68%, #004572 100%) !important;
        }
    }

    @media only screen and (max-width: 875px) {
        .invent::after {
            background-size: auto 100%;
            background-repeat: no-repeat;
        }

        .salesful {
            text-align: start;
        }


        ul.loyalli li {
            padding-left: 0.5em; /* Add some spacing for the custom icon */
            font-size: 12px;
        }

            ul.loyalli li::before {
                display: inline-block;
                width: 1.5em; /* Adjust the icon's width */
                height: 1.5em; /* Adjust the icon's height */
                position: relative;
                margin-right: 0.5em; /* Add some spacing between the icon and text */
            }

        .hrleft {
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 75%, #004572 75%, #004572 100%) !important;
        }

        .hrright {
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 75%, #004572 75%, #004572 100%) !important;
        }
    }

    @media only screen and (max-width: 769px) {
        .navbar-nav {
            text-align: center;
        }

        .invtsytm .card {
            height: auto;
        }

        .invttitle {
            font-size: 30px;
        }

        .invent::after {
            height: 100%;
        }

        .card {
            margin-bottom: 30px;
            height: auto;
        }

        .headtitle {
            font-size: 24px; /* Adjust the font size to your preference */
        }

        .loyalty_contain {
            width: 80% !important;
        }



        .loyaltitle {
            font-size: 24px;
        }

        .loyalsubtitle {
        }

        .postitle {
            font-size: 40px;
        }

        .lead {
            font-size: 16px;
        }

        .section2 {
            padding-bottom: 5%;
        }

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

                .section2 .row .col-md-6 {
                    width: 100%;
                }

                    .section2 .row .col-md-6 .bill {
                        margin-bottom: 20px;
                    }

                    .section2 .row .col-md-6 .panel {
                        position: static;
                        border-radius: 2em;
                        text-align: left;
                        padding: 30px;
                    }

        .CRM {
            display: flex;
            flex-direction: column;
        }

        .accounting-title {
            font-size: 40px;
        }

        .customer {
            position: relative;
            margin-bottom: 120px;
            width: 90%;
            margin-left: 70px;
        }

        .heading1 {
            font-size: 14px;
        }

        .invtsytm .card {
            margin: 3% 20% 0 20%;
        }

        .servicestitle {
            font-size: 38px;
        }

        .salestitle {
            font-size: 35px;
        }
    }

    @media only screen and (max-width: 769px) {
        .loyalty_contain {
            box-shadow: 5px 5px 5px 5px rgba(0, 0, 0,.5);
        }

        .left {
            width: 90%;
        }

        .right {
            width: 100%;
            padding: 30px 20% 20% 15%;
            box-shadow: 3px 3px 3px rgba(0, 0, 0,.5);
        }


        ul.hrli li {
            color: black;
        }


        .hrleft {
            width: 100%;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 100%) !important;
        }

        .hrright {
            width: 100%;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 100%) !important;
        }

        .hr_contain {
            margin-left: 0;
            margin-top: 0;
        }
    }

    @media only screen and (min-width: 620px) and (max-width: 736px) {

        .CRM .row .col-md-5 .customer img {
            width: 80%;
            left: 200px;
            margin-top: 80px;
        }
    }

    @media only screen and (max-width: 643px) {

        .CRM {
            padding: 10vmin 0;
        }

            .CRM .row .col-md-5:last-child {
                position: relative;
                margin-left: 20px;
                z-index: 1;
            }

            .CRM .row .col-md-5 .customer img {
                width: 100%;
                margin-left: -20vmin;
            }

        .loyalsubtitle {
            margin-bottom: 0px !important;
        }
    }

    @media only screen and (max-width: 577px) {

        .accounting {
            background-image: linear-gradient(to bottom, #003366 0%, #003366 80%, #ffffff 80%, #ffffff 100%);
        }

        .invtsytm .card {
            margin: 5% 5% 0 5%;
        }

        .loyaltitle {
            font-size: 25px !important;
        }

        .titlecustomer {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
        }

        ul.loyalli li {
            font-size: 14px !important;
        }
    }

    @media only screen and (max-width: 516px) {

        .product-title1 {
            font-size: 30px;
            font-weight: 400;
        }

        .section2 .row .col-md-6 .panel p {
            font-size: auto;
        }

        .accounting-title {
            font-size: 50px;
        }
    }

    @media only screen and (max-width: 431px) {
        .headtitle {
            font-size: 20px; /* Adjust the font size to your preference */
        }

        .section2 .row .col-md-6 .panel p {
            font-size: 9px !important;
            width: auto !important;
        }

        .CRM .row .col-md-5 .customer img {
            margin-left: -30vmin !important;
        }

        .customer {
            margin-left: 60px;
        }

        .p-5 {
            padding: 1rem !important;
        }

        .loyalty_contain {
            margin-top: 200px !important;
        }

        .right {
            padding: 0;
            margin-top: -160px;
        }

        .sforce {
            height: auto;
        }
    }


    @media only screen and (min-width:1201px) {
        .invtsytm .row {
            padding: 0;
        }

        .hrleft {
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 48%, #004572 48%, #004572 75%, #ffffff 75%, #ffffff 100%) !important;
        }

        .hrright {
            height: auto;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 48%, #004572 48%, #004572 75%, #ffffff 75%, #ffffff 100%) !important;
        }
    }


    @media only screen and (min-width:1520px) {

        .hrleft {
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 45%, #004572 45%, #004572 73%, #ffffff 73%, #ffffff 100%) !important;
        }

        .hrright {
            height: auto;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 45%, #004572 45%, #004572 73%, #ffffff 73%, #ffffff 100%) !important;
        }
    }


    @media only screen and (min-width:1622px) {

        .hrsubtitle {
            font-size: 1.50rem;
        }

        .invent::after {
            background-size: contain;
        }
    }



    @media only screen and (min-width:1824px) {

        .hrsubtitle {
            font-size: 1.50rem;
        }

        .hrleft {
            width: 50%;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 37%, #004572 37%, #004572 73%, #ffffff 73%, #ffffff 100%) !important;
        }

        .hrright {
            width: 50%;
            background-image: linear-gradient( 180deg, #ffffff 0%, #ffffff 37%, #004572 35%, #004572 73%, #ffffff 73%, #ffffff 100%) !important;
        }

        ul.hrli li {
            font-size: 27px;
        }
    }