:root {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
}

.navbar {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* If needed, you can also directly target the .navbar-toggler-icon class */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
}

.callButton {
	background-color: #fff;
	border-radius: 4px;
	padding: 8px 32px;
	display: flex!important;
	color: black!important;
	align-items: center;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
	transition: 0.3s ease-in-out;
}

.callButton:hover {
	background-color: #f2f2f2;
}

.callUKTeam {
	color: black!important;
	display: none;
}

.phoneStyling {
	margin-right: 12px;
}

.fa-phone:before {
	font-size: 28px;	
}

#headerContainer {
	padding: 0 32px;
}

@media (max-width: 1320px) {
	#headerContainer {
		padding: 0 16px;
	}
	.callButton {
		padding: 8px 14px;
	}
	.phone-number {
		font-size: 20px!important;
	}
	.fa-phone:before {
	font-size: 22px;	
}
}

@media (max-width: 767px) {
  /* Your mobile-specific CSS styles go here */
	
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Your iPad-specific CSS styles go here */
	#headerContainer {
        padding: 0!important;
    }
	.call-info {
		padding-right: 16px!important;
	}
	.navbar-brand {
		padding-left: 16px!important;
	}
	.phone-number {
		font-size: 16px!important;
	}
	.nav-item {
		padding-right: 4px!important;
		padding-left: 4px!important;
	}
}

@media (min-width: 1024px) and (max-width: 1200px) {
	/* breakdance section  */
    #headerContainer {
        padding: 0!important;
    }
	.call-info {
		padding-right: 16px!important;
	}
	.navbar-brand {
		padding-left: 16px!important;
		margin-right: 12px!important;
	}
	.phone-number {
		font-size: clamp(16px, 2vw, 20px)!important;
	}
	.phoneStyling {
		display: none!important;
	}
	.nav-item {
		padding-right: 4px!important;
		padding-left: 4px!important;
	}
   
}

@media (max-width: 480px) {
    /* breakdance section  */
    
	
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); /* adjust the opacity as needed */
    display: none;
    z-index: 1; /* ensure it's below the dropdown and above other content */
    transition: 0.3s ease-in;
}

.coverMeLogo {
   font-family: 'acumin-pro-wide', 'sans-serif'!important;
   font-weight: 900;
   font-size: 26px;
}

.navbar-brand {
    font-family: 'acumin-pro-wide', 'sans-serif'!important;
    font-weight: 900;
	padding-bottom: 0!important;
}


#mainNavbar {
    background-color: #00B1E7!important;
}

.phone-number {
    font-size: 25px;
    font-weight: bold;
    color: black;
    font-family: 'quicksand', 'sans-serif';
} 

.nav-item {
    padding-right: 17px;
    padding-left: 17px;
    font-weight: bold;
    font-family: 'quicksand', 'sans-serif';
    /* color: white!important; */
}

.nav-link {
    color: #FFFFFF!important;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block!important;
}

.navbar-wrapper {
    position: relative;
    width: 100%;
    z-index: 2;
}


.dropdown-header {
    font-size: 18px!important;
    font-weight: bold!important;
    font-family: 'quicksand', 'sans-serif';
    color: #004766!important;
    border-bottom: 1px solid #004766;
    padding-bottom: 12px!important;
}

.dropdown-item {
    padding-left: 4px!important;
    padding-bottom: 4px!important;
    margin-bottom: 4px!important;
    align-items: center!important;
    transition: transform 0.2s ease, background-color 0.2s ease;
    color: #004766!important;
    font-family: 'quicksand', 'sans-serif';
/* 	text-wrap: pretty!important; */
}

.dropdown-item:hover {
    background-color: #D8F0F8!important;
    transform: translateX(6px);
}


#menuWrapper {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background-color: transparent;  /* so that it doesn't interfere with the menus */
    z-index: 999;
    display: none;
}

#insuranceMenu, #guidesToolsMenu {
    position: relative;
    display: none;
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 0!important;
    padding-bottom: 4rem!important;
    /* border-bottom: 1px solid black; */
}

#insuranceMenu {
     /* top: 0!important; */
}

#guidesToolsMenu {
     /* top: 0%!important; */
     border-top: 1px solid rgba(0, 0, 0, 0.22)!important;
     background-color: #D8F0F8!important;
}

