@charset "utf-8";
/* #Additional - Large Screens beyond 1600px
================================================== */
@media only screen and (min-width: 1367px) and (max-width: 1600px) {

.container                                  { max-width: 1250px; }

}



/* #Additional - Large Screens beyond 1366px
================================================== */
@media only screen and (min-width: 1200px) and (max-width: 1366px) {

.container                                  { max-width: 1250px; }

}



/* #iPad Pro - Large Screens beyond 1024px
================================================== */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

.container									{ max-width: 960px; }

.cb-header									{ height: 118px; }
.page-header .logo                          { width: 150px; margin-bottom: -50px; }
    
.menu_box ul.menu li                        { margin-right: 30px; }
.menu_box ul.menu li a                      { font-size: 18px; line-height: 25px; }
.menu_box ul.menu li ul.sub-menu li a       { font-size: 14px; }
.page-header .rightBtn ul.menu li a         { font-size: 18px; }
.page-header .rightBtn a.phone              { font-size: 20px; line-height: 30px; letter-spacing: 2px; }
.page-header .cb_logo                       { width: 100px; }
.page-header.top2                           { height: 120px; }
.page-header.top2 .top_right .top_menu2     { margin: 10px 0; }

#slider                                     { margin-top: 118px; }
#slider .bx-wrapper .bx-controls-direction a { width: 50px; height: 50px; background-size: cover; }

.about_sec .aboutInfo                       { gap: 50px; }
.about_sec .aboutInfo .content h1           { margin: 0 0 15px 0; font-size: 27px; line-height: 32px; }
.about_sec .aboutInfo .content p            { margin-bottom: 20px; }
.about_sec .aboutInfo .rightForm            { max-width: 40%; }
.about_sec .aboutInfo .rightForm h3         { font-size: 25px; }
.about_sec .aboutInfo .rightForm form .form-group .form-control { height: 55px; }
.about_sec .aboutInfo .rightForm form .form-group textarea.form-control { height: 100px; }


/*----------------- Inner Pages -----------------*/
.alignleft, .alignnone                      { max-width: 50%; margin: 0 30px 20px 0; }
.alignright                                 { max-width: 50%; margin: 0 0 20px 30px; }

#inner_banner                               { min-height: 320px; margin-top: 118px; }
#inner_banner h1                            { font-size: 40px; line-height: 45px; }
#inner_banner .breadcrumb li 				{ font-size: 16px; }

.inner_section                              { padding-top: 50px; padding-bottom: 50px; }
.inner_section h2                           { font-size: 40px; line-height: 45px; }

/*----------------- Projects Page -----------------*/
.gallrey_box a.cboxElement                  { height: 145px; }

/*----------------- Service Areas Inner Pages -----------------*/
.areasCtaSection .ctaBox .item              { width: 50%; }
.areasCtaSection .ctaBox .item h4           { font-size: 30px; line-height: 35px; }

/*----------------- Financing Page -----------------*/
.financing_section p                        { font-size: 22px; }


}



/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

.container									{ max-width: 100%; padding: 0 15px; }

#header .top1								{ display: none; }
.page-header .cb_logo                       { width: 140px; }
.page-header.top2							{ top: 0px !important; height: 120px; }
.page-header.top2 .top_right .top_menu2     { margin: 0; }
.dl-menuwrapper                             { margin: 40px 0; }
.page-header .top_right                     { float: right; display: flex; align-items: center; gap: 15px; }
.page-header .top_right .contactBtn         { display: block; }

#slider										{ margin-top: 120px; }
#slider .bx-wrapper .bx-controls-direction a { width: 50px; height: 50px; background-size: cover; }

.about_sec                                  { padding-top: 50px; padding-bottom: 50px; }
.about_sec .aboutInfo                       { gap: 30px; }
.about_sec .aboutInfo .content h1           { margin: 0 0 15px 0; font-size: 27px; line-height: 32px; }
.about_sec .aboutInfo .content h1 br        { display: none; }
.about_sec .aboutInfo .content p            { font-size: 16px; line-height: 26px; }
.about_sec .aboutInfo .rightForm            { max-width: 40%; }
.about_sec .aboutInfo .rightForm h3         { font-size: 20px; line-height: 30px; }
.about_sec .aboutInfo .rightForm form .form-group label { font-size: 18px; line-height: 24px; }
.about_sec .aboutInfo .rightForm form .form-group .form-control { height: 50px; font-size: 18px; line-height: 24px; }
.about_sec .aboutInfo .rightForm form .form-group textarea.form-control { height: 80px; }
.about_sec .aboutInfo .rightForm form .form-group .submit_btn { font-size: 16px; }

