@import url("https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css");
    @import url("./toastify.min.css");
    @import url("./perfect-scrollbar.css");
    @import url("./jquery.fancybox.min.css");
    @import url("../fontawesome-free-6.1.1-web/css/all.css");

    @font-face {
		font-family: "JF_Flat_Regular"; 
		src:url("../fonts/JF_Flat_Regular.ttf") format("truetype");
	}
    :root {
        --color-theme: rgb(176, 48, 52);
        --color-theme-rgb: 176, 48, 52;
        --color-dark:  #191919;
        --color-normal: #707070;
        --color-light: #DDDDDD;
    }      
	h1, h2 ,h3 ,h4 ,h5, h6{
		font-family: "JF_Flat_Regular", Arial, sans-serif;
        font-weight: 800;
	}
	html, body { 
		font-family: "JF_Flat_Regular", Arial, sans-serif;
		font-size: 14px;
		line-height: 1.5;
        counter-reset: section;
	}
    a{
        color: var(--color-theme);
        text-decoration: none;
    }
    a:hover{
        color: var(--color-dark);
        text-decoration: none;
    }
    section{
        padding: 60px 0;
    }
    form.disabled{
        pointer-events: none;
        opacity: .75;
    }

/*  --------------------------------------
    Button
    --------------------------------------  */
    
    .btn {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        border: none;
        padding: 0 16px;
        min-width: 64px;
        height: 45px;
        line-height: 40px;
        border-radius: 5px;
        vertical-align: middle;
        text-align: center;
        text-overflow: ellipsis;
        font-size: 18px; 
        overflow: hidden;
        outline: none;
        cursor: pointer; 
        transition: all .3s ease;
    }
    .btn::-moz-focus-inner {
        border: none;
    }
    /* Overlay */
    .btn::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgb( 255, 255, 255);
        opacity: 0;
        transition: opacity 0.2s;
    }
    /* Ripple */
    .btn::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 50%;
        padding: 50%;
        width: 32px; /* Safari */
        height: 32px; /* Safari */
        background-color: rgb( 255, 255, 255);
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
        transition: opacity 1s, transform 0.5s;
    }
    /* Hover, Focus */
    .btn:hover,
    .btn:focus {
        box-shadow: none;
    }
    .btn:hover::before {
        opacity: 0.08;
    }
    .btn:focus::before {
        opacity: 0.24;
    }
    .btn:hover:focus::before {
        opacity: 0.3;
    }
    /* Active */
    .btn:active {
        box-shadow: 0 5px 5px -3px rgb(0, 0, 0, 0.2), 0 8px 10px 1px rgb(0, 0, 0, 0.14), 0 3px 14px 2px rgb(0, 0, 0, 0.12);
    }
    .btn:active::after {
        opacity: 0.32;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0s;
    }
    /* Disabled */
    .btn:disabled {
        color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
        background-color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12);
        box-shadow: none;
        cursor: initial;
    }
    .btn:disabled::before {
        opacity: 0;
    }
    .btn:disabled::after {
        opacity: 0;
    }

    /*------------------
        btn-theme
    ------------------*/
    .btn-theme{
        background-color: var(--color-theme);
        border-color: var(--color-theme);
        color: #fff !important;
    }
    .btn-theme:hover,
    .btn-theme:focus{
        background-color: var(--color-dark);
        border-color: var(--color-dark);
        color: #fff !important;
    }
    /*------------------
        btn-outline-theme
    ------------------*/
    .btn-outline-theme{
        background-color:#fff;
        border: 1px solid var(--color-theme);
        color: var(--color-theme) !important;
    }
    .btn-outline-theme:hover,
    .btn-outline-theme:focus{
        background-color: var(--color-theme) !important;
        color: #fff !important;
    }
    .btn-outline-theme.bg-none{
        background-color: transparent;
    }
    .text-theme{
        color: var(--color-theme);
    }
    
