:root {
    --main-color: #4f46e5;
    --bg-color: #F9FFF3;
    --text-color: #f9f9f9;
    --balcktext-color: #000000;
    --btn-color: #009846;
}

:root {
    /* Negative values (ascending from most negative to zero) */
    --_px400: clamp(-400px, -25.32vw, 0px);
    --_px190: clamp(-190px, -12.03vw, 0px);
    --_px180: clamp(-180px, -11.39vw, 0px);
    --_px180: clamp(-180px, -11.39vw, 0px);
    --_px175: clamp(-175px, -11.08vw, 0px);
    --_px165: clamp(-165px, -10.44vw, 0px);
    --_px150: clamp(-150px, -9.49vw, 0px);
    --_px120: clamp(-120px, -7.59vw, 0px);
    --_px90: clamp(-90px, -5.7vw, 0px);
    --_px80: clamp(-80px, -5.06vw, 0px);
    --_px75: clamp(-75px, -4.75vw, 0px);
    --_px70: clamp(-70px, -4.43vw, 0px);
    --_px63: clamp(-63px, -3.99vw, 0px);
    --_px60: clamp(-60px, -3.80vw, 0px);
    --_px60: clamp(-60px, -3.8vw, 0px);
    --_px50: clamp(-50px, -3.16vw, 0px);
    --_px45: clamp(-45px, -2.85vw, 0px);
    --_px43: clamp(-43px, -2.72vw, 0px);
    --_px40: clamp(-40px, -2.53vw, 0px);
    --_px35: clamp(-35px, -2.22vw, 0px);
    --_px34: clamp(-34px, -2.15vw, 0px);
    --_px30: clamp(-30px, -1.90vw, 0px);
    --_px25: clamp(-25px, -1.58vw, 0px);
    --_px20: clamp(-20px, -1.27vw, 0px);
    --_px15: clamp(-15px, -0.95vw, 0px);
    --_px12: clamp(-12px, -0.76vw, 0px);
    --_px11: clamp(-11px, -0.7vw, 0px);
    --_px10: clamp(-10px, -0.63vw, 0px);
    --_px9: clamp(-9px, -0.57vw, 0px);
    --_px7: clamp(-7px, -0.44vw, 0px);
    --_px5: clamp(-5px, -0.32vw, 0px);
    --_px2: clamp(-2px, -0.13vw, 0px);
    --px200: clamp(-200px, -12.66vw, 0px);

    /* Zero and positive values (ascending) */
    --px0: clamp(0px, 0vw, 0px);
    --px1: clamp(0px, 0.06vw, 1px);
    --px1_9: clamp(0px, 0.12vw, 1.9px);
    --px2: clamp(0px, 0.13vw, 2px);
    --px3: clamp(0px, 0.19vw, 3px);
    --px4: clamp(0px, 0.25vw, 4px);
    --px5: clamp(0px, 0.32vw, 5px);
    --px6: clamp(0px, 0.38vw, 6px);
    --px7: clamp(0px, 0.44vw, 7px);
    --px8: clamp(0px, 0.51vw, 8px);
    --px9: clamp(0px, 0.57vw, 9px);
    --px10: clamp(0px, 0.63vw, 10px);
    --px11: clamp(0px, 0.70vw, 11px);
    --px12: clamp(0px, 0.76vw, 12px);
    --px13: clamp(0px, 0.82vw, 13px);
    --px14: clamp(0px, 0.89vw, 14px);
    --px15: clamp(0px, 0.95vw, 15px);
    --px16: clamp(0px, 1.01vw, 16px);
    --px17: clamp(0px, 1.08vw, 17px);
    --px18: clamp(0px, 1.14vw, 18px);
    --px19: clamp(0px, 1.20vw, 19px);
    --px20: clamp(0px, 1.27vw, 20px);
    --px21: clamp(0px, 1.33vw, 21px);
    --px22: clamp(0px, 1.39vw, 22px);
    --px23: clamp(0px, 1.46vw, 23px);
    --px24: clamp(0px, 1.52vw, 24px);
    --px25: clamp(0px, 1.58vw, 25px);
    --px26: clamp(0px, 1.65vw, 26px);
    --px28: clamp(0px, 1.77vw, 28px);
    --px29: clamp(0px, 1.84vw, 29px);
    --px30: clamp(0px, 1.90vw, 30px);
    --px31: clamp(0px, 1.96vw, 31px);
    --px32: clamp(0px, 2.03vw, 32px);
    --px33: clamp(0px, 2.09vw, 33px);
    --px35: clamp(0px, 2.22vw, 35px);
    --px36: clamp(0px, 2.28vw, 36px);
    --px40: clamp(0px, 2.53vw, 40px);
    --px42: clamp(0px, 2.66vw, 42px);
    --px44: clamp(0px, 2.78vw, 44px);
    --px45: clamp(0px, 2.85vw, 45px);
    --px46: clamp(0px, 2.91vw, 46px);
    --px47: clamp(0px, 2.97vw, 47px);
    --px48: clamp(0px, 3.04vw, 48px);
    --px49: clamp(0px, 3.1vw, 49px);
    --px50: clamp(0px, 3.16vw, 50px);
    --px52: clamp(0px, 3.29vw, 52px);
    --px55: clamp(0px, 3.48vw, 55px);
    --px56: clamp(0px, 3.54vw, 56px);
    --px57: clamp(0px, 3.61vw, 57px);
    --px60: clamp(0px, 3.80vw, 60px);
    --px62: clamp(0px, 3.92vw, 62px);
    --px63: clamp(0px, 3.99vw, 63px);
    --px64: clamp(0px, 4.05vw, 64px);
    --px66: clamp(0px, 4.18vw, 66px);
    --px68: clamp(0px, 4.3vw, 68px);
    --px70: clamp(0px, 4.43vw, 70px);
    --px74: clamp(0px, 4.68vw, 74px);
    --px77: clamp(0px, 4.87vw, 77px);
    --px78: clamp(0px, 4.94vw, 78px);
    --px80: clamp(0px, 5.06vw, 80px);
    --px82: clamp(0px, 5.19vw, 82px);
    --px83: clamp(0px, 5.25vw, 83px);
    --px85: clamp(0px, 5.38vw, 85px);
    --px90: clamp(0px, 5.70vw, 90px);
    --px95: clamp(0px, 6.01vw, 95px);
    --px96: clamp(0px, 6.08vw, 96px);
    --px100: clamp(0px, 6.33vw, 100px);
    --px107: clamp(0px, 6.77vw, 107px);
    --px110: clamp(0px, 6.96vw, 110px);
    --px115: clamp(0px, 7.28vw, 115px);
    --px120: clamp(0px, 7.59vw, 120px);
    --px128: clamp(0px, 8.10vw, 128px);
    --px130: clamp(0px, 8.23vw, 130px);
    --px135: clamp(0px, 8.54vw, 135px);
    --px140: clamp(0px, 8.86vw, 140px);
    --px150: clamp(0px, 9.49vw, 150px);
    --px160: clamp(0px, 10.13vw, 160px);
    --px165: clamp(0px, 10.45vw, 165px);
    --px170: clamp(0px, 10.76vw, 170px);
    --px175: clamp(0px, 11.08vw, 175px);
    --px178: clamp(0px, 11.27vw, 178px);
    --px180: clamp(0px, 11.39vw, 180px);
    --px184: clamp(0px, 11.65vw, 184px);
    --px190: clamp(0px, 12.03vw, 190px);
    --px194: clamp(0px, 12.28vw, 194px);
    --px200: clamp(0px, 12.66vw, 200px);
    --px210: clamp(0px, 13.29vw, 210px);
    --px220: clamp(0px, 13.92vw, 220px);
    --px230: clamp(0px, 14.56vw, 230px);
    --px240: clamp(0px, 15.19vw, 240px);
    --px241: clamp(0px, 15.25vw, 241px);
    --px245: clamp(0px, 15.51vw, 245px);
    --px250: clamp(0px, 15.82vw, 250px);
    --px260: clamp(0px, 16.46vw, 260px);
    --px270: clamp(0px, 17.09vw, 270px);
    --px280: clamp(0px, 17.72vw, 280px);
    --px290: clamp(0px, 18.35vw, 290px);
    --px300: clamp(0px, 18.99vw, 300px);
    --px310: clamp(0px, 19.62vw, 310px);
    --px320: clamp(0px, 20.25vw, 320px);
    --px330: clamp(0px, 20.89vw, 330px);
    --px340: clamp(0px, 21.52vw, 340px);
    --px345: clamp(0px, 21.84vw, 345px);
    --px350: clamp(0px, 22.15vw, 350px);
    --px360: clamp(0px, 22.78vw, 360px);
    --px370: clamp(0px, 23.42vw, 370px);
    --px400: clamp(0px, 25.32vw, 400px);
    --px430: clamp(0px, 27.22vw, 430px);
    --px450: clamp(0px, 28.48vw, 450px);
    --px475: clamp(0px, 30.06vw, 475px);
    --px500: clamp(0px, 31.65vw, 500px);
    --px550: clamp(0px, 34.81vw, 550px);
    --px600: clamp(0px, 37.97vw, 600px);
    --px634: clamp(0px, 40.13vw, 634px);
    --px640: clamp(0px, 40.51vw, 640px);
    --px646: clamp(0px, 40.89vw, 646px);
    --px650: clamp(0px, 41.14vw, 650px);
    --px670: clamp(0px, 42.41vw, 670px);
    --px690: clamp(0px, 43.67vw, 690px);
    --px700: clamp(0px, 44.30vw, 700px);
    --px720: clamp(0px, 45.57vw, 720px);
    --px730: clamp(0px, 46.2vw, 730px);
    --px740: clamp(0px, 46.84vw, 740px);
    --px750: clamp(0px, 47.47vw, 750px);
    --px760: clamp(0px, 48.10vw, 760px);
    --px800: clamp(0px, 50.63vw, 800px);
    --px820: clamp(0px, 51.9vw, 820px);
    --px850: clamp(0px, 53.8vw, 850px);
    --px900: clamp(0px, 56.96vw, 900px);
    --px950: clamp(0px, 60.13vw, 950px);
    --px1000: clamp(0px, 63.29vw, 1000px);
    --px1100: clamp(0px, 69.62vw, 1100px);
    --px1130: clamp(0px, 71.52vw, 1130px);
    --px1150: clamp(0px, 72.78vw, 1150px);
    --px1315: clamp(0px, 83.23vw, 1315px);
    --px1380: clamp(0px, 87.34vw, 1380px);
    --px1340: clamp(0px, 84.81vw, 1340px);
    --px1450: clamp(0px, 91.77vw, 1450px);
    --px688: clamp(0px, 43.54vw, 688px);
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1700px;
        width: 95%;

        margin: 0 auto;
    }
}

