@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

.aInfo {
    padding: 70px 70px 0 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #b1afaf;
    border-radius: 0 0 50px 50px;
}

.aInfo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e9ecef" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.4;
}

.aContent {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    z-index: 2;
}

.aTitle {
    display: flex;
    flex-direction: column;
}

.aTitle h1 {
    color: var(--text);
    font-size: clamp(5rem, 10vw, 10rem);
    font-family: 'Montserrat', sans-serif;
    position: relative;
    line-height: 0.8;
}

.aTitle h2 {
    color: var(--text);
    font-size: clamp(2.5rem, 7vw, 7rem);
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}

.aTitle h3 {
    color: var(--text);
    font-size: clamp(1.5rem, 3vw, 3rem);
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}

.aText {
    display: flex;
    justify-content: end;
    margin-top: 40px;
    position: relative;
}

.aText p {
    text-align: right;
    width: 50%;
    font-size: clamp(1.3rem, 2vw, 2rem);
    font-family: 'Montserrat', sans-serif;
    pointer-events: none;
}

.aText p span {font-weight: 900;}

.aSkils {
    padding: 0;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    touch-action: auto;
    contain: strict;
    border-radius: 0 0 50px 50px;
}

.aSkill {
    position: absolute;
    width: max-content;
    padding: 1rem 2rem;
    font-size: 2rem;
    font-weight: 400;
    background-color: #1a1a1a;
    border-radius: 10rem;
    cursor: grab;
    user-select: none;
    pointer-events: auto;
    will-change: left, top, transform;
    transition: all 0.1s ease;
}



.aSkill.dragging {cursor: grabbing;}

.aSkill p {color: #a0a0a0;}


.aMoreInfo {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.aMoreInfo p {
    color: var(--text);
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-family: 'Montserrat', sans-serif;
    text-indent: 2.5em;
}

.aMoreInfo p span {
    font-style: italic;
    font-weight: bold;
}


.history{
    position: relative;
    background-color: #1a1a1a;
    color: #a0a0a0;
    padding: 1em;
    z-index: 2;
}

.history h1, .history h2{
    font-size: 80px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-family: 'Montserrat', sans-serif;
}


.hImages img{
    width: 300px;
    height: 410px;
}

.hRow:nth-child(2) .hImg{
    position: relative;
    left: 50%;
}

.hRow:nth-child(3) .hImg{
    position: relative;
    left: 15%;
}

.hRow:nth-child(4) .hImg{
    position: absolute;
    top: 45%;
    left: 75%;
}

section.hText{padding: 0; margin: 0;}

.hText .hpRow p {
    padding: 15px 0;
    width: auto;
    margin: 0 auto;
    line-height: 1.7;
    font-size: clamp(1.1rem, 1.5vw, 1.5rem);
}

.hpRow1{width: 70%;}

.hText2 .hpRow p{padding: 20px 0;}

.hText p{
    position: relative;
    width: auto;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    font-family: 'Montserrat', sans-serif;
}

/* .hText .hpRow:nth-child(1) p{text-align: left; margin-left: 0; margin-right: auto;}
.hText .hpRow:nth-child(2) p{text-align: center; margin: 0 auto;}
.hText .hpRow:nth-child(3) p{text-align: right; margin-left: auto; margin-right: 0;} */


.services{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cards{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.card{
    width: 22%;
    height: 400px;
    padding: 1.5rem;
    border-radius: 30px;
    background-color: #1a1a1a;
    animation: card liner;
    z-index: 1;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2), 
                0 0 40px rgba(255, 255, 255, 0.15);
    transition: box-shadow 0.3s ease;
}

.cardContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cardTitle{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.cardTitle span{
    font-size: clamp(0.8rem, 1.5vw, 1.5rem);
    color: #a0a0a0;
    font-family: 'DM Mono', monospace;
}

.cardContent p{
    color: #a0a0a0;
    text-align: center;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    font-family: 'DM Mono', monospace;
}

.cards .card {transform: translateY(-800px) translateX(400px) scale(0.7) rotate(5deg);}
.cards .card:nth-child(2) {transform: translateY(-800px) scale(0.7) rotate(-3deg);}
.cards .card:nth-child(3) {transform: translateY(-800px) translateX(-400px) scale(0.7) rotate(6deg);}



@media (max-width: 1100px) {
    .card{height: 300px;}
}

@media (max-width: 950px) {
      .hRow:nth-child(4) .hImg {
    position: relative;
    left: 0;
    transform: translateX(0);
    margin: 0 auto;
  }

  .hImages {
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
  }
    .cards .card {transform: translateY(-700px) translateX(300px);}
    .cards .card:nth-child(2) {transform: translateY(-700px);}
    .cards .card:nth-child(3) {transform: translateY(-700px) translateX(-300px);}
}


@media (max-width: 800px) {
    .aInfo {padding: 110px 20px;}

    .aText {justify-content: start;}

    .aText p {
        width: 100%;
        text-align: left;
    }

    .aSkils {pointer-events: none;}
    .aSkill {pointer-events: none; cursor: default;}

    .aSkill {
        font-size: 0.7rem;
        padding: 0.5rem 1.5rem;
        cursor: grab;
    }

    .history h1, .history h2{text-align: center; padding-bottom: 0.2em;}

    .hImages img{
        width: 200px;
        height: 275px;
    }

    .hRow:nth-child(2) .hImg{
        padding-bottom: 20px;
        position: relative;
        left: 40%;
    }

    .hRow:nth-child(3) .hImg{
        padding-bottom: 20px;
        position: relative;
        left: 5%;
    }


    .hpRow1{width: 100%;}

    .services{height: auto; padding: 40px;}
    .cards{flex-direction: column;}
    .card{width: 50%;}
    .cardTitle span{font-size: clamp(1.2rem, 1.5vw, 1.5rem);}

    .cards{transform: translateY(-500px);}
    .cards .card {transform: translateY(-0) translateX(0); z-index: 3;}
    .cards .card:nth-child(2) {transform: translateY(-370px) rotate(10deg); z-index: 2;}
    .cards .card:nth-child(3) {transform: translateY(-740px) translateX(0) rotate(-10deg); z-index: 1;}
}

@media (max-width: 500px) {
    .hRow:nth-child(4) .hImg{
        position: relative;
        left: 40%;
    }
    
    .history h2{font-size: clamp(3rem, 10vw, 10rem);}

    .card{width: 80%;}
}