/*  --------------------------------------
    Navbar
    --------------------------------------  */

    .navbar{
        display: flex;
        align-items: center;
        height: 120px;
    }
    .navbar .navbar-logo{
        height: 120px;
    }
    .navbar .navbar-logo img{
        height: 120px;
    }
    .navbar .navbar-collapse{
        justify-content: center;
    }
    .navbar .navbar-collapse .navbar-nav{
        gap: 46px;
    }
    .navbar .navbar-collapse .navbar-nav .nav-link{
        position: relative;
        font-size: 18px;
        color: var(--color-dark);
        padding: 1rem 0;
    }
    .navbar .navbar-collapse .navbar-nav .nav-link::before{
        position: absolute;
        content: "";
        bottom: 0;
        right: 0;
        width: 0;
        height: 2px;
        background-color: var(--color-theme);
        transition: all .3s ease;
    }
    [dir="ltr"] .navbar .navbar-collapse .navbar-nav .nav-link::before{
        right: auto;
        left: 0;
    }
    .navbar .navbar-collapse .navbar-nav .nav-link.show,
    .navbar .navbar-collapse .navbar-nav .nav-link:hover,
    .navbar .navbar-collapse .navbar-nav .nav-link.active{
        color: var(--color-theme);
    }
    .navbar .navbar-collapse .navbar-nav .nav-link.show::before,
    .navbar .navbar-collapse .navbar-nav .nav-link:hover::before,
    .navbar .navbar-collapse .navbar-nav .nav-link.active::before{
        width: 21px;
    }
    .navbar .navbar-option{
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .navbar .navbar-option .btn-contact{
        min-width: 180px;
    }
    .navbar .navbar-option .btn-collapse-menu{
        color: var(--color-dark);
    }
    .dropdown-toggle::after{
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f107";
        border: none;
        margin: 0;
        margin-inline-start: 1rem;
        vertical-align: middle;
        transition: all .3s ease;
    }
    .dropdown-toggle.show::after{
        transform: rotate(180deg);
    }
    .dropdown-menu{
        min-width: 220px;
        margin-top: 0;
        padding: 2rem 1rem;
        border-color: transparent;
        box-shadow: 10px 10px 30px rgb(0,0,0,.16);
        border-radius: 5px;
        margin-top: 1rem;
    }
    .dropdown-menu .dropdown-item{
        font-size: 16px;
        line-height: 40px;
    }
    .dropdown-menu .dropdown-item:hover{
        background-color: transparent;
        color: var(--color-theme);
    }

/*  --------------------------------------
    Header
    --------------------------------------  */

    .header{
        position: relative;
        background-color: var(--color-theme);
    }
    .header::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(../img/pattern.svg);
        opacity: .35;
        z-index: 0;
    }
    .header .header-intro{
        position: relative;
        display: flex;
        justify-content: space-between;
        z-index: 1;
        color: #fff;
    }
    .header-main .header-intro .content{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 700px;
    }
    .header-main .header-intro .content .welcome{
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 1rem;
    }
    .header-main .header-intro .content .title{
        font-size: 60px;
        line-height: 104px;
        margin-bottom: 1rem;
    }
    .header-main .header-intro .content .info{
        font-size: 25px;
        line-height: 44px;
        margin-bottom: 0;
    }
    .header-main .header-intro .pic{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 590px;
        width: 100%;
        height: 700px;
    }
    .header-main .header-intro .pic .main-pic{
        position: relative;
        z-index: 1;
    }
    [dir="ltr"] .header-main .header-intro .pic .main-pic{
        transform: rotateY(-180deg);
    }
    .header-main .header-intro .pic .pattern-pic{
        position: absolute;
        z-index: 1;
        top: 50px;
        width: 590px;
        height: 590px;
        z-index: 0;
    }
 
    .header-sub{
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-sub .header-intro .content{
        text-align: center;
        margin: auto;
    }
    .header-sub .header-intro .content .title{
        font-size: 30px;
        line-height: 52px;
        margin-bottom: 1rem;
        color: #fff;
    }
    .header-sub .header-intro .content .breadcrumb{
        color: #fff;
        justify-content: center;
    }
    .header-sub .header-intro .content .breadcrumb .breadcrumb-item{
        font-size: 20px;
        line-height: 36px;
        margin-bottom: 0;
        color: #fff; 
    }
    .header-sub .header-intro .content .breadcrumb .breadcrumb-item+.breadcrumb-item::before{
        content: "\f100";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        color: #fff; 
        padding: 0 1rem;
        font-size: 16px;
    }
    [dir="ltr"] .header-sub .header-intro .content .breadcrumb .breadcrumb-item+.breadcrumb-item::before{
        content: "\f101";
    }
    

/*  --------------------------------------
    Section Title
    --------------------------------------  */
    
    .section-title{
        margin-bottom: 70px;
    }
    .section-title .title{
        font-size: 30px;
        line-height: 50px;
        font-weight: bold;
        margin-bottom: 24px;
    }
    .section-title .info{
        font-size: 18px;
    }
    .section-title .hr{
        max-width: 100%;
    }

/*  --------------------------------------
    Section
    --------------------------------------  */

    section{
        padding: 80px 0;
    }

/*  --------------------------------------
    Courses Section
    --------------------------------------  */

    .courses-section{
        background: #F3F3F3;
    }
    .courses-card{
        display: block;
        position: relative;
        margin-bottom: 1rem;
        transition: all .3s ease;
        background-color: #fff;
        overflow: hidden;
        border-radius: 6px;
        border: 1px solid var(--color-light);
    }
    .courses-card .pic{
        position: relative;
        width: 100%;
        height: 289px;
        overflow: hidden;
        border-start-start-radius: 6px;
        border-start-end-radius: 6px;
    }
    .courses-card .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s ease;
    }
    .courses-card .pic span{
        position: absolute;
        top: 40px;
        right: 0;
        min-width: 107px;
        max-width: 220px;
        height: 41px;
        line-height: 41px;
        background-color: var(--color-theme);
        color: #fff;
        font-size: 18px;
        text-align: center;
        border-start-end-radius: 6px;
        border-end-end-radius: 6px;
        z-index: 2;
    }
    [dir="ltr"] .courses-card .pic span{
        right: auto;
        left: 0;
    }
    .courses-card .content{
        padding: 2rem;
    }
    .courses-card .content .title{
        font-size: 22px;
        line-height: 38px;
        color: var(--color-dark);
        margin-bottom: 12px;
        font-weight: bold;
        transition: all .3s ease;
    }
    .courses-card .content .price{
        font-size: 22px;
        line-height: 38px;
        font-weight: bold;
        color: var(--color-theme);
        margin-bottom: 12px;
        transition: all .3s ease;
    }
    .courses-card .content .nav{
        flex-wrap: wrap;
        gap: 28px;
        margin-bottom: 20px;
    }
    .courses-card .content .nav .nav-item{
        position: relative;
        padding: 0;
        font-size: 16px;
        color: var(--color-dark);
        line-height: 31px;
        transition: all .3s ease;
    }
    .courses-card .content .nav .nav-item::after{
        position: absolute;
        content: "";
        top: 50%;
        left: -14px;
        width: 1px;
        height: 21px;
        background-color: var(--color-light);
        transform: translateY(-50%);
    }
    .courses-card .content .nav .nav-item:last-child:after{
        display: none;
    }
    .courses-card .content .more-details{
        color: var(--color-theme);
    }
    .courses-card .content .more-details span{
        display: inline-block;
        margin-inline-start: .5rem;
    }
    [dir="ltr"] .courses-card .content .more-details span{
        transform: rotateY(-180deg);
    }
    .courses-card:hover{
        box-shadow: 0 3px 6px rgb(0, 0, 0, .16);
    }
    .courses-card:hover .pic img{
        transform: scale(1.05);
    }
    .courses-card:hover .content .title{
        color: var(--color-theme);
    }
    
