:root {
  --uranian-blue: #AFDBF5;
  --domride-red: #CE1126;
  --domride-blue: #002D62;
  --blue-10: #0976EB1A;
  --comment-blue: #473BF0;
  --crayon-blue: #1F75FE;
  --logo-blue: #002d64;
  --logo-red: #ce1127;

  /* New basic colors */
  --white: #ffffff;
  --black: #000000;
  --light-gray: #f5f5f5;
  --hover-gray: #e9ecef;
  --text-gray: #555555;
  --deep-blue: #292D53;
  --off-white: #FDFDFD;
  --dark-gray: #333333;
  --dark-blue: #1c4968;
  --medium-blue: #2d6a91;
  --light-gray-bg: #f0f0f0;
  --vibrant-blue: #0048BA;
  --gray-text: #818181;
  --medium-gray: #666;
  --primary-blue: #007bff;
  --success-green: #28a745;
  --flag-red: #CE1126;
  --color-text-dark: #222222;
  --darker-red: #b10f22;
  --clean-black: #111111;
  
}


/* Reset */
* {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Typography */
body {
  font-family: 'Roboto', 'Noto Sans Display', 'Comfortaa', sans-serif;
}

p, .custom-list p {
    color: var(--dark-gray);
    font-size: 1.125rem; /* 18px for small devices */
    line-height: 1.6;
    text-align: left; 
    font-weight: 500;
}

.top_white_text {
    color: var(--white);
}

h1 {
  font-family: 'Fira Sans', sans-serif;
  font-weight: 800;
}

h2, h3, h4, h5, h6 {
  margin-top: 2.375rem;
  font-family: 'DM Serif Display', serif;
}


.custom-list h4, .tab-text h4 {
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 39px;
  margin-top: 0.625em;
}


.dd-title-right {
  text-align: center;
}

.dd-title-lg {
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-family: 'Silkscreen', sans-serif;
  color: var(--white);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}

.crypto-list, .crypto-list li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.crypto-list {
  counter-reset: custom-counter;
}

.numbered-header {
  counter-increment: custom-counter;
  position: relative;
  padding-left: 50px;
  font-size: 18px;
  color: var(--dark-gray);
  margin: 0;
}

.numbered-header::before {
  content: counter(custom-counter);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.875rem;
  height: 1.875rem;
  background: url('/static/images/red_circle.svg') center/cover no-repeat;
  color: var(--white);
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.height70vh {
  min-height: 60vh;
}

/* Sections */

.ayuda {
  background-color: var(--light-gray);
}

.dd-driver-section {
  background: var(--blue-10);
}

.domride-section {
  background: var(--crayon-blue);
}

.section:nth-child(even) {
  background-color: var(--blue-10);
}

.section:nth-child(odd) {
  background-color: var(--white);
}

.dd-content-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.questions {
  font-weight: 700;
  line-height: 110%;
  margin: auto;
  padding: 2.375rem;
  text-align: center;
}

/* Buttons */
.dd-btn-dark {
  background: linear-gradient(to bottom right, var(--dark-blue), rgba(1, 13, 21, 0.9), var(--dark-blue));
  color: var(--white);
  font-weight: normal;
  transition: background-color 0.3s ease, font-weight 0.3s ease;
}

.dd-btn-dark:hover {
  background: linear-gradient(to bottom right, var(--medium-blue), rgba(1, 20, 33, 0.9), var(--medium-blue));
  font-weight: bold;
}

.btn_white {
  background-color: var(--off-white);
  border: none;
  border-radius: 0.625em;
  color: var(--black);
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  margin: auto;
}

/* Layout */
#mainpage {
  color: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: Verdana, Geneva, sans-serif;
}

#dd-large-bg, .dd-long-bg {
  background: url("/static/images/ur-fastcar-phonemap.png") center/cover no-repeat;
}

#dd-large-bg {
  background-attachment: fixed;
  min-height: 70vh;
}

.dd-long-bg {
  background-color: var(--light-gray);
  min-height: 60vh;
}

.dd-naveguemos {
  background: url("/static/images/ur-santo-domingo.jpg") center/cover no-repeat;
  background-color: var(--light-gray);
  height: 300px;
  position: relative;
}

.divider {
  height: 50px;
}

.wave-divider {
  background: linear-gradient(to bottom, var(--light-gray) 50%, var(--vibrant-blue) 50%);
  clip-path: path('M0,100 C300,150 600,50 900,100 L900,0 L0,0 Z');
  height: 120px;
}

/* Collapsibles */
.collapsible {
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  font-weight: bold;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 25px;
}

.active, .collapsible:hover {
  background-color: var(--white);
}

.collapsible:after {
  content: url("/static/images/ur-chevron-down.png");
  float: right;
  margin-left: 5px;
}

