* {
    box-sizing: border-box;
    font-family: "Outfit", serif;
}

:root {
    /* --color-1: #001A6E; */
    --color-1: #003264;
    /* --color-2: #074799; */
    --color-2: #234E70;
    /* --color-3: #009990; */
    --color-3: #e0bf71;
    --color-4: #F5EEBB;

    --color-3-d:rgb(0, 143, 133);

    --color-sec: #d3d3d3;
    --color-seclight: #e9ebff;
}

.fsz-10 { font-size: 10px; } .fsz-11 { font-size: 11px; } .fsz-12 { font-size: 12px; } .fsz-13 { font-size: 13px; } .fsz-14 { font-size: 14px; } .fsz-15 { font-size: 15px; } .fsz-16 { font-size: 16px; } .fsz-17 { font-size: 17px; } .fsz-18 { font-size: 18px; } .fsz-19 { font-size: 19px; } .fsz-20 { font-size: 20px; } .fsz-21 { font-size: 21px; } .fsz-22 { font-size: 22px; } .fsz-23 { font-size: 23px; } .fsz-24 { font-size: 24px; } .fsz-25 { font-size: 25px; } .fsz-26 { font-size: 26px; } .fsz-27 { font-size: 27px; } .fsz-28 { font-size: 28px; } .fsz-29 { font-size: 29px; } .fsz-30 { font-size: 30px; } .fsz-31 { font-size: 31px; } .fsz-32 { font-size: 32px; } .fsz-33 { font-size: 33px; } .fsz-34 { font-size: 34px; } .fsz-35 { font-size: 35px; } .fsz-36 { font-size: 36px; } .fsz-37 { font-size: 37px; } .fsz-38 { font-size: 38px; } .fsz-39 { font-size: 39px; } .fsz-40 { font-size: 40px; } .fsz-41 { font-size: 41px; } .fsz-42 { font-size: 42px; } .fsz-43 { font-size: 43px; } .fsz-44 { font-size: 44px; } .fsz-45 { font-size: 45px; } .fsz-46 { font-size: 46px; } .fsz-47 { font-size: 47px; } .fsz-48 { font-size: 48px; } .fsz-49 { font-size: 49px; } .fsz-50 { font-size: 50px; } .fsz-51 { font-size: 51px; } .fsz-52 { font-size: 52px; } .fsz-53 { font-size: 53px; } .fsz-54 { font-size: 54px; } .fsz-55 { font-size: 55px; } .fsz-56 { font-size: 56px; } .fsz-57 { font-size: 57px; } .fsz-58 { font-size: 58px; } .fsz-59 { font-size: 59px; } .fsz-60 { font-size: 60px; }
.he-10 { height: 10px; } .he-11 { height: 11px; } .he-12 { height: 12px; } .he-13 { height: 13px; } .he-14 { height: 14px; } .he-15 { height: 15px; } .he-16 { height: 16px; } .he-17 { height: 17px; } .he-18 { height: 18px; } .he-19 { height: 19px; } .he-20 { height: 20px; } .he-21 { height: 21px; } .he-22 { height: 22px; } .he-23 { height: 23px; } .he-24 { height: 24px; } .he-25 { height: 25px; } .he-26 { height: 26px; } .he-27 { height: 27px; } .he-28 { height: 28px; } .he-29 { height: 29px; } .he-30 { height: 30px; } .he-31 { height: 31px; } .he-32 { height: 32px; } .he-33 { height: 33px; } .he-34 { height: 34px; } .he-35 { height: 35px; } .he-36 { height: 36px; } .he-37 { height: 37px; } .he-38 { height: 38px; } .he-39 { height: 39px; } .he-40 { height: 40px; } .he-41 { height: 41px; } .he-42 { height: 42px; } .he-43 { height: 43px; } .he-44 { height: 44px; } .he-45 { height: 45px; } .he-46 { height: 46px; } .he-47 { height: 47px; } .he-48 { height: 48px; } .he-49 { height: 49px; } .he-50 { height: 50px; } .he-51 { height: 51px; } .he-52 { height: 52px; } .he-53 { height: 53px; } .he-54 { height: 54px; } .he-55 { height: 55px; } .he-56 { height: 56px; } .he-57 { height: 57px; } .he-58 { height: 58px; } .he-59 { height: 59px; } .he-60 { height: 60px; }
.we-10 { width: 10px; } .we-11 { width: 11px; } .we-12 { width: 12px; } .we-13 { width: 13px; } .we-14 { width: 14px; } .we-15 { width: 15px; } .we-16 { width: 16px; } .we-17 { width: 17px; } .we-18 { width: 18px; } .we-19 { width: 19px; } .we-20 { width: 20px; } .we-21 { width: 21px; } .we-22 { width: 22px; } .we-23 { width: 23px; } .we-24 { width: 24px; } .we-25 { width: 25px; } .we-26 { width: 26px; } .we-27 { width: 27px; } .we-28 { width: 28px; } .we-29 { width: 29px; } .we-30 { width: 30px; } .we-31 { width: 31px; } .we-32 { width: 32px; } .we-33 { width: 33px; } .we-34 { width: 34px; } .we-35 { width: 35px; } .we-36 { width: 36px; } .we-37 { width: 37px; } .we-38 { width: 38px; } .we-39 { width: 39px; } .we-40 { width: 40px; } .we-41 { width: 41px; } .we-42 { width: 42px; } .we-43 { width: 43px; } .we-44 { width: 44px; } .we-45 { width: 45px; } .we-46 { width: 46px; } .we-47 { width: 47px; } .we-48 { width: 48px; } .we-49 { width: 49px; } .we-50 { width: 50px; } .we-51 { width: 51px; } .we-52 { width: 52px; } .we-53 { width: 53px; } .we-54 { width: 54px; } .we-55 { width: 55px; } .we-56 { width: 56px; } .we-57 { width: 57px; } .we-58 { width: 58px; } .we-59 { width: 59px; } .we-60 { width: 60px; }
  
