* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

:root {
  --orange: #ff7a00;
  --black-background: #2f2f2f;
  ---green: #00b388;
  ---red: #ee5331;
  ---grey: #d4d4d4;
  ---grey-border: #737373;
  ---font-color-1: #34475e;
  ---font-color-2: #7a7c87;
}

body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: "Mulish", sans-serif;
  display: grid;
  grid-template-areas:
    "as hh hh"
    "as main main"
    "as main main";
  grid-template-columns: 235px 1fr 1fr;
  grid-template-rows: 8% 22% 70%;
}

.side-navs {
  grid-area: as;
  display: flex;
}

.first-column {
  background: #2f2f2f;
  height: 100vh;
  padding-top: 120px;
  position: fixed;
  width: 50px;

  li {
    list-style: none;
  }

  a {
    display: flex;
    text-decoration: none;
    color: #ff7a00;
    font-size: 25px;
    padding: 15px 10px;
  }
  a:hover {
    background: #ffff;
    transition: 0.7s;
  }
}

.second-column {
  height: 100vh;
  display: flex;
  flex-flow: column;
  gap: 10px;
  padding: 10px;
  padding-top: 40px;
  border-right: 1px solid #d4d4d4;
  background: #ffff;
  left: 50px;
  position: fixed;

  p {
    color: #34475e;
    font-weight: 700;
    letter-spacing: 1px;
  }

  a {
    text-decoration: none;
    color: #737373;
    padding: 5px;
    font-size: 12px;
    &:hover {
      color: #ff7a00;
    }
  }

  .fa-chart-simple {
    font-size: 20px;
    padding: 8px;
    color: #737373;
    &:hover {
      color: #ff7a00;
    }
  }
  .fa-table {
    font-size: 20px;
    padding: 8px;
  }
  .requests {
    color: #ff7a00;
  }
}

.top-nav {
  grid-area: hh;
  padding: 10px;
  border-bottom: 1px solid #d4d4d4;
  position: fixed;
  z-index: 10;
  background:  #ffffff;
  width: 83.5%;
  left: 17.6%;
}

.nav-links-2 {
  display: flex;
  gap: 20px;
  justify-content: end;
}

a,
li {
  text-decoration: none;
  list-style: none;
  color: #7a7c87;
  font-size: 12px;

  .fa-bell {
    font-size: 25px;
  }
  .fa-angle-down {
    font-size: 15px;
    padding: 0px 10px;
  }
}

.fa-bars {
  display: none;
}

main {
  width: 100%;
  grid-area: main;
}

