/*
Theme Name:   Circular Squared
Theme URI:    https://circularsquared.com/
Description:  Theme for Circular Squared
Author:  Liquid Thought
Author URI:  https://www.liquidthought.co.za
Version:  1.0.0
Text Domain:  circular-squared
*/

@charset "UTF-8";

/* General ================================== */
* {box-sizing:border-box;}
body {background:white;margin:0px;font-family:"HelveticaProRoman", "Arial", "san-serif";font-weight:400;font-size:16px;-webkit-font-smoothing: antialiased;color:black;line-height:1.14em;position:relative;}
h1, h2, h3, h4 {font-weight:400;margin:0px;line-height:1.14em;}
p {margin:0px;line-height:1.14em;}

/* Zoom ================================== */
.zoom {transform-origin: left top;transform:  scale(1);box-sizing:border-box;min-height:500px;--scale-factor: 1.923412341;background: white;
text-rendering: optimizeLegibility; 
filter: none; 
}
.zoom:after {
    content:"";
}
@media screen and (min-width: 1200px){
    .zoom {width:1200px;background: transparent;transform:  scale(var(--scale-factor)) translate(0px,0px);
}
}

/* Navigation ================================== */
.navigation {position:fixed;top:0px;left:0px;width:100%;height:109px;display:flex;justify-content: space-between;padding:30px 40px;z-index:100;transition:background .2s ease-out;}
.navigation.background {background: #000;}
.navigation ul {margin:10px 0 0 0;display:flex;list-style:none;}
.navigation ul li {margin-left:30px;}
.navigation ul a {color:#fff;font-size:14px;text-decoration:none;}
.navigation ul a:hover, .navigation ul li.over a, .navigation ul li a.active {text-underline-offset: 6px;text-decoration-thickness: 4px;text-decoration: underline;}
.navigation img {max-width:120px;height:auto;}
.navigation .mobileBurger {display:none;width:50px;height:50px;padding:10px;position:relative;} 
.navigation .mobileBurger:before {content:"";display:block;width:30px;height:4px;background:#fff;margin-top:5px;transition:transform .1s linear;} 
.navigation .mobileBurger:after {content:"";display:block;width:30px;height:4px;background:#fff;margin-top:8px;transition:transform .1s linear;}  
.navigation.over img {opacity:0;transition:opacity .2s linear;}
.navigation.over .mobileBurger:before,.navigation.over .mobileBurger:after {top: 50%;margin-top: 0px;transform-origin: center;position: absolute;transform: rotate(45deg);}
.navigation.over .mobileBurger:after {transform: rotate(-45deg);}

@media screen and (max-width:576px){
    .navigation ul {display:flex;opacity:0;pointer-events: none; position:fixed;left:0;top:200px;width:100%;background:black;height:calc(100% - 60px);padding: 80px 0px 0px 30px;flex-direction: column;transition:all .2s ease-in;} 
    .navigation.over ul {top:60px;opacity:1;pointer-events: all;transition:all .3s ease-out;}
    .navigation ul a {font-size: 34px;display: block;line-height: 1em;padding: 10px 0px;}
    .navigation {padding: 10px 10px 10px 20px;height: 70px;}
    .navigation .mobileBurger {display:block;}
	.navigation ul a:hover, .navigation ul li.over a, .navigation ul li a.active {text-decoration-thickness: 6px;}
}

/* Header ================================== */
.section-default {}
.section-header {padding:160px 40px 140px 40px;background: #000;display: flex;align-items: flex-end;justify-content: space-between;position:relative;color:#fff;}
.section-header h1 {font-size:50px;line-height:1.05em;text-transform:uppercase;}
.section-header>div {flex:1;position:relative;max-width:450px;}
.section-header>div.header-animation {max-width:calc(50% - 40px);}
.section-header p {margin:0px;padding:80px 0px 40px 0px;line-height: 1.14em;}
.section-header p.thank-you {padding:0px;}
.section-header:before {content:"";position:absolute;width:0.5px;height:100%;background:#ffffff20;left:50%;top:0px;}

.header-animation {display: flex;flex-direction: column;align-content: center;align-items: center;transform: translateY(20px);}
.header-animation h2 {font-size:80px;text-transform: uppercase;margin:0px;line-height: 1em;margin-top:40px;}
.header-animation .shape {width:320px;height:320px;position:relative;}
.header-animation .shape .yellow {width:320px;height:320px;position:relative;border-radius:100%;background:#ffed00;}
.section-header>div:nth-of-type(1) img {position:absolute;top:calc(100% + 70px);left:0px;animation: bounceArrow4 5s ease-in-out infinite;animation-delay: 4s;}
.header-animation p {display:none;}

.section-intro {padding:80px 40px 0px 40px;display:flex;justify-content: space-between;}
.section-intro p {flex:1;max-width:calc(50% - 20px);}
.section-intro h3 {max-width:calc(40% - 20px);font-size:30px;}


@keyframes bounceArrow4 {
  0%,  20%, 50%, 80%, 100% {
	transform: translateY(0);
  }
  8% {
	transform: translateY(-10px);
  }
  15% {
	transform: translateY(10px);
  }
}

@media screen and (max-width:1024px){
    .section-header {flex-direction: column;align-items: flex-start;justify-content:flex-start;}
    .section-header>div {max-width:100%;}
    .section-header p {max-width:500px;}
    .section-header>div:nth-of-type(1) img {top: calc(100% - 34px);left: auto;right: 0px;}
    .section-header:before {display:none;}
    .section-header>div.header-animation {max-width: 100%;width: 100%;padding:100px 0 0 0;transform: none;}
    .section-header {padding:160px 40px 60px 40px;}
    .header-animation h2 {padding-bottom:80px;}
    .header-animation p {display:block;padding:0px;margin:0px 0px 40px 0px;max-width: none;}
    .section-intro {display:none;}
}
@media screen and (max-width:576px){
    .section-header h1 {font-size: 34px;max-width: 310px;}
    .section-header p {padding: 40px 0 20px 0;}
    .section-header {padding: 110px 20px 0px 20px;}
    .section-header>div.header-animation {border-top: 1px solid white;margin:110px -20px 0px -20px;width: calc(100% + 40px);max-width: none;padding:60px 20px 10px 20px;}
    .header-animation h2 {font-size:calc(100vw / 8);padding-bottom: 50px;}
    .section-header>div:nth-of-type(1) img {top: calc(100% + 56px);left: 0;right: auto;}
    .header-animation .shape {width:160px;height:160px;}
    .header-animation .shape .yellow {width:160px;height:160px;}
    .header-animation p {padding:0px;}
}

/* Form header ================================== */
.form-header {display:flex;position:relative;z-index:95;}
.form-header>div {flex:1;padding-right:20px;position:relative;}
.form-header>div p {position: absolute;top: calc(100% + 10px);left: 0;color: #D90F16;padding: 0px;font-size: 13px;display:none;}
.form-header>div:nth-of-type(3), .form-header>div:nth-of-type(5) {padding-right:0px;}
.form-header input.textfield {height:50px;display:flex;justify-content: center; border:none;outline:none;border-bottom:1px solid white;font-size:14px;line-height:1.14em;width:100%;max-width:100%;-webkit-appearance: none;appearance: none;background:none;color:#fff;border-radius:0;padding-left:0px;}
.button {border:1px solid white;height:50px;display:flex;justify-content: center;align-items: center;padding:0px 30px;font-size:14px;text-transform:uppercase;-webkit-appearance:none;appearance:none;background:none;color:#fff;cursor:pointer;}
.button:hover {background:white;color:#000;}

.form-header .textfield::placeholder {color: white;opacity: 1;}
.form-header .textfield::-ms-input-placeholder {color: white;}
.form-header .textfield:focus::placeholder {color: #ffffff30;opacity: 1;}
.form-header .textfield:focus::-ms-input-placeholder {color: #ffffff30;}
.form-header .textfield:focus {border-bottom:3px solid #fff;}
.form-header .textfield:focus:after {content:"";height:5px;width:100%;}
.form-header .textfield.error {border-bottom:1px solid #D90F16;}
.thank-you {display:none;}
.button-arrow {display:inline-flex;justify-content: center;align-items: center;border:1px solid #fff;height:50px;padding:0px 30px;}
.button-arrow path, .button-arrow line {stroke:white;}

.form-header .first, .form-header .last {opacity:0;pointer-events: none;position:absolute;top:-5000px;}
.form-header.step1 .first, .form-header.step2 .last {opacity:1;pointer-events: all;top:0;position:relative;}
.dropdown {display: flex;font-size: 13px;justify-content: space-between;border-bottom: 1px solid white;height: 50px;align-items: center;cursor:pointer;position:relative;}
.dropdown ul {opacity:0;bottom:-10px;pointer-events: none;transition:all .2s linear;list-style:none;background:#fff;margin:0px;padding:10px;position:absolute;width:100%;}
.dropdown ul li {padding:10px;color:black;background:white;transition:all .2s linear;}
.dropdown ul li:hover {background:black;color:white;}
.dropdown.select ul {opacity:1;bottom:0px;pointer-events: all;}
.dropdown.error {border-color:#D90F16;}

@media screen and (max-width:1024px){
    .form-header {max-width:510px;}
}

/* Header animation ================================== */
.shape {display:flex;flex-wrap:wrap;overflow: hidden;}
.shape div {transition:border-radius .3s linear, transform .3s linear, opacity .4s linear;opacity:0;width: 50%;height: 50%;}
.shape.stage0>div:nth-of-type(1) {width: 100%;height: 100%;border-radius: 100%;background: #ffed00;position:absolute;left:0;top:0;opacity:1;}
.shape.stage1>div:nth-of-type(1) {width: 100%; height: 100%; background: #D90F16;position:absolute;left:0;top:0;opacity:1;}
.shape.stage2>div {width: 50%; height: 50%; background: #009FE3; border-radius: 9999px;transform-origin: center;transform: rotate(90deg);opacity:1;}
.shape.stage3>div{width: 50%; height: 50%;position:relative;opacity:1;}
.shape.stage3>div:after {top: 47px;left: 47px;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(0, 150, 64, 0);border-top-color: #009640;border-width: 114px;transform: rotate(-45deg);}

@media screen and (max-width:576px){
    .shape.stage3>div:after {top: 23px;left: 23px;border-width: 56px;}
}

/* Footer ================================== */
footer {color:#fff;background:black;padding:60px 40px 40px 40px;margin-top:100px;}
footer .flex>div:nth-last-of-type(2) p {margin-bottom:40px;}
footer .flex>div:nth-last-of-type(1) {text-align:right;display:flex;flex-direction: column;justify-content: space-between;}
footer .flex>div:nth-last-of-type(1) span {font-size:12px;}
footer .socials {list-style:none;display:flex;justify-content: flex-end;}
footer .socials a {display:block;width:25px;height:25px;margin-left:35px;transition:all .3s linear;background-size:30px;}
footer .socials li:nth-of-type(1) a {margin-left:0;}
footer .socials .instagram {background:url("/wp-content/themes/circular-squared/images/icon-instagram.svg") center center no-repeat;}
footer .socials .facebook {background:url("/wp-content/themes/circular-squared/images/icon-facebook.svg") center center no-repeat;}
footer .socials .linkedin {background:url("/wp-content/themes/circular-squared/images/icon-linkedin.svg") center center no-repeat;}
footer .socials .x {background:url("/wp-content/themes/circular-squared/images/icon-x.svg") center center no-repeat;}
footer .socials a:hover {opacity:0.5;}
footer .flex>div:nth-last-of-type(1) span a {color:white;}
footer .flex>div:nth-last-of-type(1) span br {display:none;}
footer .flex>div:nth-last-of-type(1) span strong {font-weight:400;}

@media screen and (max-width:980px){
    footer .flex {flex-direction:column;} 
    footer .socials {justify-content: flex-start;margin-top:60px;padding:0px;}
    footer .flex>div:nth-last-of-type(1) {text-align:left;}
}

@media screen and (max-width:576px){
    .form-header .button {height:40px;width:100%;}
    .form-header .textfield {height:40px;}
    .form-header {align-items: flex-end;flex-wrap:wrap;}
    .form-header>div {flex:0 0 60%;margin-right:30%;}
    .form-header>div:nth-of-type(1) {margin-bottom:20px;}
    .form-header>div:nth-of-type(3), .form-header>div:nth-of-type(5) {position:absolute !important;left:60%;margin-right: 0px;width: 40%;padding-right: 0px;top:auto  !important;bottom:0 !important;}
	footer {padding: 60px 20px 40px 20px;}
	footer .socials a {width: 35px;height: 35px;background-size: 25px !important;}
	
	.form-header>div p {top: calc(100% + 7px);font-size: 12px;padding-right: 10px;line-height: 1em;}
}


/* General Layout  ================================== */
.section-layout {padding:130px 40px 0px 40px;}
.section-layout .holder {position:relative;}
.section-layout .holder>div {margin-left:17%;}
.section-layout .title {position:absolute;left:0px;top:0px;margin-left:0px !important;}
.section-layout h2 {font-size:100px;line-height:1em;text-transform:uppercase;padding-bottom:56px;border-bottom:1px solid black;margin-bottom:40px;}
.section-layout h2 author {font-size:16px;display:block;font-style:italic;line-height:1em;padding-top:10px;text-transform: none;margin-bottom:10px;}
.section-layout.section-why h2 {font-size:80px;padding-right:40px;}
.flex {display:flex;justify-content: space-between;}
.flex>* {flex:1;}
.section-layout p {max-width:calc(60% - 20px);}
.section-why h3 {max-width:calc(40% - 20px);font-size:30px;}

/* How  ================================== */
.section-how.section-layout .holder>div {margin:0px;}
.section-how h2 {margin-left:17%;margin-bottom:0px;}
.section-how ul {list-style:none;margin:0px;padding:0px;}
.section-how ul li {padding-left:17%;transition:all .2s linear;width: calc(100% + 40px);padding-right:40px;}
.section-how ul h4 {border-bottom:1px solid black;padding:40px 0px 28px 0px;font-size:38px;cursor:pointer;position:relative;user-select: none;-webkit-user-select: none; /*Safari*/-moz-user-select: none; padding-right: 40px;}
.section-how ul h4:before {content:"";background:black;position:absolute;right:0px;top:50%;width:30px;height:5px;transform-origin: center;transform:rotate(90deg);transition:all .2s linear;}
.section-how ul h4:after {content:"";background:black;position:absolute;right:0px;top:50%;width:30px;height:5px;transform-origin: center;transform:none;transition:all .2s linear;}
.section-how ul div {height:1px;overflow:hidden;}
.section-how ul li.over {background:black;color:#fff;padding-bottom:80px;transform: translateY(-2px);}
.section-how ul li.over h4 {border:none;}
.section-how ul li.over div {height:auto;overflow:visible;}
.section-how ul li.over h4:after {transform: rotate(180deg);opacity:0;}
.section-how ul li.over h4:before {transform: rotate(180deg);background:white;}

/* Who  ================================== */
.section-who .flex {flex-wrap:wrap;justify-content: flex-start;}
.section-who .flex>div {flex:0 0 calc((100% - 40px)/3);margin-right:20px;}
.section-who .flex>div:nth-of-type(3n+3) {margin-right:0px;}
.section-who p {max-width:none;padding-bottom:40px;font-size:14px;}
.section-who .imgHolder {height:calc(80vw / 3);max-height:330px;background:#BDBDBD;margin-bottom:20px;position:relative;overflow:hidden;}
.section-who h4 {font-size:36px;margin-bottom:10px;}
.section-who .imgHolder img {position:absolute;left:0px;top:0px;width:100%;height:100%;object-fit: cover;}
.section-who h3 {font-style:italic;margin-bottom:40px;font-size:20px;}

.section-who .flex.partners>div {flex:0 0 calc((100% - 40px)/2);margin-right:20px;}
.section-who .flex.partners>div:nth-of-type(3n+3) {margin-right:20px;}
.section-who .flex.partners>div:nth-of-type(2n+2) {margin-right:0px;}

.section-who .flex.partners .imgHolder {position: relative;background:none;height: 100px;display:flex;flex-direction:column;justify-content: flex-end;align-items: flex-start;margin-bottom:37px;}
.section-who .flex.partners .imgHolder img {position: relative;left: 0px;top: 0px;width: auto;height: auto;object-fit: unset;max-height:100%;max-width:100%;}
.section-who .flex.partners h4 {font-size:16px;text-transform:uppercase;margin-bottom:15px;}
.section-who .flex:not(.flex.partners) {padding-bottom:40px;border-bottom:1px solid black;margin-bottom:35px;}	

/* Where  ================================== */
.section-where .map {background:#efefef;min-height:350px;margin-top:40px;}
.section-where .flex {padding-top:60px;}
.section-where .flex strong {font-size:10px;display:block;font-weight:400;margin-bottom:10px;}
.section-where .flex a {color:black;text-decoration: none;font-size:calc(50vw / 22);position:relative;transition:all .2s linear;}
.section-where .flex a:hover {text-decoration: underline;text-underline-offset: 6px;text-decoration-thickness: 5px;}
.section-where .flex p {font-size:calc(50vw / 22);}
.section-where .flex a:after {content:"";background:url(/wp-content/themes/circular-squared/images/icon-arrow-external.svg) left top no-repeat;width: 24px;display: flex;height: 25px;background-size: cover;position: absolute;left: calc(100% + 10px);bottom: 4px;}

@media screen and (min-width:1200px){
.section-where .flex a, .section-where .flex p {font-size:26px;}
}

.section-layout.section-how p {max-width: none;}

@media screen and (max-width:768px){
.section-layout .holder>div {margin-left: 0;}  
.section-how h2 {margin-left: 0px;}    
.section-how ul {margin-left:-40px;}  
.section-how ul li {padding-left: 40px;}    
.section-who .flex>div {flex:0 0 calc((100% - 20px)/2);}
.section-who .flex>div:nth-of-type(3n+3) {margin-right:20px;} 
.section-who .flex>div:nth-of-type(2n+2) {margin-right:0px;}    
.section-layout .title {position: relative;padding-bottom: 25px;}
.section-who .imgHolder {height:60vw;max-height:330px;}
.section-where .flex {flex-direction:column;padding-top: 0px;}  
.section-where .flex p {margin-top: 40px;} 
.section-where .flex a, .section-where .flex p {font-size:32px;}  
.section-layout.section-why h2 {padding-bottom:27px;}	
.section-why h3 {max-width: none;padding-right: 30px;}
.section-layout h2 {padding-bottom:16px;}
.section-layout p {max-width: none;}	
.section-who p {font-size: 13px;}
.section-who h4 {font-size: 32px;}	
footer .flex>div:nth-last-of-type(2) p {max-width: 480px;}
footer .flex>div:nth-last-of-type(1) {flex-direction: row;}
footer .flex>div:nth-last-of-type(1) span {margin-top:60px;}

footer .flex>div:nth-last-of-type(1) span strong {display:none;}
footer .flex>div:nth-last-of-type(1) span br {display:block;}
footer .flex>div:nth-last-of-type(1) {flex-direction: column;}
footer .flex>div:nth-last-of-type(1) span {margin-top:0px;}		
}

@media screen and (max-width:576px){  
.section-who .flex>div {flex:0 0 100%;}  
.section-who .imgHolder {height:94vw;max-height:none;}
.section-layout h2 {font-size:44px;margin-bottom:20px;padding-bottom: 26px;}   
.section-layout.section-why h2 {font-size:34px;padding:0px;}    
.section-how ul h4 {font-size:24px;}   
.section-layout {padding: 80px 20px 0px 20px;}
.section-layout h2 author {text-align: right;}
.section-layout p {max-width: none;}    
.section-why .flex {flex-direction:column;}
.section-why h3 {max-width: none;font-size: 24px;margin-bottom: 15px;}
.section-why p {max-width: none;}
.section-layout.section-how h2 br {display:none;}  
.section-how.section-layout h2 {margin-bottom:0px;}    
.section-how ul h4 {padding:20px 60px 18px 0px;} 
.section-how ul h4:before, .section-how ul h4:after {width:26px;height:4px;}
.section-how ul li.over {padding-bottom: 50px;padding-top: 5px;} 
.section-how ul li {width: calc(100% + 20px);padding-right: 20px;padding-left: 20px;} 
.section-how ul {margin-left: -20px;}    
.section-who .flex {margin-top: 40px;}    
.section-who h4 {font-size:24px;}  
.section-who p {font-size:13px;}
.section-layout.section-where {padding-top: 20px;} 
.section-where .flex a, .section-where .flex p {font-size: calc(100vw / 16);}
.section-who .flex.partners>div {flex:0 0 100%;}	
.section-who .flex.partners .imgHolder {height:auto;max-height:100px;margin-bottom:19px;}
.section-who .flex.partners .imgHolder img {max-height:100px;}
.section-who .flex:not(.flex.partners) {padding-bottom:40px;margin-bottom:35px;}	
.section-who h3 {font-size:16px;}	
}

/* Image rows  ================================== */
.section-image {padding:100px 40px 0px 40px;display:flex;flex-wrap:wrap;justify-content: space-between;} 
.section-image img {width:100%;height:auto;}
.section-image.images-55 {padding-top:80px;}
.section-image>div {flex:1;max-width:100%;text-align:right;padding-top:10px;font-size:13px;font-style:italic;}

.images-121 img:nth-of-type(1) {flex:1;max-width:calc((100% - 40px)*0.25);} 
.images-121 img:nth-of-type(2) {flex:1;max-width:calc((100% - 40px)*0.5);} 
.images-121 img:nth-of-type(3) {flex:1;max-width:calc((100% - 40px)*0.25);}
.section-image.mobile  {display:none;}

.images-93 img:nth-of-type(1) {flex:1;max-width:calc((100% - 20px)*0.75);} 
.images-93 img:nth-of-type(2) {flex:1;max-width:calc((100% - 20px)*0.25);} 

.images-39 img:nth-of-type(1) {flex:1;max-width:calc((100% - 20px)*0.25);} 
.images-39 img:nth-of-type(2) {flex:1;max-width:calc((100% - 20px)*0.75);} 

.images-55 img:nth-of-type(1) {flex:1;max-width:calc((100% - 20px)*0.5);} 
.images-55 img:nth-of-type(2) {flex:1;max-width:calc((100% - 20px)*0.5);} 

@media screen and (max-width:768px){

.images-121 img:nth-of-type(1) {flex:1;max-width:calc((100% - 20px)*0.5);order:2;} 
.images-121 img:nth-of-type(2) {flex:1;max-width:100%;order:1;margin-bottom:20px;} 
.images-121 img:nth-of-type(3) {flex:1;max-width:calc((100% - 20px)*0.5);order:3;}
.images-121 div {order:4;}

.section-image.images-93 {display:none;}
.section-image.images-39 {display:none;}
.section-image.images-55 {display:none;}   
	
/*replace images*/	
.images-121 {display:none;}
.section-image.mobile  {display:flex;padding: 0;} 
.section-image.mobile img {max-width:100%;width:100%;height:auto;}  
}

@media screen and (max-width:576px){
.section-image {padding-left:20px;padding-right:20px;} 
.section-what h2 br {display:none;}
.section-where .map {background: #efefef;min-height: 0;height: 50vw;}	
}

/* Modal  ================================== */
.modalActivator {position:fixed;top:0px;left:0px;width:100%;height:5px;background:black;z-index:200;opacity:0;display:none;}
.modalActivator.over {display:block;}
.modalHolder {background:rgba(0,0,0,0.6);display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:201;justify-content: center;}
.modalHolder.over {display:flex;padding:20px;}
.modal {color:black;background:#fff;margin:auto;padding:80px 40px;position:relative;max-width: 670px;}
.modal h3 {font-size:38px;margin-bottom:10px;}    
.close {position:absolute;right:12px;top:10px;width:40px;height:40px;cursor:pointer;}
.close:before, .close:after {content:"";background:#000;width:30px;height:4px;top: 50%;margin-top: 0px;transform-origin: center;position: absolute;transform: rotate(45deg);left:5px;}
.close:after {transform: rotate(-45deg);}

.modal .form-header .textfield {border-color:black;color: #000;}
.modal .form-header .textfield:focus {border-color:black;color: #000;}
.modal .button {border-color:black;color: #000;}
.modal .form-header .textfield::placeholder {color: black;opacity: 1;}
.modal .form-header .textfield::-ms-input-placeholder {color: black;}
.modal .form-header .textfield:focus::placeholder {color: #00000030;opacity: 1;}
.modal .form-header .textfield:focus::-ms-input-placeholder {color: #00000030;}
.modal .button:hover {color: #fff;background:black;}
.modal .form-header {margin-top:60px;max-width: 100%;}
.modal .thank-you {margin-top:60px;}
.modal .button-arrow path, .modal .button-arrow line {stroke:black;}
.modal .button-arrow {border-color:black;}
.modal path {stroke:black;}
.modal .dropdown {border-color:black;}
.modal p {font-size: 20px;}



    .scaled-element {
      transition: transform 0.1s; /* Add a short transition */
    }