@import url("_locations-module.css");
@import url("_signup-module.css");

.contact-section {clear: both; width: 100%; padding: 80px 0 80px; position: relative; z-index: 1; background-color: var(--white);}
.contact-main {gap: 14.71%; color: var(--black);}
.contact-main h1 {margin: 0 0 10px 0; font-size: 2.5rem; line-height: 1.2; letter-spacing: -0.8px; color: var(--black);}
.contact-main .contact-left {width: 350px;}
.contact-main .contact-left:only-child {flex-grow: 1;}
.contact-main .contact-left .optional-text {color: var(--optional-grey); margin: 0 0 11px 0;}
.contact-main .contact-left .address {margin: 44px 0 0 0;}
.contact-main .contact-left .address .h6 {margin-bottom: 10px; color: var(--black);}
.contact-main .contact-links {clear: both; width: 100%; margin:0; padding: 0 0 0 6px;}
.contact-main .contact-links li:before {display: none;}
.contact-main .contact-links li {margin: 0 0 24px 0; font-size: 1rem; line-height: 1.5; font-weight: normal; padding: 0 0 0 43px;}
.contact-main .contact-links li i {font-size: 27px; position: absolute; left: 0; top: 3px;}

.contact-main .contact-right {flex: 1;}


.contact-details {clear: both; width: 100%; padding: 80px 0 80px; position: relative; z-index: 1;}
.cd-main {gap:6.25%; align-items: center;}
.cd-lt {width: 350px; position: relative; margin-bottom: auto; background-color: var(--black);}
.cd-lt .brand-star {right: -24px; z-index: 1; top: 11px;}
.cd-lt-inner { padding: 23px 24px 24px 24px;  border-bottom: solid 5px var(--theme);;}
.cd-lt-inner .optional-text {margin: 0 0 14px 0; color: var(--theme)}
.cd-lt-inner .h5 {margin: 0 0 10px 0; color: var(--white);}


.cd-rt {flex: 1;}
.cd-rt .brand-icon {left: 69px; top: -95px; z-index: -1;}
.cd-rt .cd-txt {display: block; font-size: 0.75rem; font-weight: bold; line-height: 1; color: var(--cd-txt); margin: 0 0 8px 0;}
.cd-wrap {gap:34px 4.705882352941177%;}
.cd-grid {width:100%; max-width: 256px;}
.cd-grid a {font-size: 1.25rem; font-weight: bold; line-height: 1.3; letter-spacing: -0.4px; color: var(--cd-a); display: inline-flex; gap: 12px; align-items: center;}
.cd-grid a svg path{fill: var(--cd-a);}
.cd-grid a:hover {color: var(--cd-ahover);}
.cd-grid a:hover svg path {fill:var(--cd-ahover);}
body .frm_style_formidable-style.with_frm_style .frm_submit .button, body .frm_style_formidable-style.with_frm_style .frm_submit button {background-color: var(--black); color: var(--white);}

/*-- media css starts here --*/
@media only screen and (max-width:1280px) {
    .contact-main {gap:7%;}
}

@media only screen and (max-width: 1023px) and (min-width:200px){
    .contact-section {padding: 40px 0;}
    .contact-main .contact-left {width: 100%;}
    .contact-main .contact-right {width: 100%;}
    
    .contact-details {padding: 40px 0;}
    .cd-main {display: block;}
    .cd-rt {width: 100%;}
}

@media only screen and (max-width: 1023px) and (min-width: 768px){
    .contact-details {padding: 64px 0;}
    .cd-rt {margin: 60px 0 0 0;}
    .cd-grid {max-width: 219px;}
    .cd-lt { width: 100%;}
       
}

@media only screen and (max-width: 767px) and (min-width: 200px){ 
    .contact-main .contact-left {font-size: 1rem; line-height: 1.5;}
    .contact-main .contact-left .address .h6 {font-size: 1.125rem; line-height: 1.33; letter-spacing: -0.36px;}
    .contact-main h1 {font-size: 2rem; letter-spacing: -0.64px; line-height: 1.19;}
    
    .contact-main .contact-right {margin: 16px 0 0 0;}
    .cd-rt {margin: 39px 0 0 0;}
    .cd-rt .brand-icon {left: inherit; top: -248px; right: -125px;}
    .cd-wrap {gap:20px;}
    .cd-grid {max-width: 100%;}
    .cd-grid a {font-size: 1.625rem; line-height: 1.23; letter-spacing: -0.52px;}
    .cd-lt{width: 100%;}

}
