/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

/* Font Face */
@font-face {
  font-family: 'DMSans';
  src: url('fonts/DMSans-VariableFont_opsz,wght.woff2') format('woff2'),
       url('fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}


button {
  font-family: ‘DMSans’, Arial, sans-serif;
}

/* Body */
body {
  font-family: ‘DMSans’, Arial, sans-serif;
  background-color: #f7e3be


}

/* Container */
.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    color:#f7e3be;
}

/* Aesthetic Divider */
.aesthetic-divider {
    animation:loader linear;
    animation-duration: 5s;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 1em;
    background-color: #193d41;
    font-size: 2em;
    color:#f7e3be;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    font-weight: 500;
}

/* Anchor */
a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

/* Animations */

@keyframes appear-onload{
from {
scale: 0.5;
opacity:0;
transform:translateY(100px);
}
to{
scale: 1;
opacity: 1;
transform: translateX(0px);
}


/*@keyframes appear-onload{
from {

opacity:0;

}
to{

opacity: 1;

}*/
}

@keyframes appear{
from {
scale: 0.5;
opacity:0;
transform:translateY(100px);
}
to{
scale: 1;
opacity: 1;
transform: translateX(0px);
}
}


@keyframes loader{
from {opacity:0;}
to{opacity:1;}


}
/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-center { justify-content: center; align-items: center; }
.flex-between { justify-content: space-between; }

.hidden { display: none; }
.visible { display: block; }

.margin-top-small { margin-top: 20px; }
.margin-top-medium { margin-top: 40px; }
.margin-top-large { margin-top: 60px; }

.padding-small { padding: 20px; }
.padding-medium { padding: 40px; }
.padding-large { padding: 60px; }

/* Image Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f7e3be;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10002;
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: #193d41;
    background-color: #f7e3be;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-full-size {
    position: relative;
    z-index: 1001;
    pointer-events: auto;
}

.content .btn {
    position: relative;
    z-index: 1001;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* ==========================================================================
   Header Styles
   ========================================================================== */

.header {
    width: 100%;
    padding: 20px 0;
    position: sticky;
    top: 0;
    background: #f7e3be;
    z-index: 10000;
}

.header-container {
    animation:loader linear;
    animation-duration: 3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
}

justify-content.logo-container {
    flex-start: 0;
    flex-shrink: 0;
}

.logo-svg {
    animation:loader linear;
    animation-duration: 2s;
    height: 150px;
    width: auto;
}

.navigation-bar {
    font-family: 'DMSans', Arial, sans-serif !important; 
    font-weight: normal;
    font-style: normal;
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-button-container {
    font-family: 'DMSans', Arial, sans-serif !important; 
    font-weight: normal;
    font-style: normal;
    display: flex;
}

.nav-button {
    font-family: 'DMSans', Arial, sans-serif !important;
    font-size: 1.25em;
    color: #193d41;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
    cursor: pointer;
}

.nav-button-contact {
   font-family: 'DMSans', Arial, sans-serif !important;
    font-size: 1.25em;
    background-color: #bf1912;
    border-color:#bf1912;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    transition: all 0.3s ease;
    font-weight: 250;
    cursor: pointer;
}

.nav-button-contact:hover {
   font-family: 'DMSans', Arial, sans-serif !important;
    font-size: 1.25em;
    background-color: #f5f5f5;
    color: #bf1912;
    border-color:white;
    text-decoration: none;
    padding: 10px 15px;
    transition: all 0.3s ease;
    font-weight: 250;
    cursor: pointer;
}

.nav-button:hover {
   font-family: 'DMSans', Arial, sans-serif !important;
    background-color: #f5f5f5;
}

.social-button {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.insta-logo {
    width: 80px;
    height: 80px;
}

/* ==========================================================================
   Work Section Styles
   ========================================================================== */

.work-section {
    animation:loader linear;
    animation-duration: 3s;
    padding: 60px 0;
    background-color: #f7e3be;
}

.grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    aspect-ratio: 1;
    background-color: #f7e3be;
    padding: 20px;
    border-radius: 12px;
}

.square-frame {
    border-radius: 8px;
    background-color: #f7e3be;
    position: relative;
    width: 100%;
    overflow: hidden;
    animation:appear linear;
    animation-timeline:view();
    animation-range:entry 0% cover 40%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.square-frame:hover {
    transform: scale(1.05) translateZ(0);
    box-shadow: 0 8px 25px rgba(25, 61, 65, 0.3);
    z-index: 10;
}
/*
{
    position: relative;
    width: 100%;
    overflow: hidden;
    animation:appear linear;
    animation-timeline:view();
    animation-range:entry 0% cover 40%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}*/

.square-frame-onload {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f7e3be;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation:appear-onload 2s; 
    animation-range:entry 0 cover 50%;
}

.square-frame-onload:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(25, 61, 65, 0.3);
}

.square-frame-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    
}

/* ==========================================================================
   UX UI Section Styles
   ========================================================================== */

.uxui-section {
    padding: 60px 0;
}

.uxuicontainer {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: content-box;
}

.case-studies-title {
    font-size: 1.5rem;
    margin-bottom: 40px;
    text-align: center;
}

.single-column-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    border-radius: 0px;
}

