/*
0 - 600px:      Phone
600 - 900px:    Tablet portrait
900 - 1200px:   Tablet landscape
[1200 - 1800] is where our normal styles apply
1800px + :      Big desktop

$breakpoint arguement choices:
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px
*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

  

html {
    font-size: 62.5%; 
    height: 100%;
    margin: 0;
    padding: 0;
}
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 75%; } }

body {
  box-sizing: border-box; 
  font-family: "Antonio", sans-serif;
  font-weight: 400;
  /*font-size: 16px;*/
  line-height: 1.7;
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  margin: 0;
  padding: 0;
  height: 100vh; /* exact viewport */
  overflow: hidden; /* optional: hide tiny overflows */
}

@media only screen and (max-width: 56.25em) {
    .header, .main{
        overflow:visible;
    }}



.top-section{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8vh;
}

  @media only screen and (max-width: 56.25em) {
    .top-section{
        flex-direction: column;
        height: 20vh;
    }}
 


.portie{
    display: flex;
    height: 100%;
    padding: 0 72px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-width: 5px 0px 5px 5px;;
    border-color:  #000;
    border-style: solid;
    background: #000;

    color: #FFF;

    font-family: Antonio;
    font-size: 42px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 5.04px;
    text-transform: uppercase;
}

  @media only screen and (max-width: 56.25em) {
    .portie{
        width: 100%;
        border-width: 5px;
        height: 100%;
    } }

.portie:hover {
    color: #000;
    background-color: #FFF;
    border-width: 5px 0px 5px 5px;
}
@media only screen and (max-width: 56.25em) {
    .portie:hover{
        border-width: 5px 5px;
    } }


.portie:focus {
  outline: none; /* Remove default focus outline if desired */
}


.blank{
    width: 100%;
    height: 100%;
    border-color: #000;
    border-width: 5px 0px 5px 5px;
    border-style: solid;
    background-color: #FFF;
}

  @media only screen and (max-width: 56.25em) {
    .blank{
        display: none;
    }}

.btn-email{
    display: flex;
    height: 100%;
    padding: 10px 45px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 5px solid #000;

    color: #000;

    font-family: Antonio;
    font-size: 28.263px;
    font-style: normal;
    font-weight: 100;
    line-height: normal;
    letter-spacing: 3.392px;
    background-color: #FFF;
}

@media only screen and (max-width: 56.25em) {
    .btn-email{
        border-top: 0px;
        width: 100%;
    }}
  

.header{
    height: 92vh;
    margin: 0;
    padding: 0;
}
@media only screen and (max-width: 75em) {
    .header{
        height:92vh;
    }}
@media only screen and (max-width: 56.25em) {
    .header{
        height: 75vh;
    }}

.header-first{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    border-style: solid;
    border-color: #000;
    border-width: 0px 5px 5px 5px;
    width: 100%;
    height: 90%;
    /* background-image: url('../img/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom; */
    

}


.finisher-header canvas {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: -3 !important;
}


.btn-about{
    border-style: solid;
    border-color: #000;
    border-width: 0px 5px 5px 5px;
    background-color: #000;
    width: 100%;

    display: flex;
    height: 10%;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    padding: 23px;

    color: #FFF;
    text-align: center;
    font-family: Antonio;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 59px; /* 236% */
}

@media only screen and (max-width: 56.25em) {
    .btn-about{
        height: 20%;
    }}

.btn-about:active {
    transform: translateY(2px);   /* Move the button down by 2px */
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.24); /* Optional: reduce shadow */
}

/* Optional: Add hover and focus effects for better user experience */
.btn-about:hover {
    color: #000;
    background-color: #FFF;
}

.btn-about:focus {
  outline: none; /* Remove default focus outline if desired */
  box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.5); /* Custom focus indicator */
}


a{
    text-decoration: none;
}

.header-primary-main{
    color: #000;
    text-align: right;
    font-family: agright;
    font-size: 145.541px;
    font-style: normal;
    font-weight: 400;
    line-height: 170px; /* 116.806% */
    text-transform: uppercase;

    
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    transform: translateY(-50px);
    opacity: 0;

    animation-name: titleAnimation;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-fill-mode: forwards; /* keeps final state */;
}

