/**
*
* ---------------------------------------------------------------------------
*
* Template Name : Morden | personal portfolio html5 responsive template
* Template URL : http://home2globe.com/home2globe-theme/morden/
* Author : home2globe
* Version : 1.0
*
* --------------------------------------------------------------------------- 
*
*/

 /***** medium Layout *****/

 @media (min-width: 992px) and (max-width: 1200px) {
     .header-area {
         padding: 20px 0 0;
     }
     .menu-btn-close {
         top: 55px;
     }
     .contact {
         font-size: 14px;
         left: 0;
     }
     .contact::after {
         width: 80px;
     }
     .slider-info h2,
     .slider-info h3 {
         font-size: 36px;
     }
     .details span {
         margin-right: 30px;
     }
     .first-letter img {
         width: 75%;
     }
     .slider-indicator {
         bottom: 10%;
     }
     .slider-line {
         height: 40px;
     }
     .section-title h2 {
         letter-spacing: 0;
     }
     .short-dec {
         padding: 130px 0 65px 0;
     }
     .service-dec::before {
         width: 60%;
     }
     .about-area::after {
         top: 33%;
     }
     .short-dec::before {
         left: 0;
         top: 0;
     }
     .service {
         bottom: -60px;
         padding: 0 0 10px 65px;
     }
     .overflow-box {
         padding-left: 10px;
     }
     .overflow-box > h3 {
         letter-spacing: 5px;
     }
     .member-info {
         padding: 10px 0 0 20px;
     }
     .page-title-content h2 {
         font-size: 30px;
     }
 }


 /***** Tablet Layout *****/

 @media only screen and (min-width: 768px) and (max-width: 991px) {
     body {
         font-size: 13px;
     }
     .header-area {
         padding: 40px 0 0;
     }
     .menu-btn-close {
         top: 55px;
     }
     .primary-menu ul li a {
         font-size: 20px;
     }
     .contact {
         font-size: 14px;
         left: 0;
         letter-spacing: 5px;
     }
     .contact::after {
         width: 80px;
     }
     .slider-info h2,
     .slider-info h3 {
         font-size: 22px;
     }
     .details span {
         margin-right: 10px;
     }
     .first-letter img {
         width: 75%;
     }
     .slider-indicator {
         bottom: 10%;
     }
     .slider-line {
         height: 40px;
     }
     .social-link i.fa {
         width: 30px;
         height: 30px;
         line-height: 30px;
         font-size: 14px;
     }
     .section-title h2 {
         letter-spacing: 0;
         font-size: 150px;
     }
     .about-title-wraper {
         margin: 0;
     }
     .about-title-wraper h2 {
         font-size: 16px;
     }
     .about-title-wraper p {
         padding-right: 10px;
     }
     .short-dec {
         padding: 65px 0;
     }
     .service-dec::before {
         width: 70%;
     }
     .about-area::after {
         top: 28%;
     }
     .short-dec::before {
         left: 0;
     }
     .short-title > h3 {
         font-size: 20px;
     }
     .service {
         bottom: -60px;
         padding: 0 0 10px 15px;
     }
     .single-project {
         width: 50%;
         height: 200px;
     }
     .single-project-list {
         height: auto !important;
     }
     .single-project img {
         height: 100%;
     }
     .project-title {
         top: 150px;
     }
     .project-overly h3 {
         font-size: 14px;
         letter-spacing: 1px;
     }
     .project-overly {
         padding: 20px 0 0 20px;
     }
     .video-title {
         top: -33px;
     }
     .video-box {
         width: 100%;
         height: 300px;
     }
     .overflow-box {
         padding-left: 10px;
         padding-top: 95px;
     }
     .overflow-box > h3 {
         letter-spacing: 1px;
         font-size: 26px;
     }
     .team-title {
         top: 35px;
     }
     .team-area::after {
         bottom: 3%;
     }
     .member-info {
         padding: 10px 0 0 20px;
     }
     .map {
         height: 175px;
     }
     .about-details {
         width: 425px;
     }
     .about-details h3 {
         font-size: 20px;
     }
     .about-details {
         right: 0;
     }
     .about-bottom-left {
         padding: 33px 35px 64px;
     }
     .single-about {
         width: 50%;
         margin: 0 auto 30px;
     }
     .brand-area {
         margin-top: 130px;
     }
     .brand-area::after {
         top: -90%;
         height: 70px;
     }
     .progress-details {
         margin-right: 0;
     }
     .single-blog-post a h2 {
         font-size: 20px;
     }
     .contact-title {
         top: 60px;
     }
     .address {
         top: 46px;
     }
     .contact-form {
         padding: 0;
     }
     .blog-comment-wraper {
         padding: 0;
     }
     .sidebar {
         margin-top: 180px;
     }

 }


 /***** Mobile Layout *****/

 @media only screen and (max-width: 767px) {
    
     body {
         font-size: 12px;
     }
     .section-padding {
         padding: 40px 0;
     }
     .heading {
         margin-bottom: 50px;
     }
     .header-area {
         padding: 20px 0 0px;
     }
     .header-area .logo h2 {
         font-size: 18px;
     }
     .menu-btn-close {
         top: 50px;
     }
     .menu-toggle {
         width: 40px;
         height: 40px;
     }
     .menu-toggle span {
         width: 23px;
     }
     .menu-toggle span.line2 {
         width: 15px;
     }
     .menu-toggle span.line3 {
         width: 20px;
     }
     .menu-table-cell nav {
         left: 35%;
     }
     .primary-menu ul li a {
         font-size: 16px;
     }
     .primary-menu ul li ul.drop-menu {
         left: 125px;
     }
     .primary-menu ul li a::before {
         left: -10px;
     }
     .primary-menu ul li a::after {
         right: -10px;
     }
     .link-fixed {
         bottom: 0;
         right: 15px;
     }
     .contact {
         font-size: 14px;
         left: 0;
         letter-spacing: 5px;
         width: 100%;
         text-align: center;
         bottom: 18%;
         transform: rotate(0);
     }
     .contact::after {
         display: none;
     }
     .slider-info h2,
     .slider-info h3 {
         font-size: 18px;
         letter-spacing: 5px;
     }
     .details {
         width: 100%;
         text-align: center;
         bottom: 30%;
     }
     .details span i.fa {
         margin-right: 5px;
     }
     .details span {
         margin-right: 5px;
         letter-spacing: 0px;
     }
     .slider-indicator {
         bottom: 10%;
     }
     .slider-line {
         height: 40px;
     }
     .social-link i.fa {
         width: 30px;
         height: 30px;
         line-height: 30px;
         font-size: 14px;
     }
     .slider-wraper .owl-nav {
         display: none;
     }
     .exprience {
         display: none;
     }
     .mobile-ver {
         display: block;
         margin: 0 auto 35px;
     }
     .short-dec::before {
         display: none;
     }
     .service-dec {
         margin-top: 35px;
     }
     .about-title-wraper {
        margin-top: 35px;
         text-align: center;
     }
     .section-title {
         display: none
     }
     .about-title-wraper h2 {
         font-size: 16px;
         display: inline-block;
     }
     .about-title-wraper p {
         padding: 0;
     }
     .short-dec {
         padding: 100px 0;
         text-align: center;
     }
     .short-dec > p {
         padding: 0 10px;
     }
     .about-area::after {
         display: none;
     }
     .short-title > h3 {
         font-size: 20px;
     }
     .service {
         padding: 0;
         position: static;
         margin-top: 35px;
     }
     .single-service {
         margin-bottom: 30px;
         text-align: center;
     }
     .single-service h2 {
         right: -14%;
     }
     .heading h2 {
         font-size: 25px;
         letter-spacing: 5px;
         text-align: center;
     }
     .single-project {
         width: 100% !important;
         height: 300px;
     }
     .single-project-list {
         height: auto !important;
     }
     .single-project img {
         height: 100%;
     }
     .project-title {
         top: 150px;
     }
     .video-box {
         width: 100%;
         height: 200px;
         padding: 24px;
         margin-top: 35px;
     }
     .video-box::before {
         width: 100px;
     }
     .overflow-box {
         padding: 20px 0;
         width: 100%;
         height: auto;
         position: static;
         text-align: center;
     }
     .overflow-box > h3 {
         letter-spacing: 1px;
         font-size: 26px;
     }
     .team-area::after {
         bottom: 2%;
         height: 30px;
     }
     .team-wraper .owl-nav {
         left: 50%;
         top: inherit;
         bottom: -70px;
         transform: translate(-50%);
         right: inherit;
     }
     .member-img {
         width: 100%;
     }
     .member-img img {
         border-radius: 50%;
         width: 50% !important;
         margin: 0 auto;
     }
     .member-info {
         padding: 20px;
         width: 100%;
         text-align: center;
     }
     .member-info h3 {
         font-size: 18px;
         letter-spacing: 1px;
         display: inline-block;
     }
     .member-info h2 {
         letter-spacing: 1px;
         font-size: 22px;
         display: inline-block;
     }
     .map {
         height: 175px;
         margin-top: 35px;
     }
     .page-title-content h2 {
         font-size: 22px;
         letter-spacing: 5px;
     }
     .about-info-img {
         padding-left: 0;
     }
     .about-details {
         width: auto;
         padding: 20px;
         position: inherit;
         margin-top: 30px;
     }
     .about-details h3 {
         font-size: 18px;
     }
     .single-about {
         margin-bottom: 30px;
     }
     .single-about img {
         width: 100%;
     }
     .about-overflow img {
         width: auto;
     }
     .about-top,
     .about-middle {
         margin-bottom: 80px;
     }
     .about-bottom-left {
         padding: 37px 10px 37px 10px;
         margin-bottom: 30px;
     }
     .brand-area::after {
         height: 70px;
         top: -110%;
     }
     .contact-form {
         padding: 0;
     }
     .iso-nav ul li img {
         display: none;
     }
     .iso-nav ul li {
         display: block;
         font-size: 14px;
         margin-bottom: 10px;
     }
     .iso-nav::before {
         display: none;
     }
     .single-project-slider .owl-nav div {
         padding: 2px 12px;
         font-size: 14px;
     }
     .progress-details {
         margin-bottom: 30px;
         width: 100%;
         text-align: center;
     }
     .single-project-details h2 {
         font-size: 22px;
         letter-spacing: 2px;
     }
     .single-blog-post a h2 {
         font-size: 18px;
         padding: 0;
     }
     .single-blog-post img {
         width: 100%;
     }
     .author-info img {
         width: auto;
     }
     .post-info {
         display: block;
     }
     .author-info,
     .post-date {
         width: 100%;
     }
     .footer-area {
         padding: 30px 0;
     }
     .share {
         margin-top: 30px;
     }
     .blog-grid-brand {
         margin-top: 130px;
     }
     .contact-page-area {
         padding-top: 80px;
     }
     .address {
         position: unset;
         width: 100%;
         height: auto;
         margin: 50px 0 0;
         padding: 30px;
         z-index: inherit;
     }
     .google-map-area {
         margin-bottom: 80px;
     }
     .blog-comment-wraper {
         padding: 0;
     }
     .comment-content span {
         font-size: 12px;
     }
     .reply-commnet-content {
         padding-left: 30px;
     }
     .sidebar {
         margin-top: 80px;
     }
     .single-widget {
         text-align: center;
     }
     .single-widget h3::before {
         left: 50%;
         transform: translate(-50%);
     }
 }


 /***** Wide Mobile Layout *****/

 @media only screen and (min-width: 480px) and (max-width: 767px) {
     .primary-menu ul li ul.drop-menu {
         left: 150px;
     }
     .primary-menu ul li a::before {
         left: -25px;
     }
     .primary-menu ul li a::after {
         right: -25px;
     }
     .brand-area::after {
         top: -80%;
     }
     .details span {
         letter-spacing: 3px;
     }
     .short-dec > p {
         padding: 0;
     }
     .single-service h2 {
         left: 15%;
     }
     .video-box {
         height: 300px;
     }
     .service-ovely-img {
         left: 0;
         text-align: center;
         width: 77%;
         margin: 0 auto;
     }
   
    
  
 }

 .navsbars1{
    display: none;
 }
 .navsbars2 ul li a{
    /* display: none; */
    font-size: 20px;
 }
 .topbars{

    
 }
 .topbar-contact {
display: flex;
justify-content: space-evenly;
background-color: #363e89 !important;
    padding: 8px;
    border-radius: 30px;
 }

 .topbar-contact li{
list-style-type: none;
color: #fff;
 }
 .topbar-contact li a{
    color: #fff;
    /* font-size: 18px; */
     }
 
