:root {
    --white-fdfd: #fdfdfd;
    --font-family: Montserrat, sans-serif;
    --yellow: #fbbd14;
    --black: black;
    --light-blue: #09a2dd;
    --dark-blue: #0d4c87;
    --white: white;
    --dark-grey: #18191d;
    --black-1717: #171717;
    --darker-yellow: #d89f04;
    --light-grey: #89929e;
    --untitled-ui--primary600: #7f56d9;
    --untitled-ui--white: white;
    --untitled-ui--primary700: #6941c6;
    --untitled-ui--primary100: #f4ebff;
    --untitled-ui--gray300: #d0d5dd;
    --untitled-ui--gray900: #101828;
    --untitled-ui--gray500: #667085;
    --untitled-ui--primary50: #f9f5ff;
    --dark-grey-2: #231f20;
    --untitled-ui--gray200: #eaecf0;
    --untitled-ui--gray700: #344054;
    --untitled-ui--gray50-2: #f9fafb;
    --untitled-ui--gray800: #1d2939;
    --untitled-ui--gray100: #f2f4f7;
    --untitled-ui--primary800: #53389e;
    --weird-green: #020e18;
    --size: 0px;
    --untitled-ui--gray600: #475467;
    --untitled-ui--primary300: #d6bbfb;
    --untitled-ui--warning300: #fec84b;
    --untitled-ui--gray400: #98a2b3;
    --untitled-ui--primary500: #9e77ed;
    --untitled-ui--pink700: #c11574;
    --untitled-ui--indigo700: #3538cd;
    --untitled-ui--pink50: #fdf2fa;
    --untitled-ui--indigo50: #eef4ff;
    --tog-red: #D1413C;
    --black-0707: #070707;
}

a {
    text-decoration: none;
}

.heading-tog {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    color: #070707;
    flex-flow: column;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2.5em;
    font-weight: 600;
    line-height: 1.5em;
    display: flex
;
}

.tog-navbar {
    width: auto;
    height: 45px;
}

.body-text-tog {
    color: var(--black-0707);
    font-size: 1.25em;
    font-weight: 400;
    line-height: 1.5em;
  }

.ciilock-tog-section{
    z-index:1;
    position: relative;
    background-color:#000;
    height: 600px;
}

.ciilock-tog-wrap{
    display: flex;
    flex-direction: row;
    height: 100%;
    gap: 80px;
    /* margin: 80px; */
    align-items: stretch;
    justify-content: space-between;
}

.ciilock-tog-content{
    display: flex;
    flex-direction: column;
    width: 50%;
    /* height: 100%; */
    justify-content: space-between;
    padding: 80px 0 80px 0;
}

.tog-button-wrap {
    display: flex;
    flex-direction: row;
    gap: 40px;
    text-decoration: none;
    font-size: 1.25em; /* initially 1.5em */
}

.tog-button {
    display: inline-flex;
    align-items: center; /* Align text and image */
    gap: 8px; /* Space between the text and the arrow */
    text-decoration: none;
    color: var(--black-0707);
    font-size: 1em;
}

.tog-button img {
    height: 40px;
    width: auto;
    transition: transform 0.3s ease; /* Smooth rotation */
}

.tog-button img.rotate-on-hover:hover {
    transform: rotate(90deg); /* Rotate the arrow to point down */
}

.tog-button img.rotate-counter-clockwise:hover {
    transform: rotate(-45deg); /* Rotate counter-clockwise by 45 degrees */
}

.ciilock-tog-image {
    width: 600px;
    height: 600px;
    overflow: hidden; /* Ensures the image doesn't overflow the mask */
    position: relative;
}

.ciilock-tog-image img {
    width: 100%; /* Makes the image fill the width */
    height: 100%; /* Makes the image fill the height */
    object-fit: cover; /* Ensures the image fills the mask while maintaining aspect ratio */
    object-position: center; /* Allows you to position the image (e.g., center, top, left) */
    position: absolute; /* Allows fine control of positioning */
}

@media screen and (max-width: 1400px) {
    .ciilock-tog-content{
    padding: 40px 0 40px 0;
    }
    .body-text-tog {
        font-size: 1.15em;
}
}

@media screen and (max-width: 1200px) {
    .tog-navbar {
        height: 40px;
    }
    .ciilock-tog-content{
        padding: 0;
        width: 100%;
        gap: 40px;
    }
    .ciilock-tog-wrap{
        flex-direction: column;
    }
    .ciilock-tog-image{
        order: -1;
        width: 100%;
    }
    .tog-button-wrap{
        margin-top: 20px;
    }
    .tog-button img{
        height: 25px;
    }
    .tog-button img.rotate-on-hover {
        transform: rotate(90deg); /* Rotate to point down */
    }

    .tog-button img.rotate-counter-clockwise {
        transform: rotate(-45deg); /* Rotate counter-clockwise */
    }
}

@media screen and (max-width: 767px) {
    .tog-navbar {
        height: 30px;
    }
    .body-text-tog {
        font-size: 1em;
    }
    .tog-button-wrap {
        font-size: 1em;
    }
    .tog-button img{
        height: 25px;
    }
    .tog-button{
        gap: 10px;
    }
    .ciilock-tog-image{
        height: 300px;
    }
    .ciilock-tog-wrap{
        gap:40px;
    }
    .heading-tog{
        font-size: 2em;
    }
}

@media screen and (max-width: 479px) {
    .tog-navbar {
        height: auto;
        max-height: 30px;
    }
    .heading-tog{
        font-size: 1.5em;
    }
    .tog-button-wrap{
        flex-direction: row;
    }
}

@media screen and (max-width: 350px) {
    .tog-button-wrap{
        flex-direction: column;
        gap:20px;
    }
    .tog-button img.rotate-counter-clockwise {
        transform: none; /* Reset rotation */
    }
    .tog-button{
        width: 100%;
        justify-content: space-between;
    }
}

@media screen and (max-width: 255px) {
    .tog-navbar {
    display:none;
    }
}