/* -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    transform: translateY(-50px);
    opacity: 0;
    animation-name: titleAnimation;
    animation-timing-function:ease;
    animation-duration: 3s; */

@media only screen and (max-width: 75em) {
    .header-primary-main{
        font-size: 100.541px;
        line-height: 120px; /* 116.806% */
    } }
@media only screen and (max-width: 56.25em) {
    .header-primary-main{
        font-size: 80.541px;
        line-height: 90px; /* 116.806% */
    } }


  

.header-primary-sub{
    color: #000;
    text-align: right;
    font-family: Antonio;
    font-size: 42px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 5.04px;
    text-transform: uppercase;

    -webkit-animation: slide-top 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: slide-top 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@media only screen and (max-width: 75em) {
    .header-primary-sub{
        font-size: 30px;
    } }
@media only screen and (max-width: 56.25em) {
    .header-primary-sub{
        font-size: 20px;
    } }



.img-profile{
    height: 85%;
    object-fit:contain;
    z-index: -1;
    -webkit-animation: slide-tr 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-tr 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@media only screen and (max-width: 75em) {
    .img-profile{
        height: 60%;
    } } 
@media only screen and (max-width: 56.25em) {
    .img-profile{
        height: 60%;
    } }




.heading-container{ 
    display: flex;
    flex-direction: column;
    margin-left: -80px;
   
}

.main{
    height: 92vh;
    display: flex;
    flex-direction: row;
 
    
}

@media only screen and (max-width: 75em) {
    .main{
        height: 91.8vh;
    } }
@media only screen and (max-width: 56.25em) {
    .main{
        flex-direction: column;
        height: 75vh;
    } }



.main-first{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-color: #000;
    border-width: 0px 0px 5px 5px;
    width: 100%;
    height: 100%;
   
    
}


  
@media only screen and (max-width: 75em) {
    .main-first{
        width: 90%;
    } }
@media only screen and (max-width: 56.25em) {
    .main-first{
        height: 85%;
        border-right: 5px solid #000;
        width: 100%;
    } }




  

.main-second{
    display: flex;
    justify-content: end;
    align-items: center;
    border-style: solid;
    border-color: #000;
    border-width: 0px 5px 5px 0px;
    width: 100%;
    height: 100%;
    flex-direction:column;
    background-color: #FFF;
    
}
@media only screen and (max-width: 56.25em) {
    .main-second{
        height: auto;
    } }

p{
    max-width: 1220px;
}


.main-primary{
    color: #000;
    text-align: right;
    font-family: agright;
    font-size: 120px;
    font-style: normal;
    font-weight: 400;
    line-height: 130px; 
    text-transform: uppercase;

    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    transform: translateY(-50px);
    opacity: 0;
    animation-name: titleAnimation;
    animation-timing-function:ease;
    animation-duration: 3s;
}
@media only screen and (max-width: 75em) {
    .main-primary{
        font-size: 75px;
        line-height: 90px; 
    } }
@media only screen and (max-width: 56.25em) {
    .main-primary           {
        font-size: 80.541px;
        line-height: 90px; 
    } }

  @media only screen and (min-width: 112.5em) {
    .main-primary{
        font-size: 200.541px;
        line-height: 240px; /* 116.806% */
    } }

.main-primary-edit{
    color: #000;
    text-align: right;
    font-family: agright;
    font-size: 120px;
    font-style: normal;
    font-weight: 400;
    line-height: 130px; 
    text-transform: uppercase;
    -webkit-animation: slide-top 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: slide-top 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
@media only screen and (max-width: 75em) {
    .main-primary-edit{
        font-size: 75px;
        line-height: 90px; 
    } }
@media only screen and (max-width: 56.25em) {
    .main-primary-edit{
        font-size: 80.541px;
        line-height: 90px; 
    } }

  @media only screen and (min-width: 112.5em) {
    .main-primary-edit{
        font-size: 200.541px;
        line-height: 240px; /* 116.806% */
    } }
.main-sub{
    color: #000;
    text-align: right;
    font-family: Antonio;
    font-size: 36px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 5.04px;
    text-transform: uppercase;

    -webkit-animation: slide-top 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: slide-top 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@media only screen and (max-width: 75em) {
    .main-sub{
        font-size: 25px;
        line-height: 30px; 
    } }
@media only screen and (max-width: 56.25em) {
    .main-sub{
        font-size: 25px;
        line-height: 30px; 
    } }



.main-container{ 
    display: flex;
    flex-direction: column;
    margin-left: -80px;
}

.nav{
    display: flex;
    align-items: center;
    border-color:#000;
    border-style: solid;
    border-width: 5px 0 0px 5PX;
    background: #000;
    align-content:stretch;
    width: 100%;

    
}

@media only screen and (max-width: 56.25em) {
    .nav{
        position: fixed;
        height: auto;
        bottom: 0;
    } }



.btn-visited{
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
    font-family: Antonio;
    font-size: 25px;
    font-style: normal;
    font-weight: 300;
    line-height: 59px; /* 236% */
    width: 100%;
}

.btn-nav{
    color: #FFF;
    text-align: center;
    font-family: Antonio;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 59px; /* 236% */
    width: 100%;
}

.line{
    width: 3px; 
    height: 24px; 
    background-color: #FFF;
}

.line2{
    width: 3px; 
    height: 32px; 
    background-color: #000;
}

@media only screen and (max-width: 56.25em) {
    .line2{
        display: none;
    } }




.btn-nav:hover {
    color: #000;
    background-color: #FFF;
}
.btn-nav:focus {
  outline: none;
}

.about-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 94vh;
    gap: 20px;
}

.about-p{
    display: flex;
    flex-direction: column;
    padding: 18px 100px; 
    justify-content: center;
    align-items: center;
    align-self: stretch;
    height: 90%;
    overflow: hidden;
  

    color: #000;

    text-align: center;
    font-family: Antonio;
    font-size: 28px;
    font-style: normal;
    font-weight: 100;
    line-height: 50px; 
    border-left: 5px solid #000;
}

.about-p .about-line {
  display: block;       /* each line is its own block */
  overflow: hidden;     /* hides content outside before animation */
}

@media only screen and (max-width: 75em) {
    .about-p{
        font-size: 22px;
        line-height: 40px;
        padding: 50px 96px;
    } }
@media only screen and (max-width: 56.25em) {
    .about-p{
        font-size: 22px;
        line-height: 40px;
        padding: 65px 35px;
    } }



.about-tools{
    display: flex;
    flex-direction: column;
    padding: 60px 70px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-top: 5px solid #000;
    border-left: 5px solid #000;

}
@media only screen and (max-width: 75em) {
    .about-tools{
        padding: 30px;
    } }
@media only screen and (max-width: 56.25em) {
    .about-tools{
        padding-bottom: 100px;
    } }



.tools-heading{
    color: #000;

    text-align: center;
    font-family: Antonio;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 59px; /* 184.375% */
}

.tools{
    color: #000;
    font-family: Antonio;
    font-size: 32px;
    font-style: normal;
    font-weight: 100;
    line-height: 40px;
}

@media only screen and (max-width: 75em) {
    .tools{
        font-size: 22px;
        line-height: 45px;
    } }
@media only screen and (max-width: 56.25em) {
    .tools{
        font-size: 22px;
        line-height: 30px;
    } }


.tools-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    
}


@media only screen and (max-width: 56.25em) {
    .tools-container{
        flex-direction: column;
        
    } }





.img-sections{
    height: 85%;
    object-fit:contain;
}

@media only screen and (max-width: 75em) {
    .img-sections{
        height: 65%;
    } }
@media only screen and (max-width: 56.25em) {
    .img-sections{
        height: 85%;
    } }





.main-first-two{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    border-style: solid;
    border-color: #000;
    border-width: 0px 0px 5px 5px;
    width: 100%;
    height: 100%;
    
}

@media only screen and (max-width: 56.25em) {
    .main-first-two{
        height: 40%;
        border-width: 0px 5px;
        justify-content: center;
    } }

.main-first-two-edit{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: end;
    border-style: solid;
    border-color: #000;
    border-width: 0px 0px 5px 5px;
    width: 100%;
    height: 100%;
    
}

@media only screen and (max-width: 56.25em) {
    .main-first-two-edit{
        height: 50%;
        border-width: 0px 5px;
        justify-content: center;
    } }





.main-second-two{
    display: flex;
    justify-content: end;
    align-items: center;
    border-style: solid;
    border-color: #000;
    border-width: 0px 5px 5px 0px;
    width: 100%;
    height: 100%;
    flex-direction:column;
    
}

@media only screen and (max-width: 56.25em) {
    .main-second-two{
        height: 55%;
        border-width: 0px 5px;
    } }



.btn-more{
    width: 204px;
    background: #000;
    color: #FFF;
    text-align: center;
    font-family: Antonio;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 59px; /* 196.667% */
    border-style: solid;
    border-color: #000;
    border-width: 5px;
    margin-top: 20px;
}

.btn-more:hover {
    color: #000;
    background-color: #FFF;
}
.btn-morev:focus {
  outline: none;
}

.header-secondary-main{
    color: #000;
    text-align: center;
    font-family: agright;
    font-size: 120px;
    font-style: normal;
    font-weight: 400;
    line-height: 130px; /* 116.806% */
    text-transform: uppercase;

    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    transform: translateY(-50px);
    opacity: 0;

    animation-name: titleAnimation;
    animation-timing-function: ease;
    animation-duration: 3s;
    animation-fill-mode: forwards; /* keeps final state */;

}

@media only screen and (max-width: 75em) {
    .header-secondary-main{
        font-size: 65.541px;
        line-height: 77px;
    } }
@media only screen and (max-width: 56.25em) {
    .header-secondary-main{
        font-size: 45px;
        line-height: 50px;
    } }



.second-content{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction:column;

}



/* animation */

/* ----------------------------------------------
 * Generated by Animista on 2026-2-19 14:37:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-tr
 * ----------------------------------------
 */
@-webkit-keyframes slide-tr {
  0% {
    -webkit-transform: translateY(-100px) translateX(100px);
            transform: translateY(-100px) translateX(100px);
  }
  100% {
    -webkit-transform: translateY(0px) translateX(0px);
            transform: translateY(0px) translateX(0px);
  }
}
@keyframes slide-tr {
  0% {
    -webkit-transform: translateY(100px) translateX(-100px);
            transform: translateY(100px) translateX(-100px);
  }
  100% {
    -webkit-transform: translateY(0px) translateX(0px);
            transform: translateY(0px) translateX(0px);
  }
}


@keyframes titleAnimation {
    0% {
        transform: translateY(-50px);
        opacity: 0;
        -webkit-clip-path: polygon(100% 0, 100% 40%, 0 100%, 0 80%);
        clip-path: polygon(100% 0, 100% 40%, 0 100%, 0 80%);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        -webkit-clip-path: polygon(100% -18px, 100% 100%, 0 100%, 0% -18px);
        clip-path: polygon(100% -18px, 100% 100%, 0 100%, 0% -18px);
    }
}

/* @keyframes titleAnimation {
    0% {
      transform: translateY(-50px);
      opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  }
  20% {
      transform: translateY(0);
      opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  80% {
       transform: translateY(0);
       opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
  }
  100% {
       transform: translateY(50px);
       opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
      clip-path: polygon(100% 0, 100% -0%, 0 100%, 0 100%);
    
  }
} */



/* ----------------------------------------------
 * Generated by Animista on 2026-2-23 8:52:59
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */

 /* .slide-top {
	-webkit-animation: slide-top 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: slide-top 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
} */


@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}


/* ----------------------------------------------
 * Generated by Animista on 2026-2-23 10:27:6
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */

.slide-right {
	-webkit-animation: slide-right 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: slide-right 3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}