.postsResourcesDiv {
	display: flex;
	flex-direction: column;
	vertical-align: middle;
	justify-content: space-evenly;
}

.tipsToolsImgDiv {
	text-align: center;
	align-items: center;
	display: flex;
	justify-content: center;
}

.tipsToolsImg {
	padding-left: 1rem;
	max-width: 100%;
	object-fit: contain;
	height: calc(80% + (100 - 80) * ((100vw - 1024px) / (1920 - 1024)));
	display: flex;
}

#resourcesMenu {
    z-index: 10!important;
    background-color: #FFFFFF;
/*     padding-top: 3rem;
    padding-bottom: 3rem; */
}

.resourceHeader {
    display: block;
    padding-top: 3rem;
    padding-bottom: 4px!important;
    margin-bottom: 4px!important;
    align-items: center!important;
    text-decoration: none;
    color: #004766;
    font-size: 18px;
    font-family: 'quicksand', 'sans-serif';
}

.resourceHeader:hover {
    color: #004766; 
}

.resourceItem {
    display: block;
    margin-top: 16px;
    color: #004766!important;
    text-decoration: none;
    font-family: 'quicksand', 'sans-serif';
}

.resourceItem:hover {
    text-decoration: underline;
    color: #00B1E7;
}

.findOut b {
    color: #004766!important;
    font-family: 'quicksand', 'sans-serif';
}

.findOut:hover {
    text-decoration: underline!important;
    color: #004766!important;
}

#mobileNavbar {
    z-index: 9999;
    background-color: #00B1E7!important;
}

.navbar-toggler-icon.animate-icon {
    animation: rotateAndFade 0.5s forwards;
	animation-duration: .5s;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes rotateAndFade {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0;
    }
}

.navbar-toggler-close .navbar-toggler-icon {
    background-image: url('https://coverme123.com/wp-content/uploads/2023/12/whiteCurvedX.png')!important; /* replace with the path to your close icon */
}

/* Animation for the close (X) icon */
@keyframes fadeInAndRotate {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: rotate(720deg);
        opacity: 1;
    }
}

/* Applying the animation with a delay when animate-icon class is present */
.navbar-toggler-close .navbar-toggler-icon.animate-icon {
    animation-name: fadeInAndRotate;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-fill-mode: forwards;
/*     animation-delay: 0.5s;  */
}

/* Animation for the close (X) icon */
@keyframes fadeOutAndRotate {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: rotate(-720deg);
        opacity: 1;
    }
}

.navbar-toggler-icon.animate-out {
    animation-name: fadeOutAndRotate;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-fill-mode: forwards;
}


  button.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}


.dropdown-push-down .dropdown-menu {
    position: static!important;
    transform: translate3d(0, 0, 0)!important;
    will-change: transform!important;
  }
  
  .dropdown-push-down .dropdown-item {
    white-space: pre-line!important;
    line-height: 1.5!important;
  }

  .dropdown-push-down .dropdown-menu.show {
    border: none;  /* Remove border */
}

.dropdown-push-down .dropdown-menu.show .dropdown-item {
    
}

#insuranceDropdown:focus-visible {
	box-shadow: none;
	outline: none;
}

#insuranceDropdown .nav-link .dropdown-toggle .show {
    background-color: red!important;
}

.nav-link.dropdown-toggle {
	position: relative;
}

.nav-link.dropdown-toggle::before {
	content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("https://coverme123.com/wp-content/uploads/2023/11/curvedX.png");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
	position: absolute;
	right: 20px;
	top: 40%;
	opacity: 0;

}

