@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&display=swap');
        body {
            /* background-image: url(/assets/img/bg_img.svg); */
            /* background-position: center center;
    background-repeat: inherit;
    background-attachment: fixed;
    background-size: auto; */
            /* background-color: #DCD6D3;
     */
            background-color: rgb(219, 214, 211);
            font-family: 'Comfortaa', cursive !important;
        }
        
        .bgg {
            background-color: rgb(219, 214, 211);
        }
        
        .under_line {
            border-width: 2px;
            opacity: 50;
            color: black;
            margin-bottom: 0%;
        }
        
        .navbar-brand {
            font-weight: 700;
        }
        
        .accescode_label {
            font-weight: 400;
            font-size: 2.5rem;
        }
        
        .accescode_area {
            border-style: line;
            border-width: 2px;
            border-radius: 5px;
            height: 50px;
            width: 400px;
        }
        
        .proceed_button {
            height: 50px;
        }
        
        .big_header_button {
            margin: 1%;
            border-radius: 20px;
        }
        
        .container-fluid {
            padding: 1% 9% 1%;
        }
        
        @media screen and (min-width: 375px) and (max-width:700px) {
            .big_hero_img {
                height: 200px;
                width: 200px;
            }
            .explore_days_img {
                height: 40px;
                width: 200px;
            }
            .using_ai_card {
                height: 100px;
                width: 200px;
            }
        }
        /* media screen end */
        
        .first_paragraph {
            text-align: left;
        }
        
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 80px;
        }
        
        .container .card {
            position: relative;
            width: 300px;
            height: 450px;
            background: var(--clr);
            border-radius: 20px;
            border-top-left-radius: 70px;
            overflow: hidden;
            margin: 5%;
        }
        
        .container .card .box {
            position: absolute;
            inset: 3px;
            background: #DCD6D3;
            border-radius: 10px;
        }
        
        .container .card .box .icon {
            position: absolute;
            /* width: 140px; */
            height: 140px;
            width: 100%;
            background: var(--clr);
            border-bottom-right-radius: 50%;
            transition: 0.5s;
        }
        
        .container .card .box .icon:before {
            content: "";
            position: absolute;
            bottom: -30px;
            left: 0px;
            width: 30px;
            height: 30px;
            background: transparent;
            border-top-left-radius: 30px;
            box-shadow: -5px -5px 0 5px var(--clr);
        }
        
        .container .card .box .icon:after {
            content: "";
            position: absolute;
            top: 0;
            right: -30px;
            width: 30px;
            height: 30px;
            background: transparent;
            border-top-left-radius: 30px;
            box-shadow: -5px -5px 0 5px var(--clr);
        }
        
        .container .card .box .icon .iconBox {
            position: absolute;
            inset: 10px;
            background: #DCD6D3;
            border-radius: 50%;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 600;
        }
        
        .container.card.box.icon.iconBox {
            font-size: 4em;
            color: #fff;
        }
        
        .iconboxH1 {
            font-size: 5rem;
            color: #000;
        }
        
        .container .card .box .content {
            position: absolute;
            top: 150px;
            padding: 20px;
            margin-left: auto;
            text-align: center;
            color: black;
            font-weight: 600;
        }
        
        .contentImg {
            height: 40%;
            width: 40%;
        }
        
        .container .card .box .content a {
            background: var(--clr);
            display: inline-block;
            padding: 10px 25px;
            text-decoration: none;
            color: #DCD6D3;
            text-transform: uppercase;
            font-weight: 600;
            border-radius: 30px;
            transition: 0.5s;
        }
        
        .container .card .box .content a:hover {
            letter-spacing: 0.2em;
        }
        
        .lets_talk_button {
            border-radius: 20px;
            background: transparent;
            color: #000;
            text-decoration: none;
        }
        
        .talk_morebtn {
            text-decoration: none;
            text-transform: uppercase;
            color: #000;
        }
        
        .talk_morebtn:hover {
            color: #DCD6D3;
        }
        
        .borde {
            /* border: #000 1px solid; */
            /* width: 285px;
            height: 248px; */
            /* border-radius: 20px; */
            background-image: url(/assets/img/bg.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: auto;
            height: 220px;
            width: 250px;
            cursor: pointer;
        }
        
        .borde:hover {
            color: red;
        }