@media (min-width:1200px){
    .container{
        width:1170px;
    }
    h1{
        font-size: 50px;
    }
    h2{
        font-size: 28px;
    }

    .pt-114{
        padding-top: 114px;
    }
    .pb-114{
        padding-bottom: 114px;
    }
    .pt-140{
        padding-top: 140px;
    }
    .pb-140{
        padding-bottom: 140px;
    }
    .pt-100{
        padding-top: 100px;
    }
    .pb-100{
        padding-bottom: 100px;
    }

}




@media (min-width:1680px){

    .container{
        width:1400px;
    }
    
}

/*=============     1680 css start  =============*/

@media(max-width:1680px) {

h1{
    font-size: 35px !important;
}
h2 {
    font-size: 23px;
}

#location .left-img img{
    display: block;
    object-fit: cover;
    object-position: center;
    height: 100%;
}

#location .location-text{
    padding: 17.8% 20%
}

 #facilites .left-img img{
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
    }

    .southplace2-residences-wrp #page-banner {
        height: 864px;
    }


}
/*=============     1680 css end    =============*/



/*=============     1600 css start  =============*/

@media(max-width:1600px) {

#gallery .wi50 {
    padding: 0 25px;
    width: 45%;
}
#facilites .fa-right {
    padding: 42px 80px;
    box-sizing: border-box;
}
#location .location-text {
    padding: 16.8% 20%;
}
#contact .contact-form .dFlx .wi50 {
    width: 45%;
}
     .new-tabarea .tab {
    width: 26%;
}
}

/*=============     1600 css end  =============*/




/*=============     1440 css start  =============*/

@media(max-width:1440px) {

    h1 {
        font-size: 38px;
    }
    h2 {
        font-size: 22px;
    }

    #location .location-text {
        padding: 14.8% 20%;
    }   

    .southplace2-residences-wrp #page-banner {
        height: 774px;
    }     
     #contact .contact-form .dFlx .wi50 {
    width: 100%;
}
    #contact .contact-form .form-group .form-control {
    width: 96%;
}
  .new-tabarea .tab {
    width: 26%;
}   
    
}   
    
    
/*=============    1440 css End  =============*/   



/*=============     1366 css Start  =============*/
@media(max-width:1366px) {
    .southplace2-residences-wrp #page-banner {
        height: 738px;
    }
     .new-tabarea .tab {
    width: 26%;
}
  
}
/*=============     1366 css End  =============*/


/*=============     1280px css start  =============*/

@media (max-width: 1280px){
    .southplace2-residences-wrp #page-banner {
        height: 690px;
    }
}

/*=============     1280px css End  =============*/
    