.survey-div {
  padding: 20px 40px;

  h4 {
    color: #34475e;
  }
  p {
    font-size: 12px;
    column-rule-color: #737373;
    padding-bottom: 20px;
  }

  .survey-container {
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
  }

  .rovenheights {
    display: flex;
    gap: 50px;

    .tower {
      font-size: 12px;
      text-align: center;

      .fa-circle {
        font-size: 8px;
        color: blue;
      }
    }
    .rov-properties h4 {
      color: #34475e;
      padding: 10px;
    }

    .row-1,
    .row-2 {
      display: flex;
      gap: 50px;
      padding: 10px;

      h5 {
        color: #34475e;
        font-weight: normal;
      }
      p {
        font-size: 12px;
        color: #34475e;
      }
    }
  }

  .policy-progress{
    h4{
      color: #ff7a00;
      font-size: 15px;
      padding-bottom: 20px;
    }
    p{
      font-size: 12px;
      padding-top: 20px;
    }
  }
  .progress-container {
    position: relative;
    width: 100px;
    height: 100px;
  }
  
  .progress-circle {
    transform: rotate(-130deg);
  }
  
  .progress-circle circle {
    fill: none;
    stroke-width: 10;
  }
  
  .progress-circle .bg {
    stroke: url(#gradient);
  }
  
  .progress-circle .progress {
    stroke: url(#gradient);
    stroke-linecap: round;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 1s;
  }
  
  .progress-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: white;
    background-color: var(--orange);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

}

.insured-div {

    padding: 20px 40px;
    h4{
        color: #34475e;
        padding-bottom: 20px;
    }
      
    .details-container {
        border: 1px solid #d4d4d4;
        border-radius: 10px;
        height: 50vh;
        padding: 15px;

        .tabs {
            display: flex;
            gap: 50px;
            color: #737373;
            border-bottom: 1px solid #d4d4d4;


            .tab-link1{
                color: #ff7a00;
                border-bottom: 4px solid  #ff7a00;
            }
            button{
              padding: 5px 20px;
              border: none;
              background: #fff;
              font-family: "Mulish", sans-serif;
              cursor: pointer;
            }
        }

        .details{
            padding-top: 40px;

            .row-1, .row-2{
                display: flex;
                padding: 10px;
                gap: 80px;

                h5{
                    color: #2f2f2f;
                    font-weight: normal;
                }
                p{
                    font-size: 12px;
                    color: #34475e;
                }
            }
        }
    }
        
}

.property-desc{
  display: none;
  padding: 20px 40px;
  h4{
    color: #34475e;
    padding-bottom: 20px;
  }
  .details-container {
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    height: 50vh;
    padding: 15px;

    .tabs {
      display: flex;
      gap: 50px;
      color: #737373;
      border-bottom: 1px solid #d4d4d4;
      
      .tab-link2{
        color: #ff7a00;
        border-bottom: 4px solid #ff7a00;
      }

    }

      button{
      padding: 5px 20px;
      border: none;
      background: #fff;
      font-family: "Mulish", sans-serif;
      cursor: pointer;
    }

    .content p{
      padding: 15px;
      background: #ebe9e9;
      height: 200px;
      border-radius: 8px;
      margin-top: 20px;
      font-size: 12px;
    }
  }
}


.supporting-doc{
  display: none;
  padding: 20px 40px;
  h4{
      color: #34475e;
      padding-bottom: 20px;
  }
    
  .details-container {
      border: 1px solid #d4d4d4;
      border-radius: 10px;
      height: 50vh;
      padding: 15px;

      .tabs {
          display: flex;
          gap: 50px;
          color: #737373;
          border-bottom: 1px solid #d4d4d4;


          .tab-link3{
              color: #ff7a00;
              border-bottom: 4px solid  #ff7a00;
          }
          button{
            padding: 5px 20px;
            border: none;
            background: #fff;
            font-family: "Mulish", sans-serif;
            cursor: pointer;
          }
      }

      table{
        border-collapse: collapse;
      }
        table td{
          padding:5px 20px;
          font-size: 12px;
          border-bottom: 1px solid #d4d4d4;
        }

      .one{
          padding-right: 500px;
          padding-top: 10px;
        }
        .orange{
          color: #ff7a00;
          cursor: pointer;
        }
      
  }
}



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

    body{
        grid-template-areas: 
        "hh  hh"
        "main main"
        "main main";
        grid-template-columns: 1fr;
    }
    .side-navs{
        display: none;

    }  
    
    .top-nav{
        grid-area: hh;
        width: 100%;
        left: 0;

        .fa-bars{
            display: block;
            position: absolute;
            left: 10px;
            top: 20px;
        }
    }

    .survey-div{
        padding: 0px 15px;
        display: block;
        margin-top: 0;
        padding-top: 0;

        
        .survey-container{
            padding: 5px;
            border: none;
            gap: 10px;
            display: block;
            
            .rovenheights{
                display: block;
                
                .tower, .rov-properties{
                    width: 100%;

                }
                .row-1, .row-2{
                    gap: 20px;
                }
            }

            .policy-progress{
              margin-left: 40%;
            }
        }
    }
    .insured-div{
        padding: 10px 15px;
        display: block;
        margin-top: 80px;

       .details-container{
        height: 100vh;

        .tabs{
            gap: 10px;
            
            a{
                font-size: 12px;
            }
        }

        .details{
            padding-top: 5px;

            .row-1, .row-2{
                display: block;
                flex: 1;
                gap: 12px;
                padding: 20px;

                h5{
                    font-size: 15px;
                    font-weight: 800;
                    padding: 5px;
                }
                p{
                    font-size: 12px;
                }
            }
        } 
    } 
    }
}

@media screen and (min-width:768px)  and  (max-width:1150px) {
    .top-nav{
      width: 73%;
      left: 25%;
    }

    .rovenheights{
      /* gap: 10px; */
    }
      .row-1, .row-2{
        gap: 10px;

        padding: 0;
      }

      .details-container{
        width: 100%;

        .details{
          .row-1,.row-2{
            gap: 10px;
            padding: 0;
            display: block;
          }
        }
      }
}