@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #0692e3;
    --accentDarker: #0277bb;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

/* .black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;} */
.black_2_accent {filter: contrast(0.18) sepia(1) hue-rotate(170deg) contrast(4) !important;}


/*------------------------ CSS overrides below ------------------------*/


/*------------------------*/
/* brick image3
/*------------------------*/
section.image + section.image.alt3 {margin-top: 0!important;}
section.image.alt3 {background: var(--light); border-top: 0.1rem solid var(--light); border-bottom: 0.1rem solid var(--light);}
/* section.image.alt3 .container {direction: rtl;} */
section.image.alt3 .container > div {direction: ltr;}


/*------------------------*/
/* brick medium
/*------------------------*/
section .spaced-container.medium {max-width: 50rem;}

/* Using gap in a spaced-container. Everything besides first two properties is same as for .container */
.spaced-container {
    display: grid; 
    row-gap: 15px;
    margin: 0 auto;
    /* max-width: 84rem; */
    padding: 0 clamp(1rem, 4vw, 3rem);
}


/*------------------------*/
/* brick features2
/*------------------------*/

section.features2 {background: var(--light); border-top: 0.1rem solid var(--light); border-bottom: 0.1rem solid var(--light);}
section.features2 .container.feat2 {margin-bottom: 4.25rem; }
ul.features2 li div.box2 {display: flex; flex-direction: column-reverse; padding: 2.25rem 2rem; height: 100%; justify-content: space-between; gap: 2rem;}
ul.features2 li div.box2 .feature2img {height: 3.25rem; width: 3.25rem;}
ul.features2 li div.box2 h3 {margin: 0; line-height: 1.45; font-size: 1.1rem; padding: 0;}
ul.features2 li div.box2 .function {color: var(--textDarker); line-height: 1.45;}
ul.features2 li div.box2 .stars {display: flex; gap: 0.25rem; margin: 0 0 1.5rem;}
ul.features2 li div.box2 .stars img {height: 1rem;}
ul.features2 li div.box2 > div:nth-child(1) {display: flex; gap: 1rem; align-items: center;}

/*------------------------*/
/* box2
/*------------------------*/

.box2 {background: white; border: 0.1rem solid var(--borderLight); padding: 3.5rem clamp(2rem, 5vw, 5rem); border-radius: 1rem; position: relative;}
.box2:not(:last-child) {margin-bottom: 1.7em;}
.box2 p img {border-radius: 0;}

/*------------------------*/
/* feature2img
/*------------------------*/

.feature2img {
    /* border-radius: 100%; */
    object-fit: cover;
    filter: grayscale(100%);
}