@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400&display=swap');
html{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
outline: none;
text-decoration: none;
-webkit-transition: .2s linear;
transition: .2s linear;
}
.about-hero-section{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: url(./images/1659337048888.webp) no-repeat;
background-size: cover;
background-position: center;
padding: 2rem;
background-attachment: fixed;
}

.about-hero-section .about-section-wrap{
display: flex;
flex-wrap: wrap;
align-items: center;
transition: 0.5s;
}

.about-hero-section .about-section-wrap .about-section-001{
flex: 50%;
padding: 0 4px;
max-width: 100%;
text-align: center;
}

.about-hero-section .about-section-wrap .about-section-001 img{
width: 300px;
height: auto;

}
.about-hero-section .about-section-right{
background: url(images/image001.png) no-repeat;
background-size: 85% 100%;
background-position: center;
}

.about-hero-section .about-section-wrap .about-section-right{
/* border: 1px solid red; */
padding: 1rem;
border: 1px inset rgb(204, 204, 204);
border-radius: 20px;
box-shadow: 3px 3px #888888;
font-weight: 600;
color: rgb(255, 255, 255);
letter-spacing: 1px;
text-shadow: 2px 2px #505050;
}

hr{
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(255, 255, 255), rgba(0, 0, 0, 0));
margin-bottom: 2rem;
}