.active:after {
  content: url("/static/images/ur-chevron-up.png");
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* Overlay (Side Nav) */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 1.875rem;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: var(--gray-text);
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: var(--light-gray);
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* Footer */
.footer {
  background: linear-gradient(to bottom right, var(--dark-blue), rgba(1, 13, 21, 0.9), var(--dark-blue));
  color: var(--white);
}

/* Utilities */
.reliably_text {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}


.choosing_text {
  font-size: 1.006rem;
  line-height: 1.55rem;
  font-weight: 500;
  color: var(--white);
}

.dd-main-columns {
  width: 50px;
  height: 50px;
}

.dd-top-content {
  margin-bottom: 50px;
}

.dd-img, .dd-top-content, .dd-content, .dd-top-image {
  order: 1;
}

.dd-content, .dd-top-image {
  order: 2;
}

/* Animations */
.animate-section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Privacy List */
.privacy-list ol {
  counter-reset: item;
}

.privacy-list li {
  display: block;
}

.privacy-list li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

/* Image Movement */
.uno {
  width: 100%;
  position: relative;
}

.dd-img-container, .dd-img-container2 {
  height: 500px;
  background: center/cover no-repeat;
}

.dd-img-container2 {
  background-image: url("/static/images/urdvr_pgr_priority.jpg");
}

.dnketA {
  background: url("/static/images/domride_phone_frontView.png") center center no-repeat;
  background-size: 90% 100%;
  z-index: 2;
  position: absolute;
  inset: 0;
}

/* Layout structure */
.dd-ypPS {
  position: relative;
  z-index: 2;
}

.dd-treselements {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 8px 0 24px;
}

.vacio {
  width: 8.33333%;
  padding-right: 16px;
  height: 0.625em;
}

.tresmas {
  width: 83.3333%;
}

.hija {
  display: flex;
  align-items: flex-start;
}

.tresCenter {
  margin: 150px 64px 0;
  width: 390px;
  height: 600px;
  position: relative;
}

.tresImagen {
  width: 390px;
  height: 600px;
}

.tresLeft, .tresRight {
  flex: 1 1 0%;
}

.tresLeft {
  margin-top: 34.375rem;
  order: -1;
}

.tresRight {
  margin-top: 34.375rem;
}

.urComxContainer {
  width: 655px;
}

.process-icon {
    max-width: 100px;
    margin: 20px 0;
}

/* Techs sections */
.icon-item img {
    max-width: 80px;
    margin-bottom: 0.625em;
}

.dd_btn-success {
    background-color: var(--success-green); /* Default green */
    color: white;
    border: none;
    transition: all 0.3s ease-in-out;
}

.domride-section h1 {
  color: var(--white); /* You can define --white: #ffffff */
  font-size: 1.185rem; /* around 32px */
  text-align: center;
  margin-bottom: 1rem;
}

.domride-section p {
  color: var(--light-gray); /* Define --light-gray: #f0f0f0 */
  font-size: 1rem; /* 16px */
  text-align: center;
  max-width: 30rem;
  margin: 0 auto;
}

.ur-main-columns {
  width: 6.25rem; /* 100px */
  height: auto;
}

 .faq-section {
  padding: 4rem 1rem;
  background-color: var(--white);
}

.faq-header {
  text-align: center;
  margin-bottom: 2rem;
}

.faq-image {
  width: 6rem; /* 96px */
  margin-bottom: 1rem;
}

.faq-list {
  max-width: 700px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #dddddd;
  padding: 1rem 0;
}

.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--deep-blue)
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow {
  transition: transform 0.3s;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  color: #666;
  font-size: 1rem;
  padding-left: 1rem;
}

/* Opened state (you will add a class with JS) */
.faq-item.open .faq-answer {
  max-height: 200px;
}

.faq-item.open .arrow {
  transform: rotate(180deg);
}

.why_us_section_icon {
    margin-top: 0.5rem; /* or 8px */
      display: flex;
      justify-content: center;
      align-items: center;
      width: 3rem; /* a little bigger to help visually */
      height: 3rem;
      margin: 0 auto; /* Center the flex container horizontally */
      font-size: 2rem; /* you can tweak this */
}


 
.why_us_section_title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.625em;
    color: var(--white);
    text-align: center;
}

.faq-section {
  padding: 60px 0;
}

.faq-header h2 {
  font-size: 2rem;
}

.faq-header p {
  font-size: 1rem;
  color: #6c757d;
}

.faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item.open {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 18px 24px;
  font-size: 1.125rem;
  font-weight: 600;
  border: none;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: #eef1f4;
}

.arrow {
  transition: transform 0.3s ease;
  color: var(--flag-red);
}

.faq-item.open .arrow {
  transform: rotate(180deg);
}

.faq-answer {
  background: white;
  padding: 0 24px 18px 24px;
  display: none;
  font-size: 1rem;
  color: #555;
}

.faq-item.open .faq-answer {
  display: block;
}