.various-frame-top {
    position: relative;
    width: 100%;
    overflow: hidden;
    animation:appear-onload linear;
    animation-timeline:view();
    animation-range:entry 0% cover 25%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.various-frame-top:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(25, 61, 65, 0.3);
}

.various-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    animation:appear linear;
    animation-timeline:view();
    animation-range:entry 0% cover 60%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
}

.various-frame:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(25, 61, 65, 0.3);
}

.various-frame-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ==========================================================================
   Contact Section Styles
   ========================================================================== */

.contact-section {
    padding: 60px 0;
    background-color: #f7e3be;
}

.two-column-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: start;
    background-color: #f7e3be;
    padding: 30px;
    border-radius: 12px;
}

.left-column {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 20px;
    border-radius: 8px;
    color: #193d41;
}

.right-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #f7e3be;
    padding: 20px;
    border-radius: 8px;
}

.form-row {
    display: flex;
    gap: 15px;
    background-color: #f7e3be;
    padding: .5em;
}

.form-row.single {
    flex-direction: column;
}

.form-field {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-label {
    margin-bottom: 8px;
    font-weight: 250;
    color:#193d41;
}

.form-input {
    padding: 12px;
    border: 1px solid #193d41;
    font-size: 14px;
}

.form-textarea {
    padding: 12px;
    border: 1px solid #193d41;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.checkbox-container {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 10px;
    color:#193d41;
}

.form-checkbox {
    margin-top: 4px;
    flex-shrink: 0;
}

.checkbox-label {
    font-size: 14px;
    line-height: 1.4;
}

/* ==========================================================================
   About Me Section Styles
   ========================================================================== */
/*
.aboutme-container {
    display: flex;
    flex-direction: row;
    padding: 0px;
    height: 100%;
    max-height: 750px;
}


.about-left-column {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 325px;
        padding-left: 1em;
        padding-top: 6em;

}

.about-right-column {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 325px;
        xpadding-top: 2em;
        padding-bottom: 2em;
        text-align: center;
        min-width: 250px;

}


.logo-04-svg {

        justify-content: center;
        max-width: 768px;
        width: 100%;

}

*/


.aboutme-container {
    display: flex;
    grid-template-columns:1.5fr 2fr;
    height: 100%;
    min-height: 600px;
    gap: 50px;
    background-color: #f7e3be;
    padding: 30px;
    border-radius: 12px;
}

.about-left-column {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 500px;
        padding: 0px;
        padding-left: 1em;
        padding-top: 1em;
        border-radius: 8px;

}

.about-right-column {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 325px;
        padding-top: 9.5em;
        padding-bottom: 2em;
        padding-right: 4em;
        text-align: center;
        min-width: 250px;

}




.logo-04-svg {

        justify-content: center;
        max-width: 1440px;
        width: 100%;

}

.aboutme-image {
    background-image: url(Untitled-1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    max-height: 100%;
}


.about-text {
    font-family: ’DMSans’, sans-serif !important;
    font-weight: 100 !important;
    line-height: 1.6;
    color: white;
    font-size: 1.25rem;
    text-shadow: 50px !important;
    text-shadow: 1.5px 1px rgb(29, 29, 29)!important;
}



/* ==========================================================================
   Archive Section Styles
   ========================================================================== */
            /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
            GSR Section Styles
            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.gsr-wrapper {

    width: 90%;
    max-width: 1530px;
    margin-inline: auto;
    height: 105px;
    padding: 5px;
    margin-top: 5rem;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0)
    );
}

.gsr-item {
    width: 200px;
    height: 100px;
    background-color: red;
    border-radius: 6px;
    position: absolute;
    left: max(calc(200px * 8), 100%);
    animation-name: scroll-left;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    cursor: pointer;
}
.various-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    animation:appear linear;
    animation-timeline:view();
    animation-range:entry 0% cover 40%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gsr-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 25px rgba(25, 61, 65, 0.3);
}

.various-frame-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
@keyframes scroll-left {
    to {
        left: -200px;
    }
}

