/* ? All Variables Of Colors, Fonts, Radius...  */
    /* ReUse This Vars In All Project */
    /*=============== VARIABLES CSS ===============*/
    
     :root {
        /*========== Colors ==========*/
        --main-color: #0780BA;
        --secondary-color: #E98020;
        --bg: #0782c505;
        --color: #082635;
        /* --dark: #344554; */
        /* --dark: #bbbbbb; */
        --dark: #a4a4a4;
        --dark-light: #d5d5d5;
        --light: #efefef;
        /* --dark: #8d8d8d; */
        /* --dark: #acacac; */
        /* Gradient Vars */
        --esdaratGradint: linear-gradient(196deg, rgba(7, 128, 186, 0.8) 6%, rgba(7, 128, 186, 0.8) 26%, rgba(7, 128, 186, 0.8) 52%, rgba(7, 128, 186, 0.8) 77%, rgba(7, 128, 186, 0.8) 95%);
        --Gradint: linear-gradient(rgba(255, 255, 168, .4), rgba(151, 203, 231, 0.8), rgba(250, 250, 255, .8), rgba(151, 203, 231, 0.8), rgba(151, 203, 231, 0.8));
        --VerticalBlueGradint: linear-gradient(0deg, rgba(29, 53, 65, 0.9612219887955182) 3%, rgba(20, 64, 85, 0.8491771708683473) 21%, rgba(64, 123, 152, 0.5158438375350141) 30%, rgba(7, 128, 186, 0) 81%, rgba(8, 58, 83, 0.7483368347338936) 88%);
        /* linear-gradient(0deg, rgba(29, 53, 65, 0.9612219887955182) 1%, rgba(20, 64, 85, 0.8491771708683473) 16%, rgba(11, 63, 88, 0.7455357142857143) 29%, rgba(64, 123, 152, 0.5158438375350141) 41%, rgba(7, 128, 186, 0) 76%, rgba(8, 58, 83, 0.7483368347338936) 90%); */
        /* linear-gradient(0deg, rgba(30, 30, 30, 0.6979166666666667) 4%, rgba(8, 128, 191, 0.8603816526610644) 18%, rgba(8, 128, 191, 0.21052170868347342) 36%, rgba(8, 128, 191, 0) 59%, rgba(8, 128, 191, 0.7259278711484594) 88%); */
        --ActivityCardGradint: linear-gradient(0deg, rgba(70, 41, 14, 0.956) 10%, rgba(94, 58, 25, 0.835) 31%, rgba(131, 89, 51, 0.832) 46%, rgba(223, 132, 47, 0) 67%);
        /* linear-gradient(0deg, rgba(77, 33, 1, 0.8799894957983193) 6%, rgba(92, 44, 9, 0.8995973389355743) 34%, rgba(233, 128, 32, 0.5858718487394958) 68%, rgba(233, 128, 32, 0.00043767507002800965) 76%); */
        --verticalOranGradint: linear-gradient(0deg, rgba(75, 50, 27, 0.9164040616246498) 1%, rgba(92, 67, 43, 0.8939950980392157) 16%, rgba(106, 80, 56, 0.8995973389355743) 29%, rgba(244, 220, 170, 0) 52%, rgba(240, 227, 215, 0) 75%, rgba(143, 90, 41, 0.4682247899159664) 87%);
        /* linear-gradient(0deg, rgba(75, 50, 27, 0.9164040616246498) 3%, rgba(106, 80, 56, 0.8995973389355743) 18%, rgba(244, 220, 170, 0) 49%, rgba(240, 227, 215, 0) 75%, rgba(143, 90, 41, 0.4682247899159664) 87%); */
        /* linear-gradient(0deg, rgba(30, 30, 30, 0.6979166666666667) 4%, rgba(204, 102, 0, 0.7063200280112045) 18%, rgba(252, 176, 69, 0) 41%, rgba(252, 176, 69, 0.6362920168067228) 94%); */
        --ProjGradient: linear-gradient(0deg, rgba(23, 68, 89, 0.969625350140056) 10%, rgba(14, 72, 102, 0.896796218487395) 30%, rgba(7, 128, 186, 0.4066001400560224) 54%, rgba(134, 187, 212, 0.09007352941176472) 65%);
        /* linear-gradient(0deg, rgba(41, 68, 82, 1) 8%, rgba(68, 111, 133, 0.9444152661064426) 37%, rgba(180, 201, 226, 0) 81%); */
        /* linear-gradient(176deg, rgba(245, 245, 245, 0) 40%, rgba(20, 87, 120, 0.9500175070028011) 66%, rgba(5, 52, 74, 0.9780287114845938) 88%); */
        --ActivityGradient: linear-gradient(0deg, rgba(49, 49, 49, 1) 5%, rgba(87, 47, 15, 0.958420868347339) 27%, rgba(133, 82, 41, 0.8799894957983193) 54%, rgba(255, 113, 0, 0) 81%);
        /* linear-gradient(0deg, rgba(43, 22, 2, 0.9556197478991597) 10%, rgba(88, 51, 16, 0.8631827731092436) 31%, rgba(129, 66, 7, 0.7175245098039216) 46%, rgba(233, 128, 32, 0) 67%); */
        /* linear-gradient(0deg, rgba(77, 33, 1, 0.9752275910364145) 13%, rgba(92, 44, 9, 0.9360119047619048) 25%, rgba(233, 128, 32, 0.7455357142857143) 47%, rgba(233, 128, 32, 0) 61%); */
        --AboutActivityGradt: linear-gradient(207deg, rgba(49, 49, 49, 1) 5%, rgba(87, 47, 15, 0.958420868347339) 27%, rgba(133, 82, 41, 0.8799894957983193) 54%, rgba(255, 113, 0, 0) 75%);
        /* linear-gradient(279deg, rgba(92, 44, 9, 1) 8%, rgba(171, 78, 10, 1) 30%, rgba(166, 84, 24, 0.8267682072829132) 51%, rgba(233, 128, 32, 0) 71%); */
        /* linear-gradient(324deg, rgba(77, 33, 1, 0.9752275910364145) 13%, rgba(92, 44, 9, 0.9360119047619048) 25%, rgba(171, 78, 10, 0.8239670868347339) 47%, rgba(233, 128, 32, 0) 67%); */
        --AboutProjGradient: linear-gradient(236deg, rgba(23, 68, 89, 0.969625350140056) 18%, rgba(14, 72, 102, 0.896796218487395) 35%, rgba(7, 128, 186, 0.4066001400560224) 68%, rgba(134, 187, 212, 0.09007352941176472) 75%);
        /* linear-gradient(265deg, rgba(23, 68, 89, 0.969625350140056) 18%, rgba(14, 72, 102, 0.896796218487395) 35%, rgba(7, 128, 186, 0.4066001400560224) 75%, rgba(134, 187, 212, 0.24413515406162467) 91%); */
        --ProductGradient: linear-gradient(-34deg, rgba(5, 40, 57, 1) 6%, rgba(16, 77, 106, 0.9444152661064426) 26%, rgba(7, 128, 186, 0.9472163865546218) 52%, rgba(7, 128, 186, 0.5578606442577031) 77%, rgba(1, 87, 129, 0.4542191876750701) 95%);
        --OrangGradient: linear-gradient(11deg, rgba(124, 63, 8, 0.93) 1%, rgba(130, 65, 9, 0.93) 44%, rgba(130, 65, 9, 0.93) 68%, rgba(77, 44, 15, 0.93) 100%);
        /* linear-gradient(11deg, rgba(124, 63, 8, 1) 0%, rgba(130, 65, 9, 1) 50%, rgba(130, 65, 9, 1) 69%, rgba(77, 44, 15, 1) 100%); */
        /* linear-gradient(159deg, rgba(124, 63, 8, 1) 0%, rgba(130, 65, 9, 1) 50%, rgba(130, 65, 9, 1) 69%, rgba(77, 44, 15, 1) 100%); */
        --blueGradient: linear-gradient(0deg, rgba(14, 83, 116, 0.8911939775910365) 35%, rgba(21, 72, 97, 0.8939950980392157) 63%, rgba(31, 77, 98, 0.896796218487395) 82%);
        /* radial-gradient(circle, rgba(55, 114, 139, 0.9528186274509804) 6%, rgba(14, 83, 116, 0.927608543417367) 52%, rgba(13, 58, 83, 0.9528186274509804) 98%); */
        --ProjectCardGradint: linear-gradient(0deg, rgb(2, 40, 57) 10%, rgba(12, 65, 90, 0.678) 31%, rgba(10, 97, 138, 0.509) 46%, rgba(18, 159, 225, 0.116) 67%);
        --VerticalBlueGradintProjectsSection: linear-gradient(180deg, rgba(20, 59, 76, 1) 0%, rgba(0, 137, 213, 0.4290966386554622) 90%, rgba(8, 128, 195, 1) 100%);
        --VerticalOranGradintProjectsSection: linear-gradient(180deg, rgba(245, 130, 32, 1) 0%, rgba(205, 103, 15, 1) 0%, rgba(195, 92, 3, 0.6475840336134453) 83%, rgba(174, 87, 9, 0.6755952380952381) 100%, rgba(168, 85, 11, 0.6896008403361344) 100%);
        --ProductSildeGradient: linear-gradient(-34deg, rgb(16, 53, 72) 6%, rgba(37, 69, 83, 0.807) 26%, rgba(50, 141, 183, 0.76) 52%, rgba(52, 168, 221, 0.313) 77%, rgba(1, 86, 129, 0.25) 95%);
        --ProductFiledSildeGradient: linear-gradient(-34deg, rgba(215, 241, 254, 0.596) 6%, rgba(205, 238, 252, 0.577) 26%, rgba(126, 208, 246, 0.511) 52%, rgba(54, 168, 221, 0.191) 77%, rgba(161, 208, 231, 0.185) 95%);
        --ContactUsGradient: linear-gradient(0deg, rgba(3, 6, 10, 0.746) 0%, rgba(45, 76, 95, 0.808) 100%, rgba(71, 128, 155, 0.573) 10%, rgba(87, 140, 167, 0.73) 1000%);
        --VerticalBlueGradintProductsType: linear-gradient(180deg, rgba(71, 119, 139, 0.804) 0%, rgba(86, 171, 216, 0.429) 90%, rgba(82, 155, 194, 0.836) 100%);
        --ProductTypeCardGradient: linear-gradient(27deg, rgba(10, 137, 204, 1) 0%, rgba(30, 156, 216, 1) 6%, rgba(34, 160, 218, 0.8498249641653537) 19%, rgba(62, 188, 235, 0.7938025552017682) 42%, rgba(84, 210, 249, 0.7517857484790791) 79%);
        /* --NewsCardGradint: linear-gradient(0deg, rgba(0, 120, 175, 0.8) 10%, rgba(80, 155, 190, 0.8) 31%, rgba(123, 168, 189, 0.8) 46%, rgba(212, 220, 224, 0.116) 67%); */
        --NewsNotActiveCardGradint: linear-gradient(0deg, rgba(148, 174, 185, 0.8) 10%, rgba(141, 163, 173, 0.8) 31%, rgba(165, 191, 202, 0.8) 46%, rgba(119, 202, 233, 0.116) 67%);
        --NewsHeroGradint: linear-gradient(0deg, rgba(11, 14, 15, 0.8) 10%, rgba(53, 67, 78, 0.8) 31%, rgba(100, 107, 112, 0.8) 46%, rgba(253, 253, 253, 0.116) 67%);
        --ArticaleCardGradint: linear-gradient(180deg, rgba(245, 130, 32, 1) 0%, rgba(205, 103, 15, 1) 0%, rgba(195, 92, 3, 0.6475840336134453) 83%, rgba(174, 87, 9, 0.6755952380952381) 100%, rgba(168, 85, 11, 0.6896008403361344) 100%);
        --ArticaleNotActiveCardGradint: linear-gradient(0deg, rgba(185, 168, 148, 0.8) 10%, rgba(173, 156, 141, 0.8) 31%, rgba(202, 183, 165, 0.8) 46%, rgba(233, 165, 119, 0.116) 67%);
        --ArticaleHeroGradint: linear-gradient(0deg, rgba(15, 13, 11, 0.8) 10%, rgba(78, 66, 53, 0.8) 31%, rgba(112, 107, 100, 0.8) 46%, rgba(253, 253, 253, 0.116) 67%);
        --BookGradint: linear-gradient(180deg, rgba(205, 103, 15, 1) 0%, rgba(195, 92, 3, 0.6475840336134453) 83%, rgba(168, 85, 11, 0.6896008403361344) 100%);
        /* --ReportHeroGradint: linear-gradient(0deg, rgba(75, 50, 27, 0.9164040616246498) 1%, rgba(92, 67, 43, 0.8939950980392157) 16%, rgba(106, 80, 56, 0.8995973389355743) 29%, rgba(244, 220, 170, 0) 52%, rgba(240, 227, 215, 0) 75%, rgba(143, 90, 41, 0.4682247899159664) 87%); */
        /* background: rgb(75,50,27); */
        --ReportHeroGradint: linear-gradient(180deg, rgba(75, 50, 27, 1) 0%, rgba(118, 95, 45, 0.8547794117647058) 100%);
        /*========== Hovers ==========*/
        --main-hover: #149cd4;
        /* #97cbe7; */
        --secondary-hover: #eb9c1d;
        /* #fdcda4; */
        /*========== Vars Colors ==========*/
        --heading: var(--secondary-color);
        --text: var(--main-color);
        /*========== Shadow ==========*/
        --Shadow: rgb(14 30 37 / 12%) 0px 2px 4px 0px, rgb(14 30 37 / 32%) 0px 2px 16px 0px;
        /*========== Border ==========*/
        --radius: 30px;
        /*  */
        --bs-pagination-focus-box-shadow: 0.125rem 0.125rem 0.25rem rgba(255, 122, 24, 0.6362920168067228) !important;
        /*========== Font and typography ==========*/
        /* IN RTL | LTR FILES */
    }
    /*=============== BASE ===============*/
    
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    html {
        scroll-behavior: smooth;
        overflow-x: hidden;
        scroll-padding-top: 9rem;
        scroll-behavior: smooth;
        /* letter-spacing: normal !important; */
    }
    
    html::-webkit-scrollbar {
        width: 0.5rem;
    }
    
    html::-webkit-scrollbar-track {
        background: transparent;
    }
    
    html::-webkit-scrollbar-thumb {
        background: radial-gradient(circle, var(--main-color) 0%, var(--main-color) 100%);
        /* var(--main-color); */
    }
    
    body {
        background: var(--bg);
        text-transform: capitalize;
        overflow: hidden;
    }
    
     ::-moz-selection {
        background: var(--secondary-color);
        color: var(--color);
        font-weight: 600;
    }
    
     ::selection {
        background: var(--secondary-color);
        color: var(--color);
        font-weight: 600;
    }
    
    section {
        padding: 2% 2.5rem;
    }
    
    a {
        text-decoration: none !important;
        color: var(--main-color);
        word-break: break-word;
    }
    
    p {
        text-align: justify;
        line-height: 1.9 !important;
    }
    
    a,
    button {
        touch-action: manipulation;
        transition: all 0.3s;
    }
    
    .radius {
        border-radius: var(--radius);
    }
    
    .secText {
        color: var(--main-hover) !important;
        line-height: 1.7;
    }
    
    .text-dark-light {
        color: var(--dark-light) !important;
    }
    
    .text-dark {
        color: var(--dark) !important;
    }
    
    .bg-dark {
        background: var(--dark) !important;
    }
    
    .bg-primary {
        background: var(--main-color) !important;
        color: var(--main-hover);
    }
    
    .bg-secondary {
        /* color: var(--secondary-color) !important; */
        background: var(--secondary-color) !important;
        /* color: var(--secondary-hover); */
    }
    
    .text-primary {
        color: var(--main-color) !important;
        color: var(--main-hover);
    }
    
    .text-secondary {
        color: var(--secondary-color) !important;
        color: var(--secondary-hover);
    }
    
    .text-orange {
        color: var(--secondary-hover);
    }
    
    .text-blue {
        color: var(--main-hover);
    }
    
    .bg-nav {
        background: var(--main-color);
    }
    
    .logo {
        color: var(--main-color);
        /* #212529; */
        font-weight: 500;
    }
    
    .logo img {
        padding: 0;
        margin: 0;
        max-height: 40px;
        transform-origin: top left;
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        animation: cube 12s ease-in forwards infinite;
    }
    /* heading */
    
    .heading {
        color: var(--heading) !important;
        font-family: var(--heading-font) !important;
    }
    /* Hover Classes */
    /* NavBar Start*/
    
    .navbar {
        z-index: 99;
    }
    
    .nav-item {
        color: #fff !important;
        /* margin-inline-start: 0.7rem; */
        /* font-size: 1.3rem; */
        /* font-size: 1.1rem; */
        /* font-size: 80%; */
        /* font-weight: 600; */
    }
    
    .nav-icon {
        color: #fff !important;
        /* margin-inline-start: 1.2rem; */
        font-size: 1.2rem;
        font-weight: 600;
    }
    
    .nav-item:hover,
    .nav-icon:hover {
        color: var(--secondary-color) !important;
    }
    
    .nav-link.active {
        color: var(--secondary-hover) !important;
    }
    
    .dropdown-item {
        color: var(--secondary-color) !important;
    }
    
    .dropdown-item:hover {
        color: var(--main-color) !important;
        cursor: pointer;
    }
    
    .dropdown-item.active-item {
        color: white !important;
        background-color: var(--secondary-color) !important;
    }
    
    .dropdown-toggle::after {
        display: none;
    }
    /* NavBar End*/
    /* Footer Sec Start */
    
    .footer h4 {
        text-align: start;
    }
    
    .footerIcon {
        color: var(--dark);
    }
    
    .footerIcon:hover {}
    
    .footerIcon:hover a {
        font-size: 1.5rem;
        color: var(--secondary-color);
    }
    
    .footer .subscribe {
        margin-top: -105px;
    }
    
    .footer .subscribe-form {
        border-radius: var(--radius);
        background: #fff;
        padding: 3px;
        -webkit-box-shadow: 0px -12px 21px -15px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px -12px 21px -15px rgba(0, 0, 0, 0.1);
        box-shadow: 0px -12px 21px -15px rgba(0, 0, 0, 0.1);
    }
    
    .footer .subscribe-form .form-group {
        position: relative;
        margin-bottom: 0;
        border-radius: 0;
    }
    
    .footer .subscribe-form .form-group input {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: rgba(0, 0, 0, 0.3) !important;
        font-size: 16px;
        height: 56px;
        border-radius: 0;
    }
    
    .footer .subscribe-form .form-group input::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: rgba(0, 0, 0, 0.3) !important;
    }
    
    .footer .subscribe-form .form-group input::-moz-placeholder {
        /* Firefox 19+ */
        color: rgba(0, 0, 0, 0.3) !important;
    }
    
    .footer .subscribe-form .form-group input:-ms-input-placeholder {
        /* IE 10+ */
        color: rgba(0, 0, 0, 0.3) !important;
    }
    
    .footer .subscribe-form .form-group input:-moz-placeholder {
        /* Firefox 18- */
        color: rgba(0, 0, 0, 0.3) !important;
    }
    
    .footer .subscribe-form .form-group input:focus {
        outline: none !important;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    .footer h4 {
        text-align: start;
    }
    
    .footerIcon {
        color: var(--secondary-color);
    }
    
    .footerIcon:hover {
        font-size: 1.5rem;
        color: var(--secondary-color);
    }
    /* Footer Sec End */
    /* buttons */
    
    @-webkit-keyframes topAnimation {
        from {
            transform: translate(0rem, 0);
        }
        to {
            transform: translate(0rem, 3.5rem);
        }
    }
    
    @keyframes topAnimation {
        from {
            transform: rotate(45deg);
        }
        to {
            transform: rotate(-45deg);
        }
    }
    
    @-webkit-keyframes bottomAnimation {
        from {
            transform: rotate(-45deg);
        }
        to {
            transform: rotate(45deg);
        }
    }
    
    @keyframes bottomAnimation {
        from {
            transform: rotate(45deg);
        }
        to {
            transform: rotate(-45deg);
        }
    }
    
    .social-btn {
        width: 1.7rem;
        height: 1.7rem;
        padding: .5rem;
        border-radius: 4px !important;
        transform: rotate(45deg) !important;
        /* background: var(--secondary-color) !important; */
        text-align: center !important;
        /* color: var(--dark) !important; */
    }
    
    .social-btn:hover {
        transform: scale(1.2) !important;
        -webkit-animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
        animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alterna
    }
    
    .social-btn:hover i {
        transform: rotate(0deg) !important;
    }
    
    .social-btn i {
        transform: rotate(-45deg) !important;
        text-align: end;
    }
    
    .social-btn:first-child {
        background: #6e7785 !important;
    }
    
    .social-btn {
        background: var(--secondary-color) !important;
        /* color: #fff !important; */
    }
    
    .social-btn i {
        background: none !important;
        color: white;
    }
    
    .social-btn:last-child {
        background: var(--main-color) !important;
    }
    
    .footer .subscribe-form .form-group .submit,
    .button-main {
        color: #fff !important;
        display: block;
        width: 150px;
        height: 56px;
        font-size: 14px;
        background: var(--main-color) !important;
        border: none;
        letter-spacing: 1px;
        text-transform: uppercase;
        border-radius: var(--radius);
    }
    
    .footer .subscribe-form .form-group .submit:hover,
    .footer .subscribe-form .form-group .submit:focus,
    .button-main:hover,
    .button-main:focus {
        text-decoration: none !important;
        outline: none !important;
        background: var(--secondary-color) !important;
    }
    
    .button {
        text-transform: capitalize;
        text-decoration: none;
        font-weight: 700;
        /* border: 1px solid var(--secondary-color);
        border-radius: var(--radius); */
        position: relative;
        /* letter-spacing: 0.15em; */
        margin: 0 auto;
        padding: .8rem 2.2rem;
        background: transparent;
        outline: none;
        /* font-size: 28px; */
        color: #111111;
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s;
    }
    
    .button::after,
    .button::before,
    .YBOWD::after,
    .YBOWD::before {
        border: 0;
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        transition: all 0.5s cubic-bezier(0.68, 0.55, 0.265, -1.55);
        /* transform: rotate(45deg) !important; */
    }
    
    .button::before {
        border: 0;
        background-color: var(--main-color);
        top: -0.40rem;
        left: 1.3rem;
        -webkit-animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
        animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
    }
    
    .YBOWD::before {
        border: 0;
        background-color: white;
        /* var(--main-color); */
        top: 7.5rem;
        left: 16rem;
        -webkit-animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
        animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alterna
    }
    
    .button::after,
    .YBOWD::after {
        background-color: var(--secondary-color);
        top: 2.6rem;
        left: 5rem;
        -webkit-animation: bottomAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate;
        animation: bottomAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate;
    }
    
    .button:hover {
        color: white !important;
        border: 0;
    }
    
    .button:hover::before,
    .button:hover::after {
        top: 0;
        height: 100%;
        width: 100%;
        border-radius: 0;
        -webkit-animation: none;
        animation: none;
        z-index: -2;
    }
    
    .button:hover::after {
        left: 0rem;
    }
    
    .button:hover::before {
        top: 0.5rem;
        left: 0.35rem;
    }
    
    .socialFooter,
    .socialTop {
        /* transform: rotate(0deg) !important; */
        width: 2rem;
        height: 2rem;
        padding: .5rem;
        border-radius: 4px !important;
        transform: rotate(45deg) !important;
        background: var(--secondary-color) !important;
        text-align: center !important;
        color: #fff !important;
    }
    
    .socialFooter:hover {
        background: #fff !important;
        color: var(--secondary-color) !important;
    }
    
    .socialTop i:hover {
        color: #fff !important;
    }
    
    .socialFooter i,
    .socialTop i {
        transform: rotate(-45deg) !important;
        font-size: 1rem;
    }
    
    .image-preview img {
        padding: 10px;
        max-width: 100px;
        width: 100px;
        height: 100px;
    }
    
    .images-preview-div img {
        padding: 10px;
        max-width: 100px;
    }
    
    .jFiler {
        font-family: inherit;
    }
    
    footer .heading {
        color: #fff !important;
        font-style: bold;
    }
    /* .secionIcon::after {
        content: "";
        display: inline-block;
        width: 100px;
        height: 3px;
        background: var(--secondary-color);
        left: 0;
    } */
    /*  */
    /* css */
    /*  */
    
    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0;
        margin-bottom: 1rem;
        list-style: none;
        background-color: transparent
    }
    
    .breadcrumb-item+.breadcrumb-item {
        padding-left: .5rem
    }
    
    .breadcrumb-item+.breadcrumb-item::before {
        float: left;
        padding-right: .5rem;
        color: white;
        content: var(--bs-breadcrumb-divider, "https://demos.themeselection.com/")
        /* rtl: var(--bs-breadcrumb-divider, "\\") */
    }
    
    .breadcrumb-item.active {
        color: var(--secondary-color)
    }
    
    .breadcrumb-item,
    .breadcrumb-item a {
        color: white;
    }
    
    .breadcrumb-item:hover,
    .breadcrumb-item:focus,
    .breadcrumb-item a:hover,
    .breadcrumb-item a:focus {
        color: var(--secondary-hover)
    }
    
    .breadcrumb-item.active,
    .breadcrumb-item a.active {
        font-weight: 600
    }
    
    .breadcrumb-item.active::before,
    .breadcrumb-item a.active::before {
        font-weight: 400
    }
    
    .breadcrumb-item.active a,
    .breadcrumb-item.active a:hover,
    .breadcrumb-item.active a:focus,
    .breadcrumb-item.active a:active {
        color: inherit
    }
    
    .breadcrumb-style1 .breadcrumb-item+.breadcrumb-item::before,
    .breadcrumb-style2 .breadcrumb-item+.breadcrumb-item::before {
        font-family: boxicons;
        vertical-align: middle
    }
    
    .breadcrumb-style1 .breadcrumb-item+.breadcrumb-item::before {
        content: "";
        font-size: 1.125rem;
        line-height: 1.4
    }
    
    .breadcrumb-style2 .breadcrumb-item+.breadcrumb-item::before {
        content: "";
        font-size: 1rem;
        line-height: 1.35rem
    }
    /* All projects style */
    
    @media (max-width:912px) {
        .Partaners .imgGray,
        .Partno .imgGray {
            height: 15vh !important;
            width: 30vw !important;
        }
    }
    
    .news-list {
        display: none;
    }
    
    .singleSwiper .swiper-pagination {
        position: absolute;
        text-align: center;
        transition: 300ms opacity;
        transform: translate3d(0, 0, 0);
        z-index: 10;
        bottom: 30px;
        right: 50%;
        display: flex;
    }
    
    .border-dark {
        border-color: var(--dark-light) !important;
    }
    
    .membershipLogo {
        /* width: 65%; */
        aspect-ratio: 3/2;
        object-fit: contain;
        max-blend-mode: color-burn;
    }
    
    @media (max-width: 767px) {
        .singleSwiperBg {
            background-size: contain !important;
            height: 50% !important;
            object-fit: contain !important;
        }
        #swiper-lastProjects {
            height: auto !important;
        }
        .bgRef {
            height: 15% !important;
            padding: 0px !important;
            width: 100%;
        }
    }
    /* hidde the swiper-pagination bu in phone screens */
    
    @media (max-width:768px) {
        .swiper-pagination {
            display: none !important;
        }
    }