/*===============================================================
================================================================ */
.centerfy ,
.centerfy-col ,
.centerfy-col-sa,
.centerfy-sa {
	display :flex !important;
	justify-content : center;
	align-items :center;
 }
.centerfy-col ,
.centerfy-col-sa {
	flex-direction: column;
}
.centerfy-sa ,
.centerfy-col-sa {
	justify-content: space-evenly;
}
/*===============================================================
================================================================ */
#who-we-are .line {
    margin: 10px 0px;
    height: 2vh;
    border-radius: 8px;
    background-color: #ffb687;
    box-shadow: 2px 2px 3px black;
}
#who-we-are .centerfy-col {
	align-items: flex-start;
	text-align: left;
}
#who-we-are .figure {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin: 20px 0px;
}
#who-we-are .welcome p {
    font-weight: 900;
    text-transform: uppercase;
    color: rgb(247 105 130);
    text-shadow: 1px 1px 1px black;
    line-height: 3px;
}
#who-we-are .centerfy-col p {
    font-family: 'Open Sans';
    font-size: 20px;
    font-weight: 300;
}#solutions figure
#who-we-are .welcome h3 {
    text-transform: uppercase;
    line-height: 10px;
}
#who-we-are h2 {
    font-size: 2rem;
    color: #ffb687;
    text-shadow: 2px 3px 0px black;
} 
#who-we-are {
    padding: 2% 0px;
    margin-bottom: 15px;
    background-color: #ebebeb6e;
    min-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#who-we-are .img{
    width :100%;
    display: flex;
    justify-content: flex-end;
}
#who-we-are  img {
    width :80%;
}
/*===============================================================
DIVDER MOTTO
================================================================ */
#divider-motto .container {
    height: 38vh;
    background-color: #ffb687;
    box-shadow: 5px 4px 12px rgba(6, 0, 0, 0.524);
    border-radius: 28px;
	display: flex;
	margin : 25px auto;
}
#divider-motto .container h3 {
    text-shadow: -1px 3px 3px black;
    color: white;
    text-align: center;
    font-size: 42px;
    font-weight: 700;
	margin: auto;
}
/*===============================================================
DIVDER MOTTO
================================================================ */
#solutions {
    padding-top: 2%;
    margin-top: 15px;
    min-height: 100vh;
}
#solutions figure {
    height: 400px;
    border-radius: 8px;
    border: 3px solid #ffb687;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    width: 100%;
    transform: skew(11deg, -12deg);
    box-shadow: 6px 13px 7px #00000096;
    background-color: #e7e7e7;
    padding-top: 3%;
    transition: all 0.7s ease-in-out;
}
#solutions figure img {
    width: 93%;
    border-radius: 10px 12px 0px 0px;
    box-shadow: 4px 5px 13px #000000c2;
}
#solutions figure div {
    height : 200px;
}
#solutions figure h4 {
    color: #ffb687;
    font-size: 48px;
    font-weight: 700;
    font-style: italic;
    text-shadow: 2px 3px 3px #414141;
}