.contact-form-cotainer {
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contact-form label {
    font-weight: 600;
    margin-bottom: 8px;
}

.contact-form .form-control {
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
}

.contact-form button {
    margin-top: 20px;
    font-size: 18px;
    padding: 0.625em;
    border-radius: 8px;
}

.contact-form .btn-success {
    background-color: #25d366;
    border: none;
}

.contact-form .btn-success:hover {
        background-color: #1ebe57;
}

.responsive-title {
        font-size: 5.5rem; /* Big on large screens */
        font-weight: 800; /* Extra bold for power */
        line-height: 1.1; /* Tight, not too much vertical space */
        letter-spacing: -1px; /* Slightly tighter letters for a premium feel */
        color: var(--color-text-dark); /* Darker color than plain black */
        text-transform: uppercase; /* Optional: makes it look stronger */
}

.dd-button-primary {
      background-color: var(--domride-red);
      color: var(--white);
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 0.5rem;
      font-weight: 700;
      font-size: 1rem; /* base size for mobile */
      cursor: pointer;
      transition: background-color 0.3s ease;
      text-align: center;
}

.dd-button-primary:hover {
      background-color: var(--darker-red); /* darker red for hover */
      color: var(--white);
}

.dd-button-secondary {
      background-color: var(--white);
      color: var(--domride-red);
      padding: 0.75rem 1.5rem;
      border: 2px solid var(--domride-red);
      border-radius: 0.5rem;
      font-weight: 700;
      font-size: 1rem; /* base size for mobile */
      cursor: pointer;
      transition: background-color 0.3s ease, color 0.3s ease;
      text-align: center;
}

.dd-button-secondary:hover {
      background-color: var(--domride-red);
      color: var(--white);
}


    .dd-top-section {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(to bottom right,var(--dark-blue),rgba(1,13,21,.9),var(--dark-blue));
        background-size: cover;
        background-position: center;
        width: 100%;
        padding: 0.625rem;
    }
    
    .dd-topPage-view {
        display: flex;
    	align-items: center;
    	width: 100%;
    	z-index: 100;
    }
    
    .dd-topPage-vi{
        display: flex;
    	flex-wrap: wrap;
    	width: 100%;
    	max-width: 1280px;
    	margin: 0px auto;
    	padding-right: 8px;
    	padding-left: 16px;
    }




@media only screen and (max-width: 600px) {
    /* For phones */
    .dd-collapsible {
        background-color: var(--white);
        color: var(--black);
        cursor: pointer;
        font-weight: bold;
        width: 100%;
        padding: 0.625em;
        border: none;
        text-align: left;
        outline: none;
    }
    
    .dd-collapsible:after {
        content: url("/static/images/ur-chevron-down.png");
        color: var(--black);
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    
    .dd-active, .dd-collapsible:hover {
      background-color: var(--white);
    }


    .dd-active:after {
      content: url("/static/images/ur-chevron-up.png");
    }
    
    .tresCenter {
            margin: 112px auto 0px;
        }

        .hija {
            display: block;
        }
        .vacio {
            width: 0px;
        }

        .tresLeft {
            margin-top: 1px;
            order: 2;
        }

        .tresRight {
            margin-top: 1px;
        }
        
        .urImgCx {
            width: 220px;
            height: 350px;
            position: relative;
            margin: 60px auto 0px;
        }
        
        .urTCsic {
            height: 280px;
        }
    
    .bar1, .bar2, .bar3 {
          width: 35px;
          height: 5px;
          background-color: var(--dark-gray);
          margin: 6px 0;
          transition: 0.4s;
    }
    
    .dd-nav {
        display: none;
    }
    
    .urComxContainer {
        width: 100%;
    }
    
    .dom_letter_0_5 {
        letter-spacing: 0.5px;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
    }
    
    .sidebar {
        padding: 20px;
        box-sizing: border-box;
        align-self: start;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
    
    /* Hide content for smaller devices */
    #show-content {
      display: none;
    }
    
    .toggle-row {
      border-bottom: 1px solid var(--light-gray);
      padding: 0.625em 0;
      cursor: pointer;
    }
    
    .toggle-icon {
      float: right;
      font-weight: bold;
    }
    
    .tab-text {
      margin-top: 0.625em;
      color: var(--text-gray);
    }
    
    .tab-text img {
        width: 100px;
        height: 100px;
        object-fit: contain; /* Ensures the image scales properly without distortion */
        margin: 0.625em auto; /* Centers the image */
    }
    
    h1 {
        font-size: 1.185rem;
    }
    
    .btn {
        margin-bottom: 1.875rem;
    }
    
    .why_us_section_title {
        font-size: 1.5rem;
    }
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
    
        .dd-content-section {
            min-height: 60vh; 
            display:flex; 
            flex-direction:column; 
            align-items: center;
        }
}

@media screen and (min-width: 769px){
    .urCoInDet {
        width: 0%;
    }
    
    .urEspVacio {
        width: 0px;
    }
    
    .urCoImDiC {
        padding-right: 16px;
    }
    

}

@media (min-width: 576px){
    .urEspVacio {
        width: 48px;
    }
}

  /* Display on phones and tablets (small and medium screens) */
@media (max-width: 768px) {
  .dd-nav {
        display: none;
    }
    
    .dd-nav-icon {
        display: inline-block;
        cursor: pointer;
    }
    
    
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: var(--dark-gray);
        margin: 6px 0;
        transition: 0.4s;
    }
    
       .dd-top-leftView {
        /* this contains the image */
        width: 100%;
    	order: 2;
    	padding-right: 16px;
    }
    
    .dd-top-rightview {
        width: 100%;
	    order: 1;
	    text-align: center;
	    margin-top: 20px;
    } 
    
    .urCoImDo {
        padding-left: 24px;
    }
    
    .urCoImDiC{
        
    }
    
    .urCoImDiFchx {
        
    }
    
    .urComxContainer {
        width: 100%;
    }

    .domqrX {
        display: none;
    }
    
    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        transform: translateY(-100%);
    }
    
    /* lyft */
    .jRdiUX {
        margin-right: -16px;
    }
    
    .logo_img_s {
        height: 60px;
        width: 60px;
    }
    
    h1 {
        font-size: 1.875rem;
    }
    
    .responsive-title {
        font-size: 1.8rem; /* Moderate on tablet/mobile */
        font-weight: 700; /* Slightly less thick on small screens */
        letter-spacing: -0.5px;
        text-transform: none; /* Back to normal case on mobile */
    }
    
    .dd-button-primary,
    .dd-button-secondary {
            font-size: 1.125rem; /* slightly bigger on tablets */
            padding: 1rem 2rem;
    }
    
    
}

