@font-face {
    font-family: 'Greycliff CF Demi';
    src: url('fonts/eng/GreycliffCF-DemiBold.eot');
    src: url('fonts/eng/GreycliffCF-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/eng/GreycliffCF-DemiBold.woff2') format('woff2'),
        url('fonts/eng/GreycliffCF-DemiBold.woff') format('woff'),
        url('fonts/eng/GreycliffCF-DemiBold.ttf') format('truetype'),
        url('fonts/eng/GreycliffCF-DemiBold.svg#GreycliffCF-DemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('fonts/eng/GreycliffCF-Bold.eot');
    src: url('fonts/eng/GreycliffCF-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/eng/GreycliffCF-Bold.woff2') format('woff2'),
        url('fonts/eng/GreycliffCF-Bold.woff') format('woff'),
        url('fonts/eng/GreycliffCF-Bold.ttf') format('truetype'),
        url('fonts/eng/GreycliffCF-Bold.svg#GreycliffCF-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('fonts/eng/GreycliffCF-Heavy.eot');
    src: url('fonts/eng/GreycliffCF-Heavy.eot?#iefix') format('embedded-opentype'),
        url('fonts/eng/GreycliffCF-Heavy.woff2') format('woff2'),
        url('fonts/eng/GreycliffCF-Heavy.woff') format('woff'),
        url('fonts/eng/GreycliffCF-Heavy.ttf') format('truetype'),
        url('fonts/eng/GreycliffCF-Heavy.svg#GreycliffCF-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('fonts/eng/GreycliffCF-Light.eot');
    src: url('fonts/eng/GreycliffCF-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/eng/GreycliffCF-Light.woff2') format('woff2'),
        url('fonts/eng/GreycliffCF-Light.woff') format('woff'),
        url('fonts/eng/GreycliffCF-Light.ttf') format('truetype'),
        url('fonts/eng/GreycliffCF-Light.svg#GreycliffCF-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('fonts/eng/GreycliffCF-Medium.eot');
    src: url('fonts/eng/GreycliffCF-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/eng/GreycliffCF-Medium.woff2') format('woff2'),
        url('fonts/eng/GreycliffCF-Medium.woff') format('woff'),
        url('fonts/eng/GreycliffCF-Medium.ttf') format('truetype'),
        url('fonts/eng/GreycliffCF-Medium.svg#GreycliffCF-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('fonts/eng/GreycliffCF-Thin.eot');
    src: url('fonts/eng/GreycliffCF-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/eng/GreycliffCF-Thin.woff2') format('woff2'),
        url('fonts/eng/GreycliffCF-Thin.woff') format('woff'),
        url('fonts/eng/GreycliffCF-Thin.ttf') format('truetype'),
        url('fonts/eng/GreycliffCF-Thin.svg#GreycliffCF-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Greycliff CF';
    src: url('fonts/eng/GreycliffCF-Regular.eot');
    src: url('fonts/eng/GreycliffCF-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/eng/GreycliffCF-Regular.woff2') format('woff2'),
        url('fonts/eng/GreycliffCF-Regular.woff') format('woff'),
        url('fonts/eng/GreycliffCF-Regular.ttf') format('truetype'),
        url('fonts/eng/GreycliffCF-Regular.svg#GreycliffCF-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


 /*   body {
      font-family: 'Greycliff CF';
      background: #f9fafc;
      margin: 0;
      padding: 0;
      color: #333;
    }*/

    .containernew {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      justify-content: center;
    }

    .main-card {
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      display: flex;
      flex: 2;
      min-width: 320px;
      max-width: 800px;
      overflow: hidden;
    }
     .main-cardN {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    /* min-width: 430px; */
    /* max-width: 860px; */
    /* overflow: hidden; */
    width: 1100px;
    padding: 50px;
}

    .conty{
       justify-content: flex-start;
    display: flex;
    gap: 0px;
    align-items: center;
    flex-direction: column;

  }
.elec {
    background-image: url(images/elec.png);
    background-repeat: no-repeat;
    padding-left: 50px;
    height: 50px;
    display: flex;
    align-items: center;
        color: #f47321;
}
.wtr {
    background-image: url(images/drop.png);
    background-repeat: no-repeat;
    padding-left: 50px;
    height: 50px;
    display: flex;
    align-items: center;
        color: #46a2d9;
}
.sumry-header{
background: #ffffff;
    padding: 10px 20px;
    font-size: 28px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sumry {
    background-image: url(images/note.png);
    background-repeat: no-repeat;
    padding-left: 50px;
    height: 50px;
    display: flex;
    align-items: center;
        color: #d10040;
    
}
.elec1 {
    background-image: url(images/elec.png);
    background-repeat: no-repeat;
}
.wtr1 {
    background-image: url(images/drop.png);
    background-repeat: no-repeat;
}
    .section {
      /*flex: 1;
      padding: 30px;
      width: 340px;*/
      padding: 0;
      
    }

    .divider {
        width: 1px;
    background: #e5e5e5;
    margin: 10px 0 90px 0;
    }
    .divider1 {
      width: 100%;
      background: #cbdfe5;
      padding: 0.5px 0 !important;
      margin: 5px 0;
    }
     .dividerh {
    height: 1px;
    background: #e5e5e5;
    margin: 30px 0;
    width: 100%;
    }



/* --- Water Meters Row --- */
.connection-types {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: left;
}

/* hide radios */
.connection-types input[type="radio"] {
  display: none;
}

.type-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

/* icon circle */
.type-circle::before {
  content: "";
  width: 60px;
  height: 60px;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin-bottom: 8px;
  background-size: 60% auto;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  transition: all 0.3s ease;
}

.type-circle span {
  font-size: 14px;
  color: #333;
  transition: all 0.3s ease;
  font-family: 'Greycliff CF Demi';
}

/* example dummy icons (black versions) */
.local::before { background-image: url("images/local-n.png"); }
.expat::before { background-image: url("images/resi-n.png"); }
.commercial::before      { background-image: url("images/comm-n.png"); }
.industrial::before { background-image: url("images/indu-n.png"); }
.agriculture::before      { background-image: url("images/agri-n.png"); }

/* hover effect */
.type-circle:hover::before {
  border-color: #22c55e;
  background-color: #d1fae5;
}
.type-circle:hover span {
  color: #22c55e;
}

/* ✅ hover state (radio checked) */
#local:hover + .local::before {
  background-image: url("images/local-a.png"); /* green version */
}
#expat:hover + .expat::before {
  background-image: url("images/resi-a.png");
}
#commercial:hover + .commercial::before {
  background-image: url("images/comm-a.png");
}
#industrial:hover + .industrial::before {
  background-image: url("images/indu-a.png");
}
#agriculture:hover + .agriculture::before {
  background-image: url("images/agri-a.png");
}


/* ✅ active state (radio checked) */
#local:checked + .local::before {
  background-image: url("images/local-a.png"); /* green version */
  background-color: #d1fae5;
  border-color: #22c55e;
}

#expat:checked + .expat::before {
  background-image: url("images/resi-a.png");
  background-color: #d1fae5;
  border-color: #22c55e;
}
#commercial:checked + .commercial::before {
  background-image: url("images/comm-a.png");
  background-color: #d1fae5;
  border-color: #22c55e;
}
#industrial:checked + .industrial::before {
  background-image: url("images/indu-a.png");
  background-color: #d1fae5;
  border-color: #22c55e;
}
#agriculture:checked + .agriculture::before {
  background-image: url("images/agri-a.png");
  background-color: #d1fae5;
  border-color: #22c55e;
}

