html {
    scroll-behavior: smooth;
}

#logbtn {
    color: #ff8201;
    border: 2px solid #ff8201;
    border-radius: 20px;
    font-size: 10px;
    transition-duration: 0.5s;
}
#logbtn:hover {
    transform: translate(5px, 5px);
    opacity: 2;
    letter-spacing: 0.5rem;
    color: #fff;
    border: 2px solid #fff;
}

#main-logo {
    height: 300px;
    width: 300px;
}

.wclb {
    padding-top: 300px;
}

@media (min-width: 768px) {
    #main-logo {
        height: 500px;
        width: 500px;
    }

    .wclb {
        padding-top: 150px;
    }
}

.wclb1 {
    padding-top: 100px;
}

#collab {
    align-items: center;
    justify-content: center;
    display: flex;
}

/*NAVBAR*/

#navbar {
    font-family: "Futura-LT-W01-Book";
    letter-spacing: 0.2rem;
}

.navbar {
    background-color: #000;
    font-size: 18px;
    opacity: 0.9;
}

/*MAIN*/

#block2 {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url(./bimg/newmain.jpg);
    background-attachment: fixed;
    background-size: cover;
    height: 900px;
}

.mainpara {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-top: 2px solid #fff;
    max-width: max-content;
    margin: 0 auto;
    font-family: "Montserrat";
}

#bitsvg {
    width: 300px;
}

/*ABOUT US*/

.about {
    padding-top: 5rem;
    padding-bottom: 5rem;
    line-height: 2rem;
    font-size: 30px;
    font-weight: bolder;
}

.abouthead {
    color: #ff8201;
    font-size: 25px;
    font-weight: bold;
    font-family: "Raleway", sans-serif;
}

.aboutpara {
    padding: 2rem;
    font-size: large;
    line-height: 1.5em;
    font-family: "Montserrat";
    font-weight: 400;
}

.aboutp {
    font-size: 18px;
}

/*WHY US*/

.whyuspara {
    padding: 2rem;
    line-height: 1.5em;
    font-size: large;
    font-family: "Montserrat";
    font-weight: 400;
}

.whyushead {
    color: #ff8201;
    font-size: 25px;
    font-weight: bold;
    font-family: "Raleway", sans-serif;
}

.whyus {
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-right: 2rem;
    padding-left: 3rem;
    line-height: 2rem;
    font-size: 28px;
    font-weight: bolder;
}

/*INSTAGRAM FEED*/
#block4 {
    background-color: #000;
    padding-top: 50px;
    padding-bottom: 50px;
}

/*ourservice*/

#gallery {
   
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    padding: 20px 0 50px;
}

#portfolio {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./bimg/view.jpg);
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
}


#ourservice {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(./bimg/portfolio2.jpg);
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 1100px;
}

.porttitle {
    color: #f0870e;
    font-size: 45px;
    font-weight: bolder;
    font-family: "Montserrat";
    padding-top: 4rem;
}

.port1 {
    margin: 0 auto;
    height: 400px;
    font-size: 35px;
}

.p1col1 {
    background-color: #ff8201;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

.p1col2 {
    background-color: #000;
    color: #ff8201;
    text-align: center;
    font-weight: bold;
}

.port2 {
    margin: 0 auto;
    height: 400px;
    font-size: 35px;
}

.p2col1 {
    background-color: #000;
    color: #ff8201;
    text-align: center;
    font-weight: bold;
}

.p2col2 {
    background-color: #ff8201;
    text-align: center;
    font-weight: bold;
}

#card {
    align-items: center;
    justify-content: center;
    display: flex;
}

#card1 {
    align-items: center;
    justify-content: center;
    display: flex;
}

#card2 {
    align-items: center;
    justify-content: center;
    display: flex;
}

#card3 {
    align-items: center;
    justify-content: center;
    display: flex;
}

.cardpara {
    font-family: "Roboto";
    font-weight: 300;
    font-size: 16px;
}

/*CONTACT US*/

#cbtn {
    color: #000;
    background-color: #ff8201;
    transition-duration: 0.3s;
    font-weight: bolder;
    font-family: "Lulo-Clean-W01-One-Bold";
    font-size: 14px;
    opacity: 0.8;
    width: 100px;
}

#cbtn:hover {
    color: #fff;
    background-color: rgb(153, 25, 212);
    font-weight: bolder;
}

.form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ff8201;
    opacity: 1; /* Firefox */
}

