#buttoncol, #buttoncol:hover, #buttoncol1:hover ,#pheadingbtn:hover,#sheadingbtn:hover{
    background-color: rgb(0,12,96);
}

#buttoncol {
    background-color: rgb(118,51,202);
}

.headingcol, .headingcol1 {
    color: #000c60;
}

.mainHeading {
    font-size: 70px;
}

#divImage {
    height: 30vh;
    background-image: url("https://kona-digital.com/images/herobg.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 75%;
}

#bgimage {
    width: 100%;
    background-image: url("https://kona-digital.com/images/mapimg.png");
    background-repeat: no-repeat;
}

#image1, #image2, #image3 {
    position: relative;
}

#image1 {
    bottom: 40px;
}

#image2 {
    bottom: 100px;
}

#image3 {
    bottom: 50px;
}

#headingBg {
    background: rgb(255,235,235);
}

.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
}

.carousel-indicators .active {
    background-color: #000;
}

.accordion-button:focus, .accordion-button:not(.collapsed) {
    color: rgb(118,51,202);
    background-color: transparent;
    box-shadow: none;
}

.accordion-header h6 {
    font-size: 20px;
}

.accordion-body p {
    font-size: 16px;
}

#aboveFooter {
    background-color: rgb(232,240,247);
    margin-top: 200px;
}

.col li:hover {
    color: rgb(118,51,202);
}

.zoom:hover {
    transform: scale(1.1);
}

#img1 {
    top: 10%;
    position: absolute;
    z-index: -1;
}

#pipeline {
    position: absolute;
    top: 800px;
    z-index: -3;
    animation: zoom-in-zoom-out1 5s ease infinite;
}

@keyframes zoom-in-zoom-out1 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3%);
    }
    100% {
        transform: translateY(0);
    }
}

#img2 {
    position: absolute;
    left: 760px;
    top: 600px;
    z-index: -2;
}

#nearimg1 {
    position: relative;
    z-index: 2;
}

#call {
    background-color: rgb(164,41,215);
    position: fixed;
    top: 80%;
    right: 0;
    z-index: 5;
    border-radius: 200px 200px 200px 0px;
    border: 0px solid #000000;
}


.imgForButton {
    background-image: linear-gradient(to right, #ff9b71 0%, #5a39c2 60%, #9e2ad5 100%);
    width: 100%;
}

.imgForButton1 {
    background-image: linear-gradient(90deg, #4e3bbf, #a928d8);
}

@media (max-width: 576px) {
    footer{
        margin-right: 180px;
    }
    .txt{
       padding-right: 100px;
    }
    #blue{
        display: none;
    }
    .mobile{
        display: none;
    }
    .navbar-brand img {
        position: absolute;
        margin-bottom: 20px;
        left: 10px;
    }
    .navbar-toggler {
        margin-top: 50px !important;
    }
    .navbar-collapse {
        display: none !important;
    }
    .navbar-toggler.collapsed + .navbar-collapse {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin-top: 20px;
    }
    .navbar-nav {
        width: 100%;
    }
    .navbar-nav .nav-item {
        width: 100%;
    }
    .navbar-nav .nav-link, .navbar-nav .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    .mainHeading {
        font-size: 49px !important;
    }
    #image2 {
        margin-top: 100px;
    }
    .d-grid .btn {
        width: 50%;
        margin-left: 100px;
    }
    .row {
        margin-left: 0 !important;
        gap: 20px !important;
    }
    .col-12.col-md-4 {
        width: 100% !important;
    }
    .col-12.col-md-4 img {
        width: 100%;
    }
    .arrow-icon {
        width: 20px !important;
    }
    .container {
        width: 100% !important;
    }
    .col-12.col-md-6 {
        padding: 20px !important;
    }
}

