.tp-dottedoverlay.twoxtwo {
   content: '';
    background: rgba(0, 0, 0, 0.70) !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    left: 0;
}

[class*="Pane"] {
    margin-bottom: 0;
}

.brickell-container {
padding: 100px 0 0 0;
background: #353b43;
text-align: center;

h2, h3, h4, h5 {
font-family: Bebas Neue;
color: #d9b79a;
}

h2 {
font-size: 45px;
line-height: 50px;

  span {
  	color: #d8e8f2;
  } 
}

h3 {
font-size: 2.7rem;
line-height: 1.2;
margin-bottom: 40px;
}

h4 {
font-size: 2rem;
line-height: 1.2;
}

h5 {
font-size: 1.5rem;
line-height: 1.2;
margin-bottom: 20px;
}

p {
font-family: Montserrat;
color: #DCE0E4;
 
 span{
 	color: #d9b79a;
 }
}


a {
 color: #DCE0E4;
 text-decoration: underline;
}

a:hover {
 color: #d8e8f2;
 background: linear-gradient( to bottom, #977c65 0%, #D9B79A 100% );
 background-size: 4px 50px;
}

a.btn {
background-color: transparent;
font-size: 1rem;
color: #DCE0E4;
padding: 10px 30px;
border-radius: 0px;
border: 1px solid #4e595f;
border-bottom: 2px solid #D9B79A;
text-decoration: none;
}

a.btn:hover {
background-color: #D9B79A;
}

.border-title{
    border-top: 2px solid rgba(236, 239, 241, .5);
    height: 1px;
    margin: 15px auto 50px auto;
    position: relative;
    width: 30%;
    }
    
 .border-title:before{
 	  content: '';
    height: 6px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    top: -4px;
    width: 50px;
    background-color: #d9b79a
 }
 
 
 .section-title-border-gray{
 	position: relative;
 }
 
  .section-title-border-gray:before{
  	 position: absolute;
    content: '';
    height: 2px;
    width: 120px;
    bottom: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #d9b79a;
  }
  
  .section-title-border-gray::after {
    position: absolute;
    content: '';
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: #dce0e4;
    border: 2px solid #d9b79a;
    box-shadow: 0 0 0 5px #dce0e4;
    bottom: -14px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.sectionOne {
max-width: 1200px;
margin: 0 auto 100px auto;

 p{
 	text-align: left;
 }
 
 div.boxes {
   display: flex;
	div {
		background: #14171b;
		padding: 30px;
		margin: 15px;
	}
	
	div.section-title-border-gray{
 	padding: 0;
 	margin-bottom: 60px;
 	}
	
	img {
		width: 290px;
		height: 218px;
		margin-bottom: 30px;
	}
}

}


.sectionTwo {
display: flex;
background: #14171b;

  .secTwo-content{
  	padding: 80px 50px;
  	text-align: left;
  	
  	div.whyBrickell{
  		display: flex;
  		  		
  		.secTwo-title{
  			display: inline-flex;
			align-items: flex-start;
  			
  			img{
  				width: 30px;
  				height: auto;
  				object-fit: contain;
  				margin-right: 10px;
  			}
  		}
  		
  		p{
  			padding: 0 40px;
  		}
  	}
  	
  	h4{
  		margin: 50px 0 30px 0;
  	}
  }
  
  img {
  	max-width: 100%;
    height: auto;
  }
  
  .section-title-border-half{
  	position: relative;
  }
  .section-title-border-half:before{
  	position: absolute;
    content: '';
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: 0 0;
    border: 2px solid #d9b79a;
    bottom: -14px;
    left: 0;
  }
  .section-title-border-half:after{
  	position: absolute;
    content: '';
    height: 2px;
    width: 50px;
    left: 15px;
    bottom: -10px;
    background: #d9b79a;
  }
}

.sectionThree, .sectionEight, .sectionTen {
position: relative;
padding: 100px 0 80px 0;
background: url("https://portals.kw-ic.com/Portals/7/Images/Home/bg-sec-three.jpg") no-repeat center;
background-size: cover;
z-index: 0;

.secThree-content{
max-width: 1200px;
margin: auto;
}

 h2, h4 {
 	color: #D8E8F2;
 }
}

.sectionThree:before,
.sectionEight:before,
.sectionTen:before{
 content: "";
  position: absolute;
  inset: 0;  
  background: rgba(0,0,0,0.5); 
  z-index: -1; 
    }

.sectionFour {
 max-width: 1200px;
 margin: 100px auto;
 padding: 0 20px;
 
    .gridBoxes{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        
        div {
            padding: 60px 20px;
            background: #14171b;
             box-shadow: 2px 2px 5px rgba(44, 44, 44, 0.3), 13px 13px 0 rgba(216, 232, 242, 0.7);
        }
        
        img {
		width: 100%;
		height: auto;
		margin-bottom: 30px;
	}
    }
}

.sectionFive {
   margin: 150px 0 100px 0;
   
    .carousel img {
      width: 25%; 
      flex-shrink: 0;
      margin: 10px;
      border-radius: 4px;
      border: 1px solid #ffffff;
    }

    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      color: #fff;
      border: none;
      font-size: 2rem;
      padding: 5px 10px;
      cursor: pointer;
    }

    .arrow.left {
      left: 10px;
    }

    .arrow.right {
      right: 10px;
    }

}


.sectionSix {
    padding: 100px 0 80px 0;
    background: #14171b;
    
    .secSix-content{
         max-width: 1200px;
         margin: auto;
    }
    
    .local-benefits {
        display: flex;
        
        
        div {
            flex: 1;
            text-align: left;
            padding: 20px;
        }
        
        .progressBar {
            p {
            font-family: Montserrat;
            text-transform: uppercase;
            color: #dce0e4;
            font-size: 18px;
            
            span {
                color: #545658;
                font-size: 25px;
                font-style: italic;
            }
        }
        }
        
        .progress {
            height: 6px;
            background: #e9ecef;
            border-radius: 0;
            padding: 0;
            margin: -15px 0 12px 0;
        }
        
        .bar1{
            background: #7ad4fd;
            width: 90%;
        }
        .bar2{
            background: #fd7a92;
            width: 70%;
        }
        .bar3{
            background: #fde57a;
            width: 80%;
        }
         .bar4{
            background: #fda47a;
            width: 95%;
        }
        .bar5{
            background: #7afde5;
            width: 75%;
        }
    }
}

.sectionSeven {
 max-width: 1200px;
 margin: 100px auto;
 padding: 0 20px;
  
 	.gallery {
 		display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        
        
      img {
		width: 100%;
		height: auto;
	}
 	}
 }
 
 
 .sectionEight {
 	.secEight-content{
 		max-width: 1200px;
		margin: auto;
		display: flex;
		
		img{
			margin-bottom: 5px;
		}
		
		h4{
			color: #d9b79a;
			margin-bottom: 0;
			
		}
 	}
 	
 	.secEight-boxes{
 	 background: #14171b;
 	 padding: 25px 0;
 	 flex: 1;
 	 margin: 10px;	
 	}
 	
 	h5{
 		font-family: Montserrat;
 		font-size: 30px;
 		color: #D8E8F2;
 		line-height: 50px;
 		margin-bottom: 8px;
 	} 	
 }
 
 
.sectionNine {
max-width: 1200px;
margin: 100px auto;

 p{
 	text-align: left;
 }
 
 div.boxes {
   margin-bottom: 70px;
   display: flex;
	div {
		background: #2a2e36;
		margin: 15px;
		flex: 1;
	}
	
	img {
		width: 100%;
		height: auto;
		margin-bottom: 30px;
	}
}

.box-content{
padding-bottom: 20px;
text-align: left;

	a {
 	color: #d9b79a;
 	text-decoration: underline;
	}

	a:hover {
 		color: #d8e8f2;
 		background: linear-gradient( to bottom, #977c65 0%, #D9B79A 100% );
 		background-size: 4px 50px;
	}
	}

}

 .sectionTen {
 	.secTen-content{
 		max-width: 1200px;
 		margin: auto;
 	}
 		
 	 .carousel img {
      width: auto; 
      height: auto;
    }
    
 }
 
 .sectionEleven {
max-width: 1200px;
margin: 100px auto;
padding: 20px;

 p{
 	text-align: left;
 }
 
 div.boxes {
   margin: 70px auto;
   display: flex;
	div {
		background: #2a2e36;
		margin: 15px;
		flex: 1;
	}
}

.box-content{
padding: 20px 10px;
text-align: left;

	a {
 	color: #d9b79a;
 	text-decoration: underline;
	}

	a:hover {
 		color: #d8e8f2;
 		background: linear-gradient( to bottom, #977c65 0%, #D9B79A 100% );
 		background-size: 4px 50px;
	}
	}

}


.sectionTwelve {
    padding: 100px 0 80px 0;
    background: #14171b;
    
    .secTwelve-content{
         max-width: 1200px;
         margin: auto;
    }
    
    .get-in-touch {
        display: flex;     
        div {
            flex: 1;
            text-align: left;
        }       
    }
    .contact-details{
        display: flex;
        gap: 10px;

        img{
            width: 16px;
            height: 16px;
            object-fit: contain;
        }

        p{
            line-height: 1.4;
        }
    }
}



}



/* carousel */
    .carousel {
      position: relative;
      margin: auto;
      overflow: hidden;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

       
/* end of carousel */



  .form-container {
            padding: 0 30px;
        }

        .form-group {
            margin-bottom: 15px;
        }

         input::placeholder {
            color: #fff;
        }

        .form-group input[type="text"],
        .form-group input[type="email"],
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid rgba(236,239,241,.07);
            box-sizing: border-box;
            background-color: transparent;
        }

        
        .form-group input[type="text"]:hover,
        .form-group input[type="email"]:hover,
        .form-group textarea:hover {
            border: 1px solid #d9b79a;
        }


        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        .form-group button {
            background-color: #d9b79a;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
        }
        .form-group button:hover {
            background-color: #c6a68a;
        }


/* mobile styles */
@media (max-width: 992px) {
.brickell-container {

.sectionOne {

 div.boxes {
   display: block;
   max-width: 700px;
   margin: auto;

	div {
		margin-bottom: 30px;
	}
	
	img {
		width: 100%;
		height: auto;
	}
}
}

.sectionTwo {
	display: block;
}

.sectionThree {

.secThree-content{
max-width: 85%;
}

}

.sectionFour {
 
    .gridBoxes{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.sectionFive {
      
    .carousel img {
      width: 100%; 
    }
}


.sectionSix {
   
    .local-benefits {
        display: block;
    }
}

.sectionSeven {
  
 	.gallery {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 	}
 }

  .sectionEight {
 	.secEight-content{
		display: block;
 	}
 	
 }


 .sectionNine {
 
 div.boxes {
   display: block;
   max-width: 700px;
   margin: auto;
	div {
		margin: 25px;
	}
}

}

 .sectionEleven {
 
 div.boxes {
   display: block;

}

}



.sectionTwelve {
    .secTwelve-content{
        padding: 30px;
    }
    
    .get-in-touch {       
        display: block;
}
 
  .form-container {       
        margin-top: 60px;
}


}
}
/* end of mobile styles */