*{box-sizing:border-box}
body{margin:0;padding:0;font-family:'Open Sans',sans-serif}
ul:not(.not-style-ul){padding:0;margin:0;list-style:none}
.not-style-ul{padding-left:15px;}
a{font-family:inherit;display:block;text-decoration:none;transition:all .5s ease 0;cursor:pointer;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:700;line-height:1.2;color:inherit}
p{font-family:inherit;color:#666;font-size:14px;line-height:24px;margin:0 0 14px;}
button,input,a{-webkit-appearance:none}
.w-100{width:100%}
.responisve_menu_button{display:none;position:absolute;top:0;bottom:0;right:12px;height:36px;margin:auto;width:35px}
.hamburger.navigation_wrapper{background-color:transparent;border:none;outline:none;border-radius:3px;cursor:pointer;display:block;height:36px;padding:0 3px}
.nav_button.hamburger > span{background-color:#fff;border-radius:2px;clear:both;display:block;height:4px;margin:3px 0;width:21px}
a:hover{color:#CBB492}
nav ul li a{text-transform:uppercase;color:#464748;font-family:'Prata',Georgia,"Times New Roman",serif;}
nav ul li{display:inline-block;margin-left:40px;white-space:nowrap;line-height:30px}
.container{width:100%;max-width:1080px;display:block;margin:0 auto}
button#scrollToTopButton{color:#fafafa;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);width:40px;height:40px;border-radius:0;background-color:var(--blue);z-index:9999;bottom:10px;right:10px;position:fixed;opacity:0;visibility:hidden;font-size:32px;display:flex;outline:none;border:none}
#scrollToTopButton i{margin:auto}
#marker{position:absolute;top:100px;width:0;height:0}
.row::after{content:"";clear:both;display:table}
section.popUp .ct-inner input, section.popUp textarea.area-msg{
    background-color: #fff;
}
[class*="col"]{float:left;padding:15px}
.col1{width:8.33%}
.col2{width:16.66%}
.col3{width:25%}
.col4{width:33.33%}
.col5{width:41.66%}
.col6{width:50%}
.col7{width:58.33%}
.col8{width:66.66%}
.col9{width:75%}
.col10{width:83.33%}
.col11{width:91.66%}
.col12{width:100%}
.d-flex{display:flex}
.align-items-center{align-items:center}
.justify-content-center{justify-content:center}
.justify-content-around{justify-content:space-around;}
.text-center{text-align:center}
.pb-60{padding-bottom:60px;}
.btn-gell{display:inline-block;border:2px solid;padding:10px 20px;color:#12ba00;margin-top:30px}
.etb-section{background:#1bba23;padding-top:40px;padding-bottom:25px}
p.insurance{color:#fff;font-size:19px;line-height:25px;font-family: ABeeZee, Helvetica, Arial, Lucida, sans-serif;}
.pd30{padding:30px 5%}
.pdl0{padding-left:0}
.pdr0{padding-right:0}
.gree{color:#7cda24;display:inline-block}
.mt-0{margin-top:0;}
section.gallery_2{overflow:hidden;background:#007A12;padding:55px 0}
section.dark-3{background:#141414;color:#fff}
section.dark-3 p{color:#fff}
.slider1{margin-top:45px}
.w100{font-weight:100}
ul.stars li{display:inline}
ul.stars{display:inline-block;padding:0 10px}
.client-review i{font-size:24px;color:#999}
ul.stars li i{font-size:15px;color:#e7711b}
.g-ico{width:25px;position:absolute;top:6px;right:7px}
.client{width:50px;display:inline-block}
.cl-detaiils{padding-left:30px;margin-top:26px}
.cl-name{color:#427fed;margin:0}
.cl-deta{display:inline-block;vertical-align:top;margin:6px 11px}
.duration{margin-top:0;color:#999}
.revide-exp{display:inline}
.scrollbar{height:200px;background:#F5F5F5;overflow-y:scroll;padding:30px;border:1px solid #ededed;max-height:200px;position:relative}
section.testimonials{margin-top:60px}
#wrapper{text-align:center;width:500px;margin:auto}
#style-1::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);border-radius:10px;background-color:#F5F5F5}
#style-1::-webkit-scrollbar{width:5px;background-color:#F5F5F5}
#style-1::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#555}
.upper-le:hover{opacity:.4;transition:.7s all}
.upper-le{cursor:pointer;height:100%}
.img-over{height:100%}
.img-over amp-img{height:100%}
.imgOver amp-img{height:383px;}
.google-reviews > div{width:calc(100% / 3 - 20px)}
.google-reviews{display:flex;justify-content:space-between}
section.testimonials amp-carousel{height:330px}
.logo-frm{width:56px;display:inline-block}
.starsto{display:inline-block;vertical-align:top;margin-top:5px;padding-left:20px}
ul.lr-rating li{display:inline-block;color:#0CAA41;font-size:18px}
ul.lr-rating li i{color:#0CAA41}
.rev-bar{background-color:#fafafa;padding:15px;border:1px solid #ededed;border-radius:10px;margin:0 18px 20px}
.anchor{display:inline-block;color:#2ea3f2}
ul.midd-cl{color:#666;font-weight:700;font-size:14px;margin-left:23px}
.midd-cl li,.over-the li{    line-height: 26px;}
.cm-li{color:#666;font-weight:700;font-size:14px;margin-bottom:3px;}
ol.over-the{font-weight:700;font-size:14px;color:#666}
/*.bg-green{background-color:#20AD1F}*/
.slide_1.amp-carousel-slide{display:flex}
.slide_1 > div{width:calc(100% / 2)}
.enar-to{margin:0;font-size:30px;padding:40px 0 15px;line-height: 1em;font-weight: 500;}
.enar-to.sech{padding:0; margin:27px 0 10px;}
.sech-h3,.sech-h2,.sech-h4{font-size:22px;color:#333;line-height: 1em;font-weight: 500;margin:0 0 10px;}
.sech-h2{font-size:26px;}
.sech-h4{font-size:18px;}
.slide_21{display:flex}
.slide_21 > div{width:calc(100%/3)}
.contact_banner{background:url(images/paving3.jpg)}
.upper-cover{margin-top:50px;position: relative; background-image:url(images/paving9.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;background-attachment: relative; height:442px;display: flex;justify-content: center;align-items: center;}
.upper-cover:before{content:"";position: absolute;top:0;left:0; background-color:rgba(0,0,0,.8);width:100%;height:100%;}
.inner-details{margin:auto;position: sticky;width:90%;text-align: center;}
.cn-h{color:#fff;font-size:70px;font-weight:600;margin:0}
.book-an{text-align:center;color:#fff;font-size:35px;margin-top:16px}
.ct-inner input{padding:13px;border:none;width:50%;margin:6px;background-color:lightgray;}
.ct-inner{display:flex}
textarea.area-msg{max-width:100%;width:100%;border:none;padding:11px;margin:6px;min-height:150px;background-color:lightgray;resize: none;}
.text-rigt{text-align:right;margin:6px}
.text-rigt input{padding:12px 30px;cursor:pointer;border:none;font-size:16px;background-color:#C39D63;color:#fff}
.ctr{margin:0;color:#fff;font-size:31px}
.touch-to{font-size:51px;font-weight:600;margin-top:20px}
.upper-headings{padding:106px 0 32px 16px}
.email-stl p{font-size:26px;line-height:39px;text-align:center;color:#0B9444}
.email-stl{border:5px solid #0c0c0c}
section.mix-bind{padding-top:60px;padding-bottom:50px}
section.mix-bind p{padding-bottom:21px}
ul.design-lis li{color:#666;font-size:15px;padding-top:7px;list-style:disc}
ul.design-lis{padding-left:21px}
amp-img img{object-fit:cover}
.gallery_2-flex{justify-content:space-between;flex-wrap:wrap}
.gallery_2-flex > div{width:calc(100% / 4 - 5%)}
amp-sidebar{border-top:3px solid #7EBEC5;max-width: 300px;}
amp-sidebar ul li a{font-family: 'Prata',Georgia,"Times New Roman",serif;}
.reultant{display: flex;flex-wrap: wrap;justify-content: center;}
.reultant > div {width: calc(100% / 4);overflow: hidden;}
.reultant > div:nth-child(4n + 4) amp-img{margin-right:0;}
/*.reultant > div:nth-child(4n + 4){width:calc(100% / 4 - 0px);}*/
.reultant > div amp-img{margin:10px 10px 0 0;cursor: pointer;transition:0.3s all ease-in;}
.reultant > div amp-img:hover{transform:scale(1.08) rotate(3deg);}
/*.reultant1{visibility: hidden;}*/
 :root {
      color-primary: #0B9444;
      space-1: .5rem;  /* 8px */
      space-4: 2rem;   /* 32px */
    }

    /* Styles for the flex layout based tabs */
    amp-selector[role=tablist].tabs-with-flex {
        display: flex;
        flex-wrap: wrap;
    }
    amp-selector[role=tablist].tabs-with-flex [role=tab] {
        flex-grow: 1;
        /* custom styling, feel free to change */
        text-align: center;
        padding: var(--space-1);
        outline:none;
        align-items: center;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
            margin-bottom: 15px;
    }
    amp-selector[role=tablist].tabs-with-flex [role=tab][selected] {
        outline: none;
        /* custom styling, feel free to change */
        border-bottom: 2px solid var(--color-primary);
    }
    amp-selector[role=tablist].tabs-with-flex [role=tabpanel] {
        display: none;
        width: 100%;
        order: 1; /* must be greater than the order of the tab buttons to flex to the next line */
        /* custom styling, feel free to change */
        padding: var(--space-4);
    }
    amp-selector[role=tablist].tabs-with-flex [role=tab][selected] + [role=tabpanel] {
        display: block;
    }

    /* Styles for the selector based tabs */
    amp-selector[role=tablist].tabs-with-selector {
        display: flex;
    }
    amp-selector[role=tablist].tabs-with-selector [role=tab][selected] {
        outline: none;
        /* custom styling, feel free to change */
        border-bottom: 2px solid var(--color-primary);
    }
    amp-selector[role=tablist].tabs-with-selector {
        display: flex;
    }
    amp-selector[role=tablist].tabs-with-selector [role=tab] {
      /* custom styling, feel free to change */
      width: 100%;
      text-align: center;
      padding: var(--space-1);
    }
    amp-selector.tabpanels [role=tabpanel] {
      display: none;
      /* custom styling, feel free to change */
      padding: var(--space-4);
    }
    amp-selector.tabpanels [role=tabpanel][selected] {
      outline: none;
      display: block;
    }
.portfolit-gall1 br{display: none;}
.desc li{color:#666;font-size:14px;line-height:25px;}
.cookie-notification{padding:15px;text-align:center;background-color: #000;}
.cookie-notification p{color:#fff;margin:0;}
.cookie-btton{background-color: #1bba23;
    color: #fff;
    font-size: 16px;
    padding: 8px 24px;
    border-radius: 30px;
    cursor:pointer;
    border:none;
    outline:none;
    margin-top:8px;
}
button.cookie-btton{margin-right:8px;}
.cookie-btton:hover{color:#fff;}
.action-menu{background-color:#000;padding: 6px 12px;}
.action-menu > div{color:#fff;font-size: 14px;vertical-align: middle;}
.action-menu > div i{font-size: 22px;}




@media only screen and (max-width: 1200px) {
    .container{width:90%}
    .footer .row .col3{width:50%;}
}
@media only screen and (max-width: 1024px) {
    .responisve_menu_button,.desk-none{display:block}
    .mobile-none,.mobile-none.d-flex{display:none}
    .w-100{width:100%}
    .w-90{width:90%}
    .Mt50{margin:40px 0 auto auto}
    nav{margin-top:50px;padding:0 20px;}
    nav ul{overflow: hidden;}
    nav ul li{margin:0px;}
    amp-sidebar ul li{display: block;}
    amp-sidebar ul li:not(.desk-none) a{border-bottom: 1px solid rgba(0,0,0,.03);padding: 10px 5%;}
    amp-sidebar ul li .contact-header-btn{margin:auto;max-width:100%;}
    nav.d-flex{display:block}
    p.insurance{font-size:16px}
    .logo-container > div:first-child{width:100%;}
    .logo {width: 100px;height: 89.2px;}
    .reultant > div{width:calc(100% / 3);}
    .reultant > div:nth-child(4n + 4) amp-img{margin-right:10px;}
    .reultant > div:nth-child(3n + 3) amp-img{margin-right:0px;}
    .action-menu{background-color: transparent;}
    .action-menu > div{margin-bottom:10px;color:#12ba00;}
}
@media only screen and (max-width: 900px) {
    .gallery_2-flex > div{width:calc(100% / 4 - 3%)}

}
@media only screen and (max-width: 800px) {
    .gallery_2-flex > div{width:calc(100% / 4 - 20px)}
}
@media only screen and (max-width: 767px) {
    .col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12{width:100%}
    .d-flex,.ct-inner{display:block}
    header{padding:0}
    section.deck-sec-1{padding:20px}
    p.insurance{text-align:center}
    .google-reviews > div{width:100%}
    .google-reviews{display:block}
    section.testimonials amp-carousel{height:280px}
    .enar-to{padding-left:15px;font-size:19px}
    .slide_21 > div{width:100%}
    .slide_21{display:block}
    ul.header-ul li i{color:#29b527}
    ul.header-ul{padding:20px 0}
    .contact-header-btn{padding:12px}
    .contai-spac{margin-top:40px}
    .pdr0{padding-right:30px}
    .pdl0{padding-left:30px}
    .gallery_2-flex{display:flex}
    .gallery_2-flex > div{width:calc(100% / 2 - 5%)}
    .gallery_2 .gallery_2-flex > div,.mix-bind .gallery_2-flex > div{margin-bottom:20px}
    .img-desc{text-align:center}
    .container1{max-width:100%;width:100%;}
    .portfolit-gall1 .container{width:90%;}
    .ct-inner input{width:100%;}
    .cont-logo amp-img{width:30%;margin: auto;}
    .footer .row .col3{width:100%;}
    .img-desc amp-img{width:70%;margin:auto;}
    amp-selector[role=tablist].tabs-with-flex [role=tabpanel]{padding:30px 0;}
    .reultant > div:nth-child(4n + 4) amp-img,.reultant > div amp-img{margin-right:0px;}
}
@media only screen and (max-width: 576px) {
    .cont-logo amp-img {width:50%;}
    .reultant > div{width:calc(100% / 1);}
}
@media only screen and (max-width: 470px) {
    .gallery_2-flex > div{width:100%;}
    .email-stl p {font-size:20px;}
    .img-desc amp-img{width:50%;}
}
<!-- Custom CSS for FAQ styling -->
/* Hover effect for images */
.gallery_2-flex > div:hover amp-img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* FAQ Section */
.faq-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.faq-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
    margin-bottom: 30px;
}

.faq-question {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2980b9;
    padding: 15px;
    background-color: #ecf0f1;
    border: 1px solid #dcdcdc;
    margin: 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #dfe6e9;
}

.faq-answer {
    padding: 15px;
    border-bottom: 1px solid #dcdcdc;
    background-color: #f9f9f9;
    color: #34495e;
    display: none;
}

amp-accordion section[expanded] .faq-answer {
    display: block;
}

/* Buttons */
.text-center .btn-gell {
    background-color: #006600;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 50px;
    text-decoration: none;
    margin: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.text-center .btn-gell:hover {
    background-color: #55efc4;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.text-center .btn-gell i {
    margin-right: 10px;
    font-size: 1.5rem;
    vertical-align: middle;
}

/* Custom Inputs */
.c-form input, .c-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #fff;
}

.c-form textarea {
    min-height: 120px;
}

.c-form input[type="submit"] {
    background-color: #2980b9;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

.c-form input[type="submit"]:hover {
    background-color: #3498db;
}

/* Email and Contact Information */
.email-stl p {
    font-size: 26px;
    line-height: 39px;
    text-align: center;
    color: #0B9444;
}

.email-stl a {
    font-size: 1.1rem;
    color: #2980b9;
    text-decoration: none;
}

.email-stl a:hover {
    text-decoration: underline;
}
<!-- Custom CSS for styling -->
<style amp-custom>
   /* General container styling */
   .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
   }

   /* Flex layout for gallery items */
   .gallery-flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }

   /* Image and description wrapper */
   .img-desc-wrap {
      flex: 1 1 calc(25% - 20px); /* 4 items per row */
      margin: 10px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   /* Image styling */
   .img-desc amp-img {
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
   }

   /* Hover effect for images */
   .img-desc-wrap:hover amp-img {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   }

   /* Description text styling */
   .insurance {
      margin-top: 15px;
      font-size: 1.1rem;
      font-weight: 600;
      color: #006600;
      background-color: #006600;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   }

   /* Mobile responsiveness */
   @media (max-width: 768px) {
      .img-desc-wrap {
         flex: 1 1 calc(50% - 20px); /* 2 items per row */
         margin-bottom: 30px;
      }

      .insurance {
         font-size: 1rem;
      }
   }

   @media (max-width: 480px) {
      .img-desc-wrap {
         flex: 1 1 100%; /* 1 item per row */
      }
   }
/* Container for logo and contact information */
.col6.pd30 {
    text-align: center;
    padding: 30px;
}

.cont-logo {
    margin-bottom: 20px;
}

.cont-logo amp-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cont-logo amp-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Contact information styling */
.contact-info {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.contact-info p {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
}

.contact-details p {
    margin: 0;
    font-size: 1rem;
    color: #555;
}

.contact-details a {
    color: #2980b9;
    text-decoration: none;
    font-weight: bold;
}

.contact-details a:hover {
    text-decoration: underline;
}

/* Hover effect for the whole contact section */
.contact-info:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
/* General styling */
.contact-section {
    background-color: #f9f9f9;
    padding: 60px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.col6 {
    width: 48%; /* Set the width to 48% so that two columns fit side by side */
    padding: 20px;
}

.contact-title {
    font-size: 2.5rem;
    color: #2980b9;
    margin-bottom: 20px;
    font-weight: 700;
}

.contact-details p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

/* Modern form styling */
.modern-form {
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.modern-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.modern-form input, .modern-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    background-color: #f9f9f9;
    transition: border 0.3s ease;
}

.modern-form input:focus, .modern-form textarea:focus {
    border-color: #2980b9;
    outline: none;
}

.modern-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Submit button styling */
.submit-btn input {
    background-color: #2980b9;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.submit-btn input:hover {
    background-color: #3498db;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .col6 {
        width: 100%;
        margin-bottom: 20px;
    }

    .contact-title {
        font-size: 2rem;
    }
}

/* General Header Styling */
.header {
  background: linear-gradient(135deg, #e3f1f5, #4ba1b4);
  border-radius: 0 0 50px 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px 0;
  width: 100%;
  position: relative;
}

/* Container for Header */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

/* Logo Styling (Round Logo) */
.logo-container amp-img {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* Makes the logo round */
  overflow: hidden;
  border: 3px solid #339966; /* Optional: Add a border for more styling */
}

/* Social Links (Desktop Only) */
.social-links ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-links li {
  margin-right: 15px;
}

.social-links li a {
  color: #2980b9;
  font-size: 24px;
  transition: color 0.3s ease;
}

.social-links li a:hover {
  color: #3498db;
}

/* Navigation Links */
.nav-links ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links li {
  margin-right: 20px;
}

.nav-links li a {
  color: #333;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.nav-links li a:hover {
  background-color: #e3f1f5;
}

/* Contact Button (Standout Styling) */
.contact-header-btn {
  background-color: #1abc9c;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.contact-header-btn:hover {
  background-color: #16a085;
}

/* Information Bar (Desktop Only) */
.info-bar {
  display: flex;
  justify-content: space-between;
  background-color: #f1f5f8;
  padding: 10px;
  font-size: 14px;
  color: #333;
  border-top: 1px solid #dce1e5;
  margin-top: 10px;
  border-radius: 0 0 50px 50px;
}

.info-bar div {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.info-bar i {
  margin-left: 8px;
  font-size: 18px;
  color: #2980b9;
}

/* Responsive Sidebar Menu */
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  text-align: center;
}

.sidebar-menu li {
  margin-bottom: 20px;
}

.sidebar-menu li a {
  color: #333;
  font-size: 18px;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 8px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.sidebar-menu li a:hover {
  background-color: #e3f1f5;
}

/* Social Icons in Sidebar */
.sidebar-social {
  list-style: none;
  padding: 0;
  text-align: center;
}

.sidebar-social li {
  display: inline-block;
  margin-right: 15px;
}

.sidebar-social li a {
  color: #2980b9;
  font-size: 24px;
}

/* Close Button for Sidebar */
.close-sidebar {
  background: transparent;
  border: none;
  font-size: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* Mobile Menu Button */
.responisve_menu_button {
  display: none;
}

/* Hamburger Icon */
.hamburger {
  display: inline-block;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  border-radius: 2px;
}

/* Hide Elements on Mobile */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .responisve_menu_button {
    display: block;
  }

  .header-container {
    justify-content: space-between;
  }

  .logo-container {
    order: 1;
  }

  .info-bar {
    display: none;
  }
}

/* Footer General Styling */
.footer {
  background: linear-gradient(135deg, #e3f1f5, #4ba1b4); /* Elegant green gradient */
  padding: 50px 0;
  border-radius: 50px 50px 0 0;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
  color: #fff;
}

/* Footer Logo Styling */
.footer-logo {
  border-radius: 50%; /* Round logo */
  border: 4px solid #1abc9c; /* Green border */
  overflow: hidden;
  margin-bottom: 20px;
}

.footer-logo-section {
  text-align: center;
}

/* About Section in Footer */
.footer-about {
  font-size: 14px;
  line-height: 24px;
  color: #f1f1f1;
  padding: 0 10px;
  text-align: justify;
}

/* Footer Links & Menu */
.footer-links, .footer-legal, .footer-hours {
  text-align: left;
}

.footer-heading {
  font-size: 18px;
  color: #e0f7fa;
  margin-bottom: 15px;
  font-weight: 700;
}

.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 10px;
}

.footer-menu li a {
  color: #003300;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-menu li a:hover {
  color: #b2dfdb;
}

/* Footer Reviews Section */
.footer-reviews {
  margin-top: 20px;
}

.footer-reviews a {
  display: inline-block;
  margin-bottom: 10px;
}

/* Footer Opening Hours & Insurance */
.footer-hours ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-hours ul li {
  font-size: 14px;
  color: #003300;
  margin-bottom: 10px;
}

.footer-hours .visa {
  margin-top: 20px;
}

/* Footer Copyright Section */
.footer-privacy {
  background-color: #004d40; /* Darker color for emphasis */
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  padding: 20px 0;
  margin-top: 30px;
  border-top: 1px solid #1abc9c;
}

/* Scroll to Top Button */
.scrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #1abc9c;
  color: #fff;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.scrollToTop:hover {
  background-color: #16a085;
  transform: translateY(-5px);
}

/* Responsive Footer for Mobile */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-logo-section, .footer-links, .footer-legal, .footer-hours {
    margin-bottom: 30px;
  }
}

.round-img {
  border-radius: 50%; /* Makes the image round */
  border: 4px solid #1abc9c; /* Green border around the image */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
  overflow: hidden;
}
/* General Page Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

/* Heading Styles */
h1 {
    color: #333;
    font-size: 28px;
    margin-bottom: 20px;
}

h2 {
    color: #333;
    font-size: 24px;
    margin-top: 20px;
}

/* Paragraph Styles */
p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Service Box Styling */
.service-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.service-box img {
    width: 200px;
    border-radius: 5px;
}

/* Button Styling */
.btn {
    display: inline-block;
    background: #007bff;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
}

.btn:hover {
    background: #0056b3;
}
.whatsapp-button {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background: #25D366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-button:hover {
  background: #128C7E;
  transform: scale(1.1) translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.whatsapp-button .tooltip {
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.whatsapp-button:hover .tooltip {
  opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .whatsapp-button {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 28px;
  }
  
  .whatsapp-button .tooltip {
    display: none;
  }
}

portofolio line beqiraj
        :root {
            --primary-color: #2A5C42;
            --secondary-color: #F4A261;
            --background: #f8f9fa;
            --text-dark: #2d3436;
        }

        /* Base Styles */
        body {
            font-family: 'Inter', sans-serif;
            background: var(--background);
            color: var(--text-dark);
        }

        .portfolio-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        /* Filter Controls */
        .portfolio-filter {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin: 2rem 0;
        }

        .filter-btn {
            padding: 0.8rem 1.5rem;
            border: 2px solid var(--primary-color);
            border-radius: 30px;
            background: transparent;
            color: var(--primary-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-btn.active,
        .filter-btn:hover {
            background: var(--primary-color);
            color: white;
        }

        /* Masonry Grid */
        .masonry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            grid-auto-rows: masonry;
            gap: 1.5rem;
            grid-auto-flow: dense;
        }

        /* Portfolio Items */
        .portfolio-item {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .portfolio-item:hover {
            transform: translateY(-5px);
        }

        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Before/After Slider */
        .before-after {
            position: relative;
            height: 400px;
        }

        .before-after img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .after-image {
            width: 50%;
            overflow: hidden;
        }

        .slider-handle {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: white;
            cursor: col-resize;
            transform: translateX(-50%);
            z-index: 2;
        }

        .slider-handle::after {
            content: '↔';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: white;
            color: var(--primary-color);
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1.2rem;
        }

        /* Image Overlay */
        .image-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1.5rem;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .portfolio-item:hover .image-info {
            opacity: 1;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .masonry-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }



</style>