@media only screen and (max-width: 900px) {
    .logos{
        width: 100% !important;
    }
    .navsbars1{
        display: block !important;
    }
    .navsbars2{
        display: none !important;
    }
    .topbars{
        display: none !important;
    }

}

.announcement {
    background-color: #1a1e3e;
    color: #ffffff;
    padding: 2px 0px;
    font-weight: bold;
    /* border: 1px solid #1a1e3e; */
    /* border-radius: 5px; */
    /* margin: 20px 0; */
  }

  .announcement marquee {
    font-size: 12px;
  }
  

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .slide {
    min-width: 100%;
  }
  
  .slide img {
    width: 100%;
    /* height: 480px;  */
    /* Default height for desktop */
    object-fit: cover; /* Ensures no zooming or distortion */
    max-width: 100%;
  }
  
  /* Navigation buttons */
  .navigation {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 20px;
  }
  
  .navigation button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 7px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  
  /* Dots */
  .dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
  }
  
  .dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
  }
  
  .dots .dot.active {
    background-color: white;
  }
  
  /* Responsive Design */
  @media (max-width: 1024px) {
    .slide img {
      /* height: 400px;  */
      /* Adjust height for tablets */
    }
    .marks{
        display: none !important;
    }
    .courses{
        margin: 0px !important;
    }
  }
  
  @media (max-width: 768px) {
    .slide img {
      /* height: 320px; */
       /* Adjust height for small tablets */
    }
  
    .navigation button {
      padding: 8px;
      font-size: 16px;
      width: 40px;
      height: 40px;
    }
    .marks{
        display: none !important;
    }
    .courses{
        margin: 0px !important;
    }
    
 .slider-table {



    height: 25vh;

}
.pages-title-area {

    height: 25vh;



}
  }
  
  @media (max-width: 480px) {
    .slide img {
      /* height: 250px; */
       /* Adjust height for mobile phones */
    }
  
    .navigation button {
      padding: 6px;
      font-size: 14px;
      width: 30px;
      height: 30px;
    }
  
    .dots .dot {
      width: 10px;
      height: 10px;
    }
    .slider-table {



        height: 18vh;
    
    }
    .pages-title-area {
    
        height: 18vh;
    
    
    
    }
  }

  .downbars .navsbars2{
    z-index: 1 !important;
  }
    /* extra whatsapp */
    #myBtn {
        display: none;
        position: fixed;
        bottom: 40px;
        right: 28px;
        width: 210px;
        /* height: 250px; */
        z-index: 99;
        font-size: 20px;
        border: none;
        outline: none;
        background-color: #363e89;
        color: #ffffff;
        cursor: pointer;
        /* padding: 15px; */
        border-radius: 10px;
        z-index: 1;
    }

    #myBtn:hover {
        background-color: #25d366;
    }