@media (min-width: 577px) {
    .navbar-nav {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    .navbar-nav .nav-item {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.arrow-icon {
    width: 20px;
    height: auto;
}

body, html {
    width: 100%;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .carousel-control-prev, .carousel-control-next {
        display: none !important;
    }
    .navbar-brand {
        margin-top: 0;
    }
}

.pathone, .pathtwo, .paththree, .pathfour {
    position: absolute;
    animation: in-out 10s ease infinite;
}

.pathone {
    right: 26%;
    top: 38%;
}

.pathtwo {
    right: 30%;
    top: 55%;
}

.paththree {
    left: 28%;
    top: 20%;
}

.pathfour {
    left: 15%;
    top: 28%;
}

@keyframes in-out {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(0.1,0.1);
    }
    100% {
        transform: scale(1,1);
    }
}

* {
    font-family: Poppins, sans-serif;
}

.square {
    z-index: 2;
    background-color: #ffff;
    opacity: 70%;
}

.cites {
    position: relative;
}

#red {
    position: absolute;
    margin-right: 1000px;
}

#blue {
    position: absolute;
    margin-left: 1200px;
}

#ropeline {
    position: absolute;
    margin-top: 150px;
    z-index: 1;
    animation: zoom-in-zoom-out1 5s ease infinite;
}

#neardropdown {
    position: absolute;
    left: -2%;
    z-index: -1;
    margin-bottom: 400px;
}

.fot {
    margin-left: 80px;
    margin-top: 400px;
}
.custom-popover .popover-body {
    font-size: 1.4rem; 
  }
.custom-popover .popover-header {
 font-size: 20px; 
 background-image: linear-gradient(to right, #ff9b71 0%, #5a39c2 60%, #9e2ad5 100%);
 color: #ffff;
}

@media only screen and (min-width: 1024px) {
    .reviews{
        display: none;
    }
    
}

#productHeading{
    height: 60vh;
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 90%;
}
#pheadfont{
    width: 75%; 
    width: 75%;
    padding-top: 80px;
    line-height: 48px;
    text-align: left;
    margin-left: 100px;
}
#pheadingpar
{
    padding-left: 60px;
}
#pheadingdiv{
    margin-left: 50px;
}
#pheadingpar{
    width: 75%;
    margin-left: 40px;
    color :#212529;
}

