﻿.logo-div{
     padding: 0px !important;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 86px;
     background-image: url("/app/images/static_pages/greeksoft-details/pathway.png");
     background-repeat: no-repeat;
     background-color: #fff;
     z-index: 1050;
     background-size: 100%;
    /*background-position: 100%;
    */
}
.custom-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: left;
}
.offcanvas-top{
    width: 90% !important;
}
.offcanvas-body{
    border-radius: 20px;
}

.hamber-links-div{
  border-right: 1px solid #DDD;
}
.hamber-links-div p{
  margin-bottom: 12px;
}
.custom-grid a {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
}
.custom-grid a:hover {
    color: #C61855;
}
 .hamber{
     display: flex;
     justify-content: end;
     width: max-content;
     margin: 40px;
     float: right;
     transition: opacity 0.2s ease-in-out, visibility 0.2s;
}
 .hamber.hidden {
     opacity: 0;
     visibility: hidden;
}
 .container-fluid{
     padding: 5% 6%;
     font-family: lato !important;
}
 .hero-container{
     font-family: lato !important;
     background-image: url("/app/images/static_pages/greeksoft-details/hero-container-bg.png");
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
     margin-top: 86px;
}
 .slider-web{
     display: block;
}
 .slider-mob{
     display: none;
}
 .overview-sec{
     padding-top: 0px;
     padding-bottom: 0px;
}
 .hero-sec{
}
 p{
     margin-bottom: 0px;
}
 .custom-grid p{
     font-size:16px;
     font-weight:700;
}
 .mt-12{
     margin-top: 12px;
}
 .mt-24{
     margin-top: 24px;
}
 .f-40{
     font-size: 40px;
     font-weight: 700;
     color: #000000;
     line-height: 50px;
}
 .f-30{
     font-size: 30px;
     font-weight: 700;
}
 .f-20{
     font-size: 20px;
     font-weight: 700;
     color: #000000;
}
 .f-16{
     font-size: 16px;
     color: #000000;
}
 .hero-container .btn-div{
     display: flex;
     gap: 10px;
}
 .offcanvas-header{
     justify-content: end;
}
 .hero-container .btn-div button{
     font-size: 16px;
     color: #FFFFFF;
     padding: 8px 12px;
     border-radius: 8px;
     border: none;
     background: #97144D;
     min-width: 160px;
}
 .track-icon-line{
     position: relative;
}
 .track-icon-line img{
     position: relative;
     z-index: 1;
     height: 65px;
     width: 65px;
}
 .track-icon-line::before{
     content: "";
     width: 0px;
     height: 100%;
     position: absolute;
     border: 1px solid gray;
     border-style: dotted;
     top: 50%;
     left: 45px;
     transform: translateY(-50%);
     transition: width 0.5s ease-in-out;
}
 .strategy-div{
     background-image: url("/app/images/static_pages/greeksoft-details/strategy-bg.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
}
 /*.heit-62{
     height: 62px;
}*/
 .strategy-div .card{
     padding: 40px;
     border: none;
     border-radius: 10px;
}
 .strategy-div .dot{
     height: 10px;
     width: 10px;
     background: #97144D;
     border-radius: 50%;
}
 .strategy-div .line{
     height: 1px;
     width: 100%;
     margin-top: 3px;
     border: 1px solid #D4D4D4;
}
 .overview-div .col-lg-6{
     padding-top: 60px;
     padding-bottom: 60px;
}
 .h-m{
     display: flex;
}
 .accordion-button::after{
     width:auto !important;
}
 .accordion-button:focus{
     box-shadow: none !important;
}
 .h-w{
     display: none;
}
 .strategy-div .g-5{
     --bs-gutter-y: 3rem;
}
 .accordion-item{
     margin-bottom: 12px;
     border-left: none;
     border-right: none;
     font-family: lato !important;
}
 .accordion-button{
     border-left: none;
     border-right: none;
     font-size: 18px !important;
     font-weight: 700 !important;
     color: #000;
     font-family: lato !important;
}
 .accordion-button:not(.collapsed)::after{
     content: "-";
     background-image: none;
}
 .accordion-button::after{
     content: "+";
     background-image: none;
}
 .accordion:hover{
     background-color: #fff;
}
 .accordion-button:not(.collapsed){
     color: #000 !important;
     background-color: #fff !important;
}
 .custom-grid .col {
     border-right: 1px solid #ddd !important;
     padding: 10px;
}
 .custom-grid .col:last-child {
     border-right: none;
}
 .explore-div-1{
     background-image: url("../../../images/static_pages/greeksoft-details/explore-img-1.png");
     background-repeat: no-repeat;
     height: 300px;
     border-radius: 8px;
     background-size: 100% 100%;
     background-position: center;
     display: grid;
     place-items:center;
     text-align: center;
     padding: 12%;
     border-radius: 18px;
}
 .explore-div-2{
     background-image: url("/app/images/static_pages/greeksoft-details/explore-img-2.png");
     background-repeat: no-repeat;
     height: 300px;
     border-radius: 8px;
     background-size: 100% 100%;
     background-position: center;
     display: grid;
     place-items:center;
     text-align: center;
     padding: 12%;
     border-radius: 18px;
}
 .explore-card button{
     border: none;
     border-radius: 8px;
     padding: 12px;
     background-color: #000;
     font-size: 16px;
     width: 100%;
}
 .offcanvas-body{
     background: #ffffff !important;
     width: 100% !important;
     margin: 0px auto !important;
}
 .offcanvas-top{
     top: 33px !important;
     background: #ffffff !important;
     width: 89% !important;
     margin: 53px auto !important;
}
 .carousel-indicators [data-bs-target]{
     background-color: #202020;
     width: 12px;
}
 .carousel-indicators .active{
     width:30px;
}
 .carousel-indicators{
     margin-bottom: 0rem;
     z-index: 1;
}
 .carousel-inner{
     padding-bottom: 40px;
}
 @media(max-width: 997px){
    .custom-grid{
        display: block;
    }
     .row{
         --bs-gutter-x: 0rem;
    }
     .f-40{
         font-size: 24px;
         line-height: 32px;
    }
     .f-20{
         font-size: 14px;
    }
     .h-m{
         display: none;
    }
     .h-w{
         display: block;
    }
     .heit-62{
         height: auto;
    }
     .logo-div{
         height: 100px;
         background-image: url("/app/images/static_pages/greeksoft-details/PathwayMobile.png");
         background-repeat: no-repeat;
    }
     .hero-container{
         background-image: url("/app/images/static_pages/greeksoft-details/hero-container-bg-m.png");
         height: 286px;
    }
     .track-icon-line::before{
         display: none;
    }
     .track-icon-line {
         display: flex;
         overflow-x: auto;
        /* Enable horizontal scrolling */
         scroll-snap-type: x mandatory;
        /* Snap effect */
         -webkit-overflow-scrolling: touch;
        /* Smooth scrolling for iOS */
    }
     .overview-div .col-lg-6{
         padding-top: 35px;
         padding-bottom: 35px;
    }
     .track-icon-line .row {
         flex: 0 0 100%;
        /* Each item takes full width */
         scroll-snap-align: start;
         margin-right: 25px;
         text-align: left;
    }
     .track-icon-line::-webkit-scrollbar {
         display: none;
        /* Hide scrollbar for a cleaner look */
    }
     .strategy-div{
         background-image: url("/app/images/static_pages/greeksoft-details/strategy-bg-m.png");
         background-repeat: no-repeat;
         background-size: 100% 100%;
    }
     .strategy-div .g-5{
         --bs-gutter-y: 0rem;
    }
     .strategy-div .card{
         margin-bottom: 20px;
    }
     .explore-div-1{
         padding: 10%;
    }
     .explore-div-2{
         padding: 10%;
    }
     .circle-div-m{
         position: relative;
         height: 67px;
    }
     .circle-div-m img{
         position: absolute;
         z-index: 1;
    }
     .circle-div-m hr{
         position: absolute;
         top: 18px;
         left: 0;
         width: 100%;
    }
     .hamber{
         margin: 26px;
    }
     .logo-div{
         height: 58px;
    }
    .offcanvas-body{
        overflow: unset;
    }
    .offcanvas-top{
        top: 31px !important;
        width: 290px !important;
        right: 0;
        left: auto;
        margin: 0px !important;
    }
    .hamber-links-div{
        border: none;
    }
    .custom-grid{
        text-align: right !important;
    }

}
 @media (max-width: 768px) {
     #dynamicOffcanvas {
         top: auto !important;
         width: 250px;
        /* Adjust width for mobile */
    }
     .hero-container{
         margin-top: 59px;
    }
     .slider-web{
         display: none;
    }
     .slider-mob{
         display: block;
         margin: 26px 0px !important;
    }
     .custom-grid .col {
         border-right: none;
         padding: 0px;
         display: flex;
         flex-direction: column;
         align-items: flex-end;
        /* Align text to the right */
         height: 100%;
         line-height: 40px;
    }
     .offcanvas-top{
         height:auto;
    }
     .offcanvas-header .btn-close {
         margin-top: -3rem;
    }
/*     .offcanvas-body {
         margin: -31px auto !important;
    }*/
     .custom-grid p{
         text-align:right;
    }
     .custom-grid .col{
         border-right:none !important;
    }
}
 @media (max-width: 374px) {
     .hero-container .btn-div button{
         padding: 8px 6px;
         min-width: 138px;
    }
}
 @media (min-width: 992px) {
     .offcanvas-body {
         overflow-y: visible;
    }
}