.bg-color1 { background-color: var(--color-1); }
.bg-color2 { background-color: var(--color-2); }
.bg-color3 { background-color: var(--color-3); }
.bg-color4 { background-color: var(--color-4); }
.bg-colorsec { background-color: var(--color-sec); }
.bg-colorseclight { background-color: var(--color-seclight); }

.bg-color3-sec { background-color: var(--color-3-sec); }

.text-color1 { color: var(--color-1); }
.text-color2 { color: var(--color-2); }
.text-color3 { color: var(--color-3); }
.text-color4 { color: var(--color-4); }
.text-colorsec { color: var(--color-sec); }

.border-none { border: none !important; }
.border-color1 { border: 1px solid var(--color-1); }
.border-color2 { border: 1px solid var(--color-2); }
.border-color3 { border: 1px solid var(--color-3); }
.border-color4 { border: 1px solid var(--color-4); }
.border-colorsec { border: 1px solid var(--color-sec); }
.border-color1-s { border: 2px solid var(--color-1); }
.border-color2-s { border: 2px solid var(--color-2); }
.border-color3-s { border: 2px solid var(--color-3); }
.border-color4-s { border: 2px solid var(--color-4); }
.border-color1-m { border: 3px solid var(--color-1); }
.border-color2-m { border: 3px solid var(--color-2); }
.border-color3-m { border: 3px solid var(--color-3); }
.border-color4-m { border: 3px solid var(--color-4); }
.border-colorsec-m { border: 3px solid var(--color-sec); }

.btn-color1 { background-color: var(--color-1); color: var(--color-4); }
.btn-color1:hover { background-color: var(--color-2); color: var(--color-4); border: 1px solid var(--color-1); }
.btn-color2 { background-color: var(--color-2); color: var(--color-4); }
.btn-color2:hover { background-color: var(--color-2); color: var(--color-4); filter: brightness(0.8); }
.btn-color3 { background-color: var(--color-3); color: var(--color-4); }
.btn-color3:hover { background-color: var(--color-3-d); color: var(--color-4); }
.btn-color4 { background-color: var(--color-4); color: var(--color-1); }
.btn-color4:hover { background-color: var(--color-3); color: var(--color-4); border: 1px solid var(--color-4); }

.btn-color4-outline { background-color: transparent; color: var(--color-4); border: 1px solid var(--color-4); }
.btn-color4-outline:hover { background-color: transparent; color: var(--color-4); border: 1px solid var(--color-4); }

.btn-color2-4 { background-color: var(--color-2); color: var(--color-4); }
.btn-color2-4:hover { background-color: var(--color-1); color: var(--color-4); border: 1px solid var(--color-2); }

.hide-text-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hide-text-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hide-text-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.bg-web { background-size: cover; background-attachment: fixed; background-position: center; background-repeat: no-repeat; }
.bg-web-1 { background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; }
@media (max-width: 767.98px) { .bg-web-1 { height: 50vh; } }

.width-100 { width:100% !important;}
.height-50 { height:50vh !important;}
.height-100 { height:100% !important;}

.ls-s { letter-spacing:-0.5px; }
.ls-xs { letter-spacing:-1px; }
.ls-xxs { letter-spacing:-1.5px; }
.ls-xxxs { letter-spacing:-2px; }

.lh-s { line-height: 1; }
.lh-xs { line-height: 0.8; }

.fw-800 { font-weight:800; }
.fw-900 { font-weight:900; }

.shadow-m { box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); }
.shadow-l { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }

.translate-center-end { transform: translate(-50%, -100%); }
.translate-center { transform: translate(-50%, -50%); } .translate-right { transform: translate(50%, 0); } .translate-right-top { transform: translate(50%, -50%); } .translate-right-bottom { transform: translate(50%, 50%); } .translate-left { transform: translate(-50%, 0); } .translate-left-top { transform: translate(-50%, -50%); } .translate-left-bottom { transform: translate(-50%, 50%); }

.cursor-pointer { cursor: pointer; }
.img-death { pointer-events: none; -webkit-user-drag: none; }
.img-cover { height: 100%; width: 100%; object-fit: cover; }
img.no-select {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }
  
.td-none { text-decoration: none !important; }
.no-select { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: default; }

#main { overflow-x: hidden; }

.hover { transition: filter 0.3s ease-in-out; } .hover:hover { filter: brightness(95%); }

/* Other */
.is-invalidd { border: 2px solid #e14c35 !important;}
.card-reach { background-color: var(--color-4); transition: 0.5s; }
.card-reach:hover { background-color: var(--color-sec); }

#main-top { padding: 150px 0 120px 0; }
#linkedin-button { width:320px; }
@media screen and (max-width: 767px) {
    #main-top { padding: 220px 0 0 0; }
    #linkedin-button { width:220px; }
}
.card-skills { background-color: transparent; border: 1px solid var(--color-2); color: var(--color-2); height:178px; }

.input-color4 { background-color: var(--color-4); border: 1px solid #001A6E; border-radius: 10px; }
.input-color4:focus { background-color: var(--color-sec); border: 1px solid #001A6E; }