.about-body{
display: flex;
justify-content: center;
align-content: center;
background: linear-gradient(to bottom right, #012746, #01203A);
position: relative;
}
.about-body .about-image-des .tops{
position: absolute;
top: 0;
left: 0;
width: 100vw;
}
.about-body .about-image-des .bottoms{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.about-sub-container div  {
width: 150px;
height: 173px; 
display:inline-block;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background: rgb(0, 51, 255);
transition: 0.5s;
margin: 2px;
}

.about-sub-container div span {
position: absolute;
top: 40px;
margin: 15px;
width: 120px;
text-transform: capitalize;
}
.about-sub-container span h1{
font-size: 1.2rem;
color: #fff;
text-align: center;
}

.about-read-profile:hover{
cursor: pointer;
}
.about-main-container .about-sub-container .about-wrap-container{
position: relative;
}

.about-main-container .about-sub-container .about-title{
position: absolute;
top: 120px;
text-align: center;
color: #000;
opacity: 0;
transition: 0.5s;
border-radius: 20px;
background-image: linear-gradient(to bottom right, rgb(4, 0, 255), rgb(13, 255, 0));
height: 80px;
width: 100%;
border-top: 2px solid #fff;
margin: auto;
letter-spacing: 2px;
overflow: hidden;
}
.about-main-container .about-sub-container .about-title h1{
font-size: 0.7rem;
}
.about-wrap-container:hover .about-title{
opacity: 1;
top: 125px;
transform: scale(0.8);
}
.fab , .fas, .far{
color: rgb(128, 128, 128);
text-decoration: none;
margin: 3px;
font-size: 1rem;
}
.about-profile-name, .about-read-profile, .about-lines-wrapper{
position: relative;
}
.about-profile-name .about-icons {
position: absolute;
top: 33px;
right: -2%;
font-size: 1rem;
transition: 0.8s;
}
.about-read-profile .about-icons {
position: absolute;
top: 45px;
right: 1px;
font-size: 1rem;
}
.about-profile-name:hover {
filter: grayscale(50%);
}
.about-modal-main-container {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
padding-top: 13%;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
overflow: auto;
transition: 0.8s;
}
/* Modal Content */
.modal-content {
background-color: rgba(255, 255, 255);
margin: auto;
padding: 20px;
border: 2px outset rgb(136, 136, 136);
width: 80%;
border-radius: 20px;
overflow: auto;
transition: 0.8s;
background: url(img/about-bg.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* The Close Button */
.about-modal-close {
transition: 0.8s;
padding: 10px;
width: 120px;
font-size: 20px;
border-radius: 5px;
color: rgb(0, 0, 0);
float: right;
position: relative;
}
.about-btn-close-far{
position: absolute;
right: -7px;
top: 6px;
font-size: 2rem;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.about-modal-close:hover,
.about-modal-close:focus{
color: rgb(13, 255, 0);
cursor: pointer;
}
.about-modal-close:hover .about-btn-close-far{
opacity: 1;
right: 7px;
}
.about-modal-container{
display: flex;
justify-content: center;
align-items: center;
}
.about-modal-img-wrap{
justify-content: center;
align-content: center;
display: flex;
flex: 50%;
}
.img-img{
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}
.about-wrapper-main-modal .img-img .img001{
width: 100%;
height: auto;
}
.about-wrapper-main-modal .img-img .img002{
position: absolute;
height: auto;
width: auto;
border-bottom: 3px solid rgb(211, 211, 211);
top: 65%;
transform: translate(-50%, -50%);
left: 50%;
}
.about-modal-text-wrap{
margin-top:3rem;
padding: 10px;
flex: 50%;
color: rgb(0, 0, 0);
transition: 0.5s;
/* text-shadow: 1px 1px #3a3a3a; */
}
.about-modal-text-wrap p{
font-size: 0.8rem;
text-align: justify;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.about-modal-text-wrap p:nth-child(2){
font-size: 0.8rem;
text-align: justify;
letter-spacing: 0.5px;
}
.about-modal-text-wrap h1{
text-align: center;
font-size: 1.3rem;
letter-spacing: 5px;
font-weight: 700;
}
.about-modal-text-wrap h3{
text-align: center;
font-size: 0.8rem;
letter-spacing: 2px;
font-weight: 700;
margin-top: 10px;
margin-bottom: 8px;
}
.about-raw-image:hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.about-design-lines001{
position: relative;
}
.about-design-lines001 .about-design-lines1{
position: absolute;
height: 10px;
background-image: linear-gradient(to bottom left, rgb(4, 0, 255), rgb(13, 255, 0));
transform:rotate(-30deg);
top: 76px;
right: -51px;
width: 104%;
opacity: 0;
}
.about-design-lines001 .about-design-lines2{
position: absolute;
height: 10px;
background-image: linear-gradient(to bottom right, rgb(4, 0, 255), rgb(13, 255, 0));
transform:rotate(30deg);
top: 68px;
right: 30px;
width: 104%;
opacity: 0;
}
.about-lines-wrapper:hover .about-design-lines1 ,.about-lines-wrapper:hover .about-design-lines2 {
opacity: 1;

}
.about-business-model{
position: relative;
height: 100%;
display: flex;
flex-wrap: wrap;
text-align: center;
transition: 0.8s;
}
.about-business-model-left{
flex: 100%;
transition: 0.8s;
position: relative;
background: url(img/tech-bg.webp) no-repeat;
background-size: contain;
background-attachment: fixed;
transform: skewY(-3deg);
border-radius: 16px;
padding: 2rem;
margin-top:1rem;
}
.about-business-model-left .about001 p{
transform: skewY(3deg);
text-align: justify;
}

.about-business-model-right img{
filter: grayscale(100%);
}
.about-business-model-right img:hover{
transform: scale(1.01);
transition: all .8s ease-in-out;
cursor: pointer;
filter: grayscale(0%);
}
.about-business-model-right-sub{
position: relative;
transition: .5s;
overflow: hidden;
border-radius: 50%;
}
.about-business-model-right-sub span{
position: absolute;
top: 0;
left: -110%;
height: 100%;
width: 50%;
background: rgba(0, 208, 3, 0.1);
transition: all 1s ease-in-out;
transform: skewX(-20deg);
}
.about-business-model-right-sub:hover span{
left: 110%;
transition: all 1s ease-in-out;
}
.about-business-model-left .about-align001 img:hover{
transform: scale(0.9);
cursor: pointer;
}
.about-business-model-left .about-align001{
position: relative;
}
.about-business-model-left .about-align001 .about-img-wrapper01{
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.about-business-model-left .about-align001 .about-img-wrapper01 img{
width: 30%;
height: auto;
}
.about-business-model-left .about-align001 .about-img-wrapper01 h1{
font-size: 3rem;
}
.about-business-model-left .about-align001 .about-business-msg{
margin-bottom: 20px;
padding-left: 80px;
padding-right: 80px;
letter-spacing: 2px;
}
.about-business-model-left .about-align001 .about-business-msg p{
padding: 5px;
font-size: 1rem;
margin-bottom: -3px;
}
.about-mis-vis{
display: flex;
justify-content: center;
margin:auto;
padding: 1rem;
flex-wrap: wrap;
text-align: center;
height: 800px;
transition: 0.9s;
background: url(img/tech-bg.webp) no-repeat;
background-attachment: fixed;
background-size: contain;
}
.about-mis-vis-left{
flex: 50%;
transition: 0.9s;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}

.about-mis-vis-right{
flex: 50%;
transition: 0.9s;
justify-content: center;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
.about-mis-vis-right img {
display: block;
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
}
.about-mis-vis h1{
margin: 2rem 0 2rem 0 ;
}

.about-mis-vis-left img {
display: block;
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
}
.about-mis-vis-right p {
width: 70%;
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
}
.about-mis-vis-left p {
width: 70%;
height: auto; /* maintain aspect ratio*/
margin: auto; /*optional centering of image*/
}


@media (max-width: 617px) {

.about-hero-section .about-section-wrap{
    margin-top: 2rem;
    font-size: 80%;
    transition: 0.5s;
}
.about-hero-section{
    height: 120vh;
}
.about-main-container{
    margin-left: 1rem;
}
.about-mis-vis{
    height: 100%;
}
.about-business-model {
    height: 100%;
    }    
}
@media screen and (min-width:900px) and (max-width:1600px) {
.about-main-container{
    padding: 2rem;
    margin-left: 2.5rem;
    width: 70%;
    background: linear-gradient(to bottom right, #012746, #01203A);
}
.about-business-model {
    height: 100%;
    }    

}
@media (max-width: 817px) 
{

.about-modal-container{
flex-wrap: wrap;
}
.about-modal-img-wrap img{
width: 100%;
height:100%;
}
.about-sub-container::before {
content: "";
width: 74px;
float: left;
height: 200vh;
shape-outside: repeating-linear-gradient(     
#0000 0 calc(calc(1.732 * 200px + 4 * 1px  - 1px) - 3px),
#000  0 calc(1.732 * 200px + 4 * 4px  - 1px));
}

}

@media (max-width: 517px) 
{
.about-sub-container::before {
content: "";
width: 74px;
float: left;
height: 300vh;
shape-outside: repeating-linear-gradient(     
#0000 0 calc(calc(1.732 * 200px + 4 * 1px  - 1px) - 3px),
#000  0 calc(1.732 * 200px + 4 * 4px  - 1px));
}
.about-business-model-left .about-align001 .about-img-wrapper01{
width: 100%;
}
}

.about-container-profile{
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
height: auto;
font-weight: 100;
zoom: 0.8;
margin-top: 5rem;

}

.about-container-profile .about-sub-container-profile{
overflow: hidden;
text-align: center;
position: relative;
height: 450px;
margin: 10px;
}

.about-sub-container-profile .about-bg-img img{
object-fit: cover;
clip-path: polygon(0 22%, 48% 0, 100% 22%, 100% 75%, 50% 100%, 0 75%);

}

.about-sub-container-profile .about-container-img .about-picture {
position: absolute;
top: 39%;
left: 50%;
transform: translate(-50%, -50%);

}

.about-sub-container-profile .about-container-img .about-picture img{

-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
height: 280px;

}

.about-sub-container-profile .about-container-img .about-picture img:hover{
-webkit-transform: scale(1.01);
transform: scale(1.01);

}
.about-sub-container-profile .about-content-message{
display: block;
position: absolute;
top: 76%;
left: 50%;
transform: translate(-50%, -50%); 
}


.about-sub-container-profile .about-content-message h3{
background: #064377;
box-shadow: 0px -2px #00ff15;
border-radius: 15px;
color: #ffffff;
padding: 5px;
display: block;
margin: auto;
overflow: hidden;
width: 250px;
}
.about-sub-container-profile .about-content-message h1{
color: #01203A;
width: 350px;
}
.about-sub-container-profile .about-content-message p{
color: #535353;
}
.about-sub-container-profile .about-content-message span{
color: #8e8e8e;
font-weight: bold;
}
.about-sub-container-profile .about-content-message .about-icons-container a{ 
margin-top: 10px;
text-decoration: none;
color: #535353;
padding: 5px;

}
.about-container-profile{
background: url(img/about-bg.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
}
.modal-display-content{
cursor: pointer;
text-decoration: underline;
}
.icons{
    position: relative;
  }
  
  .pusongGala{
    position: absolute;
    pointer-events: none;
    animation: outs 3s linear infinite;
    filter: drop-shadow(0 0 15px rgb(0, 0, 0,0.5));
  }
  @keyframes outs {
    0% {
      opacity: 0;
    }
    20%, 80% {
      opacity: 1;
    }
  }
  .pusongGala::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: url(img/like-svgrepo-com.svg);
    background-size: cover;
    animation: shape 3s linear infinite;
  }
  
  @keyframes shape {
    0% {
      transform: translate(0) rotate(0deg);
    }
    100% {
      transform: translate(300px) rotate(360deg);
    }
  }
  
#mySection {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    padding:2rem;
}

.layer001 {
    text-align: center;
}
.layer001 img {
    display: block;
    margin: 0 auto;
}
.layer0002{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding: 25px;
    border-radius:10px;
    text-align:center;
}


/* _github-pages-challenge-Turburatz */
/* 2c236cfee7efe34f0cba8398df9106 */