html {
    scroll-behavior: smooth;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: #222;
}

body>* {
    overflow: hidden;
}

.titto-sunny-section {
    width: 100%;
    height: 100vh;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}



.titto-cont-setn {
    position: relative;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
}

.cut-page-img {
    display: block;
    width: 100%;
    height: 100vh;
}

.titto-main-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* justify-content: space-around; */
    gap: var(--px100);
}

.head-setn-cont {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.mainhead {

    text-align: center;
    transform: rotate(-3deg);
    font-family: "Themysion", cursive;
    font-size: var(--px70);
    font-weight: normal;
    line-height: 1.55;
    color: #0066d6;
}

.head-setn-cont space{
margin-right: 25px;
}

.sign-setn-img {
    width: var(--px200);
    height: var(--px60);
    overflow: hidden;
}

.sign-setn-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.titto-bottom-content {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px14);

    font-family: "Roboto", sans-serif;
    font-size: var(--px18);
    font-weight: 400;
    line-height: 1.5;
    color: #0066d6;
}

.titto-bottom-content span {
    display: block;
    text-align: center;
}

.titto-bottom-content a {
    color: #0066d6;
    text-decoration: underline;
}

.titto-bottom-content a:hover {
    color: #0066d6;
}

html.font-loading .titto-sunny-section {
    opacity: 0;
}

html.font-loaded .titto-sunny-section {
    opacity: 1;
}



@media (max-width: 768px) {


    .titto-main-content {
        gap: 50px;
    }



    .mainhead {
        transform: rotate(-4deg);
        font-size: 42px;
    }

    .sign-setn-img {
        width: 120px;
        height: 50px;
    }

    .titto-bottom-content {

        gap: 8px;
        font-size: 14px;

    }

    .head-setn-cont space{
margin-right: 18px;
}
}




@media (max-width: 600px) {
.container {
    margin: 0 20px;
    padding: 0px;
}
    .titto-main-content {
        gap: 50px;
        padding: 20px;
    }

    .mainhead {
        transform: rotate(-4deg);
        font-size: 30px;
    }

    .sign-setn-img {
        width: 80px;
        height: 40px;
    }

    .titto-bottom-content {
        gap: 8px;
        font-size: 10px;
    }
.head-setn-cont space{
margin-right: 15px;
}
}