@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


body { font-family: "Montserrat", sans-serif;} 
/* Customizing the primary button */
.btn-primary {
    background-color: rgb(252, 64, 30);
    border-color: rgb(252, 64, 30);
    color: white;
    text-transform: uppercase; /* Capitalized text */
    font-weight: 300; /* Thinner text */
    padding: 0.7rem 1.8rem;
}

a {text-decoration: none; color: rgba(33, 44, 101, 1); } 

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: rgb(226, 57, 27);
    border-color: rgb(226, 57, 27);
    color: white;
}

/* Customizing the info button */
.btn-info {
    background-color: rgba(33, 44, 101, 1);
    border-color: rgba(33, 44, 101, 1);
    color: white;
    text-transform: uppercase; /* Capitalized text */
    font-weight: 300; /* Thinner text */
    padding: 0.7rem 1.8rem;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background-color: rgba(30, 39, 89, 1);
    border-color: rgba(30, 39, 89, 1);
    color: white;
}


/* Customizing the primary elements */
.bg-primary,
.border-primary {
    background-color: rgb(252, 64, 30) !important;
    border-color: rgb(252, 64, 30) !important;
}

.text-primary { color: rgb(252, 64, 30) !important; }


/* Customizing the info elements */
.bg-info,
.border-info {
    background-color: rgba(33, 44, 101, 1) !important;
    border-color: rgba(33, 44, 101, 1) !important;
}

.text-info { color: rgba(33, 44, 101, 1) !important; } 

/* Customizing the secondary elements */

.bg-secondary,
.border-secondary {
    background-color: rgba(30, 39, 89, 1) !important;
    border-color: rgba(30, 39, 89, 1) !important;
}

.navbar-nav a.nav-link { 
    text-transform: uppercase; /* Capitalized text */
    font-weight: 500; /* Thinner text */
    color: white;
    font-size: 0.8rem;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

@media (min-width: 1200px) {
    .navbar-nav {
        margin-left: -1.5rem;
    }
    .navbar-secondary.sticky-top { z-index: 99!important;}
    
    .navbar-secondary  .dropdown-item:focus,  .navbar-secondary  .dropdown-item:hover {
        color: white;
         background-color: rgb(226, 57, 27);
        border-color: rgb(226, 57, 27);
    }
    
}

@media (max-width: 1200px) {
    .navbar-secondary {
        padding-top: 0; padding-bottom: 0;
    }
    .navbar-toper .offcanvas {overflow: auto!important; }
    
    .navbar-secondary .offcanvas {overflow: auto!important; }
    
    
    .navbar-secondary .navbar-nav a.nav-link {color: black;}
    
    
    .navbar-secondary .dropdown-menu-primary { background-color: white;  border: none;}
    .navbar-secondary .dropdown-menu-primary a {color: black; padding-top: 10px; padding-bottom:10px; }
    .navbar-secondary .dropdown-menu-primary a:hover, 
    .navbar-secondary .dropdown-menu-primary a:focus {color: red; padding-top: 10px; padding-bottom:10px; }
    
    
    .navbar-secondary  .dropdown-item:focus,  .navbar-secondary  .dropdown-item:hover {
    color: rgb(226, 57, 27);
     background-color: white;
    border-color: white;
}

}


.navbar-toggler-main {border-radius: 100px; background-color: rgb(252, 64, 30) !important; color: #fff;}

.navbar-toggler-secondary {cursor: pointer; color: #fff!important; border: none;padding: 0;}

.navbar-toggler-secondary  .navbar-toggler-icon {color: white!important;}
 

.grecaptcha-badge { opacity:0;}

.dropdown-menu-primary { background-color: rgb(252, 64, 30); font-size: 0.9em;}
.dropdown-menu-primary a {color: white; padding-top: 10px; padding-bottom:10px;}

.dropdown-menu-info { background-color: rgb(33, 44, 101); font-size: 0.9em; border: none;}
.dropdown-menu-info a {color: white; padding-top: 10px; padding-bottom:10px;}




.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: rgb(226, 57, 27);}


.dropdown-important a {text-decoration: none; color: white;}
.dropdown-important .overtitle {font-size: 0.9em; font-weight: 300; text-transform: uppercase;}
.dropdown-important .subtitle {font-size: 0.9em; font-weight: 300; color: rgba(255,255,255,0.7);}


.social-network {font-size: 36px; color: white;}
.social-network a {color: white!important;} 

.main-heading .display-4, .main-heading .display-5 {font-weight: 600;} 
.main-heading .display-4:after {  content: "\00A0\2014";}
.main-heading .display-5 strong {color:   rgb(252, 64, 30); font-weight: 600;}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6  {font-weight: 600;}

.copyright {font-size: 0.9em;}
a.linked-white {color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.8); }
a.linked-white:hover {color: rgb(252, 64, 30); text-decoration: none; border-bottom: 1px solid rgba(252, 64, 30,0.8); }


.main-prod { 
    position: relative;
    min-height:18rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size 0.5s ease;
    
}


.main-prod .cover-block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%); /* Gradient from 50% to 30% */
    display: flex;
    color: white; /* Optional: text color for content */
    /* Additional styles for overlay content */
}

