/**
Theme Name: Teclan
Author: teclan ltd
Author URI: https://www.teclan.com
Description: Child theme for teclan ltd
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teclan
Template: astra
*/

:root {
    --tec-smoothy: cubic-bezier(.33,.93,.58,.97);
    --container-width: 1140px;
    --tec-teal: #024D56;
    --tec-cinnamon: #DE6610;
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    -webkit-text-stroke: 1px #fff;
    -webkit-text-fill-color: transparent;
  }
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    -webkit-text-stroke: 1px #fff;
    -webkit-text-fill-color: transparent;
  }
}





/* Uncomment this to restore the white space on pages if there is no sidebar */
.ast-plain-container.ast-no-sidebar #primary {margin:4em 0}

/*
Uncomment this to fix Astra submenu bug and set background manually*/
.main-header-menu .sub-menu {background-color:#DE6610}

/* Adjust the UAEL Posts Widget so the C2A buttons are all bottom aligned. */
.uael-post__inner-wrap {height: 100%; display: flex;flex-direction: column;justify-content: space-between;}
.uael-post__content-wrap {display: flex; flex-direction: column;flex-grow: 1;}
.uael-post__content-wrap .uael-post__read-more {align-self:center;margin-top:auto}

.tec-column-fix > .elementor-widget-wrap {align-content: flex-start;flex-direction: column}
.tec-column-fix > .elementor-widget-wrap > .elementor-element:last-child {margin-top:auto}

.ast-site-identity {padding:0}

/* Custom Triangles */

.triangle-holder .box {background-size:auto}
.triangle-holder {width:100%;padding-top:61.8%;position:relative;overflow: hidden;}
.triangle-holder-inner {transform:rotate(-31.7deg);position: absolute;top:0;left:0;width:200%;height:200%;margin-left: -80%;margin-top: -85.29%}
.crossleft .triangle-holder-inner {transform:rotate(31.7deg);margin-left: -20%;}

.triangle-holder .boxrow {display:flex;flex-wrap:nowrap;width:100%;height:100%}
.triangle-holder .box {display: flex;align-items: center;justify-content: center;border:1px solid #fff;flex-basis:38.2%;position:relative;background-size:cover}
.triangle-holder .innerbox {position:absolute;transform:rotate(31.7deg);padding:40px;display:block;color:#fff;}
.triangle-holder.crossleft .innerbox {transform:rotate(-31.7deg)}

.triangle-holder .innerbox h3 {color:#fff;margin-bottom:0;font-size:20px}
.triangle-holder .innerbox p {margin-bottom:0}

.triangle-holder .box > a {display:block;background-color:transparent;height:100%;width:100%}
.triangle-holder .box > a:hover {background-color: rgba(225,109,37,0.8);}
.triangle-holder .box.top-left > a:hover, .box.lower-right > a:hover {background-color:rgba(5,76,84,0.8);}
.triangle-holder .box > a:hover .innerbox {display:block;-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}

.triangle-holder.crossright .box.top-left {flex-basis:100%;background-position: right bottom;}
.triangle-holder.crossright .box.top-left .innerbox {bottom:0%;left:30%}
.triangle-holder.crossright .box.top-right {display:none}
.triangle-holder.crossright .box.lower-left {flex-basis:100%;background-position: right top;}
.triangle-holder.crossright .box.lower-left .innerbox {top:0%;left:40%}
.triangle-holder.crossright .box.lower-right {display:none}

.triangle-holder.crossleft .box.top-left {display:none}
.triangle-holder.crossleft .box.top-right {flex-basis:100%;background-position: -200px bottom;background-size:auto}
.triangle-holder.crossleft .box.top-right .innerbox {bottom:3%;left:37%}
.triangle-holder.crossleft .box.lower-left {display:none}
.triangle-holder.crossleft .box.lower-right {flex-basis:100%;background-position: left top;}
.triangle-holder.crossleft .box.lower-right .innerbox {top:0%;left:30%}

@media screen and (min-width:1024px) {
	.triangle-holder .innerbox {display:none}
	.triangle-holder .box {background-size:auto}
	.triangle-holder.crossright .box.top-left {flex-basis:61.8%;background-position: right bottom;}
	.triangle-holder.crossright .box.top-left .innerbox {bottom:10%;left:75%}
	.triangle-holder.crossright .box.top-right {display:block;background-position: left bottom;}
	.triangle-holder.crossright .box.top-right .innerbox {bottom:1%;left:0}
	.triangle-holder.crossright .box.lower-left {flex-basis:61.8%;background-position: right top;}
	.triangle-holder.crossright .box.lower-left .innerbox {top:10%;right:10%;left:auto;}
	.triangle-holder.crossright .box.lower-right {display:block;background-position: left top;}
	.triangle-holder.crossright .box.lower-right .innerbox {top:5%;left:3%}

	.triangle-holder.crossleft .box.top-left {display:block;background-position: right bottom;}
	.triangle-holder.crossleft .box.top-left .innerbox {bottom:1%;left:67%;padding:0;text-align:right;}
	.triangle-holder.crossleft .box.top-right {flex-basis:61.8%;background-position: left bottom;}
	.triangle-holder.crossleft .box.top-right .innerbox {bottom:10%;left:25%}
	.triangle-holder.crossleft .box.lower-left {display:block;background-position: right top;}
	.triangle-holder.crossleft .box.lower-left .innerbox {top:0%;right:1%}
	.triangle-holder.crossleft .box.lower-right {flex-basis:61.8%;background-position: left top;}
	.triangle-holder.crossleft .box.lower-right .innerbox {top:5%;left:5%}
	
}

@media screen and (min-width:1400px) {
	.triangle-holder .innerbox h3 {font-size:inherit}
	.triangle-holder.crossleft .box.top-left .innerbox {bottom:1.5%;left:71%;padding:40px;text-align:left}
	.triangle-holder.crossleft .box.lower-left .innerbox {top:10%;right:3%}
	
}

/* Teclan Button */

.teclan-button {
    text-decoration: none;
    border-bottom:1px solid #fff;
    display: inline-block;
    padding: 0 0 10px;
    position:relative;
}
 
.teclan-button:before {
    content:"";
    border-radius:10px;
    height:10px;
    width:10px;
    display:block;
    background-color: #fff;
    position:absolute;
    bottom:-5px;
    right:100%;
    transition: right var(--tec-smoothy) 0.5s;
}

 
.teclan-button:hover:before {
    right:-10px;
}

.teclan-button.dark {border-bottom:1px solid var(--tec-teal)}

.teclan-button.dark:before {background-color: var(--tec-teal)}

.footer .mauticform-innerform input.mauticform-input {background-color: #0E1416;
border: 1px solid #3C4345;
border-radius: 10px;
color: #CACACA;}