.ourServices_sec                            { padding-bottom: 30px; }
.ourServices_sec .moreServicesBox .servicesImg .servicesBtn { font-size: 18px; line-height: 30px; padding: 10px 15px; }
.ourServices_sec .moreServicesBox .servicesInfo { padding: 10px 10px; }

#footer .paymentCard                        { margin-bottom: 30px; }
#footer .copyright p                        { font-size: 16px; line-height: 26px; }
#footer .copyright .footerMenu li a         { font-size: 16px; line-height: 26px; }

/*----------------- Inner Pages -----------------*/
.alignleft, .alignnone                      { max-width: 50%; margin: 0 20px 20px 0; }
.alignright                                 { max-width: 50%; margin: 0 0 20px 20px; }

#inner_banner                               { min-height: 270px; margin-top: 120px; }
#inner_banner h1                            { font-size: 30px; line-height: 35px; }
#inner_banner .breadcrumb li 				{ font-size: 16px; }

.inner_section                              { padding-top: 50px; padding-bottom: 50px; }
.inner_section h2                           { font-size: 30px; line-height: 35px; }
.inner_section h3                           { font-size: 25px; line-height: 30px; }
.inner_section h4                           { font-size: 20px; line-height: 25px; }
.inner_section h5                           { font-size: 18px; line-height: 23px; }
.inner_section p                            { font-size: 16px; line-height: 26px; }
ul.service-areas							{ margin: 0 0 20px 0; }
.inner_section ul li                        { padding-left: 25px; font-size: 16px; line-height: 26px; }
.inner_section ul li::before                { width: 16px; height: 16px; top: 5px; }

/*----------------- Projects Page -----------------*/
.gallrey_box a.cboxElement                  { height: 145px; }

/*----------------- Contact Page -----------------*/
.contact-form .form-control                 { height: 45px; font-size: 16px; padding: 10px 15px }
.contact-form .form-group .submit_btn       { padding: 10px 25px; font-size: 16px; line-height: 26px; }
.contact_detail                             { padding-left: 20px; }

/*----------------- Service Areas Page -----------------*/
ul.column-list                              { margin: 20px 0; gap: 20px; }
ul.column-list li                           { width: calc(100% - 0px); }
ul.column-list li::before                   { top: 3px; }

/*----------------- Service Areas Inner Pages -----------------*/
.areasCtaSection .ctaBox .item              { width: 60%; }
.areasCtaSection .ctaBox .item h4           { font-size: 25px; line-height: 30px; }
.areasCtaSection .ctaBox .item .button      { padding: 10px 15px; font-size: 16px; line-height: 20px; }

/*----------------- FAQs Page -----------------*/
.faqsBox .panel .panel-heading .panel-title { font-size: 18px; line-height: 22px; }

/*----------------- Financing Page -----------------*/
.financing_section .alignleft               { padding: 20px; }    
.inner_section p                            { font-size: 18px; }
.financing_section .clickHere               { padding: 15px 20px; font-size: 16px; line-height: 20px; }




}



/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

.container									{ max-width: 100%; padding: 0 15px; }

#header .top1								{ display: none; }
.page-header.top2 							{ top: 0px !important; height: 80px; }
.page-header .cb_logo						{ width: 90px; }
.page-header .top_cont						{ display: none; }
.page-header.top2 .top_right .top_menu2     { margin: 0; }	
.page-header .top_right                     { float: right; display: flex; align-items: center; gap: 15px; }
.page-header .top_right .contactBtn         { display: block; }
.page-header .top_right .top_menu2			{ display: inline-block; }
.page-header .top_right + .top_right        { position: relative; display: none; width: 100%; padding: 8px 0 8px 0; text-align: center; z-index: -1; }
.page-header .top_right .top_row            { float: none; display: inline-block; width: auto; margin-bottom: 10px; }
.page-header .top_right .top_row ul li a    { margin-right: 10px; margin-left: 10px; font-size: 14px; }
.page-header .top_right .phone              { float: none; display: inline-block; width: auto; padding-top: 0; margin-left: 4px; }
.page-header .top_right .phone .call        { font-size: 14px; }
.dl-menuwrapper                             { margin: 20px 0; }
.menu_box									{ display: none; }