/*=============     1080 css Start  =============*/
@media(max-width:1080px) {
    #sec1 .sec1-left-panel .big-img img {
        position: relative;
        width: 100%;
        z-index: 9;
        max-width: 450px;
    }
    #sec1 .sec1-left-panel .big-img span::after {  
        width: 78%;
        height: 90%;
    }

    #sec1 .sec1-left-panel .small-img {        
        top: 49%;  
        z-index: 999;
    }
    #sec1{
        padding-bottom: 75px;
    }
}
/*=============     1080 css End    =============*/
    
    
/*=============     1024 css Start  =============*/
@media(max-width:1024px) {
    #sec1 .sec1-left-panel .big-img img{
        max-width: 480px;
    }
    #sec1 .sec1-left-panel .big-img span::after {
        width: 83%;
        height: 90%;
    }
    #sec1 .sec1-left-panel .small-img {
        top: 53%;        
    }
    #bottom-footer .bootom-footer-right ul li {
        display: inline-block;
        padding: 17px 22px;
    }
   .southplace2-residences-wrp #Southplace2 .img-wrp {
        max-width: 360px;
        margin: auto;
    }
    .southplace2-residences-wrp #Southplace2 {
        height: 500px;
    }
    #contact .contact-form .dFlx .wi50 {
    width: 100%;
}
  .new-tabarea .tab {
    width: 25%;
}
     
    
    
}
/*=============     1024 css End  =============*/





    
@media(max-width: 767px){
    body.lock {
        overflow: hidden;
    }

    .header__logo{
        flex: 0 0 40px;
    }
    .header__body {
        height: 24px;
        padding: 15px;
        text-align: right;
    }
    .header__burger {
        display: block;
        width: 30px;
        height: 20px;
        z-index: 9999;
        text-align: right;
        position: absolute;
        right: 15px;
    }
    .header__burger span {
        position: absolute;
        background-color: #ffffff;
        width: 100%;
        height: 2px;
        left: 0;
        top: 9px;
        transition: all 0.3s ease 0s;
    }
    .header__burger::before,
    .header__burger::after{
        content: '';
        background-color: #ffffff;
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
        top: px;
        transition: all 0.3s ease 0s;
    }
    .header__burger::after{
        bottom: 0;
    }
.header__list li {
    display: block;
}
    .header__burger.active::before {
        transform: rotate(45deg);
        top: 9px;
    }
    .header__burger.active::after {
        transform: rotate(-45deg);
        bottom: 9px;
    }
    .fixed-header{position: fixed !important;z-index: 999 !important;}
    .header__burger.active span {
        transform: scale(0);
    }
    .header__menu {
        position: absolute;
        right: -120%;
         left: -11px; 
        width: 100%;
        /* height: 100%; */
        overflow: auto;
        transition: all 0.3s ease 0s;
        background-color: rgba(0, 0, 0, 0.95);
        padding: 70px 10px 20px 10px;
        z-index: 999;    
        display: none;
     }

     .header__menu.active {
         right: 0;
         display: block;
     }

     .header__list{
         display: block;
         text-align: left;
     }

     .header__list li{
         margin:0px 0px 20px 0px;
     }

     .header__link {
         font-size: 18px;
     }
    .container {
    max-width: 100%;
    padding: 0 15px;
}
    #top-banner .container {
    height: auto;
}
    #top-banner .dFlx {
    height: auto;
}
 #top-banner .wi33 {
    width: 100%;
}   
 #top-banner .wi33 .inner-left .banner-head-sub h5 {
    font-size: 25px;
    padding-right: 0;
}   
  #top-banner {
    height: 100%;
    margin-top: 50px;
}  
 #top-banner .wi33 .inner-left .logo {
    margin-top: 0;
}   
    #top-banner .wi33 .inner-left .logo img{height: 120px;}    
    #top-banner .wi33 {
    background: #dcb458e6;
    }
    #top-banner .wi33 .inner-left .banner-head {
    margin-top: 20px;
}
    #top-banner .wi33 .inner-left .banner-head span {
    font-size: 13px;
    }
 #page-banner h2 {
    font-size: 50px;
    }
  #page-banner h3 {
    font-size: 35px;    margin-bottom: 10px;
    }
    #page-banner {
    height: 300px;
}
 .pt-100 {
    padding-top: 30px;
}   
 .pb-100 {
    padding-bottom:30px;
}   
 #sec1 .sec1-left-panel .big-img img {
    width: 100%;
}   
    .header {
    position: fixed;
    top: 0;z-index: 999;
}
#sec1 .sec1-left-panel {
    width: 100%;
} 
#sec1 .sec1-right-panel {
    width: 100%;
    padding-left: 0;
    padding-top: 30px;
} 
 #sec1 .sec1-left-panel .big-img span::after {
    width: 90%;
    height: 90%;
}      
 #sec1 .sec1-left-panel .small-img {
    position: relative;
    top: 15px;
}   
 h3 {
    font-size: 28px;
}   
#sec1 .sec1-left-panel .big-img span {
    width: 100%;
}
 #sec1 .sec1-left-panel .small-img img {
    width: 100%;
}   
#sec1 .sec1-right-panel strong {
    padding-right: 0;
    margin: 15px 0;
}    
 .sec1-list-inner-sub span {
    width: 100%;
}
#sec1 .sec1-list .sec1-list-inner {
    width: 100% !important;
}    
#sec1 .sec1-list .sec1-list-inner, #sec1 .sec1-list .sec1-list-inner2 span {
    font-size: 45px;
} 
    #contact .con-call img {
        height: 45px;
    margin-right: 5px;
}
    .project-link li a {
    font-size: 14px;
    padding: 10px 12px;
}
    .project-link li {
    margin-right: 0;
}
    #contact .con-call {
    font-size: 20px;
}
#sec1 .sec1-list .sec1-list-inner2 {
    width: 100%;
    margin-top: 15px;
}    
 #sec1 {
    padding-bottom: 30px;
}   
 .wi50 {
    width: 100%;
}
 #facilites .fa-right {
    padding: 30px;
}   
#facilites .fa-right h3 {
    font-size: 25px;
    line-height: 50px;
}
  #facilites .fa-right h3 span {
    font-size: 40px;
}  
 #facilites .fa-right h3 span i {
    top: -18px;
}   
 .header__link {
    padding: 10px;
}   
 #gallery .wi50 {
    width: 100%;
}   
 #testimonials .testimonials {
    width: 100%;
}
    .vid .video-inner{width: 100%; margin: 0 auto;}
