@font-face {
  font-family: 'PasArchitect'; 
  src: url('../fonts/LAMASANS-REGULAR.woff2') format('woff2'), 
       url('../fonts/LAMASANS-REGULAR.woff') format('woff'),;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'PasArchitect'; 
  src: url('../fonts/LAMASANS-SEMIBOLD.woff2') format('woff2'), 
       url('../fonts/LAMASANS-SEMIBOLD.woff') format('woff'),;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'PasArchitect'; 
  src: url('../fonts/LAMASANS-EXTRABOLD.woff2') format('woff2'), 
       url('../fonts/LAMASANS-EXTRABOLD.woff') format('woff'),;
  font-weight: 700;
  font-style: normal;
}
        
        body, html {
            height: 100%;
            margin: 0;
            overflow-x: hidden;
            font-family: 'PasArchitect', sans-serif;
            
        }

        p
        {
            font-size: 1.35rem;
        }

        h3
        {
            font-weight: 700;
            font-size: 2.7rem;
        }



        /* Container Setup */
        .main-container {
            min-height: 100vh;
        }

        
        .col-sidebar {
            background-color: #fff;
            position: relative; /* For the border positioning */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2rem;
            z-index: 10;
        }

        .col-sidebar img
        {
            max-width: 50px;
        }

        
        @media (min-width: 992px) {
            .col-sidebar {
                width: 80px; /* Fixed width */
                flex-direction: column; /* Stack logo and icons vertically */
                height: 100vh;
                position: fixed; /* Stick to left */
                left: 0;
                top: 0;
                justify-content: space-between; /* Logo top, Icons center/bottom logic */
            }

           
            .col-sidebar::after {
                content: "";
                position: absolute;
                right: 0;
                top: 30px;    /* Gap from top */
                bottom: 30px; /* Gap from bottom */
                width: 1px;
                background-color: #325635;
            }

            /* Adjust content wrapper to account for fixed sidebar */
            .content-wrapper {
                margin-left: 100px; /* Push content to right */
                width: calc(100% - 100px);
                height: 100vh;
            }
        }

        
        @media (max-width: 991.98px) {
            .col-sidebar {
                width: 100%;
                height: auto;
                order: 3; 
                border-top: 1px solid #ddd; /* Visual separator for mobile */
                padding: 0.5rem;
            }
            
            .content-wrapper {
                width: 100%;
                flex-grow: 1; /* Fill remaining height */
                display: flex;
                flex-direction: column;
            }

            /* Hide the purple border on mobile as it becomes a bottom bar */
            .col-sidebar::after {
                display: none;
            }
        }

        
        .social-icons {
            display: flex;
            gap: 0.5rem;
            font-size: 1.4rem;
            margin-right: auto;
            margin-left: auto;
        }

        .social-icons i {
            color: #000;
            transition: color 0.5s ease;
        }

        .social-icons i:hover {
            color: purple !important;
        }

        @media (min-width: 992px) {
            .social-icons {
                flex-direction: column; /* Stack vertically */
                margin-top: auto;
                margin-bottom: auto;
            }
        }

        
        @keyframes fadeInRightToLeft {
            from {
                opacity: 0;
                transform: translateX(30px); /* Start slightly to the right */
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .animate-load {
            animation: fadeInRightToLeft 1.2s ease-out forwards;
            opacity: 0; /* Start hidden */
        }

        /* Helpers for layout */
        .content-cols {
            height: 100%;
        }
       
        .custom-img {
             width: calc(100% - 30px);
            height: 100%;
            object-fit: contain;
            margin-right: 30px;
        }