/* ========================= */
/* :: 1.0 WEB FONTS  */
/* ========================= */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ================================== */
/* :: 2.0 GLOBAL Variable Define CSS  */
/* ================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /* Google Font */
    --inter: 'Inter', sans-serif;
    --instrument-serif: 'Instrument Serif', serif;

    /* Color Palette */
    --white: #fff;
    --black: #000;
    --primary: #a33883;
    --dark-primary: #9b5fa9;
    --light-white: #fff7f7;
    --red: #e61d25;
}

/* ========================= */
/* :: 3.0 COMMON CSS */
/* ========================= */
html,
body {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    color: var(--black);
    font-size: 16px;
    font-family: var(--inter);
    font-weight: 400;
    line-height: 1.8;
    background-color: var(--light-white);
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
section,
.section {
    position: relative;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
.container-fluid {
    margin: 0 auto;
    padding: 0 16px;
}
a,
button {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
button {
    padding: 0;
    border: none;
    background: unset;
}
ol,
ul {
    margin: 0;
    padding: 0;
}
ol li,
ul li {
    list-style: none;
}
img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
input,
input:focus,
input:focus-visible,
input:active,
select,
.form-select,
.form-select:focus,
textarea {
    outline: none;
    box-shadow: none;
}
* + address,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
    margin: 0;
    padding: 0;
}

*::-moz-selection {
    background: var(--black);
    color: var(--white);
    text-shadow: none;
}
::-moz-selection {
    background: var(--black);
    color: var(--white);
    text-shadow: none;
}

::selection {
    background: var(--black);
    color: var(--white);
    text-shadow: none;
}

/* =============================== */
/* :: 4.0 Common CSS */
/* =============================== */

/* ===== Typography CSS Start ===== */
.fs-1 {
    font-size: 40px !important;
}
.fs-2 {
    font-size: 32px !important;
    line-height: 1.13;
}
.fs-3 {
    font-size: 28px !important;
    line-height: 1.334;
}

.font-fancy {
    font-family: var(--instrument-serif);
}
/* ===== Typography CSS End ===== */

/* ===== Color CSS Start ===== */
.text-primary {
    color: var(--primary) !important;
}
.text-red {
    color: var(--red) !important;
}
.bg-primary {
    background-color: var(--dark-primary) !important;
}
/* ===== Color CSS End ===== */

/* ===== Button CSS Start ===== */
.btn {
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    text-transform: uppercase;
    border: none;
    transition: all 0.3s ease;
}
.btn:hover {
    color: var(--dark-primary);
}

.btn--common,
.btn--bordered {
    height: 52px;
    padding: 8px 34px;
    border: 2px solid transparent;
    border-radius: 100px;
}
.btn--common-darkPrimary,
.btn--common-darkPrimary:hover {
    color: var(--white);
    background-color: var(--dark-primary);
}
.btn--bordered-white,
.btn--bordered-white:hover {
    color: var(--white);
    border-color: var(--white);
}

.btn--bordered-primary,
.btn--bordered-primary:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* ----- Button Animation Start ----- */
/* Button Text Animation Start */
.btn__text {
    position: relative;
    display: inline-block;
    height: auto;
    overflow: hidden;
}
.btn__text__one,
.btn__text__two {
    display: block;
    transition: all 0.3s ease;
}
.btn__text__one {
    transform: translateY(0);
}
.btn__text__two {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%);
}
.btn:hover .btn__text__one {
    transform: translateY(-100%);
}
.btn:hover .btn__text__two {
    transform: translateY(0);
}

.btn__icon--arrow {
    position: relative;
    overflow: hidden;
    width: 12px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Button Text Animation End */

/* Button Arrow Animation Start */
.btn__arrow {
    position: absolute;
    left: 50%;
    top: 53%;
    width: 100%;
    height: 100%;
    transition: all 0.35s ease;
}

.btn__arrow--one {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.btn__arrow--two {
    transform: translate(-150%, 50%);
    opacity: 0;
}

.btn:hover .btn__arrow--one {
    transform: translate(50%, -150%);
    opacity: 0;
}

.btn:hover .btn__arrow--two {
    opacity: 1;
    transform: translate(-50%, -50%);
}
/* Button Arrow Animation End */
/* ----- Button Animation End ----- */

/* ===== Button CSS End ===== */

/* ===== CSS for Random Componetns/Classes Start ===== */

/* ===== CSS for Random Componetns/Classes End ===== */

/* =============================== */
/* :: 5.0 Header Area CSS Start */
/* =============================== */
.header--area {
    padding: 10px 0 36px;
}
.header__wrapper {
    max-width: 1208px;
}
.logo--header,
.logo--mobileMenu {
    max-width: 56px;
}
.mobile-menu-open,
.mobile-menu-close {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background-color: var(--dark-primary);
    color: var(--white);
}
.mobile-menu .offcanvas {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
}
.mobile-menu .offcanvas-header,
.mobile-menu .offcanvas-body {
    padding: 20px;
}

.nav__link--mobileMenu {
    padding: 14px 0;
    color: var(--black);
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.nav__link--mobileMenu:hover {
    color: var(--primary);
}

/* Navigation for Desktop Start */
.nav--header {
    gap: 32px;
}
.nav__wrap--header {
    gap: 40px;
}
.nav__link--header {
    font-size: 16px;
    color: var(--black);
}
.nav__link--header:hover {
    color: var(--primary);
}
ul.nav__wrap li:last-child {
    display: none;
}

/* Navigation for Desktop End */

/* =============================== */
/* :: 5.0 Header Area CSS End */
/* =============================== */

/* =============================== */
/* :: 6.0 Hero Section CSS Start */
/* =============================== */
.hero__wrapper {
    border-radius: 16px;
}
.hero__inner {
    padding: 48px 0;
    max-width: 1570px;
}
.hero__content {
    max-width: 1296px;
}
.main__title__sm {
    font-size: 77.77%;
}
.main__title .fancy-text {
    -webkit-text-stroke: 0.1px var(--black);
}
.hero__thumb {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    width: 41%;
    height: 96%;
    border-radius: 100px 0;
}
/* =============================== */
/* :: 6.0 Hero Section CSS End */
/* =============================== */

/* =============================== */
/* :: 7.0 Work Section CSS Start */
/* =============================== */
.work--section {
    padding: 48px 0;
}
.work__wrapper {
    border-radius: 32px 0;
}
.work__content {
    padding: 24px 20px 32px;
}
.section__obj {
    max-width: 40px;
    width: 100%;
}
.work__thumb {
    width: 100%;
    height: 300px;
}
.work__obj {
    width: clamp(100px, 30%, 274px);
    position: absolute;
    top: -25px;
    right: -25px;
    z-index: -1;
    opacity: 0.1;
}
/* =============================== */
/* :: 7.0 Work Section CSS End */
/* =============================== */

/* =============================== */
/* :: 8.0 Education Section CSS Start */
/* =============================== */
.education__content {
    max-width: 1920px;
}
.education--section {
    padding: 0 0 48px;
}
.education__wrapper {
    max-width: 1790px;
}
.education__inner {
    max-width: 676px;
    width: 100%;
    padding: 0 16px;
}
.education__thumb--one {
    width: 100%;
    height: 432px;
    border-radius: 50px 0;
}
.education__thumb__image {
    width: 100%;
    height: 100%;
}
.education__object {
    width: clamp(114px, 22%, 344px);
    position: absolute;
    left: 0;
    top: -32px;
    z-index: -1;
}
.education--section .section__title .text {
    -webkit-text-stroke: 0.1px var(--primary);
}
/* =============================== */
/* :: 8.0 Education Section CSS End */
/* =============================== */

/* =============================== */
/* :: 9.0 Contact Section CSS Start */
/* =============================== */
.contact__wrapper {
    border-radius: 16px;
    padding: 24px 16px;
}
.contact__content {
    max-width: 1444px;
    padding: 24px 16px;
}

.form__item {
    position: relative;
    width: 100%;
    height: 50px;
}
.form__input {
    width: 100%;
    height: 100%;
    color: var(--black);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    background-color: transparent;
    resize: none;
}
.form__label {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--black);
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}
.form__input:focus ~ .form__label,
.form__input:not(:placeholder-shown) ~ .form__label {
    top: 0;
    opacity: 0.5;
    font-size: 85%;
    transition: all 0.3s ease-in-out;
}
.form__item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--black);
    transition: all 0.3s ease-in-out;
}
.form__input:focus ~ .form__item::after,
.form__item:has(.form__input:focus)::after,
.form__item:has(.form__input:not(:placeholder-shown))::after {
    width: 100%;
    left: 0;
    transition: all 0.3s ease-in-out;
}
.contact__inner {
    margin-top: 48px;
    gap: 24px;
}
.contact__item__link {
    font-size: 20px;
    color: var(--black);
}
.contact__item__link:hover {
    color: var(--primary);
}
.contact__item__social {
    width: 42px;
    height: 42px;
    color: var(--dark-primary);
    border: 1px solid var(--dark-primary);
}
.contact__item__social:hover {
    color: var(--white);
    background-color: var(--dark-primary);
}
.contact__item__social .icon {
    width: auto;
    height: 44.4%;
}
/* =============================== */
/* :: 9.0 Contact Section CSS End */
/* =============================== */

/* =============================== */
/* :: 10.0 Footer Area CSS Start */
/* =============================== */
.footer--area {
    padding: 48px 0;
}
.footer__wrapper {
    max-width: 1320px;
}
.logo--footer {
    max-width: 80px;
}
.footer__widget__title {
    font-size: 18px;
}
.nav__link--footer,
.footer__contact__text,
.footer__contact__link {
    color: var(--black);
    line-height: 2;
}
.nav__link--footer:hover,
.footer__contact__link:hover {
    color: var(--primary);
}
.footer__contact__item {
    gap: 10px;
}
.footer__contact__icon {
    width: 32px;
    height: 32px;
    color: var(--white);
    background-color: var(--primary);
}
.footer__contact__icon svg {
    width: 43.75%;
}
.copyright--footer {
    max-width: 1308px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 100px;
}
.copyright__text {
    font-size: 15px;
}
/* =============================== */
/* :: 10.0 Footer Area CSS End */
/* =============================== */