/* Styles for screens 768px and wider, tablet */
@media only screen and (min-width: 768px) {

          /* For desktop: */
          .col-1 {width: 8.33%;}
          .col-2 {width: 16.66%;}
          .col-3 {width: 25%;}
          .col-4 {width: 33.33%;}
          .col-5 {width: 41.66%;}
          .col-6 {width: 50%;}
          .col-7 {width: 58.33%;}
          .col-8 {width: 66.66%;}
          .col-9 {width: 75%;}
          .col-10 {width: 83.33%;}
          .col-11 {width: 91.66%;}
          .col-12 {width: 100%;}
         
                .dd-content-section {
                    min-height: 70vh; 
                    display:flex; 
                    flex-direction:column; 
                    align-items: center;
                }
                
                .dd-title-right {
                    text-align: right;
                }
                
                .dom-title {
                    font-family: Outfit;
                    font-weight: 800;
                    font-size: 40px;
                    color: var(--dark-gray);
                }
                
                .dd-title {
                    font-size: 5vw;
                }
                
                .dd-title-medium {
                   font-size: 2.375rem;
                   text-align: center;
        
                }
                
            .dd-title-left, .dd-paragraph-left {
                margin-left: 50px;
                margin-right: 50px;
            }  
            
            .dd-title-lg {
               font-size: 1.375rem;   /* 22px */
                line-height: 1.875rem; /* 30px */
            }
            .dd-naveguemos {
                background-image: url("/static/images/ur-santo-domingo.jpg");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }
            
            /* image ovelapping */
            .dd-hero-image {
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-10%, -20%);
                color: var(--white);
                width: 250px;
                height: 50vh;
            }
            
            h1, h2, h3, h4, h5, h6 {
                margin-top: auto;
            }
            
            .height70vh {
                min-height: 60vh;
            }
            
            .driver2 {
                background: hsla(210, 100%, 19%, 0.12);
            }
            
            .dd-img, .dd-top-content {
                order: 2;
            }
        
            .dd-content, .dd-top-image {
                order: 1;
            }
            
            .dd-title-lg {
                font-size: 2.125rem; /* 50px ÷ 16 = 3.125rem */
                line-height: 2.55rem; /* 60px ÷ 16 = 3.75rem */
                position: relative;
            }
        
            
            .underline {
                position: relative;
                display: inline-block;
            }
            
            .underline::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -5px;
                height: 0.625em;
                background-image: url('/static/images/underline_img.svg');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                z-index: -1;
            }
            
            .urComx {
                font-size: 36px;
                line-height: 44px;
            }
            
            .urParx {
               font-size: 16px; 
            }
            
        
            
            .dd-top-leftView {
                /* this contains the image */
                width: 41.333%;
            	order: 1;
            	padding-right: 16px;
            }
            
            .dd-top-rightview {
                width: 58.6667%;
        	    order: 2
            }
            
            .guide {
                
            }
            
            .guideimg {
                
            }
            
            .leftTopTitleCt {
                height: 100%;
            	display: flex;
            	flex-direction: column;
            	-webkit-box-pack: center;
            	justify-content: center;
            }
            
            .urContentImg {
                margin-top: 80px;
                margin-bottom: 80px;
            }
            
            .urCoImDo {
               display: flex;
               flex-wrap: wrap;
               width: 100%;
               max-width: 1280px;
               margin: 0px auto;
               padding-right: 8px;
               padding-left: 16px;
            }
            
            
            .urCoImDiFchxEmp {
                padding-right: 16px; 
                width: 8.33333%;
        	    order: 1;
            }
            
            .urCoImDtC{
                padding-right: 16px;
                width: 41.6667%;
                order: 2;
            }
            
            .urCoInDe{
                padding-right: 16px; 
                width: 8.33333%;
        	    order: 3;  
            }
            
            .urCoImDiC{
               width: 33.33333%; 
               order: 4; 
            }
            
            
            .urCoImDiFchx {
               max-width: 100%;
               display: flex;
               -webkit-box-align: center;
               align-items: center;
               -webkit-box-pack: center;
               justify-content: center;
            }
            
            .urCoImDtCFchx {
                display: flex;
                height: 100%;
            }
            
            
            .urCoImDtCFchxCh {
                margin-top: auto;
                margin-bottom: auto;
                text-align: left;
            }
            
            .urCoInDet {
                padding-right: 16px;
                width: 8.33333%;
                order: 1;
            }
            
            .urEspVacio {
                flex: 0 0 auto;
                visibility: hidden;
                display: inline-block;
                width: 48px;
            }
            
            .urImgContent {}
            
            .dd-link {
                color: var(--black);
                font-family: verdana;
                font-size: 20px;
                text-decoration: underline;
                font-weight: bold;
            }
            
            .domqrX {
                height: 300px;
                margin-left: 1.875rem;
            }
            
            .dombtnX {
                display: none;
            }
            
                
            .sidebar {
                position: relative;
                width: 100%;
                height: auto;
            }
        
            .content {
                width: 100%;
                margin-left: 0;
            }
        
            .toggle-sidebar {
                display: block;
                margin: 0.625em;
                padding: 0.625em;
                background-color: var(--dark-gray);
                color: var(--white);
                border: none;
                cursor: pointer;
            }
        
            .sidebar.active {
                transform: translateY(0);
            }

}
/* Tablet-specific styles */
@media (min-width: 768px) and (max-width: 1024px) {
          body {
            font-size: 1.125rem; /* 18px */
          }
          
          .choosing_text {
              font-size: 1.675rem;
              line-height: 1.975rem;
            }
}

