*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    body{
        font-family: "Jacquard 12", sans-serif;
    }
    .navbar{
        display: flex;
        align-items: center;
        padding: 0px;
    }
    nav{
        flex: 1;
        text-align: left;
    }
    nav ul{
        display: inline-block;
        list-style-type: none;
    }
    nav ul li{
        display: inline-block;
        margin-left: 10px;
    }
    a{
        text-decoration : none;
        color: #555;
    }
    p{
        color: #555;
    }
    h1{
        color: #f577bc;
    }
    .container{
        max-width: 1300px;
        margin: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    .row{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .col-2{
        flex-basis: 50%;
        min-width: 150px;
    }
    .col-2 img{
        max-width: 100%;
        padding: 0px 0;
        margin: 0px 0px;
    }
    .col-2 h1{
        font-size: 40px;
        line-height: 50px;
        margin: 15px 0;
    }
    .col-2 p{
        font-size: 10px;
        line-height: 20px;
        margin: 15px 0;
    }
    .white-box{
        background-color: white;      /* The white box */
        display: inline-block;        /* Shrinks the box to fit the text size */
        padding: 10px 15px;           /* Space between text and box edges */
        border-radius: 8px;           /* Optional: slightly rounds the corners */
        color: #000;                  /* Ensures text is readable on white */
        box-shadow: 5px 5px 15px rgba(0,0,0,0.3); /* Optional: subtle depth */
        margin: 5px 0;
    }
    .btn{
        display: inline-block;
        background: #f577bc;
        color: #fff;
        padding: 4px 10px;
        margin: 10px 0;
        border-radius: 10px;
        transition: background 0.5s;
    }
    .btn:hover{
        background: #865279;
    }
    .btn p{
        font-size: 10px;
        line-height: 20px;
        margin: 10px 0;
        color: #fff;
    }
    .header{
        background: radial-gradient(#fff, #ffd6d6);
    }
    .jacquard-12-regular {
    font-family: "Jacquard 12", system-ui;
    font-weight: 400;
    font-style: normal;
    }
    .circle-mask{
        width: 100px;       /* Set a fixed width */
        height: 100px;      /* Set an equal height to ensure a perfect square */
        object-fit: cover;  /* This is crucial: it crops the image to fit the container while maintaining aspect ratio */
        border-radius: 50%; /* Rounds the corners into a circle */
    }
    .square-mask{
        object-fit: cover;  /* This is crucial: it crops the image to fit the container while maintaining aspect ratio */
        border-radius: 20%; /* Rounds the corners into a circle */
    }
    .background{
        background-image: url('TileCatTransparent.png');
        background-repeat: repeat;
        background-size: 32px 32px; /* Forces each tile to be 100x100 pixels */
        min-height: 1000px;
    }
    .ig_button{
        display: inline-flex;      /* Keeps the button inline but allows flex behavior */
        align-items: center;       /* Centers icon and text vertically */
        flex-direction: column;
        justify-content: center;   /* Centers content horizontally */
        gap: 10px;                 /* Direct spacing between icon and text */
    }
    .ig-button-alt {
        background-color: #0095f6; /* Official Instagram Blue */
        color: white;
        border: none;
        border-radius: 8px;
        padding: 7px 16px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
    }
    .ig-button-alt:hover {
        background-color: #1877f2; /* Darker blue on hover */
    }
    .circle-mask2{
        width: 100px;       /* Set a fixed width */
        height: 100px;      /* Set an equal height to ensure a perfect square */
        object-fit: cover;  /* This is crucial: it crops the image to fit the container while maintaining aspect ratio */
        border-radius: 50%; /* Rounds the corners into a circle */
    }
    .ig-feed-container {
        display: flex;             /* Modern side-by-side layout */
        align-items: center;       /* Vertical centering */
        gap: 15px;                 /* Space between button and posts */
        padding: 10px;
        overflow-x: auto;          /* Allows scrolling on mobile */
    }
    .ig-posts-grid {
        display: flex;
        gap: 8px;                  /* Minimal gap between images */
    }
    .ig-posts-grid img {
        width: 100px;              /* Fixed size for grid consistency */
        height: 100px;
        object-fit: cover;         /* Crops images to square */
        border-radius: 4px;
        transition: opacity 0.2s;
    }
    .ig-posts-grid img:hover {
        opacity: 0.8;
    }
}
@media screen and (min-width: 1024px) {
    body{
        font-family: "Jacquard 12", sans-serif;
    }
    .navbar{
        display: flex;
        align-items: center;
        padding: 20px;
    }
    nav{
        flex: 1;
        text-align: left;
    }
    nav ul{
        display: inline-block;
        list-style-type: none;
    }
    nav ul li{
        display: inline-block;
        margin-left: 20px;
        padding: 10px;
    }
    a{
        text-decoration : none;
        color: #555;
    }
    p{
        color: #555;
    }
    h1{
        color: #f577bc;
    }
    .container{
        max-width: 1300px;
        margin: auto;
        padding-left: 25px;
        padding-right: 25px;
    }
    .row{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .col-2{
        flex-basis: 50%;
        min-width: 300px;
    }
    .col-2 img{
        max-width: 100%;
        padding: 50px 0;
        margin: 25px 100px;
    }
    .col-2 h1{
        font-size: 100px;
        line-height: 110px;
        margin: 25px 0;
    }
    .col-2 p{
        font-size: 30px;
        line-height: 40px;
        margin: 25px 0;
    }
    .white-box{
        background-color: white;      /* The white box */
        display: inline-block;        /* Shrinks the box to fit the text size */
        padding: 15px 25px;           /* Space between text and box edges */
        border-radius: 8px;           /* Optional: slightly rounds the corners */
        color: #000;                  /* Ensures text is readable on white */
        box-shadow: 5px 5px 15px rgba(0,0,0,0.3); /* Optional: subtle depth */
    }
    .btn{
        display: inline-block;
        background: #f577bc;
        color: #fff;
        padding: 8px 10px;
        margin: 10px 0;
        border-radius: 20px;
        transition: background 0.5s;
    }
    .btn:hover{
        background: #865279;
    }
    .btn p{
        font-size: 30px;
        line-height: 40px;
        margin: 25px 0;
        color: #fff;
    }
    .header{
        background: radial-gradient(#fff, #ffd6d6);
    }
    .jacquard-12-regular {
    font-family: "Jacquard 12", system-ui;
    font-weight: 400;
    font-style: normal;
    }
    .circle-mask{
        width: 300px;       /* Set a fixed width */
        height: 300px;      /* Set an equal height to ensure a perfect square */
        object-fit: cover;  /* This is crucial: it crops the image to fit the container while maintaining aspect ratio */
        border-radius: 50%; /* Rounds the corners into a circle */
    }
    .square-mask{
        object-fit: cover;  /* This is crucial: it crops the image to fit the container while maintaining aspect ratio */
        border-radius: 10%; /* Rounds the corners into a circle */
    }
    .background{
        background-image: url('TileCatTransparent.png');
        background-repeat: repeat;
        background-size: 32px 32px; /* Forces each tile to be 100x100 pixels */
        min-height: 2000px;
    }
    .ig_button{
        display: inline-flex;      /* Keeps the button inline but allows flex behavior */
        align-items: center;       /* Centers icon and text vertically */
        flex-direction: column;
        justify-content: center;   /* Centers content horizontally */
        gap: 10px;                 /* Direct spacing between icon and text */
    }
    .ig-button-alt {
        background-color: #0095f6; /* Official Instagram Blue */
        color: white;
        border: none;
        border-radius: 8px;
        padding: 7px 16px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
    }
    .ig-button-alt:hover {
        background-color: #1877f2; /* Darker blue on hover */
    }
    .circle-mask2{
        width: 100px;       /* Set a fixed width */
        height: 100px;      /* Set an equal height to ensure a perfect square */
        object-fit: cover;  /* This is crucial: it crops the image to fit the container while maintaining aspect ratio */
        border-radius: 50%; /* Rounds the corners into a circle */
    }
    .ig-feed-container {
        display: flex;             /* Modern side-by-side layout */
        align-items: center;       /* Vertical centering */
        gap: 15px;                 /* Space between button and posts */
        padding: 10px;
        overflow-x: auto;          /* Allows scrolling on mobile */
    }
    .ig-posts-grid {
        display: flex;
        gap: 8px;                  /* Minimal gap between images */
    }
    .ig-posts-grid img {
        width: 100px;              /* Fixed size for grid consistency */
        height: 100px;
        object-fit: cover;         /* Crops images to square */
        border-radius: 4px;
        transition: opacity 0.2s;
    }
    .ig-posts-grid img:hover {
        opacity: 0.8;
    }
}