@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');

/* ============== Default Element Style ================ */
:root {
    --color-green: #f8c8dd;
    --color-grey: #717586;
    --color-dark: #22232C;
}

body {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    color: var(--color-grey);
}

h1, .h1 {
    font-size: 60px;
    font-weight: 700;
    line-height:70px;
    color: var(--color-green);
}

h2, .h2 {
    font-size: 47px;
    font-weight: 700;
    line-height: 55px;
    color: var(--color-green);
}

h3, .h3 {
    font-size: 39px;
    font-weight: 700;
    line-height: 52.8px;
    color: var(--color-dark);
}

h4, .h4 {
    font-size: 24px;
    font-weight: 500
}
.fs_16 {
    font-size: 16px;
    line-height: 22px;
}
/*----font-size:32px----*/
@media (max-width:991px) {
    h1, .h1 {
        font-size: 40px;
        line-height:50px;
    }

    h2, .h2 {
        font-size: 36px;
        line-height: 48px;
    }

    h3, .h3 {
        font-size: 34px;
        line-height: 40px;
    }

    h4, .h4 {
        font-size: 20px;
        line-height: 22px;
    }
   
    /*----font-size:32px----*/
}
@media (max-width:500px) {
    h2, .h2 {
        font-size: 30px;
        line-height: 45px;
        word-wrap: break-word;
    }
}
    /*h5 .h5{font-size:1.125rem;}*/ /*----font-size:18px----*/
    /*h6 .h6{font-size: 1rem;font-weight: 500;color: #ff3333;}*/ /*----font-size:16px----*/
    p, a {
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    a, a:hover, a:focus {
        text-decoration: none !important;
    }

    img {
        border-style: none;
    }

    .btn-green {
        padding: 13px 22px;
        border-radius: 25px;
        background: var(--color-green);
        color: #fff !important;
        border: 2px solid var(--color-green);
        width: fit-content;
        transition: all 0.5s ease-in-out;
    }

        .btn-green:hover, .btn-green:hover {
            color: var(--color-green) !important;
            background: #0000;
            border: 2px solid var(--color-green);
        }

    .btn-outline {
        border: 1px solid #0000004D;
        padding: 10px 36px;
        border-radius: 21px;
        color: var(--color-dark);
        backdrop-filter: blur(20px);
        width: fit-content;
    }

        .btn-outline:hover, .btn-outline:active, .btn-outline.active {
            color: var(--color-dark);
            border: 1px solid #0000004D;
        }

    .padding-100 {
        padding: 80px 0px;
    }

    .padding-top {
        padding-top: 80px;
    }

    .padding-bottom {
        padding-bottom: 80px;
    }

    .padding_100 {
        padding-top: 120px;
        padding-top: 120px;
        padding-bottom: 50px;
        margin-top: -100px
    }

    #about-me {
        padding-top: 130px;
    }

    .text-blackes {
        color: #22232C;
    }

    .text-grey {
        color: #666A79;
    }

    .text-hover:hover {
        color: #f8c8dd !important;
    }

    .text-green {
        color: #f8c8dd;
    }

    .border-btn {
        border: 1px solid #b6bbc8;
        border-radius: 29px;
        width: fit-content;
    }

    /* Activities */
    .divide-line {
        border: 1px solid #b6bbc8;
        margin-top: 12px;
        margin-bottom: 30px;
    }

    .facebook-icon, .instagram-icon {
        border: 1px solid #b6bbc8;
        border-radius: 36px;
        padding: 30px 85px 30px 85px;
        transition: 0.5s ease-in-out;
    }

    @media(max-width: 576px) {
        .facebook-icon, .instagram-icon {
            padding: 25px 65px 25px 65px;
        }
    }

    .facebook-icon:hover, .instagram-icon:hover {
        background: #f8c8dd;
        box-shadow: 0px 8px 15px rgba(0, 204, 151, 0.3);
    }

        .facebook-icon:hover i, .instagram-icon:hover i {
            color: #000000;
        }

    .instagram-icon i, .facebook-icon i {
        color: #969BB2;
    }

    #footer p, #footer a {
        font-family: Syne;
        font-size: 16px;
        font-weight: 400;
        line-height: 22.4px;
    }

    .download_link {
        color: #717586;
        font-family: Syne;
        font-size: 20px;
        font-weight: 700;
        line-height: 60px;
    }

        .download_link:hover {
            color: #f8c8dd;
        }

    #contact .form-control {
        border: 0;
        border-bottom: 2px solid #D1D5E0;
        border-radius: 0;
    }

    #contact input, #contact textarea {
        font-family: Syne;
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
        color: #969BB2;
        padding-bottom: 12px;
    }

    .form-control:focus {
        box-shadow: unset;
        border-bottom: 2px solid #f8c8dd !important;
    }

.prof-card {
    position: fixed;
    top: 20px;
    left: 30px;
    background: transparent;
    z-index: 11;
   
    
}
    /* WebKit browsers (Chrome, Safari) */
    .prof-card::-webkit-scrollbar {
        width: 6px; /* Adjust this value to reduce the scrollbar width */
    }

    .prof-card::-webkit-scrollbar-thumb {
        background-color: gray; /* Color of the scrollbar */
        border-radius: 10px; /* Optional: to make the scrollbar rounded */
    }