/* Landscape mobile styles */
@media (max-width: 768px) and (orientation: landscape) {
          .height70vh,
          .dd-top-section {
            min-height: auto;
            height: auto;
            padding: 6rem 1rem;
          }
}

/* Desktop styles */
@media (min-width: 1025px) {
          .height70vh,
          .dd-top-section {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rem 1rem;
          }
        
          .height70vh {
            min-height: 60vh;
          }
        
          .dd-top-section {
            min-height: 70vh;
            flex-direction: column;
          }
        
          .dd-title-lg {
            font-size: 3rem; /* 48px */
            line-height: 3.125rem; /* 50px */
          }
        
          .why-choose-us {
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin: 3.125rem 0; /* 50px */
          }
        
          .column {
            width: 30%;
            padding: 1.25rem; /* 20px */
          }
        
          .icon {
            font-size: 2.5rem; /* 40px */
            color: var(--vibrant-blue);
            margin-bottom: 0.9375rem; /* 15px */
          }
        
          .title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 0.625rem; /* 10px */
            color: var(--white);
          }
        
          .choosing_text {
            font-size: 1.275rem;
            line-height: 1.775rem;
            font-weight: 500;
            color: var(--white);
          }
        
          ol.crypto-list,
          .custom-list {
            padding-left: 2.5rem; /* 40px */
            counter-reset: list-counter;
          }
        
          .custom-list li {
            display: flex;
            align-items: center;
            gap: 0.9375rem; /* 15px */
            position: relative;
            margin: 0.625rem 0; /* 10px */
            list-style: none;
          }
        
          ol.crypto-list li {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            position: relative;
            margin: 0.625rem 0; /* 10px */
            list-style: none;
          }
        
          ol.crypto-list li::before {
            counter-increment: list-counter;
            content: counter(list-counter);
            background-color: red;
            color: var(--white);
            border-radius: 50%;
            width: 1.875rem; /* 30px */
            height: 1.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: -2.5rem; /* -40px */
          }
        
          .crypto-list h4 {
            font-size: 2.375rem; /* 38px */
            line-height: 2.4375rem; /* 39px */
          }
        
          .dd-nav-icon {
            display: none;
          }
        
          #show-content {
            transition: opacity 0.3s ease-in-out;
          }
        
          .align-items-start .col {
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
            padding: 0 1.25rem; /* 20px */
          }
        
          .align-items-start .col.active-column {
            background-color: var(--light-gray);
            color: var(--primary-blue);
            border-radius: 0.3125rem; /* 5px */
            padding: 0.625rem; /* 10px */
          }
        
          .align-items-start .col:hover {
            background-color: var(--light-gray);
            cursor: pointer;
          }
        
          .column-divider {
            position: relative;
          }
        
          .column-divider::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 0.0625rem; /* 1px */
            background-color: var(--light-gray);
          }
        
          .align-items-start .col:first-child::before {
            display: none;
          }
        
          .desc_title,
          .desc_title-5 {
            font-family: 'Fira Sans', sans-serif;
            font-size: 3.625rem; /* 58px */
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
          }
        
          .desc_content {
            font-size: 1.5rem; /* 24px */
            text-align: center;
            padding: 0 1rem; /* 16px */
            max-width: 76.75rem; /* 1228px */
            margin: 0 auto 2.375rem; /* 38px */
          }
        
          .row.align-items-start > .dd-driver-section:first-child {
            border-top-left-radius: 0.9375rem; /* 15px */
            border-bottom-left-radius: 0.9375rem;
          }
        
          .row.align-items-start > .dd-driver-section:last-child {
            border-top-right-radius: 0.9375rem; /* 15px */
            border-bottom-right-radius: 0.9375rem;
          }
        
          .development-process,
          .zigzag-section {
            padding: 3.75rem 1.25rem; /* 60px 20px */
          }
        
          .development-process {
            background-color: var(--blue-10);
          }
        
          .section-title {
            font-size: 2.5rem;
            color: var(--vibrant-blue);
            margin-bottom: 1.25rem; /* 20px */
          }
        
          .why_us_section_title {
            font-size: 2.5rem;
            color: var(--white);
            margin-bottom: 1.25rem; /* 20px */
          }
        
          .section-subtitle {
            font-size: 1.2rem;
            margin-bottom: 2.375rem; /* 38px */
            color: var(--text-gray);
          }
        
          .development-process h3 {
            font-size: 1.8rem;
            color: var(--dark-gray);
            margin-bottom: 0.9375rem; /* 15px */
          }
        
          .development-process p {
            color: var(--medium-gray);
          }
        
          .col-md-6 {
            padding: 0.625rem; /* 10px */
          }
        
          .row {
            display: flex;
            align-items: center;
            margin-bottom: 2.375rem; /* 38px */
          }
        
          .text {
            padding: 1.25rem; /* 20px */
          }
        
          /* Scroll animation for images */
          .ur-img img,
          .left-bg-img img {
            opacity: 1;
            transform: translateX(6.25rem); /* 100px */
            transition: transform 0.8s ease-out, opacity 0.8s ease-out;
          }
        
          .left-bg-img img {
            transform: translateX(-6.25rem); /* -100px */
          }
        
          section img.showing_img {
            opacity: 1;
            transform: translateX(0);
          }
        
          p, .custom-list p {
            font-size: 1.5rem; /* 24px */
            margin-bottom: 1.5rem;
            text-align: justify;
          }
          .dd-button-primary,
          .dd-button-secondary {
            font-size: 1.25rem; /* bigger on desktop */
            padding: 1.25rem 2.5rem;
          }
          
}