#slider										{ margin-top: 80px; }
#slider .bx-wrapper img 					{ width:auto; max-width: 200%; transform: translate(-200px, 0px); }
#slider .bx-controls 						{ display: none; }
#slider .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: -10px; }
#slider .bx-wrapper .bx-controls-direction a { width: 40px; height: 40px; background-size: cover; }
#slider .bx-wrapper .bx-prev                { left: 15px; }
#slider .bx-wrapper .bx-next                { right: 15px; }

.about_sec                                  { padding-top: 30px; padding-bottom: 50px; }
.about_sec .aboutInfo                       { flex-direction: column; gap: 30px; }
.about_sec .aboutInfo .content h1           { font-size: 24px; line-height: 30px; }
.about_sec .aboutInfo .content h1 br        { display: none; }
.about_sec .aboutInfo .content p            { font-size: 16px; line-height: 26px; }
.about_sec .aboutInfo .rightForm            { max-width: 100%; }
.about_sec .aboutInfo .rightForm h3         { font-size: 18px; line-height: 26px; }
.about_sec .aboutInfo .rightForm form .form-group label { font-size: 16px; line-height: 20px; }
.about_sec .aboutInfo .rightForm form .form-group .form-control { height: 45px; font-size: 16px; line-height: 20px; }
.about_sec .aboutInfo .rightForm form .form-group textarea.form-control { height: 80px; }
.about_sec .aboutInfo .rightForm form .form-group .submit_btn { font-size: 16px; line-height: 24px; }

.ourServices_sec                            { padding-bottom: 10px; }
.ourServices_sec .moreServicesBox           { margin-bottom: 20px; }
.ourServices_sec .moreServicesBox .servicesImg .servicesBtn { font-size: 18px; line-height: 30px; padding: 10px 20px; }
.ourServices_sec .moreServicesBox .servicesInfo { padding: 15px 15px; }

#footer                                     { padding-top: 30px; padding-bottom: 30px; }
#footer .ftr_social                         { margin-bottom: 30px; }
#footer .ftr_social ul                      { justify-content: center; }
#footer .ftr_social ul li a img             { width: 40px; }
#footer .paymentCard                        { margin-bottom: 30px; }
#footer .copyright p                        { font-size: 16px; line-height: 26px; }
#footer .copyright .footerMenu li a         { font-size: 16px; line-height: 26px; }


/*----------------- Inner Pages -----------------*/
#inner_banner                               { min-height: 270px; margin-top: 80px; }
#inner_banner h1                            { font-size: 30px; line-height: 35px; }
#inner_banner .breadcrumb li 				{ font-size: 16px; }

.inner_section                              { padding-top: 40px; padding-bottom: 40px; }
.inner_section h2                           { font-size: 30px; line-height: 35px; }
.inner_section h3                           { font-size: 25px; line-height: 30px; }
.inner_section h4                           { font-size: 20px; line-height: 25px; }
.inner_section h5                           { font-size: 18px; line-height: 23px; }
.inner_section p                            { font-size: 16px; line-height: 26px; }
.inner_section ul li                        { padding-left: 25px; font-size: 16px; line-height: 26px; }
.inner_section ul li::before                { width: 16px; height: 16px; top: 5px; }

ul.service-areas							{ margin: 0 0 30px 0; }

/*----------------- Projects Page -----------------*/
.gallrey_box a.cboxElement                  { height: 200px; }

/*----------------- Contact Page -----------------*/
.contact-form .form-control                 { height: 45px; font-size: 16px; padding: 10px 15px }
.contact-form .form-group .submit_btn       { padding: 10px 25px; font-size: 16px; line-height: 26px; }
.contact_detail                             { padding-left: 0; }

/*----------------- Service Areas Page -----------------*/
ul.service-areas 							{ column-count: 2; column-gap: 15px; }
ul.column-list                              { margin: 20px 0; gap: 20px; }
ul.column-list li                           { width: calc(100% - 0px); }
ul.column-list li::before                   { top: 3px; }

/*----------------- Service Areas Inner Pages -----------------*/
.areasCtaSection .ctaBox .item              { width: 90%; }
.areasCtaSection .ctaBox .item h4           { font-size: 25px; line-height: 30px; }
.areasCtaSection .ctaBox .item .button      { padding: 10px 15px; font-size: 16px; line-height: 20px; }

/*----------------- FAQs Page -----------------*/
.faqsBox .panel .panel-heading .panel-title { font-size: 18px; line-height: 22px; }

/*----------------- Financing Page -----------------*/
.financing_section .alignleft               { padding: 15px; }
.financing_section .clickHere               { padding: 12px 16px; font-size: 16px; line-height: 20px; }



}



/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.container { /*width: 420px;*/ width: 100%; padding: 0 15px; }

}