@media(min-width:992px){
    .card{
        border-radius:0px !important;
        border:unset !important;
    }
    .prof-card {
        position: fixed;
        top: 20px;
        left: 30px;
        background: transparent;
        z-index: 11;
        width: 300px;
        height: 100%;
        float: left;
        overflow: auto;
        scrollbar-width: thin !important;
        scrollbar-color: gray;
    }
   
}


    .p_30 {
        padding-right: 30px;
    }

    .card img {
        max-width: 220px;
        margin: auto;
    }

.card {
    border-radius: 36px;
    background: #f8c8dd;
}

    .profile-icon {
        max-width: 50px;
        max-height: 50px;
    }

    .heading-box {
        color: var(--color-dark);
        font-weight: 700
    }

    .card-text {
        color: var(--color-dark);
        font-size: 19px;
        line-height: 22px;
    }

    .facebook-icon-small, .instagram-icon-small {
        border: 1px solid #fff;
        border-radius: 20px;
        transition: 0.5s ease-in-out;

    }

    .facebook-icon-small {
        padding: 10px 18px;
  
    }

.instagram-icon-small {
    padding: 10px 16px;

}

        .facebook-icon-small:hover, .instagram-icon-small:hover {
            background: #fff;
            box-shadow: 0px 8px 15px rgba(0, 204, 151, 0.3);
        }

            .facebook-icon-small:hover i, .instagram-icon-small:hover i {
                color: #f8c8dd !important;
            }

        .instagram-icon-small i, .facebook-icon-small i {
            color: var(--color-dark);
        }

    @media(max-width: 992px) {
        .p_30 {
            padding-right: unset;
        }

        .prof-card {
            position: unset;
            width: fit-content;
            margin: auto;
            min-width: 300px;
            margin-top: 84px !important;
        }

        .card img {
            max-width: 320px;
        }
    }

    @media(max-width: 568px) {
        .card img {
            max-width: 100%;
        }
    }

    #banner {
        padding-top: 150px;
    }

        #banner .btn-green {
            border: 1px solid #A8B0C1;
            color: #000 !important;
            background: transparent;
        }

            #banner .btn-green:hover {
                border: 1px solid #A8B0C1;
                color: #000 !important;
                background: #f8c8dd;
            }

    .banner_bg {
        background: url('../img/banner_bg.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    .modal-backdrop.fade {
        z-index: 1;
    }

    .navbar a.nav-link {
        color: #717586;
        font-family: Syne;
        font-size: 18px;
        font-weight: 700;
        line-height: 20px;
        border: 1px solid #fff;
        padding: 14px 22px !important;
        border-radius: 26px;
    }

        .navbar a.nav-link:hover, .navbar a.nav-link.active {
            border: 1px solid #0000004D;
        }

    /*.blur_bg {
        backdrop-filter: blur(5px);
        transition: backdrop-filter 0.3s ease;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    }*/

    @media(max-width:1300px) {
        .navbar a.nav-link {
            padding: 14px 18px !important;
        }
    }

    @media(max-width: 992px) {
        .padding-100 {
            padding: 50px 0px;
        }

        .padding-top {
            padding-top: 50px;
        }

        .padding-bottom {
            padding-bottom: 50px;
        }

        #banner {
            padding-top: 80px;
        }

        .padding_100 {
            padding-top: 120px;
            padding-bottom: 50px;
            margin-top: -100px;
        }
    }

    .scroll_for_more {
        position: absolute;
        right: 40px;
        top: 55%;
    }

        .scroll_for_more i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            color: #22232C;
        }

    .hobbies ul {
        list-style: disc;
        padding-left: 30px;
    }

    .hobbies li {
        margin-bottom: 10px;
    }

    .hobbies a {
        font-size: 20px;
        line-height: 30px;
    }

        .hobbies a:hover, #hobbies .read_more_btn, .color_green, #activities .read_more_btn, #big-fat .read_more_btn {
            color: #f8c8dd;
        }

#hobbies .box, #big-fat .box{
    border: 1px solid;
    border-radius: 15px;
    padding: 40px 35px;
    height: 100%
}

    .read_more {
        display: none; /* Hide by default */
    }

    .testimonials-card {
        border: 1px solid;
        border: 1px solid;
        border-radius: 15px;
        padding: 40px 35px;
        height: 100%
    }

    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        position: absolute !important;
        top: unset !important;
        bottom: 20px !important;
        left: 20px !important;
    }

    .swiper-button-next {
        position: absolute !important;
        top: unset !important;
        bottom: 20px !important;
        left: 80px !important;
    }

    .swiper-slide {
        margin-bottom: 80px;
    }

    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 20px !important;
        color: #000;
        border: 1px solid #717586;
        padding: 8px 15px;
    }

#about-car .owl-dot, #big-fat .owl-dot{
border: none;
background: unset;
display: none;
}

.card .nav-link{
    padding:0px 0px !important;
    color:#fff;
}

.card .navbar-nav hr {
    background: #fff !important;
    margin: 0px 0px !important;
    border-top: 2px solid #fff;
}
.stud{
    font-size:15px !important;
}
.br-10{
    border-radius: 10px;
}