.nav-link.dropdown-toggle::after {
	content: "";
    display: inline-block;
    width: 16px;
    height: 12px;
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="5px" class="chevron"%3E%3Cg class="chevron__group"%3E%3Cpath d="M1.30834787,0.121426937 L4.87569247,3.68780701 C5.04143584,3.8541036 5.04143584,4.11557261 4.87569247,4.2818692 L4.2807853,4.87693487 C4.20364253,4.95546204 4.09599241,5 3.98333171,5 C3.87067101,5 3.76302089,4.95546204 3.68587812,4.87693487 L0.122730401,1.30754434 C-0.0409101338,1.14044787 -0.0409101338,0.880578628 0.122730401,0.713482155 L0.718686793,0.119419971 C0.79596299,0.0427616956 0.902628913,-0.000376468522 1.01396541,2.47569236e-06 C1.1253019,0.000381419907 1.2316441,0.0442445771 1.30834787,0.121426937 L1.30834787,0.121426937 Z" class="chevron__box chevron__box--left" /%3E%3Cpath d="M3.12493976,3.68899585 L6.68683713,0.123119938 C6.76404711,0.0445502117 6.8717041,3.56458529e-15 6.98436032,0 C7.09701655,-3.56458529e-15 7.20467353,0.0445502117 7.28188351,0.123119938 L7.87588228,0.717098143 C8.04137257,0.883371226 8.04137257,1.14480327 7.87588228,1.31107635 L4.31398491,4.87695226 C4.23695994,4.95546834 4.1294742,5 4.01698553,5 C3.90449685,5 3.79701111,4.95546834 3.71998614,4.87695226 L3.12493976,4.28197072 C2.95998402,4.11649361 2.95814736,3.85659624 3.12074929,3.68899585 L3.12493976,3.68899585 Z" class="chevron__box chevron__box--right" /%3E%3C/g%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
	position: absolute;
	right: 20px;
	top: 40%;
	

}

.dropdown-toggle::after {
	border: 0!important;
	vertical-align: middle!important;
	margin-left: 0!important;
	
}

.nav-link.dropdown-toggle.chevron-animate-in::before {
    animation-name: chevronSpinOut;
    animation-delay: 0s;
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.nav-link.dropdown-toggle.chevron-animate-in::after {
    animation-name: chevronSpinIn;
    animation-delay: 0s;
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* chevron spinning animations  */
@keyframes chevronSpinIn {
    0% {
        opacity: 1;
        transform: rotate(180deg);
    }

    to {
        opacity: 0;
        transform: rotate(360deg);
    }
}

@keyframes chevronSpinOut {
    0% {
        opacity: 0;
        transform: rotate(360deg);
    }

    to {
        opacity: 1;
        transform: rotate(720deg);
    }
}

.nav-link.dropdown-toggle.chevron-animate-out::before {
    animation-name: chevronComeBack;
    animation-delay: 0s;
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.nav-link.dropdown-toggle.chevron-animate-out::after {
    animation-name: xGoAway;
    animation-delay: 0s;
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* chevron spinning animations on way out  */
@keyframes chevronComeBack {
    0% {
        opacity: 1;
        transform: rotate(-180deg);
    }

    to {
        opacity: 0;
        transform: rotate(-360deg);
    }
}

@keyframes xGoAway {
    0% {
        opacity: 0;
        transform: rotate(-360deg);
    }

    to {
        opacity: 1;
        transform: rotate(-720deg);
    }
}




  
.red-background {
    background-color: red!important;
}


/* */
@media (max-width: 1024px) {
    .call-info {
        display: none;
    }
    
    .offcanvas-body {
        padding: 0!important;
    }
    .offcanvas {
        padding: 0!important;
    }

    .navbar-toggler {
        margin-left: auto;
        border: none!important;
        /* color: black!important; */
    }

    .offcanvas-header {
        display: none!important;
    }

    .button-close {
        justify-content: center!important;
        align-items: end!important;
    }

    .offcanvas-title {
        display: none!important;
    }

    .navbar-brand {
        padding-left: 20px;
    }


    .nav-item {
        border-bottom: 1px solid #A9A9A9;
        padding: 0;
    }

    .nav-item a {
        padding-left: 16px;
        padding-right: 16px;
    }

    .dropdown-item {
        padding-left: 16px!important;
        padding-right: 16px!important;
    }


    .nav-link {
        color: black!important;
        font-size: 18px!important;
        font-weight: bold;
    }

    #offcanvasNavbar {
        top: 56px; /* Adjust this value based on your navbar height */
    }
    .navbar-nav {
        line-height: 40px!important;
    }
	
	.offcanvas.offcanvas-end {
        border-left: none!important;
    }
	
	button#navbarToggler:focus {
		background-color: transparent !important;
	}
	
	button#navbarToggler:hover {
		background-color: transparent !important;
	}

	#navbarToggler {
		background-color: transparent!important;
	}

    
}



@media only screen and (max-width: 600px) {
    .offcanvas-body {
        width: 100%!important;
        padding: 0!important;
    }
    .offcanvas {
        width: 100%!important;
        padding: 0!important;
    }

    .navbar-brand {
        padding-left: 20px;
    }

}