.form-control {
    background-color: #000;
    color: #ff8201;
    border: 1px solid #333;
    font-family: "Lulo-Clean-W01-One-Bold";
    font-size: 13px;
    opacity: 0.8;
}

input[type="text"]:active {
    background-color: #333;
}

/*FOOTER*/



@media only screen and (min-width: 500px) {
    .p-sm-2 {
        padding: 5rem !important;
    }

    #bitsvg {
        width: 420px;
    }

    .mainpara {
        font-size: 25px;
    }

    .abouthead {
        font-size: 25px;
    }

    .aboutp {
        font-size: 21px;
    }

    .whyushead {
        font-size: 25px;
    }

    .whyusp {
        font-size: 21px;
    }

    .cardpara {
        font-size: 18px;
        padding: 1rem;
    }

    #ourservice {
        height: 800px;
    }
}

@media only screen and (min-width: 768px) {
    .mainpara {
        font-size: 28px;
    }

    #bitsvg {
        width: 480px;
    }

    .port1 {
        width: 650px;
        height: 300px;
    }

    .port2 {
        width: 650px;
        height: 300px;
    }

    .p-xl-5 {
        padding: 2rem !important;
    }

    .about {
        font-size: 30px;
        line-height: 2.2rem;
    }

    .abouthead {
        font-size: 25px;
    }

    .aboutp {
        font-size: 15px;
    }

    .whyus {
        font-size: 30px;
        line-height: 2.2rem;
    }

    .whyusp {
        font-size: 15px;
    }

    #ourservice {
        height: 800px;
    }

    .cardpara {
        font-size: 18px;
        padding: 0.5rem;
    }
}

@media only screen and (min-width: 992px) {
    .navbar {
        font-size: 17px;
    }

    .about {
        font-size: 40px;
        line-height: 2.5rem;
    }

    .abouthead {
        font-size: 30px;
    }

    .aboutp {
        font-size: 18px;
        line-height: 1.5em;
        padding: 1rem;
    }

    .p-xl-5 {
        padding: 4rem !important;
    }

    .whyushead {
        font-size: 30px;
    }

    .whyusp {
        font-size: 18px;
        line-height: 1.5em;
    }

    .whyus {
        font-size: 35px;
    }

    .about {
        font-size: 35px;
    }

    .port1 {
        width: 850px;
        height: 300px;
    }
    .port2 {
        width: 850px;
        height: 300px;
    }

    #ourservice {
        height: 800px;
    }

    .cardpara {
        font-size: 21px;
    }
}

@media only screen and (min-width: 1200px) {
    .contactform {
        padding: 2rem;
    }

    .port1 {
        width: 950px;
        height: 300px;
    }
    .port2 {
        width: 950px;
        height: 300px;
    }

    .p-xl-5 {
        padding: 4rem !important;
    }

    .whyus {
        font-size: 35px;
    }

    .about {
        font-size: 35px;
    }

    #ourservice {
        height: 800px;
    }
}

@media only screen and (min-width: 1400px) {
    .contactform {
        padding: 5rem;
    }

    .port1 {
        font-size: 40px;
    }

    .port2 {
        font-size: 40px;
    }

    .cardpara {
        font-size: 22px;
    }

    .p-xl-5 {
        padding: 6rem !important;
    }

    .about {
        font-size: 40px;
        line-height: 2.8rem;
    }

    .abouthead {
        font-size: 33px;
    }

    .aboutp {
        font-size: 19px;
    }

    .whyus {
        font-size: 43px;
        line-height: 2.8rem;
    }

    .whyushead {
        font-size: 33px;
    }

    .whyusp {
        font-size: 20px;
    }


}

@media only screen and (min-width: 1600px) {
    .port1 {
        font-size: 45px;
    }

    .port2 {
        font-size: 45px;
    }

    .port2 {
        font-size: 45px;
    }

    .cardpara {
        font-size: 23px;
    }

    .p-xl-5 {
        padding: 7rem !important;
    }



    .about {
        font-size: 48px;
        line-height: 3.5rem;
    }

    .abouthead {
        font-size: 40px;
    }

    .aboutp {
        font-size: 22px;
    }

    .whyus {
        font-size: 48px;
        line-height: 3.5rem;
    }

    .whyushead {
        font-size: 40px;
    }

    .whyusp {
        font-size: 23px;
    }
}