.gsr-item-1 {
    animation-delay: calc((30s / 8) * (8 - 1) * -1);
    background-color: red;
    background-image: url('GSR/TWDesignsArtboard_16.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gsr-item-2 {
    animation-delay: calc((30s / 8) * (8 - 2) * -1);
    background-image: url('GSR/TWDesignsArtboard_15.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gsr-item-3 {
    animation-delay: calc((30s / 8) * (8 - 3) * -1);
    background-image: url('GSR/TWDesignsArtboard_14.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gsr-item-4 {
    animation-delay: calc((30s / 8) * (8 - 4) * -1);
    background-image: url('GSR/TWDesignsArtboard_13.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gsr-item-5 {
    animation-delay: calc((30s / 8) * (8 - 5) * -1);
    background-image: url('GSR/TWDesignsArtboard_12.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gsr-item-6 {
    animation-delay: calc((30s / 8) * (8 - 6) * -1);
    background-image: url('GSR/TWDesignsArtboard_11.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gsr-item-7 {
    animation-delay: calc((30s / 8) * (8 - 7) * -1);
    background-image: url('GSR/TWDesignsArtboard_10.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gsr-item-8 {
    animation-delay: calc((30s / 8) * (8 - 8) * -1);
    background-image: url('GSR/TWDesignsArtboard_9.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

            /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
            Atlantis Section Styles
            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.atlantis-wrapper {

    width: 90%;
    max-width: 1530px;
    margin-inline: auto;
    height: 105px;
    padding: 5px;
    margin-top: 5rem;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0)
    );
}

.atlantis-item {
    width: 200px;
    height: 100px;
    background-color: red;
    border-radius: 6px;
    position: absolute;
    right: max(calc(200px * 8), 100%);
    animation-name: scroll-right;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    cursor: pointer;
}

.atlantis-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 25px rgba(25, 61, 65, 0.3);
    
}
@keyframes scroll-right {
    to {
        right: -200px;
    }
}

.atlantis-item-1 {
    animation-delay: calc((30s / 8) * (8 - 1) * -1);
    background-image: url('atlantis/TWDesignsArtboard_8.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.atlantis-item-2 {
    animation-delay: calc((30s / 8) * (8 - 2) * -1);
    background-image: url('atlantis/TWDesignsArtboard_7.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.atlantis-item-3 {
    animation-delay: calc((30s / 8) * (8 - 3) * -1);
    background-image: url('atlantis/TWDesignsArtboard_6.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.atlantis-item-4 {
    animation-delay: calc((30s / 8) * (8 - 4) * -1);
    background-image: url('atlantis/TWDesignsArtboard_5.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.atlantis-item-5 {
    animation-delay: calc((30s / 8) * (8 - 5) * -1);
    background-image: url('atlantis/TWDesignsArtboard_4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.atlantis-item-6 {
    animation-delay: calc((30s / 8) * (8 - 6) * -1);
    background-image: url('atlantis/TWDesignsArtboard_3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.atlantis-item-7 {
    animation-delay: calc((30s / 8) * (8 - 7) * -1);
    background-image: url('atlantis/TWDesignsArtboard_2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.atlantis-item-8 {
    animation-delay: calc((30s / 8) * (8 - 8) * -1);
    background-image: url('atlantis/TWDesignsArtboard_1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

            /* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
            Independent Section Styles
            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.independent-wrapper {

    width: 90%;
    max-width: 1530px;
    margin-inline: auto;
    height: 105px;
    padding: 5px;
    margin-top: 5rem;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 1) 20%,
        rgba(0, 0, 0, 1) 80%,
        rgba(0, 0, 0, 0)
    );
}

.independent-item {
    width: 200px;
    height: 100px;
    background-color: red;
    border-radius: 6px;
    position: absolute;
    left: max(calc(200px * 8), 100%);
    animation-name: scroll-left;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    cursor: pointer;
}

.independent-item:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 25px rgba(25, 61, 65, 0.3);
}
@keyframes scroll-left {
    to {
        left: -200px;
    }
}

.independent-item-1 {
    animation-delay: calc((30s / 8) * (8 - 1) * -1);
    background-image: url('independent/TWDesignsArtboard_17.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.independent-item-2 {
    animation-delay: calc((30s / 8) * (8 - 2) * -1);
    background-image: url('independent/TWDesignsArtboard_18.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.independent-item-3 {
    animation-delay: calc((30s / 8) * (8 - 3) * -1);
    background-image: url('independent/TWDesignsArtboard_19.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.independent-item-4 {
    animation-delay: calc((30s / 8) * (8 - 4) * -1);
    background-image: url('independent/TWDesignsArtboard_20.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.independent-item-5 {
    animation-delay: calc((30s / 8) * (8 - 5) * -1);
    background-image: url('independent/TWDesignsArtboard_21.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.independent-item-6 {
    animation-delay: calc((30s / 8) * (8 - 6) * -1);
    background-image: url('independent/TWDesignsArtboard_22.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.independent-item-7 {
    animation-delay: calc((30s / 8) * (8 - 7) * -1);
    background-image: url('independent/TWDesignsArtboard_23.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.independent-item-8 {
    animation-delay: calc((30s / 8) * (8 - 8) * -1);
    background-image: url('independent/TWDesignsArtboard_24.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

.footer {
    width: 100%;
    padding: 40px 0;
    background-color: #f7e3be;
    margin-top: 60px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7e3be;
    padding: 20px;
    border-radius: 8px;

}



/* ==========================================================================
   RESPONSIVE LAYOUT
   ========================================================================== */

/* ==========================================================================
   Header Styles
   ========================================================================== */

@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .aesthetic-divider{
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .navigation-bar {
        flex-wrap: wrap;
        justify-content: center;
        cursor: pointer;
    }
}

/* ==========================================================================
   Work Section Styles
   ========================================================================== */

@media (max-width: 768px) 
{
.grid-3x3 {    animation:loader linear;
    animation-duration: 3s;
    display: flex;
    flex-direction: column;
}

.square-frame {
    border-radius: 8px;
    position: relative;
    width: 100%;
    overflow: hidden;
    animation:appear linear;
    animation-timeline:view();
    animation-range:entry 0% cover 40%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}




.square-frame-onload {
    border-radius: 8px;
    position: relative;
    width: 100%;
    overflow: hidden;
    animation:appear linear;
    animation-timeline:view();
    animation-range:entry 0% cover 40%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.square-frame-onload:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(25, 61, 65, 0.3);
}

.square-frame-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    
}


}

/* ==========================================================================
   UX UI Section Styles
   ========================================================================== */

@media (max-width: 768px) {
    .single-column-container {
        gap: 20px;
    }
}

/* ==========================================================================
   Contact Section Styles
   ========================================================================== */

@media (max-width: 768px) {
    .two-column-container {
        grid-template-columns: 1fr;
    }
    
    .left-column {
        text-align: center;
    }
    
    .form-row {
        flex-direction: column;
    }
}

/* ==========================================================================
   About Me Section Styles
   ========================================================================== */

@media (max-width: 1440px) 

{

.aboutme-container {


    flex-direction: column;
    padding: 0px;
    height: 100%;

}


.about-left-column {
        

        align-self: center;
        max-width: 768px;
        max-height: 325px;
        padding-top: 6em;
        padding-bottom: 0em;
        padding-left: 0em;



}

.about-right-column {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 325px;
        padding-top: 0em;
        padding-bottom: 3em;
        padding-left: 3em;
        padding-right: 3em;
        text-align: center;


}


.logo-04-svg {
    align-self: center;
        max-height: 500px !important;

}

.aboutme-image {
    background-image: url(Untitled-1.png);
    background-repeat: no-repeat;
    height: 100%;
column-width: auto;

}

.about-text {
    font-family: ’DMSans’, sans-serif !important;
    font-weight: 100 !important;
    line-height: 1.35;
    color: white;
    font-size: 1.2rem;
    text-shadow: 1.5px 1px rgb(29, 29, 29)!important;
}

}
/* ==========================================================================
   Archive Section Styles
   ========================================================================== */

@media (max-width: 480px) {
    .archive-single-column {
        gap: 40px;
    }
}

@media screen and (max-width: 768px) {
    .gsr-carousel {
        height: 300px;
    }
    
    .gsr-carousel .content .title,
    .gsr-carousel .content .name {
        font-size: 40px;
    }
    
    .gsr-carousel .list .item .content {
        left: 20px;
        width: 280px;
    }
    
    .atlantis-carousel {
        height: 300px;
    }
    
    .atlantis-carousel .content .title,
    .atlantis-carousel .content .name {
        font-size: 40px;
    }
    
    .atlantis-carousel .list .item .content {
        left: 20px;
        width: 280px;
    }
    
    .independent-carousel {
        height: 300px;
    }
    
    .independent-carousel .content .title,
    .independent-carousel .content .name {
        font-size: 40px;
    }
    
    .independent-carousel .list .item .content {
        left: 20px;
        width: 280px;
    }
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
    }
    
    .modal-close {
        top: 10px;
        right: 20px;
        font-size: 30px;
    }
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 20px;
    }
    
    .container {
        padding: 0 15px;
    }
}