.vid .video-inner iframe{ width:100%; height: 300px;}
 #location .location-text {
    padding: 30px;
height: auto;
}
#type .wi33 {
    width: 100%;
}
    #contact .contact-left-img {
    height: 350px;
}
#contact .contact-left-img .con-head {
    padding-left: 15px;
    padding-top: 15px;
}
    #contact .contact-form .dFlx .wi50 {
    padding: 0;
    width: 100%;
}
 #contact .contact-form .dFlx {
    margin: 0;
}   
    #b-logo img{width:100%;}    
   .visible-title .header__link {
    padding: 15px;
}
    #b-logo {
    padding: 30px 15px;
}
 #bottom-footer {
    text-align: center;
}   
  #bottom-footer .bootom-footer-right {
    text-align: center;
}
    #bottom-footer .bootom-footer-right ul li {
    display: inline-block;
    padding: 12px;
}
    #bottom-footer img{ height: 60px;}   
  #facilites .fa-right .list-div p span {
    padding-right: 5px;
}
    #facilites .fa-right .list-div p{font-size: 14px;}  
.flot-btn ul li a {
    position: relative;
    width: 254px;
    height: 70px;
    line-height: 74px;
    font-size: 14px;
    }
 .flot-btn ul li a:before {
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
}
  .flot-btn ul li a:after {
    width: 35px;
    height: 50px;
}  
     .flot-btn ul li.btn3 a:after{
    width: 35px;
    height: 50px;
} 
 .flot-btn {
    position: relative;
    top: 3%;
}   
    #residences .residences-item div{margin: 0;} 
    .southplace-shoppes-wrp #e-brochure .clw-50 {
    width: 100%;
}
    #aa .location-text {
    padding: 30px;
}
    .southplace-shoppes-wrp #e-brochure .txt-cntent {
    padding: 30px;
}
  #enq {
    padding: 50px 0;
}  
.southplace2-residences-wrp #top-banner .wi33 {
    width: 100%;
    margin-bottom: 30px;
}    
    
#top-banner .wi33{
    width: 100%;
    margin-bottom: 30px;
}    
     
    
}

    @media(min-width:768px) and (max-width:991px){
        #top-banner .wi33 {
    width: 50% !important;
}
  .flot-btn ul li a {
    width: 275px;
    height: 80px;
    line-height: 84px;
    font-size: 14px;
}      
  .flot-btn ul li a:before {
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
}      
  .flot-btn ul li a:after {
    width: 43px;
    height: 61px;
}   
          .flot-btn ul li.btn3 a:after{
    width: 43px;
    height: 61px;
} 
 #top-banner .wi33 .inner-left .banner-head-sub h5 {
    font-size: 38px;
}       
  .header__link {
    padding: 30px 20px !important;
}      
 #page-banner h2 {
    font-size: 80px;
    margin-bottom: 15px;
}       
 #page-banner h3 {
    font-size: 43px;
}       
 #page-banner {
    height: 500px;
}       
 #sec1 .sec1-left-panel {
    width: 100%;
}       
 #sec1 .sec1-right-panel {
    width: 100%;
    padding-left: 0;
    margin-top: 10%;
}       
#sec1 .sec1-left-panel .big-img span {
    width: 450px;
}
 #sec1 .sec1-left-panel .big-img img {
    width: 490px;
}
#sec1 .sec1-left-panel .small-img {
    top: 49%;
}        
  h3 {
    font-size: 38px;
}      
  #sec1 .sec1-list .sec1-list-inner {
    width: 100% !important;
}
 #sec1 {
    padding-bottom: 80px;
}       
 .wi50 {
    width: 100%;
}
 #facilites .fa-right {
    padding: 50px;
}
        
 #facilites .fa-right h3 {
    font-size: 30px;
    line-height: 59px;
}
        #facilites .fa-right h3 span {
    font-size: 45px;
}
  #facilites .fa-right h3 span i {
    top: -27px;
}      
 .pb-100 {
    padding-bottom: 80px;
}
.pt-100 {
    padding-top: 80px;
}       
#residences{padding-top: 0 !important;}       
#enq {
    padding: 80px 15px;
        }
   #gallery .wi50 {
    padding: 0 15px;
    width: 100%;
}      
  .container {
    max-width: 100%;
}       
#location .location-text {
    padding: 30px;
    height: auto;
}         
    #contact .contact-left-img .con-head {
    padding-left: 5%;
    padding-top: 5%;
    height: 350px;
}
        
    #contact .contact-form {
    padding: 30px;
}    
#contact .contact-form .dFlx .wi50 {
    width: 100%;
}
 #bottom-footer {
    text-align: center;
}       
#bottom-footer .bootom-footer-right {
    text-align: center;
}        
        
   #b-logo {
    padding: 30px 0;
}   
 #contact .contact-form .form-group .form-control {
    width: 96%;
}       
    #testimonials h3 {
    margin-bottom: 50px;
}
        #testimonials .testimonials {
    width: 80%;
      }
  #aa .location-text {
    padding: 50px;
}      
 .southplace-shoppes-wrp #e-brochure .clw-50 {
    width: 100%;
}       
 .southplace-shoppes-wrp #e-brochure .txt-cntent {
    padding: 50px;
}       
    .new-tabarea .tab button {
    padding: 15px;
    font-size: 16px;
}       
    .new-tabarea .tab {
    width: 24%;
}    
             
        
        
    }   
    
    
    