@media only screen and (min-width: 1800px) {
    .about {
        font-size: 50px;
        line-height: 3.4rem;
    }

    .abouthead {
        font-size: 40px;
    }

    .aboutp {
        font-size: 21px;
        line-height: 1.5em;
        padding: 1rem;
    }

    .p-xl-5 {
        padding: 9rem !important;
    }

    .whyushead {
        font-size: 40px;
    }

    .whyusp {
        font-size: 21px;
        line-height: 1.5em;
    }

    .whyus {
        font-size: 50px;
        line-height: 3.4rem;
    }

    .cardpara {
        font-size: 25px;
    }

    .port1 {
        width: 1150px;
        height: 350px;
    }

    .port2 {
        width: 1150px;
        height: 350px;
    }

    #ourservice {
        height: 1000px;
    }

    .navbar {
        font-size: 20px;
    }


}

.cookie-alert {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 320px;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    font-family: "Montserrat";
    transform: translateY(100%);
    transition: all 500ms ease-out;
}

.cookie-alert.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookie-alert .card-body .card-title {
    font-size: 1rem;
}

.cookie-alert .card-body .card-text {
    font-size: 0.8rem;
}

.bulletin {
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: 320px;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    font-family: "Montserrat";
    transform: translateY(100%);
    transition: all 500ms ease-out;
}

.bulletin.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.bulletin .card-body .card-title {
    font-size: 1rem;
}

.bulletin .card-body .card-text {
    font-size: 0.8rem;
}

.heart {
    font-family: "Montserrat";
	color: #f0870e;
	transform-origin: center;
}

/* Heart beat animation */
@keyframes beat{
	to { transform: scale(1.4); }
}





/* Existing CSS */
@import url(https://fonts.googleapis.com/css?family=Montserrat:500);

:root {
    font-size: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: #fafafa;
}

.container {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 2rem 2rem;
}

.heading {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 3.5rem 0;
    color: #1a1a1a;
}

.heading span {
    display: block;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem -1rem;
}

.gallery-item {
    flex: 1 0 24rem;
    margin: 1rem;
    box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Fixed height for uniformity */
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease-out;
}

/* Add a hover effect on the image */
.gallery-image:hover {
    transform: scale(1.15);
}

/* Grid layout for better responsiveness */
@supports (display: grid) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
        grid-gap: 2rem;
    }

    .gallery,
    .gallery-item {
        margin: 0;
    }
}

/* Add a fixed size for images within the grid */
.gallery-item {
    height: 300px; /* Fixed height for uniformity */
}

.gallery-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

  /* Style the gallery item container */
  .gallery-item {
    display: inline-block;
    width: 100%; /* You can set a fixed width or percentage here */
    max-width: 300px; /* Limit the maximum width */
    text-align: center;
    overflow: hidden;
}

/* Make images responsive */
.gallery-image {
    width: 100%;
    height: auto;
    display: block; /* Ensures the image takes full width of the container */
}

/* Optional: Style the gallery container */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}

/* Optional: Responsive behavior */
@media (max-width: 768px) {
    .gallery-item {
        width: 45%; /* For smaller screens, adjust the size */
    }
}

@media (max-width: 480px) {
    .gallery-item {
        width: 100%; /* Full width on very small screens */
    }
}