/* =========================================================================================New rules===========================================================*/


.dd-conductor-content {
      max-height: 0;
      overflow: hidden;
      padding: 0 0;
      transition: max-height 0.3s ease, padding 0.3s ease;
}

/* If the parent is active (like when clicked), expand it */
.active .dd-conductor-content {
      max-height: 20rem; /* Adjust this height if needed */
      padding: 0.5rem 0;
}

.tech-section {
  padding: 4rem 0;
}

.bg-alt-1 {
  background-color: var(--white);
}

.bg-alt-2 {
  background-color: var(--blue-10);
}

.icon-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.icon-item {
  width: 6rem;
  height: 6rem;
  background-color: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  transition: transform 0.3s;
}

.icon-item img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.icon-item p {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--blue-dark);
}

.icon-item:hover {
  transform: scale(1.1);
}


.icon-circle-container {
  position: relative;
  width: 15rem;
  height: 15rem;
  margin: 2rem auto;
}

.icon-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.icon-item.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  margin: -2.5rem; /* center each icon */
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s;
}

.icon-item.orbit img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.icon-item.orbit p {
  font-size: 0.7rem;
  margin-top: 0.3rem;
  color: var(--blue-dark);
  font-weight: bold;
}

/* Positioning icons around the circle */
.orbit-1 { transform: translate(-50%, -100%); }
.orbit-2 { transform: translate(50%, -50%); }
.orbit-3 { transform: translate(50%, 50%); }
.orbit-4 { transform: translate(-50%, 50%); }

/* Hover effect */
.icon-item.orbit:hover {
  transform: scale(1.2) translate(-50%, -50%);
  z-index: 2;
}

/* pricing/static/pricing/style.css */
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    border-radius: 12px; /* More modern */
    overflow: hidden; /* Make rounded corners apply to header and body */
    background-color: var(--white); /* Default */
}

.card:hover {
    transform: translateY(-0.625em);
}