#pheadingbtn{
    margin-left: 100px;
    background-color: rgb(118,51,202) ;
    margin-top: 10px;
}
.ppar{
   width: 644px;
}
@media (max-width: 600px) {

        .navbar-brand img {
        left: -1px;
       
    }
   
    .movingleft{
        margin-left: 0px !important;
    }

    .formobile1{
        margin-left: -33px;
    }
    .fortablet4{
        width: 351px !important;
        margin-left: -46px !important;
    }
    .msolution5{
        margin-left: -66px !important;
    }
    .msolution4{
        font-size: 50px !important;
    }
    .msolution3{
        width: 71% !important;
        margin-left: 56px !important;
        font-size: 18px !important;
    }
    .msolution2{
        margin-top: 240px !important
    }
    .msoluion1{
        margin-top: -414px !important
    }
    .bgimage1{
        left: -128px !important;
    }
    .msolution{
        width: 118% !important;
        margin-left: -40px !important;
    }
    #productHeading{
        height: 150vh;
    }
    .sicon{
        width: 170px;
        margin-left: 57px;
    }
    .solicon2{
        width: 220px;
        margin-left: 15px;
    }
    .solutionhead{
        margin-left: 9px !important;
        width: 383px;
        font-size: 44px;
    }
    .solutiontxt1{
        margin-left: -26px !important;
        width: 379px;
        font-size: 27px;
    }
    #pheadfont{
       width: 363px;
       font-size: 50px ;
       padding-right: 0px;
       margin-left: -84px;
       text-align: center;
       line-height: 50px;

    }
    #pheadingImg{
        display: none;
    }
    #pheadingpar{
        width: 121%;
        text-align: center;
        margin-left: -100px;
    }
    #pheadingbtn{
        margin-left: 13px;
    
    }
    .prows{
        width: 368px !important;
    }
    #konado{
       .pheadsize{
        font-size: 45px;
       }
       .ppar{
        width: 365px !important;
        line-height: 34px;
       }
    }
    .head{
        margin-left: 100px;
    }
    .head1{
        width: 324px !important;
        text-align: center;
        margin-top: 33px;
        margin-left: -27px;
        font-size: 40px;
    }
    .colorhead{
            background: linear-gradient(90deg, #8D65E9 0%, #5391E4 48.1%, #6BCD94 100%);
            font-size: 50px;
            font-weight: 500;
            margin: 20px 0 10px;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
    }
    .head2 {
        width: 97% !important;
        text-align: center;
        margin-left: -5px;
    }
    .picons {
        margin-left: 42px;
    }
    .secIcon{
        margin-left: -23;
    }
    .space{
        margin-top: 20px;
    }
    #sheading{
        height: 175vh !important;
    }
    #sheadfont{
        width: 103% !important;
        padding-top: 36px !important;
        line-height: 48px !important;
        text-align: start;
        margin-left: -74px !important;
        font-size: 35px !important;
    }
    #sheadingpar{
        width: 120% !important;
        margin-left: -73px !important;
        margin-top: 5px !important;
    }
    #sheadingbtn{
        margin-left: -72px !important;
    }
    #sheadingImg{
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
    .servicetxt{
        margin-top: 176px !important;
    }
    .simg1{
        max-width: 120% !important;
        margin-left: -41px;
        margin-top: 20px;
    }
    .shead2{
        width: 327px !important;
        margin-left: -33px;
    }
    .shead{
        width: 341px !important;
        margin-left: -30px;
        padding: 10px !important;
    }
    .sohead{
        margin-left: -13px !important;
        
    }
    .freetxt{
        margin-left: -23px !important;
        width: 154px;
    }
    #soheadfont {
        width: 113% !important;
        padding-top: 10px !important;
        line-height: 43px !important;
        text-align: start !important;
        margin-left: -32px !important;
        font-size: 41px !important;
    }
    #soheadfont1{
        width: 344px !important;
        margin-left: -31px;
        text-align: center;
        font-size: 40px;
    }
    .soheadpar {
        width: 305px !important;
        margin-top: 20px !important;
        font-size: 17px !important;
        margin-left: -18px !important;
        text-align: center;
    }   
    .sohead2 {
        width: 260px !important;
        margin-left: -33px !important;
    }
    .sobtn {
        width: 153%;
        margin-left: -135px;
    }
    .pheadingbtn{
        width: 325px !important;
    }
    .movhead{
        margin-left: -52px !important;
    }
    .solheading{
        width: 100%;
        margin-top: 15px;
        margin-left: 9px;
    }
    .forproduct4{
        max-width: 42%;
    }
    .formobile{
        margin-left: -28px;
    }
    .solutionhead {
        margin-left: 9px !important;
        width: 308px;
        font-size: 44px;
    }

   
}
.forbg{
    background-color: rgb(243,250,249);

}
.gradient-text2{
    background: linear-gradient(90deg, #ECEAF8 0%, #E9C4E6 28.28%, #D2CDE2 63.13%, #EAEDFB 100%);
}
.gradient-text {
    background: linear-gradient(90deg, #8D65E9 0%, #5391E4 48.1%, #6BCD94 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.gradient-text1 {
    background: linear-gradient(90deg, #272657 0%, #5391E4 48.1%, #272657 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
#sheading{
    background-color: rgb(233,234,245);
}
#sheadfont{
    width: 75%;
    padding-top: 80px;
    line-height: 48px;
    text-align: start;
    margin-left: 59px;
    font-size: 35px;
}
#sheadingpar{
    width: 78%;
    margin-left: 59px;
}
#sheadingbtn{
    margin-left: 58px;
    background-color: rgb(118,51,202) ;
}
#sheading{
    height: 80vh;
}
#soheadfont{
    width: 68%;
    padding-top: 10px;
    line-height: 58px;
    text-align: start;
    margin-left: 120px;
    font-size: 50px;
}
.sohead{
    margin-left: 120px ;
    padding: 11px !important;
}
.padt100{
    margin-top: 100px;
}

/* .platform1{
    background-image: url("https://kona-digital.com/images/whatcanbg.svg");
    height: 60vh;
    width: 120%;
    position: relative;
    top:100px;
    right:200px;
} */