.big-cover { 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background-image: url('../images/city.jpg');
    border-radius: 25px;
    opacity: 0.15;
    z-index: 0;
}

.main-prod .lead { 
    position: relative; 
    font-weight: 800;
    z-index: 999;
}


.main-prod-avia { 
    background-image: url('/files/ac2024/images/plane.jpeg');
} 
.main-prod-charter { 
    background-image: url('/files/ac2024/images/jet.jpg'); 
} 
.main-prod-lowcost { 
    background-image: url('/files/ac2024/images/cabin.jpg'); 
} 
.main-prod-hotel { 
    background-image: url('/files/ac2024/images/bed.jpg'); 
    min-height:37.5rem;
} 

@media (max-width: 768px) { 
    .main-prod-hotel { min-height:18rem; } 
} 

.main-prod-train { 
    background-image: url('/files/ac2024/images/train.jpg'); 
} 
.main-prod-insurance { 
    background-image: url('/files/ac2024/images/umbrella.jpg'); 
} 


svg#bigTriangleColor {
  pointer-events: none;
  display: block;
}

#bigTriangleColor path {
  fill: white;
  stroke: white;
  stroke-width: 2;
}




h1 {color: #212c65; text-transform: uppercase; font-weight: 600; margin: 4rem 0;}


h2, .section-title {
  font-size: 1.9rem;
  font-weight: 700;
  padding: 2rem 0;
  color: #212c65;
  position: relative;
  text-align: center;
  text-transform: uppercase;
}



.h3, h3 {
  font-size: 1.2rem;
  color: #212c65;
  font-weight: 600;
  margin-bottom: 1.3em;
}


.main-linked {color: white; border-bottom: 1px solid rgba(255,255,255,0.3);}

#services a {color: white;}


#advantages .circle {
    width: 40%;
    padding-bottom: 40%;
    border-radius: 70%;
    margin: 0 auto 20px;
    background-color:  rgb(252, 64, 30) !important;
    position: relative;
}


#advantages .circle img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: #fff;
    width: 80px;
    filter: brightness(10000%);
}

#topnav .active, #topnav .active:hover, #topnav .active:focus {border-bottom: 5px solid #7ebde8; border-top: 1px solid #ddd;border-left: 1px solid #ddd; border-right: 1px solid #ddd;background: #f7f7f7;color: #333;}
#line-nav a:hover, a:focus { background: none; }


#advantages #hands {
    background: url(https://colibri.travel/assets/about/images/advantages-bg.jpeg) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.btn-outline-secondary {border-color: var(--bs-border-color); }


.select2-container--default .select2-selection--single {
  border-color: var(--bs-border-color)!important; 
}



.uptitle {
    color: #212c65;
    text-transform: uppercase;
    font-size: 14px;

    font-weight: 600;
  
    letter-spacing: 2.5px; }
.card {border: none;}

.card:hover {box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;}