/*=============     991 css Start   =============*/
@media(max-width:991px) {
    #sec1 .sec1-left-panel .big-img span::after {
        width: 97%;
        height: 90%;
    }
    #sec1 .sec1-left-panel .small-img {
        top: 40%;
    }
    #sec1 .sec1-right-panel {  
        margin-top: 7%;
    }
    .southplace2-residences-wrp  .cstm-wrp2 {
        padding-top: 20px;
    }
    
}
/*=============     991 css End   =============*/


    
/*=============     824 css Start   =============*/
@media(max-width:824px) {
    #sec1 .sec1-right-panel {
        margin-top: 10%;
    }
    #sec1 .sec1-left-panel .small-img {
        top: 49%;
    }
}
/*=============     824 css End     =============*/
    
    
    
/*=============     767 css Start   =============*/
@media(max-width:767px) {
    #sec1 .sec1-left-panel .small-img {
        top: 15px;
    }
    #sec1 .sec1-left-panel .big-img img {
        max-width: 100%;
    }
    #sec1 .sec1-left-panel .big-img span::after {
        width: 94%;
        height: 93%;
    }

    .southplace2-residences-wrp #page-banner {
        height: 300px;
    }

    .southplace2-residences-wrp #sec1 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .southplace2-residences-wrp #sec1 .clw-30 {
        width: 100%;
        margin-right: 0;
        padding: 30px 20px;
        margin-bottom: 30px;
    }
    .southplace2-residences-wrp .cstm-wrp2 .innr-wrp2 .clw-33 {
        width: 100%;
    }

    .southplace2-residences-wrp #gallery .wi50 img {
        height: auto;
    }
.new-tabarea .tab {
    width: 100%;
}
 .tab-con {
    width: 100%;
}   
 .new-tabarea .tab button {
    padding: 15px;
    font-size: 14px;
}   
    
    
}
/*=============     767 css end     =============*/
    
    

/*=============     580 css start   =============*/
@media(max-width:580px) {
    #sec1 .sec1-left-panel .big-img span::after {
        width: 93%;        
    }
    #sec1 .sec1-right-panel {
        margin-top: 4%;
    }
}
/*=============     580 css end     =============*/




/*=============     480 css end     =============*/
@media(max-width:480px) {
    
    #sec1 .sec1-left-panel .big-img span::after {
        width: 90%;
        height: 90%;
    }
}
/*=============     480 css start   =============*/


/*=============     380 css end     =============*/
@media(max-width:380px) {
    
    #sec1 .sec1-left-panel .big-img span::after {
        width: 88%;
        height: 88%;
    }
}
/*=============     380 css start   =============*/