styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto Condensed", serif;
}

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

:root{
    --main-bg-gradient-color:linear-gradient(90deg, #090611, #090611, #150c2d, #20104d, #3a0fa8);
    --all-btns-gradient-color:linear-gradient(90deg, #7c01ff, #015dfe);
    --first-bg-color:#fff;
    --second-bg-color:#015efe1e;
    --main-heading:#4d20ff;
}




.hero {
    width: 100vw;
    height: 1000px;
    background: var(--main-bg-gradient-color);
    overflow: hidden;
}

@media screen and (max-width:2500px){
.hero{
    height: 700px;
}
}




.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px 20px 40px;
}

.navbar ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    list-style: none;
}

.navbar ul li a {
    text-decoration: none;
    color: lightcyan;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        bottom: -0.2rem;
        left: 0;
        width: 0%;
        border-bottom: .2rem solid #015dfe;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;

        transition: all 0.5s linear;
    }
}

.navbar ul li a:hover::after {
    width: 100%;
}


.navbar i {
    letter-spacing: 3px;
    color: lightcyan;
    transition: all 1s ease;
}

.navbar-right-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    border: 1px solid #015efe2d;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;

    background: linear-gradient(180deg, #3a0fa8cc, #090611, #150c2d, #20104d);
}

.navbar-right-section .navbar-btns {
    font-size: 14px;
    padding: 8px 28px;
    border-radius: 50px;
    text-decoration: none;
    cursor: pointer;
    color: white;
    transition: all 1s linear;
}

.navbar-right-section .navbar-btns:hover {
    color: #090611;
    /* border: 2px solid rgba(255, 255, 255, 0.467); */
    font-weight: 600;
    background: linear-gradient(-90deg, #7c01ff, #015dfe);

    & i {
        color: #090611;
    }
}

.navbar .nav-login-btn {
    border: 2px solid #015efe89;
}


.navbar .nav-add-btn {
    background:var(--all-btns-gradient-color);
}


.navbar-right-section .nav-btns {
    padding: 0px 10px 0px 40px;

}

.navbar .navbar-bars,
.check-input {
    display: none;
    
}


#click:checked~.navbar ul {
    display: block;

}



@media screen and (max-width:1024px) {

 

    .navbar {
        padding: 22px 0px 10px 20px;
    }

    .navbar ul,
    .navbar .nav-btns a,
    .nav-add-btn {
        display: none;
        width: 200px;
        height: 280px;
        position: fixed;
        right: 0px;
        margin-top: 2rem;
        background: var(--main-bg-gradient-color);
        text-align: center;
        z-index: 9;
        border-bottom-left-radius: 50px;
        border-top-left-radius: 50px;
    }

    .navbar ul {
        /* padding: 40px 5px; */

        & li {
            margin-top: 2.5rem;
            font-size: .8rem;
        }
    }

    .navbar .navbar-bars {
        display: block;
        font-size: 1.5rem;


    }

    .navbar-right-section {
        display: block;
        padding: .5rem .1rem .5rem 1.5rem;
        position: fixed;
        top: .2rem;
        right: -1rem;
        z-index: 9;

    }
}

@media screen and (max-width:600px) {
    /* .navbar i {
        font-size: 1rem;
    } */
}







/* THIS IS FOR HERO SECTIONS */

.hero-containt {
    width: 100%;
    display: flex;
    position: relative;

}

.hero .hero-left-section {
    width: 50%;
    display: flex;
    align-items: flex-start;
    justify-content: start;
    padding-top: 70px;
}

.hero .hero-left-section .content h1 {
    font-size: 5.5rem;
    color: #fff;
}

.hero .hero-left-section .content .btn,
.hero-title,
.hero-para {
    margin-left: 60px;
}

.hero .hero-left-section .content h1 span {
    color: #7c01ff;
    font-family: Arial, Helvetica, sans-serif;
}

.hero .hero-left-section .content p {
    width: 80%;
    color: white;
    line-height: 1.3em;
    margin-top: 1em;
    margin-bottom: 3em;
}