@import url("https://fonts.googleapis.com/css?family=Poppins:400,400i,700");
*, *::after, *::before{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
body{
  font-family: "Poppins", sans-serif;
}
div.c{
  position: relative;
  margin:2em;
}
input{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity:0;
  visibility: 0;
}
h1{
  background:#202020;
  color:white;
  padding:0.5em;
  position: relative;
}
label::before{
  content:"";
  display: inline-block;
  border: 15px solid transparent;
  border-left:20px solid white;
}
label{
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
div.p{
  max-height:0px;
  overflow: hidden;
  transition:max-height 0.5s;
  background-color: #63615f;
  box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
  color: #000;
  font-size: 16px; /* Added text size */

}
div.p p {
  padding:2em;
}
input:checked ~ h1 label::before{
  border-left:15px solid transparent;
  border-top:20px solid white;
  margin-top:12px;
  margin-right:10px;
}
input:checked ~ h1 ~ div.p{
  max-height:100px;
}
a{
  color:steelblue;
}


                h1, h2, h3, h4, h5, h6 {
                    color: #ff8201;
                }
                /* section {
                    padding: 60px;
                } */
                a, a:hover, a:focus, a:active {
                    text-decoration: none;
                    outline: none;
                }
                ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                .faq {
                    padding: 20px 0 20px;
                    background: #0c0c0c75;
                    min-height: 10vh;
                }

                .faq .section-title {
                    margin-bottom: 54px;
                }

                .faq .section-title h2 {
                    margin-bottom: 22px;
                }

                .faq .accordion .card {
                    border: none;
                    margin-bottom: 30px;
                }

                .faq .accordion .card:not(:first-of-type) .card-header:first-child {
                    border-radius: 10px;
                }

                .faq .accordion .card .card-header {
                    border: none;
                    border-radius: 10px;
                    padding: 0;
                }

                .faq .accordion .card .card-header h5 {
                    padding: 0;
                }

                .faq .accordion .card .card-header h5 button {
                    color: #ff8201;
                    font-size: 22px;
                    font-weight: 500;
                    text-decoration: none;
                    padding: 0 30px 0 70px;
                    height: 80px;
                    display: block;
                    width: 100%;
                    text-align: left;
                    background: #fff;
                    -webkit-box-shadow: 0px -50px 140px 0px rgba(69, 81, 100, 0.1);
                    box-shadow: 0px -50px 140px 0px rgba(69, 81, 100, 0.1);
                    border-radius: 10px 10px 0 0;
                    position: relative;
                }

                .faq .accordion .card .card-header h5 button:after {
                    position: absolute;
                    left: 30px;
                    top: 50%;
                    margin-top: -10px;
                    width: 20px;
                    height: 20px;
                    background-color: transparent;
                    color: #ff8201;
                    text-align: center;
                    border: 1px solid #ff8201;
                    border-radius: 50%;
                    line-height: 100%;
                    content: '\f067';
                    font-size: 10px;
                    line-height: 18px;
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                }

                .faq .accordion .card .card-header h5 button.collapsed {
                    background: #fff;
                    border-radius: 10px;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                    border: 1px solid rgba(97, 125, 255, 0.2);
                }

                .faq .accordion .card .card-header h5 button[aria-expanded="true"]:after {
                    content: '\f068';
                    color: #fff;
                    background-image: -webkit-linear-gradient(-180deg, #ff8201 0%, #ff8201 30%, #ff8201 100%);
                }

                .faq .accordion .card .card-body {
                    -webkit-box-shadow: 0px 15px 140px 0px rgba(69, 81, 100, 0.1);
                    box-shadow: 0px 15px 140px 0px rgba(69, 81, 100, 0.1);
                    border-radius: 0 0 10px 10px;
                    padding-top: 0;
                    margin-top: -6px;
                    padding-left: 72px;
                    padding-right: 70px;
                    padding-bottom: 23px;
                    color: rgba(14, 14, 14, 0.815);
                    line-height: 30px;
                    font-weight: bold; /* Added to make text bold */


                }


                .testimonial1-container1 {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: end;
                    gap: 2rem;
                    /* background-color: #fff; */
                    color: #333;
                    border-radius: 15px;
                    margin: 20px auto;
                    padding: 50px 80px;
                    width: 800px;
                    min-height: 430px;
                    position: relative;
                    }

                    .stars1 {
                    font-size: 14px;
                    color: #f0870e;
                    }

                    .testimonial1 {
                    display: flex;
                    align-items: center;
                    text-align: center;
                    font-weight: 900;
                    height: 100%;
                    line-height: 28px;
                    margin: 0;
                    font-size : 18px;
                    color: burlywood;
                    font-family: monospace;
                    }

                    .user1 {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    }

                    .user1 .user-image1 {
                    border-radius: 50%;
                    height: 50px;
                    width: 50px;
                    object-fit: cover;
                    }

                    .user1 .user-details1 {
                    text-align: center;
                    }

                    .user1 .username1 {
                    margin: 0;
                    font-size: 14px;
                    }

                    .user1 .role1 {
                    margin: 0;
                    font-size: 12px;
                    }

                    .progress-dots1 {
                    display: flex;
                    gap: 5px;
                    }

                    .progress-dot1 {
                    width: 5px;
                    height: 5px;
                    background-color: #f0870e;
                    border-radius: 50%;
                    }

                    .progress-dot1.active {
                    background-color: #555;
                    }

                    .btn1 {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 30px;
                    height: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #f0870e;
                    font-size: 10px;
                    cursor: pointer;
                    transition: 0.1s ease;
                    }

                    .btn1:hover {
                    background-color: #f0870e;
                    }

                    #btn1-prev {
                    left: -25px;
                    }

                    #btn1-next {
                    right: -25px;
                    }

                    .portfolio-gallery {
                        position: relative;
                        padding: 80px 0;
                        overflow: hidden;
                        background-color: #1a1a1a;
                    }
                    
                    .shadow-effect {
                        background: #fff;
                        margin: 8px;
                        border-radius: 4px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        height: 100%;
                    }
                    
                    .shadow-effect img {
                        width: 100%;
                        height: 250px;
                        object-fit: cover;
                        border-radius: 4px 4px 0 0;
                    }
                    
                    .item-details {
                        background-color: #333333;
                        color: #fff;
                        padding: 20px;
                        text-align: left;
                    }
                    
                    .item-details h5 {
                        margin: 0 0 15px;
                        font-size: 18px;
                        line-height: 18px;
                    }
                    
                    .item-details h5 span {
                        color: #f33f02;
                        float: right;
                    }
                    
                    .item-details p {
                        font-size: 14px;
                        margin: 0;
                    }
                    
                    /* Owl Carousel Navigation Styles */
                    .owl-nav {
                        margin: 0;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 100%;
                    }
                    
                    .owl-carousel .owl-nav button.owl-prev,
                    .owl-carousel .owl-nav button.owl-next {
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        border-radius: 50%;
                        font-size: 20px;
                        color: #fff;
                        border: 1px solid #ddd;
                        text-align: center;
                        background: rgb(250, 250, 250) !important;
                        transition: all 0.3s ease;
                    }
                    
                    .owl-carousel .owl-nav button.owl-prev {
                        left: -70px;
                    }
                    
                    .owl-carousel .owl-nav button.owl-next {
                        right: -70px;
                    }
                    
                    .owl-carousel .owl-nav button.owl-prev:hover,
                    .owl-carousel .owl-nav button.owl-next:hover {
                        background: #f0870e !important;
                        border-color: #f0870e;
                    }
                    
                    /* Ensure items are side by side */
                    .owl-carousel .owl-stage {
                        display: flex;
                    }
                    
                    .owl-carousel .owl-item {
                        /* display: flex; */
                        flex: 1 0 auto;
                    }
                    
                    /* Responsive adjustments */
                    @media (max-width: 1200px) {
                        .container {
                            max-width: 95%;
                        }
                    }
                    
                    @media (max-width: 768px) {
                        .owl-carousel .owl-nav button.owl-prev {
                            left: -20px;
                        }
                    
                        .owl-carousel .owl-nav button.owl-next {
                            right: -20px;
                        }
                    }

                    /* portfolio start */
                    .portfolio-container {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: end;
                        gap: 4rem;
                        margin: 20px auto;
                        padding: 5vw; 
                        max-width: 90%; 
                        width: 100%;
                        min-height: 430px;
                        position: relative;
                      }
                      
                      .stars {
                        font-size: 14px;
                        color: #f0870e;
                      }
                      
                      .portfolio {
                        display: flex;
                        align-items: center;
                        text-align: center;
                        font-weight: 900;
                        height: 100%;
                        /* line-height: 28px; */
                        margin: 0;
                        font-size: 1rem;
                        line-height: 1.6;
                        font-size: large;
                        color:burlywood;
                        margin-top: 50px;
                      }
                      
                      .user {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        gap: 10px;
                      }
                      
                      .user .user-image {
                        border-radius: 50%;
                        /* height: 50px;
                        width: 50px;
                        object-fit: cover; */
                        margin-left: 30px;
                      }
                      
                      .user .user-details {
                        text-align: center;
                      }
                      
                      .user .username {
                        margin: 5px;
                        font-size: 14px;
                        margin-top: 20px;
                      }
                      
                      .user .role {
                        margin: 0;
                        font-size: 12px;
                        color:rgb(138, 135, 133);
                      }
                      
                      .progress-dots {
                        display: flex;
                        gap: 5px;
                      }
                      
                      .progress-dot {
                        width: 5px;
                        height: 5px;
                        background-color: #f0870e;
                        border-radius: 50%;
                      }
                      
                      .progress-dot.active {
                        background-color: #555;
                      }
                      
                      .btn {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 30px;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid  #f0870e;;
                        font-size: 10px;
                        cursor: pointer;
                        transition: 0.1s ease;
                      }
                      
                      .btn:hover {
                        background-color: #f0870e;;
                      }
                      
                      #btn-prev {
                        left: 25px;
                      }
                      
                      #btn-next {
                        right: 25px;
                      }
                      
                    /* portfolio end */

                    #countdown {
                        position: relative;
                        height: 100vh;
                        overflow: hidden;
                    }
            
                    #countdown video {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        z-index: -1;
                    }
            
                    .content {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        text-align: center;
                        color: white;
                        font-size: 30px;
                        z-index: 1;
                    }
            
                    .content img {
                        max-width: 450px;
                        /* Adjust the size of the logo as needed */
                        display: block;
                        margin: 0 auto 20px;
                    }
            
                    @media (max-width: 768px) {
                        .content {
                            font-size: 20px;
                        }
            
                        .content img {
                            max-width: 300px;
                        }
                    }
            
                    .clock {
                        height: 200px;
                        width: 900px;
                        text-align: center;
                    }
            
                    .digit {
                        width: 85px;
                        height: 150px;
                        margin: 0 5px;
                        position: relative;
                        display: inline-block;
                    }
            
                    .digit .segment {
                        background: #fff;
                        border-radius: 5px;
                        position: absolute;
                        opacity: 0.05;
                        transition: opacity 0.2s;
                        -webkit-transition: opacity 0.2s;
                        -ms-transition: opacity 0.2s;
                        -moz-transition: opacity 0.2s;
                        -o-transition: opacity 0.2s;
                    }
            
                    .digit .segment.on,
                    .separator {
                        opacity: 1;
                        box-shadow: 0 0 50px #ffffff;
                        transition: opacity 0s;
                        -webkit-transition: opacity 0s;
                        -ms-transition: opacity 0s;
                        -moz-transition: opacity 0s;
                        -o-transition: opacity 0s;
                    }
            
                    .separator {
                        width: 12px;
                        height: 12px;
                        background: #ffffff;
                        border-radius: 50%;
                        display: inline-block;
                        position: relative;
                        top: -70px;
                    }
            
                    .digit .segment:nth-child(1) {
                        top: 10px;
                        left: 20px;
                        right: 20px;
                        height: 10px;
                    }
            
                    .digit .segment:nth-child(2) {
                        top: 20px;
                        right: 10px;
                        width: 10px;
                        height: 75px;
                        height: calc(50% - 25px);
                    }
            
                    .digit .segment:nth-child(3) {
                        bottom: 20px;
                        right: 10px;
                        width: 10px;
                        height: 75px;
                        height: calc(50% - 25px);
                    }
            
                    .digit .segment:nth-child(4) {
                        bottom: 10px;
                        right: 20px;
                        height: 10px;
                        left: 20px;
                    }
            
                    .digit .segment:nth-child(5) {
                        bottom: 20px;
                        left: 10px;
                        width: 10px;
                        height: 75px;
                        height: calc(50% - 25px);
                    }
            
                    .digit .segment:nth-child(6) {
                        top: 20px;
                        left: 10px;
                        width: 10px;
                        height: 75px;
                        height: calc(50% - 25px);
                    }
            
                    .digit .segment:nth-child(7) {
                        bottom: 95px;
                        bottom: calc(50% - 5px);
                        right: 20px;
                        left: 20px;
                        height: 10px;
                    }
            
                    .stay-tuned {
                        margin-top: 5rem;
                        font-family: 'Ubuntu', sans-serif;
                        font-size: 3.5rem;
                    }
            
                    #laptop-count {
                        display: block;
                    }
            
                    #mobile-count {
                        display: none;
                    }
            
                    @media (max-width: 500px) {
            
                        #laptop-count {
                            display: none;
                        }
            
                        #mobile-count {
                            display: block;
                        }
            
                        .clock {
                            height: 200px;
                            width: 300px;
                            text-align: center;
                        }
            
                        .digit {
                            width: 64px;
                            height: 90px;
                            margin: 0;
                            position: relative;
                            display: inline-block;
                        }
            
                        .digit .segment {
                            opacity: 0.1;
                        }
            
                        .separator {
                            width: 4px;
                            height: 4px;
                            top: -45px;
                        }
            
                        .digit .segment:nth-child(1) {
                            height: 6px;
                        }
            
                        .digit .segment:nth-child(2) {
                            width: 6px;
                        }
            
                        .digit .segment:nth-child(3) {
                            width: 6px;
                        }
            
                        .digit .segment:nth-child(4) {
                            height: 6px;
                        }
            
                        .digit .segment:nth-child(5) {
                            width: 6px;
                        }
            
                        .digit .segment:nth-child(6) {
                            width: 6px;
                        }
            
                        .digit .segment:nth-child(7) {
                            height: 6px;
                        }
            
                        #clock-time {
                            display: none;
                        }
            
                        .stay-tuned {
                            font-size: 2rem;
                        }
                    }


                    strong {
                        font-weight: 700;
                    }
        
                    .subtitle {
                        font-size: 0.85rem;
                        font-weight: 700;
                        margin: 0;
                        color: #1792d2;
                        letter-spacing: 0.05em;
                        font-family: "Montserrat";
                        font-weight: 400;
                    }
        
                    .article-title {
                        font-size: 1.5rem;
                        font-family: "Montserrat";
                        font-weight: 400;
                    }
        
                    .article-read-more,
                    .article-info {
                        font-size: .875rem;
                    }
        
                    .article-read-more {
                        color: #1792d2;
                        text-decoration: none;
                        font-weight: 700;
                    }
        
                    .article-read-more:hover,
                    .article-read-more:focus {
                        color: #143774;
                        text-decoration: underline;
                    }
        
                    .article-info {
                        margin: 2em 0;
                    }
        
                    .container-flex {
                        max-width: 90vw;
                        margin: 0 auto;
                        display: flex;
                        justify-content: space-between;
                    }
        
                    img {
                        max-width: 60%;
                        display: block;
                    }
        
                    main {
                        max-width: 75%;
                    }
        
                    .article-body {
                        width: 100%;
                        text-align: justify;
                        font-family: "Montserrat";
                        font-weight: 400;
                    }
        
                    .sidebar {
                        max-width: 23%;
                    }
        
                    footer a {
                        text-decoration: none;
                        color: white;
                    }
        
                    footer a:hover {
                        text-decoration: underline;
                        color: white;
                    }
        
                    @media (max-width:1050px) {
                        .container-flex {
                            flex-direction: column;
                        }
        
                        .site-title,
                        .subtitle {
                            width: 100%;
                        }
        
                        main {
                            max-width: 100%;
                        }
        
                        .sidebar {
                            max-width: 100%;
                        }
        
                    }
        
                    /* articles */
                    .article-featured {
                        border-bottom: #707070 1px solid;
                        padding-bottom: 2em;
                        margin-bottom: 2em;
                        font-family: "Montserrat";
                        font-weight: 400;
                    }
        
                    .article-recent {
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 2em;
                    }
        
                    .article-recent-main {
                        order: 2;
                    }
        
                    .article-recent-secondary {
                        order: 1;
                    }
        
                    .bit-img {
                        width: 100%;
                    }
        
                    .newsl__img {
                        display: flex;
                        justify-content: center;
                    }
        
                    @media (min-width: 675px) {
                        .article-recent {
                            flex-direction: row;
                            justify-content: space-between;
                        }
        
                        .article-recent-main {
                            width: 68%;
                        }
        
                        .article-recent-secondary {
                            width: 30%;
                        }
        
                        .bit-img {
                            width: 35%;
                        }
                    }

                    body {
                        --text-color: #eee;
                        --secondary-color: #f0870e;
                        --bkg-color: #121212;
                    }
            
                    .newsl {
                        font-family: "Montserrat";
                        margin: 40px auto;
                        text-align: left;
                        width: 90vw;
                        max-width: 88vw;
                        height: auto;
                        padding: 10px;
                        border-radius: 1.5em;
                        border: 2px solid var(--text-color);
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                    }
            
                    .newsl__img {
                        width: 40%;
                        padding: 10px;
                    }
            
                    .newsl__content {
                        width: 60%;
                        padding: 10px;
                    }
            
                    .newsl__img--dark {
                        display: inline;
                        width: 100%;
                        vertical-align: top;
                    }
            
                    .newsl__title {
                        font-size: 1.5em;
                        font-weight: 500;
                        line-height: 32px;
                        margin: 5px 0;
                    }
            
                    .newsl__text {
                        margin: 20px 0;
                    }
            
                    .newsl__input {
                        border: 2px solid #969696;
                        width: 80%;
                        margin-bottom: 10px;
                        font-family: "Poppins", sans-serif;
                        padding: 6px;
                        border-radius: 0.4em;
                        outline: none;
                    }
            
                    .newsl__btn {
                        width: 80%;
                        background-color: var(--secondary-color);
                        border: none;
                        border-radius: 0.4em;
                        padding: 10px;
                        font-weight: 500;
                        font-size: 1em;
                        color: #fbfbfb;
                        font-family: "Poppins", sans-serif;
                    }
            
                    @media screen and (max-width: 600px) {
            
                        .newsl__img,
                        .newsl__content,
                        .newsl__input,
                        .newsl__btn {
                            width: 100%;
                        }
                    }

                    .shadow-effect {
                        position: relative;
                        width: 100%;
                        max-width: 400px; /* Adjust width as needed */
                        border-radius: 10px;
                        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
                        text-align: center;
                        overflow: hidden;
                    }
                    
                    .shadow-effect .image-container {
                        width: 100%;
                        height: 250px; /* Adjust height as needed */
                        background-size: cover;
                        background-position: center;
                        border-radius: 10px 10px 0 0;
                        
                    }
                    
                    .item-details {
                        padding: 15px;
                        background: #000; /* Black background */
                        color: #fff;
                        border-radius: 0 0 10px 10px;
                    }
                    
                    .item-details h5 {
                        font-size: 18px;
                        margin: 5px 0;
                        color: #f8f9fa;
                    }
                    
                    .item-details p {
                        font-size: 14px;
                        color: #d1d1d1;
                        margin: 0;
                    }

                    