/*===============================================================
DIVDER MOTTO
================================================================ */
#article-hero {
    height: 94vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url("../images/article-cover.jpg") no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0px 12px 20px #0000009c;
    z-index: 100;
    position: relative;
    background-color: #81563a;
    background-blend-mode: multiply;
}
#article-hero h1 {
    color: #FFB687;
    font-weight: 700;
    font-size: 62px;
    text-shadow: 1px 3px 0px black;
    font-style: italic;
    margin : 15px 0px;
}
#article-hero p {
    color: white;
    font-weight: 700;
    text-shadow: 1px 3px 0px #FFB687 , -1px -3px 0px #FFB687;
    font-style: italic;
    font-size: 38px;
}
#article-hero a {
    color : rgb(0, 0, 0);
}
/*===============================================================
THREE ASIDE
================================================================ */
#three-cat {
    min-height: 100vh;
}
#three-cat aside {
    height: 400px;
    border: 9px solid #55060e;
    text-align: center;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
}
#three-cat aside h3 {
    height: 200px;
    line-height: 186px;
    font-weight: 700;
    font-style: italic;
    font-size: 32px;
}
#three-cat article:nth-child(1)  h3 {
    background-color: #f7f7f7;
    color: #886f48;
}
#three-cat article:nth-child(2)  h3 {
    background-color: #0974a3f7;
    color: #ffffff;
    text-shadow: 2px 4px 5px #000000;
}
#three-cat article:nth-child(3)  h3 {
    background-color: #f7f7f7;
    color: #886f48;
}
#three-cat article:nth-child(3)  h3 {
    background-color: #927a52;
    color: #005787c9;
    text-shadow: 1px 2px 3px #f7f7f7;

}
/*===============================================================
PROJECTS
================================================================ */
#projects {
    min-height: 100vh;
    padding: 2% 0%;
    margin: 15px 0px;
}
#projects article figure, 
#projects article figure .circle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#projects .circle,
#projects .circle img {
	width : 100%;
}
#projects h2 {
    font-size: 70px;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    margin: 20px;
    text-shadow: 3px 5px 3px #272222;
    color: #dd4d67;
}
#projects .line {
    background-color: #e57373;
    height: 4vh;
    border-radius: 12px;
    margin: 30px auto;
    box-shadow: 0px 3px 7px black;
}
#projects .circle p {
    size: 62px;
    margin: 10px;
    font-weight: 700;
    font-style: italic;
}
/*===============================================================
GALLERY
================================================================ */
#gallery .gal-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#gallery article {
    width : 380px;

    height: 280px;
    margin: 10px 0px;
    padding: 1%;
}
#gallery article aside {
    border-bottom: 2px solid black;
    width: 100%;
}
#gallery h1 {
    font-size: 70px;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    margin: 30px 0px;
    text-shadow: 3px 5px 3px #272222;
    color: #dd4d67;
}
#gallery {
    background-color :#ebebeb6e;
}
/*===============================================================
ARTICLE INTRO
================================================================ */
#intro-article {
    background-color:#ffb687;
    min-height: 66vh;
    margin-bottom: 200px;
}
#intro-article .container {
    min-height: 40vh;
    transform: translateY(142px);
}
#intro-article aside {
    background-color: rgb(255 255 255);
    flex-direction: column;
    display: flex;
    text-align: center;
    justify-content: space-evenly;
    align-items: center;
    border: 16px solid #9b6949;
    height: 431px;
    padding: 1%;
    box-shadow: -8px 7px 9px #0000007d;
    margin-bottom: 15px;
    border-radius: 12px;
}
#article-bg {
    background: url("../images/techs/global.png") no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-color: #ffb687;
    background-blend-mode: multiply;
    display: flex;
}
#article-bg article {
    width: 700px;
    height: 65vh;
    background-color: #0000001c;
    margin: auto;
    border-radius: 28px;
    display: flex;
    padding: 1% 3%;
}
#article-bg article h1 {
    color: #577d6d;
    text-shadow: 2px 3px 0px white, -2px 0px 0px #fffcfc;
    margin: auto;
    text-align: center;
    font-weight: 800;
    line-height: 41px;
    letter-spacing: 1.2px;
}
#blogs figure {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: space-evenly;
}
#blogs figure aside {
    display: flex ;
    flex-direction: column;
    align-items: center;
    justify-content: center;;
    text-align: center;
}
#blogs h3 {
    text-align: center;
    margin: 20px auto;
    text-shadow: 1px 1px 3px #000000eb;
    color: #f7b083;
    font-size: 42px;
    font-style: italic;
}
#blogs {
    position: relative;
}
#blogs .material-symbols-outlined {
    font-size: 68px;
    color: #f9b284;
    text-shadow: 1px 3px 4px black;
}
/*===============================================================
HOVER
================================================================ */
.customized-modal figure:hover {
    background-color: rgba(0, 0, 0, 0.646);
} 
.customized-modal figure p:hover {
    cursor: pointer;
    color : pink;
    text-shadow: 1px 2px 0px black;
    transform: scale(1.5);
} 
#article-hero a:hover {
    background-color: transparent !important;
}
#solutions figure:hover {
    border: 3px solid #ffb687;
    transform: skew(0deg, 0deg);
    box-shadow: none;
    background-color: #e7e7e7;
}