/*  --------------------------------------
    Library Section
    --------------------------------------  */

    .library-card{
        display: block;
        position: relative;
        margin-bottom: 1rem;
        padding: 18px;
        transition: all .3s ease;
        background-color: #fff;
        overflow: hidden;
        border-radius: 6px;
        border: 1px solid var(--color-light);
    }
    .library-card .pic{
        position: relative;
        width: 100%;
        height: 219px;
        overflow: hidden;
        border-radius: 6px;
    }
    .library-card .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s ease;
    }
    .library-card .content{
        padding: 1rem 0;
    }
    .library-card .content .title{
        font-size: 20px;
        line-height: 36px;
        color: var(--color-dark);
        margin-bottom: 12px;
        font-weight: bold;
        transition: all .3s ease;
    }
    .library-card .content .more-details{
        color: var(--color-theme);
    }
    .library-card .content .more-details span{
        display: inline-block;
        margin-inline-start: .5rem;
    }
    [dir="ltr"] .library-card .content .more-details span{
        transform: rotateY(-180deg);
    }
    .library-card:hover{
        box-shadow: 0 3px 6px rgb(0, 0, 0, .16);
    }
    .library-card:hover .pic img{
        transform: scale(1.05);
    }
    .library-card:hover .content .title{
        color: var(--color-theme);
    }
    .library-card-view{
        display: flex;
        gap: 1rem;
        border: none;
        padding: 1rem;
        margin-bottom: 0;
        box-shadow: none !important;
    }
    .library-card-view.active{
        background-color: #f4f4f4;
    }
    .library-card-view .pic{
        width: 142px !important;
        height: 106px !important;
    }
    .library-card-view .content .title {
        font-size: 17px;
    }


    .library-view .head{
        padding-bottom: 48px;
        margin-bottom: 48px;
        border-bottom: 1px solid var(--color-light);
    }
    .library-view .head .title{
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 24px;
        color: var(--color-dark);
    }
    .library-view .head .nav{
        gap: 2rem;
    }
    .library-view .head .nav .nav-item{
        font-size: 16px;
        font-weight: 800;
        color: var(--color-dark);
    }
    .library-view .head .nav .nav-item span{
        color: var(--color-theme);
    }
    .library-view .body .pic{
        margin-bottom: 40px;
    }
    .library-view .body .content{
        font-size: 16px;
        line-height: 2;
        color: var(--color-dark);
    }
    .library-view .body .content .title{
        font-size: 20px;
        line-height: 2;
    }

    
    .library-view .body .ratio{
        width: 100%;
        height: 483px;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 2rem;
    }
    .library-cards{
        position: relative;
        height: 483px;
    }
    .ytp-impression-link{
        display: none;
    }