/* Mobile Styles */
@media only screen and (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .testimonial-container {
        padding: 1rem;
    }

    .testimonial {
        font-size: 0.9rem;
    }

    .user-image {
        width: 40px;
        height: 40px;
    }

    .user-details {
        margin-left: 8px;
    }

    .username {
        font-size: 1rem;
    }

    .role {
        font-size: 0.8rem;
    }

    .btn {
        font-size: 1.2rem;
        padding: 8px;
    }

    .stars i {
        font-size: 14px;
    }

    .progress-dots i {
        font-size: 10px;
    }
}

@media only screen and (max-width: 480px) {
    .testimonial-container {
        padding: 0.5rem;
    }

    .testimonial {
        font-size: 0.8rem;
    }

    .user-image {
        width: 35px;
        height: 35px;
    }

    .user-details {
        margin-left: 6px;
    }

    .username {
        font-size: 0.9rem;
    }

    .role {
        font-size: 0.7rem;
    }

    .btn {
        font-size: 1rem;
        padding: 6px;
    }

    .stars i {
        font-size: 12px;
    }

    .progress-dots i {
        font-size: 8px;
    }
}
.gallery1 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px;
}

.gallery1-item1 {
    width: 250px;
    /* Set a fixed width */
    height: 200px;
    /* Set a fixed height */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 10px;
    /* For proper positioning of the image wrapper */
}