.card-header {
    background-color: var(--domride-blue); /* Now full solid blue */
    color: var(--white);
    padding: 1rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.card-body {
    background-color: var(--blue-10);
    padding: 2rem;
}

.bg-red {
    background-color: var(--flag-red);
    color: var(--white);
}

.card-body p {
    text-align: left;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.card-body p {
    text-align: left;
    margin-bottom: 0.75rem;
    line-height: 1.6;
    color: var(--dark-gray) /* softer dark gray instead of pure black */
}

.feature-list {
    list-style: none; /* remove default bullets */
    padding-left: 0; /* remove extra left padding */
}

.feature-list li {
    position: relative;
    padding-left: 2rem; /* space for the checkmark */
    margin-bottom: 0.5rem;
}

.feature-list li::before {
    content: '✔️'; /* your checkmark */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--flag-red); /* or a Dominican flag color */
    font-size: 1.2rem;
    line-height: 1.2;
}

.navbar {
    font-family: 'Poppins', sans-serif;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.nav-link {
    color: #212529;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--nav-two); /* Divelappdom blue */
}

.btn-outline-primary {
    border-color: var(--nav-two);
    color: var(--nav-two);
}

.btn-outline-primary:hover {
    background-color: var(--nav-two);
    color: var(--white);
}

/* Nav links */
.nav-link {
    color: #212529;
    font-weight: 500;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    left: 0;
    bottom: -4px;
    background-color: var(--domride-blue);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--domride-blue);
}

.nav-link:hover::after {
    width: 100%;
}

/* Button */
.btn-primary-nav {
    background-color: var(--domride-red);
    border-color: var(--domride-red);
}

.btn-primary:hover {
    background-color: var(--domride-blue);
    border-color: var(--domride-blue);
}

/* Mobile hamburger bars */
.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(10, 77, 162, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

h1 {
    font-size: 1.185rem
}

.dd-display-3 {
    font-size: 2.185rem;
}

/* Components */
.dd-title, .font-weight-bold {
  font-size: 1.185rem;
  text-align: center;
  padding-top: 0.625em;
}

.dd-privacy-title {
   font-size: 1.185rem;
   padding-top: 0.625em;
}

/* General footer link styles */
a.dd-footer-link {
  color: var(--white);
  text-decoration: none;
  position: relative;
  font-size: 20px;
  font-weight: 500;
}

a.dd-footer-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: height 0.3s ease-in-out;
}

/* Global hover for all dd-footer-links */
a.dd-footer-link:hover {
  color: var(--gray-text); /* light gray for better contrast */
}

/* Special hover effect for the underline animation */
a.dd-footer-link:hover::after {
  height: 5px;
}

.navbar-nav .nav-link img:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.dd-privacy-title {
    
}

.crypto-list {
  counter-reset: list-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}

.crypto-list li {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 2rem;
}

.crypto-list li::before {
  counter-increment: list-counter;
  content: counter(list-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-weight: bold;
  font-size: 18px;
  margin-right: 1rem;
  flex-shrink: 0;
}

.text-content {
  display: flex;
  flex-direction: column;
}

.text-content h4 {
  margin: 0;
  font-size: 1.5rem;
}

.text-content p {
  margin: 0.5rem 0 0 0;
  font-size: 1.125rem;
  color: var(--dark-gray);
}

.dd-button-primary-top {
  background: white;
  color: var(--domride-red);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: color 0.6s ease;
}

.dd-button-primary-top::before {
  content: "";
  position: absolute;
  top: -50%; /* bigger now */
  left: -50%;
  width: 200%;
  height: 200%; /* taller now */
  background-color: var(--domride-red);
  z-index: 0;
  transform: skewX(-20deg) scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.dd-button-primary-top span {
  position: relative;
  z-index: 1;
}

.dd-button-primary-top:hover::before {
  transform: skewX(-20deg) scaleX(1);
}

.dd-button-primary-top:hover {
  color: white;
}

/* Overlay for darkening the background */


.overlay-form {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.overlay-form.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}


/* Contact form */
/* This is for the dark overlay background */
.overlay-form {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

.contact-form-v2 {
  display: none;
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background-color: white;
  padding: 2rem;
  z-index: 1000;
  transition: top 0.4s ease;
}

.contact-form-v2 form {
  display: flex;
  flex-direction: column;
}

.contact-form-v2 input,
.contact-form-v2 textarea {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 0.3rem;
  border: 1px solid #ccc;
}

.contact-form-v2 button {
  padding: 0.8rem;
  border: none;
  background-color: var(--domride-red);
  color: white;
  border-radius: 0.3rem;
  cursor: pointer;
}

.contact-form-v2 button:hover {
  background-color: darkred;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 999;
}

#contactForm {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  z-index: 1000;
  transition: top 0.4s ease;
}

.crypto-list-x li {
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  transform: translateY(40px);
}

.crypto-list-x li.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal on scroll */
.reveal-on-scroll-x {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.5s ease;
}
.reveal-on-scroll-x.visible {
  opacity: 1;
  transform: translateY(0);
}

.card {
    border-radius: 16px;
}

h1.contact-5 {
    font-weight: 700;
    color: var(--clean-black); /* clean black */
    font-family: 'Poppins', sans-serif;
}

.form-label {
    font-weight: 600;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    border-radius: 0.5rem;
}

.card.shadow-sm {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border-radius: 1rem;
    background-color: #ffffff; /* still white for form area */
}


h1.display-6 {
    font-weight: 700;
    color: var(--clean-black); /* clean black */
    font-family: 'Poppins', sans-serif;
}

.form-floating-group {
  position: relative;
}

.form-control-x {
    background-color: transparent !important;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #ccc; /* Optional: cleaner underline */
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}


.form-control-floating {
  width: 100%;
  padding: 0.75rem 0.5rem 0.25rem 0.5rem;
  border: none;
  border-bottom: 1px solid #ccc;
  background: transparent;
  outline: none;
  font-size: 1rem;
}

.form-control-floating:focus {
  border-bottom: 2px solid #007bff;
}

.form-floating-group label {
  position: absolute;
  top: 50%;
  left: 0.5rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #999;
  transition: 0.2s ease;
  pointer-events: none;
  background-color: #fff;
  padding: 0 0.25rem;
}

.form-control-floating:focus + label,
.form-control-floating:not(:placeholder-shown) + label {
  top: -0.6rem;
  left: 0.4rem;
  font-size: 0.75rem;
  color: #000;
}

.floating-input {
    background-color: transparent !important;
    box-shadow: none;
}


.form-control:focus {
    outline: none;
    box-shadow: none;
    border-color: #000;
}




/*======================================================================PHONES===============================================*/
@media (max-width: 575.98px) {
  /* Styles for phones */
    /* 🎨 Link styles inside accordion */
    .dd-conductor-content .dd-footer-link {
          color: var(--vibrant-blue);
          text-decoration: none;
    }

    .dd-conductor-content .dd-footer-link:hover {
      color: var(--dominican-red);
      text-decoration: underline;
    }

    /* Enable collapsible click event on small screens */
    .dd-collapsible:not(.disabled) {
        cursor: pointer;
    }
    
    .dd-conductor-content .dd-footer-link {
    color: var(--vibrant-blue);
    text-decoration: none;
  }

  .dd-conductor-content .dd-footer-link:hover {
    color: var(--dominican-red);
    text-decoration: underline;
  }
}

/*======================================================================small devices===============================================*/
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Styles for small devices */
        /* 🎨 Link styles inside accordion */
    .dd-conductor-content .dd-footer-link {
          color: var(--vibrant-blue);
          text-decoration: none;
    }

    .dd-conductor-content .dd-footer-link:hover {
      color: var(--dominican-red);
      text-decoration: underline;
    }

    /* Enable collapsible click event on small devices */
    .dd-collapsible:not(.disabled) {
        cursor: pointer;
    }
    
    .dd-conductor-content .dd-footer-link {
    color: var(--vibrant-blue);
    text-decoration: none;
  }

  .dd-conductor-content .dd-footer-link:hover {
    color: var(--dominican-red);
    text-decoration: underline;
  }
}

/*======================================================================TABLETS===============================================*/
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Styles for tablets */
  .dd-conductor-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .dd-conductor-content .dd-footer-link {
      color: var(--white);
      text-decoration: none;
    }

  /* Disable collapsible click event on tablets */
  .dd-collapsible.disabled {
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Make background transparent for larger screens */
  .dd-collapsible {
    background-color: transparent !important;
  }
  
    h1, .dd-title, .font-weight-bold, .dd-privacy-title {
      font-size: 2rem;
  }
  
    .dd-display-3 {
        font-size: 2.785;
    }
}


/*======================================================================DESKTOPS===============================================*/
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Styles for desktops */
  .dd-conductor-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .dd-conductor-content .dd-footer-link {
    color: var(--white);
    text-decoration: none;
  }

  /* Disable collapsible click event on desktops */
  .dd-collapsible.disabled {
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Make background transparent for desktops */
  .dd-collapsible {
    background-color: transparent !important;
  }
  
    h1, .dd-title, .font-weight-bold, .dd-privacy-title {
      font-size: 3rem;
    }
    
    .dd-footer-column h6 {
        font-size: 1.375rem;
    }
    
    .dd-conductor-content .dd-footer-link {
    color: var(--white);
    text-decoration: none;
  }
  
  .crypto-list {
  counter-reset: list-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}

.crypto-list li {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 2rem;
}

.crypto-list li::before {
  counter-increment: list-counter;
  content: counter(list-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-weight: bold;
  font-size: 18px;
  margin-right: 1rem;
  flex-shrink: 0;
}

.text-content {
  display: flex;
  flex-direction: column;
}

.text-content h4 {
  margin: 0;
  font-size: 1.5rem;
}

.dd-display-3 {
    font-size: 4.15rem;
    font-weight: 300;
    line-height: 1.2;
}

.text-content p {
  margin: 0.5rem 0 0 0;
  font-size: 1rem;
  color: #555;
}

.dd-button-primary {
  background: white; /* Start with white background */
  color: var(--domride-red); /* Text color is your red */
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--domride-red); /* nice border for structure */
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden; /* Important for inner animation */
  transition: color 0.4s ease;
}

/* Create the "growing background" effect */
.dd-button-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background-color: var(--domride-red);
  z-index: 0;
  transition: width 0.4s ease;
  border-radius: 0.5rem; /* match parent */
}

/* Text should stay above the growing background */
.dd-button-primary span {
  position: relative;
  z-index: 1;
}

/* Hover Effect */
.dd-button-primary:hover::before {
  width: 100%;
}

.dd-button-primary:hover {
  color: white;
}


}

/*======================================================================LARGE SCREENS===============================================*/
@media (min-width: 1200px) {
  /* Styles for very large screens */
  .dd-conductor-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .dd-conductor-content .dd-footer-link {
    color: var(--white);
    text-decoration: none;
  }

  /* Disable collapsible click event on large screens */
  .dd-collapsible.disabled {
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Make background transparent for very large screens */
  .dd-collapsible {
    background-color: transparent !important;
  }
  
  h1, .dd-title, .font-weight-bold,.dd-privacy-title {
      font-size: 3rem;
  }
  
  .dd-footer-column h6 {
        font-size: 1.975rem;
    }
    
    .dd-conductor-content .dd-footer-link {
        color: var(--white);
        text-decoration: none;
    }
    
    .crypto-list {
  counter-reset: list-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}

.crypto-list li {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 2rem;
}

.crypto-list li::before {
  counter-increment: list-counter;
  content: counter(list-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-weight: bold;
  font-size: 18px;
  margin-right: 1rem;
  flex-shrink: 0;
}

.text-content {
  display: flex;
  flex-direction: column;
}

.text-content h4 {
  margin: 0;
  font-size: 2.5rem;
}
.dd-display-3 {
    font-size: 4.15rem;
    font-weight: 300;
    line-height: 1.2;
}

.text-content p {
  margin: 0.5rem 0 0 0;
  font-size: 1rem;
  color: #555;
}

}