/*  --------------------------------------
    Blog Section
    --------------------------------------  */
    
    .blog-section:not(.blog-section-inner){
        position: relative;
        background-color: #313131;
    }
    .blog-section:not(.blog-section-inner)::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(../img/pattern.svg);
        opacity: .35;
        z-index: 0;
    }
    .blog-section:not(.blog-section-inner) .section-title .title{
        color: #fff;
    }
    .blog-section:not(.blog-section-inner) .btn-outline-theme{
        border-color: #fff;
        color: #fff !important;
    }
    .blog-section:not(.blog-section-inner) .btn-outline-theme:hover,
    .blog-section:not(.blog-section-inner) .btn-outline-theme:focus{ 
        background-color: #fff !important;
        color: #313131 !important;
    }
    .blog-card{
        display: flex;
        gap: 20px;
        position: relative;
        margin-bottom: 1rem;
        padding: 18px;
        transition: all .3s ease;
        background-color: #fff;
        overflow: hidden;
        border-radius: 6px;
        border: 1px solid var(--color-light);
    }
    .blog-card .pic{
        position: relative;
        min-width: 154px;
        width: 154px;
        height: 170px;
        overflow: hidden;
        border-radius: 6px;
    }
    .blog-card .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s ease;
    }
    .blog-card .content{
        padding: 0;
    }
    .blog-card .content .title{
        font-size: 20px;
        line-height: 36px;
        color: var(--color-dark);
        margin-bottom: 5px;
        font-weight: bold;
        transition: all .3s ease;
    }
    .blog-card .content .date{
        font-size: 16px;
        line-height: 28px;
        color: var(--color-theme);
        margin-bottom: 5px;
        transition: all .3s ease;
    }
    .blog-card .content .details{
        font-size: 14px;
        line-height: 28px;
        color: var(--color-normal);
        margin-bottom: 5px;
        transition: all .3s ease;
        height: 56px;
        overflow: hidden;
    }
    .blog-card .content .more-details{
        color: var(--color-theme);
    }
    .blog-card .content .more-details span{
        display: inline-block;
        margin-inline-start: .5rem;
    }
    [dir="ltr"] .blog-card .content .more-details span{
        transform: rotateY(-180deg);
    }
    .blog-card:hover{
        box-shadow: 0 3px 6px rgb(0, 0, 0, .16);
    }
    .blog-card:hover .pic img{
        transform: scale(1.05);
    }
    .blog-card:hover .content .title{
        color: var(--color-theme);
    }
    .blog-card.master{
        padding: 30px;
        flex-direction: column;
        gap: 0;
        height: calc((208px * 2) + 1rem);
    }
    .blog-card.master .pic{
        width: 100%;
        height: 305px;
        border-radius: 10px;
    }
    .blog-card.master .content .title{
        font-size: 20px;
        margin-bottom: 0;
        max-height: 72px;
        overflow: hidden;
        margin-top: 10px;
    } 

    .blog-view .head{
        padding-bottom: 48px;
        margin-bottom: 48px;
        border-bottom: 1px solid var(--color-light);
    }
    .blog-view .head .title{
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 24px;
        color: var(--color-dark);
    }
    .blog-view .head .nav{
        gap: 2rem;
    }
    .blog-view .head .nav .nav-item{
        font-size: 16px;
        font-weight: 800;
        color: var(--color-dark);
    }
    .blog-view .head .nav .nav-item span{
        color: var(--color-theme);
    }
    .blog-view .body,
    .blog-view .body .pic{
        margin-bottom: 40px;
    }
    .blog-view .body .content{
        font-size: 16px;
        line-height: 2;
        color: var(--color-dark);
    }
    .blog-view .body .content .title{
        font-size: 20px;
        line-height: 2;
    }
    .category-card,
    .share-card{
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .category-card .title,
    .share-card .title{
        font-size: 20px;
        color: var(--color-dark);
    }
    
    .category-card .nav-category{
        gap: 1rem;
    }
    .category-card .nav-category .nav-link{
        border-radius: 5px;
        border: 1px solid var(--color-light);
        color: var(--color-normal);
        transition: all .3s ease;
    }
    .category-card .nav-category .nav-link:hover{
        border: 1px solid var(--color-theme);
        background-color: var(--color-theme);
        color: #fff;
    }
    .share-card .nav-social-media .nav-item{
        padding: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 5px;
        font-size: 20px;
    }
    .share-card .nav-social-media .nav-item .facebook{
        color: #063CEA;
    }
    .share-card .nav-social-media .nav-item .instagram{
        color: #C542AB;
    }
    .share-card .nav-social-media .nav-item .linkedin{
        color: #0F23A0;
    }
    .share-card .nav-social-media .nav-item .twitter{
        color: #00AFEF;
    }
    .share-card .nav-social-media .nav-item .snapchat{
        color: #EFDF17;
    }
    .share-card .nav-social-media .nav-item .whatsapp{
        color: #31C558;
    }
    .share-card .nav-social-media .nav-item .youtube{
        color: #C54246;
    }

/*  --------------------------------------
    Book Section
    --------------------------------------  */

    .book-card{
        display: block;
        position: relative;
        margin-bottom: 1rem;
        padding: 18px;
        transition: all .3s ease;
        background-color: #fff;
        overflow: hidden;
        border-radius: 6px;
        border: 1px solid var(--color-light);
        text-align: center;
    }
    .book-card .pic{
        position: relative;
        width: 100%;
        height: 235px;
        overflow: hidden;
        border-radius: 6px;
    }
    .book-card .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all .3s ease;
    }
    .book-card .content{
        padding: 1rem 0;
    }
    .book-card .content .title{
        font-size: 20px;
        line-height: 36px;
        color: var(--color-dark);
        margin-bottom: 12px;
        font-weight: bold;
        transition: all .3s ease;
    }
    .book-card .content .author{
        color: var(--color-theme);
        margin-bottom: 0;
    }
    .book-card:hover{
        box-shadow: 0 3px 6px rgb(0, 0, 0, .16);
    }
    .book-card:hover .pic img{
        transform: scale(1.05);
    }
    .book-card:hover .content .title{
        color: var(--color-theme);
    }
    .book-view-card{
        margin-bottom: 80px;
        padding: 70px;
        border-radius: 5px;
        background-color: #F3F3F3;
    }
    .book-view-card .book-view{
        display: flex;
        align-items: center;
        gap: 50px;
        margin-bottom: 80px;
    }
    .book-view-card .book-view .pic{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px;
        min-width: 350px;
        width: 350px;
        height: 460px;
        overflow: hidden;
        border-radius: 5px;
        background-color: #fff;
    }
    .book-view-card .book-view .pic img{
        max-width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .book-view-card .book-view .content .title{
        font-size: 30px;
        color: var(--color-dark);
        margin-bottom: 20px;
    }
    .book-view-card .book-view .content .author{
        font-size: 20px;
        color: var(--color-dark);
        margin-bottom: 30px;
    }
    .book-view-card .book-view .content .author span{
        color: var(--color-theme);
    }
    .book-view-card .book-view .content .info{
        font-size: 18px;
        line-height: 2;
        color: var(--color-dark);
        margin-bottom: 30px;
    }
    .book-view-card .book-view .content .btn{
        min-width: 200px;
        background-color: transparent;
    }
    .book-sale .title{
        font-size: 24px;
        color: var(--color-dark);
        margin-bottom: 30px;
    }
    .book-sale .book-sale-list{
        display: flex;
        flex-wrap: wrap;
        gap: 50px;
    }
    .book-sale .book-sale-list .book-sale-card{
        display: block;
    }
    .book-sale .book-sale-list .book-sale-card .pic{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 240px;
        height: 147px;
        margin-bottom: 30px;
        overflow: hidden;
        background-color: #fff;
    }
    .book-sale .book-sale-list .book-sale-card .pic img{
        max-width: 90%;
        object-fit: contain;
    }
    .book-sale .book-sale-list .book-sale-card .content .title{
        font-size: 16px;
        text-align: center;
        color: var(--color-dark);
        margin-bottom: 0;
        transition: all .3s ease;
    }
    .book-sale .book-sale-list .book-sale-card:hover .content .title{
        color: var(--color-theme);
    }


/*  --------------------------------------
    footer Section
    --------------------------------------  */

    .footer-wrapper{
        position: relative;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color:var(--color-theme);
        color: #fff;
        padding: 70px 0;
    }
    .footer-wrapper::before{
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(../img/pattern.svg);
        opacity: .35;
        z-index: 0;
    } 
    .footer-wrapper .footer-wrapper-cards{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        z-index: 2;
    }
    .footer-card{
        padding: 1rem;
    }
    .footer-card.contact .nav-link{
        direction: ltr;
    }
    .footer-card.about{
        max-width: 285px;
        width: 100%;
    }
    .footer-card.about .logo{
        margin-bottom: 24px;
    }
    .footer-card.contact .title,
    .footer-card.link .title{
        position: relative;
        font-size: 20px;
        margin-bottom: 2rem;
    }
    .footer-card.contact .title::before,
    .footer-card.link .title::before{
        position: absolute;
        content: "";
        bottom: -1.5rem;
        width: 46px;
        height: 2px;
        background-color: #fff;
    }
    .footer-card .nav {
        flex-direction: column;
    }
    .footer-card .nav .nav-link{
        position: relative;
        color: #fff;
        font-size: 18px;
        padding-inline-start: 20px;
        white-space: nowrap;
    }
    .footer-card.contact .nav .nav-link{
        padding-inline-start: 0;
    }
    .footer-card:not(.contact) .nav .nav-link::before{
        position: absolute;
        content: "";
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 10px;
        height: 2px;
        border-radius: 5px;
        background-color: #fff;
        transition: all .3s ease;
    }
    [dir="ltr"] .footer-card:not(.contact) .nav .nav-link::before{
        left: 0;
        right: auto;
    }
    .footer-card .nav-social-media{
        margin-top: 10px;
    }
    .footer-card .nav-social-media a{
        display: block;
        padding: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        transition: all .3s ease;
        border: 1px solid transparent;
        border-radius: 6px;
    }
    .footer-card .nav-social-media a:hover{
        transform: scale(1.1);
        border: 1px solid #fff;
    }
    .footer-copyright{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 66px;
        background-color: #860A0E;
        color: #fff;
        font-size: 16px;
    }
    
    .footer-card.link.d-flex{
        margin-top: 15px;
    }
    .chat-whatsapp{
        position: fixed;
        bottom: 1rem;
        margin-inline-start: 1rem;
        z-index: 9999;
    }
    
/*  --------------------------------------
    Contact Section
    --------------------------------------  */

    .form {
        max-width: 760px;
        margin-bottom: 2rem;
    }
    .form .form-group{
        margin-bottom: 30px;
    }
    .form .form-label{
        font-size: 20px; 
        font-weight: bold;
        letter-spacing: 0px;
        color: #2C2C2C;
        margin-bottom: 15px;
    }
    .form .form-control{
        min-height: 50px;
        border: 1px solid #BBBBBB;
        border-radius: 5px;
        box-shadow: none;
    }
    .form .form-control:focus{
        border: 1px solid var(--color-normal);
    }
    .form .was-validated .form-control{
        background-image: none;
    }

    .contact-info{
        background-color: #f1f1f1;
        padding: 44px;
        border-radius: 5px;
    }
    .contact-info .contact-card{
        padding-bottom: 26px;
        margin-bottom: 26px;
        border-bottom: 1px solid var(--color-light);
    }
    .contact-info .contact-card:last-child{
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 1px solid transparent;
    }
    .contact-info .contact-card .title{
        font-size: 18px;
        margin-bottom: 10px;
        color: var(--color-dark);
        padding-inline-start: calc(40px + 1rem);
    }
    .contact-info .contact-card .info{
        font-size: 18px;
        margin-bottom: 10px;
        color: var(--color-dark);
    }
    .contact-info .contact-card .info .icon{
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        background-color: var(--color-theme);
        border-radius: 5px;
        margin-inline-end: 1rem;
    }
    
    .contact-info .contact-card a{
        color: var(--color-dark);
    }
    
    .contact-info .contact-card a:hover{
        color: var(--color-theme);
    }
    
/*  --------------------------------------
    Achievements Section
    --------------------------------------  */
    .achievements-section:not(.cv-section){
        padding: 200px 0;
    }
    .achievements-card{
        background-color: #f1f1f1;
        padding: 80px 40px;
        border-radius: 5px;
    }
    .achievements-card .achievements-title{
        display: flex;
        gap: 1rem;
        font-size: 30px;
        font-weight: bold;
        color: var(--color-dark);
        margin-bottom: 40px;
    }
    .achievements-list{
        position: relative;
        height: 1365px;
        overflow-y: auto;
    }
    .achievements-list-box{
        position: relative;
        padding-inline-start: 45px;
        margin-bottom: 15px;
        overflow: hidden;
    }
    .achievements-list-box::before{
        position: absolute;
        content: "";
        top: 1rem;
        right: 0;
        width: 17px;
        height: 17px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid var(--color-theme);
    }
    .achievements-list-box::after{
        position: absolute;
        content: "";
        top: calc(1rem + 17px + 14px);
        right: calc(17px / 2);
        width: 1px;
        height: 100%;
        background-color: var(--color-light);
    }
    
    [dir="ltr"] .achievements-list-box::before{
        right: auto;
        left: 0;
    }
    [dir="ltr"] .achievements-list-box::after{
        right: auto;
        left: calc(17px / 2);
    }
    .achievements-list-box .duration{
        font-size: 20px;
        color: var(--color-theme);
        margin-bottom: 15px;
    }
    .achievements-list-box .specialization{
        font-size: 24px;
        font-weight: bold;
        color: var(--color-dark);
        margin-bottom: 15px;
    }
    .achievements-list-box .university{
        font-size: 20px;
        color: var(--color-dark);
        margin-bottom: 15px;
    }

    .gallery-box{
        position: relative;
    }
    .achievements-section .gallery-box::before{
        position: absolute;
        content: "";
        top: -72px;
        bottom: -72px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 424px;
        width: 100%;
        height: calc(100% + 80px);
        border: 24px solid var(--color-theme);
        border-radius: 17px;
        z-index: 1;
    }
    .gallery-box .gallery-card{
        display: block;
        position: relative;
        width: 100%;
        height: 365px;
        overflow: hidden;
        border-radius: 5px;
        margin-bottom: 50px;
        z-index: 2;
    }
    .gallery-box .gallery-card img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }
    
    .cv-section .gallery-box .gallery-card{
        margin-bottom: 24px;
    }
    
    .cv-card{
        display: flex;
        align-items: center;
        background-color: #f1f1f1;
        padding: 80px 40px;
        border-radius: 5px;
        gap: 30px;
        flex-direction: row-reverse;
    }
    .cv-card.about{
        padding: 24px 40px;
    }
    .cv-card .pic{
        max-width: 388px;
        width: 100%;
        min-width: 270px;
        height: 391px;
        overflow: hidden;
    }
    .cv-card .pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .cv-card .content{
        max-width: 100%;
    }
    .cv-card .cv-title{
        display: flex;
        gap: 1rem;
        font-size: 30px;
        font-weight: bold;
        color: var(--color-dark);
        margin-bottom: 40px;
    }
    .cv-card .cv-details{
        font-size: 20px;
        line-height: 48px;
        color: var(--color-normal);
    }
    
    .cv-card .cv-details.cv-details-list p{
        position: relative;
        font-size: 20px;
        color: var(--color-normal);
        padding-inline-start: 2rem;
        margin-bottom: 0;
    }
    .cv-card .cv-details.cv-details-list p::before{
        position: absolute;
        content: "";
        top: 20px;
        right: 0;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #fff;
        border: 1px solid var(--color-theme);
    }
    [dir="ltr"] .cv-card .cv-details.cv-details-list p::before{
        right: auto;
        left: 0 !important;
    }

    #blog-section .content div{
        background-color: white !important;
        border: none !important;
        text-align: justify;
    }
    @media (max-width: 687px)
    {
        .sm-scroll{
            overflow-x: scroll;
            flex-wrap: unset;
        }
        .navbar .navbar-logo img{
            height: 60px !important;
            margin-top: 1em;
        }
    }