.gallery1-image-wrapper1 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.gallery1-image1 {
    width: 100%;
    height: 100%;
    /* Adjust height as needed */
    background-size: cover;
    background-position: center;
}



.gallerybit {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
  }
  
  .gallerybit img {
    width: 100%;
    max-width: 350px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
  }

  .shadow-effecttest img{
    width: 100%;
    max-width: 350px;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;

  }
  
  .gallerybit::after {
    content: "";
    width: 350px;
  }
  

  .user .user-image {
    border-radius: 50%;
    /* height: 50px;
    width: 50px;
    object-fit: cover; */
    margin-top: 30px;
  }



   .read-more {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
  }
  
  
  .read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-color);
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  
 .read-more i {
    font-size: 14px;
    transition: transform 0.3s ease;
  }
  
 .read-more:hover i {
    transform: translateX(5px);
  }




  /* Font Import */
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");


/* Button styling */
.modal-button123 {
  background-color: #47a386;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* box shadow to add depth */
  color: #fff;
  font-size: 14px;
  padding: 10px 25px;
}

/* Open Modal Container/Wrapper Full-screen */
.modal-container123 {
  background-color: rgba(0, 0, 0, 0.3);
  /* Center modal container */
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  opacity: 0; /* to be hidden by default */
  pointer-events: none; /* so we can click the modal trigger */
  top: 0;
  left: 0;
  height: 100vh; /* =100% of viewport height */
  width: 100vw; /* = 100% of viewport width */
  transition: opacity 0.3s ease;
}

/* Activate the class that we used in JS for the Event Listeners of modal's open and close button */
.modal-container123.show {
  pointer-events: auto; /* set back the default value */
  opacity: 1;
}

.modal-content123 {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* box shadow to add depth */
  padding: 30px 50px;
  width: 600px;
  max-width: 100%; /* Assures that it' ll be kept inside the browser width */
  text-align: center;
}

.modal-content123 h1 {
  margin: 0;
}

.modal-content123 p {
  font-size: 14px;
  opacity: 0.7;
}

/* Remove Modal at First */
.modal_container123 {
  display: none;
}