@media (max-width: 576px) {
    .platform-item img {
        width: 60px;
        height: auto; 
    }
    .platform-item h5,
    .platform-item p {
        font-size: 10px;
        margin-left: 15px!important;
    }
    .lastimg{
        display: none !important;
    }
    .images{
        width: 142% !important;
        margin-left: -41px !important;
    }
    .modal-content{
        margin-left: 40px;
    }
    .dropdown-menu{
        text-align: center;
    }
}

@media (min-width: 1800px) {

    .bgimage1{
        left: 498px !important;
    }

    .prows{
        margin-left: 800px !important;
    }
    #productHeading{
        
      margin-left: 254px !important;

    }
    .solutionprob{
        margin-left: 445px
    }
    .sobtn{
        margin-right: 465px;
    }
    #pheadingdiv{
        margin-left: 612px;
    }
}

@media only screen and (width: 768px) {
    .fortablet {
        margin-left: -177px;
    }
    .fortablet1 {
        width: 827px;
    }
    .fortablet2{
        margin-left: 5rem !important;
    }
    .fortablet3{
        margin-left: -3rem !important;
    }
    .fortablet4{
        width: 134px !important;
    }
    .fortablet5{
        width: 119px !important;
        margin-left: -8px !important;
    }
    .fortablet6{
        margin-left: 49px !important;
    }
    #blue{
        display: none;
    }
    .forproduct{
        width: 363px !important;
         margin-left:-47px !important;
         margin-top: -59px !important;
    }
    .forproduct1{
        width: 350px !important;
        margin-left: -107px !important;
        margin-top: -3px !important;
    }
    .forproduct2{
        margin-left: -50px !important;
    }
    .forproduct3{
        width: 400px;
        margin-left: -78px;
    }
    #konado{
        margin-top: 256px !important;
    }
    .prows{
        width: 721px !important;
        margin-left: 34px !important;
    }
    .forsolution{
        margin-left: 281px !important;
        width: 49%;
    }
    .forsolution1{
        width: 49% !important;
        margin-left: 284px !important;

    }
    .forsolution2{
        width: 257px !important;
        margin-left: 290px !important;
    }
    .forsolution3{
        margin-right: -320px !important;
    }
    .forsolution4{
        max-width: 51% !important;
        margin-right: 645px !important;
        margin-top: 31px !important;
    }
    .forsolution5{
        max-width: 72% !important;
        margin-right: 351px !important;
        margin-left: 126px !important;
        margin-top: 93px !important;
    }
    .forsolution6{
        margin-left: 2px !important;
        font-size: 49px;
    }
    .fortablet7{
        margin-top: -202px !important;
    }
    .msolution2{
    margin-left: -10px !important;
    margin-bottom: 120px !important;
    margin-top: 324px !important;
    }
    .msolution3{
        width: 30% !important;
        margin-left: 267px !important;
    }
    .forservices{

        width: 296px !important;
        margin-left: -65px !important;
        margin-top: -70px !important;
    
    }
    .forservices1{
        
        width: 306px !important;
        margin-left: -65px !important;
        margin-top: 1px !important;
        
    }
    .forservices2{
        width: 322px;
        margin-left: -56px;
        margin-top: -121px !important;
    }
    .forservices3{
        margin-left: -60px !important;
    }
    #sheading{
        height: 100vh !important;
    }
}

@media only screen and (width: 768px) {
    .platform-item img {
        width: 60px;
        height: auto; 
    }
    .platform-item h5,
    .platform-item p {
        font-size: 10px;
        margin-left: 15px!important;
    }
    .lastimg{
        display: none !important;
    }
    .images{
        width: 142% !important;
        margin-left: -41px !important;
    }
    .modal-content{
        margin-left: 40px;
    }
    .dropdown-menu{
        text-align: center;
    }
}

.bgimage1{
    position: relative;
    top: -44px;
    left: 70px;
}
.bgimage2{
    position: relative;
    z-index: -1;
    height: 100vh; 
    width: 100%;  
}