/* active label text */
.connection-types input[type="radio"]:checked + .type-circle span {
  color: #22c55e;
  font-family: 'Greycliff CF Demi';
  
}

    .local .icon { background-image: url("images/local-n.png"); }
    .expat .icon { background-image: url("images/resi-n.png"); }
    .commercial .icon { background-image: url("images/comm-n.png"); }
    .industrial .icon { background-image: url("images/indu-n.png"); }
    .agriculture .icon { background-image: url("images/agri-n.png"); }

    .local:active .icon { background-image: url("images/local-a.png"); }
    .expat:active .icon { background-image: url("images/resi-a.png"); }
    .commercial:active .icon { background-image: url("images/comm-a.png"); }
    .industrial:active .icon { background-image: url("images/indu-a.png"); }
    .agriculture:active .icon { background-image: url("images/agri-a.png"); }

    ul.tabs li.active { color: #16a34a; }
    ul.tabs li.active .icon {
      border-color: #16a34a;
      background-color: #e6f9f0;
    }
    ul.tabs li:hover .icon { border-color: #16a34a; }


    .input-group {
      margin: 0;
    }
    .input-group label {
      display: block;
      font-size: 16px;
      margin-bottom: 10px;
      color: #000;
      font-weight: 500;
    }
    .input-group input {
      /*width: calc(100% - 22px);*/
      width: 320px;
      padding: 10px;
      border: none;
      border-radius: 10px;
      font-size: 18px;
      text-align: center;
      background: #efefef;
      height: 38px;
      color: #8f8f8f;
      font-weight: 500;
    }
.buttonsec{
      display: flex;
    justify-content: center;
    margin-top: 30px;
}

    .button {
      display: inline-block;
      background: #333;
      color: #fff;
      padding: 12px 20px;
      border-radius: 50px;
      text-decoration: none;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      height: 54px;
      width: 170px;
      font-family: 'Greycliff CF Demi';
    }
     .button1 {
      display: inline-block;
      background: #333;
      color: #fff;
      padding: 12px 20px;
      border-radius: 50px;
      text-decoration: none;
      font-size: 14px;
      text-align: center;
      margin-top: 50px;
      cursor: pointer;
      height: 54px;
      width: 170px;
      font-family: 'Greycliff CF Demi';
      display: none;
    }



    .fldstl{
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
gap: 30px;
text-align: center;
}

/*Result CSS*/
 .accordion, .summary {
      max-width: 1292px; /* fixed width */
      margin: 20px auto 20px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }

    .accordion-header {
      background: #ffffff;
      padding: 10px 20px;
      cursor: pointer;
      font-size: 28px;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    p{
      padding: 10px 20px;
    }

    .accordion-header span {
      font-size: 30px;
      font-weight: bold;
    }

    .accordion-content {
      display: block; /* default open 
      padding: 15px 20px;*/
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 15px;
    }

    th, td {
    border: 1px solid #dcdcdc;
    padding: 15px;
    font-size: 16px;
    border-left: none;
    color: #000000;
    width: 20%;
    }

    th {
      background: #e2f8ff;
      font-weight: bold;
      text-align: left;
    }
    td {
      background: #ffffff;
      font-weight: normal;
      text-align: right;
    }
    .total {
      text-align: left;
      font-weight: bold;
      background: #fff3ea;
    }
    .servchrg {
      text-align: left; font-weight: bold;
      background: #f3f3f3;
    }


    /*.summary {
      padding: 20px;
    }*/
    .summary-tb{
      padding: 0;
    }
    .sum-ttl{
      background-color: #e2f8ff;
      font-weight: bold;
      color: #000000;
      text-align: left;
    }

    .summary h3 {
    padding: 15px 20px 0 20px;
    margin: 0;
    margin-bottom: 5px;
    }

    .summary-table td {
      padding: 15px 12px;
      border: 1px solid #ddd;
      
      border-left: none;
    }

    .summary-table {
      width: 100%;
      border-collapse: collapse;
    }


  /* ----------------------------
   RESPONSIVE MEDIA QUERIES
-----------------------------*/
@media (max-width: 1280px) {

    .accordion, .summary {
        max-width: 90%;
    }
}

    /* 🖥️ 1024px - Tablet Landscape */
    @media (max-width: 1024px) {
        body {
         /*   padding: 20px;*/
        }

        .main-card {
            max-width: 100%;
        }

        .main-cardN {
            max-width: 90%;
            width: 100%;
            padding: 20px;
        }

        .section {
            /*padding: 20px;*/
            width: 800px;
        }

        .summary {
            max-width: 300px;
            max-width: 100%;
        }

        .notes {
            width: 90%;
        }

        .tooltip .tooltip-text {
            width: 500px; /* reduce tooltip width */
            font-size: 12px; /* smaller font */
            padding: 8px 12px;
            left: 160px;
        }

        .conty {
            gap: 4px;
            padding: 0;
            flex-direction: column;
        }

        .connection-types {
            gap: 50px;
            justify-content: center;
        }
    }

    @media (max-width: 600px) {
        th, td {
            font-size: 12px;
            padding: 6px;
        }

        .accordion-header {
            font-size: 16px;
        }
    }

    /* 📱 768px - Tablet Portrait */
    @media (max-width: 768px) {
        .containernew {
            flex-direction: column;
            align-items: center;
            padding: 30px;
        }

        .main-card {
            /*flex-direction: column;*/
            width: 100%;
            max-width: 100%;
        }

        .divider {
            width: 1px;
            margin: 20px 0;
        }

        .summary {
            max-width: 100%;
            margin-top: 20px;
        }

        .notes {
            width: 84%;
            margin: 0px auto;
        }

        .button {
            margin: 30px 0 20px 0;
            width: 100%;
            max-width: 220px;
        }

        .input-group input {
            width: auto;
        }

        .section {
            width: auto;
        }

        .buttonsec {
            margin-top: 10px;
        }
    }

    @media (max-width: 435px) {
        .main-card {
            flex-direction: column;
        }

        .fldstl
        {
            display:grid!important;
        }

        .accordion, .summary {
            max-width: 100%!important;
        }


        .divider {
            width: 90%;
            margin: 0 auto;
            height: 1px;
        }

        .input-group input {
            height: 22px;
        }

        .input-group {
            margin: 20px 0;
        }

        .section {
            /*padding: 15px;*/
            width: auto;
        }

        .containernew {
            padding: 30px;
        }

        .section h3 {
            font-size: 18px;
        }

        .total-load {
            font-size: 36px;
        }

        .donut {
            width: 160px;
            height: 160px;
        }

        .sum {
            font-size: 14px;
        }

        .sum-ttl {
            font-size: 14px;
        }

        .request-btn {
            width: 100%;
        }

        .connection-types {
            gap: 15px;
        }

        .type-circle::before {
            width: 50px;
            height: 50px;
        }

        .type-circle span {
            font-size: 12px;
        }

        .meter-row {
            gap: 6px;
        }

            .meter-row label {
                width: 40px;
                font-size: 12px;
            }

        .meter-value {
            width: 40px;
            font-size: 12px;
        }

        .notes {
            width: 72%;
            margin: 0px auto;
        }

        .summary {
            max-width: 100%;
            margin-top: 0;
        }

        .fldstl {
            display: flex;
            flex-direction: column;
            gap: 0px;
        }

        .button {
            margin: 10px 0 20px 0;
        }

        .dividerh {
            margin: 20px 0;
        }
    }

    /* 📱 425px - Small Phones */
    @media (max-width: 425px) {
        .main-card {
            flex-direction: column;
        }

        .divider {
            width: 90%;
            margin: 0 auto;
            height: 1px;
        }

        .input-group input {
            height: 22px;
        }

        .input-group {
            margin: 20px 0;
        }

        .section {
            /*padding: 15px;*/
            width: auto;
        }

        .containernew {
            padding: 30px;
        }

        .section h3 {
            font-size: 18px;
        }

        .total-load {
            font-size: 36px;
        }

        .donut {
            width: 160px;
            height: 160px;
        }

        .sum {
            font-size: 14px;
        }

        .sum-ttl {
            font-size: 14px;
        }

        .request-btn {
            width: 100%;
        }

        .connection-types {
            gap: 15px;
        }

        .type-circle::before {
            width: 50px;
            height: 50px;
        }

        .type-circle span {
            font-size: 12px;
        }

        .meter-row {
            gap: 6px;
        }

            .meter-row label {
                width: 40px;
                font-size: 12px;
            }

        .meter-value {
            width: 40px;
            font-size: 12px;
        }

        .notes {
            width: 72%;
            margin: 0px auto;
        }


        .summary {
            max-width: 100%;
            margin-top: 0;
        }

        .main-cardflx {
            display: flex;
            flex: 2;
            flex-direction: column;
        }

        .main-cardN {
            max-width: 90%;
            width: 90%;
            padding: 20px;
        }
    }

    /* 📱 375px - Extra Small Phones */
    @media (max-width: 375px) {

        .containernew {
            padding: 30px;
            flex-direction: revert;
        }
    }


/*

    .email-icon-block, .iconv2-volumn, .sound-icon-block, .icon-Home, .iconv2-setting, .icon-search srch-btn {
        display: none !important;
    }


    .v2 .search-icon-block .icon-search {
        display: none !important;
    }*/