.hero .hero-left-section .content .btn,
.btn {
    color: white;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 3em;
    font-weight: 500;
    background:var(--all-btns-gradient-color);
    transition: all 1s ease;

    &:hover {
        color: #090611;
        background: linear-gradient(-90deg, #7c01ff, #015dfe);
    }
}


.hero .hero-left-section .content {
    height: 100%;
}

.hero .hero-left-section .content .circle1,
.circle2,
.circle3 {
    background: linear-gradient(180deg, #7c01ff, #015dfe);
    box-shadow: 0px 0px 5px 4px #3a0fa8;
    border-radius: 50%;
    transition: all 1s ease;
    cursor: pointer;

    &:hover {
        scale: 1.4;
    }
}

.hero .hero-left-section .content .circle1 {
    width: 1em;
    height: 1em;
    position: absolute;
    top: 60%;
    left: 45%;
}

.hero .hero-left-section .content .circle2 {
    width: 1.8em;
    height: 1.8em;
    position: absolute;
    top: 78%;
    left: 35%;
}

.hero .hero-left-section .content .circle3 {
    width: 1.8em;
    height: 1.8em;
    position: absolute;
    top: 65%;
    left: 25%;
}

.hero .hero-left-section .ellipse1 {
    width: 60%;
    height: 100%;
    position: absolute;
    bottom: -20px;
    left: 0px;
    background: linear-gradient(90deg, #4a12d6, #7c01ff, #015dfe);
    clip-path: ellipse(46% 25% at 10% 100%);
}

.hero .hero-left-section .ellipse1 .ellipse2 {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -20px;
    left: 0px;
    background: linear-gradient(90deg, #4f77fb, #015dfe, #7c01ff);
    clip-path: ellipse(48% 25% at 10% 100%);
}

.hero .hero-left-section .ellipse1 .ellipse2 .ellipse3 {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -25px;
    left: 0px;
    background-color: #090611;
    clip-path: ellipse(52% 24% at 10% 100%);
}





/* Hero Right Section-------------------- */



.hero .hero-right-section {
    width: 50%;
    height: 100vh;
    display: flex;
    position: relative;
    justify-content: center;
    overflow: hidden;
}

.hero .hero-right-section .first {
    width: 88%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: linear-gradient(90deg, #4a12d6, #7c01ff, #015dfe);
    clip-path: ellipse(99% 99% at 99% 99%);
}

.hero .hero-right-section .second {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: linear-gradient(90deg, #4f77fb, #015dfe, #7c01ff);
    clip-path: ellipse(94% 98% at 99% 99%);
}

.hero .hero-right-section .image {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    /* background-color: red; */
    background-image: url("images/main-hero-img.avif");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top -100px right -50px;
    clip-path: ellipse(88% 98% at 99% 99%);
}

@media screen and (max-width:1250px) {

    .hero .hero-left-section .content {
        & h1 {
            font-size: 4rem;
        }
    }
}

@media screen and (max-width:2500px) {
    .hero .hero-right-section {
        height: 700px;
        }
    }

@media screen and (max-width:1024px) {
    .hero-containt {
        flex-direction: column;
    }

    .hero .hero-left-section {
        padding-top: 1rem;
    }

    .hero .hero-left-section .ellipse1 .ellipse2 .ellipse3 {
        top: 0px;
        left: 0px;
        clip-path: ellipse(52% 24% at 10% 100%);
    }

    .hero .hero-left-section .content {
        & h1 {
            font-size: 3.5rem;
        }

        & .circle1 {
            width: 1rem;
            height: 1rem;
            top: 55%;
            left: 15%;
        }

        & .circle2 {
            width: 1.3rem;
            height: 1.3rem;
            top: 45%;
            left: 30%;
        }

        & .circle3 {
            width: 1.5rem;
            height: 1.5rem;
            top: 45%;
            left: 5%;
        }
    }

    .hero .hero-left-section {
        width: 100%;

    }

    .hero .hero-right-section {
        width: 100%;
        /* height: 100%; */
        align-items: start;

        & .first {
            width: 65%;
        }
    }

    .hero .hero-left-section .ellipse1 {
        display: none;
    }

    .hero .hero-right-section .first,
    .second {
        width: 70%;
    }

    .hero .hero-right-section .image {
        background-position: top -250px right -50px;
    }

}

@media screen and (max-width:600px) {

    .hero .hero-right-section .first,
    .second {
        width: 90%;
    }

    .hero .hero-left-section .content {
        & h1 {
            font-size: 2.5rem;
        }

        .hero .hero-left-section .content .btn,
        .hero-title,
        .hero-para,
        .hero .hero-left-section .content .btn,
        .btn {
            margin-left: 2rem;

        }

        .hero .hero-left-section .content p {
            width: 90%;
        }
    }
}

@media screen and (max-width:350px) {
    .hero .hero-left-section .content {
        & h1 {
            font-size: 2rem;
        }
    }
}

/* THIS IS FOR FEATURED PROPERTIES */

.featured {
    height: auto;
    background-color: #ffffff;
}

.featured .featured-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0px;

}

.featured .featured-title h3,
.cities .citie1 h3 {
    font-size: 2rem;
    /* padding-left: 45px; */
    color: var(--main-heading);
    font-weight: 600;
    letter-spacing: 2px;

}

.featured .featured-title h1,
.cities .citie1 h1 {
    font-size: 2.5rem;
    margin-top: 10px;
    letter-spacing: 3px;
}

.featured .featured-title ul {
    display: flex;
    gap: 4rem;
    list-style: none;
    margin-top: 35px;
}

.featured .featured-title ul li a,
.service-details a {
    text-decoration: none;
    background-color: #ffffff;
    color: black;
    font-size: 14px;
    padding: 8px 30px;
    border-radius: 50px;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.158);
    transition: all .5s ease;

    &:hover {
        background:var(--all-btns-gradient-color);
        color: #fff;

    }
}

.featured .featured-title .btn,
.service-details a,
.common-featur-btn {
    background:var(--all-btns-gradient-color);
    color: white;
    transition: all .5s ease;


    &:hover {
        color: #090611;
        background: linear-gradient(-90deg, #7c01ff, #015dfe);

    }
}

.featured .all-featured {
    height: auto;
    gap: 40px;
    padding: 0px 40px;
    margin: 30px 0px;
    display: grid;
    grid-template-columns: repeat(4,auto);
}

.featured .all-featured .all-featured-button {
    grid-column-start: 1;
    grid-column-end: 5;
    margin: 30px auto 0px auto;
}

.featured .all-featured .all-featured-button .btn {
    padding: 10px 30px 10px 40px;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    background:var(--all-btns-gradient-color);
    transition: all .5s ease;

    &:hover {
        color: #090611;
        background: linear-gradient(-90deg, #7c01ff, #015dfe);

    }

}

.featured .all-featured .all-featured-button .btn i {
    padding-left: 20px;
}

.featured .all-featured .featur {
    border: 1px solid grey;
    box-shadow: 0px 0px 10px 1px grey;
    border-radius: 25px;
    overflow: hidden;
    height: auto;
    /* color: white; */
    background: linear-gradient(90deg, #7c01ff29, #015efe47);

}

.featured .all-featured .featur .featured-img {
    height: 40vh;
    /* min-width: 400px; */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: scale .5s ease-in;

    &:hover {
        scale: 1.1;
    }

}

/* this is for common featured */
.common-img {
    transition: all 1s ease;
}

.common-img:hover {
    filter: brightness(70%);
}

/* this is for common featured */

.featured .all-featured .featured1 .featured-img {
    background-image: url("images/featured1.jpg");
    
}

.featured .all-featured .featured2 .featured-img {
    background-image: url("images/featured2.jpg");
}

.featured .all-featured .featured3 .featured-img {
    background-image: url("images/featured3.jpg");
}

.featured .all-featured .featured4 .featured-img {
    background-image: url("images/featured4.jpg");
}

.featured .all-featured .featured5 .featured-img {
    background-image: url("images/featured5.avif");
}

.featured .all-featured .featured6 .featured-img {
    background-image: url("images/featured6.jpg");
}

.featured .all-featured .featured7 .featured-img {
    background-image: url("images/featured7.jpg");
}

.featured .all-featured .featured8 .featured-img {
    background-image: url("images/featured8.jpeg");
}


.featured .all-featured .featured-sub-title {
    padding: 15px 20px;
}

.featured .all-featured .featured-sub-title h3 {
    font-size: 18px;
}

.featured .all-featured .featured-sub-title ul {
    display: flex;
    list-style: none;
    gap: 20px;
    margin-top: 10px;
}

.featured .all-featured .featured-sub-title ul li i {
    font-size: 15px;
    opacity: 0.5;
    color: grey;
}

.featured .all-featured .featured-sub-title ul li .i-text-blur {
    opacity: 0.5;
    font-size: 13px;
    font-weight: 300;
    margin-left: 5px;
    margin-right: 3px;
}

.featured .all-featured .featured-sub-title ul li span {
    font-weight: 600;
}

.featured .all-featured .featured-price {
    padding: 0px 20px;
    /* background-color: red; */
}

.featured .all-featured .featured-price .icon-imgae {
    width: 2rem;
    height: 2rem;
    background-image: url(images/man.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 50%;

}

.featured .all-featured .featured-price .f-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid grey;
    padding: 20px 0px;
}

.featured .all-featured .featured-price .f-price .logo-featured-uploder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.featured .all-featured .featured-price .f-price .logo-featured-uploder span {
    font-weight: 400;
    font-size: 14px;
}

.featured .all-featured .featured-price .f-price span {
    font-weight: 700;
}


@media screen and (max-width:1450px) {
    .featured .all-featured {
     grid-template-columns: repeat(3,auto);
 
     
     & .all-featured-button {
        grid-column-start: 1;
        grid-column-end: 4;
    }
    } 
}

@media screen and (max-width:1200px) {
    .featured .featured-title {
        & ul {
            flex-wrap: wrap;
            align-items: center;
            gap: 2rem;
            margin-left: 3rem;
            margin-right: 3rem;
            justify-content: center;
        }
    }
    
    .featured .all-featured .featur .featured-img {
        min-width: 400px;
    }
    .featured .all-featured {
        grid-template-columns: repeat(2,auto);
        
        & .all-featured-button {
           grid-column-start: 1;
           grid-column-end: 3;
       }
       } 
    }

@media screen and (max-width:800px) {

    .featured .all-featured .all-featured-button a {
        font-size: 1rem;

    }
    .featured .all-featured {
        grid-template-columns:repeat(1,auto);
    
        
        & .all-featured-button {
           grid-column-start: 1;
           grid-column-end: 2;
       }
       } 
    
    
}

@media screen and (max-width:450px) {

    .featured .featured-title h3,
    .cities .citie1 h3,
    .services .service1 h3 {
        font-size: 1rem;
    }

    .featured .featured-title h1,
    .cities .citie1 h1,
    .services .service1 hh1 {
        font-size: 1.5rem;
        margin-top: 5px;
    }

    .featured .all-featured {
        padding: 0 2rem;
    }

    .featured .all-featured .featur .featured-img {
        height: 30vh;
    }

    .featured .all-featured .featured-sub-title {

        & h3 {

            font-size: 1rem;
        }

        & ul {
            font-size: .9rem;
        }
    }

    .featured .all-featured .featured-price .f-price {
        padding: 1rem 0;
    }
    .featured .featured-title h1, .cities .citie1 h1{
        letter-spacing: 0px;
    }
}



/* THIS IS FOR CITIES */

.cities {
    display: grid;
 background-color: var(--second-bg-color);
    height: auto;
    padding: 10px 40px;
    gap: 20px;

}

.cities .citie1 {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    padding: 30px;

}

.cities .ellipsis {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    font-size: 40px;
    color: #015dfe;

}

.cities .citie2 {

    background-image: url("images/citie__1.avif");
    background-position: center;
}

.cities .citie3 {
    background-image: url("images/citie__2.avif");
    background-position: center;

}

.cities .citie4 {
    background-image: url("images/citie__3.avif");
    background-position: center;

}

.cities .citie {
    height: 80vh;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0px 0px 5px 2px grey;
    transition: scale 1s ease;

    &:hover {
        scale: 1.1;
    }
}

.cities .citie .cities-details {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    width: 95%;
    border-radius: 10px;
    background-color: white;

}

.cities .citie .citie-arrow-icon {
    margin: auto 0;
    color: #015dfe;
}

.cities .citie .citie-arrow-icon:hover {
    scale: 1.1;
}


@media screen and (max-width:480px) {
    .cities .citie {
        height: 60vh;
    }

}


/* THIS IS FOR SERVICES */


.services {
    display: grid;
    grid-template-columns: 3;
    grid-template-rows: 2;
    padding: 10px 40px 40px 40px;
    gap: 20px;
    text-align: center;
}

.services .service1 {
    grid-column-start: 1;
    grid-column-end: 4;
    /* text-align: center; */
}

.services .service1 h3 {
    color: var(--main-heading);
    /* margin-left: 60px; */
    font-size: 2rem;
    margin-top: 20px;
    letter-spacing: 2px;
}

.services .service1 h1 {
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-top: 20px;
}

.services .allService {
    height: 40vh;
    cursor: pointer;
    transition: scale .5s ease;

    &:hover {
        scale: 1.1;

    }
}

.services .service2 .services2-img {
    background-image: url("images/service1-img.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.services .service3 .services3-img {

    background-image: url("images/service2-img.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

}

.services .service4 .services4-img {
    background-image: url("images/service3-img.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

}

.services .service-details {
    padding: 0px 3rem 1.5rem 3rem;
    text-align: center;
}

.services .service-details h3 {
    font-size: 25px;
}

.services .service-details p {
    margin: .8rem 0 1rem 0;
}

.services .service-details a {
    padding-left: 30px;
}

.services .service2,
.service3,
.service4 {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width:1024px) {

    .cities .citie1,
    .services .service1 {
        grid-column-start: 1;
        grid-column-end: 2;

    }

    .cities .ellipsis {
        grid-column-start: 1;
        grid-column-end: 2;

    }

    .services .allService {
        height: 55vh;
    }

    .services .service-details {
        padding: 0px 30px 20px 30px;
    }
    /* .services .service2 .services2-img,.services .service3 .services3-img,.services .service4 .services4-img {
        scale: .9;
    } */
    .services .service-details p {
        margin: .5rem 0 1rem 0;
        font-size: .8rem;
    }
    .services .service-details h3 {
        font-size: 1.2rem;
    }
}

@media screen and (max-width:600px) {
    .services .allService {
        height: 30vh;
    }

    .services .service-details {
        padding:0 1rem 1rem 1rem;
    }
    .services .service1 h3{
        font-size: 1rem;
    }
    .services .service1 h1{
        font-size: 1.5rem;
        margin-top: 5px;
    }
}
@media screen and (max-width:450px) {
    .services .service4 .services4-img{
        scale: 1.3;
    }
}




/* This is for people comment */

.testimonials {
 background-color: var(--second-bg-color);
    padding: 1rem 2rem;
}

.testimonials .testimonial-title,
.agents .agent-title,.blog-title {
    text-align: center;
    padding: 2rem 10rem 4rem 10rem;
}

.testimonials .testimonial-title h1,
.agents .agent-title h1,.blog-title h1 {
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin: 0;
}

.testimonials .testimonial-title h3,
.agents .agent-title h3,.blog-title h3 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--main-heading);
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.testimonials .allTestimonial {
    padding: 1rem 10rem;
}


.testimonials .testimonial-details h3 {
    font-size: 20px;
    /* padding-top: 40px; */
    letter-spacing: 1px;
}

.testimonials .testimonial-details p {
    margin-left: 0;
    font-size: 16px;
    padding-top: 25px;

    letter-spacing: 1px;
    word-spacing: 2px;
}

.testimonials .testimonials1-img {
    background-image: url("images/client1.jpg");
}

.testimonials .testimonials2-img {
    background-image: url("images/client2.jpg");
}

.testimonials .testimonials3-img {
    background-image: url("images/client3.jpg");
}

.testimonials .alltestimonia1 {
    width: 3rem;
    height: 3rem;
    margin-top: 30px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
    transition: scale .5s ease;

    &:hover {
        scale: 1.4;
    }
}

.testimonials .testimonials-client h4 {
    color: #015dfe;
    font-size: 20px;
    margin-top: 25px;
    letter-spacing: 2px;
}

.testimonials .testimonials-client h4 span {
    color: rgb(0, 0, 0, 0.5);
    font-size: 16px;
    letter-spacing: 0px;

}

.testimonials .testimonials-client i {
    color: rgb(255, 179, 0);
    font-size: 16px;
    margin-top: 10px;
    margin-right: 10px;
    font-size: 10px;
    cursor: pointer;
    transition: scale .5s ease;

    &:hover {
        scale: 2;
    }
}



@media screen and (max-width:1024px) {

    .testimonials .testimonial-title h3,
    .agents .agent-title h3,.blog-title h3 {
        font-size: 1rem;
    }

    .testimonials .testimonial-title h1,
    .agents .agent-title h1,.blog-title h1 {
        font-size: 1.5rem;
    }

    .testimonials .testimonial-title,
    .agents .agent-title {
        padding: 2rem 0;
    }

    .testimonials .allTestimonial {
        padding: 1rem;
    }
    .testimonials .testimonial-title h3, .agents .agent-title h3,.blog-title h3{
        margin-bottom: 5px;
    }
}



/* <!-- This is for Agents --> */

.agents {
    padding: 2rem 10rem 5rem 10rem;
}

.agents .agents-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    /* grid-template-rows: repeat(2, auto); */
    gap: 40px;

}

.agents .agents-grid .agent1 .agent-img {
    height: 90%;
    background-image: url("images/agent1.jpg");
}

.agents .agents-grid .agent2 .agent-img {
    height: 90%;
    background-image: url("images/agent2.jpg");
}

.agents .agents-grid .agent3 .agent-img {
    height: 90%;
    background-image: url("images/agent3.jpg");
}

.agents .agents-grid .agent4 .agent-img {
    height: 90%;
    background-image: url("images/agent4.jpg");
}

.agents .agents-grid .agent .agent-img {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
}
.agent .agent-img{
    transition: filter .5s ease;
}

.agent .agent-img:hover{
    filter: brightness(80%);
}

.agents .agents-grid .agent {
    height: 60vh;

}

.agents .agents-grid .agent .agentDeatil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 2px;
}

.agents .agents-grid .agent .agentDeatil .agentName span {
    color: rgb(0, 0, 0, 0.5);
    font-size: 1rem;
}

.agents .agents-grid .agent .agentDeatil .agentName h4 {
    letter-spacing: 1px;
    font-size: 1rem;
}

.agents .agents-grid .agent .agentDeatil i {
    margin-left: 10px;
    padding: 10px;
    border-radius: 50%;
    color: rgb(0, 0, 0, 0.5);
    border: 1px solid rgb(0, 0, 0, 0.5);
    box-sizing: 0px 0px 1px 1px rgb(0, 0, 0, 0.3);
    background-color: transparent;
    cursor: pointer;
    transition: all .5s ease;

    &:hover {
        scale: 1.2;
        color: #015dfe;
        border: 1px solid #015dfe;
    }
}




@media screen and (max-width:1024px) {

    .agents .agents-grid {

        grid-template-columns: repeat(1, auto);

    }
}

@media screen and (max-width:600px) {
    .agents {
        padding: 2rem;
    }
}






/* This is for footer sections */


.footer {
    background: var(--main-bg-gradient-color);
    color: white;
    padding: 1rem 5rem;
}

.footer .socialMediaIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer .socialMediaIcon .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    letter-spacing: 1px;
    gap: 10px;
}

.footer .socialMediaIcon .logo h3 {
    color: #015dfe;
}

.footer .socialMediaIcon .icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer .socialMediaIcon .icons i {
    background-color: #20104d;
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
    transition: all .5s ease;

    &:hover {
        rotate: 360deg;
        color: #015dfe;
        background-color: #fff;
        scale: 1.4;

    }
}


.footer .footer-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 40px 0px;
}


.footer .left-footer .left-footer-up p {
    color: rgba(255, 255, 255, 1);
    margin-bottom: 18px;
}

.footer .left-footer .left-footer-up h5 {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.5);
}

.footer .left-footer .left-footer-up h5 i {
    margin-right: 5px;
}

.footer .left-footer .left-footer-down {
    font-size: medium;
}

.footer .left-footer .left-footer-down h4,
.footer .right-footer-up h4,
.footer .right-footer-down {
    margin-top: 18px;
}

.footer .left-footer .left-footer-down h5,
.footer .right-footer-up h5,
.footer .right-footer-down p {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.5);
}

.footer .left-footer .left-footer-down {
    font-size: medium;
}

.footer .right-footer .right-footer-down input {
    padding: 8px 200px 8px 10px;
    background: linear-gradient(100deg, #090611, #090611, #150c2d, #20104d, #3a0fa8);
    border-radius: 50px;
    border: none;
    margin-top: 10px;
}

.footer .right-footer-down input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

@media screen and (max-width:1250px) {
    .footer .socialMediaIcon {
        flex-direction: column;

        & .logo h3 {
            margin-bottom: 2rem;
        }

        & .logo i {
            margin-bottom: 2rem;
        }
    }
}

@media screen and (max-width:600px) {
    .footer .right-footer .right-footer-down input {
        padding: 8px 100px 8px 10px;
    }

    .footer {
        text-align: center;
        /* padding: 1rem 2rem; */
    }
}

@media screen and (max-width:400px) {
    .footer {
        padding: 1rem 2rem;
    }
}











/* -----------------SUBMITE PROPERTY PAGE----------------------------------- */

/* THIS IS FOR SUBMIT PROPERTY */

.all__body {

    background: linear-gradient(90deg, #090611, #090611, #150c2d, #20104d, #3a0fa8);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.Add-property,
.signin-page {
    background: linear-gradient(90deg, #090611, #090611, #150c2d, #20104d, #3a0fa8);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4rem;
}

.signin-page {
    padding-top: 6rem;

}




@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.property-container {
    width: 100%;
    max-width: 500px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
}


.property-form-box h1 {
    font-size: 2em;
    margin-bottom: 10px;
}

.property-form-box p {
    font-size: 1em;
    color: #ccc;
    margin-bottom: 20px;
}

.property-input-group {
    margin-bottom: 15px;
    text-align: left;
}

.property-input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #ddd;
}

.property-input-group input,
.property-input-group select,
.property-input-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    outline: none;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.property-input-group input::placeholder,
.property-input-group textarea::placeholder {
    color: #090611;
}

.property-input-group select {
    color: #090611;
}

.property-input-group select::placeholder {
    appearance: none;
    cursor: pointer;
}

.property-input-group textarea {
    resize: none;
}

.property-input-group input[type="file"] {
    padding: 5px;
    background-color: transparent;
    color: #ddd;
}


.property-btn {
    width: 100%;
    padding: 12px;
    background:var(--all-btns-gradient-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 1s ease;
}

.property-btn:hover {
    background: linear-gradient(-90deg, #7c01ff, #015dfe);

}





/* ---------------------------SIGNIN PAGE------------------------- */


/* THIS IS FOR SIGNIN PAGE */

.signin-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    /* margin: auto; */
}

.signin-container {
    width: 100%;
    max-width: 400px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    color: #fff;
}


.sign-in-box h1 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #fff;
}

.sign-in-box p {
    margin-bottom: 20px;
    font-size: 1em;
    color: #ccc;
}


.signin-input-group {
    margin-bottom: 15px;
    text-align: left;
}

.signin-input-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #ddd;
}

.signin-input-group input {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    outline: none;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.signin-input-group input::placeholder {
    color: #090611;
}


.signin-btn {
    width: 100%;
    padding: 12px;
    background:var(--all-btns-gradient-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.signin-btn:hover {
    background: linear-gradient(-90deg, #7c01ff, #015dfe);
}


.signin-links {
    margin-top: 15px;
    font-size: 0.9em;
    color: #ccc;
}

.signin-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.signin-links a:hover {
    color: #5e1fc8;
}

.signin-links span {
    margin: 0 5px;
    color: #999;
}


/* This is for apartment section */

.navall {
    background: linear-gradient(90deg, #090611, #090611, #150c2d, #20104d, #3a0fa8);
}

.containers {

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    height: 700px;
    animation: apartments 20s ease infinite alternate;
}

.containers span {
  color: var(--main-heading);
}

.container {
    padding: 4rem 0;

}

.container span {
  color: var(--main-heading);
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    display: block;
    letter-spacing: 2px;
}

.container h2 {
    /* padding-left: 7rem; */
    font-size: 3rem;
    margin-top: .5rem;
    text-align: center;
    letter-spacing: 2px;
    color: #150c2d8a;
}


@keyframes apartments {
    0% {
        background-image: url("/images/apart1.jpeg");
    }

    20% {
        background-image: url("/images/apart2.webp");
    }

    40% {
        background-image: url("/images/apart3.jpeg");
    }

    60% {
        background-image: url("/images/apart4-4.jpg");
    }

    80% {
        background-image: url("/images/apart5.jpeg");
    }

    100% {
        background-image: url("/images/apart6.jpeg");
    }
}

.blure {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;

    & .blure-text h1 {
        width: 60%;
        margin-top: 6rem;
        margin-left: 6rem;
        text-align: left;
        font-size: 5rem;
    }

    & .blure-text .subtext {
        width: 50%;
        margin-left: 6rem;

        text-align: left;
        font-size: 1.4rem;
        margin-top: 1.5rem;
        line-height: 1.8rem;
        letter-spacing: .1rem;
        word-spacing: .5rem;
    }
}

.blure .blure-text {
    color: rgba(255, 255, 255, 0.562);
}

.blure .btn {
    margin-left: 6rem;
    margin-top: 2rem;

    text-align: left;
    width: 10%;

    & a {
        color: white;
        text-decoration: none;
    }
}

@media screen and (max-width:1250px) {
    .blure {

        & .btn {
            width: 140px;
            font-size: 1rem;
            margin-left: 4.5rem;

        }

        & .blure-text h1 {
            font-size: 4rem;
            width: 60%;
            margin-left: 4.5rem;
        }

        & .blure-text .subtext {
            font-size: 1rem;
            width: 60%;
            margin-left: 4.5rem;
        }
    }
}

@media screen and (max-width:600px) {
    .blure {

        & .btn,
        .blure-text h1,
        .blure-text .subtext {
            margin-left: 3rem;
        }

        & .btn {
            width: 130px;
            font-size: .8rem;


        }

        & .blure-text h1 {
            font-size: 3.5rem;
            width: 75%;

        }

        & .blure-text .subtext {
            font-size: .9rem;
            line-height: 1.4rem;
            width: 75%;

        }
    }
}




/* THIS IS FOR ABOUT PAGE */

.vision__container {
    display: flex;
    flex-wrap: wrap;
}

.container__left,
.container__right {
    width: 50%;
    line-height: 1.5rem;
    word-spacing: .5rem;
    color: #150c2d8a;
    font-size: 1rem;
}

.container__left p::first-line {
    font-weight: 500;
    color: black;
}

.container__right p::first-line {
    font-weight: 500;
    color: black;
}

.container__left {
    padding: 2rem 3rem 2rem 8rem;
}

.container__right {
    padding: 2rem 8rem 2rem 0rem;
}


@media screen and (max-width:768px) {
    .vision__container {
        flex-direction: column;
    }

    .container span {
        font-size: 2rem;
    }

    .container h2 {
        font-size: 3rem;

    }

    .container__left,
    .container__right {
        width: 90%;
        padding: 1rem 2rem 2rem 4rem;
    }

}

@media screen and (max-width:600px) {
    .container span {
        font-size: 1.5rem;
    }

    .container h2 {
        font-size: 1.5rem;
    }

    .container__left,
    .container__right {
        font-size: .8rem;
    }

}



.why-choose-us {
    padding: 0rem 7rem 3rem 7rem;
    display: grid;
    background-color: #015efe20;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 2;
    gap: 2rem;
}

.choose-title {
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    padding: 4rem 0 2rem 0;
}

.why-choose-us span {
  color: var(--main-heading);
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    display: block;
}

.why-choose-us p {
    font-size: 1rem;
    margin-top: .5rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
}

.choose-box-title-subtitle,
.choose-box {
    text-align: center;
}

.choose-box {
    background-color: #fff;
    padding: 4rem 3rem;
    transition: all .5s ease-in;
}

.choose-icons i {
    background-color: #015efe61;
    color: #015dfe;
    font-size: 4rem;
    padding: 25px;
    border-radius: 50%;
    transition: all .5s ease-in;
}

.choose-box:hover {
    background-color: #015efe61;

    & h4,
    p {

        color: #fff;
    }

    & .choose-icons i {
        background-color: #fff;
    }
}

.choose-box-title-subtitle {
    & h4 {
        margin-top: 2rem;
        font-size: 1.5rem;
    }

    & p {
        margin-top: 1.5rem;
    }
}

@media screen and (max-width:1250px) {
    .why-choose-us {
        grid-template-columns: repeat(1, auto);
        grid-template-rows: 4;

    }

    .choose-title {
        grid-column-start: 1;
        grid-column-end: 2;
    }
}

@media screen and (max-width:600px) {
    .why-choose-us {
        padding: 0rem 5rem 3rem 5rem;

        & .choose-title {
            padding: 2rem 0 1rem 0;
        }

        & span {
            font-size: 2rem;
        }

        & p {
            font-size: .8rem;
        }
    }

    .choose-box {
        & .choose-icons i {
            font-size: 2.5rem;
        }

        & h4 {
            font-size: 1rem;
        }

        & p {
            font-size: .8rem;
        }
    }
}

@media screen and (max-width:450px) {
    .choose-box {
        padding: 1.5rem 1rem;
    }

    .why-choose-us {
        padding: 0rem 4rem 3rem 4rem;
    }
}



/* THIS IS FOR TEAM */
.team {
    padding-bottom: 2rem;
}

.container .container__team-para {
    margin-top: 1rem;
    text-align: center;
    color: rgba(0, 0, 0, 0.548);
}

.container__wrap {
    margin-top: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.team__module {
    position: relative;
}

.team__content-wrap {
    position: absolute;
    background: linear-gradient(#015efe21, #090611);
    text-align: center;
    color: white;
    width: 100%;
    padding: 1rem 0;
    bottom: 0;
    z-index: 1;
}



@media screen and (max-width:768px) {

    .container .container__team-para {
        margin-left: 3rem;
        margin-right: 3rem;
    }
}




/* This is for contact section */


.contact {
    padding: 0rem 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #015efe15;
    gap: 4rem;
}

.all-input-group {

    background-color: #fff;
    padding: 0 4rem 4rem 4rem;


    & input,
    textarea {
        margin-bottom: 1rem;
    }

    & .input-title {
        padding: 2rem 0rem;
        font-size: 3rem;
        color: var(--main-heading);
    }

    & .name-input-group {
        display: flex;
        gap: 1rem;
    }

    & .fname-input input,
    .lname-input input {
        padding: 5px;
        width: 22rem;
    }

    & .email-input input {
        padding: 5px;
        width: 45rem;
    }

    & .message-input textarea {
        padding: 5px;
        width: 45rem;
        height: 5rem;
    }

    & .contact-submit-btn {
        padding: 8px 5px;
        width: 45rem;
        background:var(--all-btns-gradient-color);
        color: #fff;
        letter-spacing: 2px;
        border: none
    }
}

.inquiries-contact-up {
    padding: 2rem;
    background-color: #fff;
    margin-bottom: 1rem;

    & h4 {
        font-size: 1rem;
    }

    & h5 {
        margin-top: .8rem;
        margin-bottom: .4rem;
        font-size: .9rem;
    }

    & p {
        color: rgba(0, 0, 0, 0.5);
    }

    .email-para {
        margin-top: .5rem;
    }
}

.inquiries-contact-down {
    background-color: #fff;
    padding: 1.5rem;

    & p {
        margin-top: .8rem;
    }

    & h4 {
        font-size: 1rem;
    }

    & p {
        color: rgba(0, 0, 0, 0.5);
    }
}

.map {
    padding: 4rem 0;
    text-align: center;
}

@media screen and (max-width:1250px) {
    .container {
        padding: 4rem 0 0 0;
    }

    .contact {
        flex-wrap: wrap;
    }

    .inquiries-contact {
        display: flex;
        gap: 1rem;
        margin-bottom: 2rem;
    }
}

@media screen and (max-width:950px) {
    .all-input-group {

        & .input-title {
            font-size: 2.5rem;
        }

        & .fname-input input,
        .lname-input input {
            width: 12rem;
        }

        & .email-input input {
            width: 25rem;
        }

        & .message-input textarea {
            width: 25rem;
        }

        & .contact-submit-btn {
            width: 25rem;
        }
    }
}

@media screen and (max-width:600px) {
    .all-input-group {

        & .input-title {
            font-size: 2rem;
        }

        & .fname-input input,
        .lname-input input {
            width: 8rem;
        }

        & .email-input input {
            width: 17rem;
        }

        & .message-input textarea {
            width: 17rem;
        }

        & .contact-submit-btn {
            width: 17rem;
        }
    }
}

@media screen and (max-width:400px) {
    .all-input-group {

        padding: 0 2rem 4rem 2rem;

        & .input-title {
            font-size: 1.5rem;
        }

        & .fname-input input,
        .lname-input input {
            width: 10rem;
        }

        & .email-input input {
            width: 10rem;
        }

        & .message-input textarea {
            width: 10rem;
        }

        & .contact-submit-btn {
            width: 10rem;
        }

        & .name-input-group {
            flex-direction: column;
            gap: 0;
        }
    }

    
}



















/* COMMON FOR ALL SECTIONS */

.common {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 4rem 2rem;

}

.common-container {
    background-color: #fff;
    border-bottom: 4px solid #4a12d6;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
    display: flex;
}

.common-title {
    text-align: center;

    & h3 {
      color: var(--main-heading);
        font-size: 2rem;
    }
}

.all-common-featur {
    margin-top: 4rem;
}

.common-sub-title {
    padding: 1rem;

    & h3 {
        margin-top: 1rem;
    }

    & h6 {
        margin-top: .8rem;
    }

    & p {
        color: rgba(0, 0, 0, 0.5);
        margin-top: .2rem;
    }

    & ul {
        margin-top: 1rem;

        & i {
            margin-right: .5rem;
        }
    }
}

.common-price {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .5rem .5rem 1rem 6rem;


    & ul {
        list-style: none;
    }

    & ul li a {
        text-decoration: none;
        color: white;
        padding: .5rem 1rem;
        border-radius: 10px;
        background:var(--all-btns-gradient-color);
    }
}

.common-price h4 {
    font-size: 1.5rem;
}


.common-containers-details {
    display: flex;
}

.common-sub-title ul {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;

}

.common-sub-title button {
    padding: .1rem .4rem;
    font-size: .8rem;
    color: #fff;
    background-color: #090611;
}

.on-price {
    margin: 0 1rem;
    padding: .2rem 0;

    display: none;
}

.common-img {
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
}

.common-img img {
    width: 312px;
    height: 210px;
    object-fit: cover;
}


.all-common-pages-numbers {
    display: flex;

    gap: 1rem;
    margin-top: 4rem;

    & .all-common-pages {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
    }

    & .page2,
    .page3 {
        background-color: rgba(73, 18, 214, 1);
        color: #fff;
    }
}

@media screen and (max-width:960px) {
    .common-container {
        align-items: center;

        & .on-price {
            display: flex;
            align-items: center;
            justify-content: space-between;

        }
    }

    .common-containers-details {
        padding-left: 0px;
    }


    .all-common-featur {
        padding: 2rem 3rem;
    }

    .common-price {
        display: none;
    }

    .common-sub-title ul {
        gap: 1rem;

    }


}

@media screen and (max-width:800px) {
    .common-container {
        flex-direction: column;

        & .common-sub-title p {
            font-size: .8rem;
        }

        & .on-price {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);

        }

    }

    .common-title h1 {
        font-size: 1.2rem;
    }

    .common-title h3 {
        font-size: 1.5rem;
    }

    .all-common-featur {
        padding: 0rem 3rem;
    }

    .common-img {
        box-shadow: none;
    }
}




/* THIS IS FOR BLOG SECTION */

.blogs-flex {
   display:flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: var(--second-bg-color);
}
.all-blog-flex-container{
    display: grid;
    grid-template-columns:repeat(3,auto);
    padding: 0 4rem;
    gap: 40px;
    padding-bottom: 40px;
}
.all-blogs{
    background-color: #fff;
    padding: .5rem 1rem 1rem 1rem;
    border-radius: .5rem;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);

    & .blog-details {
        margin-top: 1rem;
    }
    :is(.blogs-1-img ,.blogs-2-img ,.blogs-3-img ) img{
        width: 100%;
    object-fit: cover;
    object-position: center;


    }
}
.blog-ellipsis {
    font-size: 40px;
    color: #015dfe;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
}


@media screen and (max-width:1300px) {
    .all-blog-flex-container{
        grid-template-columns:repeat(2,auto);;
    }
    .blog-3{
        grid-column: 1/3;
    }
    .blog-title {
        text-align: center;
        padding: 2rem 2rem 4rem 2rem;
    }
}
@media screen and (max-width:900px) {
    .all-blog-flex-container{
        grid-template-columns:repeat(1,auto);;
    }
    .blog-2,.blog-1{
        grid-column: 1/3;
    }

}



/* THIS IS FOR REGISTER SECTIONS */


.register{
    padding:4rem 6rem;
}
.register-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    & .register-container-right{
        & h1{
            font-size: 3rem;
            color: var(--main-heading);
        }
        & p{
            font-size: 1rem;
        }
    }
}

@media screen and (max-width:900px) {
    .register{
        text-align: center;
        padding: 4rem 2rem;
    }
    .all-blog-flex-container{
        padding:0rem 2rem;
    }
    .register-container{
        flex-direction: column;
        gap: 3rem;

        & .register-container-right{
            & h1{
                font-size: 2rem;
            }
            & p{
                font-size: .8rem;
            }
        }
    }
}

@media screen and (max-width:600px) {
  
    .register-container .register-container-right{
        & h1{
            font-size: 1.5rem;
        }
        & p{
            font-size: .8rem;
        }
    }
    .blog-details{
        & h3{
            font-size: .8rem;
        }
        & p{
            font-size: .5rem;
        }
    }
}

@media  screen and (max-width:350px) {
    .hero .hero-left-section .content .btn, .btn{
      font-size: .8rem;
      padding: 5px 12px;
    }
}