nav {
    font-family: cursive;
}

a {
    
    transition: color  !important;
}
a:hover {
    color: #007bff !important;
}


.main {

    width: 100%;
    height: 105vh;
  background-image: url(../images/the-town-bg-01.4fb1a448e9b51ceb326a.jpg);
    
    background-repeat: round;
}
    


.heading {
    height: 500px;
}

.Town {
    font-size: 3.5rem !important;
}

.heading2 {
    width: 45% !important;
    height: 320px !important;
}

.yoursite:hover {
    
    cursor: pointer;
}

.sec {
    width: 40%;
}

.main2 {
    width: 100%;
    height: 250px;
    background: linear-gradient(to bottom,#e3987f,#5c648c);
    display: flex !important;
    justify-content: space-evenly !important;
    flex-direction: row !important;
    align-items: center !important;
    box-sizing: border-box !important;
    text-align: center !important;
}
.first {
    width: 10pc;
}
.second {
    width: 10pc;
    
}
.third {
    width: 10pc;
    margin-bottom: 15px;
}
.row {
    column-gap: 47px;
}

.click:hover {
    cursor: pointer;
}
.main3 {
    background-color: white;
    width: 100%;
    height: 200px;
}

.lorem {
    text-align: center;
    width: 100% !important;
}

.main4 {
    background-color: white;
    width: 100%;
    height: 200px;
}

.img-main:hover {
    cursor: pointer;
}

.main5 {
    background-image: url('../images/background.jpg');
    width: 100%;
    height: 500px;
background-size: cover;
background-repeat: round;
    

}

.sub-main {
    height: 100px;
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    margin: auto;
}

::placeholder {
    color: white;
}

.sub-main2 {
    height: 100px;
    display: flex;
    flex-direction: column;
}


@media screen and (max-width:600px) {
    .main {
      background-size:cover !important;
    }
  }


  @media screen and (max-width:600px) {
    .row {
     justify-content: center !important;
     column-gap:0px !important ;
     row-gap: 15px !important;
     text-align: center !important;
    }
  }

  @media screen and (max-width:600px) {
    .sec {
        margin-right: 50px !important;
    }
  }

  @media screen and (max-width:600px) {
    .main2 {
        height: 455px !important;
    }
  }

  @media screen and (max-width:600px) {
    .main4 {
        height: 630px !important;
}
    }

    @media screen and (max-width:600px) {
        .secondsection {
         justify-content: center;
         
         column-gap: 47px !important;
        }
      }

      @media screen and (max-width:600px) {
        .img-main {
         height: 200px !important;
         width: 200px !important;
        }
      }


      @media screen and (max-width:600px) {
        .main5 {
            background-image: url(../images/background.jpg) !important;
            width: 100% !important;
            height: 530px !important;
            background-size: cover !important;
            background-repeat: round !important;
            text-align: center !important;
        }
      }

      /* @media screen and (max-width: 912px) {
        .submain{
            font-size: 15px !important;
        }
      }
      @media screen and (max-width: 600px) {
        .submain2{
            font-size: 15px !important;
        }
      }
      @media screen and (max-width: 600px) {
        .submain3{
            font-size: 15px !important;
        }
      } */

      @media screen and (max-width: 600px) {
        .main4 {
            height:  600px !important;
        } 
    }
        

        @media screen and (max-width: 600px) {
            .main5 {
                height: 630px !important;
        }
            }
    


            @media screen and (min-width:601px) and (max-width: 1200px) {
                .row {
                   row-gap: 12px !important;
                   height: 370px !important;
                   column-gap: 10px;
            }
                }

                @media screen and (min-width:770px) and (max-width: 1000px) {
                    .main4 {
                        height:  370px !important;
                    } 
                }

                @media screen and  (max-width: 400px) {
                    .img-main {
                        height:  116px !important;
                    } 
                }

                @media screen and  (max-width: 1000px) {
                    .heading2 {
                        width: 90% !important;
                        height: 320px !important;
                    }
                    }