/* TABLE OF CONTENTS - DESKTOP
    1. Common
    1.1 Temporary fixes
    2. index
    3. Cherry bum
    4. Brand identity
    5. Fridge
    6. Rain collector
    7. Mall decoration
    8. House
    9. Beer display
    10. Midea stand
    11. Tajin
    12. Park signage 
    13. Blog
    14. Blog post
    15. Hobbies
    16. Cherry Bum Data
*/

    /* 1 COMMON - START*/ 
        body p {
            margin-top: 5%;
            color: #000000;
        }

        

        #bar {
            top: 0;
            position: fixed;
            width: 100%;
            z-index: 10;
            box-shadow: 0 0 3px rgba(0, 0, 0, .3);
        }
        .navbar.navbar-expand-lg.bg-body-tertiary.menu {
            padding-left: 50px;
            padding-right: 50px;
        }
        
        .navbar-brand:hover {
            transform: scale(1.1);
            transition: 0.2s;
        }
        
        .navbar-nav {
            margin-left: auto;
        }
        
        .navbar-nav a {
            color: #000814;
            text-decoration: none;
        }
        
        .navbar-nav a:hover {
            color: #107fff;
            transition: 0.2s;
            transform: scale(1.05);
        }

        #contact {
            background-color: #274c77; 
        }
        
        .contact {
            color: #E7ECEF;
            text-align: center;
        }
        
        .links {
            display: flex;
            justify-content: space-evenly;
            margin: 0 10%;
            flex-wrap: wrap;
        }
        .links a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 2rem;
            padding: 0 3%;
        }
        
        .links a:hover {
            color: #107fff;
            transition: 0.2s;
            transform: scale(1.05);
        }
        
        #contact p {
            padding-bottom: 5%;
            margin-bottom: 0;
            text-align: center;
            color:#FFF;
        }

        .contitle h3 {
            font-size: 4rem;
            font-weight: 400;
        }
        
        .contitle h2 {
            font-weight: 200;
            font-size: 1.5rem;
            padding-top: 2%;
        }

        .contitle {
            padding: 5% 30%;
        }

        .row {
            padding: 0 5% 10%;
        }
        .color {
            margin-top: 8%;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, .2);
            border-radius: 30px;
            color: #FFF;
            position: relative;
        }

        .color:hover {
            transition: 0.2s;
            transform: scale(1.05);
        }
        
        .color img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 30px;
        }

        .color h4 {
            position: absolute;
            bottom: 5%;
            left: 10%;
            z-index: 1;
            /* overflow: hidden; */
            right: 10%;
            max-width: 80%;
        }
        
        .color:hover h4 {
            transition: 0.2s;
            transform: scale(1.2) translateX(6%);
            right: 10%;
            max-width: 70%;
        }

        .moreProjects {
            padding: 10px 15% 50px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        
        .moreProjects h2 {
            width: 100%;
            margin: 4% 0 2%;
            color: #274c77;
        }
        
        .moreProjects .col-lg-3 {
            flex: 0 0 auto;
            width: 30%;
        }

        .phoneP{
            display: none;
        }
        
        .deskP{
            display: inherit;
            text-align: center;
        }

        .message {
            position: relative;
            padding: 250px 15%;
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            animation: fadeIn .5s ease-in-out 0.2s forwards; 
        }

        .message h1 {
            font-size: 4rem;
            font-weight: 400;
        }
        
        .message h4 {
            font-size: 2rem;
            font-weight: 400;
            color: #FFF;
            text-align: center;
        }

        .message2 {
            background-color: #FDE74C;
            position: relative;
            padding: 1% 30%;
            margin-left: auto;
            text-align: center;
            margin-right: auto;
            animation: fadeIn .5s ease-in-out 0.2s forwards; 
        }

        .encima {
            position: relative;
            background-image: url('underC.gif');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 90vh;
        }
    /*1 COMMON - END*/

    /* TEMPORARY FIXES - START */
        .carousel {
            padding: 80px 30px 0;
        }

        .carousel-item {
            margin-left: 20%;
        }

        .carousel img {
            width: 60%;
        }
        .carousel-indicators {
            bottom: 600px;
        }

        .carousel-item .carousel-caption {
            right: 55%;
        }

    /* TEMPORARY FIXES - ENDS */

    /* 2 INDEX - START*/

        #projects {
            background-color: #E7ECEF;
        }
        #title {
            background: linear-gradient(120deg, #E7ECEF, #64b0dc);
            box-shadow: 0 0 12px rgba(0, 0, 0, .8);
            z-index: 1;
        }
        
        .container {
            text-align: center;
        }
        .container h1 {
            text-align: left;
            padding: 15% 8% 2%;
            font-size: 4.5rem;
            font-weight: 600;
            line-height: 1.5;
            animation: fadeIn .5s ease-in-out 0.2s forwards;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1); 
            }
        }
        .designer {
            color: #FFF;
            font-style: normal;
        }

        .color p {
            text-align: center;
            font-size: 1.1rem;
        }
    /*2 INDEX - END*/

    /* 3 CHERRYBUM - START*/
        #titleProject .gde {
            padding: 100px 0%;
            margin: 0;
            animation: fadeIn .5s ease-in-out 0.2s forwards;
        }

        .couple p{
            font-size: 1.5rem;
        }
        .titleProject .row .descText {
            padding: 0;
        }

        .row .desc {
            padding-left: 3%;
        }

        .col-lg-8 img {
            width: 92%; /* Ensure the image fills the card width */
            margin-left: 6%;
        }

        #render {
            margin: 0 110px;
            animation: fadeIn .5s ease-in-out 0.2s forwards;
        }
        
        #render img {
            max-width: min(1400px, calc(100% - 6%));
            height: auto;
            margin: 0 3%;
        }

        #goal {
            margin: 0 110px;
            animation: fadeIn .5s ease-in-out 0.2s forwards;
        }

        .titleSec h1 {
            font-weight: 600;
            font-size: 4rem;
            
        }
        .golito {
            position: absolute;
        }

        .textGoal {
            padding: 0 0 50px 20%;
            
        }

        .textGoal p {
            font-size: 1.5rem;
            margin: 10% 0;
            text-align: justify;
            line-height: 2;
        }

        .textGoal .chiquita {
            font-size: 1rem;
        }
        
        #goal img {
            margin: 0 3%;
            max-height: 800px;
            position: absolute;
            top: 140px;
            z-index: -1;
        }
        
        #overview {
            margin: 100px 110px 280px;
            animation: fadeIn .5s ease-in-out 0.2s forwards;
        }
        
        #overview img {
            margin: 0 3%;
            max-height: 300px;
            position: absolute;
            top: 400px;
            right: 0;
            z-index: -1;
        }

        #research {
            
            animation: fadeIn .5s ease-in-out 0.2s forwards;
        }
        
        #research .text {
            padding: 80px 0 50px 0;
            margin: 0 110px;
        }
        
        #research .titleSec {
            padding: 6% 0 0;
            margin: 0 110px;
        }
        
        #research .text p {
            font-size: 1.5rem;
            margin: 0 0 2%;
            text-align: justify;
        }

        .cherry {
            font-family: "Cherry Swash";
            font-weight: 700;
        }

        .verde {
            background-color: #224D2C;
            padding: 2% 110px 50px;
        }
        
        .verde li, .estupido {
            margin: 2% 0;
            font-size: 1.5rem;
            text-align: justify;
            color:#FFF;
        }
        
        .verdeCont {
            padding: 30px 90px 0;
        }
        
        #research a {
            text-decoration: none;
            color: #84BC9C;
            font-size: 1.5rem;
        }
        
        #research a:hover {
            color: #ED254E;
            transition: 0.2s;
        }

        #user {
            background-color: #ED254E;
            animation: fadeIn .5s ease-in-out 0.2s forwards;
            padding: 80px 0 200px 80px;
            color: #FFF;
        }
        
        #user .text {
            font-size: 1.5rem;
            margin: 0 0 2%;
            text-align: justify;
            padding: 0 49% 50px 0;
        }
        
        #user .text2 {
            font-size: 1.5rem;
            margin: 0 100px 2% 15px;
            text-align: justify;
            padding: 20px 0 50px 30%;
        }
        
        #user .text p, .text2 p {
            color:#FFF;
        }
        
        .user {
            margin: 0 3%;
            max-height: 400px;
            position: absolute;
            top: 100px;
            right: 30px;
            z-index: -1;
        }
        
        .userNeeds {
            margin: 0 3%;
            max-height: 600px;
            position: absolute;
            top: 450px;
            z-index: -1;
        }

        #sketches .col-lg-4 img {
            aspect-ratio: auto;
            border-radius: 0;
        }
        
        #sketches img {
            width: 100%;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, .2);
        }
        
        #sketches img:hover {
            transition: 0.2s;
            transform: scale(1.08);
        }
        
        #sketches .text {
            padding: 0 15%;
        }
        
        #sketches .text p {
            text-align: center;
            margin-bottom: 40px;
            
        }

        /* final design diagram and shit -starts */
            #finalDesign {
                background-color: #FDE74C;
                animation: fadeIn .5s ease-in-out 0.2s forwards;
                /* Remove fixed height */
                position: relative;
                padding-bottom: 100px; /* Add some padding at bottom instead */
            }
            
            #finalDesign .titleSec {
                margin: 0 110px;
                padding: 110px 0 0;
                z-index: 0;
            }
            
            .titleSec p {
                text-align: left;
                margin-top: 0;
            }
            
            #finalDesign a {
                text-decoration: none;
                color: #ED254E;
                
            }
            
            #finalDesign a:hover {
                transition: 0.2s;
                transform: scale(1.08);
                color: #224D2C;
            }

            .diagram {
                /* Remove overflow: hidden */
                position: relative;
                z-index: 1;
                height: auto; /* Let it grow with content */
                min-height: 2200px; /* Set a minimum height if needed */
            }
            
            .diagramPhone {
                display: none;
            }

            .posRel {
                display: inline-block;
                font-size: 1.5rem;
                position: absolute; /* Change from relative to absolute */
                /* Add proper positioning for each element */
            }
            
            .phone {
                max-width: 120px;
                z-index: 50;
                position: absolute; /* Ensure consistent positioning */
                /* Add specific positioning for each phone image */
            }
            
            .phone:hover {
                transition: 0.4s;
                transform: scale(1.8);
                z-index: 1000;
            }

            
            
            .start {
                left: 150px; 
                top: 30px;
            }
            
            .uno {
                top: 240px;
                left: 0px;
            }
            
            .dos {
                top: 240px;
                left: 150px;
            }
            
            .tres {
                top: 240px;
                left: 300px;
            }
            
            .one {
                max-width: 200px;
                top: 0px;
                left: 130px;
            }
            
            .two {
                top: 150px;
                left: 200px;
                max-width: 30px;
            }
            
            .three {
                top: 140px;
                left: 285px;
            }
            
            .four {
                top: 100px;
                left: 440px;
                rotate: -17deg;
            }
            
            .five {
                top: 135px;
                left: 500px;
                rotate: 10deg;
            }
            
            .six {
                max-width: 120px;
                top: 250px;
                left: 580px;
            }
            
            .seven {
                max-width: 340px;
                top: 410px;
                left: 585px;
            }
            
            .eight {
                max-width: 130px;
                top: 400px;
                right: 340px;
            }
            
            .nine {
                top: 120px;
                right: 400px;
            }
            
            .ten {
                left: 940px;
                top: 500px;
            }
            
            .boopOne {
                z-index: 55;
            }
            
            .boopTwo {
                left: 140px;
                top: 0px;
            }
            
            .eleven {
                top:370px;
                left: 1050px;
                rotate: 10deg;
            }
            
            .bGred {
                width: 600px;
                height: 200px;
                border-radius: 20px;
                background-color: #ED254E;
            }
            
            .twelve {
                top: 620px;
                left: 180px; 
            }
            
            .thirteen {
                bottom: -230px;
                left: 40px;
                z-index: 1;
            }
            
            .bGred p {
                max-width: 340px;
                text-align: left;
                left: 200px;
            }
            
            .fourteen {
                max-width: 130px;
                top: 750px;
                right: 280px;
            }
            
            .fifteen {
                max-width: 150px;
                top: 825px;
                right: 300px;
            }
            
            .sixteen {
                max-width: 105px;
                top: 915px;
                right: 230px;
            }
            
            .seventeen {
                max-width: 230px;
                top: 930px;
                right: 460px;
            }
            
            .eighteen {
                top: 860px;
                right: 60px;
            }
            
            .nineteen {
                top: 800px;
                right: 100px;
                rotate: 10deg;
            }
            
            .bGgreen {
                width: 600px;
                height: 200px;
                border-radius: 20px;
                background-color: #84BC9C;
            }
            
            .bGgreen p {
                max-width: 215px;
                text-align: left;
                left: 330px;
                top: 10px;
            }
            
            .twenty {
                top: 1075px;
                left: 350px;
                z-index: 0;
            }
            
            .twentyone {
                top: -25px;
                left: 40px;
                z-index: 1;
            }
            
            .twentytwo {
                max-width: 280px;
                top: 1320px;
                left: 230px;
            }
            
            .twentythree {
                max-width: 120px;
                top: 1320px;
                left: 530px;
            }
            
            .twentyfour {
                max-width: 430px;
                top: 1320px;
                left: 570px;
            }
            
            .twentyfive {
                max-width: 250px;
                top: 1320px;
                right: 400px;
            }
            
            .twentysix {
                top: 1300px;
                left: 100px;
            }
            
            .twentyseven {
                max-width: 250px;
                text-align: left;
                left: 240px;
                top: 1390px;
            }
            .twentyeight{
                top: 1650px;
                left: 400px;
            }
            
            .twentynine {
                max-width: 250px;
                text-align: right;
                left: 120px;
                top: 1730px;
            }
            
            .thirty {
                top: 1650px;
                left: 660px;
            }
            
            .thirtyone {
                max-width: 180px;
                text-align: left;
                left: 660px;
                top: 1500px;
            }
            
            .thirtytwo {
                top: 1300px;
                left: 900px;
            }
            
            .thirtythree {
                max-width: 180px;
                text-align: right;
                left: 700px;
                top: 1300px;
            }
            
            .thirtyfour {
                top: 1690px;
                right: 400px;
            }
            
            .thirtyfive {
                max-width: 250px;
                text-align: right;
                right: 140px;
                top: 1880px;
            }

        /* final design diagram and shit - ends */

        #visual{
            animation: fadeIn .5s ease-in-out 0.2s forwards;
            padding: 80px 0 0 80px;
        }
        
        
        #visual .text {
            font-size: 1.5rem;
            margin: 0;
            padding: 0;
        }
        
        #visual .text p{
            margin: 30px 0 50px;
        }

        #visual .row {
            width: 90%;
            --bs-gutter-x: 0;
            justify-content: space-around;
        }
        
        .row .table {
            /* width: fit-content; */
            border-color: #fff;
            width: 250px;
        }

        .tras {
            align-items: center;
        }
        .cuadro {
            width: 50px;
            height: 50px;
            text-align: inherit;
            border-radius: 10px;
            border-bottom-width: 1;
        }

        .cuadroW {
            width: 50px;
            height: 50px;
            text-align: inherit;
            border: solid #888;
            border-radius: 10px;
        }
        
        .headingT th {
            color: #888;
            font-size: 1rem;
        }
        
        .headingT .subtopic {
            margin-bottom: 0px;
            height: 15px;
        }
        
        .table1 {
            font-family: 'Cherry Swash';
            font-size: 40px;
        }
        
        .table2 {
            font-family: 'Inter';
            font-weight: 800;
            font-size: 24px;
        }
        
        .table3 {
            font-family: 'Cherry Swash';
            font-size: 24px;
        }
        
        .table4 {
            font-family: 'Cherry Swash';
            font-weight: 800;
            font-size: 40px;
        }
        
        .table5 {
            font-family: 'Cherry Swash';
            font-weight: 800;
            font-size: 32px;
        }
        
        .table6 {
            font-family: 'Inter';
            font-size: 24px;
        }
        
        .table7 {
            font-family: 'Inter';
            font-size: 20px;
        }
        
        .table8 {
            font-family: 'Inter';
            font-size: 16px;
        }
        
        .wTable {
            width: 121px;
        }
        
        .wTable2 {
            width: 181px;
        }

        .bipbop {
            width: 200px;
            height: 464px;
        }

        #name {
            animation: fadeIn .5s ease-in-out 0.2s forwards;
            padding: 80px 0 0 80px;
        }
        
        #name .text {
            font-size: 1.5rem;
            margin: 0 0 2%;
            text-align: justify;
            padding: 0 49% 0 0;
        }
        
        .dance {
            margin: 0 3%;
            max-height: 700px;
            position: absolute;
            top: 200px;
            right: 100px;
            z-index: -1;
        }

        #conclusion {
            animation: fadeIn .5s ease-in-out 0.2s forwards;
            padding: 80px 0 80px 80px;
        }
        
        .leaf {
            position: absolute;
            top: 85px;
            left: 512px;
        }
        
        .leaf img {
            max-width: 60px;
        }
    /*3 CHERRYBUM - END*/

    /* 4 Bran identity - START
    
    /*4 Bran identity - END*/
    
    /* 5 FRIDGE - START*/

        .goalFridge {
            padding-bottom: 800px;
        }

        .fridge1 {
            width: 90%;
        }
        .tGoalFridge {
            position: relative;
            top: 150px;
            width: 38%;
        }

        .tGoalFridge p {
            font-size: 1.5rem;
            margin: 10% 0;
            text-align: justify;
            line-height: 2
        }

        #goal .imgFridge {
            margin: 0 3%;
            max-height: 1400px;
            position: absolute;
            right: 30px;
            top:-95px;
            z-index: -1;   
        }

        .textFridge {
            margin: 8rem 110px 0; 
        }
        
        .textFridge p{
            color: #247ba0;
            font-size: 1.5rem;
            margin: 2rem 0;
            text-align: justify;
            line-height: 2
        }

        .imgFridge1 {
            padding: 5% 0;
        }

        .coolingR {
            background-color: #247BA0;
            margin: 0;
            padding: 8rem 110px;
        }

        .coolingR p{
            color: #fff;
            font-size: 1.5rem;
            /* margin: 2rem 0; */
            padding: 3rem 0;
            text-align: justify;
            line-height: 2
        }

        .coolingI{
            opacity: 0.2;
            margin: 0 3%;
            max-height: 600px;
            position: absolute;
            top: 2200px;
            right: 20px;
        }

        #retailLayout{
            padding-top: 150px;
            color:#000000;
            margin-bottom: 400px;
        }

        #retailLayout p{
            color:#000000;
            
        }
        .retailT {
            padding: 450px 49% 50px 0;
        }
        .retailT2 {
            padding: 250px 0 50px 49%;
        }

        .groceries {
            margin: 0 3%;
            max-height: 600px;
            position: absolute;
            top: 3200px;
            z-index: -1;
            right: 149px;
        }
        .cafe {
            margin: 0 3%;
            max-height: 600px;
            position: absolute;
            top: 4100px;
            z-index: -1;
            left: 149px;
        }

        .modularity {
            background-color: #FFE066;
            margin: 0;
            padding: 8rem 110px;
        }

        .modularity p{
            color: #000;
        }

        .mod1{
            padding-top: 6rem;
        }

        .mod2{
            padding: 150px 49% 50px 0;
        }

        .mod3 {
            margin: 0 3%;
            max-height: 700px;
            position: absolute;
            top: 5300px;
            right: 60px;
        }

        #userFridge {
            animation: fadeIn .5s ease-in-out 0.2s forwards;
            padding: 150px 80px 200px;
        }

        .userList {
            padding: 110px 30px 50px;
        }

        .userList ul{
            margin-right: 20px;
        }

        .userList li{
            padding-bottom: 3rem;
        }

        .row .usersFridge{
            display: flex;
            justify-content: space-around;
            margin: 0 auto;
            align-items: baseline;
        }

        .fridgesUser {
            max-width: 250px;
        }
        .chibiUser{
            max-height: 250px;
            padding: 0 10%;
            display: flex;
            flex-direction: column;
        }
        .usersFridge p {
            text-align: center;
        }

        #swot {
            background-color: #F25F5C;
            color:#FFF;
            margin: 0;
            padding: 8rem 110px;
        }

        .swot-box {
            height: fit-content;
            padding: auto;
            padding: 8rem 50px 0;
        }
          
        /* Quadrants */
        .swot-item {
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .swot-item p {
            font-size: 2rem;
            color:#FFF;
        }

        /* Cross in the center */
        .swot-cross::before,.swot-cross::after {
            content: "";
            position: absolute;
            background: #FFF;
        }
          
        /* Vertical line */
        .swot-cross::before {
            width: 2px;
            height: 69%;
            left: 47%;
            transform: translateX(-50%);
        }
          
        /* Horizontal line */
        .swot-cross::after {
            height: 2px;
            width: 94%;
            top: 50%;
            transform: translateY(-50%);
        }

        #sketchyFridge {
            margin: 0;
            padding: 8rem 110px 0;
        }

        .sketchFridge1 p{
            font-size: 2rem;
            color: #247ba0;
        }

        .sketchFridge1 img{
            width: 1700px;
            height: 100%;
            padding-top: 110px;
        }

        .sketchFridge2 {
            display: flex;
            padding-top: 110px;
        }

        .sketchFridge2 img {
            height: 618px;
            object-fit: cover;
            display: flex;
        }

        #finalFridge {
            margin: 0 0 110px;
            padding: 8rem 0 110px 8rem;
            height: 1500px;
            
        }

        .finalFridgeRender {
            display: flex;
            justify-content: flex-end;
            height: 300px;
            object-fit: cover;
        }

        .finalFridgeRender1 {
            margin: 0 3%;
            max-height: 990px;
            position: absolute;  
            right: 880px;
        }

        .finalFridgeRender2 {
            position: relative;
            top: 282px;
            height: 1122px;
            left: 808px;
        }

        .finalFridgeRender3 {
            margin: 0 3%;
            max-height: 285px;
            position: relative;
            right: 1050px;
            top: 1009px;
        }

        .finalFridgeT1 {
            position: relative;
            bottom: 200px;
            left: 620px;
        }

        .finalFridgeT2 {
            position: relative;
            bottom: 116px;
            left: 1200px;
        }

        .finalFridgeT3 {
            position: relative;
            top: 450px;
            left: 100px;
        }

        .finalFridgeT4 {
            position: relative;
            top: 500px;
            left: 500px;
        }

        .finalFridgeT5 {
            position: relative;
            top: 670px;
        }

        #blueprints {
            margin: 0 0 110px;
            padding: 8rem 0 110px 8rem;
            height: fit-content;
            
        }

        .sketchFridge1 .bPrints {
            padding: 0;
            object-fit: cover;
            width: 87%;
        }

        .conclusionFridge {
            font-size: 1.5rem;
            margin: 2rem 0;
            text-align: justify;
            padding: 80px 80px 0 0;
            height: 900px;
        }

        .conclusionFridge p{
            margin: 0 auto;
        }

        .conclusionFridge img{
            object-fit: cover;
            width: 43%;
            position: relative;
            left: 955px;
            bottom: 543px;
        }

        .cFridge2 {
            padding: 3rem 50% 0 0;
        }

    /* 5 FRIDGE  - END*/
    
    /* 6 Rain collector - START
    
    /*6 Rain collector- END*/

    /* 7. Mall decoration - START
    
    /*7. Mall decoration - END*/

    /* 8. House - START
    
    /*8. House- END*/

    /* 9.Beer display - START
    
    /*9.Beer display - END*/

    /* 10. Midea stand - START
    
    /*10. Midea stand- END*/

    /* 11. Tajin - START
    
    /*11. Tajin- END*/

    /* 12. Park signage - START
    
    /*12. Park signage- END*/

    /* 13. Blog - Starts */

        #posts {
            padding: 130px 190px 150px 120px;
        }
        
        #posts .row {
            text-align: left;
            padding: 40px 0;
        }

        .col-4 img, .col-lg-4 img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 30px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, .2);
        }
        
        .postInfo {
            align-content: space-around;
        }
        
        .postInfo a {
            
            color: #000814;
            text-decoration: none;
        }
        .postInfo a:hover {
            color: #107fff;
            text-decoration: none;
            transition: 0.2s;
            transform: scale(2);
        }
        
        .postInfo p {
            color:#274c77;
            text-align: left;
            margin: 0;
        }

    /* 13. Blog - ends */

    /* 14. Blog post - starts */
        #escrito{
            padding: 180px 15% 50px;
        }
        .headScript p, .script .headScript p{
            margin-top: 0;
            color: #888;
            font-size: 1.1rem;
            text-align: center;
        }
        
        .script .headScript a{
            color: #107fff;
            font-size: 1.1rem;
        }
        
        .script {
            margin-top: 50px;
        }
        
        .script h3 {
            margin: 70px 0 30px;
            scroll-margin-top: 100px;
        }
        
        .script p, ul, ol, a{
            font-size: 1.5rem;
            text-align: justify;
            line-height: 2;
            text-decoration: none;
        }
        
        .script a{
            text-decoration: none;
        }
        .script ol{
            margin: 50px auto;
        }
        
        .script img {
            max-width: 90%;
            max-height: 600px;
            margin-top: 50px;
            border-radius: 10px;
        }

        .suggestion {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }
        .suggestion h2 {
            width: 100%;
            margin: 4% 0 2%;
            color: #274c77;
            text-align: left;
        
        }
        .suggestion a {
            text-decoration: none;
            color: #000814;
            text-align: center;
        }
        .card:hover {
            transition: 0.2s;
            transform: scale(1.02);
        }

        .list-group {
            margin: 40px 20%;
        
        }
        .list-group-item a {
            color: #888;
            font-size: 1.1rem;
            text-decoration: none;
            height: 2rem;
        }
        
        .list-group-item a:hover {
            color: #000814;
        }
        .card {
            width: 30%; /* Adjust as needed */
            box-shadow: 0px 4px 10px rgba(0, 0, 0, .2);
            display: flex; /* Make the card a flex container */
            flex-direction: column; /* Stack children vertically */
            height: 100%; /* Ensure the card takes full height */
        }
        
        .card img {
            width: 100%; /* Ensure the image fills the card width */
            aspect-ratio: 1 / 1; /* Maintain a square aspect ratio */
            object-fit: cover; /* Ensure the image covers the area without distortion */
        }
        
        .card-body {
            flex: 1; /* Allow the card body to grow and fill remaining space */
            display: flex; /* Make the card body a flex container */
            flex-direction: column; /* Stack children vertically */
            padding: 16px; /* Add padding for spacing */
        }
        
        .card-title {
            margin-bottom: 8px; /* Add spacing below the title */
        }
        
        .textCard {
            margin-top: auto; /* Push the textCard to the bottom of the card-body */
        }
        
        .card img{
            min-height: 196.71px;
            aspect-ratio: 1 / 1;
            object-fit: cover;
        }
    /* 14. Blog post - ends */
    /* 16. Cherry Bum data - START (match #research / .titleSec — Cherry Bum case study) */
        #sources {
            
            margin: 100px 0 80px;
            animation: fadeIn .5s ease-in-out 0.2s forwards;
        }

        #sources .titleSec {
            padding: 2% 0 0;
            margin: 0 110px;
        }

        #sources .text {
            padding: 80px 0 50px 0;
            margin: 0 110px;
        }

        #sources .text ol {
            padding-left: 1.75em;
            margin: 0;
        }

        #sources .text li {
            font-size: 1.5rem;
            margin: 0 0 2%;
            text-align: justify;
        }

        #sources .text li li {
            margin: 1% 0;
        }

        #sources a {
            text-decoration: none;
            color: #84BC9C;
            font-size: 1.5rem;
        }

        #sources a:hover {
            color: #ED254E;
            transition: 0.2s;
        }

        #sources .botanist {
            background-color: #224D2C;
            color: #fff;
            padding: 2% 4%;
            margin: 2% 0;
            border-radius: 8px;
        }

        #sources .botanist p {
            color: #fff;
            margin: 1rem 0;
            font-size: 1.5rem;
            text-align: justify;
        }

        #sources .leaf {
            position: absolute;
            top: 42px;
            left: 666px;
        }
    /* 16. Cherry Bum data - ends*/ 
    

    @media (max-width: 1028px) {
        /* TABLE OF CONTENTS - MOBILE
            1.Common
            1.1 Temporary fixes
            2.index
            3.Cherry bum
            4. Bran identity
            5. Fridge
            6. Rain collector
            7. Mall decoration
            8. House
            9.Beer display
            10. Midea stand
            11. Tajin
            12. Park signage 
            13. Blog
            14. Blog post
            15. Hobbies
            16. Cherry bum data
        */

        /*1 COMMON - START*/
            .container h1 {
                font-size: 2rem;
                padding: 30% 8% 2%;
            }
            .col-lg-6 h2 {
                font-size: 1rem;
            }

            .contitle h3 {
                font-size: 2rem;
            }
            #contact p {
                padding-bottom: 15%;
            }

            .links a {
                font-weight: 400;
                font-size: 1rem;
                padding: 3% 3%;
            }

            .phoneP{
                display: inherit;
            }

            .deskP{
                display: none;
            }

            .colorzin img {
                border-radius: 10px;
            } 
        
            .colorzin h4 {
                display: none;
            }

            .moreProjects{
                padding: 10px 5% 50px;
            }

            .message {
                padding: 180px 6%;
            }
        
            .message h1 {
                font-size: 3rem;
                text-align: center;
            }
        
            .message h4 {
                font-size: 2rem;
                font-weight: 100;
                padding-top: 8%;
            }

            .message2 {
                background-color: #FDE74C;
                position: relative;
                padding: 10% 5%;
                margin-left: auto;
                text-align: center;
                
            }
        /* 1 COMMON - END*/
        
        /* TEMPORARY FIXES - START */
            .carousel {
                padding: 18% 0;
                
            }

            .carousel-item {
                margin: 0;
            }

            .carousel img {
                width: 100%;
            }
        /* TEMPORARY FIXES - ENDS */

        /*2 INDEX - START*/
        /*2 INDEX - END*/

        /* 3 CHERRYBUM - START*/
            #render {
                margin: 0;
            }
        
            #render img {
            
                height: auto;
            }

            #goal {
                margin: 0 6%
            }

            .textGoal {
                padding: 90px 0 150px;
                hyphens: auto;
                word-spacing: -0.05em;
            }

            .golito {
                margin: 30px 30% 0;
            }
        
            #goal img {
                left: 145px;
                top: 1400px;
                width: 60px;
            }

            #overview {
                margin: 0 6%
            }
            
            #overview  h1 {
                margin: 10px 10% 0;
                font-size: 3rem;
                text-align: center;
            }
        
            #overview .text {
                padding: 0 0 150px;
                hyphens: auto;
                word-spacing: -0.05em;
                
            }
            #overview .text p{
                font-size: 1.5rem;
                margin: 10% 0;
                text-align: justify;
                line-height: 2;
            }
            #overview img {
                left: 115px;
                top: 1200px;
                width: 200px;
            }

            #research .titleSec {
                margin: 0 10%;
                text-align: center;
            }
        
            #research .text {
                padding: 30px 0;
                hyphens: auto;
                word-spacing: -0.05em;
                margin: 0 6%;
            }

            .verde {
                padding:4% 6% 4% 10%;
            }

            .verdeCont {
                padding: 10px 10% 0 10%;
            }

            .verdeCont li{
                font-size: 1.5rem;
                text-align: justify
            }
        
            .verde li {
                margin: 0 0 10%;
            }
            #user {
                padding: 20px 6% 0;
            }
        
            #user .titleSec {
                text-align: center;
            }
        
            #user .text {
                padding: 0;
                margin: 0;
            }
        
            #user .text p, #user .text2 p {
                margin: 0;
            }
        
            .user {
                max-height: 225px;
                right: 65px;
                top: 480px;
            }
        
            .userNeeds{
                display: none;
            }
        
             #user .text2 {
                padding: 350px 0 35px;
                margin: 0;
            }

            #sketches {
                margin: 0 6%;
            }
        
            #sketches .text {
                padding:0;
            }
        
            #sketches .text p {
                text-align: justify;
                hyphens: none;
                word-spacing: -0.05em;
                margin: 10% 0 0;
            }
        
            #sketches .col-sm-6 {
                padding: 6% 0;
            }

            /* Final design - starts */
                #finalDesign {
                    height: 2350px;
                }
            
                #finalDesign .titleSec {
                    margin: 0 10%;
                    padding: 50px 0 0;
                }
            
                #finalDesign .titleSec h1, #finalDesign .titleSec p {
                    font-size: 3rem;
                    text-align: center;
                }
            
                .diagram {
                    display: none;
                }
            
                .diagramPhone {
                    display:contents;
                    
                }
            
                .diagramPhone .posRel {
                    font-size: 1rem;
                }
            
                .phone {
                    max-width: 80px;
                }
            
                .start {
                    width: 300px;
                    top: 340px;
                    left: 45px;
                }
            
                .uno {
                    top:0;
                    left:0;
                }
            
                .dos {
                    left:100px;
                    top: 0;
                }
            
                .tres {
                    left:200px;
                    top: 0;
                }
            
                .one {
                    max-width: 100px;
                    top: 190px;
                    left: 35px;
                }
            
                .two {
                    top: 280px;
                    left: 80px;
                    max-width: 15px;
                }
            
                .three {
                    top: 265px;
                    left: 159px;
                    width: 50px;
                    text-align: center;
                }
            
                .four {
                    top: 260px;
                    left: 240px;
                    rotate: -8deg;
                }
            
                .five {
                    top: 285px;
                    left: 260px;
                    rotate: 5deg;
                }
            
                .eightPhone {
                    max-width: 230px;
                    top: 510px;
                    left: 60px;
                }
                
                .eightPhoneOne {
                    max-width: 100px;
                    top: 510px;
                    left: 200px;
                }
            
                .nine {
                    top: 600px;
                    left: 30px;
                }
            
                .ten {
                    left: 150px;
                    top: 600px;
                }
            
                .boopTwo {
                    left: 90px;
                }
            
                .tenPhone {
                    max-width: 140px;
                    top: 770px;
                    left: 50px;
                }
                
                .tenPhoneOne {
                    max-width: 70px;
                    top: 770px;
                    left: 200px;
                }
            
                .fifteen {
                    width: 150px;
                    top: 820px;
                    left: 180px;
                }
            
                .fifteenPhone {
                    max-width: 110px;
                    top: 850px;
                    left: 60px;
                }
            
                .fifteenPhoneOne {
                    max-width: 70px;
                    top: 870px;
                    left: 250px;
                }
            
                .eighteen {
                    top: 910px;
                    left: 250px;
                }
            
                .nineteen {
                    top: 928px;
                    left: 280px;
                }
            
                .bGgreen {
                    width: 320px;
                    height: 115px;
                    border-radius: 10px;
                }
            
                .bGgreen p {
                    left:190px;
                    top:-8px;
                    max-width: 120px;
                }
            
                .twenty {
                    left:25px;
                    top: 990px;
                }
            
                .twentyone {
                    top: -30px;
                    left: 10px;
                }
            
                .twentysix {
                    top: 1205px;
                    left: 30px;
                }
            
                .twentysixOne {
                    max-width: 240px;
                    top: 1130px;
                    left: 66px;
                }
            
                .twentyseven {
                    max-width: 140px;
                    text-align: left;
                    left: 30px;
                    top: 1350px;
                }
            
                .twentyeight {
                    top: 1205px;
                    left: 260px;
                }
            
                .twentynine {
                    max-width: 120px;
                    left: 225px;
                    top: 1130px;
                }
            
                .bGred {
                    width: 320px;
                    height: 115px;
                    border-radius: 10px;
                }
            
                .bGred p {
                    max-width: 220px;
                    left: 100px;
                    top: -7px;
                }
            
                .twelve {
                    left: 25px;
                    top: 1500px;
                }
            
                .thirteen {
                    bottom: -140px;
                    left: 12px;
                    z-index: 1;
                }
            
                .thirtytwo {
                    top: 1680px;
                    left: 170px;
                }
            
                .thirtythree {
                    left: 155px;
                    top: 1830px;
                }
            
                .thirty {
                    top: 2090px;
                    left: 260px;
                }
            
                .thirtyone {
                    left: 190px;
                    top: 2240px;
                    text-align: right;
                }
            
                .thirtyfour {
                    top: 1950px;
                    left: 35px;
                }
            
                .thirtyfive {
                    left: 35px;
                    top: 2100px;
                    text-align: left;
                }
            /* Final design - ends */

            #visual .titleSec, #visual .text {
                margin: 10% 6% 0; 
            }
        
            #visual {
                padding: 0;
            }

            #visual .row {
                width: 100%;
                
            }
        
            .row .table {
                margin-bottom: 50px;
            }
        
            .bipbop {
                width: 300px;
                height: 696px;
            }

            #name {
                padding: 0;
            }
        
            #name .titleSec, #name .text {
                margin: 10% 6% 0; 
                padding: 0;
            }
        
            .dance {
                position: relative;
                top: auto;
                right: auto;
                margin: 0 6px;
            }
        
            .dance img {
                max-width: 100%;
            }

            #conclusion {
                padding: 0;
            }
        
            #conclusion .titleSec {
                margin: 10% 6% 0; 
                padding: 0;
            }
        
            .leaf {
                top: 82px;
                left: 250px;
            
            }
        /*3 CHERRYBUM - END*/

        /* 4 Bran identity - START
        
        /*4 Bran identity - END*/
        
        /* 5 FRIDGE - START*/
            
        /* 5 FRIDGE  - END*/
        
        /* 6 Rain collector - START
        
        /*6 Rain collector- END*/

        /* 7. Mall decoration - START
        
        /*7. Mall decoration - END*/

        /* 8. House - START
        
        /*8. House- END*/

        /* 9.Beer display - START
        
        /*9.Beer display - END*/

        /* 10. Midea stand - START
        
        /*10. Midea stand- END*/

        /* 11. Tajin - START
        
        /*11. Tajin- END*/

        /* 12. Park signage - START
        
        /*12. Park signage- END*/

        /* 13. Blog - Starts */
            #posts{
                padding: 120px 5% 10%;
            }
        
            .row .postInfo {
                margin-top: 15px;
            }
        
            #posts .row {
                display: flex; /* Make the card a flex container */
                flex-direction: column; /* Stack children vertically */
                height: 100%; /* Ensure the card takes full height */
            }

        /* 13. Blog - ends */

        /* 14. Blog post - starts */
            #escrito{
                padding: 120px 5% 10%;
            }
            
            .script p{
                
                hyphens: auto;
                
            }
            .script p, ul, ol, a{
                font-size: 1rem;
            }

            .list-group {
                margin: 40px auto;
            
            }

            .card {
                width: 100%;
            }
        /* 14. Blog post - ends */

        /* 15. Hobbies - starts */
            .hobbyTitle {
                padding-top: 15%;
            }
        /* 15. Hobbies - ends */
        /* 16. Cherry Bum data - START (match #research mobile — Cherry Bum case study) */
        #sources {
            margin: 0 0 50px;
            padding-top: 90px;
        }

        #sources .titleSec {
            margin: 0 10%;
            text-align: center;
        }

        #sources .titleSec h1 {
            margin: 10px 10% 0;
            font-size: 3rem;
            text-align: center;
        }

        #sources .text {
            padding: 30px 0;
            margin: 0 6%;
            hyphens: auto;
            word-spacing: -0.05em;
        }

        #sources .text li {
            margin: 0 0 10%;
        }

        #sources .leaf {
            top: 82px;
            left: 250px;
        }

        #sources .botanist {
            padding: 4% 6%;
        }
        /* 16. Cherry Bum data - ends*/ 
        
    }