/*------------------------------------------------------------------
icon_band.css
Last edited: 9/25/25
[Table of contents]

100. MEDIA QUERIES
    100a. EXTRA SMALL DEVICES (phones 576px and up)
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]

-------------------------------------------------------------------*/
.band-icon {
	position: relative;
}
.band-icon .introduction {
	margin: 0 0 50px;
}
.band-icon [class*="col-md"] {
	margin-bottom: 30px;
}
.band-icon .item-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
	padding: 50px 40px 25px;
	position: relative;
	width: 100%;

}
.band-icon.band-gray .item-wrapper {
	background-color: var(--theme-color-light);
}
.band-icon .item-wrapper:not(.card)::before,
.band-icon .item-wrapper.lightblue-rule:not(.card)::before {
	background-color: var(--theme-color-lightblue);
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 6px;
}
.band-icon .item-wrapper.blue-rule:not(.card)::before {
	background-color: var(--theme-color-blue);
}
.band-icon .item-wrapper.green-rule:not(.card)::before {
	background-color: var(--theme-color-green);
}
.band-icon .item-wrapper.orange-rule:not(.card)::before {
	background-color: var(--theme-color-orange);
}
.band-icon .item-wrapper.has-link::after {
	--shape-color: var(--theme-color-light);
	background-color: var(--shape-color);
	border-radius: 0; 
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 7% 100%, 0% 0%);
	content: ''; 
	height: 21px;
	left: auto;
	position: absolute;
	right: -1px;
	top: -1px;
	transition: 0.4s all ease;
	width: calc(100% - 75px);
}
.band-icon.has-background-blue .item-wrapper.has-link::after {
	--shape-color: var(--theme-color-blue);
}
.band-icon.has-background-lightblue .item-wrapper.has-link::after {
	--shape-color: var(--theme-color-lightblue);
}
.band-icon.has-background-orange .item-wrapper.has-link::after {
	--shape-color: var(--theme-color-orange);
}
.band-icon.has-background-sky .item-wrapper.has-link::after {
	--shape-color: var(--theme-color-sky);
}
.band-icon .item-wrapper.card {
	border-radius: 0;
	border-bottom: 12px solid transparent;
	padding: 40px;
}
.band-icon .item-wrapper.card::before,
.band-icon .item-wrapper.card::after {
	content: none;
}
.band-icon h2,
.band-icon h3,
.band-icon p,
.band-icon .item-wrapper {
	color: var(--theme-color-dark);
}
.band-icon .item-wrapper h3 {
	font-weight: 700;
	margin: 0 0 15px;
}
.band-icon .item-wrapper,
.band-icon .item-wrapper [class^="icon-"],
.band-icon .item-wrapper h3,
.band-icon .item-wrapper p,
.band-icon .item-wrapper a {
	transition: 0.7s all ease;
}
.band-icon .item-wrapper [class^="icon-"] {
	font-size: 80px;
	margin-bottom: 20px;
	padding: 0;
}
.band-icon .item-wrapper a.stretched-link {
	display: block;
	margin-block: 20px;
}
.band-icon .item-wrapper a.btn {
	display: inline-block;
}
/* hovers */
.band-icon .item-wrapper.has-link:hover {
	background-color: var(--theme-color-lightblue-transparent);
}
.band-icon.has-background-orange .item-wrapper.has-link:hover {
	background-color: var(--theme-color-blue);
}
:is(.band-icon.has-background-orange, .band-icon.has-background-lightblue) :is(.item-wrapper.has-link):not(.card):hover {
background-color: var(--theme-color-blue);
}
:is(.band-icon.has-background-orange, .band-icon.has-background-lightblue) :is(.item-wrapper.has-link):not(.card):hover :is(h2, h3, h4, h5, p, li) {
color: var(--theme-color-light);
}
.band-icon :is(.has-link):hover :is(h3, h4, p, li, a) {
	text-decoration: none;
}

.band-icon .item-wrapper.card.has-link:hover {
	background-color: var(--theme-color-sky);
	border-bottom: 12px solid var(--theme-color-lightblue);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  	transform: scale(1.05);
  	transition: 0.4s all ease;
}

/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
    
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
    
}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {
	.band-icon .row.gutter [class^="col-"] {
		margin-bottom: 40px;
	}
	.band-icon .row.gutter [class^="col-"]:nth-of-type(odd) {
		padding-left: 15px;
		padding-right: 25px;
	}
	.band-icon .row.gutter [class^="col-"]:nth-of-type(even) {
		padding-left: 25px;
		padding-right: 15px;
	}
}

/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
	.band-icon .row.gutter [class^="col-"] {
		margin-bottom: 30px;
	}
	.band-icon .row.gutter [class^="col-"]:nth-of-type(odd),
	.band-icon .row.gutter [class^="col-"]:nth-of-type(even) {
		padding-left: 15px;
		padding-right: 15px;
	}
}

/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
	.band-icon .row.gutter [class^="col-"] {
		margin-bottom: 40px;
	}
	.band-icon .row.gutter [class^="col-"]:nth-of-type(3n-2) {
		padding-left: 15px;
		padding-right: 25px;
	}
	.band-icon .row.gutter [class^="col-"]:nth-of-type(3n-1) {
		padding-left: 20px;
		padding-right: 20px;
	}
	.band-icon .row.gutter [class^="col-"]:nth-of-type(3n + 3) {
		padding-left: 25px;
		padding-right: 15px;
	}
   
}